diff --git a/docs/assets/js/swagger.yml b/docs/assets/js/swagger.yml index ab2d3ad03dd..60761218be1 100644 --- a/docs/assets/js/swagger.yml +++ b/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/')" diff --git a/swagger.yml b/swagger.yml index 5b2a576e692..032a5618615 100644 --- a/swagger.yml +++ b/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/')" diff --git a/webui/src/components/RepositoryCreateForm.js b/webui/src/components/RepositoryCreateForm.js index b61872aa966..1cc14aa4d8a 100644 --- a/webui/src/components/RepositoryCreateForm.js +++ b/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( Repository ID - + + {!repoValid && + + Min 2 characters. Only lowercase alphanumeric characters and '-' allowed. + + } Storage Namespace - + + {!storageNamespaceValid && + + Invalid Storage Namespace. + + } Default Branch - + + {!defaultBranchValid && + + Invalid Branch. + + }