Fix/clientside validation in repo creation 833

docs/assets/js/swagger.yml

@@ -91,6 +91,7 @@ definitions:
     properties:
       id:
         type: string
+        pattern: '^[a-z0-9][a-z0-9-]{2,62}$'
       storage_namespace:
         type: string
         description: "Filesystem URI to store the underlying data in (e.g. 's3://my-bucket/some/path/')"

swagger.yml

@@ -91,6 +91,7 @@ definitions:
     properties:
       name:
         type: string
+        pattern: '^[a-z0-9][a-z0-9-]{2,62}$'
       storage_namespace:
         type: string
         description: "Filesystem URI to store the underlying data in (e.g. 's3://my-bucket/some/path/')"

webui/src/components/RepositoryCreateForm.js

@@ -18,20 +18,33 @@ export const RepositoryCreateForm = connect(
     };
   })(({ error, onSubmit, onCancel, create, sm = 6, config }) => {
     const fieldNameOffset = 3;
+    const repoValidityRegex = /^[a-z0-9][a-z0-9-]{2,62}$/;
+    const storageNamespaceValidityRegex = /^(s3|gs|mem|local|transient):\/.*$/;
 
     const [formValid, setFormValid] = useState(false);
+    const [repoValid, setRepoValid] = useState(true);
+    const [storageNamespaceValid, setStorageNamespaceValid] = useState(true);
+    const [defaultBranchValid, setDefaultBranchValid] = useState(true);
     const storageNamespaceField = useRef(null);
     const defaultBranchField = useRef(null);
     const repoNameField = useRef(null);
 
-    const checkValidity = () => {
-        if (repoNameField.current.value.length === 0 ||
-            storageNamespaceField.current.value.length === 0 ||
-            defaultBranchField.current.value.length === 0) {
-            setFormValid(false);
-            return;
-        }
-        setFormValid(true);
+    const checkRepoValidity = () => {
+        const isRepoValid = repoValidityRegex.test(repoNameField.current.value)
+        setRepoValid(isRepoValid);
+        setFormValid(isRepoValid && storageNamespaceValid && defaultBranchValid);
+    };
+
+    const checkStorageNamespaceValidity = () => {
+        const isStorageNamespaceValid = storageNamespaceValidityRegex.test(storageNamespaceField.current.value)
+        setStorageNamespaceValid(isStorageNamespaceValid);
+        setFormValid(isStorageNamespaceValid && defaultBranchValid && repoValid);
+    };
+
+    const checkDefaultBranchValidity = () => {
+        const isBranchValid = defaultBranchField.current.value.length;
+        setDefaultBranchValid(isBranchValid);
+        setFormValid(isBranchValid && storageNamespaceValid && repoValid);
     };
 
     let blockstoreType = config.payload == null ? DEFAULT_BLOCKSTORE_TYPE : config.payload['blockstore.type']
@@ -51,20 +64,35 @@ export const RepositoryCreateForm = connect(
             <Form.Group as={Row} controlId="id">
                 <Form.Label column sm={fieldNameOffset}>Repository ID</Form.Label>
                 <Col sm={sm}>
-                    <Form.Control type="text" autoFocus ref={repoNameField} onChange={checkValidity}/>
+                    <Form.Control type="text" autoFocus ref={repoNameField} onChange={checkRepoValidity}/>
+                    {!repoValid &&
+                        <Form.Text className="text-danger">
+                            Min 2 characters. Only lowercase alphanumeric characters and '-' allowed.
+                        </Form.Text>
+                    }
                 </Col>
             </Form.Group>
 
             <Form.Group as={Row}>
                 <Form.Label column sm={fieldNameOffset}>Storage Namespace</Form.Label>
                     <Col sm={sm}>
-                        <Form.Control type="text" ref={storageNamespaceField} placeholder={`e.g. ${blockstoreType}://example-bucket/`} onChange={checkValidity}/>
+                        <Form.Control type="text" ref={storageNamespaceField} placeholder={`e.g. ${blockstoreType}://example-bucket/`} onChange={checkStorageNamespaceValidity}/>
+                        {!storageNamespaceValid &&
+                            <Form.Text className="text-danger">
+                                Invalid Storage Namespace.
+                            </Form.Text>
+                        }
                     </Col>
             </Form.Group>
             <Form.Group as={Row} controlId="defaultBranch">
                 <Form.Label column sm={fieldNameOffset}>Default Branch</Form.Label>
                 <Col sm={sm}>
-                    <Form.Control type="text" ref={defaultBranchField} placeholder="defaultBranch" defaultValue={"master"} onChange={checkValidity}/>
+                    <Form.Control type="text" ref={defaultBranchField} placeholder="defaultBranch" defaultValue={"master"} onChange={checkDefaultBranchValidity}/>
+                    {!defaultBranchValid &&
+                        <Form.Text className="text-danger">
+                            Invalid Branch.
+                        </Form.Text>
+                    }
                 </Col>
             </Form.Group>