MAT-7935 view only definitions tab

MeasureAuthoringTool · Dec 16, 2024 · 0a0eaa8 · 0a0eaa8
1 parent 5ce034a
commit 0a0eaa8
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 78 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/CqlBuilderPanel/CqlBuilderPanel.tsx b/src/CqlBuilderPanel/CqlBuilderPanel.tsx
@@ -240,7 +240,7 @@ export default function CqlBuilderPanel({
 
           {activeTab === "definitions" && (
             <DefinitionsSection
-              canEdit={canEdit}
+              canEdit={false}
               handleApplyDefinition={handleApplyDefinition}
               handleDefinitionDelete={handleDefinitionDelete}
               cqlBuilderLookupsTypes={cqlBuilderLookupsTypes}

diff --git a/src/CqlBuilderPanel/definitionsSection/DefinitionSectionNavTabs.tsx b/src/CqlBuilderPanel/definitionsSection/DefinitionSectionNavTabs.tsx
@@ -6,10 +6,11 @@ export interface NavTabProps {
   setActiveTab: (value: string) => void;
   definitionCount: number;
   loading: boolean;
+  canEdit: boolean;
 }
 
 export default function DefinitionSectionNavTabs(props: NavTabProps) {
-  const { activeTab, setActiveTab, definitionCount, loading } = props;
+  const { activeTab, setActiveTab, definitionCount, loading, canEdit } = props;
 
   return (
     <div style={{ borderBottom: "1px solid #b0b0b0" }} tw="flex flex-row">
@@ -27,6 +28,7 @@ export default function DefinitionSectionNavTabs(props: NavTabProps) {
         <Tab
           tabIndex={0}
           aria-label="Definition"
+          disabled={!canEdit}
           type="B"
           label="Definition"
           data-testid="definition-tab"

diff --git a/src/CqlBuilderPanel/definitionsSection/DefinitionsSection.tsx b/src/CqlBuilderPanel/definitionsSection/DefinitionsSection.tsx
@@ -33,7 +33,9 @@ export default function DefinitionsSection({
   getCqlDefinitionReturnTypes,
   loading,
 }: DefinitionProps) {
-  const [activeTab, setActiveTab] = useState<string>("definition");
+  const [activeTab, setActiveTab] = useState<string>(
+    canEdit ? "definition" : "saved-definitions"
+  );
   const expressionDefinitions = cql
     ? new CqlAntlr(cql).parse().expressionDefinitions
     : [];
@@ -54,6 +56,7 @@ export default function DefinitionsSection({
     <>
       <DefinitionSectionNavTabs
         activeTab={activeTab}
+        canEdit={canEdit}
         setActiveTab={setActiveTab}
         definitionCount={measureDefinitions.length}
         loading={loading}

diff --git a/src/CqlBuilderPanel/definitionsSection/definitionBuilder/DefinitionBuilder.tsx b/src/CqlBuilderPanel/definitionsSection/definitionBuilder/DefinitionBuilder.tsx
@@ -157,53 +157,68 @@ export default function DefinitionBuilder({
           />
         </FormikProvider>
         <div className="form-actions">
-          <Button
-            variant="outline"
-            data-testid="clear-definition-btn"
-            disabled={
-              (!formik.dirty &&
-                expressionEditorValue ===
-                  (definition?.expressionValue || "")) ||
-              !canEdit
-            }
-            tw="mr-4"
-            onClick={() => {
-              resetForm();
-              setExpressionEditorValue(definition?.expressionValue || "");
-            }}
-          >
-            Clear
-          </Button>
-          <Button
-            data-testid={`definition-${
-              operation === "edit" ? "save" : "apply"
-            }-btn`}
-            disabled={
-              !formik.values.definitionName ||
-              !canEdit ||
-              !expressionEditorValue ||
-              isEditDialogFormDirty()
-            }
-            onClick={() => {
-              const definitionToApply: Definition = {
-                definitionName: formik.values.definitionName,
-                comment: formik.values.comment,
-                expressionValue: expressionEditorValue,
-              };
-              resetForm();
-              setExpressionEditorValue("");
-              if (operation === "edit") {
-                formik.setFieldValue("definitionName", "");
-                formik.setFieldValue("comment", "");
-                handleDefinitionEdit(definition, definitionToApply);
+          {canEdit ? (
+            <div>
+              <Button
+                variant="outline"
+                data-testid="clear-definition-btn"
+                disabled={
+                  (!formik.dirty &&
+                    expressionEditorValue ===
+                      (definition?.expressionValue || "")) ||
+                  !canEdit
+                }
+                tw="mr-4"
+                onClick={() => {
+                  resetForm();
+                  setExpressionEditorValue(definition?.expressionValue || "");
+                }}
+              >
+                Clear
+              </Button>
+              <Button
+                data-testid={`definition-${
+                  operation === "edit" ? "save" : "apply"
+                }-btn`}
+                disabled={
+                  !formik.values.definitionName ||
+                  !canEdit ||
+                  !expressionEditorValue ||
+                  isEditDialogFormDirty()
+                }
+                onClick={() => {
+                  const definitionToApply: Definition = {
+                    definitionName: formik.values.definitionName,
+                    comment: formik.values.comment,
+                    expressionValue: expressionEditorValue,
+                  };
+                  resetForm();
+                  setExpressionEditorValue("");
+                  if (operation === "edit") {
+                    formik.setFieldValue("definitionName", "");
+                    formik.setFieldValue("comment", "");
+                    handleDefinitionEdit(definition, definitionToApply);
+                    onClose();
+                  } else {
+                    handleApplyDefinition(definitionToApply);
+                  }
+                }}
+              >
+                {operation === "edit" ? "Save" : "Apply"}
+              </Button>
+            </div>
+          ) : (
+            <Button
+              variant="outline"
+              data-testid="cancel-definition-btn"
+              tw="mr-4"
+              onClick={() => {
                 onClose();
-              } else {
-                handleApplyDefinition(definitionToApply);
-              }
-            }}
-          >
-            {operation === "edit" ? "Save" : "Apply"}
-          </Button>
+              }}
+            >
+              Cancel
+            </Button>
+          )}
         </div>
       </form>
     </div>

diff --git a/src/CqlBuilderPanel/definitionsSection/definitionBuilderDialog/DefinitionBuilderDialog.tsx b/src/CqlBuilderPanel/definitionsSection/definitionBuilderDialog/DefinitionBuilderDialog.tsx
@@ -11,6 +11,7 @@ interface PropTypes {
   handleDefinitionEdit: Function;
   cqlBuilderLookup: CqlBuilderLookup;
   onClose: () => void;
+  canEdit: boolean;
 }
 
 const getExpression = (definition: Lookup) => {
@@ -28,6 +29,7 @@ const DefinitionBuilderDialog = ({
   cqlBuilderLookup,
   handleDefinitionEdit,
   onClose,
+  canEdit,
 }: PropTypes) => {
   const updatedDefinition = {
     definitionName: definition?.name,
@@ -38,7 +40,7 @@ const DefinitionBuilderDialog = ({
 
   return (
     <MadieDialog
-      title="Edit"
+      title={canEdit ? "Edit" : "View"}
       dialogProps={{
         open,
         onClose: onClose,
@@ -48,7 +50,7 @@ const DefinitionBuilderDialog = ({
       }}
     >
       <DefinitionBuilder
-        canEdit={true}
+        canEdit={canEdit}
         definition={updatedDefinition}
         handleApplyDefinition={() => {}} // do nothing for now
         handleDefinitionEdit={handleDefinitionEdit}

diff --git a/src/CqlBuilderPanel/definitionsSection/definitions/Definitions.tsx b/src/CqlBuilderPanel/definitionsSection/definitions/Definitions.tsx
@@ -16,6 +16,7 @@ import {
 import Skeleton from "@mui/material/Skeleton";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import BorderColorOutlinedIcon from "@mui/icons-material/BorderColorOutlined";
+import CodeOffIcon from "@mui/icons-material/CodeOff";
 import ToolTippedIcon from "../../../toolTippedIcon/ToolTippedIcon";
 import { CqlBuilderLookup, Lookup } from "../../../model/CqlBuilderLookup";
 import DefinitionBuilderDialog from "../definitionBuilderDialog/DefinitionBuilderDialog";
@@ -110,35 +111,34 @@ const Definitions = ({
         header: "",
         accessorKey: "apply",
         cell: (row: any) => {
-          if (!canEdit) {
-            return null;
-          }
           return (
             <Stack
               direction="row"
               alignItems="center"
               data-testid="definition-actions"
             >
+              {canEdit && (
+                <ToolTippedIcon
+                  tooltipMessage="Delete"
+                  buttonProps={{
+                    "data-testid": `delete-button-${row.cell.row.id}`,
+                    "aria-label": `delete-button-${row.cell.row.id}`,
+                    size: "small",
+                    onClick: (e) => {
+                      setSelectedDefinition(row.row.original.name);
+                      if (!isCQLUnchanged) {
+                        setDiscardDialog({ open: true, operation: "delete" });
+                      } else {
+                        setDeleteDialogOpen(true);
+                      }
+                    }, // do nothing for now
+                  }}
+                >
+                  <DeleteOutlineIcon color="error" />
+                </ToolTippedIcon>
+              )}
               <ToolTippedIcon
-                tooltipMessage="Delete"
-                buttonProps={{
-                  "data-testid": `delete-button-${row.cell.row.id}`,
-                  "aria-label": `delete-button-${row.cell.row.id}`,
-                  size: "small",
-                  onClick: (e) => {
-                    setSelectedDefinition(row.row.original.name);
-                    if (!isCQLUnchanged) {
-                      setDiscardDialog({ open: true, operation: "delete" });
-                    } else {
-                      setDeleteDialogOpen(true);
-                    }
-                  }, // do nothing for now
-                }}
-              >
-                <DeleteOutlineIcon color="error" />
-              </ToolTippedIcon>
-              <ToolTippedIcon
-                tooltipMessage="Edit"
+                tooltipMessage={canEdit ? "Edit" : "View"}
                 buttonProps={{
                   "data-testid": `edit-button-${row.cell.row.id}`,
                   "aria-label": `edit-button-${row.cell.row.id}`,
@@ -153,7 +153,11 @@ const Definitions = ({
                   },
                 }}
               >
-                <BorderColorOutlinedIcon color="primary" />
+                {canEdit ? (
+                  <BorderColorOutlinedIcon color="primary" />
+                ) : (
+                  <CodeOffIcon color="primary" />
+                )}
               </ToolTippedIcon>
             </Stack>
           );
@@ -294,6 +298,7 @@ const Definitions = ({
         cqlBuilderLookup={cqlBuilderLookup}
         onClose={() => setOpenDefinitionDialog(false)}
         handleDefinitionEdit={handleDefinitionEdit}
+        canEdit={canEdit}
       />
       <div className="pagination-container">
         <Pagination