fix(ENTESB-12352) api provider integration step can be replaced

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

@@ -16,6 +16,7 @@ export interface IIntegrationEditorFormProps {
    * The callback fired when submitting the form.
    * @param e
    */
+  isBackAllowed: boolean;
   isValid: boolean;
   isLoading: boolean;
   error?: string;
@@ -58,7 +59,7 @@ export class IntegrationEditorForm extends React.Component<
                 </Container>
               </CardBody>
               <CardFooter className="syn-card__footer">
-                {this.props.backActionHref && (
+                {(this.props.backActionHref && this.props.isBackAllowed) && (
                   <>
                     <ButtonLink
                       id={'integration-editor-form-back-button'}

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

@@ -26,13 +26,15 @@ import { IWithConfigurationFormProps } from './WithConfigurationForm';
 export interface IConfigurationFormProps
   extends Pick<IWithConfigurationFormProps, 'configurationPage'>,
     Pick<IWithConfigurationFormProps, 'initialValue'>,
+    Pick<IWithConfigurationFormProps, 'isBackAllowed'>,
     Pick<IWithConfigurationFormProps, 'oldAction'>,
     Pick<IWithConfigurationFormProps, 'onUpdatedIntegration'>,
     Pick<IWithConfigurationFormProps, 'chooseActionHref'> {
   action: Action;
   descriptor: ActionDescriptor;
   definitionOverride?: IConfigurationProperties;
   children: any;
+  isBackAllowed: boolean;
 }
 
 export const ConfigurationForm: React.FunctionComponent<
@@ -42,6 +44,7 @@ export const ConfigurationForm: React.FunctionComponent<
   configurationPage,
   descriptor,
   definitionOverride,
+  isBackAllowed,
   initialValue,
   oldAction,
   chooseActionHref,
@@ -106,12 +109,14 @@ export const ConfigurationForm: React.FunctionComponent<
         validateInitial={validator}
         key={key}
       >
-        {({ fields, handleSubmit, isValid, isSubmitting, submitForm }) => (
+        {({ fields, handleSubmit, isValid, isSubmitting, submitForm }) => {
+          return (
           <>
             <IntegrationEditorForm
               i18nFormTitle={formTitle}
               i18nBackAction={'Choose Action'}
               i18nNext={'Next'}
+              isBackAllowed={isBackAllowed}
               isValid={isValid}
               isLoading={isSubmitting}
               submitForm={() => {
@@ -125,7 +130,8 @@ export const ConfigurationForm: React.FunctionComponent<
               {fields}
             </IntegrationEditorForm>
           </>
-        )}
+          )
+        }}
       </AutoForm>
     );
   } catch (e) {

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

@@ -2,6 +2,7 @@ import {
   getFlow,
   getStep,
   getSteps,
+  isApiProviderFlow,
   isEndStep,
   isStartStep,
   requiresInputDescribeDataShape,
@@ -117,6 +118,15 @@ export class ConfigureActionPage extends React.Component<
                 (this.props.mode === 'editing' && useOldStepConfig
                   ? oldStepConfig!.configuredProperties
                   : {});
+
+              /**
+               * First, get the flow, and then check if API provider to determine
+               * whether or not to allow the user to press back on the Configure
+               * Action page.
+               */
+              const flow = getFlow(state.integration, params.flowId);
+              const allowBack = !isApiProviderFlow(flow!);
+
               const onUpdatedIntegration = async ({
                 action,
                 moreConfigurationSteps,
@@ -256,6 +266,7 @@ export class ConfigureActionPage extends React.Component<
                         configurationPage={pageAsNumber}
                         errorKeys={errorKeys}
                         initialValue={configuredProperties}
+                        isBackAllowed={allowBack}
                         oldAction={
                           useOldStepConfig && oldStepConfig!.action
                             ? oldStepConfig!.action!

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

@@ -71,6 +71,12 @@ export interface IWithConfigurationFormProps {
    */
   initialValue?: { [key: string]: string };
 
+  /**
+   * Boolean value that determines whether or not the Back button is allowed on the
+   * configuration form.
+   */
+  isBackAllowed: boolean;
+
   chooseActionHref: H.LocationDescriptor;
 
   /**

app/ui-react/syndesis/src/modules/integrations/components/editor/step/ConfigureStepPage.tsx

@@ -1,4 +1,4 @@
-import { getSteps, WithIntegrationHelpers } from '@syndesis/api';
+import { getSteps,WithIntegrationHelpers } from '@syndesis/api';
 import * as H from '@syndesis/history';
 import { Integration } from '@syndesis/models';
 import { IntegrationEditorLayout } from '@syndesis/ui';
@@ -49,12 +49,14 @@ export class ConfigureStepPage extends React.Component<
   IConfigureStepPageProps
 > {
   public render() {
+
     return (
       <WithIntegrationHelpers>
         {({ addStep, updateStep }) => (
           <WithRouteData<IConfigureStepRouteParams, IConfigureStepRouteState>>
             {(params, state, { history }) => {
               const positionAsNumber = parseInt(params.position, 10);
+
               const onUpdatedIntegration = async ({
                 values,
               }: IOnUpdatedIntegrationProps) => {
@@ -76,8 +78,17 @@ export class ConfigureStepPage extends React.Component<
                 );
               };
 
+              /**
+               * Used to determine determine whether or not the user is allowed
+               * to press back on the Configure Step page. Leaving as a generic
+               * boolean until we need to add logic here, as this property is
+               * required for the WithConfigurationForm component anyway.
+               */
+              const allowBack = false;
+
               return (
                 <WithConfigurationForm
+                  isBackAllowed={allowBack}
                   step={state.step}
                   onUpdatedIntegration={onUpdatedIntegration}
                 >

app/ui-react/syndesis/src/modules/integrations/components/editor/step/WithConfigurationForm.tsx

@@ -50,6 +50,10 @@ export interface IWithConfigurationFormProps {
    * the ID of the action that needs to be configured.
    */
   step: StepKind;
+  /**
+   * determines whether or not 'Back' should be allowed.
+   */
+  isBackAllowed: boolean;
   /**
    * the render prop that will receive the ready-to-be-rendered form and some
    * helpers.
@@ -145,6 +149,7 @@ export const WithConfigurationForm: React.FunctionComponent<
                   : step!.name
               }
               i18nNext={t('shared:Next')}
+              isBackAllowed={props.isBackAllowed}
               isValid={isValid}
               isLoading={isSubmitting}
               submitForm={submitForm}