Feat/disable action based on role (#349)

* feat: Added component to check access * feat: Added isOwner agrument to determine what to show and disable * Update src/pages/Browse/Browse.tsx Co-authored-by: Mathias Oppedal Heggelund <[email protected]> * Update src/pages/Browse/Browse.tsx Co-authored-by: Mathias Oppedal Heggelund <[email protected]> * feat: Added tooltip when button is disabled --------- Co-authored-by: Mathias Oppedal Heggelund <[email protected]>
equinor · Oct 24, 2024 · ba5ac6d · ba5ac6d
1 parent cc3058a
commit ba5ac6d
Show file tree

Hide file tree

Showing 19 changed files with 220 additions and 65 deletions.
diff --git a/src/components/AddCaseButtons/AddCaseButtons.tsx b/src/components/AddCaseButtons/AddCaseButtons.tsx
@@ -6,10 +6,12 @@ export const AddCaseButtons = ({
   title,
   localList,
   addCase,
+  isOwner,
 }: {
   title: string;
   localList?: ComputeCaseDto[];
   addCase?: (methodType: string) => void;
+  isOwner: () => boolean;
 }) => {
   const filerLocalList = (methodType: string) => {
     if (!localList) return [];
@@ -24,7 +26,7 @@ export const AddCaseButtons = ({
         <Button
           variant="ghost"
           onClick={() => addCase('Indicator')}
-          disabled={filerLocalList('Indicator').length > 0}
+          disabled={filerLocalList('Indicator').length > 0 || !isOwner()}
         >
           <Icon data={ADD} size={18}></Icon>
           Add case
@@ -34,7 +36,7 @@ export const AddCaseButtons = ({
         <Button
           variant="ghost"
           onClick={() => addCase('Net-To-Gross')}
-          disabled={filerLocalList('Net-To-Gross').length > 0}
+          disabled={filerLocalList('Net-To-Gross').length > 0 || !isOwner()}
         >
           <Icon data={ADD} size={18}></Icon>
           Add case
@@ -44,7 +46,9 @@ export const AddCaseButtons = ({
         <Button
           variant="ghost"
           onClick={() => addCase('ContiniousParameter')}
-          disabled={filerLocalList('ContiniousParameter').length > 0}
+          disabled={
+            filerLocalList('ContiniousParameter').length > 0 || !isOwner()
+          }
         >
           <Icon data={ADD} size={18}></Icon>
           Add case

diff --git a/src/components/CaseCardComponent/CaseCardComponent.tsx b/src/components/CaseCardComponent/CaseCardComponent.tsx
@@ -12,13 +12,15 @@ export const CaseCardComponent = ({
   subTitle,
   localList,
   addCase,
+  isOwner,
 }: {
   children: React.ReactNode;
   title: string;
   resultCard?: boolean;
   subTitle?: string;
   localList?: ComputeCaseDto[];
   addCase?: (methodType: string) => void;
+  isOwner: () => boolean;
 }) => {
   return (
     <Styled.CaseBorder>
@@ -32,6 +34,7 @@ export const CaseCardComponent = ({
             title={title}
             localList={localList}
             addCase={addCase}
+            isOwner={isOwner}
           ></AddCaseButtons>
         </Styled.ButtonGroup>
 

diff --git a/...ossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx b/...ossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx
@@ -48,13 +48,15 @@ export const GrossDepositionEnviromentGroup = ({
   defaultMetadata,
   gdeGroups,
   deleteGdeRow,
+  hideContent,
 }: {
   modelIdParent?: string;
   defaultMetadata: AnalogueModelDetail;
   gdeGroups: GeologicalGroupDto[];
   deleteGdeRow: (
     geologicalGroupId: string,
   ) => Promise<DeleteGeologicalGroupCommandResponse | undefined>;
+  hideContent: () => boolean;
 }) => {
   const [showGdeDialog, setShowGdeDialog] = useState<boolean>(false);
   const [gdeObject, setGdeObject] = useState<GdeType>(defaultGdeData);
@@ -142,15 +144,17 @@ export const GrossDepositionEnviromentGroup = ({
               {gdeGroups.map((row) => (
                 <Table.Row key={row.geologicalGroupId}>
                   <Table.Cell>
-                    <Button
-                      variant="ghost_icon"
-                      onClick={() => deleteGdeRow(row.geologicalGroupId)}
-                    >
-                      <Icon
-                        data={deleteIcon}
-                        title={'Delete gross deposition enviroment row'}
-                      />
-                    </Button>
+                    {hideContent() && (
+                      <Button
+                        variant="ghost_icon"
+                        onClick={() => deleteGdeRow(row.geologicalGroupId)}
+                      >
+                        <Icon
+                          data={deleteIcon}
+                          title={'Delete gross deposition enviroment row'}
+                        />
+                      </Button>
+                    )}
                   </Table.Cell>
                   <Table.Cell>
                     {row.grossDepEnv.equinorCode +
@@ -180,9 +184,11 @@ export const GrossDepositionEnviromentGroup = ({
           </Table>
         )}
         <div>
-          <Button variant="outlined" onClick={handleGdeDialog}>
-            Add GDE…
-          </Button>
+          {hideContent() && (
+            <Button variant="outlined" onClick={handleGdeDialog}>
+              Add GDE…
+            </Button>
+          )}
         </div>
       </Styled.Wrapper>
 

diff --git a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx
@@ -42,10 +42,12 @@ export const OutcropAnalogueGroup = ({
   modelIdParent,
   defaultMetadata,
   outcropGroup,
+  hideContent,
 }: {
   modelIdParent?: string;
   defaultMetadata: AnalogueModelDetail;
   outcropGroup: OutcropDto[];
+  hideContent: () => boolean;
 }) => {
   const [showOutcropDialog, setShowOutcropDialog] = useState<boolean>(false);
   const [errors, setErrors] = useState<OutcropErrorType>({});
@@ -115,16 +117,21 @@ export const OutcropAnalogueGroup = ({
             {outcropGroup.map((row) => (
               <Table.Row key={row.outcropId}>
                 <Table.Cell>
-                  <Button
-                    variant="ghost_icon"
-                    onClick={() =>
-                      handleDeleteOutcropAnalogue(
-                        row.outcropId ? row.outcropId : 'none',
-                      )
-                    }
-                  >
-                    <Icon data={deleteIcon} title={'Delete strat column row'} />
-                  </Button>
+                  {hideContent() && (
+                    <Button
+                      variant="ghost_icon"
+                      onClick={() =>
+                        handleDeleteOutcropAnalogue(
+                          row.outcropId ? row.outcropId : 'none',
+                        )
+                      }
+                    >
+                      <Icon
+                        data={deleteIcon}
+                        title={'Delete strat column row'}
+                      />
+                    </Button>
+                  )}
                 </Table.Cell>
                 <Table.Cell>
                   <Styled.StratColCell>{row.name}</Styled.StratColCell>
@@ -146,9 +153,11 @@ export const OutcropAnalogueGroup = ({
         </Table>
       )}
       <div>
-        <Button variant="outlined" onClick={handleOutcropDialog}>
-          Add outcrop analogue…
-        </Button>
+        {hideContent() && (
+          <Button variant="outlined" onClick={handleOutcropDialog}>
+            Add outcrop analogue…
+          </Button>
+        )}
       </div>
       <StyledDialog.DialogWindow open={showOutcropDialog}>
         <Dialog.Header>Add Outcrop Analogue</Dialog.Header>

diff --git a/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx b/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx
@@ -58,13 +58,15 @@ export const StratigrapicGroups = ({
   defaultMetadata,
   stratColumnGroups,
   deleteStratColRow,
+  hideContent,
 }: {
   modelIdParent?: string;
   defaultMetadata: AnalogueModelDetail;
   stratColumnGroups: StratigraphicGroupDto[];
   deleteStratColRow: (
     stratigraphicGroupId: string,
   ) => Promise<DeleteStratigraphicGroupCommandResponse | undefined>;
+  hideContent: () => boolean;
 }) => {
   const [stratColumnObject, setStratColumnObject] = useState<StratColumnType>(
     defaultStratColumnData,
@@ -169,12 +171,17 @@ export const StratigrapicGroups = ({
             {stratColumnGroups.map((row) => (
               <Table.Row key={row.stratigraphicGroupId}>
                 <Table.Cell>
-                  <Button
-                    variant="ghost_icon"
-                    onClick={() => deleteRow(row.stratigraphicGroupId)}
-                  >
-                    <Icon data={deleteIcon} title={'Delete strat column row'} />
-                  </Button>
+                  {hideContent() && (
+                    <Button
+                      variant="ghost_icon"
+                      onClick={() => deleteRow(row.stratigraphicGroupId)}
+                    >
+                      <Icon
+                        data={deleteIcon}
+                        title={'Delete strat column row'}
+                      />
+                    </Button>
+                  )}
                 </Table.Cell>
                 <Table.Cell>{row.country.identifier}</Table.Cell>
                 <Table.Cell>
@@ -221,9 +228,11 @@ export const StratigrapicGroups = ({
       )}
 
       <div>
-        <Button variant="outlined" onClick={handleStratColDialog}>
-          Add stratigraphic column…
-        </Button>
+        {hideContent() && (
+          <Button variant="outlined" onClick={handleStratColDialog}>
+            Add stratigraphic column…
+          </Button>
+        )}
       </div>
       <StyledDialog.DialogWindow open={showStratColDialog}>
         <Dialog.Header>Add stratigraphic column</Dialog.Header>

diff --git a/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx b/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx
@@ -21,6 +21,7 @@ export const CaseButtons = ({
   saved,
   isProcessed,
   caseStatus,
+  isOwner,
   hasUnsavedCase,
   saveCase,
   runCase,
@@ -33,6 +34,7 @@ export const CaseButtons = ({
   saved: boolean;
   isProcessed?: boolean;
   caseStatus: ComputeJobStatus;
+  isOwner: () => boolean;
   hasUnsavedCase: boolean;
   runCase?: () => void;
   saveCase: () => void;
@@ -58,10 +60,21 @@ export const CaseButtons = ({
     setDeleteConfirm(false);
   };
 
+  const deleteTooltip = () => {
+    if (!isOwner()) return 'Can not delete because you are not owner or admin.';
+    return 'Can not delete unsaved case.';
+  };
+
+  const duplicateTooltip = () => {
+    if (!isOwner())
+      return 'Can not duplicate because you are not owner or admin.';
+    return 'Can not duplicate unsaved case.';
+  };
+
   return (
     <Styled.ButtonDiv>
-      {id.length < 3 ? (
-        <Tooltip title={'Can not delete unsaved case.'}>
+      {id.length < 3 || !isOwner() ? (
+        <Tooltip title={deleteTooltip()}>
           <Button disabled variant="ghost_icon" aria-label="remove">
             <Icon data={DELETE} size={24}></Icon>
           </Button>
@@ -78,8 +91,8 @@ export const CaseButtons = ({
 
       {caseType === 'Variogram' && (
         <>
-          {id.length < 3 ? (
-            <Tooltip title={'Can not duplicate unsaved case.'}>
+          {id.length < 3 || !isOwner() ? (
+            <Tooltip title={duplicateTooltip()}>
               <Button disabled variant="ghost_icon" aria-label="duplicate">
                 <Icon data={COPY} size={24}></Icon>
               </Button>
@@ -140,7 +153,8 @@ export const CaseButtons = ({
                   !isProcessed ||
                   caseStatus === 'Created' ||
                   caseStatus === 'Waiting' ||
-                  caseStatus === 'Running'
+                  caseStatus === 'Running' ||
+                  !isOwner()
                 }
               >
                 <Icon data={PLAY} size={18}></Icon>
@@ -192,7 +206,8 @@ export const CaseButtons = ({
                   id.length < 3 ||
                   caseStatus === 'Created' ||
                   caseStatus === 'Waiting' ||
-                  caseStatus === 'Running'
+                  caseStatus === 'Running' ||
+                  !isOwner()
                 }
               >
                 <Icon data={PLAY} size={18}></Icon>
@@ -207,6 +222,7 @@ export const CaseButtons = ({
             )}
           </Tooltip>
           <Button
+            disabled={!isOwner()}
             variant="outlined"
             onClick={id.length > 3 ? () => setSaveConfirm(true) : saveCase}
           >

diff --git a/src/features/Compute/CaseGroup/CaseGroup.tsx b/src/features/Compute/CaseGroup/CaseGroup.tsx
@@ -30,13 +30,15 @@ export const CaseGroup = ({
   setAlertMessage,
   updateLocalCaseList,
   runCase,
+  isOwner,
 }: {
   caseList: ComputeCaseDto[];
   methodName: string;
   triggerAddCase?: string;
   setAlertMessage: (message: string) => void;
   updateLocalCaseList?: (type: string, add: boolean) => void;
   runCase: (computeCaseId: string) => void;
+  isOwner: () => boolean;
 }) => {
   const [localList, setLocalList] = useState<ComputeCaseDto[]>([]);
   const { data, isLoading } = useFetchCases();
@@ -339,7 +341,7 @@ export const CaseGroup = ({
               <Button
                 variant="outlined"
                 onClick={() => addCase(methodName)}
-                disabled={localList.length >= 1}
+                disabled={localList.length >= 1 || !isOwner()}
               >
                 <Icon data={ADD} size={18}></Icon>
                 {methodName}
@@ -354,6 +356,7 @@ export const CaseGroup = ({
         key={caseList.length > 0 ? caseList[0].computeCaseId : null}
         addCase={addCase}
         localList={localList}
+        isOwner={isOwner}
       >
         <Styled.CaseList>
           {methodName === 'Channel' || methodName === 'Mouthbar' ? (
@@ -376,6 +379,7 @@ export const CaseGroup = ({
                   runCase={runCase}
                   removeLocalCase={removeLocalCase}
                   settingsFilter={settingsFilter}
+                  isOwner={isOwner}
                 />
               ))}
             </>
@@ -397,6 +401,7 @@ export const CaseGroup = ({
                   removeLocalCase={removeLocalCase}
                   settingsFilter={settingsFilter}
                   duplicateCase={duplicateCase}
+                  isOwner={isOwner}
                 />
               ))}
             </>