Refactor: Separate out title mapping. Fix row styling.

equinor · Feb 28, 2024 · bcdb7d6 · bcdb7d6
1 parent a97e19b
commit bcdb7d6
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 28 deletions.
diff --git a/src/components/CaseCardComponent/CaseCardComponent.tsx b/src/components/CaseCardComponent/CaseCardComponent.tsx
@@ -3,6 +3,7 @@ import { Typography } from '@equinor/eds-core-react';
 import { ComputeCaseDto } from '../../api/generated';
 import { AddCaseButtons } from '../AddCaseButtons/AddCaseButtons';
 import * as Styled from './CaseCardComponent.styled';
+import { titleMapping } from './FormattedMethodNames';
 
 export const CaseCardComponent = ({
   children,
@@ -19,23 +20,12 @@ export const CaseCardComponent = ({
   localList?: ComputeCaseDto[];
   addCase?: (methodType: string) => void;
 }) => {
-  const formattedTitle = () => {
-    let res = '';
-    if (title === 'Indicator') {
-      res = 'Indicator';
-    } else if (title === 'Net-To-Gross') {
-      res = 'Net-to-gross';
-    } else if (title === 'ContiniousParameter') {
-      res = 'Continious parameter';
-    }
-    return res;
-  };
   return (
     <Styled.CaseBorder>
       <Styled.Wrapper>
         <Styled.ButtonGroup>
           <Styled.Title>
-            <Typography variant="h4">{formattedTitle()}</Typography>
+            <Typography variant="h4">{titleMapping[title]}</Typography>
             <Typography variant="h6">{subTitle}</Typography>
           </Styled.Title>
           <AddCaseButtons

diff --git a/src/components/CaseCardComponent/FormattedMethodNames.tsx b/src/components/CaseCardComponent/FormattedMethodNames.tsx
@@ -0,0 +1,5 @@
+export const titleMapping: Record<string, string> = {
+  Indicator: 'Indicator',
+  'Net-To-Gross': 'Net-to-gross',
+  ContiniousParameter: 'Continious parameter',
+};
diff --git a/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.styled.tsx b/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.styled.tsx
@@ -13,6 +13,7 @@ export const ButtonDiv = styled.div`
 
 const StyledButton = styled(Button)`
   white-space: nowrap;
+  width: 100px;
 `;
 
 export { StyledButton as Button };
diff --git a/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx b/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx
@@ -112,14 +112,14 @@ export const CaseButtons = ({
       {caseType === 'Object' ? (
         <>
           {caseStatus === 'Succeeded' ? (
-            <Button
+            <Styled.Button
               variant="outlined"
               onClick={() => {
                 navigate('../results/object');
               }}
             >
               View Results{' '}
-            </Button>
+            </Styled.Button>
           ) : saved ? (
             <Tooltip
               title={
@@ -133,6 +133,7 @@ export const CaseButtons = ({
               }
             >
               <Button
+                color={caseStatus === 'Failed' ? 'danger' : undefined}
                 variant="outlined"
                 onClick={saved ? runCase : saveCase}
                 disabled={
@@ -148,7 +149,7 @@ export const CaseButtons = ({
                 caseStatus === 'Running'
                   ? 'Running ... '
                   : caseStatus === 'Failed'
-                  ? 'Run Failed. Re-run Case'
+                  ? 'Re-run'
                   : 'Run'}
               </Button>
             </Tooltip>
@@ -183,6 +184,7 @@ export const CaseButtons = ({
               </Styled.Button>
             ) : (
               <Styled.Button
+                color={caseStatus === 'Failed' && 'danger'}
                 variant="outlined"
                 onClick={runCase}
                 disabled={
@@ -199,7 +201,7 @@ export const CaseButtons = ({
                 caseStatus === 'Running'
                   ? 'Running ... '
                   : caseStatus === 'Failed'
-                  ? 'Run Failed. Re-run Case'
+                  ? 'Re-run'
                   : 'Run'}
               </Styled.Button>
             )}

diff --git a/src/features/Compute/CaseGroup/CaseSettingSelects/CaseSettingSelect.tsx b/src/features/Compute/CaseGroup/CaseSettingSelects/CaseSettingSelect.tsx
@@ -1,5 +1,6 @@
 import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react';
 import { ListComputeSettingsInputValueDto } from '../../../../api/generated';
+import * as Styled from './SettingSelect.styled';
 
 export const CaseSettingSelect = ({
   label,
@@ -25,17 +26,19 @@ export const CaseSettingSelect = ({
   };
 
   return (
-    <Autocomplete
-      label={label}
-      disabled={
-        (caseType === 'Net-To-Gross' || caseType === 'Indicator') &&
-        settingType !== 'ContiniousParameter'
-      }
-      options={options && options.length > 0 ? options : []}
-      optionLabel={(option) => option.name}
-      selectedOptions={selectedValue}
-      onOptionsChange={onSelectChange}
-      multiple={settingType !== 'Net-To-Gross'}
-    ></Autocomplete>
+    <Styled.MetadataWrapper>
+      <Autocomplete
+        label={label}
+        disabled={
+          (caseType === 'Net-To-Gross' || caseType === 'Indicator') &&
+          settingType !== 'ContiniousParameter'
+        }
+        options={options && options.length > 0 ? options : []}
+        optionLabel={(option) => option.name}
+        selectedOptions={selectedValue}
+        onOptionsChange={onSelectChange}
+        multiple={settingType !== 'Net-To-Gross'}
+      ></Autocomplete>
+    </Styled.MetadataWrapper>
   );
 };
diff --git a/src/features/Compute/CaseGroup/CaseSettingSelects/SettingSelect.styled.tsx b/src/features/Compute/CaseGroup/CaseSettingSelects/SettingSelect.styled.tsx
@@ -24,10 +24,23 @@ export const AutocompleteRow = styled.div`
 
   > div {
     flex-grow: 1;
+    > div {
+      > label {
+        white-space: nowrap;
+      }
+    }
   }
 `;
 
 export const ButtonWrapper = styled.div`
   display: flex;
   align-items: center;
 `;
+
+export const MetadataWrapper = styled.div`
+  > div {
+    > label {
+      white-space: nowrap;
+    }
+  }
+`;