Merge branch 'develop' into MAT-7529

MeasureAuthoringTool · Dec 30, 2024 · 37994b3 · 37994b3
2 parents 8d08320 + 142a149
commit 37994b3
Show file tree

Hide file tree

Showing 11 changed files with 443 additions and 84 deletions.
diff --git a/src/components/common/CloneIcon.tsx b/src/components/common/CloneIcon.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+const CloneIcon = ({ color }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill={color}
+    >
+      <path
+        d="M1.42857 1.42857H12.8571V4.28571H14.2857V1.42857C14.2857 1.04969 14.1352 0.686328 13.8673 0.418419C13.5994 0.15051 13.236 0 12.8571 0H1.42857C1.04969 0 0.686328 0.15051 0.418419 0.418419C0.15051 0.686328 0 1.04969 0 1.42857V12.8571C0 13.236 0.15051 13.5994 0.418419 13.8673C0.686328 14.1352 1.04969 14.2857 1.42857 14.2857H4.28571V12.8571H1.42857V1.42857Z"
+        fill="#0073C8"
+      />
+      <path
+        d="M18.571 5.71436H7.14244C6.76356 5.71436 6.4002 5.86487 6.13229 6.13277C5.86438 6.40068 5.71387 6.76405 5.71387 7.14293V18.5715C5.71387 18.9504 5.86438 19.3137 6.13229 19.5817C6.4002 19.8496 6.76356 20.0001 7.14244 20.0001H18.571C18.9499 20.0001 19.3133 19.8496 19.5812 19.5817C19.8491 19.3137 19.9996 18.9504 19.9996 18.5715V7.14293C19.9996 6.76405 19.8491 6.40068 19.5812 6.13277C19.3133 5.86487 18.9499 5.71436 18.571 5.71436ZM18.571 18.5715H7.14244V7.14293H18.571V18.5715Z"
+        fill="#0073C8"
+      />
+      <path
+        d="M12.1427 17.1427H13.5713V13.5713H17.1427V12.1427H13.5713V8.57129H12.1427V12.1427H8.57129V13.5713H12.1427V17.1427Z"
+        fill="#0073C8"
+      />
+    </svg>
+  );
+};
+
+export default CloneIcon;
diff --git a/src/components/common/EditIcon.tsx b/src/components/common/EditIcon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const EditIcon = ({ color }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill={color}
+    >
+      <path
+        d="M16.0007 18.6669H1.33339V4.00122H10.1471L11.4805 2.66797H1.33339C0.979754 2.66797 0.640601 2.80844 0.390541 3.05847C0.140482 3.3085 0 3.64762 0 4.00122V18.6669C0 19.0205 0.140482 19.3596 0.390541 19.6097C0.640601 19.8597 0.979754 20.0002 1.33339 20.0002H16.0007C16.3543 20.0002 16.6935 19.8597 16.9436 19.6097C17.1936 19.3596 17.3341 19.0205 17.3341 18.6669V8.66758L16.0007 10.0008V18.6669Z"
+        fill="#0073C8"
+      />
+      <path
+        d="M19.6846 2.56191L17.4378 0.315392C17.3381 0.215418 17.2196 0.136099 17.0892 0.0819787C16.9588 0.0278582 16.819 0 16.6778 0C16.5365 0 16.3967 0.0278582 16.2663 0.0819787C16.1359 0.136099 16.0174 0.215418 15.9177 0.315392L6.77732 9.50813L6.03729 12.7146C6.00576 12.87 6.00907 13.0305 6.04699 13.1845C6.08491 13.3385 6.15649 13.4822 6.25658 13.6052C6.35667 13.7282 6.48279 13.8275 6.62586 13.896C6.76892 13.9645 6.92539 14.0004 7.084 14.0012C7.16598 14.0102 7.2487 14.0102 7.33068 14.0012L10.5642 13.2879L19.6846 4.08181C19.7845 3.98211 19.8639 3.86367 19.918 3.73326C19.9721 3.60286 20 3.46305 20 3.32186C20 3.18067 19.9721 3.04087 19.918 2.91046C19.8639 2.78006 19.7845 2.66161 19.6846 2.56191ZM9.87079 12.0546L7.43068 12.5946L7.99737 10.1748L14.8777 3.24853L16.7578 5.12841L9.87079 12.0546ZM17.5111 4.37513L15.631 2.49525L16.6644 1.44198L18.5578 3.3352L17.5111 4.37513Z"
+        fill="#0073C8"
+      />
+    </svg>
+  );
+};
+
+export default EditIcon;
diff --git a/...tTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DataElementsTable.test.tsx b/...tTestCase/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/...nel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.test.tsx b/...nel/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/...eftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.tsx b/...eftPanel/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 | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-
-  const handleViewButtonClick = (event: React.MouseEvent<HTMLElement>) => {
-    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 (
     <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>
+        <MadieSpeedDial
+          dataTestId={`action-center-${elementId}`}
+          actions={[
+            {
+              icon: <EditIcon color="#0073C8" />,
+              name: "Edit element",
+              onClick: onView,
+              dataTestId: `edit-element-${elementId}`,
+            },
+            {
+              icon: <DeleteOutlinedIcon sx={{ color: "#D92F2F" }} />,
+              name: "Delete element",
+              onClick: () => {
+                onDelete(elementId);
+              },
+              dataTestId: `delete-element-${elementId}`,
+            },
+            {
+              icon: <CloneIcon color="#0073C8" />,
+              name: "Clone element",
+              onClick: () => {
+                onClone(elementId);
+              },
+              dataTestId: `clone-element-${elementId}`,
+            },
+          ]}
+        />
       ) : (
+        // Case where user can only View.
         <Button
           id={`view-element-btn-${elementId}`}
           data-testid={`view-element-btn-${elementId}`}
-          onClick={handleViewButtonClick}
+          onClick={onView}
           loading={!canView} //disabled state
           variant="primary"
         >
           View
         </Button>
       )}
-      <DataElementsTablePopover
-        id={`view-element-menu-${elementId}`}
-        anchorEl={anchorEl}
-        optionsOpen={open}
-        handleClose={handlePopOverClose}
-        canEdit={true}
-        editSelectOptionProps={{
-          label: "Edit",
-          toImplementFunction: () => {
-            return onView();
-          },
-          dataTestId: `edit-element-${elementId}`,
-        }}
-        additionalSelectOptionProps={additionalActions}
-      />
     </div>
   );
 }
diff --git a/...dm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/MadieSpeedDial.tsx b/...dm/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 (
+    <div
+      style={{
+        color: "#0073C8",
+      }}
+    >
+      <SpeedDial
+        ariaLabel={dataTestId ? dataTestId : "action-center"}
+        data-testId={dataTestId ? dataTestId : "action-center-button"}
+        sx={{
+          pointerEvents: "all",
+          "& .MuiSpeedDial-fab": {
+            width: 40,
+            height: 40,
+            backgroundColor: "white",
+            color: "grey",
+            border: "solid 1px #0073C8",
+            boxShadow: "none",
+            "&:hover": {
+              backgroundColor: "#f0f0f0",
+            },
+          },
+        }}
+        icon={
+          <div
+            data-testid="action-center-actual-icon"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "transform 0.3s",
+              transform: open ? "rotate(90deg)" : "none",
+            }}
+          >
+            <div style={{ margin: "0 2px", color: "#0073C8" }}>•</div>
+            <div style={{ margin: "0 2px", color: "#0073C8" }}>•</div>
+            <div style={{ margin: "0 2px", color: "#0073C8" }}>•</div>
+          </div>
+        }
+        direction="right"
+        open={open}
+        onClick={() => setOpen((prevOpen) => !prevOpen)}
+      >
+        {actions?.map((action) => (
+          <SpeedDialAction
+            key={action.name}
+            icon={action.icon}
+            tooltipTitle={action.name}
+            data-testid={action?.dataTestId}
+            onClick={() => {
+              setOpen(false);
+              action.onClick();
+            }}
+            sx={{
+              boxShadow: "none",
+              transition: "opacity 0s, visibility 0s",
+              margin: 0,
+              marginRight: 1,
+              transitionDelay: "0s",
+            }}
+          />
+        ))}
+      </SpeedDial>
+    </div>
+  );
+};
+
+export default MadieSpeedDial;
diff --git a/...es/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/ElementEditor.tsx b/...es/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 (