Removed disable button logic to achieve overall consistency

openshift · Nov 20, 2019 · 5285eb9 · 5285eb9
1 parent c91b498
commit 5285eb9
Showing 1 changed file with 22 additions and 23 deletions.
diff --git a/...tend/packages/noobaa-storage-plugin/src/components/create-backingstore-page/create-bs.tsx b/...tend/packages/noobaa-storage-plugin/src/components/create-backingstore-page/create-bs.tsx
@@ -22,6 +22,7 @@ import {
   RequestSizeInput,
   resourceObjPath,
   withHandlePromise,
+  FieldLevelHelp,
 } from '@console/internal/components/utils';
 import { apiVersionForModel, k8sCreate, referenceFor } from '@console/internal/module/k8s';
 import { ModalComponentProps } from '@console/internal/components/factory';
@@ -88,6 +89,19 @@ const awsRegions = [
 
 const awsRegionItems = _.zipObject(awsRegions, awsRegions);
 
+const nameLabelTooltip = (
+  <>
+    <h3>Name requirements</h3>
+    <ul>
+      <li>3-63 characters</li>
+      <li>Starts and ends with a lowercase letter or number</li>
+      <li>Only lowercase letters, numbers, nonconsecutive periods or hyphens</li>
+      <li>Avoid using the form of an IP address</li>
+      <li>Globally unique name</li>
+    </ul>
+  </>
+);
+
 /**
  * aws-s3, s3 compatible share the same form
  */
@@ -487,26 +501,6 @@ const CreateBackingStoreForm: React.FC<CreateBackingStoreFormProps> = withHandle
     providerDataReducer,
     initialState,
   );
-  const [disabled, setDisabled] = React.useState(true);
-
-  // Basic validation of the form
-  React.useEffect(() => {
-    const secretLogic = !(
-      providerDataState.target.trim().length > 0 &&
-      ((providerDataState.accessKey.trim().length > 0 &&
-        providerDataState.secretKey.trim().length > 0) ||
-        providerDataState.secretName.length > 0)
-    );
-    if (namespace.length === 0 || bsName.trim().length === 0) {
-      setDisabled(true);
-    } else if (provider === 'AWS S3' && providerDataState.region.length === 0) {
-      setDisabled(true);
-    } else if (provider !== 'PVC' && secretLogic) {
-      setDisabled(true);
-    } else {
-      setDisabled(false);
-    }
-  }, [bsName, namespace.length, provider, providerDataState]);
 
   const { cancel, className, close, inProgress, errorMessage, handlePromise, isPage } = props;
 
@@ -571,10 +565,15 @@ const CreateBackingStoreForm: React.FC<CreateBackingStoreFormProps> = withHandle
       </FormGroup>
 
       <FormGroup
-        label="BackingStore Name"
+        label={
+          <>
+            BackingStore Name
+            <FieldLevelHelp>{nameLabelTooltip}</FieldLevelHelp>
+          </>
+        }
         fieldId="backingstore-name"
         className="nb-bs-form-entry"
-        helperText="If not provided, a generic name will be generated."
+        helperText="A unqiue name for the backingStore within the project"
       >
         <TextInput
           onChange={setBsName}
@@ -605,7 +604,7 @@ const CreateBackingStoreForm: React.FC<CreateBackingStoreFormProps> = withHandle
       {provider === 'PVC' && <PVCType state={providerDataState} dispatch={providerDataDispatch} />}
       <ButtonBar errorMessage={errorMessage} inProgress={inProgress}>
         <ActionGroup>
-          <Button type="submit" variant="primary" isDisabled={disabled}>
+          <Button type="submit" variant="primary">
             Create BackingStore
           </Button>
           <Button onClick={cancel} variant="secondary">