Merge pull request #317 from riccardo-forina/action-configure-form-bu…

…gfix

app/ui-react/packages/api/src/useIntegrationHelpers.tsx

@@ -215,7 +215,14 @@ export const useIntegrationHelpers = () => {
       }/connections/${connectionId}/actions/${actionId}`,
     });
     if (!response.ok) {
-      throw new Error(response.statusText);
+      let error = response.statusText;
+      try {
+        const errResponse = await response.json();
+        error = (errResponse as any)._meta.message;
+      } catch (e) {
+        // noop
+      }
+      throw new Error(error);
     }
     return (await response.json()) as ActionDescriptor;
   };

app/ui-react/packages/ui/src/Integration/IntegrationEditorForm.tsx

@@ -1,4 +1,5 @@
 import * as H from '@syndesis/history';
+import { Alert } from 'patternfly-react';
 import * as React from 'react';
 import { ButtonLink, Container, PageSection } from '../Layout';
 
@@ -15,6 +16,7 @@ export interface IIntegrationEditorFormProps {
    * @param e
    */
   isValid: boolean;
+  error?: string;
   backActionHref?: H.LocationDescriptor;
   handleSubmit: (e?: any) => void;
   submitForm: (e?: any) => void;
@@ -46,6 +48,11 @@ export class IntegrationEditorForm extends React.Component<
                     {this.props.i18nFormTitle}
                   </div>
                 )}
+                {this.props.error ? (
+                  <Alert type={'warning'}>
+                    <span>{this.props.error}</span>
+                  </Alert>
+                ) : null}
                 <div className="card-pf-body">
                   <Container>{this.props.children}</Container>
                 </div>

app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/ConfigurationForm.tsx

@@ -0,0 +1,122 @@
+import {
+  applyUserDefinedDataShapesToAction,
+  getActionStep,
+  getActionStepDefinition,
+  getActionSteps,
+} from '@syndesis/api';
+import { AutoForm } from '@syndesis/auto-form';
+import { Action, ActionDescriptor } from '@syndesis/models';
+import { IntegrationEditorForm } from '@syndesis/ui';
+import {
+  allFieldsRequired,
+  applyInitialValues,
+  getRequiredStatusText,
+  toFormDefinition,
+  validateConfiguredProperties,
+} from '@syndesis/utils';
+import * as React from 'react';
+import i18n from '../../../../../i18n';
+import { IWithConfigurationFormProps } from './WithConfigurationForm';
+
+export interface IConfigurationFormProps
+  extends Pick<IWithConfigurationFormProps, 'configurationStep'>,
+    Pick<IWithConfigurationFormProps, 'initialValue'>,
+    Pick<IWithConfigurationFormProps, 'oldAction'>,
+    Pick<IWithConfigurationFormProps, 'onUpdatedIntegration'>,
+    Pick<IWithConfigurationFormProps, 'chooseActionHref'> {
+  action: Action;
+  descriptor: ActionDescriptor;
+  children: any;
+}
+
+export const ConfigurationForm: React.FunctionComponent<
+  IConfigurationFormProps
+> = ({
+  action,
+  configurationStep,
+  descriptor,
+  initialValue,
+  oldAction,
+  chooseActionHref,
+  onUpdatedIntegration,
+  children,
+}) => {
+  const [error, setError] = React.useState();
+  try {
+    const steps = getActionSteps(descriptor);
+    const step = getActionStep(steps, configurationStep);
+    const definition = getActionStepDefinition(step);
+    const moreConfigurationSteps = configurationStep < steps.length - 1;
+    const onSave = async (
+      values: { [key: string]: string },
+      actions: any
+    ): Promise<void> => {
+      try {
+        action =
+          typeof oldAction !== 'undefined'
+            ? applyUserDefinedDataShapesToAction(oldAction, {
+                ...action,
+                descriptor,
+              })
+            : action;
+        await onUpdatedIntegration({
+          action,
+          moreConfigurationSteps,
+          values,
+        });
+      } catch (e) {
+        setError(e.message);
+      }
+      actions.setSubmitting(false);
+    };
+    const key = JSON.stringify(definition);
+    initialValue = applyInitialValues(definition, initialValue);
+    const isInitialValid = validateConfiguredProperties(
+      definition,
+      initialValue
+    );
+    const requiredPrompt = getRequiredStatusText(
+      definition,
+      i18n.t('shared:AllFieldsRequired'),
+      i18n.t('shared:FieldsMarkedWithStarRequired'),
+      ''
+    );
+    return (
+      <AutoForm<{ [key: string]: string }>
+        i18nRequiredProperty={'* Required field'}
+        allFieldsRequired={allFieldsRequired(definition)}
+        i18nFieldsStatusText={requiredPrompt}
+        definition={toFormDefinition(definition)}
+        initialValue={initialValue}
+        isInitialValid={isInitialValid}
+        onSave={onSave}
+        validate={(values: { [name: string]: any }): any =>
+          validateConfiguredProperties(definition, values)
+        }
+        key={key}
+      >
+        {({ fields, handleSubmit, isValid, submitForm }) => (
+          <>
+            <IntegrationEditorForm
+              i18nFormTitle={`${action.name} - ${action.description}`}
+              i18nBackAction={'Choose Action'}
+              i18nNext={'Next'}
+              isValid={isValid}
+              submitForm={() => {
+                setError(undefined);
+                submitForm();
+              }}
+              handleSubmit={handleSubmit}
+              backActionHref={chooseActionHref}
+              error={error}
+            >
+              {fields}
+            </IntegrationEditorForm>
+          </>
+        )}
+      </AutoForm>
+    );
+  } catch (e) {
+    return children;
+  }
+};

app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/NothingToConfigure.tsx

@@ -0,0 +1,32 @@
+import { Action, ActionDescriptor } from '@syndesis/models';
+import { IntegrationEditorNothingToConfigure } from '@syndesis/ui';
+import * as React from 'react';
+import { IWithConfigurationFormProps } from './WithConfigurationForm';
+
+export interface INothingToConfigureProps
+  extends Pick<IWithConfigurationFormProps, 'onUpdatedIntegration'>,
+    Pick<IWithConfigurationFormProps, 'chooseActionHref'> {
+  action: Action;
+  descriptor: ActionDescriptor;
+}
+
+export const NothingToConfigure: React.FunctionComponent<
+  INothingToConfigureProps
+> = ({ action, descriptor, chooseActionHref, onUpdatedIntegration }) => {
+  const submitForm = () => {
+    onUpdatedIntegration({
+      action: { ...action, descriptor },
+      moreConfigurationSteps: false,
+      values: null,
+    });
+  };
+  return (
+    <IntegrationEditorNothingToConfigure
+      i18nAlert={'There are no properties to configure for this action.'}
+      i18nBackAction={'Choose Action'}
+      i18nNext={'Next'}
+      submitForm={submitForm}
+      backActionHref={chooseActionHref}
+    />
+  );
+};