Skip to content
This repository has been archived by the owner on Jul 24, 2024. It is now read-only.

Commit

Permalink
reduce duplicated code required to setup the editor apps
Browse files Browse the repository at this point in the history
  • Loading branch information
@riccardo-forina
riccardo-forina committed May 13, 2019
1 parent 94cdc88 commit 768c1e7
Show file tree
Hide file tree
Showing 17 changed files with 677 additions and 1,545 deletions.
851 changes: 41 additions & 810 deletions app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx
View file

Large diffs are not rendered by default.

333 changes: 20 additions & 313 deletions app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,13 @@
/* tslint:disable:object-literal-sort-keys */
import { getConnectionIcon } from '@syndesis/api';
import { Integration } from '@syndesis/models';
import { Breadcrumb } from '@syndesis/ui';
import { WithRouteData } from '@syndesis/utils';
import * as React from 'react';
import { Route, Switch } from 'react-router';
import { Link } from 'react-router-dom';
import { WithClosedNavigation } from '../../shared';
import { IntegrationEditorSidebar } from './components';
import { AddStepPage } from './components/editor/AddStepPage';
import { ReviewPage } from './components/editor/api-provider/EditPage';
import { EditPage } from './components/editor/api-provider/ReviewPage';
import { UploadPage } from './components/editor/api-provider/UploadPage';
import { EditorApp } from './components/editor/EditorApp';
import { ConfigureActionPage } from './components/editor/endpoint/ConfigureActionPage';
import { SelectActionPage } from './components/editor/endpoint/SelectActionPage';
import { SaveIntegrationPage } from './components/editor/SaveIntegrationPage';
import { SelectConnectionPage } from './components/editor/SelectConnectionPage';
import { ConfigureStepPage } from './components/editor/step/ConfigureStepPage';
import { TemplateStepPage } from './components/editor/template/TemplateStepPage';
import resolvers from './resolvers';
import routes from './routes';

Expand Down Expand Up @@ -66,235 +55,17 @@ const addStepPage = (
/>
);

const selectConnectionPage = (
<SelectConnectionPage
cancelHref={(p, s) => resolvers.integration.edit.index({ ...p, ...s })}
apiProviderHref={(p, s) => ({ pathname: 'todo' })}
connectionHref={(connection, p, s) =>
resolvers.integration.edit.addStep.connection.selectAction({
connection,
...p,
...s,
})
}
filterHref={resolvers.integration.edit.addStep.basicFilter}
mapperHref={resolvers.integration.edit.addStep.dataMapper}
templateHref={(step, params, state) =>
resolvers.integration.edit.addStep.template({
step,
...params,
...state,
})
}
stepHref={(step, params, state) =>
resolvers.integration.edit.addStep.step({
step,
...params,
...state,
})
}
sidebar={({ steps, activeIndex }) => (
<IntegrationEditorSidebar
steps={steps}
addAtIndex={activeIndex}
addI18nTitle={`${activeIndex + 1}. Start`}
addI18nTooltip={'Start'}
addI18nDescription={'Choose a connection'}
/>
)}
/>
);

const saveIntegrationPage = (
<SaveIntegrationPage
cancelHref={(p, s) => resolvers.integration.edit.index({ ...p, ...s })}
postSaveHref={resolvers.list}
/>
);

const addStepSelectActionPage = (
<SelectActionPage
cancelHref={(p, s) => resolvers.integration.edit.index({ ...p, ...s })}
sidebar={({ connection, steps, activeIndex }) => (
<IntegrationEditorSidebar
steps={steps}
addAtIndex={activeIndex}
addIcon={
<img
alt={'Add step'}
src={getConnectionIcon(process.env.PUBLIC_URL, connection)}
height={24}
width={24}
/>
}
addI18nTitle={`${activeIndex + 1}. ${connection.name}`}
addI18nTooltip={`${activeIndex + 1}. ${connection.name}`}
addI18nDescription={'Choose an action'}
/>
)}
selectHref={(actionId, p, s) =>
resolvers.integration.edit.addStep.connection.configureAction({
actionId,
...p,
...s,
})
}
/>
);

const addStepConfigureActionPage = (
<ConfigureActionPage
backHref={(p, s) =>
resolvers.integration.edit.addStep.connection.selectAction({ ...p, ...s })
}
cancelHref={(p, s) => resolvers.integration.edit.index({ ...p, ...s })}
nextStepHref={(p, s) =>
resolvers.integration.edit.addStep.connection.configureAction({
...p,
...s,
})
}
mode={'adding'}
sidebar={({ connection, steps, activeIndex }) => (
<IntegrationEditorSidebar
steps={steps}
addAtIndex={activeIndex}
addIcon={
<img
alt={'Add step'}
src={getConnectionIcon(process.env.PUBLIC_URL, connection)}
height={24}
width={24}
/>
}
addI18nTitle={`${activeIndex + 1}. ${connection.connector!.name}`}
addI18nTooltip={`${activeIndex + 1}. ${connection.name}`}
addI18nDescription={'Configure the action'}
/>
)}
postConfigureHref={(integration, params) =>
resolvers.integration.edit.index({
integration,
...params,
})
}
/>
);

const addStepConfigureStepPage = (
<ConfigureStepPage
cancelHref={(p, s) => resolvers.integration.edit.index({ ...p, ...s })}
mode={'adding'}
sidebar={({ steps, activeIndex }) => (
<IntegrationEditorSidebar steps={steps} activeIndex={activeIndex} />
)}
postConfigureHref={(integration, params) =>
resolvers.integration.edit.index({
integration,
...params,
})
}
/>
);

const editStepSelectActionPage = (
<SelectActionPage
cancelHref={(p, s) => resolvers.integration.edit.index({ ...p, ...s })}
sidebar={({ steps, activeIndex }) => (
<IntegrationEditorSidebar steps={steps} activeIndex={activeIndex} />
)}
selectHref={(actionId, p, s) =>
resolvers.integration.edit.editStep.connection.configureAction({
actionId,
...p,
...s,
})
}
/>
);

const editStepConfigureActionPage = (
<ConfigureActionPage
backHref={(p, s) =>
resolvers.integration.edit.editStep.connection.selectAction({
...p,
...s,
})
}
cancelHref={(p, s) => resolvers.integration.edit.index({ ...p, ...s })}
mode={'editing'}
nextStepHref={(p, s) =>
resolvers.integration.edit.editStep.connection.configureAction({
...p,
...s,
})
}
sidebar={({ steps, activeIndex }) => (
<IntegrationEditorSidebar steps={steps} activeIndex={activeIndex} />
)}
postConfigureHref={(integration, params) =>
resolvers.integration.edit.index({
integration,
...params,
})
}
/>
);

const editStepConfigureStepPage = (
<ConfigureStepPage
cancelHref={(p, s) => resolvers.integration.edit.index({ ...p, ...s })}
mode={'editing'}
sidebar={({ steps, activeIndex }) => (
<IntegrationEditorSidebar steps={steps} activeIndex={activeIndex} />
)}
postConfigureHref={(integration, params) =>
resolvers.integration.edit.index({
integration,
...params,
})
}
/>
);

const addTemplateStepPage = (
<TemplateStepPage
cancelHref={(p, s) => resolvers.integration.edit.index({ ...p, ...s })}
mode={'adding'}
sidebar={({ steps, activeIndex }) => (
<IntegrationEditorSidebar steps={steps} activeIndex={activeIndex} />
)}
postConfigureHref={(integration, params) =>
resolvers.integration.edit.index({
integration,
...params,
})
}
/>
);

const editTemplateStepPage = (
<TemplateStepPage
cancelHref={(p, s) => resolvers.integration.edit.index({ ...p, ...s })}
mode={'editing'}
sidebar={({ steps, activeIndex }) => (
<IntegrationEditorSidebar steps={steps} activeIndex={activeIndex} />
)}
postConfigureHref={(integration, params) =>
resolvers.integration.edit.index({
integration,
...params,
})
}
/>
);

export interface IIntegrationEditorAppRouteState {
integration: Integration;
}

const TODO: React.FunctionComponent = () => <>TODO</>;

/**
* Entry point for the integration editor app. This is shown when an user clicks
* on the "Edit" button for any existing integration.
Expand Down Expand Up @@ -341,96 +112,32 @@ export const IntegrationEditorApp: React.FunctionComponent = () => {
{/* add step */}
<Route path={routes.integration.edit.addStep.selectStep}>
<EditorApp
selectStepPath={routes.integration.edit.addStep.selectStep}
selectStepChildren={selectConnectionPage}
endpointEditor={{
selectActionPath:
routes.integration.edit.addStep.connection.selectAction,
selectActionChildren: addStepSelectActionPage,
configureActionPath:
routes.integration.edit.addStep.connection.configureAction,
configureActionChildren: addStepConfigureActionPage,
describeDataPath:
routes.integration.edit.addStep.connection.describeData,
describeDataChildren: TODO,
}}
apiProvider={{
uploadPath:
routes.integration.edit.addStep.apiProvider.upload,
uploadChildren: <UploadPage />,
reviewPath:
routes.integration.edit.addStep.apiProvider.review,
reviewChildren: <ReviewPage />,
editPath: routes.integration.edit.addStep.apiProvider.edit,
editChildren: <EditPage />,
}}
template={{
templatePath: routes.integration.edit.addStep.template,
templateChildren: addTemplateStepPage,
}}
dataMapper={{
mapperPath: routes.integration.edit.addStep.dataMapper,
mapperChildren: TODO,
}}
basicFilter={{
filterPath: routes.integration.edit.addStep.basicFilter,
filterChildren: TODO,
}}
step={{
configurePath: routes.integration.edit.addStep.step,
configureChildren: addStepConfigureStepPage,
}}
extension={{
configurePath: routes.integration.edit.addStep.step,
configureChildren: TODO,
}}
mode={'adding'}
appStepRoutes={routes.integration.edit.addStep}
appResolvers={resolvers.integration.edit.addStep}
cancelHref={resolvers.list}
postConfigureHref={(updatedIntegration, params) =>
resolvers.integration.edit.index({
integration: updatedIntegration,
...params,
})
}
/>
</Route>

{/* edit step */}
<Route path={routes.integration.edit.editStep.selectStep}>
<EditorApp
endpointEditor={{
selectActionPath:
routes.integration.edit.editStep.connection.selectAction,
selectActionChildren: editStepSelectActionPage,
configureActionPath:
routes.integration.edit.editStep.connection.configureAction,
configureActionChildren: editStepConfigureActionPage,
describeDataPath:
routes.integration.edit.editStep.connection.describeData,
describeDataChildren: TODO,
}}
apiProvider={{
uploadPath:
routes.integration.edit.editStep.apiProvider.upload,
uploadChildren: <UploadPage />,
reviewPath:
routes.integration.edit.editStep.apiProvider.review,
reviewChildren: <ReviewPage />,
editPath: routes.integration.edit.editStep.apiProvider.edit,
editChildren: <EditPage />,
}}
template={{
templatePath: routes.integration.edit.editStep.template,
templateChildren: editTemplateStepPage,
}}
dataMapper={{
mapperPath: routes.integration.edit.editStep.dataMapper,
mapperChildren: TODO,
}}
basicFilter={{
filterPath: routes.integration.edit.editStep.basicFilter,
filterChildren: TODO,
}}
step={{
configurePath: routes.integration.edit.editStep.step,
configureChildren: editStepConfigureStepPage,
}}
extension={{
configurePath: routes.integration.edit.editStep.extension,
configureChildren: TODO,
}}
mode={'editing'}
appStepRoutes={routes.integration.edit.editStep}
appResolvers={resolvers.integration.edit.editStep}
cancelHref={resolvers.list}
postConfigureHref={(updatedIntegration, params) =>
resolvers.integration.edit.index({
integration: updatedIntegration,
...params,
})
}
/>
</Route>

Expand Down
4 changes: 2 additions & 2 deletions app/ui-react/syndesis/src/modules/integrations/components/IntegrationDetailSteps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
import * as React from 'react';
import resolvers from '../../resolvers';
import { IUIStep } from './editor/interfaces';
import { toUIStepKindCollection } from './editor/utils';
import { toUIStepCollection } from './editor/utils';

export interface IIntegrationDetailStepsProps {
integration: Integration;
Expand All @@ -29,7 +29,7 @@ export class IntegrationDetailSteps extends React.Component<
return (
<PageSection variant={'light'}>
<IntegrationStepsHorizontalView>
{toUIStepKindCollection(steps).map((s: IUIStep, idx: number) => {
{toUIStepCollection(steps).map((s: IUIStep, idx: number) => {
const isFirst = idx === 0;
const stepUri =
s.stepKind === ENDPOINT && !s.metadata[HIDE_FROM_CONNECTION_PAGES]
Expand Down
Loading

0 comments on commit 768c1e7

Please sign in to comment.