Feat/implement global state (#354)

* chore: Added waiting status to cancel functionality * feat: Added zustand to library * feat: Added hook for global state * feat: Rewritten admin access to hook * fix: Rewritten admin/user access check to use hook
equinor · Oct 28, 2024 · 1b28f0d · 1b28f0d
1 parent 4810e92
commit 1b28f0d
Show file tree

Hide file tree

Showing 24 changed files with 138 additions and 130 deletions.
diff --git a/package.json b/package.json
@@ -36,7 +36,8 @@
     "styled-components": "6.1.13",
     "typescript": "^5.5.4",
     "web-vitals": "^2.1.0",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.0"
   },
   "scripts": {
     "start": "env-cmd -f .env.local react-scripts start",

diff --git a/src/components/AddCaseButtons/AddCaseButtons.tsx b/src/components/AddCaseButtons/AddCaseButtons.tsx
@@ -1,18 +1,18 @@
 import { Button, Icon } from '@equinor/eds-core-react';
 import { add as ADD } from '@equinor/eds-icons';
 import { ComputeCaseDto } from '../../api/generated';
+import { useIsOwnerOrAdmin } from '../../hooks/useIsOwnerOrAdmin';
 
 export const AddCaseButtons = ({
   title,
   localList,
   addCase,
-  isOwner,
 }: {
   title: string;
   localList?: ComputeCaseDto[];
   addCase?: (methodType: string) => void;
-  isOwner: () => boolean;
 }) => {
+  const isOwnerOrAdmin = useIsOwnerOrAdmin();
   const filerLocalList = (methodType: string) => {
     if (!localList) return [];
     const methodFileter =
@@ -26,7 +26,7 @@ export const AddCaseButtons = ({
         <Button
           variant="ghost"
           onClick={() => addCase('Indicator')}
-          disabled={filerLocalList('Indicator').length > 0 || !isOwner()}
+          disabled={filerLocalList('Indicator').length > 0 || !isOwnerOrAdmin}
         >
           <Icon data={ADD} size={18}></Icon>
           Add case
@@ -36,7 +36,9 @@ export const AddCaseButtons = ({
         <Button
           variant="ghost"
           onClick={() => addCase('Net-To-Gross')}
-          disabled={filerLocalList('Net-To-Gross').length > 0 || !isOwner()}
+          disabled={
+            filerLocalList('Net-To-Gross').length > 0 || !isOwnerOrAdmin
+          }
         >
           <Icon data={ADD} size={18}></Icon>
           Add case
@@ -47,7 +49,7 @@ export const AddCaseButtons = ({
           variant="ghost"
           onClick={() => addCase('ContiniousParameter')}
           disabled={
-            filerLocalList('ContiniousParameter').length > 0 || !isOwner()
+            filerLocalList('ContiniousParameter').length > 0 || !isOwnerOrAdmin
           }
         >
           <Icon data={ADD} size={18}></Icon>

diff --git a/src/components/CaseCardComponent/CaseCardComponent.tsx b/src/components/CaseCardComponent/CaseCardComponent.tsx
@@ -12,15 +12,13 @@ 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>
@@ -34,7 +32,6 @@ 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
@@ -23,6 +23,7 @@ import { GdeSelect } from '../GdeSelect/GdeSelect';
 import * as Styled from './GrossDepositionEnviromentGroup.styled';
 
 import { validateInput } from './GDE.hooks';
+import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin';
 
 export interface GdeType {
   grossDepEnv?: GeologicalStandardDto;
@@ -48,16 +49,15 @@ export const GrossDepositionEnviromentGroup = ({
   defaultMetadata,
   gdeGroups,
   deleteGdeRow,
-  hideContent,
 }: {
   modelIdParent?: string;
   defaultMetadata: AnalogueModelDetail;
   gdeGroups: GeologicalGroupDto[];
   deleteGdeRow: (
     geologicalGroupId: string,
   ) => Promise<DeleteGeologicalGroupCommandResponse | undefined>;
-  hideContent: () => boolean;
 }) => {
+  const isOwnerOrAdmin = useIsOwnerOrAdmin();
   const [showGdeDialog, setShowGdeDialog] = useState<boolean>(false);
   const [gdeObject, setGdeObject] = useState<GdeType>(defaultGdeData);
   const [errors, setErrors] = useState<GDEErrorType>({});
@@ -144,7 +144,7 @@ export const GrossDepositionEnviromentGroup = ({
               {gdeGroups.map((row) => (
                 <Table.Row key={row.geologicalGroupId}>
                   <Table.Cell>
-                    {hideContent() && (
+                    {isOwnerOrAdmin && (
                       <Button
                         variant="ghost_icon"
                         onClick={() => deleteGdeRow(row.geologicalGroupId)}
@@ -184,7 +184,7 @@ export const GrossDepositionEnviromentGroup = ({
           </Table>
         )}
         <div>
-          {hideContent() && (
+          {isOwnerOrAdmin && (
             <Button variant="outlined" onClick={handleGdeDialog}>
               Add GDE…
             </Button>

diff --git a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx
@@ -17,6 +17,7 @@ import { useOutcropAnalouge } from '../../../hooks/useOutcropAnalogue';
 import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled';
 import { OutcropSelect } from '../OutcropSelect/OutcropSelect';
 import * as Styled from './OutcropAnalogueGroup.styled';
+import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin';
 
 export interface OutcropType {
   outcropId?: string;
@@ -42,13 +43,12 @@ export const OutcropAnalogueGroup = ({
   modelIdParent,
   defaultMetadata,
   outcropGroup,
-  hideContent,
 }: {
   modelIdParent?: string;
   defaultMetadata: AnalogueModelDetail;
   outcropGroup: OutcropDto[];
-  hideContent: () => boolean;
 }) => {
+  const isOwnerOrAdmin = useIsOwnerOrAdmin();
   const [showOutcropDialog, setShowOutcropDialog] = useState<boolean>(false);
   const [errors, setErrors] = useState<OutcropErrorType>({});
   const [outcropObject, setOutcropObject] =
@@ -117,7 +117,7 @@ export const OutcropAnalogueGroup = ({
             {outcropGroup.map((row) => (
               <Table.Row key={row.outcropId}>
                 <Table.Cell>
-                  {hideContent() && (
+                  {isOwnerOrAdmin && (
                     <Button
                       variant="ghost_icon"
                       onClick={() =>
@@ -153,7 +153,7 @@ export const OutcropAnalogueGroup = ({
         </Table>
       )}
       <div>
-        {hideContent() && (
+        {isOwnerOrAdmin && (
           <Button variant="outlined" onClick={handleOutcropDialog}>
             Add outcrop analogue…
           </Button>

diff --git a/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx b/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx
@@ -26,6 +26,7 @@ import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled'
 import { StratigraphicColumnSelect } from '../StratigraphicColumnSelect/StratigraphicColumnSelect';
 import { validateInput } from './StratigrapicGroups.hooks';
 import * as Styled from './StratigrapicGroups.styled';
+import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin';
 
 export interface StratColumnType {
   country?: CountryDto;
@@ -58,16 +59,15 @@ export const StratigrapicGroups = ({
   defaultMetadata,
   stratColumnGroups,
   deleteStratColRow,
-  hideContent,
 }: {
   modelIdParent?: string;
   defaultMetadata: AnalogueModelDetail;
   stratColumnGroups: StratigraphicGroupDto[];
   deleteStratColRow: (
     stratigraphicGroupId: string,
   ) => Promise<DeleteStratigraphicGroupCommandResponse | undefined>;
-  hideContent: () => boolean;
 }) => {
+  const isOwnerOrAdmin = useIsOwnerOrAdmin();
   const [stratColumnObject, setStratColumnObject] = useState<StratColumnType>(
     defaultStratColumnData,
   );
@@ -171,7 +171,7 @@ export const StratigrapicGroups = ({
             {stratColumnGroups.map((row) => (
               <Table.Row key={row.stratigraphicGroupId}>
                 <Table.Cell>
-                  {hideContent() && (
+                  {isOwnerOrAdmin && (
                     <Button
                       variant="ghost_icon"
                       onClick={() => deleteRow(row.stratigraphicGroupId)}
@@ -228,7 +228,7 @@ export const StratigrapicGroups = ({
       )}
 
       <div>
-        {hideContent() && (
+        {isOwnerOrAdmin && (
           <Button variant="outlined" onClick={handleStratColDialog}>
             Add stratigraphic column…
           </Button>

diff --git a/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx b/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx
@@ -14,14 +14,14 @@ import {
 } from '../../../../api/generated';
 import { ConfirmDialog } from '../../../../components/ConfirmDialog/ConfirmDialog';
 import * as Styled from './CaseButtons.styled';
+import { useIsOwnerOrAdmin } from '../../../../hooks/useIsOwnerOrAdmin';
 
 export const CaseButtons = ({
   id,
   caseType,
   saved,
   isProcessed,
   caseStatus,
-  isOwner,
   hasUnsavedCase,
   saveCase,
   runCase,
@@ -34,7 +34,6 @@ export const CaseButtons = ({
   saved: boolean;
   isProcessed?: boolean;
   caseStatus: ComputeJobStatus;
-  isOwner: () => boolean;
   hasUnsavedCase: boolean;
   runCase?: () => void;
   saveCase: () => void;
@@ -44,6 +43,7 @@ export const CaseButtons = ({
   setAlertMessage: (message: string) => void;
   duplicateCase: () => void;
 }) => {
+  const isOwnerOrAdmin = useIsOwnerOrAdmin();
   const [deleteConfirm, setDeleteConfirm] = useState(false);
   const [saveConfirm, setSaveConfirm] = useState(false);
   const navigate = useNavigate();
@@ -61,19 +61,20 @@ export const CaseButtons = ({
   };
 
   const deleteTooltip = () => {
-    if (!isOwner()) return 'Can not delete because you are not owner or admin.';
+    if (!isOwnerOrAdmin)
+      return 'Can not delete because you are not owner or admin.';
     return 'Can not delete unsaved case.';
   };
 
   const duplicateTooltip = () => {
-    if (!isOwner())
+    if (!isOwnerOrAdmin)
       return 'Can not duplicate because you are not owner or admin.';
     return 'Can not duplicate unsaved case.';
   };
 
   return (
     <Styled.ButtonDiv>
-      {id.length < 3 || !isOwner() ? (
+      {id.length < 3 || !isOwnerOrAdmin ? (
         <Tooltip title={deleteTooltip()}>
           <Button disabled variant="ghost_icon" aria-label="remove">
             <Icon data={DELETE} size={24}></Icon>
@@ -91,7 +92,7 @@ export const CaseButtons = ({
 
       {caseType === 'Variogram' && (
         <>
-          {id.length < 3 || !isOwner() ? (
+          {id.length < 3 || !isOwnerOrAdmin ? (
             <Tooltip title={duplicateTooltip()}>
               <Button disabled variant="ghost_icon" aria-label="duplicate">
                 <Icon data={COPY} size={24}></Icon>
@@ -147,17 +148,16 @@ export const CaseButtons = ({
             >
               <Button
                 color={
-                  caseStatus === 'Failed' || caseStatus === 'Running'
+                  caseStatus === 'Failed' ||
+                  caseStatus === 'Waiting' ||
+                  caseStatus === 'Running'
                     ? 'danger'
                     : undefined
                 }
                 variant="outlined"
                 onClick={saved ? runCase : saveCase}
                 disabled={
-                  !isProcessed ||
-                  caseStatus === 'Created' ||
-                  caseStatus === 'Waiting' ||
-                  !isOwner()
+                  !isProcessed || caseStatus === 'Created' || !isOwnerOrAdmin
                 }
               >
                 <Icon data={PLAY} size={18}></Icon>
@@ -208,8 +208,7 @@ export const CaseButtons = ({
                   !isProcessed ||
                   id.length < 3 ||
                   caseStatus === 'Created' ||
-                  caseStatus === 'Waiting' ||
-                  !isOwner()
+                  !isOwnerOrAdmin
                 }
               >
                 <Icon data={PLAY} size={18}></Icon>
@@ -224,7 +223,7 @@ export const CaseButtons = ({
             )}
           </Tooltip>
           <Button
-            disabled={!isOwner()}
+            disabled={!isOwnerOrAdmin}
             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
@@ -22,6 +22,7 @@ import { useAccessToken } from '../../../hooks/useAccessToken';
 import { useFetchCases } from '../../../hooks/useFetchCases';
 import * as Styled from './CaseGroup.styled';
 import { CaseRow } from './CaseRow/CaseRow';
+import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin';
 
 export const CaseGroup = ({
   caseList,
@@ -30,21 +31,20 @@ 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();
   const { modelId } = useParams<{ modelId: string }>();
   const { instance, accounts } = useMsal();
   const token = useAccessToken(instance, accounts[0]);
+  const isOwnerOrAdmin = useIsOwnerOrAdmin();
 
   const saveApiCase = useMutation({
     mutationFn: ({
@@ -326,6 +326,7 @@ export const CaseGroup = ({
       }
     }
   };
+
   if (isLoading || computeSettingsResponse.isLoading) return <p>Loading ...</p>;
 
   return (
@@ -341,7 +342,7 @@ export const CaseGroup = ({
               <Button
                 variant="outlined"
                 onClick={() => addCase(methodName)}
-                disabled={localList.length >= 1 || !isOwner()}
+                disabled={localList.length >= 1 || !isOwnerOrAdmin}
               >
                 <Icon data={ADD} size={18}></Icon>
                 {methodName}
@@ -356,7 +357,6 @@ export const CaseGroup = ({
         key={caseList.length > 0 ? caseList[0].computeCaseId : null}
         addCase={addCase}
         localList={localList}
-        isOwner={isOwner}
       >
         <Styled.CaseList>
           {methodName === 'Channel' || methodName === 'Mouthbar' ? (
@@ -379,7 +379,6 @@ export const CaseGroup = ({
                   runCase={runCase}
                   removeLocalCase={removeLocalCase}
                   settingsFilter={settingsFilter}
-                  isOwner={isOwner}
                 />
               ))}
             </>
@@ -401,7 +400,6 @@ export const CaseGroup = ({
                   removeLocalCase={removeLocalCase}
                   settingsFilter={settingsFilter}
                   duplicateCase={duplicateCase}
-                  isOwner={isOwner}
                 />
               ))}
             </>