pass less props

opendatahub-io · Sep 22, 2022 · 59d94c9 · 59d94c9
1 parent 289d654
commit 59d94c9
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 66 deletions.
diff --git a/frontend/src/pages/projects/modals/addStorageModal/AddExistingStorageForm.tsx b/frontend/src/pages/projects/modals/addStorageModal/AddExistingStorageForm.tsx
@@ -1,37 +1,20 @@
 import * as React from 'react';
 import { Select, Form, FormGroup, FlexItem, Flex } from '@patternfly/react-core';
+import { ExistingStorage } from './types';
 
 type AddExistingStorageFormProps = {
-  projectSelection: string | null;
-  setProjectSelection: (project: string | null) => void;
-  projectSelectOpen: boolean;
-  setProjectSelectOpen: (open: boolean) => void;
-  storageSelection: string | null;
-  setStorageSelection: (storage: string | null) => void;
-  storageSelectOpen: boolean;
-  setStorageSelectOpen: (open: boolean) => void;
+  selections: ExistingStorage;
+  onClear: (storageOnly: boolean) => void;
+  onUpdate: (selection: string, storageOnly: boolean) => void;
 };
 
 const AddExistingStorageForm: React.FC<AddExistingStorageFormProps> = ({
-  projectSelection,
-  setProjectSelection,
-  projectSelectOpen,
-  setProjectSelectOpen,
-  storageSelection,
-  setStorageSelection,
-  storageSelectOpen,
-  setStorageSelectOpen,
+  selections,
+  onClear,
+  onUpdate,
 }) => {
-  const clearProjectSelection = () => {
-    setProjectSelectOpen(false);
-    setProjectSelection(null);
-    setStorageSelection(null);
-  };
-
-  const clearStorageSelection = () => {
-    setStorageSelectOpen(false);
-    setStorageSelection(null);
-  };
+  const [projectSelectOpen, setProjectSelectOpen] = React.useState<boolean>(false);
+  const [storageSelectOpen, setStorageSelectOpen] = React.useState<boolean>(false);
 
   return (
     <Form>
@@ -43,9 +26,15 @@ const AddExistingStorageForm: React.FC<AddExistingStorageFormProps> = ({
           >
             <Select
               variant="typeahead"
-              selections={projectSelection as string}
+              selections={selections.project as string}
               isOpen={projectSelectOpen}
-              onClear={clearProjectSelection}
+              onClear={() => {
+                onClear(false);
+                setProjectSelectOpen(false);
+              }}
+              onSelect={(e, selection) => {
+                onUpdate(selection as string, false);
+              }}
               onToggle={(isOpen) => setProjectSelectOpen(isOpen)}
               placeholderText="Select a project"
               menuAppendTo="parent"
@@ -56,9 +45,15 @@ const AddExistingStorageForm: React.FC<AddExistingStorageFormProps> = ({
           <FormGroup label="PV" fieldId="add-existing-storage-pv-selection">
             <Select
               variant="typeahead"
-              selections={storageSelection as string}
+              selections={selections.storage as string}
               isOpen={storageSelectOpen}
-              onClear={clearStorageSelection}
+              onClear={() => {
+                onClear(true);
+                setStorageSelectOpen(false);
+              }}
+              onSelect={(e, selection) => {
+                onUpdate(selection as string, true);
+              }}
               onToggle={(isOpen) => setStorageSelectOpen(isOpen)}
               placeholderText="Select a PV"
               menuAppendTo="parent"

diff --git a/frontend/src/pages/projects/modals/addStorageModal/AddStorageModal.tsx b/frontend/src/pages/projects/modals/addStorageModal/AddStorageModal.tsx
@@ -4,6 +4,7 @@ import { DEFAULT_PVC_SIZE } from './const';
 import CreateNewStorageForm from './CreateNewStorageForm';
 import ConnectWorkbenchOptions from './ConnectWorkbenchOptions';
 import AddExistingStorageForm from './AddExistingStorageForm';
+import { ExistingStorage } from './types';
 
 import './addStorageModal.scss';
 
@@ -19,15 +20,35 @@ const AddStorageModal: React.FC<AddStorageModalProps> = ({ isOpen, onClose }) =>
   const [name, setName] = React.useState<string>('');
   const [description, setDescription] = React.useState<string>('');
   const [size, setSize] = React.useState<string>(DEFAULT_PVC_SIZE);
-  const [isConnectToAll, setConnectToAll] = React.useState<boolean>(true);
-  const [workbenchSelection, setWorkbenchSelection] = React.useState<string | null>(null);
-  const [workbenchSelectOpen, setWorkbenchSelectOpen] = React.useState<boolean>(false);
+  const [workbenchSelection, setWorkbenchSelection] = React.useState<string | string[] | null>([]);
 
   // states for adding existing PV
   const [projectSelection, setProjectSelection] = React.useState<string | null>(null);
-  const [projectSelectOpen, setProjectSelectOpen] = React.useState<boolean>(false);
   const [storageSelection, setStorageSelection] = React.useState<string | null>(null);
-  const [storageSelectOpen, setStorageSelectOpen] = React.useState<boolean>(false);
+  const existingSelections: ExistingStorage = React.useMemo(
+    () => ({ project: projectSelection, storage: storageSelection }),
+    [projectSelection, storageSelection],
+  );
+
+  const updateWorkbench = (workbench: string | string[] | null) => {
+    setWorkbenchSelection(workbench);
+  };
+
+  const updateExistingStorage = (selection: string, storageOnly: boolean) => {
+    if (!storageOnly) {
+      setProjectSelection(selection);
+      setStorageSelection(null);
+    } else {
+      setStorageSelection(selection);
+    }
+  };
+
+  const clearExistingStorage = (storageOnly: boolean) => {
+    if (!storageOnly) {
+      setProjectSelection(null);
+    }
+    setStorageSelection(null);
+  };
 
   return (
     <Modal
@@ -66,12 +87,9 @@ const AddStorageModal: React.FC<AddStorageModalProps> = ({ isOpen, onClose }) =>
                   setSize={setSize}
                   workbenchOptions={
                     <ConnectWorkbenchOptions
-                      isConnectToAll={isConnectToAll}
-                      setConnectToAll={setConnectToAll}
-                      workbenchSelectOpen={workbenchSelectOpen}
-                      setWorkbenchSelectOpen={setWorkbenchSelectOpen}
+                      allWorkbenches={[]}
                       workbenchSelection={workbenchSelection}
-                      setWorkbenchSelection={setWorkbenchSelection}
+                      onUpdate={updateWorkbench}
                     />
                   }
                 />
@@ -90,14 +108,9 @@ const AddStorageModal: React.FC<AddStorageModalProps> = ({ isOpen, onClose }) =>
             body={
               !isCreateNewPV && (
                 <AddExistingStorageForm
-                  projectSelection={projectSelection}
-                  setProjectSelection={setProjectSelection}
-                  projectSelectOpen={projectSelectOpen}
-                  setProjectSelectOpen={setProjectSelectOpen}
-                  storageSelection={storageSelection}
-                  setStorageSelection={setStorageSelection}
-                  storageSelectOpen={storageSelectOpen}
-                  setStorageSelectOpen={setStorageSelectOpen}
+                  selections={existingSelections}
+                  onClear={clearExistingStorage}
+                  onUpdate={updateExistingStorage}
                 />
               )
             }

diff --git a/frontend/src/pages/projects/modals/addStorageModal/ConnectWorkbenchOptions.tsx b/frontend/src/pages/projects/modals/addStorageModal/ConnectWorkbenchOptions.tsx
@@ -2,26 +2,18 @@ import * as React from 'react';
 import { Flex, FlexItem, Radio, Select } from '@patternfly/react-core';
 
 type ConnectWorkbenchOptionsProps = {
-  isConnectToAll: boolean;
-  setConnectToAll: (connectToAll: boolean) => void;
-  workbenchSelection: string | null;
-  setWorkbenchSelection: (selection: string | null) => void;
-  workbenchSelectOpen: boolean;
-  setWorkbenchSelectOpen: (open: boolean) => void;
+  allWorkbenches: string[]; // maybe workbench type in the future, take string now
+  workbenchSelection: string | string[] | null;
+  onUpdate: (workbench: string | string[] | null) => void;
 };
 
 const ConnectWorkbenchOptions: React.FC<ConnectWorkbenchOptionsProps> = ({
-  isConnectToAll,
-  setConnectToAll,
+  allWorkbenches,
   workbenchSelection,
-  setWorkbenchSelection,
-  workbenchSelectOpen,
-  setWorkbenchSelectOpen,
+  onUpdate,
 }) => {
-  const clearWorkbenchSelection = () => {
-    setWorkbenchSelectOpen(false);
-    setWorkbenchSelection(null);
-  };
+  const [workbenchSelectOpen, setWorkbenchSelectOpen] = React.useState<boolean>(false);
+  const isConnectToAll = Array.isArray(workbenchSelection);
   return (
     <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsSm' }}>
       <FlexItem>
@@ -30,7 +22,7 @@ const ConnectWorkbenchOptions: React.FC<ConnectWorkbenchOptionsProps> = ({
           name="connect-to-all-workbenches-radio"
           label="Connect to all workbenches"
           isChecked={isConnectToAll}
-          onChange={() => setConnectToAll(true)}
+          onChange={() => onUpdate(allWorkbenches)}
         />
       </FlexItem>
       <FlexItem>
@@ -40,14 +32,21 @@ const ConnectWorkbenchOptions: React.FC<ConnectWorkbenchOptionsProps> = ({
           name="connect-to-specific-workbench-radio"
           label="Connect to a specific workbench"
           isChecked={!isConnectToAll}
-          onChange={() => setConnectToAll(false)}
+          onChange={() => onUpdate(null)}
           body={
             !isConnectToAll && (
               <Select
                 variant="typeahead"
                 selections={workbenchSelection as string}
                 isOpen={workbenchSelectOpen}
-                onClear={clearWorkbenchSelection}
+                onClear={() => {
+                  onUpdate(null);
+                  setWorkbenchSelectOpen(false);
+                }}
+                onSelect={(e, selection) => {
+                  onUpdate(selection as string);
+                  setWorkbenchSelectOpen(false);
+                }}
                 onToggle={(isOpen) => setWorkbenchSelectOpen(isOpen)}
                 placeholderText="Choose an existing workbench"
                 menuAppendTo="parent"

diff --git a/frontend/src/pages/projects/modals/addStorageModal/types.ts b/frontend/src/pages/projects/modals/addStorageModal/types.ts
@@ -0,0 +1,4 @@
+export type ExistingStorage = {
+  project: string | null;
+  storage: string | null;
+};