Merge pull request opendatahub-io#144 from dlabaj/pvc-bug-fix

Fix for input not allowing blank spaces.:
tumido · Mar 17, 2022 · 69f6f28 · 69f6f28
2 parents db5c813 + 9fac0a8
commit 69f6f28
Showing 1 changed file with 48 additions and 33 deletions.
diff --git a/frontend/src/pages/clusterSettings/ClusterSettings.tsx b/frontend/src/pages/clusterSettings/ClusterSettings.tsx
@@ -21,6 +21,7 @@ import { ClusterSettings } from '../../types';
 import { useDispatch } from 'react-redux';
 import { addNotification } from '../../redux/actions/actions';
 import './ClusterSettings.scss';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
 
 const description = `Update global settings for all users.`;
 
@@ -36,7 +37,7 @@ const ClusterSettings: React.FC = () => {
   const [loaded, setLoaded] = React.useState<boolean>(false);
   const [loadError, setLoadError] = React.useState<Error>();
   const [clusterSettings, setClusterSettings] = React.useState(DEFAULT_CONFIG);
-  const [pvcSize, setPvcSize] = React.useState<number>(DEFAULT_PVC_SIZE);
+  const [pvcSize, setPvcSize] = React.useState<number | string>(DEFAULT_PVC_SIZE);
   const pvcDefaultBtnRef = React.useRef<HTMLButtonElement>();
   const dispatch = useDispatch();
 
@@ -55,31 +56,33 @@ const ClusterSettings: React.FC = () => {
 
   const submitClusterSettings = (newClusterSettings: ClusterSettings) => {
     if (!_.isEqual(clusterSettings, newClusterSettings)) {
-      updateClusterSettings(newClusterSettings)
-        .then((response) => {
-          if (response.success) {
-            setClusterSettings(newClusterSettings);
+      if (Number(newClusterSettings?.pvcSize) !== 0) {
+        updateClusterSettings(newClusterSettings)
+          .then((response) => {
+            if (response.success) {
+              setClusterSettings(newClusterSettings);
+              dispatch(
+                addNotification({
+                  status: 'success',
+                  title: 'Cluster settings updated successfully.',
+                  timestamp: new Date(),
+                }),
+              );
+            } else {
+              throw new Error(response.error);
+            }
+          })
+          .catch((e) => {
             dispatch(
               addNotification({
-                status: 'success',
-                title: 'Cluster settings updated successfully.',
+                status: 'danger',
+                title: 'Error',
+                message: e.message,
                 timestamp: new Date(),
               }),
             );
-          } else {
-            throw new Error(response.error);
-          }
-        })
-        .catch((e) => {
-          dispatch(
-            addNotification({
-              status: 'danger',
-              title: 'Error',
-              message: e.message,
-              timestamp: new Date(),
-            }),
-          );
-        });
+          });
+      }
     }
   };
 
@@ -107,7 +110,10 @@ const ClusterSettings: React.FC = () => {
                   <FormGroup
                     fieldId="pvc-size"
                     label="PVC size"
-                    helperText="Note: The default size is 20 GiB."
+                    helperText="Note: PVC size must be between 1 GiB and 16384 GiB."
+                    helperTextInvalid="Note: PVC size must be between 1 GiB and 16384 GiB."
+                    helperTextInvalidIcon={<ExclamationCircleIcon />}
+                    validated={pvcSize !== '' ? 'success' : 'error'}
                   >
                     <Text>
                       Changing the PVC size changes the storage size attached to the new notebook
@@ -121,22 +127,31 @@ const ClusterSettings: React.FC = () => {
                         type="text"
                         aria-label="PVC Size Input"
                         value={pvcSize}
-                        pattern="[0-9]+"
-                        onBlur={() => submitClusterSettings({ pvcSize })}
+                        pattern="/^(\s*|\d+)$/"
+                        onBlur={() => {
+                          submitClusterSettings({ pvcSize: Number(pvcSize) });
+                        }}
                         onKeyPress={(event) => {
                           if (event.key === 'Enter') {
                             if (pvcDefaultBtnRef.current) pvcDefaultBtnRef.current.focus();
                           }
                         }}
                         onChange={async (value: string) => {
-                          let newValue = isNaN(Number(value)) ? pvcSize : Number(value);
-                          newValue =
-                            newValue > MAX_PVC_SIZE
-                              ? MAX_PVC_SIZE
-                              : newValue < MIN_PVC_SIZE
-                              ? MIN_PVC_SIZE
-                              : newValue;
-                          setPvcSize(newValue);
+                          const modifiedValue = value.replace(/ /g, '');
+                          if (modifiedValue !== '') {
+                            let newValue = Number.isInteger(Number(modifiedValue))
+                              ? Number(modifiedValue)
+                              : pvcSize;
+                            newValue =
+                              newValue > MAX_PVC_SIZE
+                                ? MAX_PVC_SIZE
+                                : newValue < MIN_PVC_SIZE
+                                ? MIN_PVC_SIZE
+                                : newValue;
+                            setPvcSize(newValue);
+                          } else {
+                            setPvcSize(modifiedValue);
+                          }
                         }}
                       />
                       <InputGroupText id="plain-example" variant={InputGroupTextVariant.plain}>
@@ -151,7 +166,7 @@ const ClusterSettings: React.FC = () => {
                         submitClusterSettings({ pvcSize: DEFAULT_PVC_SIZE });
                       }}
                     >
-                      Restore Defaults
+                      Restore Default
                     </Button>
                   </FormGroup>
                 </Form>