From b59be5931cb0796f4002aa7c774bd51a8f61a6ef Mon Sep 17 00:00:00 2001
From: Mathias Oppedal Heggelund <98742460+mheggelund@users.noreply.github.com>
Date: Fri, 21 Jun 2024 09:06:22 +0200
Subject: [PATCH] chore: Change to dialog for edit name and description in
 modle view. (#301)

---
 .../HandleModelComponent.hooks.ts             |   8 +-
 .../HandleModelComponent.tsx                  |  52 ++-------
 .../EditNameDescription.styled.ts             |  14 +++
 .../EditNameDescription.tsx                   | 106 ++++++++++++++++++
 .../ModelMetadataView.styled.tsx              |  23 +---
 .../ModelMetadataView/ModelMetadataView.tsx   |  27 ++---
 6 files changed, 143 insertions(+), 87 deletions(-)
 create mode 100644 src/features/ModelView/EditNameDescription/EditNameDescription.styled.ts
 create mode 100644 src/features/ModelView/EditNameDescription/EditNameDescription.tsx

diff --git a/src/features/HandleModel/HandleModelComponent/HandleModelComponent.hooks.ts b/src/features/HandleModel/HandleModelComponent/HandleModelComponent.hooks.ts
index 12a636c..916eb83 100644
--- a/src/features/HandleModel/HandleModelComponent/HandleModelComponent.hooks.ts
+++ b/src/features/HandleModel/HandleModelComponent/HandleModelComponent.hooks.ts
@@ -24,7 +24,7 @@ export const useHandleModelComponent = (
 
 export const validateValues = (
   inputValues: Partial<AnalogueModelDetail> | undefined,
-  files: FilesProps,
+  files?: FilesProps,
   isEdit?: boolean,
 ) => {
   const errors: ErrorType = {};
@@ -40,8 +40,10 @@ export const validateValues = (
     errors.description = 'Description not provided';
   }
 
-  if (!files.NC && !isEdit) {
-    errors.file = 'NC file missing';
+  if (files && !isEdit) {
+    if (!files.NC) {
+      errors.file = 'NC file missing';
+    }
   }
 
   return errors;
diff --git a/src/features/HandleModel/HandleModelComponent/HandleModelComponent.tsx b/src/features/HandleModel/HandleModelComponent/HandleModelComponent.tsx
index e417a47..13fdcc9 100644
--- a/src/features/HandleModel/HandleModelComponent/HandleModelComponent.tsx
+++ b/src/features/HandleModel/HandleModelComponent/HandleModelComponent.tsx
@@ -22,14 +22,11 @@ import * as Styled from './HandleModelComponent.styled';
 
 interface AddModelDialogProps {
   confirm?: (file: File, metadata: AnalogueModelDetail) => Promise<void>;
-  edit?: (metadata: AnalogueModelDetail) => Promise<void>;
   progress?: number;
   uploading?: boolean;
   defaultMetadata: AnalogueModelDetail;
-  isEdit?: boolean;
   isAddUploading?: boolean;
   existingData?: AnalogueModelDetail;
-  closeDialog?: () => void;
   modelId?: string;
 }
 
@@ -69,14 +66,11 @@ export interface StratColumnType {
 
 export const HandleModelComponent = ({
   confirm,
-  edit,
   progress,
   uploading,
   defaultMetadata,
-  isEdit,
   isAddUploading,
   existingData,
-  closeDialog,
   modelId,
 }: AddModelDialogProps) => {
   const [isFileDisplay, setFileDisplay] = useState<boolean>(false);
@@ -99,15 +93,10 @@ export const HandleModelComponent = ({
   );
 
   const handleSubmit = () => {
-    setErrors(validateValues(metadata, files, isEdit));
+    setErrors(validateValues(metadata, files));
     setSubmitting(true);
   };
 
-  const handleClose = () => {
-    setMetadata(defaultMetadata);
-    if (closeDialog) closeDialog();
-  };
-
   const fileAdded = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!e.target.files) return;
     const file = e.target.files[0];
@@ -118,7 +107,6 @@ export const HandleModelComponent = ({
 
   useEffect(() => {
     const cleanupStates = () => {
-      if (!isEdit) setMetadata(defaultMetadata);
       setFiles(defaultFiles);
       setrawFile(undefined);
       setFileSize(0);
@@ -126,10 +114,8 @@ export const HandleModelComponent = ({
     };
 
     const finishSubmit = () => {
-      if (files.NC && !isEdit && confirm) {
+      if (files.NC && confirm) {
         confirm(files.NC, metadata);
-      } else if (isEdit && edit) {
-        edit(metadata);
       }
       cleanupStates();
     };
@@ -137,16 +123,7 @@ export const HandleModelComponent = ({
     if (Object.keys(errors).length === 0 && submitting) {
       finishSubmit();
     }
-  }, [
-    confirm,
-    defaultMetadata,
-    edit,
-    errors,
-    files.NC,
-    isEdit,
-    metadata,
-    submitting,
-  ]);
+  }, [confirm, defaultMetadata, errors, files.NC, metadata, submitting]);
 
   function toggleINIFileContent() {
     setFileDisplay(!isFileDisplay);
@@ -172,13 +149,11 @@ export const HandleModelComponent = ({
 
   return (
     <Styled.Wrapper>
-      {!isEdit && progress !== undefined && progress <= 0 && (
-        <Typography variant="h3">
-          {isEdit ? 'Edit model details' : 'Add new model'}
-        </Typography>
+      {progress !== undefined && progress <= 0 && (
+        <Typography variant="h3">Add new model</Typography>
       )}
       <Styled.CustomContent>
-        {!isEdit && progress !== undefined && progress <= 0 && (
+        {progress !== undefined && progress <= 0 && (
           <ModelInputFilesTable
             files={files}
             setFiles={setFiles}
@@ -191,7 +166,7 @@ export const HandleModelComponent = ({
           />
         )}
         {isFileDisplay && <INIFileContent />}
-        {(isEdit || !isAddUploading) && (
+        {!isAddUploading && (
           <>
             <ModelMetadata
               errors={errors}
@@ -213,21 +188,10 @@ export const HandleModelComponent = ({
       {!isAddUploading && (
         <div>
           <Button onClick={handleSubmit} disabled={uploading}>
-            {isEdit
-              ? 'Save changes'
-              : uploading
+            {uploading
               ? 'Wait for model to finish uploading'
               : 'Confirm and start uploading'}
           </Button>
-          {isEdit && (
-            <Button
-              variant="outlined"
-              onClick={handleClose}
-              disabled={uploading}
-            >
-              Close
-            </Button>
-          )}
         </div>
       )}
 
diff --git a/src/features/ModelView/EditNameDescription/EditNameDescription.styled.ts b/src/features/ModelView/EditNameDescription/EditNameDescription.styled.ts
new file mode 100644
index 0000000..fec9567
--- /dev/null
+++ b/src/features/ModelView/EditNameDescription/EditNameDescription.styled.ts
@@ -0,0 +1,14 @@
+import { Dialog } from '@equinor/eds-core-react';
+import styled from 'styled-components';
+import { spacings } from '../../../tokens/spacings';
+
+export const DialogWrapper = styled(Dialog)`
+  min-width: 300px;
+`;
+
+export const Buttons = styled(Dialog.Actions)`
+  display: flex;
+  flex-direction: row;
+
+  column-gap: ${spacings.SMALL};
+`;
diff --git a/src/features/ModelView/EditNameDescription/EditNameDescription.tsx b/src/features/ModelView/EditNameDescription/EditNameDescription.tsx
new file mode 100644
index 0000000..3a1cc28
--- /dev/null
+++ b/src/features/ModelView/EditNameDescription/EditNameDescription.tsx
@@ -0,0 +1,106 @@
+/* eslint-disable max-lines-per-function */
+import { Button, Dialog, Typography } from '@equinor/eds-core-react';
+import _ from 'lodash';
+import { useEffect, useState } from 'react';
+import { AnalogueModelDetail } from '../../../api/generated';
+import { ErrorBanner } from '../../../components/ErrorBanner/ErrorBanner';
+import { validateValues } from '../../HandleModel/HandleModelComponent/HandleModelComponent.hooks';
+import * as Styled2 from '../../HandleModel/HandleModelComponent/HandleModelComponent.styled';
+import { ModelMetadata } from '../../HandleModel/ModelMetadata/ModelMetadata';
+import * as Styled from './EditNameDescription.styled';
+export const EditNameDescription = ({
+  edit,
+  isEdit,
+  defaultMetadata,
+  closeDialog,
+}: {
+  edit: (metadata: AnalogueModelDetail) => Promise<void>;
+  isEdit: boolean;
+  defaultMetadata: AnalogueModelDetail;
+  closeDialog: () => void;
+}) => {
+  const [errors, setErrors] = useState({});
+  const [metadata, setMetadata] =
+    useState<AnalogueModelDetail>(defaultMetadata);
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    const cleanupStates = () => {
+      if (!isEdit) setMetadata(defaultMetadata);
+      setSubmitting(false);
+    };
+
+    const finishSubmit = () => {
+      if (isEdit && edit) {
+        edit(metadata);
+      }
+      cleanupStates();
+    };
+
+    if (Object.keys(errors).length === 0 && submitting) {
+      finishSubmit();
+    }
+  }, [defaultMetadata, edit, errors, isEdit, metadata, submitting]);
+
+  const getErroMessageList = () => {
+    if (_.isEmpty(errors)) return;
+
+    const errorList: string[] = [];
+
+    Object.keys(errors).forEach(function (key) {
+      // TODO: Fix the TS error for errors[key]
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      const message = errors[key];
+      errorList.push(message);
+    });
+    return errorList;
+  };
+  const ErrorList = getErroMessageList();
+
+  const handleSubmit = () => {
+    setErrors(validateValues(metadata, undefined, isEdit));
+    setSubmitting(true);
+  };
+
+  const handleClose = () => {
+    setMetadata(defaultMetadata);
+    if (closeDialog) closeDialog();
+  };
+
+  return (
+    <>
+      <Styled.DialogWrapper open={isEdit ? isEdit : false}>
+        <Dialog.CustomContent>
+          <Typography variant="body_short">Edit name description</Typography>
+          {isEdit && (
+            <>
+              <ModelMetadata
+                errors={errors}
+                metadata={metadata}
+                setMetadata={setMetadata}
+              />
+              {!_.isEmpty(errors) &&
+                ErrorList !== undefined &&
+                ErrorList.map((e, i) => {
+                  return (
+                    <Styled2.ErrorDiv key={i}>
+                      <ErrorBanner text={e} />
+                    </Styled2.ErrorDiv>
+                  );
+                })}
+            </>
+          )}
+        </Dialog.CustomContent>
+        <Styled.Buttons>
+          <Button variant="outlined" onClick={handleSubmit}>
+            Save
+          </Button>
+          <Button color={'danger'} variant="outlined" onClick={handleClose}>
+            Cancel
+          </Button>
+        </Styled.Buttons>
+      </Styled.DialogWrapper>
+    </>
+  );
+};
diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx
index 461b850..9577caa 100644
--- a/src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx
+++ b/src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx
@@ -1,4 +1,4 @@
-import { Dialog, Table } from '@equinor/eds-core-react';
+import { Dialog } from '@equinor/eds-core-react';
 import styled from 'styled-components';
 import { spacings } from '../../../tokens/spacings';
 
@@ -27,28 +27,7 @@ export const MetadataInfo = styled.div`
   max-width: 60%;
 `;
 
-const DataTable = styled(Table)`
-  min-width: 256px;
-  width: 85%;
-`;
-
-export const DescriptionWrapper = styled.div`
-  min-height: 200px;
-`;
-
-export const DataCell = styled(Table.Cell)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  > p {
-    padding-right: 10px;
-  }
-`;
-
 export const Actions = styled(Dialog.Actions)`
   display: flex;
   column-gap: ${spacings.SMALL};
 `;
-
-export { DataTable as Table };
diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
index 3782d5f..8a6700b 100644
--- a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
+++ b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
@@ -24,10 +24,8 @@ import { GrossDepositionEnviromentGroup } from '../../../components/GrossDeposit
 import { StratigraphicColumnSelect } from '../../../components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect';
 import { StratigrapicGroups } from '../../../components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups';
 import { useFetchModel } from '../../../hooks/useFetchModel';
-import {
-  HandleModelComponent,
-  StratColumnType,
-} from '../../HandleModel/HandleModelComponent/HandleModelComponent';
+import { StratColumnType } from '../../HandleModel/HandleModelComponent/HandleModelComponent';
+import { EditNameDescription } from '../EditNameDescription/EditNameDescription';
 import * as Styled from './ModelMetadataView.styled';
 export const defaultStratColumnData: StratColumnType = {
   country: undefined,
@@ -315,21 +313,14 @@ export const ModelMetadataView = ({
           <>
             <Typography variant="h3">Description and metadata</Typography>
 
-            {!isAddModelDialog && (
-              <Styled.DescriptionWrapper>
-                {data.data.description && <div>{data.data.description}</div>}
-              </Styled.DescriptionWrapper>
-            )}
+            <>{data.data.description && <div>{data.data.description}</div>}</>
 
-            {isAddModelDialog && (
-              <HandleModelComponent
-                edit={updateModelMetadata}
-                defaultMetadata={defaultMetadata}
-                isEdit={true}
-                existingData={data.data}
-                closeDialog={toggleEditMetadata}
-              />
-            )}
+            <EditNameDescription
+              edit={updateModelMetadata}
+              isEdit={isAddModelDialog}
+              defaultMetadata={defaultMetadata}
+              closeDialog={toggleEditMetadata}
+            />
             <div>
               {!isAddModelDialog && (
                 <Button