fix: expose the isInitialValid property and set it appropriately in t…

…he editor, add some IDs; fixes #270; fixes #286
syndesisio · May 17, 2019 · 1fcaaf2 · 1fcaaf2
1 parent b34ccb9
commit 1fcaaf2
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 24 deletions.
diff --git a/app/ui-react/packages/auto-form/src/AutoForm.tsx b/app/ui-react/packages/auto-form/src/AutoForm.tsx
@@ -12,6 +12,10 @@ export interface IAutoFormProps<T> {
    * The initial value that should be set on the form
    */
   initialValue: T;
+  /**
+   * If the passed in value is valid or not
+   */
+  isInitialValid?: boolean;
   /**
    * String to be displayed when a required field isn't set
    */
@@ -63,6 +67,7 @@ export class AutoForm<T> extends React.Component<IAutoFormProps<T>> {
           <Formik<T>
             initialValues={initialValue}
             onSubmit={onSave}
+            isInitialValid={this.props.isInitialValid}
             validate={this.props.validate}
           >
             {({

diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationEditorForm.tsx b/app/ui-react/packages/ui/src/Integration/IntegrationEditorForm.tsx
@@ -52,14 +52,18 @@ export class IntegrationEditorForm extends React.Component<
                 <div className="card-pf-footer">
                   {this.props.backActionHref && (
                     <>
-                      <ButtonLink href={this.props.backActionHref}>
+                      <ButtonLink
+                        id={'integration-editor-form-back-button'}
+                        href={this.props.backActionHref}
+                      >
                         <i className={'fa fa-chevron-left'} />{' '}
                         {this.props.i18nBackAction}
                       </ButtonLink>
                       &nbsp;
                     </>
                   )}
                   <ButtonLink
+                    id={'integration-editor-form-next-button'}
                     onClick={this.props.submitForm}
                     disabled={!this.props.isValid}
                     as={'primary'}

diff --git a/app/ui-react/packages/ui/src/Integration/editor/endpoint/DescribeDataShapeForm.tsx b/app/ui-react/packages/ui/src/Integration/editor/endpoint/DescribeDataShapeForm.tsx
@@ -75,6 +75,7 @@ export class DescribeDataShapeForm extends React.Component<
                       <FieldLevelHelp content={this.props.i18nSelectTypeHelp} />
                     </ControlLabel>
                     <FormControl
+                      data-testid={'describe-data-shape-form-kind-select'}
                       componentClass="select"
                       value={this.props.kind}
                       onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
@@ -96,6 +97,7 @@ export class DescribeDataShapeForm extends React.Component<
                           content={this.props.i18nDefinitionHelp}
                         />
                         <TextEditor
+                          id={'describe-data-shape-form-definition-editor'}
                           value={this.props.definition || ''}
                           onChange={(editor, data, text) =>
                             this.props.onDefinitionChange(text)
@@ -121,6 +123,7 @@ export class DescribeDataShapeForm extends React.Component<
                           />
                         </ControlLabel>
                         <FormControl
+                          data-testid={'describe-data-shape-form-name-text'}
                           type="text"
                           value={this.props.name}
                           onChange={(
@@ -139,6 +142,9 @@ export class DescribeDataShapeForm extends React.Component<
                         </ControlLabel>
                         <FormControl
                           type="text"
+                          data-testid={
+                            'describe-data-shape-form-description-text'
+                          }
                           value={this.props.description}
                           onChange={(
                             event: React.ChangeEvent<HTMLInputElement>
@@ -154,14 +160,21 @@ export class DescribeDataShapeForm extends React.Component<
               <div className="card-pf-footer">
                 {this.props.backActionHref && (
                   <>
-                    <ButtonLink href={this.props.backActionHref}>
+                    <ButtonLink
+                      data-testid={'describe-data-shape-form-back-button'}
+                      href={this.props.backActionHref}
+                    >
                       <i className={'fa fa-chevron-left'} />{' '}
                       {this.props.i18nBackAction}
                     </ButtonLink>
                     &nbsp;
                   </>
                 )}
-                <ButtonLink onClick={this.props.onNext} as={'primary'}>
+                <ButtonLink
+                  data-testid={'describe-data-shape-form-next-button'}
+                  onClick={this.props.onNext}
+                  as={'primary'}
+                >
                   {this.props.i18nNext}
                 </ButtonLink>
               </div>

diff --git a/app/ui-react/packages/ui/src/Shared/TextEditor.tsx b/app/ui-react/packages/ui/src/Shared/TextEditor.tsx
@@ -13,6 +13,7 @@ export { CodeMirror };
 export type ITextEditor = CodeMirror.Editor;
 
 export interface ITextEditorProps {
+  id?: string;
   value: string;
   options: { [name: string]: any };
   onChange: (editor: ITextEditor, data: any, value: string) => void;
@@ -25,12 +26,15 @@ export class TextEditor extends React.Component<ITextEditorProps> {
     const options = { ...this.props.options };
     return (
       <>
-        <ReactCodeMirror
-          value={this.props.value}
-          options={options}
-          onChange={this.props.onChange}
-          editorDidMount={this.props.editorDidMount}
-        />
+        <div data-testid={this.props.id || 'codemirror'}>
+          <ReactCodeMirror
+            data-testid={this.props.id || 'codemirror'}
+            value={this.props.value}
+            options={options}
+            onChange={this.props.onChange}
+            editorDidMount={this.props.editorDidMount}
+          />
+        </div>
       </>
     );
   }

diff --git a/app/ui-react/packages/utils/src/autoformHelpers.ts b/app/ui-react/packages/utils/src/autoformHelpers.ts
@@ -72,8 +72,13 @@ export function validateConfiguredProperties(
   if (typeof values === 'undefined') {
     return false;
   }
-  const allRequiredSet = Object.keys(properties)
-    .filter(key => properties[key].required)
+  const allRequired = Object.keys(properties).filter(
+    key => properties[key].required
+  );
+  if (allRequired.length === 0) {
+    return true;
+  }
+  const allRequiredSet = allRequired
     .map(key => typeof values[key] !== 'undefined')
     .reduce((prev, curr) => curr, false);
   return allRequiredSet;

diff --git a/...ct/syndesis/src/modules/integrations/components/editor/endpoint/WithConfigurationForm.tsx b/...ct/syndesis/src/modules/integrations/components/editor/endpoint/WithConfigurationForm.tsx
@@ -140,19 +140,22 @@ export class WithConfigurationForm extends React.Component<
         actions.setSubmitting(false);
       };
       const key = JSON.stringify(definition);
-      const allRequiredSet = validateConfiguredProperties(
+      const initialValue =
+        this.props.initialValue || getInitialValues(definition);
+      const isInitialValid = validateConfiguredProperties(
         definition,
-        this.props.initialValue
+        initialValue
       );
       return (
         <AutoForm<{ [key: string]: string }>
           i18nRequiredProperty={'* Required field'}
           definition={toFormDefinition(definition)}
-          initialValue={this.props.initialValue || getInitialValues(definition)}
+          initialValue={initialValue}
+          isInitialValid={isInitialValid}
           onSave={onSave}
-          validate={(values: { [name: string]: any }): any => {
-            return true;
-          }}
+          validate={(values: { [name: string]: any }): any =>
+            validateConfiguredProperties(definition, values)
+          }
           key={key}
         >
           {({ dirty, fields, handleSubmit, isValid, submitForm }) => (
@@ -161,7 +164,7 @@ export class WithConfigurationForm extends React.Component<
                 i18nFormTitle={`${action.name} - ${action.description}`}
                 i18nBackAction={'Choose Action'}
                 i18nNext={'Next'}
-                isValid={allRequiredSet || isValid}
+                isValid={isValid}
                 submitForm={submitForm}
                 handleSubmit={handleSubmit}
                 backActionHref={this.props.chooseActionHref}

diff --git a/...-react/syndesis/src/modules/integrations/components/editor/step/WithConfigurationForm.tsx b/...-react/syndesis/src/modules/integrations/components/editor/step/WithConfigurationForm.tsx
@@ -5,9 +5,13 @@ import {
   getActionSteps,
 } from '@syndesis/api';
 import { AutoForm } from '@syndesis/auto-form';
-import { StepKind } from '@syndesis/models';
+import { ConfigurationProperty, StepKind } from '@syndesis/models';
 import { IntegrationEditorForm } from '@syndesis/ui';
-import { toFormDefinition } from '@syndesis/utils';
+import {
+  getInitialValues,
+  toFormDefinition,
+  validateConfiguredProperties,
+} from '@syndesis/utils';
 import * as React from 'react';
 
 export interface IWithConfigurationFormChildrenProps {
@@ -91,9 +95,7 @@ export class WithConfigurationForm extends React.Component<
     let step = this.props.step.properties
       ? this.props.step
       : ALL_STEPS.find(s => s.stepKind === this.props.step.stepKind);
-
-    let definition;
-
+    let definition: { [key: string]: ConfigurationProperty };
     // if step is undefined, maybe we are dealing with an extension
     if (!step) {
       const steps = getActionSteps(this.props.step.action!.descriptor!);
@@ -103,12 +105,22 @@ export class WithConfigurationForm extends React.Component<
     } else {
       definition = step.properties;
     }
+    const initialValue =
+      this.props.step.configuredProperties || getInitialValues(definition);
+    const isInitialValid = validateConfiguredProperties(
+      definition,
+      initialValue
+    );
     return (
       <AutoForm<{ [key: string]: string }>
         i18nRequiredProperty={'* Required field'}
         definition={toFormDefinition(definition)}
-        initialValue={this.props.step.configuredProperties || {}}
+        initialValue={initialValue}
+        isInitialValid={isInitialValid}
         onSave={onSave}
+        validate={(values: { [name: string]: any }): any =>
+          validateConfiguredProperties(definition, values)
+        }
         key={this.props.step.id}
       >
         {({ fields, handleSubmit, isSubmitting, isValid, submitForm }) =>