This repository has been archived by the owner on Dec 18, 2024. It is now read-only.
generated from MeasureAuthoringTool/madie-frontend-template
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #506 from MeasureAuthoringTool/feature/MAT-5981
Feature/mat 5981
- Loading branch information
Showing
6 changed files
with
175 additions
and
100 deletions.
There are no files selected for viewing
73 changes: 0 additions & 73 deletions
73
...s/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DatElementActions.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
72 changes: 72 additions & 0 deletions
72
...nel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import * as React from "react"; | ||
| import { render, screen, within } from "@testing-library/react"; | ||
| import DataElementActions from "./DataElementActions"; | ||
| import userEvent from "@testing-library/user-event"; | ||
|
|
||
| const mockOnDelete = jest.fn(); | ||
| const mockOnView = jest.fn(); | ||
|
|
||
| describe("DatElementActions", () => { | ||
| afterEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| it("Should display only View action button for a non owner", () => { | ||
| render( | ||
| <DataElementActions | ||
| elementId={"exampleId"} | ||
| canView={true} | ||
| onDelete={mockOnDelete} | ||
| onView={mockOnView} | ||
| canEdit={false} | ||
| /> | ||
| ); | ||
|
|
||
| const viewButton = screen.getByRole("button", { name: "View" }); | ||
| expect(viewButton).toBeInTheDocument(); | ||
| userEvent.click(viewButton); | ||
| expect(mockOnView).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| it("Should display View action button along with popover for the owner", async () => { | ||
| render( | ||
| <DataElementActions | ||
| elementId={"exampleId"} | ||
| canView={true} | ||
| onDelete={mockOnDelete} | ||
| onView={mockOnView} | ||
| canEdit={true} | ||
| /> | ||
| ); | ||
|
|
||
| const viewButton = screen.getByRole("button", { name: "View" }); | ||
| expect(viewButton).toBeInTheDocument(); | ||
| userEvent.click(viewButton); | ||
| const popOver = await screen.findByTestId("popover-content"); | ||
| const editButton = within(popOver).getByRole("button", { name: "Edit" }); | ||
| userEvent.click(editButton); | ||
| expect(mockOnView).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| it("Should display the delete button if the user is owner and deletes a dataElement when clicked", async () => { | ||
| render( | ||
| <DataElementActions | ||
| elementId={"exampleId"} | ||
| canView={true} | ||
| onDelete={mockOnDelete} | ||
| onView={mockOnView} | ||
| canEdit={true} | ||
| /> | ||
| ); | ||
|
|
||
| const viewButton = screen.getByRole("button", { name: "View" }); | ||
| expect(viewButton).toBeInTheDocument(); | ||
| userEvent.click(viewButton); | ||
| const popOver = await screen.findByTestId("popover-content"); | ||
| const deleteButton = within(popOver).getByRole("button", { | ||
| name: "Delete", | ||
| }); | ||
| userEvent.click(deleteButton); | ||
| expect(mockOnDelete).toHaveBeenCalledTimes(1); | ||
| }); | ||
| }); |
90 changes: 90 additions & 0 deletions
90
...eftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import React from "react"; | ||
| import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; | ||
| import "../DataElementsTable.scss"; | ||
| import { Button } from "@madie/madie-design-system/dist/react"; | ||
| import DataElementsTablePopover from "./DataElementsTablePopover"; | ||
|
|
||
| type DataElementActionsProps = { | ||
| elementId: string; | ||
| canView: boolean; | ||
| onDelete: Function; | ||
| onView: Function; | ||
| canEdit: boolean; | ||
| }; | ||
|
|
||
| export default function DataElementActions(props: DataElementActionsProps) { | ||
| const { elementId, canView, onDelete, onView, canEdit } = props; | ||
| const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); | ||
| const open = Boolean(anchorEl); | ||
|
|
||
| const handleViewButtonClick = (event: React.MouseEvent<HTMLElement>) => { | ||
| if (canEdit) { | ||
| event.preventDefault(); | ||
| setAnchorEl(event.currentTarget); | ||
| } else { | ||
| onView(); | ||
| } | ||
| }; | ||
|
|
||
| const handleClose = () => { | ||
| setAnchorEl(null); | ||
| }; | ||
|
|
||
| const deleteDataElement = () => { | ||
| handleClose(); | ||
| onDelete(elementId); | ||
| }; | ||
|
|
||
| const deleteElement = canEdit | ||
| ? { | ||
| label: "Delete", | ||
| toImplementFunction: deleteDataElement, | ||
| dataTestId: `delete-element-${elementId}`, | ||
| } | ||
| : {}; | ||
|
|
||
| return ( | ||
| <div> | ||
| {canEdit ? ( | ||
| <Button | ||
| id={`view-element-btn-${elementId}`} | ||
| data-testid={`view-element-btn-${elementId}`} | ||
| className="view-with-dropdown-button" | ||
| aria-controls={open ? `view-element-menu-${elementId}` : undefined} | ||
| aria-haspopup="true" | ||
| aria-expanded={open ? "true" : undefined} | ||
| onClick={handleViewButtonClick} | ||
| > | ||
| <div>View</div> | ||
| <ExpandMoreIcon /> | ||
| </Button> | ||
| ) : ( | ||
| <Button | ||
| id={`view-element-btn-${elementId}`} | ||
| data-testid={`view-element-btn-${elementId}`} | ||
| onClick={handleViewButtonClick} | ||
| loading={!canView} //disabled state | ||
| variant="primary" | ||
| > | ||
| View | ||
| </Button> | ||
| )} | ||
| <DataElementsTablePopover | ||
| id={`view-element-menu-${elementId}`} | ||
| anchorEl={anchorEl} | ||
| optionsOpen={open} | ||
| handleClose={handleClose} | ||
| canEdit={true} | ||
| canView={canView} | ||
| editSelectOptionProps={{ | ||
| label: "Edit", | ||
| toImplementFunction: () => { | ||
| return onView(); | ||
| }, | ||
| dataTestId: `edit-element-${elementId}`, | ||
| }} | ||
| additionalSelectOptionProps={[deleteElement]} | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters