properly wire the cancel buttons, and fix the sidebar bugs

syndesisio · May 13, 2019 · 93ed6c5 · 93ed6c5
1 parent 768c1e7
commit 93ed6c5
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 27 deletions.
diff --git a/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx
@@ -133,7 +133,12 @@ export const IntegrationCreatorApp: React.FunctionComponent = () => {
             mode={'adding'}
             appStepRoutes={routes.create.configure.addStep}
             appResolvers={resolvers.create.configure.addStep}
-            cancelHref={resolvers.list}
+            cancelHref={(params, state) =>
+              resolvers.create.configure.index({
+                ...params,
+                ...state,
+              })
+            }
             postConfigureHref={(integration, params) =>
               resolvers.create.configure.index({
                 integration,
@@ -149,7 +154,12 @@ export const IntegrationCreatorApp: React.FunctionComponent = () => {
             mode={'editing'}
             appStepRoutes={routes.create.configure.editStep}
             appResolvers={resolvers.create.configure.editStep}
-            cancelHref={resolvers.list}
+            cancelHref={(params, state) =>
+              resolvers.create.configure.index({
+                ...params,
+                ...state,
+              })
+            }
             postConfigureHref={(integration, params) =>
               resolvers.create.configure.index({
                 integration,

diff --git a/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx
@@ -115,7 +115,12 @@ export const IntegrationEditorApp: React.FunctionComponent = () => {
                 mode={'adding'}
                 appStepRoutes={routes.integration.edit.addStep}
                 appResolvers={resolvers.integration.edit.addStep}
-                cancelHref={resolvers.list}
+                cancelHref={(params, state) =>
+                  resolvers.integration.edit.index({
+                    ...params,
+                    ...state,
+                  })
+                }
                 postConfigureHref={(updatedIntegration, params) =>
                   resolvers.integration.edit.index({
                     integration: updatedIntegration,
@@ -131,7 +136,12 @@ export const IntegrationEditorApp: React.FunctionComponent = () => {
                 mode={'editing'}
                 appStepRoutes={routes.integration.edit.editStep}
                 appResolvers={resolvers.integration.edit.editStep}
-                cancelHref={resolvers.list}
+                cancelHref={(params, state) =>
+                  resolvers.integration.edit.index({
+                    ...params,
+                    ...state,
+                  })
+                }
                 postConfigureHref={(updatedIntegration, params) =>
                   resolvers.integration.edit.index({
                     integration: updatedIntegration,

diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorApp.tsx
@@ -2,7 +2,7 @@
 import * as H from '@syndesis/history';
 import { Integration } from '@syndesis/models';
 import * as React from 'react';
-import resolvers, { RouteResolver } from '../../resolvers';
+import { RouteResolver } from '../../resolvers';
 import { ReviewPage } from './api-provider/EditPage';
 import { EditPage } from './api-provider/ReviewPage';
 import { UploadPage } from './api-provider/UploadPage';
@@ -60,22 +60,32 @@ export const EditorApp: React.FunctionComponent<IEditorApp> = ({
       }
       filterHref={appResolvers.basicFilter}
       mapperHref={appResolvers.dataMapper}
-      templateHref={appResolvers.template}
+      templateHref={(step, params, state) =>
+        appResolvers.template({
+          step,
+          ...params,
+          ...state,
+        })
+      }
       stepHref={(step, params, state) =>
-        resolvers.create.finish.step({
+        appResolvers.step({
           step,
           ...params,
           ...state,
         })
       }
-      sidebar={props => <EditorSidebar {...props} />}
+      sidebar={props => (
+        <EditorSidebar {...props} isAdding={mode === 'adding'} />
+      )}
     />
   );
 
   const selectActionPage = (
     <SelectActionPage
       cancelHref={appResolvers.selectStep}
-      sidebar={props => <EditorSidebar {...props} />}
+      sidebar={props => (
+        <EditorSidebar {...props} isAdding={mode === 'adding'} />
+      )}
       selectHref={(actionId, p, s) =>
         appResolvers.connection.configureAction({
           actionId,
@@ -89,15 +99,17 @@ export const EditorApp: React.FunctionComponent<IEditorApp> = ({
   const configureActionPage = (
     <ConfigureActionPage
       backHref={(p, s) => appResolvers.connection.selectAction({ ...p, ...s })}
-      cancelHref={resolvers.list}
+      cancelHref={cancelHref}
       mode={mode}
       nextStepHref={(p, s) =>
         appResolvers.connection.configureAction({
           ...p,
           ...s,
         })
       }
-      sidebar={props => <EditorSidebar {...props} />}
+      sidebar={props => (
+        <EditorSidebar {...props} isAdding={mode === 'adding'} />
+      )}
       postConfigureHref={postConfigureHref}
     />
   );
@@ -106,7 +118,9 @@ export const EditorApp: React.FunctionComponent<IEditorApp> = ({
     <TemplateStepPage
       mode={mode}
       cancelHref={cancelHref}
-      sidebar={props => <EditorSidebar {...props} />}
+      sidebar={props => (
+        <EditorSidebar {...props} isAdding={mode === 'adding'} />
+      )}
       postConfigureHref={postConfigureHref}
     />
   );
@@ -115,7 +129,9 @@ export const EditorApp: React.FunctionComponent<IEditorApp> = ({
     <ConfigureStepPage
       cancelHref={cancelHref}
       mode={mode}
-      sidebar={props => <EditorSidebar {...props} />}
+      sidebar={props => (
+        <EditorSidebar {...props} isAdding={mode === 'adding'} />
+      )}
       postConfigureHref={postConfigureHref}
     />
   );

diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorSidebar.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorSidebar.tsx
@@ -11,6 +11,8 @@ import { getDataShapeText, toUIStepCollection } from './utils';
 function makeActiveStep(
   position: number,
   expanded: boolean,
+  title: string,
+  tooltip: string,
   activeStep?: IUIStep
 ) {
   return activeStep ? (
@@ -39,11 +41,11 @@ function makeActiveStep(
   ) : (
     <IntegrationFlowStepGeneric
       icon={<i className={'fa fa-plus'} />}
-      i18nTitle={`${position}. Finish`}
-      i18nTooltip={'Finish'}
+      i18nTitle={`${position}. ${title}`}
+      i18nTooltip={tooltip}
       active={true}
       showDetails={expanded}
-      description={'Choose a connection'}
+      description={tooltip}
     />
   );
 }
@@ -53,19 +55,25 @@ export interface IEditorSidebarProps {
   activeStep?: IUIStep;
   activeIndex: number;
 }
-export const EditorSidebar: React.FunctionComponent<IEditorSidebarProps> = ({
-  activeIndex,
-  activeStep,
-  steps,
-}) => {
+export const EditorSidebar: React.FunctionComponent<
+  IEditorSidebarProps & {
+    isAdding: boolean;
+  }
+> = ({ activeIndex, activeStep, steps, isAdding }) => {
   const UISteps = toUIStepCollection(steps);
   return (
     <IntegrationVerticalFlow>
       {({ expanded }) => {
         if (UISteps.length === 0) {
           return (
             <>
-              {makeActiveStep(1, expanded, activeStep)}
+              {makeActiveStep(
+                1,
+                expanded,
+                'Start',
+                'Choose a step',
+                activeStep
+              )}
               <IntegrationFlowStepGeneric
                 icon={<i className={'fa fa-plus'} />}
                 i18nTitle={'2. Finish'}
@@ -99,17 +107,24 @@ export const EditorSidebar: React.FunctionComponent<IEditorSidebarProps> = ({
                   startStep.outputDataShape
                 )}
               />
-              {makeActiveStep(2, expanded, activeStep)}
+              {makeActiveStep(
+                2,
+                expanded,
+                'Finish',
+                'Choose a step',
+                activeStep
+              )}
             </>
           );
         } else {
           return (
             <>
               {UISteps.map((s, idx) => {
                 const isActive = idx === activeIndex;
-                const hasAddStep = activeIndex === idx + 1;
+                const hasAddStep = isAdding && activeIndex === idx + 1;
                 const isAfterActiveAddStep = activeIndex - 1 < idx;
-                const position = isAfterActiveAddStep ? idx + 2 : idx + 1;
+                const position =
+                  isAdding && isAfterActiveAddStep ? idx + 2 : idx + 1;
 
                 return (
                   <React.Fragment key={idx}>
@@ -119,7 +134,9 @@ export const EditorSidebar: React.FunctionComponent<IEditorSidebarProps> = ({
                       }
                       i18nTitle={`${position}. ${s.name}`}
                       i18nTooltip={`${position}. ${s.title}`}
-                      active={isActive && !isAfterActiveAddStep}
+                      active={
+                        isAdding ? isActive && !isAfterActiveAddStep : isActive
+                      }
                       showDetails={expanded}
                       name={s.name}
                       action={s.action && s.action.name!}
@@ -130,7 +147,13 @@ export const EditorSidebar: React.FunctionComponent<IEditorSidebarProps> = ({
                       }
                     />
                     {hasAddStep
-                      ? makeActiveStep(position, expanded, activeStep)
+                      ? makeActiveStep(
+                          position + 1,
+                          expanded,
+                          'Set up this step',
+                          'Choose a step',
+                          activeStep
+                        )
                       : null}
                   </React.Fragment>
                 );