add disableSubmit property to Deploy image form initial values and us…

…e it to disable submit button while the user types fix unit test
openshift · May 7, 2020 · fe8095b · fe8095b
1 parent 355ac27
commit fe8095b
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 1 deletion.
diff --git a/...d/packages/dev-console/src/components/edit-application/__tests__/edit-application-data.ts b/...d/packages/dev-console/src/components/edit-application/__tests__/edit-application-data.ts
@@ -515,6 +515,7 @@ export const externalImageValues: DeployImageFormData = {
   build: { env: [], triggers: {}, strategy: '' },
   isSearchingForImage: false,
   healthChecks: healthChecksProbeInitialData,
+  disableSubmit: false,
 };
 
 export const internalImageValues: DeployImageFormData = {
@@ -590,6 +591,7 @@ export const internalImageValues: DeployImageFormData = {
   build: { env: [], triggers: {}, strategy: '' },
   isSearchingForImage: false,
   healthChecks: healthChecksProbeInitialData,
+  disableSubmit: false,
 };
 
 export const knAppResources: AppResources = {
@@ -669,6 +671,7 @@ export const knExternalImageValues: DeployImageFormData = {
   searchTerm: 'openshift/hello-openshift',
   serverless: { scaling: { concurrencylimit: '', concurrencytarget: '', maxpods: '', minpods: 0 } },
   healthChecks: healthChecksProbeInitialData,
+  disableSubmit: false,
 };
 
 export const gitImportInitialValuesWithHealthChecksEnabled: GitImportFormData = {

diff --git a/frontend/packages/dev-console/src/components/edit-application/edit-application-utils.ts b/frontend/packages/dev-console/src/components/edit-application/edit-application-utils.ts
@@ -315,6 +315,7 @@ const deployImageInitialValues = {
     strategy: '',
   },
   isSearchingForImage: false,
+  disableSubmit: false,
 };
 
 export const getExternalImageInitialValues = (appResources: AppResources) => {

diff --git a/frontend/packages/dev-console/src/components/import/DeployImage.tsx b/frontend/packages/dev-console/src/components/import/DeployImage.tsx
@@ -135,6 +135,7 @@ const DeployImage: React.FC<Props> = ({
       },
     },
     healthChecks: healthChecksProbeInitialData,
+    disableSubmit: true,
   };
 
   const handleSubmit = (values, actions) => {

diff --git a/frontend/packages/dev-console/src/components/import/DeployImageForm.tsx b/frontend/packages/dev-console/src/components/import/DeployImageForm.tsx
@@ -33,7 +33,7 @@ const DeployImageForm: React.FC<FormikProps<FormikValues> & DeployImageFormProps
       isSubmitting={isSubmitting}
       submitLabel="Create"
       sticky
-      disableSubmit={!dirty || !_.isEmpty(errors)}
+      disableSubmit={values.disableSubmit || !dirty || !_.isEmpty(errors)}
       resetLabel="Cancel"
     />
   </Form>

diff --git a/frontend/packages/dev-console/src/components/import/image-search/ImageSearch.tsx b/frontend/packages/dev-console/src/components/import/image-search/ImageSearch.tsx
@@ -74,6 +74,7 @@ const ImageSearch: React.FC = () => {
               (!initialValues.route.targetPort || touched.searchTerm) && _.head(ports);
             targetPort && setFieldValue('route.targetPort', makePortName(targetPort));
             setValidated(ValidatedOptions.success);
+            setFieldValue('disableSubmit', false);
           } else {
             setFieldValue('isSearchingForImage', false);
             setFieldValue('isi', {});
@@ -151,6 +152,7 @@ const ImageSearch: React.FC = () => {
         helpTextInvalid={helpTextInvalid}
         validated={validated}
         onChange={(e: KeyboardEvent) => {
+          setFieldValue('disableSubmit', true);
           debouncedHandleSearch((e.target as HTMLInputElement).value);
         }}
         data-test-id="deploy-image-search-term"

diff --git a/frontend/packages/dev-console/src/components/import/import-types.ts b/frontend/packages/dev-console/src/components/import/import-types.ts
@@ -83,6 +83,7 @@ export interface DeployImageFormData {
   deployment: DeploymentData;
   limits: LimitsData;
   healthChecks: HealthChecksData;
+  disableSubmit?: boolean;
 }
 
 export interface GitImportFormData {