Merge pull request #639 from MeasureAuthoringTool/MAT-7084

MAT-7084: Action Center Delete Button

src/api/useMeasureServiceApi.tsx

@@ -96,6 +96,14 @@ export class MeasureServiceApi {
     });
   }
 
+  async deleteMeasure(id: string): Promise<Response> {
+    return await axios.delete(`${this.baseUrl}/measures/${id}/delete`, {
+      headers: {
+        Authorization: `Bearer ${this.getAccessToken()}`,
+      },
+    });
+  }
+
   async createGroup(group: Group, measureId: string): Promise<Group> {
     try {
       const response = await axios.post<Group>(

src/components/measureLanding/measureList/MeasureList.test.tsx

@@ -59,6 +59,7 @@ const mockMeasureServiceApi = {
     .mockResolvedValue(oneItemResponse),
   fetchMeasures: jest.fn().mockResolvedValue(oneItemResponse),
   createVersion: jest.fn().mockResolvedValue({}),
+  deleteMeasure: jest.fn().mockResolvedValue({}),
   checkNextVersionNumber: jest.fn().mockReturnValue("1.0.000"),
   checkValidVersion: jest.fn().mockResolvedValue({}),
   fetchMeasureDraftStatuses: jest.fn().mockResolvedValue({

src/components/measureLanding/measureList/MeasureList.tsx

@@ -45,6 +45,7 @@ import TruncateText from "./TruncateText";
 import AssociateCmsIdAction from "./actionCenter/associateCmsIdAction/AccociateCmsIdAction";
 import AssociateCmsIdDialog from "./associateCmsIdDialog/AssociateCmsIdDialog";
 import ActionCenter from "./actionCenter/ActionCenter";
+import DeleteDialog from "../../editMeasure/DeleteDialog";
 
 const searchInputStyle = {
   borderRadius: "3px",
@@ -126,6 +127,8 @@ export default function MeasureList(props: {
   );
 
   const [versionHelperText, setVersionHelperText] = useState("");
+  const [deleteMeasureDialog, setDeleteMeasureDialog] =
+    useState<boolean>(false);
   const [draftMeasureDialog, setDraftMeasureDialog] = useState({
     open: false,
   });
@@ -815,6 +818,31 @@ export default function MeasureList(props: {
       });
   };
 
+  const deleteMeasure = async () => {
+    try {
+      const result = await measureServiceApi.deleteMeasure(
+        targetMeasure?.current.id
+      );
+      if (result.status === 200) {
+        setToastType("success");
+        setToastMessage("Measure successfully deleted");
+        setToastOpen(true);
+        doUpdateList();
+        setDeleteMeasureDialog(false);
+      }
+    } catch (e) {
+      if (e?.response?.data) {
+        const { message } = e.response.data;
+        setToastMessage(message);
+      } else {
+        setToastMessage(e.toString());
+      }
+      setToastType("danger");
+      setToastOpen(true);
+      setDeleteMeasureDialog(false);
+    }
+  };
+
   const associateCmsId = () => {
     setOpenAssociateCmsIdDialog(true);
   };
@@ -898,6 +926,8 @@ export default function MeasureList(props: {
                 associateCmsId={associateCmsId}
                 setCreateVersionDialog={setCreateVersionDialog}
                 setDraftMeasureDialog={setDraftMeasureDialog}
+                setDeleteMeasureDialog={setDeleteMeasureDialog}
+                deleteMeasure={deleteMeasure}
               />
             )}
         </div>
@@ -1047,6 +1077,12 @@ export default function MeasureList(props: {
           handleContinueDialog={handleContinueDialog}
           handleCancelDialog={handleCancelDialog}
         />
+        <DeleteDialog
+          open={deleteMeasureDialog}
+          onClose={() => setDeleteMeasureDialog(false)}
+          measureName={targetMeasure?.current?.measureName}
+          deleteMeasure={deleteMeasure}
+        />
         <AssociateCmsIdDialog
           measures={selectedMeasures}
           onClose={() => setOpenAssociateCmsIdDialog(false)}

src/components/measureLanding/measureList/actionCenter/ActionCenter.test.tsx

@@ -13,6 +13,7 @@ jest.mock("@madie/madie-util", () => ({
   checkUserCanEdit: jest.fn(),
   useFeatureFlags: jest.fn(),
   useOktaTokens: jest.fn(),
+  fetchMeasureDraftStatuses: jest.fn(),
 }));
 
 jest.mock("../../../../api/useMeasureServiceApi");
@@ -26,6 +27,7 @@ const mockFeatureFlags = {
 };
 const mockGetUserName = jest.fn(() => "test user");
 const mockCheckUserCanEdit = jest.fn();
+const fetchMeasureDraftStatuses = jest.fn();
 
 const mockMeasureSet = {
   cmsId: "124",
@@ -40,6 +42,13 @@ const qdmMeasure = {
   measureMetaData: { draft: true },
 } as Measure;
 
+const qdmMeasureVersion = {
+  model: Model.QDM_5_6,
+  measureSet: mockMeasureSet,
+  measureSetId: "1-2-3-4",
+  measureMetaData: { draft: false },
+} as Measure;
+
 const qiCoreMeasure = {
   model: Model.QICORE,
   measureSet: { ...mockMeasureSet, cmsId: null },
@@ -105,6 +114,66 @@ describe("ActionCenter", () => {
     });
   });
 
+  it("should call updateTargetMeasure and setDraftMeasureDialog when draft action is triggered", async () => {
+    const updateTargetMeasure = jest.fn();
+    const setDraftMeasureDialog = jest.fn();
+    const fetchMeasureDraftStatuses = jest.fn().mockResolvedValue({
+      "1-2-3-4": true,
+    });
+
+    (useMeasureServiceApi as jest.Mock).mockReturnValue({
+      fetchMeasureDraftStatuses,
+    });
+
+    render(
+      <ActionCenter
+        measures={[qdmMeasureVersion]}
+        associateCmsId={jest.fn()}
+        exportMeasure={jest.fn()}
+        updateTargetMeasure={updateTargetMeasure}
+        setCreateVersionDialog={jest.fn()}
+        setDraftMeasureDialog={setDraftMeasureDialog}
+        setDeleteMeasureDialog={jest.fn()}
+        deleteMeasure={jest.fn()}
+      />
+    );
+
+    const draftButton = await screen.findByTestId("draft-action-btn");
+    expect(draftButton).toBeEnabled();
+    fireEvent.click(draftButton);
+
+    expect(updateTargetMeasure).toHaveBeenCalledWith(qdmMeasureVersion);
+    expect(setDraftMeasureDialog).toHaveBeenCalledWith({
+      open: true,
+    });
+  });
+
+  it("should call updateTargetMeasure and setDeleteMeasureDialog when delete action is triggered", async () => {
+    const updateTargetMeasure = jest.fn();
+    const setDeleteMeasureDialog = jest.fn();
+    const deleteMeasure = jest.fn();
+
+    render(
+      <ActionCenter
+        measures={[qdmMeasure]}
+        associateCmsId={jest.fn()}
+        exportMeasure={jest.fn()}
+        updateTargetMeasure={updateTargetMeasure}
+        setCreateVersionDialog={jest.fn()}
+        setDraftMeasureDialog={jest.fn()}
+        setDeleteMeasureDialog={setDeleteMeasureDialog}
+        deleteMeasure={deleteMeasure}
+      />
+    );
+
+    const draftButton = await screen.findByTestId("delete-action-btn");
+    expect(draftButton).toBeEnabled();
+    fireEvent.click(draftButton);
+
+    expect(updateTargetMeasure).toHaveBeenCalledWith(qdmMeasure);
+    expect(setDeleteMeasureDialog).toHaveBeenCalledWith(true);
+  });
+
   it("should call exportMeasure when export action is triggered", () => {
     const exportMeasure = jest.fn();
     const updateTargetMeasure = jest.fn();

src/components/measureLanding/measureList/actionCenter/ActionCenter.tsx

@@ -19,6 +19,8 @@ interface PropTypes {
   updateTargetMeasure: (Measure) => void;
   setCreateVersionDialog: any;
   setDraftMeasureDialog: any;
+  setDeleteMeasureDialog: any;
+  deleteMeasure: () => void;
 }
 export default function ActionCenter(props: PropTypes) {
   const featureFlags = useFeatureFlags();
@@ -51,6 +53,13 @@ export default function ActionCenter(props: PropTypes) {
     }
   }, [props.measures, props.exportMeasure, props.updateTargetMeasure]);
 
+  const deleteMeasure = useCallback(() => {
+    if (props.measures?.length === 1) {
+      props.updateTargetMeasure(props.measures[0]);
+      props.setDeleteMeasureDialog(true);
+    }
+  }, [props.measures, props.updateTargetMeasure, props.setDeleteMeasureDialog]);
+
   const isSelectedMeasureEditable = (measures) => {
     return (
       measures &&
@@ -71,7 +80,7 @@ export default function ActionCenter(props: PropTypes) {
     <div data-testid="action-center">
       <DeleteAction
         measures={props.measures}
-        onClick={() => {}}
+        onClick={deleteMeasure}
         canEdit={canEdit}
       />
       <ExportAction measures={props.measures} onClick={exportMeasure} />

src/components/measureLanding/measureList/actionCenter/deleteAction/DeleteAction.test.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import DeleteAction, { DEL_MEASURE, NOTHING_SELECTED } from "./DeleteAction";
 import { Measure, MeasureSet, Model } from "@madie/madie-models";
-import userEvent from "@testing-library/user-event";
 
 const mockUser = "test user";
 jest.mock("@madie/madie-util", () => ({

src/components/measureLanding/measureList/actionCenter/deleteAction/DeleteAction.tsx

@@ -3,9 +3,10 @@ import { IconButton } from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
 import { Measure, Model } from "@madie/madie-models";
 import { useOktaTokens } from "@madie/madie-util";
-// import DeleteOutlinedIcon from "../../../../../icons/IconDelete";
+import { Toast } from "@madie/madie-design-system/dist/react";
 import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
 import { grey, red } from "@mui/material/colors";
+import DeleteDialog from "../../../../editMeasure/DeleteDialog";
 
 interface PropTypes {
   measures: Measure[];
@@ -18,11 +19,12 @@ export const DEL_MEASURE = "Delete measure";
 
 export default function DeleteAction(props: PropTypes) {
   const { measures, canEdit } = props;
+  const { getUserName } = useOktaTokens();
   const [disableDeleteBtn, setDisableDeleteBtn] = useState(true);
   const [tooltipMessage, setTooltipMessage] = useState(NOTHING_SELECTED);
-
   const validateDeleteActionState = useCallback(() => {
     // set button state to disabled by default
+
     setDisableDeleteBtn(true);
     setTooltipMessage(NOTHING_SELECTED);
     if (
@@ -48,7 +50,7 @@ export default function DeleteAction(props: PropTypes) {
     >
       <span>
         <IconButton
-          onClick={props.onClick}
+          onClick={() => props.onClick()}
           disabled={disableDeleteBtn}
           data-testid="delete-action-btn"
         >

src/components/measureLanding/measureList/actionCenter/draftAction/DraftAction.tsx

@@ -38,6 +38,7 @@ export default function DraftAction(props: PropTypes) {
     // set button state to disabled by default
     setDisableDraftBtn(true);
     setTooltipMessage(NOTHING_SELECTED);
+
     if (
       measures?.length === 1 &&
       !measures[0]?.measureMetaData.draft &&