From 1fcaaf2386e7a9271b884443bca783df03cc04c1 Mon Sep 17 00:00:00 2001 From: Stan Lewis Date: Fri, 17 May 2019 16:01:46 -0400 Subject: [PATCH] fix: expose the isInitialValid property and set it appropriately in the editor, add some IDs; fixes #270; fixes #286 --- .../packages/auto-form/src/AutoForm.tsx | 5 ++++ .../src/Integration/IntegrationEditorForm.tsx | 6 ++++- .../editor/endpoint/DescribeDataShapeForm.tsx | 17 +++++++++++-- .../packages/ui/src/Shared/TextEditor.tsx | 16 ++++++++----- .../packages/utils/src/autoformHelpers.ts | 9 +++++-- .../editor/endpoint/WithConfigurationForm.tsx | 17 +++++++------ .../editor/step/WithConfigurationForm.tsx | 24 ++++++++++++++----- 7 files changed, 70 insertions(+), 24 deletions(-) diff --git a/app/ui-react/packages/auto-form/src/AutoForm.tsx b/app/ui-react/packages/auto-form/src/AutoForm.tsx index 8afb5e9b7..60b7fb3e8 100644 --- 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 { * 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 extends React.Component> { 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 index fd874ed46..6ff0e1ca1 100644 --- a/app/ui-react/packages/ui/src/Integration/IntegrationEditorForm.tsx +++ b/app/ui-react/packages/ui/src/Integration/IntegrationEditorForm.tsx @@ -52,7 +52,10 @@ export class IntegrationEditorForm extends React.Component<
{this.props.backActionHref && ( <> - + {' '} {this.props.i18nBackAction} @@ -60,6 +63,7 @@ export class IntegrationEditorForm extends React.Component< )} ) => @@ -96,6 +97,7 @@ export class DescribeDataShapeForm extends React.Component< content={this.props.i18nDefinitionHelp} /> this.props.onDefinitionChange(text) @@ -121,6 +123,7 @@ export class DescribeDataShapeForm extends React.Component< /> @@ -154,14 +160,21 @@ export class DescribeDataShapeForm extends React.Component<
{this.props.backActionHref && ( <> - + {' '} {this.props.i18nBackAction}   )} - + {this.props.i18nNext}
diff --git a/app/ui-react/packages/ui/src/Shared/TextEditor.tsx b/app/ui-react/packages/ui/src/Shared/TextEditor.tsx index f7aa2bb45..1bc0beda7 100644 --- 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 { const options = { ...this.props.options }; return ( <> - +
+ +
); } diff --git a/app/ui-react/packages/utils/src/autoformHelpers.ts b/app/ui-react/packages/utils/src/autoformHelpers.ts index 92b895e8f..cc0de9410 100644 --- 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/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/WithConfigurationForm.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/WithConfigurationForm.tsx index 4381444a9..d0d7c50e4 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/WithConfigurationForm.tsx +++ b/app/ui-react/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 ( 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/app/ui-react/syndesis/src/modules/integrations/components/editor/step/WithConfigurationForm.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/step/WithConfigurationForm.tsx index f9962c851..69a1b9b1f 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/step/WithConfigurationForm.tsx +++ b/app/ui-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 ( 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 }) =>