Merge branch 'develop' into MAT-7099

MeasureAuthoringTool · Nov 27, 2024 · 7a38447 · 7a38447
2 parents 4055f6e + 24f5f67
commit 7a38447
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 88 deletions.
diff --git a/...lderPanel/codesSection/codesSubSection/savedCodesSubSection/SavedCodesSubSection.test.tsx b/...lderPanel/codesSection/codesSubSection/savedCodesSubSection/SavedCodesSubSection.test.tsx
@@ -141,12 +141,6 @@ describe("Saved Codes section component", () => {
 
     expect(getByTestId("saved-code-row-0")).toBeInTheDocument();
 
-    await waitFor(() => {
-      const selectButton = getByTestId(`select-action-0_apply`);
-      expect(selectButton).toBeInTheDocument();
-      userEvent.click(selectButton);
-    });
-
     const editButton = getByTestId(`edit-code-0`);
     expect(editButton).toBeInTheDocument();
 
@@ -184,11 +178,7 @@ describe("Saved Codes section component", () => {
         parsedCodesList={parsedCodesList}
       />
     );
-    await waitFor(() => {
-      const selectButton = getByTestId(`select-action-0_apply`);
-      expect(selectButton).toBeInTheDocument();
-      userEvent.click(selectButton);
-    });
+    await checkRows(2);
     const editButton = getByTestId(`edit-code-0`);
     userEvent.click(editButton);
     await waitFor(() => {
@@ -225,12 +215,6 @@ describe("Saved Codes section component", () => {
 
     expect(getByTestId("saved-code-row-0")).toBeInTheDocument();
 
-    await waitFor(() => {
-      const selectButton = getByTestId(`select-action-0_apply`);
-      expect(selectButton).toBeInTheDocument();
-      userEvent.click(selectButton);
-    });
-
     const editButton = getByTestId(`edit-code-0`);
     expect(editButton).toBeInTheDocument();
 
@@ -267,12 +251,6 @@ describe("Saved Codes section component", () => {
     );
     await checkRows(2);
 
-    await waitFor(() => {
-      const selectButton = getByTestId(`select-action-0_apply`);
-      expect(selectButton).toBeInTheDocument();
-      userEvent.click(selectButton);
-    });
-
     const removeButton = getByTestId(`remove-code-0`);
     expect(removeButton).toBeInTheDocument();
 
@@ -301,12 +279,6 @@ describe("Saved Codes section component", () => {
     );
     await checkRows(2);
 
-    await waitFor(() => {
-      const selectButton = getByTestId(`select-action-0_apply`);
-      expect(selectButton).toBeInTheDocument();
-      userEvent.click(selectButton);
-    });
-
     const removeButton = getByTestId(`remove-code-0`);
     expect(removeButton).toBeInTheDocument();
 
@@ -341,12 +313,6 @@ describe("Saved Codes section component", () => {
     );
     await checkRows(2);
 
-    await waitFor(() => {
-      const selectButton = getByTestId(`select-action-0_apply`);
-      expect(selectButton).toBeInTheDocument();
-      userEvent.click(selectButton);
-    });
-
     const removeButton = getByTestId(`remove-code-0`);
     expect(removeButton).toBeInTheDocument();
 

diff --git a/...qlBuilderPanel/codesSection/codesSubSection/savedCodesSubSection/SavedCodesSubSection.tsx b/...qlBuilderPanel/codesSection/codesSubSection/savedCodesSubSection/SavedCodesSubSection.tsx
@@ -22,6 +22,8 @@ import DoDisturbOutlinedIcon from "@mui/icons-material/DoDisturbOutlined";
 import DoNotDisturbOnIcon from "@mui/icons-material/DoNotDisturbOn";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import BorderColorOutlinedIcon from "@mui/icons-material/BorderColorOutlined";
 import useTerminologyServiceApi, {
   Code,
 } from "../../../../api/useTerminologyServiceApi";
@@ -109,8 +111,7 @@ export default function SavedCodesSubSection({
     setToastOpen(false);
   };
   const [loading, setLoading] = useState<boolean>(false);
-  const [optionsOpen, setOptionsOpen] = useState<boolean>(false);
-  const [anchorEl, setAnchorEl] = useState(null);
+
   const [selectedReferenceId, setSelectedReferenceId] = useState<string>(null);
   const [selectedCodeDetails, setSelectedCodeDetails] =
     useState<SelectedCodeDetails>(null);
@@ -146,9 +147,7 @@ export default function SavedCodesSubSection({
     selectedId,
     event: React.MouseEvent<HTMLButtonElement>
   ) => {
-    setOptionsOpen(true);
     setSelectedReferenceId(selectedId);
-    setAnchorEl(event.currentTarget);
     setSelectedCodeDetails(table.getRow(selectedId).original);
   };
 
@@ -220,20 +219,47 @@ export default function SavedCodesSubSection({
         header: "",
         accessorKey: "apply",
         cell: (row: any) => (
-          <div className="inline-flex gap-x-2">
+          <div className="inline-flex gap-x-2" style={{ width: "max-content" }}>
             {canEdit ? (
-              <button
-                className="action-button"
-                onClick={(e) => handleOpen(row.cell.row.id, e)}
-                tw="text-blue-600 hover:text-blue-900"
-                data-testid={`select-action-${row.cell.id}`}
-                aria-label={`select-action-${row.cell.id}`}
-              >
-                <div className="action">Select</div>
-                <div className="chevron-container">
-                  <ExpandMoreIcon />
-                </div>
-              </button>
+              <>
+                <ToolTippedIcon
+                  tooltipMessage="Remove"
+                  buttonProps={{
+                    "data-testid": `remove-code-${row.cell.row.id}`,
+                    "aria-label": `remove-code-${row.cell.row.id}`,
+                    size: "small",
+                    onClick: (e) => {
+                      setSelectedCodeDetails(
+                        table.getRow(row.cell.row.id).original
+                      );
+                      if (!isCQLUnchanged) {
+                        setDiscardDialogOpen(true);
+                      } else {
+                        setDeleteDialogModalOpen(true);
+                      }
+                    },
+                  }}
+                >
+                  <DeleteOutlineIcon color="error" />
+                </ToolTippedIcon>
+                <ToolTippedIcon
+                  tooltipMessage="Edit"
+                  buttonProps={{
+                    "data-testid": `edit-code-${row.cell.row.id}`,
+                    "aria-label": `edit-code-${row.cell.row.id}`,
+                    size: "small",
+                    onClick: (e) => {
+                      const selectedCode = table.getRow(
+                        row.cell.row.id
+                      ).original;
+                      setSelectedCodeDetails(selectedCode);
+                      handleEditCode(selectedCode);
+                    },
+                  }}
+                >
+                  <BorderColorOutlinedIcon color="primary" />
+                </ToolTippedIcon>
+              </>
             ) : (
               ""
             )}
@@ -302,24 +328,17 @@ export default function SavedCodesSubSection({
     );
   };
 
-  const handleClose = () => {
-    setOptionsOpen(false);
-    setSelectedReferenceId(null);
-    setAnchorEl(null);
-  };
-
   const toggleEditCodeDialogState = () => {
     setOpenEditCodeDialog(!open);
   };
 
-  const handleEditCode = () => {
-    setOptionsOpen(false);
+  const handleEditCode = (selectedCode) => {
     setOpenEditCodeDialog(true);
     const parsedCode = parsedCodesList.find(
-      (parsedCode) => parsedCode.code === selectedCodeDetails.name
+      (parsedCode) => parsedCode.code === selectedCode.name
     );
     setSelectedCodeDetails({
-      ...selectedCodeDetails,
+      ...selectedCode,
       suffix: parsedCode?.suffix,
       versionIncluded: parsedCode.versionIncluded,
     });
@@ -400,32 +419,6 @@ export default function SavedCodesSubSection({
             </div>
           )}
         </tbody>
-
-        <Popover
-          optionsOpen={optionsOpen}
-          anchorEl={anchorEl}
-          handleClose={handleClose}
-          canEdit={true}
-          editViewSelectOptionProps={{
-            label: "Remove",
-            toImplementFunction: () => {
-              setOptionsOpen(false);
-              if (!isCQLUnchanged) {
-                setDiscardDialogOpen(true);
-              } else {
-                setDeleteDialogModalOpen(true);
-              }
-            },
-            dataTestId: `remove-code-${selectedReferenceId}`,
-          }}
-          otherSelectOptionProps={[
-            {
-              label: "Edit",
-              toImplementFunction: () => handleEditCode(),
-              dataTestId: `edit-code-${selectedReferenceId}`,
-            },
-          ]}
-        />
       </table>
 
       <EditCodeDetailsDialog