Refactor/div

src/features/AddModel/AddModelDialog/AddModelDialog.hooks.ts

@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+import { AnalogueModelDetail } from '../../../api/generated';
+import { ErrorType, FilesProps } from './AddModelDialog';
+export const useAddModelDialog = (
+  setFileSize: React.Dispatch<React.SetStateAction<number>>,
+  setMetadata: React.Dispatch<React.SetStateAction<AnalogueModelDetail>>,
+  files: FilesProps,
+  rawFile?: File,
+  existingData?: AnalogueModelDetail,
+) => {
+  useEffect(() => {
+    if (rawFile === undefined) return;
+    setFileSize(rawFile.size);
+  }, [rawFile, setFileSize]);
+
+  useEffect(() => {
+    if (files.NC === undefined) setFileSize(0);
+  }, [files, setFileSize]);
+
+  useEffect(() => {
+    if (existingData) setMetadata(existingData);
+  }, [existingData, setMetadata]);
+};
+
+export const validateValues = (
+  inputValues: Partial<AnalogueModelDetail> | undefined,
+  files: FilesProps,
+  isEdit?: boolean,
+) => {
+  const errors: ErrorType = {};
+
+  if (inputValues?.name === undefined || inputValues?.name === '') {
+    errors.name = 'Name not provided';
+  }
+
+  if (
+    inputValues?.description === undefined ||
+    inputValues?.description === ''
+  ) {
+    errors.description = 'Description not provided';
+  }
+
+  if (
+    inputValues?.metadata === undefined ||
+    inputValues?.metadata?.filter((m) => m.metadataType === 'Field').length <= 0
+  ) {
+    errors.field = 'Field not selected';
+  }
+
+  if (
+    inputValues?.metadata === undefined ||
+    inputValues?.metadata?.filter((m) => m.metadataType === 'Formation')
+      .length <= 0
+  ) {
+    errors.formation = 'Formation not selected';
+  }
+
+  if (
+    inputValues?.analogues === undefined ||
+    inputValues?.analogues?.length <= 0
+  ) {
+    errors.analogues = 'Analogues not selected';
+  }
+
+  if (
+    inputValues?.metadata === undefined ||
+    inputValues?.metadata?.filter((m) => m.metadataType === 'Zone').length <= 0
+  ) {
+    errors.zone = 'Zone not selected';
+  }
+
+  if (!files.NC && !isEdit) {
+    errors.file = 'NC file missing';
+  }
+
+  return errors;
+};

src/features/AddModel/AddModelDialog/AddModelDialog.styled.ts

@@ -4,8 +4,11 @@ import { spacings } from '../../../tokens/spacings';
 
 const StyledDialog = styled(Dialog)`
   min-width: 600px;
-  height: 90vh;
   overflow-y: scroll;
+
+  @media (max-height: 1000px) {
+    height: 90vh;
+  }
 `;
 
 const StyledDialogCustomContent = styled(Dialog.CustomContent)`

src/features/AddModel/AddModelDialog/AddModelDialog.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { AnalogueModelDetail } from '../../../api/generated';
 import { ModelInputFilesTable } from '../ModelInputFilesTable/ModelInputFilesTable';
 import { ModelMetadata } from '../ModelMetadata/ModelMetadata';
+import { useAddModelDialog, validateValues } from './AddModelDialog.hooks';
 import * as Styled from './AddModelDialog.styled';
 
 interface AddModelDialogProps {
@@ -17,7 +18,7 @@ interface AddModelDialogProps {
   existingData?: AnalogueModelDetail;
 }
 
-interface FilesProps {
+export interface FilesProps {
   NC?: File;
   INI?: File;
 }
@@ -56,88 +57,10 @@ export const AddModelDialog = ({
   const [fileSize, setFileSize] = useState(0);
   const [rawFile, setrawFile] = useState<File>();
 
-  useEffect(() => {
-    if (Object.keys(errors).length === 0 && submitting) {
-      finishSubmit();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [errors, submitting]);
-
-  useEffect(() => {
-    if (rawFile === undefined) return;
-    setFileSize(rawFile.size);
-  }, [rawFile]);
-
-  useEffect(() => {
-    if (files.NC === undefined) setFileSize(0);
-  }, [files]);
-
-  useEffect(() => {
-    if (existingData) setMetadata(existingData);
-  }, [existingData]);
-
-  function toggleINIFileContent() {
-    setFileDisplay(!isFileDisplay);
-  }
-
-  const INIFileContent = () => <p>Not implemented yet...</p>;
-
-  const validateValues = (
-    inputValues: Partial<AnalogueModelDetail> | undefined,
-  ) => {
-    const errors: ErrorType = {};
-
-    if (inputValues?.name === undefined || inputValues?.name === '') {
-      errors.name = 'Name not provided';
-    }
-
-    if (
-      inputValues?.description === undefined ||
-      inputValues?.description === ''
-    ) {
-      errors.description = 'Description not provided';
-    }
-
-    if (
-      inputValues?.metadata === undefined ||
-      inputValues?.metadata?.filter((m) => m.metadataType === 'Field').length <=
-        0
-    ) {
-      errors.field = 'Field not selected';
-    }
-
-    if (
-      inputValues?.metadata === undefined ||
-      inputValues?.metadata?.filter((m) => m.metadataType === 'Formation')
-        .length <= 0
-    ) {
-      errors.formation = 'Formation not selected';
-    }
-
-    if (
-      inputValues?.analogues === undefined ||
-      inputValues?.analogues?.length <= 0
-    ) {
-      errors.analogues = 'Analogues not selected';
-    }
-
-    if (
-      inputValues?.metadata === undefined ||
-      inputValues?.metadata?.filter((m) => m.metadataType === 'Zone').length <=
-        0
-    ) {
-      errors.zone = 'Zone not selected';
-    }
-
-    if (!files.NC && !isEdit) {
-      errors.file = 'NC file missing';
-    }
-
-    return errors;
-  };
+  useAddModelDialog(setFileSize, setMetadata, files, rawFile, existingData);
 
   const handleSubmit = () => {
-    setErrors(validateValues(metadata));
+    setErrors(validateValues(metadata, files, isEdit));
     setSubmitting(true);
   };
 
@@ -148,23 +71,6 @@ export const AddModelDialog = ({
     cancel();
   };
 
-  const cleanupStates = () => {
-    if (!isEdit) setMetadata(defaultMetadata);
-    setFiles(defaultFiles);
-    setrawFile(undefined);
-    setFileSize(0);
-    setSubmitting(false);
-  };
-
-  const finishSubmit = () => {
-    if (files.NC && !isEdit && confirm) {
-      confirm(files.NC, metadata);
-    } else if (isEdit && edit) {
-      edit(metadata);
-    }
-    cleanupStates();
-  };
-
   const fileAdded = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!e.target.files) return;
     const file = e.target.files[0];
@@ -173,6 +79,43 @@ export const AddModelDialog = ({
     setrawFile(e.target.files[0]);
   };
 
+  useEffect(() => {
+    const cleanupStates = () => {
+      if (!isEdit) setMetadata(defaultMetadata);
+      setFiles(defaultFiles);
+      setrawFile(undefined);
+      setFileSize(0);
+      setSubmitting(false);
+    };
+
+    const finishSubmit = () => {
+      if (files.NC && !isEdit && confirm) {
+        confirm(files.NC, metadata);
+      } else if (isEdit && edit) {
+        edit(metadata);
+      }
+      cleanupStates();
+    };
+
+    if (Object.keys(errors).length === 0 && submitting) {
+      finishSubmit();
+    }
+  }, [
+    confirm,
+    defaultMetadata,
+    edit,
+    errors,
+    files.NC,
+    isEdit,
+    metadata,
+    submitting,
+  ]);
+
+  function toggleINIFileContent() {
+    setFileDisplay(!isFileDisplay);
+  }
+  const INIFileContent = () => <p>Not implemented yet...</p>;
+
   return (
     <Styled.Dialog open={isOpen}>
       <Styled.Dialog.Header>

src/features/Compute/CaseGroup/CaseGroup.tsx

@@ -104,8 +104,6 @@ export const CaseGroup = ({
     queryFn: () => ComputeSettingsService.getApiComputeSettings(),
     enabled: !!token,
   });
-  // // eslint-disable-next-line no-console
-  // console.log(computeSettingsResponse && computeSettingsResponse.data?.data);
 
   const settingsFilter = (name: string) => {
     if (computeSettingsResponse) {
@@ -117,9 +115,6 @@ export const CaseGroup = ({
   const channelSettings = settingsFilter('Object');
   const variogramSettings = settingsFilter('Variogram');
 
-  // // eslint-disable-next-line no-console
-  // console.log(variogramSettings);
-
   const variogramFilter = (name: string) => {
     if (variogramSettings) {
       return variogramSettings[0].allowedMethods.filter(

src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx

@@ -19,8 +19,8 @@ import {
 } from '../../../../api/generated';
 import { useAccessToken } from '../../../../hooks/useAccessToken';
 import { CaseButtons } from '../CaseButtons/CaseButtons';
-import { ModelAreaSelect } from '../CaseOptionSelects/ModelAreaSelect/ModelAreaSelect';
-import { VariogramOptionSelect } from '../CaseOptionSelects/VariogramOptionSelect';
+import { ModelAreaSelect } from '../CaseSettingSelects/ModelAreaSelect';
+import { VariogramOptionSelect } from '../CaseSettingSelects/VariogramSettingSelect';
 import * as Styled from './CaseRow.Styled';
 
 export const CaseRow = ({
@@ -409,34 +409,16 @@ export const CaseRow = ({
   }, [caseList, allCasesList, id, saved]);
 
   useEffect(() => {
-    function setNotSavedVariogram(r: ComputeCaseDto) {
-      if (r.computeMethod.name === 'Indicator') {
+    function setNotSavedVariogram(r: ComputeCaseDto, type: string) {
+      if (r.computeMethod.name === type) {
         setSaved(false);
       }
     }
 
-    allCasesList.forEach((r) => setNotSavedVariogram(r));
-  }, [caseList, allCasesList, id, saved]);
-
-  useEffect(() => {
-    function setNotSavedVariogram(r: ComputeCaseDto) {
-      if (r.computeMethod.name === 'Net-To-Gross') {
-        setSaved(false);
-      }
-    }
-
-    allCasesList.forEach((r) => setNotSavedVariogram(r));
-  }, [caseList, allCasesList, id, saved]);
-
-  useEffect(() => {
-    function setNotSavedVariogram(r: ComputeCaseDto) {
-      if (r.computeMethod.name === 'ContiniousParameter') {
-        setSaved(false);
-      }
-    }
-
-    allCasesList.forEach((r) => setNotSavedVariogram(r));
-  }, [caseList, allCasesList, id, saved]);
+    allCasesList.forEach((r) => setNotSavedVariogram(r, 'Indicator'));
+    allCasesList.forEach((r) => setNotSavedVariogram(r, 'Net-To-Gross'));
+    allCasesList.forEach((r) => setNotSavedVariogram(r, 'ContiniousParameter'));
+  }, [caseList, allCasesList, saved]);
 
   return (
     <Styled.Case>

src/features/Compute/CaseGroup/CaseOptionSelects/CaseSettingSelect/CaseSettingSelect.tsx → src/features/Compute/CaseGroup/CaseSettingSelects/CaseSettingSelect.tsx

@@ -1,5 +1,5 @@
 import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react';
-import { ListComputeSettingsInputValueDto } from '../../../../../api/generated';
+import { ListComputeSettingsInputValueDto } from '../../../../api/generated';
 
 export const CaseSettingSelect = ({
   label,
@@ -35,7 +35,7 @@ export const CaseSettingSelect = ({
       optionLabel={(option) => option.name}
       selectedOptions={selectedValue}
       onOptionsChange={onSelectChange}
-      multiple
+      multiple={settingType !== 'Net-To-Gross'}
     ></Autocomplete>
   );
 };

src/features/Compute/CaseGroup/CaseOptionSelects/ModelAreaSelect/ModelAreaSelect.tsx → src/features/Compute/CaseGroup/CaseSettingSelects/ModelAreaSelect.tsx

@@ -4,8 +4,8 @@ import {
   AutocompleteChanges,
   Label,
 } from '@equinor/eds-core-react';
-import { ComputeCaseDto, ModelAreaDto } from '../../../../../api/generated';
-import * as Styled from '../CaseOptionSelects.styled';
+import { ComputeCaseDto, ModelAreaDto } from '../../../../api/generated';
+import * as Styled from './SettingSelect.styled';
 
 export const ModelAreaSelect = ({
   modelAreas,