chore(merge): merge main

src/components/InfoPageComponent/InfoPageComponent.style.tsx

@@ -8,6 +8,11 @@ const StyledInforPage = styled.div`
   justify-content: center;
   padding-top: 10%;
 
+  &.scaleHight {
+    height: calc(100% - 75.5px);
+    padding-top: 5%;
+  }
+
   width: 100%;
   height: 100%;
 `;

src/components/InfoPageComponent/InfoPageComponent.tsx

@@ -4,12 +4,14 @@ import * as Styled from './InfoPageComponent.style';
 export const InfoPageComponent = ({
   title,
   children,
+  scaleHight,
 }: {
-  title: string;
+  title?: string;
   children?: React.ReactNode;
+  scaleHight?: string;
 }) => {
   return (
-    <Styled.Page className="about-container">
+    <Styled.Page className={scaleHight && 'scaleHight'}>
       <Styled.InnerWrapper>
         <Typography variant="h1">{title}</Typography>
         {children}

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

@@ -1,6 +1,6 @@
 import { Dialog } from '@equinor/eds-core-react';
 import styled from 'styled-components';
-import { spacings } from '../../tokens/spacings';
+import { spacings } from '../../../tokens/spacings';
 
 const StyledDialog = styled(Dialog)`
   min-width: 600px;
@@ -12,6 +12,12 @@ const StyledDialogCustomContent = styled(Dialog.CustomContent)`
   flex-direction: column;
   row-gap: ${spacings.X_LARGE};
   height: 740px;
+
+  > p {
+    &.error {
+      color: red;
+    }
+  }
 `;
 
 const StyledDialogActions = styled(Dialog.Actions)`

src/features/AddModel/AddModelDialog/AddModelDialog.tsx

@@ -0,0 +1,114 @@
+/* eslint-disable max-lines-per-function */
+import { Button, Typography } from '@equinor/eds-core-react';
+import { useEffect, useState } from 'react';
+import { ModelInputFilesTable } from '../ModelInputFilesTable/ModelInputFilesTable';
+import { ModelMetadata } from '../ModelMetadata/ModelMetadata';
+import * as Styled from './AddModelDialog.styled';
+
+interface AddModelDialogProps {
+  isOpen: boolean;
+  confirm: (file: File) => Promise<void>;
+  cancel: () => void;
+}
+
+export default interface MetadataProps {
+  description?: string;
+  field: string[];
+  zone?: string[];
+  formation: string[];
+  analogue?: string[];
+}
+
+export type ErrorType = {
+  field?: string;
+  formation?: string;
+  file?: string;
+};
+export const AddModelDialog = ({
+  isOpen,
+  confirm,
+  cancel,
+}: AddModelDialogProps) => {
+  const [isFileDisplay, setFileDisplay] = useState<boolean>(false);
+  const [files, setFiles] = useState<{ NC?: File; INI?: File }>({
+    NC: undefined,
+    INI: undefined,
+  });
+  const [metadata, setMetadata] = useState<Partial<MetadataProps>>();
+  const [errors, setErrors] = useState({});
+  const [submitting, setSubmitting] = useState(false);
+
+  function toggleINIFileContent() {
+    setFileDisplay(!isFileDisplay);
+  }
+
+  const INIFileContent = () => <p>Not implemented yet...</p>;
+
+  const validateValues = (inputValues: Partial<MetadataProps> | undefined) => {
+    const errors: ErrorType = {};
+    if (inputValues?.field === undefined || inputValues?.field?.length === 0) {
+      errors.field = 'Field not selected';
+    }
+
+    if (
+      inputValues?.formation === undefined ||
+      inputValues?.formation?.length === 0
+    ) {
+      errors.formation = 'Formation not selected';
+    }
+
+    if (!files.NC) {
+      errors.file = 'NC file missing';
+    }
+    return errors;
+  };
+
+  const handleSubmit = () => {
+    setErrors(validateValues(metadata));
+    setSubmitting(true);
+  };
+
+  const finishSubmit = () => {
+    if (files.NC) confirm(files.NC);
+  };
+
+  useEffect(() => {
+    if (Object.keys(errors).length === 0 && submitting) {
+      finishSubmit();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errors, submitting]);
+
+  return (
+    <Styled.Dialog open={isOpen}>
+      <Styled.Dialog.Header>
+        <Styled.Dialog.Title>Add new model</Styled.Dialog.Title>
+      </Styled.Dialog.Header>
+      <Styled.DialogCustomContent scrollable>
+        <ModelInputFilesTable
+          files={files}
+          setFiles={setFiles}
+          fileDisplay={{
+            isVisible: isFileDisplay,
+            toggle: toggleINIFileContent,
+          }}
+        />
+        {isFileDisplay && <INIFileContent />}
+        <ModelMetadata
+          errors={errors}
+          metadata={metadata}
+          setMetadata={setMetadata}
+        />
+        {Object.keys(errors).includes('file') && (
+          <Typography className="error">NC file missing</Typography>
+        )}
+      </Styled.DialogCustomContent>
+      <Styled.DialogActions>
+        <Button onClick={handleSubmit}>Confirm and start uploading</Button>
+        <Button variant="outlined" onClick={cancel}>
+          Cancel
+        </Button>
+      </Styled.DialogActions>
+    </Styled.Dialog>
+  );
+};

src/features/FileUploader/FileUploader.styled.ts → src/features/AddModel/FileUploader/FileUploader.styled.ts

@@ -1,6 +1,6 @@
 import { Typography } from '@equinor/eds-core-react';
 import styled from 'styled-components';
-import { spacings } from '../../tokens/spacings';
+import { spacings } from '../../../tokens/spacings';
 
 /*
   Note: Hiding the input element because it is ugly,

src/features/FileUploader/FileUploader.tsx → src/features/AddModel/FileUploader/FileUploader.tsx

@@ -1,7 +1,7 @@
 import { Icon } from '@equinor/eds-core-react';
 import { subdirectory_arrow_right as arrowIcon } from '@equinor/eds-icons';
 import { ChangeEvent, useRef } from 'react';
-import { theme } from '../../tokens/theme';
+import { theme } from '../../../tokens/theme';
 import { FileUpload, SelectFile } from './FileUploader.styled';
 
 interface FileUploaderProps {

src/features/ModelInputFilesTable/ModelInputFilesTable.tsx → src/features/AddModel/ModelInputFilesTable/ModelInputFilesTable.tsx

@@ -1,7 +1,7 @@
 import { Button, Table } from '@equinor/eds-core-react';
 import { delete_to_trash as deleteIcon } from '@equinor/eds-icons';
 import { ChangeEvent } from 'react';
-import IconButton from '../../components/IconButton/IconButton';
+import IconButton from '../../../components/IconButton/IconButton';
 import { FileUploader } from '../FileUploader/FileUploader';
 
 type FileDisplay = { isVisible: boolean; toggle: () => void };

src/features/AddModel/ModelMetadata/ModelMetadata.styled.ts

@@ -0,0 +1,48 @@
+import { TextField } from '@equinor/eds-core-react';
+import styled from 'styled-components';
+import { spacings } from '../../../tokens/spacings';
+export const ModelMetadata = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  row-gap: ${spacings.MEDIUM};
+`;
+
+export const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.MEDIUM};
+`;
+
+export const AutocompleteWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.MEDIUM};
+`;
+export const AutocompleteRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: end;
+  column-gap: ${spacings.MEDIUM};
+
+  > div {
+    flex-grow: 1;
+  }
+`;
+
+export const TextInput = styled(TextField)`
+  display: flex;
+  flex-direction: column;
+`;
+export const Required = styled.div`
+  > label {
+    color: red;
+  }
+  > .model-required {
+    > div {
+      > div {
+        border: solid 2px red;
+      }
+    }
+  }
+`;

src/features/AddModel/ModelMetadata/ModelMetadata.tsx

@@ -0,0 +1,97 @@
+/* eslint-disable max-lines-per-function */
+import {
+  Autocomplete,
+  AutocompleteChanges,
+  Label,
+  Typography,
+} from '@equinor/eds-core-react';
+import MetadataProps, { ErrorType } from '../AddModelDialog/AddModelDialog';
+
+import * as Styled from './ModelMetadata.styled';
+
+export const ModelMetadata = ({
+  errors,
+  metadata,
+  setMetadata,
+}: {
+  errors: ErrorType;
+  metadata: Partial<MetadataProps> | undefined;
+  setMetadata: (metadata: Partial<MetadataProps>) => void;
+}) => {
+  const fields = {
+    description: 'Description string',
+    field: ['Tor', 'Pål'],
+    zone: ['Zone 1', 'Zone 2', 'Zone 3'],
+    formation: ['Rocky', 'Hilly', 'Flat'],
+    analogue: ['Analouge1', 'Analouge2'],
+  };
+
+  const handleInput = (e: AutocompleteChanges<string>, target: string) => {
+    setMetadata({ ...metadata, [target]: e.selectedItems });
+  };
+
+  return (
+    <Styled.ModelMetadata className="model-metadata">
+      <Typography variant="h4">Description and metadata</Typography>
+      <Styled.Form>
+        <Styled.TextInput
+          id="model-description"
+          label="Model description (optional)"
+          value={metadata?.description}
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+            setMetadata({ ...metadata, description: e.currentTarget.value })
+          }
+          multiline
+          rows={4}
+          rowsMax={8}
+        />
+        <Styled.AutocompleteWrapper>
+          <Styled.AutocompleteRow>
+            <Styled.Required>
+              <Autocomplete
+                className={`${errors.field && 'model-required'}`}
+                label="Field"
+                options={fields.field}
+                onOptionsChange={(e: AutocompleteChanges<string>) =>
+                  handleInput(e, 'field')
+                }
+              ></Autocomplete>
+              {errors.field && <Label label="This field is required"></Label>}
+            </Styled.Required>
+            <Styled.Required>
+              <Autocomplete
+                className={`${errors.formation && 'model-required'}`}
+                label="Formation"
+                options={fields.formation}
+                multiple
+                onOptionsChange={(e: AutocompleteChanges<string>) =>
+                  handleInput(e, 'formation')
+                }
+              ></Autocomplete>
+              {errors.formation && (
+                <Label label="This field is required"></Label>
+              )}
+            </Styled.Required>
+          </Styled.AutocompleteRow>
+          <Styled.AutocompleteRow>
+            <Autocomplete
+              label="Analogue (optional)"
+              options={fields.analogue}
+              multiple
+              onOptionsChange={(e: AutocompleteChanges<string>) =>
+                setMetadata({ ...metadata, analogue: e.selectedItems })
+              }
+            ></Autocomplete>
+            <Autocomplete
+              label="Zone (optional)"
+              options={fields.zone}
+              onOptionsChange={(e: AutocompleteChanges<string>) =>
+                setMetadata({ ...metadata, zone: e.selectedItems })
+              }
+            ></Autocomplete>
+          </Styled.AutocompleteRow>
+        </Styled.AutocompleteWrapper>
+      </Styled.Form>
+    </Styled.ModelMetadata>
+  );
+};