diff --git a/src/components/common/CloneIcon.tsx b/src/components/common/CloneIcon.tsx new file mode 100644 index 000000000..df818610b --- /dev/null +++ b/src/components/common/CloneIcon.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +const CloneIcon = ({ color }) => { + return ( + + + + + + ); +}; + +export default CloneIcon; diff --git a/src/components/common/EditIcon.tsx b/src/components/common/EditIcon.tsx new file mode 100644 index 000000000..44447e315 --- /dev/null +++ b/src/components/common/EditIcon.tsx @@ -0,0 +1,24 @@ +import React from "react"; + +const EditIcon = ({ color }) => { + return ( + + + + + ); +}; + +export default EditIcon; diff --git a/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DataElementsTable.test.tsx b/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DataElementsTable.test.tsx index 91202fb61..248bc78d8 100644 --- a/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DataElementsTable.test.tsx +++ b/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DataElementsTable.test.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { Measure } from "@madie/madie-models"; import "@testing-library/jest-dom"; import userEvent from "@testing-library/user-event"; -import { render, screen, within } from "@testing-library/react"; +import { render, screen, within, waitFor } from "@testing-library/react"; import DataElementsTable from "./DataElementsTable"; import DataTypeCell from "./DataTypeCell"; import TimingRow from "./TimingRow"; @@ -392,8 +392,17 @@ describe("Data Elements Table", () => { renderDataElementsTable([dataEl[0], dataEl[1]], mockOnDelete, mockOnView); expect(queryAllByText("Emergency Department Visit").length).toEqual(2); // click action button - userEvent.click(screen.getByTestId(`view-element-btn-${dataEl[0].id}`)); - expect(getByTestId("popover-content")).toBeInTheDocument(); + const button = screen.getByRole("button", { + name: `action-center-${dataEl[0].id}`, + }); + expect(button).toBeInTheDocument(); + userEvent.click(button); + + await waitFor(() => { + expect( + screen.getByTestId(`action-center-${dataEl[0].id}`) + ).toBeInTheDocument(); + }); // click delete action userEvent.click(screen.getByTestId(`delete-element-${dataEl[0].id}`)); expect(mockOnDelete).toHaveBeenCalledWith(dataEl[0].id); diff --git a/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.test.tsx b/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.test.tsx index 9390e60a8..2496d56b5 100644 --- a/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.test.tsx +++ b/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.test.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { render, screen, within } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import DataElementActions from "./DataElementActions"; import userEvent from "@testing-library/user-event"; @@ -42,11 +42,17 @@ describe("DatElementActions", () => { /> ); - const viewButton = screen.getByRole("button", { name: "View" }); + const viewButton = screen.getByRole("button", { + name: `action-center-exampleId`, + }); expect(viewButton).toBeInTheDocument(); userEvent.click(viewButton); - const popOver = await screen.findByTestId("popover-content"); - const editButton = within(popOver).getByRole("button", { name: "Edit" }); + + await waitFor(() => { + expect(screen.getByTestId(`action-center-exampleId`)).toBeInTheDocument(); + }); + + const editButton = screen.getByTestId("edit-element-exampleId"); userEvent.click(editButton); expect(mockOnView).toHaveBeenCalledTimes(1); }); @@ -63,13 +69,18 @@ describe("DatElementActions", () => { /> ); - const viewButton = screen.getByRole("button", { name: "View" }); + const viewButton = screen.getByRole("button", { + name: `action-center-exampleId`, + }); expect(viewButton).toBeInTheDocument(); userEvent.click(viewButton); - const popOver = await screen.findByTestId("popover-content"); - const cloneButton = within(popOver).getByRole("button", { - name: "Clone", + + await waitFor(() => { + expect(screen.getByTestId(`action-center-exampleId`)).toBeInTheDocument(); }); + + const cloneButton = screen.getByTestId("clone-element-exampleId"); + userEvent.click(cloneButton); expect(mockOnClone).toHaveBeenCalledTimes(1); }); @@ -86,13 +97,18 @@ describe("DatElementActions", () => { /> ); - const viewButton = screen.getByRole("button", { name: "View" }); + const viewButton = screen.getByRole("button", { + name: `action-center-exampleId`, + }); expect(viewButton).toBeInTheDocument(); userEvent.click(viewButton); - const popOver = await screen.findByTestId("popover-content"); - const deleteButton = within(popOver).getByRole("button", { - name: "Delete", + + await waitFor(() => { + expect(screen.getByTestId(`action-center-exampleId`)).toBeInTheDocument(); }); + + const deleteButton = screen.getByTestId("delete-element-exampleId"); + userEvent.click(deleteButton); expect(mockOnDelete).toHaveBeenCalledTimes(1); }); diff --git a/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.tsx b/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.tsx index 1dbb8849d..a639e0c3a 100644 --- a/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.tsx +++ b/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.tsx @@ -1,8 +1,10 @@ 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"; +import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined"; +import MadieSpeedDial from "./MadieSpeedDial"; +import CloneIcon from "../../../../../../../../../../common/CloneIcon"; +import EditIcon from "../../../../../../../../../../common/EditIcon"; type DataElementActionsProps = { elementId: string; @@ -15,86 +17,49 @@ type DataElementActionsProps = { export default function DataElementActions(props: DataElementActionsProps) { const { elementId, canView, onDelete, onView, canEdit, onClone } = props; - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - - const handleViewButtonClick = (event: React.MouseEvent) => { - if (canEdit) { - event.preventDefault(); - setAnchorEl(event.currentTarget); - } else { - onView(); - } - }; - - const handlePopOverClose = () => { - setAnchorEl(null); - }; - - const deleteDataElement = () => { - handlePopOverClose(); - onDelete(elementId); - }; - - const additionalActions = canEdit - ? [ - { - label: "Clone", - toImplementFunction: () => { - handlePopOverClose(); - onClone(); - }, - dataTestId: `clone-element-${elementId}`, - }, - { - label: "Delete", - toImplementFunction: deleteDataElement, - dataTestId: `delete-element-${elementId}`, - }, - ] - : []; return (
{canEdit ? ( - + , + name: "Edit element", + onClick: onView, + dataTestId: `edit-element-${elementId}`, + }, + { + icon: , + name: "Delete element", + onClick: () => { + onDelete(elementId); + }, + dataTestId: `delete-element-${elementId}`, + }, + { + icon: , + name: "Clone element", + onClick: () => { + onClone(elementId); + }, + dataTestId: `clone-element-${elementId}`, + }, + ]} + /> ) : ( + // Case where user can only View. )} - { - return onView(); - }, - dataTestId: `edit-element-${elementId}`, - }} - additionalSelectOptionProps={additionalActions} - />
); } diff --git a/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/MadieSpeedDial.tsx b/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/MadieSpeedDial.tsx new file mode 100644 index 000000000..a281bfc5c --- /dev/null +++ b/src/components/editMeasure/testCases/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/MadieSpeedDial.tsx @@ -0,0 +1,86 @@ +import React, { useState } from "react"; +import { SpeedDial, SpeedDialAction } from "@mui/material"; + +type Action = { + icon: React.ReactNode; + name: any; + onClick?: Function; + dataTestId?: string; +}; +interface MadieSpeedDialProps { + actions?: Action[]; + dataTestId?: any; +} + +const MadieSpeedDial = (props: MadieSpeedDialProps) => { + const { actions, dataTestId } = props; + const [open, setOpen] = useState(false); + + return ( +
+ +
•
+
•
+
•
+
+ } + direction="right" + open={open} + onClick={() => setOpen((prevOpen) => !prevOpen)} + > + {actions?.map((action) => ( + { + setOpen(false); + action.onClick(); + }} + sx={{ + boxShadow: "none", + transition: "opacity 0s, visibility 0s", + margin: 0, + marginRight: 1, + transitionDelay: "0s", + }} + /> + ))} + + + ); +}; + +export default MadieSpeedDial; diff --git a/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/ElementEditor.tsx b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/ElementEditor.tsx index e31643910..56b8717e8 100644 --- a/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/ElementEditor.tsx +++ b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/ElementEditor.tsx @@ -33,7 +33,6 @@ const ElementEditor = ({ selectedResource, currentPath ); - // We will hit all direct children normally with the typeEditor however not every second child; const currentDepth = elementDefinition?.path.split(".").length; return (