From 82e95e1793da7d3f3ea8b1d6b5e4ee03c6ca7b8b Mon Sep 17 00:00:00 2001 From: Michael Coker Date: Wed, 22 May 2019 13:22:23 -0500 Subject: [PATCH 01/40] fix(ui): small bugs on connections, cicd, and drag n drop ui --- .../Connection/ConnectionCreatorLayout.tsx | 2 +- .../src/Integration/CiCd/CiCdEditDialog.tsx | 88 ++++++++++--------- .../packages/ui/src/Shared/DndFileChooser.tsx | 71 +++++++-------- 3 files changed, 82 insertions(+), 79 deletions(-) diff --git a/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx b/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx index 0e3b7df96ca..1c6a3819b1d 100644 --- a/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx +++ b/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx @@ -114,7 +114,7 @@ export const ConnectionCreatorLayout: React.FunctionComponent< > {isNextLoading ? : null} {isLastStep ? ( - 'Done' + 'Create' ) : ( <> Next diff --git a/app/ui-react/packages/ui/src/Integration/CiCd/CiCdEditDialog.tsx b/app/ui-react/packages/ui/src/Integration/CiCd/CiCdEditDialog.tsx index 461659cbcfa..9c1a76a8f76 100644 --- a/app/ui-react/packages/ui/src/Integration/CiCd/CiCdEditDialog.tsx +++ b/app/ui-react/packages/ui/src/Integration/CiCd/CiCdEditDialog.tsx @@ -2,6 +2,7 @@ import { Button } from 'patternfly-react'; import * as React from 'react'; import { Dialog } from '../../Shared'; import { TagNameValidationError } from './CiCdUIModels'; +import { TextContent, Text, TextVariants } from '@patternfly/react-core'; export interface ICiCdEditDialogProps { i18nTitle: string; @@ -45,47 +46,54 @@ export class CiCdEditDialog extends React.Component< return ( -

{this.props.i18nDescription}

-
- -
- - {this.props.validationError === - TagNameValidationError.NoErrors && ( - -  {/* todo: pad out the area */} - - )} - {this.props.validationError === - TagNameValidationError.NoName && ( - - {this.props.i18nNoNameError} - - )} - {this.props.validationError === - TagNameValidationError.NameInUse && ( - - {this.props.i18nNameInUseError} - - )} + +
+ + {this.props.i18nDescription} + +
+ +
+ + {this.props.validationError === + TagNameValidationError.NoErrors && ( + +  {/* todo: pad out the area */} + + )} + {this.props.validationError === + TagNameValidationError.NoName && ( + + {this.props.i18nNoNameError} + + )} + {this.props.validationError === + TagNameValidationError.NameInUse && ( + + {this.props.i18nNameInUseError} + + )} +
-
- + + } footer={ <> diff --git a/app/ui-react/packages/ui/src/Shared/DndFileChooser.tsx b/app/ui-react/packages/ui/src/Shared/DndFileChooser.tsx index c07c8ac0959..bf58d3f643d 100644 --- a/app/ui-react/packages/ui/src/Shared/DndFileChooser.tsx +++ b/app/ui-react/packages/ui/src/Shared/DndFileChooser.tsx @@ -244,47 +244,42 @@ export class DndFileChooser extends React.Component< onDropRejected={this.handleRejectedFiles} > {({ getRootProps, getInputProps }) => ( - - - - - + + + + + + + + + + + + {this.props.i18nSelectedFileLabel} + + + {this.getSelectedFileMessage()} + + {this.getUploadMessage()} + + {this.props.i18nHelpMessage ? ( - - - - - - - {this.props.i18nSelectedFileLabel} - - - {this.getSelectedFileMessage()} + + {this.props.i18nHelpMessage} - {this.getUploadMessage()} - {this.props.i18nHelpMessage ? ( - - - {this.props.i18nHelpMessage} - - - ) : null} - - + ) : null} + )} ); From 558a7ad7d3f12b9f6941b81347d0a6d30b6235d3 Mon Sep 17 00:00:00 2001 From: Michael Coker Date: Wed, 22 May 2019 13:24:45 -0500 Subject: [PATCH 02/40] fix(lint): errors --- .../packages/ui/src/Integration/CiCd/CiCdEditDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/ui-react/packages/ui/src/Integration/CiCd/CiCdEditDialog.tsx b/app/ui-react/packages/ui/src/Integration/CiCd/CiCdEditDialog.tsx index 9c1a76a8f76..4326d12b2a3 100644 --- a/app/ui-react/packages/ui/src/Integration/CiCd/CiCdEditDialog.tsx +++ b/app/ui-react/packages/ui/src/Integration/CiCd/CiCdEditDialog.tsx @@ -1,8 +1,8 @@ +import { Text, TextContent, TextVariants } from '@patternfly/react-core'; import { Button } from 'patternfly-react'; import * as React from 'react'; import { Dialog } from '../../Shared'; import { TagNameValidationError } from './CiCdUIModels'; -import { TextContent, Text, TextVariants } from '@patternfly/react-core'; export interface ICiCdEditDialogProps { i18nTitle: string; From 2dd79b7a5021033c5f744adb274e9d7935c5c32f Mon Sep 17 00:00:00 2001 From: Michael Spaxman Date: Tue, 21 May 2019 15:03:47 -0400 Subject: [PATCH 03/40] feat(logout): allow users to logout --- .../packages/api/src/WithUserHelpers.tsx | 51 +++++++++++++++++++ app/ui-react/packages/api/src/index.ts | 1 + .../packages/ui/src/Layout/AppTopMenu.tsx | 24 +++++++-- app/ui-react/syndesis/src/app/UI.tsx | 29 +++++------ 4 files changed, 87 insertions(+), 18 deletions(-) create mode 100644 app/ui-react/packages/api/src/WithUserHelpers.tsx diff --git a/app/ui-react/packages/api/src/WithUserHelpers.tsx b/app/ui-react/packages/api/src/WithUserHelpers.tsx new file mode 100644 index 00000000000..914257c876a --- /dev/null +++ b/app/ui-react/packages/api/src/WithUserHelpers.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import { ApiContext, IApiContext } from './ApiContext'; +import { callFetch } from './callFetch'; + +export interface IWithUserHelpersChildrenProps { + logout(): Promise; +} +export interface IWithUserHelpersProps { + children(props: IWithUserHelpersChildrenProps): any; +} + +export class WithUserHelpersWrapped extends React.Component< + IWithUserHelpersProps & IApiContext +> { + constructor(props: IWithUserHelpersProps & IApiContext) { + super(props); + this.logout = this.logout.bind(this); + } + + public async logout() { + const response = await callFetch({ + headers: { + ...this.props.headers, + responseType: 'arraybuffer', + }, + method: 'GET', + url: `${this.props.apiUri}/logout`, + }); + const html = String.fromCharCode.apply(null, new Uint8Array(response.body)); + window.history.pushState(null, null, '/logout'); + window.document.open(); + window.document.write(html); + window.document.close(); + } + + public render() { + return this.props.children({ + logout: this.logout, + }); + } +} + +export const WithUserHelpers: React.FunctionComponent< + IWithUserHelpersProps +> = props => { + return ( + + {apiContext => } + + ); +}; diff --git a/app/ui-react/packages/api/src/index.ts b/app/ui-react/packages/api/src/index.ts index b24c7acc040..e08a8826209 100644 --- a/app/ui-react/packages/api/src/index.ts +++ b/app/ui-react/packages/api/src/index.ts @@ -40,6 +40,7 @@ export * from './WithPolling'; export * from './WithServerEvents'; export * from './WithSteps'; export * from './WithUser'; +export * from './WithUserHelpers'; export * from './WithVdbModel'; export * from './WithViewEditorStates'; export * from './WithViews'; diff --git a/app/ui-react/packages/ui/src/Layout/AppTopMenu.tsx b/app/ui-react/packages/ui/src/Layout/AppTopMenu.tsx index d7e949581c7..528e3ea3cc3 100644 --- a/app/ui-react/packages/ui/src/Layout/AppTopMenu.tsx +++ b/app/ui-react/packages/ui/src/Layout/AppTopMenu.tsx @@ -1,9 +1,10 @@ -import { Dropdown, DropdownToggle } from '@patternfly/react-core'; +import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core'; import * as React from 'react'; export interface IAppTopMenuProps { username: string; children: any; + onSelectLogout(): void; } export interface IAppTopMenuState { @@ -31,7 +32,12 @@ export class AppTopMenu extends React.Component< }); }; public render() { - const { children, username } = this.props; + const { children, username, onSelectLogout } = this.props; + const handleClick = (link: string) => { + if (link.toLowerCase() === 'logout') { + onSelectLogout(); + } + }; return ( {username} } isOpen={this.state.isOpen} - dropdownItems={React.Children.toArray(children)} + dropdownItems={React.Children.toArray(children).map((child, idx) => { + return ( + { + event.preventDefault(); + handleClick(child); + }} + key={idx} + > + {child} + + ); + })} /> ); } diff --git a/app/ui-react/syndesis/src/app/UI.tsx b/app/ui-react/syndesis/src/app/UI.tsx index 1e7a7c43d64..2a3e9ad9e3e 100644 --- a/app/ui-react/syndesis/src/app/UI.tsx +++ b/app/ui-react/syndesis/src/app/UI.tsx @@ -1,4 +1,4 @@ -import { WithApiVersion } from '@syndesis/api'; +import { WithApiVersion, WithUserHelpers } from '@syndesis/api'; import { AppLayout, AppTopMenu, @@ -6,7 +6,6 @@ import { INotification, INotificationType, Notifications, - PfDropdownItem, PfVerticalNavItem, } from '@syndesis/ui'; import { AboutModal, AboutModalContent, Loader } from '@syndesis/ui'; @@ -14,7 +13,7 @@ import { WithLoader, WithRouter } from '@syndesis/utils'; import { useState } from 'react'; import * as React from 'react'; import { Translation } from 'react-i18next'; -import { Link, Route, Switch } from 'react-router-dom'; +import { Route, Switch } from 'react-router-dom'; import { Workbox } from 'workbox-window'; import resolvers from '../modules/resolvers'; import { ApiError, PageNotFound, WithErrorBoundary } from '../shared'; @@ -200,18 +199,18 @@ export const UI: React.FunctionComponent = ({ routes }) => { 'mailto:fuse-online-tech-preview@redhat.com'; }} appNav={ - - - - - + + {({ logout }) => { + return ( + + {t('Logout')} + + ); + }} + } verticalNav={routes.map((route, index) => !(route as IAppRouteWithChildrens).childrens ? ( From 0d8e5a3f6cf5889a9f7d570986e6b354a6805efc Mon Sep 17 00:00:00 2001 From: Michael Spaxman Date: Wed, 22 May 2019 09:23:17 -0400 Subject: [PATCH 04/40] [logout] add proxy for logout endpoint --- app/ui-react/packages/api/src/WithUserHelpers.tsx | 14 ++++++++------ app/ui-react/syndesis/src/app/UI.tsx | 8 +++++++- app/ui-react/syndesis/src/setupProxy.js | 11 +++++++++++ 3 files changed, 26 insertions(+), 7 deletions(-) diff --git a/app/ui-react/packages/api/src/WithUserHelpers.tsx b/app/ui-react/packages/api/src/WithUserHelpers.tsx index 914257c876a..15494123bea 100644 --- a/app/ui-react/packages/api/src/WithUserHelpers.tsx +++ b/app/ui-react/packages/api/src/WithUserHelpers.tsx @@ -24,13 +24,15 @@ export class WithUserHelpersWrapped extends React.Component< responseType: 'arraybuffer', }, method: 'GET', - url: `${this.props.apiUri}/logout`, + url: `/logout`, }); - const html = String.fromCharCode.apply(null, new Uint8Array(response.body)); - window.history.pushState(null, null, '/logout'); - window.document.open(); - window.document.write(html); - window.document.close(); + + // const html = String.fromCharCode.apply(null, new Uint8Array(response.body!)); + // window.history.pushState(null, null, '/logout'); + // window.document.open(); + // window.document.write(html); + // window.document.close(); + return await response.body; } public render() { diff --git a/app/ui-react/syndesis/src/app/UI.tsx b/app/ui-react/syndesis/src/app/UI.tsx index 2a3e9ad9e3e..8a290810f4d 100644 --- a/app/ui-react/syndesis/src/app/UI.tsx +++ b/app/ui-react/syndesis/src/app/UI.tsx @@ -204,7 +204,13 @@ export const UI: React.FunctionComponent = ({ routes }) => { return ( { + logout().then(() => { + console.log( + 'do we need to manually redirect here?' + ); + }); + }} > {t('Logout')} diff --git a/app/ui-react/syndesis/src/setupProxy.js b/app/ui-react/syndesis/src/setupProxy.js index 075f3d8b81f..b1fda48475d 100644 --- a/app/ui-react/syndesis/src/setupProxy.js +++ b/app/ui-react/syndesis/src/setupProxy.js @@ -14,6 +14,17 @@ module.exports = function(app) { 'X-Forwarded-Access-Token': 'supersecret', Cookie: process.env.BACKEND_COOKIE || '', }, + }), + proxy('/logout', { + target: process.env.BACKEND, + secure: false, + changeOrigin: true, + ws: !process.env.PROXY_NO_WS, + headers: { + 'X-Forwarded-Origin': 'for=127.0.0.1;host=localhost:3000;proto=https', + 'X-Forwarded-Access-Token': 'supersecret', + Cookie: process.env.BACKEND_COOKIE || '', + }, }) ); } From e7b6faf513cd6e82a1844ca6ba3275aa2c8582a5 Mon Sep 17 00:00:00 2001 From: Michael Spaxman Date: Wed, 22 May 2019 09:44:08 -0400 Subject: [PATCH 05/40] [logout] fix storybook --- .../ui/stories/Layout/AppLayout.stories.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx b/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx index 626f2f97a51..5f90644c28d 100644 --- a/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx +++ b/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx @@ -8,13 +8,12 @@ import { AboutModalContent, AppLayout, AppTopMenu, - PfDropdownItem, PfVerticalNavItem, } from '../../src'; -import { Link } from 'react-router-dom'; import { withState } from '@dump247/storybook-state'; const stories = storiesOf('Layout/AppLayout', module); const logDropdownItemSelection = action('select dropdown item log'); +const logLogout = action('logout'); stories.add( 'sample usage', @@ -59,14 +58,8 @@ stories.add( showNavigation={true} pictograph={text('Application title', 'Syndesis')} appNav={ - - - - + + Logout } verticalNav={[ From 19ef60977804468b9d366ed71d52c208000946b6 Mon Sep 17 00:00:00 2001 From: Michael Spaxman Date: Wed, 22 May 2019 13:35:44 -0400 Subject: [PATCH 06/40] [styles] fix order of imported stylesheets --- app/ui-react/packages/ui/src/index.css | 19 ++----------------- app/ui-react/syndesis/src/index.tsx | 3 ++- 2 files changed, 4 insertions(+), 18 deletions(-) diff --git a/app/ui-react/packages/ui/src/index.css b/app/ui-react/packages/ui/src/index.css index f087d336a48..81f8c148e39 100644 --- a/app/ui-react/packages/ui/src/index.css +++ b/app/ui-react/packages/ui/src/index.css @@ -3,27 +3,12 @@ @import url('~patternfly/dist/css/patternfly-additions.css'); @import url('~patternfly-react/dist/css/patternfly-react.css'); -/* selective pf4 base styles */ -@import url('~@patternfly/patternfly/patternfly-variables.css'); -@import url('~@patternfly/patternfly/patternfly-shield-noninheritable.css'); -@import url('~@patternfly/patternfly/patternfly-common.css'); -@import url('~@patternfly/patternfly/patternfly-globals.css'); +/* pf4 base styles */ +@import url('~@patternfly/react-core/dist/styles/base.css'); @import url('~@patternfly/patternfly/utilities/Spacing/spacing.css'); @import url('~@patternfly/patternfly/layouts/Level/level.css'); @import url('~@patternfly/patternfly/layouts/Split/split.css'); -/* selective pf4 component specific stylesheets */ -@import url('~@patternfly/patternfly/components/Page/page.css'); -@import url('~@patternfly/patternfly/components/Nav/nav.css'); -@import url('~@patternfly/patternfly/components/Dropdown/dropdown.css'); -@import url('~@patternfly/patternfly/components/AboutModalBox/about-modal-box.css'); -@import url('~@patternfly/patternfly/components/BackgroundImage/background-image.css'); -@import url('~@patternfly/patternfly/components/Content/content.css'); -@import url('~@patternfly/patternfly/components/Popover/popover.css'); -@import url('~@patternfly/patternfly/components/Tooltip/tooltip.css'); -@import url('~@patternfly/patternfly/components/Card/card.css'); -@import url('~@patternfly/patternfly/components/ClipboardCopy/clipboard-copy.css'); - :root { --pf-global--link--Color: #0088ce; --pf-c-nav__list-link--m-current--after--BackgroundColor: #0088ce; diff --git a/app/ui-react/syndesis/src/index.tsx b/app/ui-react/syndesis/src/index.tsx index bb6777932d0..2f6e82ef3b7 100644 --- a/app/ui-react/syndesis/src/index.tsx +++ b/app/ui-react/syndesis/src/index.tsx @@ -4,13 +4,14 @@ import { WithServerEvents, } from '@syndesis/api'; import { createBrowserHistory } from '@syndesis/history'; +import { App, IAppRoute, IAppRouteWithChildrens } from './app'; +// tslint:disable-next-line:ordered-imports import { UnrecoverableError } from '@syndesis/ui'; import { WithLoader } from '@syndesis/utils'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { I18nextProvider, Translation } from 'react-i18next'; import { Router } from 'react-router-dom'; -import { App, IAppRoute, IAppRouteWithChildrens } from './app'; import { WithConfig } from './app/WithConfig'; import i18n from './i18n'; import './index.css'; From 24daea27f60a35fbc981b6dde343e6ebdd96365e Mon Sep 17 00:00:00 2001 From: Mark Drilling Date: Wed, 22 May 2019 15:20:15 -0500 Subject: [PATCH 07/40] TTOOLS-637 DV wizard layouts --- .../Views/ViewCreateLayout.css | 65 +++++++++++-------- .../Views/ViewCreateLayout.tsx | 11 ++-- .../Views/ViewsImportLayout.css | 65 +++++++++++-------- .../Views/ViewsImportLayout.tsx | 11 ++-- 4 files changed, 90 insertions(+), 62 deletions(-) diff --git a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewCreateLayout.css b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewCreateLayout.css index c36ef20fe8c..bb022334e8c 100644 --- a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewCreateLayout.css +++ b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewCreateLayout.css @@ -1,43 +1,54 @@ .view-create-layout { - height: calc(100% - 36px - 60px); + flex: 1 0; + display: flex; + flex-flow: column; + overflow-y: auto; + overflow-x: hidden; } .view-create-layout__body { - max-height: none; + display: flex; + flex: 1 0; } -.view-create-layout.has-footer .view-create-layout__body { - height: calc(100vh - 60px - 36px - 57px - 61px); - max-height: none; +.view-create-layout__contentOuter { + display: flex; + flex-flow: column; +} + +.view-create-layout__sectionLight, +/* hack to make the toolbar match the header */ +.view-create-layout__contentOuter .toolbar-pf { + background-color: var(--pf-global--BackgroundColor--200); } @media (min-width: 768px) { - .view-create-layout__body { - height: calc(100vh - 121px - 60px - 36px); - max-height: none; + .view-create-layout { + height: 100%; + display: flex; + flex-flow: column; } - .view-create-layout.has-footer .view-create-layout__body { - height: calc(100vh - 121px - 60px - 36px - 61px); - max-height: none; + .view-create-layout__header { + border-bottom: 1px solid #ededed; } -} - -.view-create-layout__contentWrapper { - overflow: auto; - padding: 0; -} -.view-create-layout__content { - max-width: 1100px; - margin: auto; -} + .view-create-layout__body { + flex: 1 0; + display: flex; + width: 100%; + overflow: hidden; + } -.view-create-layout__footer { - padding: 17px 15px; - z-index: 1; -} + .view-create-layout__contentOuter { + overflow: auto; + padding: 0; + width: 100%; + } -.view-create-layout .list-view-pf .list-group-item-heading { - flex-basis: calc(50% - 20px); + .view-create-layout__contentInner { + flex: 1; + display: flex; + flex-flow: column; + } } diff --git a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewCreateLayout.tsx b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewCreateLayout.tsx index b0d43dfb996..0dde9330197 100644 --- a/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewCreateLayout.tsx +++ b/app/ui-react/packages/ui/src/Data/Virtualizations/Views/ViewCreateLayout.tsx @@ -70,12 +70,15 @@ export const ViewCreateLayout: React.FunctionComponent< }: IViewCreateLayoutProps) => { return (
{header} -
+
{ return (
{header} -
+
Date: Wed, 22 May 2019 16:55:21 -0500 Subject: [PATCH 08/40] TTOOLS-636: Commented out functionality not used for the tech preview release. --- .../Virtualizations/VirtualizationList.tsx | 24 ++++++---- .../VirtualizationListItem.tsx | 15 ++++-- .../VirtualizationList.stories.tsx | 48 ++++++++++++------- .../VirtualizationListItem.stories.tsx | 6 ++- .../data/pages/VirtualizationsPage.tsx | 15 ++++-- .../data/shared/VirtualizationNavBar.tsx | 6 ++- 6 files changed, 73 insertions(+), 41 deletions(-) diff --git a/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationList.tsx b/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationList.tsx index 57c08f7e397..0294868a4de 100644 --- a/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationList.tsx +++ b/app/ui-react/packages/ui/src/Data/Virtualizations/VirtualizationList.tsx @@ -1,6 +1,5 @@ import * as H from '@syndesis/history'; import { - Button, EmptyState, ListView, OverlayTrigger, @@ -21,15 +20,17 @@ export interface IVirtualizationListProps extends IListViewToolbarProps { i18nDescription: string; i18nEmptyStateInfo: string; i18nEmptyStateTitle: string; + /* TD-636: Commented out for TP i18nImport: string; - i18nImportTip: string; + i18nImportTip: string; */ i18nLinkCreateVirtualization: string; i18nLinkCreateVirtualizationTip?: string; i18nName: string; i18nNameFilterPlaceholder: string; i18nTitle: string; linkCreateHRef: H.LocationDescriptor; - onImport: (name: string) => void; + /* TD-636: Commented out for TP + onImport: (name: string) => void; */ } export class VirtualizationList extends React.Component< @@ -37,7 +38,7 @@ export class VirtualizationList extends React.Component< > { public constructor(props: IVirtualizationListProps) { super(props); - this.handleImport = this.handleImport.bind(this); + /* TD-636: Commented out for TP {this.handleImport = this.handleImport.bind(this);} */ } public getCreateVirtualizationTooltip() { @@ -50,19 +51,20 @@ export class VirtualizationList extends React.Component< ); } - public getImportVirtualizationTooltip() { + /* TD-636: Commented out for TP + public getImportVirtualizationTooltip() { return ( {this.props.i18nImportTip ? this.props.i18nImportTip : this.props.i18nImport} - ); + ); } public handleImport() { this.props.onImport(''); - } + } */ public render() { return ( @@ -74,19 +76,21 @@ export class VirtualizationList extends React.Component<
+ {/* TD-636: Commented out for TP - - + + */} void; - onExport: (virtualizationName: string) => void; + /* TD-636: Commented out for TP + onExport: (virtualizationName: string) => void; */ onPublish: (virtualizationName: string) => void; onUnpublish: (virtualizationName: string) => void; publishingCurrentStep?: number; @@ -75,7 +77,8 @@ export class VirtualizationListItem extends React.Component< }; this.handleCancel = this.handleCancel.bind(this); this.handleDelete = this.handleDelete.bind(this); - this.handleExport = this.handleExport.bind(this); + /* TD-636: Commented out for TP + this.handleExport = this.handleExport.bind(this); */ this.handleUnpublish = this.handleUnpublish.bind(this); this.handlePublish = this.handlePublish.bind(this); this.showConfirmationDialog = this.showConfirmationDialog.bind(this); @@ -106,11 +109,12 @@ export class VirtualizationListItem extends React.Component< } } + /* TD-636: Commented out for TP public handleExport() { if (this.props.virtualizationName) { this.props.onExport(this.props.virtualizationName); } - } + } */ public handlePublish() { if (this.props.virtualizationName) { @@ -225,9 +229,10 @@ export class VirtualizationListItem extends React.Component< {this.props.i18nDelete} + {/* TD-636: Commented out for TP {this.props.i18nExport} - + */} @@ -376,8 +387,9 @@ stories 'i18nEmptyStateTitle', createVirtualization )} + /* TD-636: Commented out for TP i18nImport={importText} - i18nImportTip={importTip} + i18nImportTip={importTip} */ i18nLinkCreateVirtualization={text( 'i18nLinkCreateVirtualization', createVirtualization @@ -392,7 +404,8 @@ stories virtualizationItems.length + ' Results' )} i18nTitle={text('i18nTitle', title)} - onImport={action(importText)} + /* TD-636: Commented out for TP + onImport={action(importText)} */ children={virtualizationItems} hasListData={true} /> @@ -439,8 +452,9 @@ stories 'i18nEmptyStateTitle', createVirtualization )} + /* TD-636: Commented out for TP i18nImport={importText} - i18nImportTip={importTip} + i18nImportTip={importTip} */ i18nLinkCreateVirtualization={text( 'i18nLinkCreateVirtualization', createVirtualization @@ -455,8 +469,8 @@ stories virtItem.length + ' Results' )} i18nTitle={text('i18nTitle', title)} - onImport={action(importText)} - children={virtItem} + /* TD-636: Commented out for TP + onImport={action(importText)} */ hasListData={true} /> diff --git a/app/ui-react/packages/ui/stories/Data/Virtualizations/VirtualizationListItem.stories.tsx b/app/ui-react/packages/ui/stories/Data/Virtualizations/VirtualizationListItem.stories.tsx index adec8d17ddb..fbb3c907bdd 100644 --- a/app/ui-react/packages/ui/stories/Data/Virtualizations/VirtualizationListItem.stories.tsx +++ b/app/ui-react/packages/ui/stories/Data/Virtualizations/VirtualizationListItem.stories.tsx @@ -93,7 +93,8 @@ stories.add( icon={text('icon', virtualizationIconData)} i18nEdit={editText} i18nEditTip={editTip} - i18nExport={'Export'} + /* TD-636: Commented out for TP + i18nExport={'Export'} */ i18nPublished={publishedText} i18nUnpublish={unpublishText} i18nPublish={publishText} @@ -103,7 +104,8 @@ stories.add( i18nUnpublishModalTitle={confirmUnpublishTitle} detailsPageLink={''} onDelete={action(deleteText)} - onExport={action(exportText)} + /* TD-636: Commented out for TP + onExport={action(exportText)} */ onUnpublish={action(unpublishText)} onPublish={action(publishText)} currentPublishedState={select( diff --git a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationsPage.tsx b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationsPage.tsx index 1c204aabafa..7b19c7ce430 100644 --- a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationsPage.tsx +++ b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationsPage.tsx @@ -80,10 +80,11 @@ export class VirtualizationsPage extends React.Component { alert('Import virtualization ' + virtualizationName); } + /* TD-636: Commented out for TP public handleExportVirtualization() { // TODO: implement handleExportVirtualization alert('Export virtualization '); - } + } */ public render() { return ( @@ -144,10 +145,11 @@ export class VirtualizationsPage extends React.Component { i18nEmptyStateTitle={t( 'virtualization.emptyStateTitle' )} + /* TD-636: Commented out for TP i18nImport={t('shared:Import')} i18nImportTip={t( 'virtualization.importVirtualizationTip' - )} + )} */ i18nLinkCreateVirtualization={t( 'virtualization.createDataVirtualization' )} @@ -162,7 +164,8 @@ export class VirtualizationsPage extends React.Component { 'virtualization.virtualizationsPageTitle' )} linkCreateHRef={resolvers.virtualizations.create()} - onImport={this.handleImportVirt} + /* TD-636: Commented out for TP + onImport={this.handleImportVirt} */ hasListData={data.length > 0} > + {/* TD-636: Commented out for TP + /> */} + {/* TD-636: Commented out for TP + /> */} )} From 5704d0eaa23cb61a10c61e5a2003ebbb1a74a22e Mon Sep 17 00:00:00 2001 From: Stan Lewis Date: Tue, 21 May 2019 22:11:17 -0400 Subject: [PATCH 09/40] feat: add array and custom component support to auto-form; relates to #251; fixes #322; relates to #334 --- .../packages/api/src/WithFilterOptions.tsx | 119 ++++++++++++ app/ui-react/packages/api/src/index.ts | 1 + .../packages/auto-form/src/AutoForm.tsx | 97 +++++----- .../packages/auto-form/src/FormBuilder.tsx | 77 ++++---- app/ui-react/packages/auto-form/src/index.ts | 1 + app/ui-react/packages/auto-form/src/models.ts | 73 ++++++-- .../src/widgets/AutoFormHelpBlock.tsx | 17 ++ .../src/widgets/FormArrayComponent.tsx | 86 +++++++++ .../src/widgets/FormCheckboxComponent.tsx | 28 ++- .../src/widgets/FormDurationComponent.tsx | 26 +-- .../src/widgets/FormHiddenComponent.tsx | 11 +- .../src/widgets/FormInputComponent.tsx | 50 ++++-- .../src/widgets/FormSelectComponent.tsx | 53 +++--- .../src/widgets/FormTextAreaComponent.tsx | 39 ++-- .../auto-form/src/widgets/TextButton.css | 7 + .../auto-form/src/widgets/TextButton.tsx | 34 ++++ .../packages/auto-form/src/widgets/helpers.ts | 14 +- .../packages/auto-form/src/widgets/index.ts | 3 + .../auto-form/stories/KitchenSink.stories.tsx | 26 ++- .../stories/SimpleExamples.stories.tsx | 84 ++++----- .../auto-form/tests/AutoForm.spec.tsx | 6 +- .../tests/FormCheckboxComponent.spec.tsx | 4 +- .../tests/FormInputComponent.spec.tsx | 10 +- .../tests/FormSelectComponent.spec.tsx | 4 +- .../tests/FormTextAreaComponent.spec.tsx | 4 +- .../ui/src/Integration/editor/index.ts | 3 +- .../editor/ruleFilter/RuleFilterCard.tsx | 35 ++++ .../Integration/editor/ruleFilter/index.ts | 1 + .../packages/utils/src/autoformHelpers.ts | 72 +++++++- .../components/WithConnectorForm.tsx | 108 +++++------ .../pages/create/ConfigurationPage.tsx | 1 - .../data/pages/VirtualizationCreatePage.tsx | 7 +- .../integrations/IntegrationCreatorApp.tsx | 8 +- .../integrations/IntegrationEditorApp.tsx | 8 +- .../components/editor/EditorApp.tsx | 26 ++- .../components/editor/EditorRoutes.tsx | 14 +- .../editor/endpoint/ConfigurationForm.tsx | 13 +- .../components/editor/interfaces.tsx | 2 + .../components/editor/makeEditorResolvers.ts | 10 +- .../editor/ruleFilter/RuleFilterStepPage.tsx | 169 ++++++++++++++++++ .../editor/ruleFilter/WithRuleFilterForm.tsx | 165 +++++++++++++++++ .../modules/settings/pages/OAuthAppsPage.tsx | 15 +- 42 files changed, 1175 insertions(+), 356 deletions(-) create mode 100644 app/ui-react/packages/api/src/WithFilterOptions.tsx create mode 100644 app/ui-react/packages/auto-form/src/widgets/AutoFormHelpBlock.tsx create mode 100644 app/ui-react/packages/auto-form/src/widgets/FormArrayComponent.tsx create mode 100644 app/ui-react/packages/auto-form/src/widgets/TextButton.css create mode 100644 app/ui-react/packages/auto-form/src/widgets/TextButton.tsx create mode 100644 app/ui-react/packages/ui/src/Integration/editor/ruleFilter/RuleFilterCard.tsx create mode 100644 app/ui-react/packages/ui/src/Integration/editor/ruleFilter/index.ts create mode 100644 app/ui-react/syndesis/src/modules/integrations/components/editor/ruleFilter/RuleFilterStepPage.tsx create mode 100644 app/ui-react/syndesis/src/modules/integrations/components/editor/ruleFilter/WithRuleFilterForm.tsx diff --git a/app/ui-react/packages/api/src/WithFilterOptions.tsx b/app/ui-react/packages/api/src/WithFilterOptions.tsx new file mode 100644 index 00000000000..b91c140769d --- /dev/null +++ b/app/ui-react/packages/api/src/WithFilterOptions.tsx @@ -0,0 +1,119 @@ +import { DataShape, FilterOptions, Op } from '@syndesis/models'; +import * as React from 'react'; +import { IFetchState } from './Fetch'; +import { SyndesisFetch } from './SyndesisFetch'; + +export interface IWithFilterOptionsProps { + dataShape: DataShape; + children(props: IFetchState): any; +} + +function getDefaultOps() { + return [ + { + label: 'equals', + operator: '==', + }, + { + label: 'equals (ignores case)', + operator: '=~', + }, + { + label: 'not equals', + operator: '==', + }, + { + operator: '<', + }, + { + operator: '<=', + }, + { + operator: '>', + }, + { + operator: '>=', + }, + { + label: 'contains', + operator: 'contains', + }, + { + label: 'contains (ignore case)', + operator: '~~', + }, + { + label: 'not contains', + operator: 'not contains', + }, + { + label: 'matches', + operator: 'regex', + }, + { + label: 'not matches', + operator: 'not regex', + }, + { + label: 'in', + operator: 'in', + }, + { + label: 'not in', + operator: 'not in', + }, + ]; +} + +export interface IOp { + label: string; + operator?: string; + value?: string; +} + +function convertOps(ops: Op[]): Op[] { + const answer = []; + for (const op of ops) { + // guard against blank label + const label = op.label || (op as IOp).value || op.operator; + const newOp = { + label, + value: (op as IOp).value || op.operator, + } as IOp; + answer.push(newOp); + } + return answer; +} + +export class WithFilterOptions extends React.Component< + IWithFilterOptionsProps +> { + public render() { + const defaultValue = { + ops: [], + paths: [], + }; + return ( + + body={this.props.dataShape} + defaultValue={defaultValue} + method={'POST'} + url={`/integrations/filters/options`} + > + {({ response }) => { + const ops = response.data.ops!.length + ? response.data.ops! + : getDefaultOps(); + const data = { + ops: convertOps(ops), + paths: response.data.paths || [], + }; + return this.props.children({ + ...response, + data, + }); + }} + + ); + } +} diff --git a/app/ui-react/packages/api/src/index.ts b/app/ui-react/packages/api/src/index.ts index be067d38e82..4e0820f7eda 100644 --- a/app/ui-react/packages/api/src/index.ts +++ b/app/ui-react/packages/api/src/index.ts @@ -26,6 +26,7 @@ export * from './WithExtension'; export * from './WithExtensionHelpers'; export * from './WithExtensionIntegrations'; export * from './WithExtensions'; +export * from './WithFilterOptions'; export * from './WithIntegration'; export * from './WithIntegrationHelpers'; export * from './WithIntegrationMetrics'; diff --git a/app/ui-react/packages/auto-form/src/AutoForm.tsx b/app/ui-react/packages/auto-form/src/AutoForm.tsx index be7569c8d66..75d0524aa2e 100644 --- a/app/ui-react/packages/auto-form/src/AutoForm.tsx +++ b/app/ui-react/packages/auto-form/src/AutoForm.tsx @@ -1,7 +1,7 @@ -import { Formik, FormikErrors } from 'formik'; +import { Formik, FormikErrors, FormikProps } from 'formik'; import * as React from 'react'; import { FormBuilder } from './FormBuilder'; -import { IFormDefinition, IFormErrors } from './models'; +import { IAutoFormActions, IFormDefinition, IFormErrors } from './models'; export interface IAutoFormProps { /** @@ -20,6 +20,11 @@ export interface IAutoFormProps { * If all fields in the form are required or not */ allFieldsRequired?: boolean; + /** + * Map of custom components, each key maps to the 'type' + * property of an IFormDefinitionProperty + */ + customComponents?: { [type: string]: any }; /** * String to be displayed when a required field isn't set */ @@ -31,35 +36,29 @@ export interface IAutoFormProps { /** * Callback function that will be called when the form is submitted */ - onSave: (value: T, actions: any) => void; + onSave?: (value: T, autoFormBag: IAutoFormActions) => void; /** * Validation function called whenever a change or blur event occurs on the form */ - validate?: (value: T | any) => IFormErrors | Promise | undefined; + validate?: ( + value: T | any + ) => IFormErrors | Promise> | undefined; /** * Child component that will receive the form fields and submit handler */ - children: (state: IAutoFormChildrenProps) => any; + children: (props: IAutoFormChildrenProps & FormikProps) => any; } -export interface IAutoFormChildrenProps { +export interface IAutoFormChildrenProps { /** * Fragment containing all of the form fields */ fields: JSX.Element; + fieldsAsArray: JSX.Element[]; /** * Function to trigger a form submit which will then trigger onSave */ - handleSubmit: (e?: any) => void; - dirty: boolean; - isSubmitting: boolean; - isValid: boolean; - isValidating: boolean; - resetForm: (nextValues?: any) => void; - submitForm: () => void; - validateForm: () => Promise>; - values: any; - errors: any; + validateForm: () => Promise | FormikErrors>; } export class AutoForm extends React.Component> { @@ -68,64 +67,56 @@ export class AutoForm extends React.Component> { - {({ initialValue, fields, onSave, getField }) => ( + {({ initialValue, propertiesArray, getField }) => ( initialValues={initialValue} - onSubmit={onSave} + onSubmit={ + this.props.onSave || + (() => { + /* todo right now silently ignore */ + }) + } isInitialValid={this.props.isInitialValid} validate={this.props.validate} > - {({ - handleSubmit, - values, - touched, - dirty, - errors, - isValid, - isValidating, - isSubmitting, - resetForm, - validateForm, - submitForm, - }) => - this.props.children({ + {({ values, touched, dirty, errors, ...rest }) => { + const propertyComponents = propertiesArray.map(property => { + const err = + typeof errors === 'object' + ? errors + : { [property.name]: errors }; + return getField({ + allFieldsRequired: this.props.allFieldsRequired || false, + errors: err as IFormErrors, + property, + value: (values || {})[property.name], + ...rest, + }); + }); + return this.props.children({ dirty, errors, fields: ( {this.props.i18nFieldsStatusText && (

)} - {fields.map(property => - getField({ - allFieldsRequired: - this.props.allFieldsRequired || false, - errors, - property, - touched, - value: (values || {})[property.name], - }) - )} + {propertyComponents} ), - handleSubmit, - isSubmitting, - isValid, - isValidating, - resetForm, - submitForm, - validateForm, + fieldsAsArray: propertyComponents, values, - }) - } + ...(rest as FormikProps), + }); + }} )} diff --git a/app/ui-react/packages/auto-form/src/FormBuilder.tsx b/app/ui-react/packages/auto-form/src/FormBuilder.tsx index 27abe1cc0d5..565f8dff16a 100644 --- a/app/ui-react/packages/auto-form/src/FormBuilder.tsx +++ b/app/ui-react/packages/auto-form/src/FormBuilder.tsx @@ -1,6 +1,13 @@ -import { Field } from 'formik'; +import { Field, FieldArray } from 'formik'; import * as React from 'react'; -import { IFormDefinition, IFormDefinitionProperty } from './models'; +import { + IFormArrayControlProps, + IFormControlProps, + IFormDefinition, + IFormDefinitionProperty, + INamedConfigurationProperty, + IRenderFieldProps, +} from './models'; import { FormCheckboxComponent, FormDurationComponent, @@ -9,31 +16,20 @@ import { FormSelectComponent, FormTextAreaComponent, } from './widgets'; - -export interface INamedConfigurationProperty extends IFormDefinitionProperty { - name: string; -} - -export interface IRenderFieldProps { - allFieldsRequired: boolean; - property: INamedConfigurationProperty; - value: any; - [name: string]: any; -} +import { FormArrayComponent } from './widgets/FormArrayComponent'; export interface IFormBuilderProps { definition: IFormDefinition; initialValue: T; i18nRequiredProperty: string; - onSave: (value: T | any, actions: any) => void; + customComponents: { [type: string]: any }; children(props: IFormBuilderChildrenProps): any; } export interface IFormBuilderChildrenProps { - fields: INamedConfigurationProperty[]; + propertiesArray: INamedConfigurationProperty[]; getField: (props: IRenderFieldProps) => any; initialValue: T; - onSave: (value: T, actions: any) => void; } export class FormBuilder extends React.Component> { @@ -50,36 +46,57 @@ export class FormBuilder extends React.Component> { hidden: FormHiddenComponent, select: FormSelectComponent, textarea: FormTextAreaComponent, + ...(this.props.customComponents || {}), }; - const validate = (value: any) => { + const validate = (value: T) => { if (props.property.required && typeof value === 'undefined') { return this.props.i18nRequiredProperty; } return undefined; }; - return ( - - ); + switch (type) { + case 'array': + return ( + + {fieldArrayProps => ( + + )} + + ); + default: + return ( + + ); + } }; public render() { - const fields = this.enrichAndOrderProperties(this.props.definition); + const propertiesArray = this.enrichAndOrderProperties( + this.props.definition + ); const massagedValue = this.sanitizeValues( this.props.definition, this.props.initialValue ); return this.props.children({ - fields, getField: this.getField, initialValue: massagedValue, - onSave: this.props.onSave, + propertiesArray, }); } diff --git a/app/ui-react/packages/auto-form/src/index.ts b/app/ui-react/packages/auto-form/src/index.ts index ea390e1d5c9..10ba927ce1d 100644 --- a/app/ui-react/packages/auto-form/src/index.ts +++ b/app/ui-react/packages/auto-form/src/index.ts @@ -1,2 +1,3 @@ export * from './AutoForm'; export * from './models'; +export * from './widgets'; diff --git a/app/ui-react/packages/auto-form/src/models.ts b/app/ui-react/packages/auto-form/src/models.ts index 64a879f9ad7..df79c8066e6 100644 --- a/app/ui-react/packages/auto-form/src/models.ts +++ b/app/ui-react/packages/auto-form/src/models.ts @@ -1,4 +1,4 @@ -import { FieldProps } from 'formik'; +import { FieldArrayRenderProps, FieldProps, FormikActions } from 'formik'; export interface IFormDefinition { [name: string]: IFormDefinitionProperty; @@ -8,7 +8,7 @@ export interface IFormValue { [name: string]: any; } -export interface IFormErrors { +export interface IFormErrors { [name: string]: string; } @@ -40,33 +40,72 @@ export interface IFormFieldAttributes { [name: string]: any; } +export interface IAutoFormActions extends FormikActions { + // nothing to do +} + +export interface IFormArrayDefinitionOptions { + fieldAttributes?: IFormFieldAttributes; + formGroupAttributes?: IFormFieldAttributes; + arrayControlAttributes?: IFormFieldAttributes; + controlLabelAttributes?: IFormFieldAttributes; + i18nAddElementText: string; +} + export interface IFormDefinitionProperty { - required?: boolean; - secret?: boolean; - disabled?: boolean; - type: string; + arrayDefinition?: IFormDefinition; + arrayDefinitionOptions?: IFormArrayDefinitionOptions; + connectorValue?: string; + controlHint?: string; + controlLabelAttributes?: IFormFieldAttributes; defaultValue?: string; - displayName?: string; deprecated?: boolean; - group?: string; - label?: string; - kind?: string; description?: string; + disabled?: boolean; + displayName?: string; enum?: IFormPropertyValue[]; + extendedOptions?: { [name: string]: any }; + fieldAttributes?: IFormFieldAttributes; + formGroupAttributes?: IFormFieldAttributes; generator?: string; + group?: string; + kind?: string; + label?: string; + labelHint?: string; + order?: number; placeholder?: string; - connectorValue?: string; relation?: IFormPropertyRelation[]; - controlHint?: string; - labelHint?: string; + required?: boolean; + secret?: boolean; tags?: string[]; - order?: number; - fieldAttributes?: IFormFieldAttributes; + type: string; + dataList?: string[]; } -export interface IFormControl extends FieldProps { +export interface INamedConfigurationProperty extends IFormDefinitionProperty { + name: string; +} + +export interface IRenderFieldProps { + allFieldsRequired: boolean; + property: INamedConfigurationProperty; + value: any; + [name: string]: any; +} + +export interface IFormControlProps extends FieldProps { name: string; type: string; + errors?: IFormErrors; + allFieldsRequired: boolean; + property: INamedConfigurationProperty; + value: T; +} + +export interface IFormArrayControlProps extends FieldArrayRenderProps { + name: string; + customComponents: { [type: string]: any }; allFieldsRequired: boolean; - property: IFormDefinitionProperty; + property: INamedConfigurationProperty; + value: T; } diff --git a/app/ui-react/packages/auto-form/src/widgets/AutoFormHelpBlock.tsx b/app/ui-react/packages/auto-form/src/widgets/AutoFormHelpBlock.tsx new file mode 100644 index 00000000000..fe13323dc95 --- /dev/null +++ b/app/ui-react/packages/auto-form/src/widgets/AutoFormHelpBlock.tsx @@ -0,0 +1,17 @@ +import { HelpBlock } from 'patternfly-react'; +import * as React from 'react'; + +export interface IAutoFormHelpBlockProps { + error?: string; + description?: string; +} + +export class AutoFormHelpBlock extends React.Component< + IAutoFormHelpBlockProps +> { + public render() { + return ( + {this.props.error || this.props.description || ''} + ); + } +} diff --git a/app/ui-react/packages/auto-form/src/widgets/FormArrayComponent.tsx b/app/ui-react/packages/auto-form/src/widgets/FormArrayComponent.tsx new file mode 100644 index 00000000000..61d8454e92c --- /dev/null +++ b/app/ui-react/packages/auto-form/src/widgets/FormArrayComponent.tsx @@ -0,0 +1,86 @@ +import * as React from 'react'; +import { FormBuilder } from '../FormBuilder'; +import { IFormArrayControlProps, IFormArrayDefinitionOptions } from '../models'; +import { TextButton } from './TextButton'; + +export interface IFormArrayComponentProps extends IFormArrayControlProps { + customComponents: { [key: string]: any }; +} + +export class FormArrayComponent extends React.Component< + IFormArrayComponentProps | any /* todo type coercion */ +> { + public render() { + const options = + this.props.property.arrayDefinitionOptions || + ({} as IFormArrayDefinitionOptions); + const formGroupAttributes = options.formGroupAttributes || {}; + const fieldAttributes = options.fieldAttributes || {}; + const controlLabelAttributes = options.controlLabelAttributes || {}; + const arrayControlAttributes = options.arrayControlAttributes || {}; + return ( + <> + {(this.props.form.values[this.props.name] || [{}]).map( + (value: any, index: number) => { + const fieldName = `${this.props.name}[${index}]`; + return ( + + {({ initialValue: rowValue, propertiesArray, getField }) => { + return ( +

+ {propertiesArray.map(property => + getField({ + allFieldsRequired: + this.props.allFieldsRequired || false, + key: `${fieldName}.${property.name}`, + name: `${fieldName}.${property.name}`, + property: { + controlLabelAttributes, + fieldAttributes, + formGroupAttributes, + ...property, + }, + value: rowValue[property.name], + }) + )} +
+ {index > 0 ? ( +
+ this.props.remove(index)} + > + + +
+ ) : ( + <>  + )} +
+
+ ); + }} + + ); + } + )} + this.props.push({})}> + {this.props.property.arrayDefinitionOptions.i18nAddElementText} + + + ); + } +} diff --git a/app/ui-react/packages/auto-form/src/widgets/FormCheckboxComponent.tsx b/app/ui-react/packages/auto-form/src/widgets/FormCheckboxComponent.tsx index 77730f24a8d..3694e86715e 100644 --- a/app/ui-react/packages/auto-form/src/widgets/FormCheckboxComponent.tsx +++ b/app/ui-react/packages/auto-form/src/widgets/FormCheckboxComponent.tsx @@ -1,26 +1,22 @@ -import { - Checkbox, - FieldLevelHelp, - FormGroup, - HelpBlock, -} from 'patternfly-react'; +import { Checkbox, FieldLevelHelp, FormGroup } from 'patternfly-react'; import * as React from 'react'; -import { IFormControl } from '../models'; -import { getValidationState } from './helpers'; +import { IFormControlProps } from '../models'; +import { AutoFormHelpBlock } from './AutoFormHelpBlock'; +import { getValidationState, toValidHtmlId } from './helpers'; export const FormCheckboxComponent: React.FunctionComponent< - IFormControl + IFormControlProps > = props => ( @@ -32,9 +28,9 @@ export const FormCheckboxComponent: React.FunctionComponent< /> )} - - {props.property.description} - {props.form.errors[props.field.name]} - + ); diff --git a/app/ui-react/packages/auto-form/src/widgets/FormDurationComponent.tsx b/app/ui-react/packages/auto-form/src/widgets/FormDurationComponent.tsx index 6bf5c62310f..eb20324c008 100644 --- a/app/ui-react/packages/auto-form/src/widgets/FormDurationComponent.tsx +++ b/app/ui-react/packages/auto-form/src/widgets/FormDurationComponent.tsx @@ -4,12 +4,12 @@ import { FieldLevelHelp, Form, FormGroup, - HelpBlock, MenuItem, } from 'patternfly-react'; import * as React from 'react'; -import { IFormControl } from '../models'; -import { getValidationState } from './helpers'; +import { IFormControlProps } from '../models'; +import { AutoFormHelpBlock } from './AutoFormHelpBlock'; +import { getValidationState, toValidHtmlId } from './helpers'; interface IDuration { label: string; @@ -52,11 +52,11 @@ export interface IFormDurationComponentState { } export class FormDurationComponent extends React.Component< - IFormControl, + IFormControlProps, IFormDurationComponentState > { private inputField: HTMLInputElement = undefined as any; - constructor(props: IFormControl) { + constructor(props: IFormControlProps) { super(props); // find the highest duration that keeps the duration above 1 const index = @@ -103,7 +103,8 @@ export class FormDurationComponent extends React.Component< public render() { return ( {this.props.property.displayName} @@ -124,7 +126,7 @@ export class FormDurationComponent extends React.Component< - - {this.props.property.description} - {this.props.form.errors[this.props.field.name]} - + ); } diff --git a/app/ui-react/packages/auto-form/src/widgets/FormHiddenComponent.tsx b/app/ui-react/packages/auto-form/src/widgets/FormHiddenComponent.tsx index 27c5064b8ad..389293c7696 100644 --- a/app/ui-react/packages/auto-form/src/widgets/FormHiddenComponent.tsx +++ b/app/ui-react/packages/auto-form/src/widgets/FormHiddenComponent.tsx @@ -1,16 +1,17 @@ import * as React from 'react'; -import { IFormControl } from '../models'; +import { IFormControlProps } from '../models'; +import { toValidHtmlId } from './helpers'; export const FormHiddenComponent: React.FunctionComponent< - IFormControl + IFormControlProps > = props => ( -
+
{props.form.touched[props.field.name] && props.form.errors[props.field.name] && ( diff --git a/app/ui-react/packages/auto-form/src/widgets/FormInputComponent.tsx b/app/ui-react/packages/auto-form/src/widgets/FormInputComponent.tsx index 95007486f56..0d33a5e7e94 100644 --- a/app/ui-react/packages/auto-form/src/widgets/FormInputComponent.tsx +++ b/app/ui-react/packages/auto-form/src/widgets/FormInputComponent.tsx @@ -3,26 +3,32 @@ import { FieldLevelHelp, FormControl, FormGroup, - HelpBlock, } from 'patternfly-react'; import * as React from 'react'; -import { IFormControl } from '../models'; -import { getValidationState } from './helpers'; +import { IFormControlProps } from '../models'; +import { AutoFormHelpBlock } from './AutoFormHelpBlock'; +import { getValidationState, toValidHtmlId } from './helpers'; export const FormInputComponent: React.FunctionComponent< - IFormControl + IFormControlProps > = props => ( - - {props.property.displayName} - + {props.property.displayName && ( + + {props.property.displayName} + + )} {props.property.labelHint && ( @@ -31,16 +37,26 @@ export const FormInputComponent: React.FunctionComponent< + {props.property.dataList && props.property.dataList.length > 0 && ( + + {props.property.dataList.map((opt, index) => ( + + ))} + + )} + - - {props.property.description} - {props.form.errors[props.field.name]} - ); diff --git a/app/ui-react/packages/auto-form/src/widgets/FormSelectComponent.tsx b/app/ui-react/packages/auto-form/src/widgets/FormSelectComponent.tsx index 8cfb4b6a757..5e741024597 100644 --- a/app/ui-react/packages/auto-form/src/widgets/FormSelectComponent.tsx +++ b/app/ui-react/packages/auto-form/src/widgets/FormSelectComponent.tsx @@ -3,18 +3,18 @@ import { FieldLevelHelp, FormControl, FormGroup, - HelpBlock, } from 'patternfly-react'; import * as React from 'react'; -import { IFormControl } from '../models'; -import { getValidationState } from './helpers'; +import { IFormControlProps } from '../models'; +import { AutoFormHelpBlock } from './AutoFormHelpBlock'; +import { getValidationState, toValidHtmlId } from './helpers'; function getSelectedValues(select: HTMLSelectElement) { return Array.from(select.selectedOptions).map(option => option.value); } export const FormSelectComponent: React.FunctionComponent< - IFormControl + IFormControlProps > = props => { const isMultiple = props.property.fieldAttributes && props.property.fieldAttributes.multiple; @@ -29,18 +29,22 @@ export const FormSelectComponent: React.FunctionComponent< }; return ( - - {props.property.displayName} - + {props.property.displayName && ( + + {props.property.displayName} + + )} {props.property.labelHint && ( @@ -52,22 +56,21 @@ export const FormSelectComponent: React.FunctionComponent< {...props.field} onChange={handleChange} onBlur={handleChange} - data-testid={props.field.name} + data-testid={toValidHtmlId(props.field.name)} disabled={props.form.isSubmitting || props.property.disabled} componentClass="select" title={props.property.controlHint} > - {props.property.enum && - props.property.enum.map((opt: any) => ( - - ))} + {(props.property.enum || []).map((opt: any, index: number) => ( + + ))} - - {props.property.description} - {props.form.errors[props.field.name]} - + ); }; diff --git a/app/ui-react/packages/auto-form/src/widgets/FormTextAreaComponent.tsx b/app/ui-react/packages/auto-form/src/widgets/FormTextAreaComponent.tsx index 5c1615f921f..a3278f01483 100644 --- a/app/ui-react/packages/auto-form/src/widgets/FormTextAreaComponent.tsx +++ b/app/ui-react/packages/auto-form/src/widgets/FormTextAreaComponent.tsx @@ -3,26 +3,31 @@ import { FieldLevelHelp, FormControl, FormGroup, - HelpBlock, } from 'patternfly-react'; import * as React from 'react'; -import { IFormControl } from '../models'; -import { getValidationState } from './helpers'; +import { IFormControlProps } from '../models'; +import { AutoFormHelpBlock } from './AutoFormHelpBlock'; +import { getValidationState, toValidHtmlId } from './helpers'; export const FormTextAreaComponent: React.FunctionComponent< - IFormControl + IFormControlProps > = props => ( - - {props.property.displayName} - + {props.property.displayName && ( + + {props.property.displayName} + + )} {props.property.labelHint && ( @@ -31,14 +36,14 @@ export const FormTextAreaComponent: React.FunctionComponent< - - {props.property.description} - {props.form.errors[props.field.name]} - + ); diff --git a/app/ui-react/packages/auto-form/src/widgets/TextButton.css b/app/ui-react/packages/auto-form/src/widgets/TextButton.css new file mode 100644 index 00000000000..021da5286ca --- /dev/null +++ b/app/ui-react/packages/auto-form/src/widgets/TextButton.css @@ -0,0 +1,7 @@ +.text-button-component__button { + text-decoration: none; + padding: 8px; + color: #0088ce; + background: none; + border: none; +} diff --git a/app/ui-react/packages/auto-form/src/widgets/TextButton.tsx b/app/ui-react/packages/auto-form/src/widgets/TextButton.tsx new file mode 100644 index 00000000000..afb9b460bc3 --- /dev/null +++ b/app/ui-react/packages/auto-form/src/widgets/TextButton.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; + +import './TextButton.css'; + +export interface ILinkButtonProps { + linkText?: string; + onClick: (event: React.MouseEvent) => void; + children?: React.ReactNode; +} + +export class TextButton extends React.Component { + public render() { + return ( + <> + {this.props.linkText ? ( + + )} + + ); + } +} diff --git a/app/ui-react/packages/auto-form/src/widgets/helpers.ts b/app/ui-react/packages/auto-form/src/widgets/helpers.ts index afe73cdfed1..120c320873b 100644 --- a/app/ui-react/packages/auto-form/src/widgets/helpers.ts +++ b/app/ui-react/packages/auto-form/src/widgets/helpers.ts @@ -1,9 +1,19 @@ -import { IFormControl } from '../models'; +import { IFormControlProps } from '../models'; -export function getValidationState({ form, field }: IFormControl) { +export function getValidationState({ form, field }: IFormControlProps) { return form.touched[field.name] && form.errors[field.name] ? 'error' : form.touched[field.name] ? 'success' : null; } + +/** + * Returns a valid DOM id from the given string + * @param value + */ +export function toValidHtmlId(value?: string) { + return value + ? value.replace(/[^a-zA-Z0-9]+/g, '-').toLowerCase() + : ((value || '') as string); +} diff --git a/app/ui-react/packages/auto-form/src/widgets/index.ts b/app/ui-react/packages/auto-form/src/widgets/index.ts index dd2f78e66b7..327a2574b23 100644 --- a/app/ui-react/packages/auto-form/src/widgets/index.ts +++ b/app/ui-react/packages/auto-form/src/widgets/index.ts @@ -1,6 +1,9 @@ +export * from './AutoFormHelpBlock'; export * from './FormInputComponent'; export * from './FormSelectComponent'; export * from './FormTextAreaComponent'; export * from './FormCheckboxComponent'; export * from './FormHiddenComponent'; export * from './FormDurationComponent'; +export * from './TextButton'; +export * from './helpers'; diff --git a/app/ui-react/packages/auto-form/stories/KitchenSink.stories.tsx b/app/ui-react/packages/auto-form/stories/KitchenSink.stories.tsx index 443041055f9..5f4330368cc 100644 --- a/app/ui-react/packages/auto-form/stories/KitchenSink.stories.tsx +++ b/app/ui-react/packages/auto-form/stories/KitchenSink.stories.tsx @@ -188,20 +188,18 @@ stories.add('Kitchen Sink', () => { onSave={onSave} > {({ fields, handleSubmit }) => ( - -

- The fields marked with * are - required. -

- {fields} - - +
+ +

+ The fields marked with *{' '} + are required. +

+ {fields} + + +
)} diff --git a/app/ui-react/packages/auto-form/stories/SimpleExamples.stories.tsx b/app/ui-react/packages/auto-form/stories/SimpleExamples.stories.tsx index f4e5d55b6ae..6c94f429bd7 100644 --- a/app/ui-react/packages/auto-form/stories/SimpleExamples.stories.tsx +++ b/app/ui-react/packages/auto-form/stories/SimpleExamples.stories.tsx @@ -79,14 +79,12 @@ stories.add('Text', () => ( > {({ fields, handleSubmit }) => ( <> - {fields} - +
+ {fields} + +
)} @@ -115,14 +113,12 @@ stories.add('Number', () => ( > {({ fields, handleSubmit }) => ( <> - {fields} - +
+ {fields} + +
)} @@ -163,14 +159,12 @@ stories.add('Checkbox', () => ( > {({ fields, handleSubmit }) => ( <> - {fields} - +
+ {fields} + +
)} @@ -205,14 +199,12 @@ stories.add('Textarea', () => ( > {({ fields, handleSubmit }) => ( <> - {fields} - +
+ {fields} + +
)} @@ -287,14 +279,12 @@ stories.add('Select', () => ( > {({ fields, handleSubmit }) => ( <> - {fields} - +
+ {fields} + +
)} @@ -336,14 +326,12 @@ stories.add('Duration', () => ( > {({ fields, handleSubmit }) => ( <> - {fields} - +
+ {fields} + +
)} diff --git a/app/ui-react/packages/auto-form/tests/AutoForm.spec.tsx b/app/ui-react/packages/auto-form/tests/AutoForm.spec.tsx index bb948385883..26ad7ef9c20 100644 --- a/app/ui-react/packages/auto-form/tests/AutoForm.spec.tsx +++ b/app/ui-react/packages/auto-form/tests/AutoForm.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { fireEvent, render, wait } from 'react-testing-library'; -import { AutoForm } from '../src'; +import { AutoForm, toValidHtmlId } from '../src'; export default describe('AutoForm', () => { const definitions = { @@ -84,7 +84,9 @@ export default describe('AutoForm', () => { it('All fields are rendered', () => { const { form } = testSampleForm(definitions); const { getByTestId } = render(form); - definitionIds.forEach(id => expect(getByTestId(id)).toBeDefined()); + definitionIds.forEach(id => + expect(getByTestId(toValidHtmlId(id))).toBeDefined() + ); }); definitionIds.forEach(id => diff --git a/app/ui-react/packages/auto-form/tests/FormCheckboxComponent.spec.tsx b/app/ui-react/packages/auto-form/tests/FormCheckboxComponent.spec.tsx index e0c1d4c127b..4d69aba3257 100644 --- a/app/ui-react/packages/auto-form/tests/FormCheckboxComponent.spec.tsx +++ b/app/ui-react/packages/auto-form/tests/FormCheckboxComponent.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { render } from 'react-testing-library'; -import { AutoForm } from '../src'; +import { AutoForm, toValidHtmlId } from '../src'; export default describe('FormCheckboxComponent', () => { const fieldId = 'test01TestCheckbox'; @@ -27,7 +27,7 @@ export default describe('FormCheckboxComponent', () => { it('Should use the definition key as an id for the checkbox', () => { const { getByTestId } = render(form); - expect(getByTestId(fieldId)).toBeDefined(); + expect(getByTestId(toValidHtmlId(fieldId))).toBeDefined(); }); it('Should use the displayName as a label in the checkbox', () => { diff --git a/app/ui-react/packages/auto-form/tests/FormInputComponent.spec.tsx b/app/ui-react/packages/auto-form/tests/FormInputComponent.spec.tsx index 0ed01f0f7ec..2867e15e947 100644 --- a/app/ui-react/packages/auto-form/tests/FormInputComponent.spec.tsx +++ b/app/ui-react/packages/auto-form/tests/FormInputComponent.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { render } from 'react-testing-library'; -import { AutoForm } from '../src'; +import { AutoForm, toValidHtmlId } from '../src'; describe('FormInputComponent: text', () => { const fieldId = 'testTextInput'; @@ -28,7 +28,7 @@ describe('FormInputComponent: text', () => { it('Should use the definition key as an id', () => { const { getByTestId } = render(form); - expect(getByTestId(fieldId)).toBeDefined(); + expect(getByTestId(toValidHtmlId(fieldId))).toBeDefined(); }); it('Should use the displayName as a label', () => { @@ -64,12 +64,12 @@ describe('FormInputComponent: password', () => { it('Should use the definition key as an id', () => { const { getByTestId } = render(form); - expect(getByTestId(fieldId)).toBeDefined(); + expect(getByTestId(toValidHtmlId(fieldId))).toBeDefined(); }); it('Should use the definition key as an id', () => { const { getByTestId } = render(form); - expect(getByTestId(fieldId)).toBeDefined(); + expect(getByTestId(toValidHtmlId(fieldId))).toBeDefined(); }); it('Should use the displayName as a label', () => { @@ -105,7 +105,7 @@ describe('FormInputComponent: number', () => { it('Should use the definition key as an id', () => { const { getByTestId } = render(form); - expect(getByTestId(fieldId)).toBeDefined(); + expect(getByTestId(toValidHtmlId(fieldId))).toBeDefined(); }); it('Should use the displayName as a label', () => { diff --git a/app/ui-react/packages/auto-form/tests/FormSelectComponent.spec.tsx b/app/ui-react/packages/auto-form/tests/FormSelectComponent.spec.tsx index 385ab94af43..7dee2d66aee 100644 --- a/app/ui-react/packages/auto-form/tests/FormSelectComponent.spec.tsx +++ b/app/ui-react/packages/auto-form/tests/FormSelectComponent.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { render } from 'react-testing-library'; -import { AutoForm } from '../src'; +import { AutoForm, toValidHtmlId } from '../src'; export default describe('FormSelectComponent', () => { const fieldId = 'test01Select'; @@ -54,7 +54,7 @@ export default describe('FormSelectComponent', () => { it('Should use the definition key as an id', () => { const { getByTestId } = render(form); - expect(getByTestId(fieldId)).toBeDefined(); + expect(getByTestId(toValidHtmlId(fieldId))).toBeDefined(); }); it('Should use the displayName as a label', () => { diff --git a/app/ui-react/packages/auto-form/tests/FormTextAreaComponent.spec.tsx b/app/ui-react/packages/auto-form/tests/FormTextAreaComponent.spec.tsx index 53e58f63ff5..3025166135f 100644 --- a/app/ui-react/packages/auto-form/tests/FormTextAreaComponent.spec.tsx +++ b/app/ui-react/packages/auto-form/tests/FormTextAreaComponent.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { render } from 'react-testing-library'; -import { AutoForm } from '../src'; +import { AutoForm, toValidHtmlId } from '../src'; describe('FormTextareaComponent', () => { const fieldId = 'testTextareaInput'; @@ -29,7 +29,7 @@ describe('FormTextareaComponent', () => { it('Should use the definition key as an id', () => { const { getByTestId } = render(form); - expect(getByTestId(fieldId)).toBeDefined(); + expect(getByTestId(toValidHtmlId(fieldId))).toBeDefined(); }); it('Should use the displayName as a label', () => { diff --git a/app/ui-react/packages/ui/src/Integration/editor/index.ts b/app/ui-react/packages/ui/src/Integration/editor/index.ts index 34b4e20f8d0..53fa612e98e 100644 --- a/app/ui-react/packages/ui/src/Integration/editor/index.ts +++ b/app/ui-react/packages/ui/src/Integration/editor/index.ts @@ -1,3 +1,4 @@ +export * from './endpoint'; +export * from './ruleFilter'; export * from './shared'; export * from './template'; -export * from './endpoint'; diff --git a/app/ui-react/packages/ui/src/Integration/editor/ruleFilter/RuleFilterCard.tsx b/app/ui-react/packages/ui/src/Integration/editor/ruleFilter/RuleFilterCard.tsx new file mode 100644 index 00000000000..3db01dc497e --- /dev/null +++ b/app/ui-react/packages/ui/src/Integration/editor/ruleFilter/RuleFilterCard.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { ButtonLink, Container, PageSection } from '../../../Layout'; + +export interface IRuleFilterCardProps { + i18nDone: string; + isValid: boolean; + submitForm: (e?: any) => void; +} + +export class RuleFilterCard extends React.Component { + public render() { + return ( + + +
+
+
+ {this.props.children} +
+
+ + {this.props.i18nDone} + +
+
+
+ + + ); + } +} diff --git a/app/ui-react/packages/ui/src/Integration/editor/ruleFilter/index.ts b/app/ui-react/packages/ui/src/Integration/editor/ruleFilter/index.ts new file mode 100644 index 00000000000..5aed789342d --- /dev/null +++ b/app/ui-react/packages/ui/src/Integration/editor/ruleFilter/index.ts @@ -0,0 +1 @@ +export * from './RuleFilterCard'; diff --git a/app/ui-react/packages/utils/src/autoformHelpers.ts b/app/ui-react/packages/utils/src/autoformHelpers.ts index 726b945088b..9e38df59ed2 100644 --- a/app/ui-react/packages/utils/src/autoformHelpers.ts +++ b/app/ui-react/packages/utils/src/autoformHelpers.ts @@ -1,8 +1,11 @@ -import { IFormDefinition, IFormDefinitionProperty } from '@syndesis/auto-form'; +import { + IFormDefinition, + IFormDefinitionProperty, + IFormErrors, +} from '@syndesis/auto-form'; import { IConfigurationProperties, IConfigurationProperty, - StringMap, } from '@syndesis/models'; /** @@ -61,10 +64,10 @@ export function toFormDefinitionProperty(property: IConfigurationProperty) { * @param properties * @param initial */ -export function applyInitialValues( +export function applyInitialValues( properties: IConfigurationProperties, - initial?: StringMap -) { + initial?: T +): T { const configuredProperties = typeof initial !== 'undefined' ? { ...initial } : {}; Object.keys(properties).forEach(key => { @@ -83,7 +86,7 @@ export function applyInitialValues( configuredProperties[key] = property.defaultValue; } }); - return configuredProperties; + return configuredProperties as T; } export function anyFieldsRequired(properties: IConfigurationProperties) { @@ -131,6 +134,12 @@ export function getRequiredStatusText( return noneRequired; } +/** + * Evaluates the values according to the given property definition and returns + * a boolean if the supplied values are valid or not. + * @param properties + * @param values + */ export function validateConfiguredProperties( properties: IConfigurationProperties, values?: { [name: string]: any } @@ -145,7 +154,56 @@ export function validateConfiguredProperties( return true; } const allRequiredSet = allRequired - .map(key => typeof values[key] !== 'undefined') + .map(key => validateRequired(values[key])) .reduce((prev, curr) => curr, false); return allRequiredSet; } + +/** + * Examine the given property and determine if it's set or not, + * for string values this includes evaluating against '' + * @param value + */ +export function validateRequired(value?: any) { + if (typeof value === 'undefined') { + return false; + } + if (typeof value === 'string') { + return (value as string) !== ''; + } + return true; +} + +/** + * Evaluates the given values against the supplied property definition + * object and returns an IFormErrors map that can be returned to auto-form + * @param properties + * @param getErrorString + * @param values + */ +export function validateRequiredProperties( + properties: IConfigurationProperties | IFormDefinition, + getErrorString: (name: string) => string, + values?: T +): IFormErrors { + const allRequired = Object.keys(properties).filter( + key => properties[key].required + ); + if (allRequired.length === 0) { + return {} as IFormErrors; + } + const sanitizedValues = values || ({} as T); + return allRequired + .map(key => ({ key, defined: validateRequired(sanitizedValues[key]) })) + .reduce( + (acc, current) => { + if (!current.defined) { + acc[current.key] = getErrorString( + properties[current.key].displayName || current.key + ); + } + return acc; + }, + {} as IFormErrors + ); +} diff --git a/app/ui-react/syndesis/src/modules/connections/components/WithConnectorForm.tsx b/app/ui-react/syndesis/src/modules/connections/components/WithConnectorForm.tsx index 58bf3e358e9..390e53e284c 100644 --- a/app/ui-react/syndesis/src/modules/connections/components/WithConnectorForm.tsx +++ b/app/ui-react/syndesis/src/modules/connections/components/WithConnectorForm.tsx @@ -1,11 +1,13 @@ import { WithConnectionHelpers } from '@syndesis/api'; -import { AutoForm } from '@syndesis/auto-form'; +import { AutoForm, IFormValue } from '@syndesis/auto-form'; import { Connector } from '@syndesis/models'; import { IConnectorConfigurationFormValidationResult } from '@syndesis/ui'; import { allFieldsRequired, + applyInitialValues, getRequiredStatusText, toFormDefinition, + validateRequiredProperties, } from '@syndesis/utils'; import * as React from 'react'; import i18n from '../../../i18n'; @@ -121,55 +123,57 @@ export class WithConnectorForm extends React.Component< return ( {({ validateConfiguration }) => { - let shouldValidateAgainstBackend = false; let validationResults: IConnectorConfigurationFormValidationResult[] = []; const validateFormAgainstBackend = async (values: { [key: string]: string; }) => { validationResults = []; - if (shouldValidateAgainstBackend) { - const errors: { [key: string]: string } = {}; - const status = await validateConfiguration( - this.props.connector.id!, - values - ); + const errors: { [key: string]: string } = {}; + const status = await validateConfiguration( + this.props.connector.id!, + values + ); + ( ( - ( - status.find(obj => obj.scope === 'PARAMETERS') || { - errors: [], - } - ).errors || [] - ).forEach(obj => { - obj.parameters.forEach(p => (errors[p] = obj.description)); - }); - validationResults = ( - ( - status.find(obj => obj.scope === 'CONNECTIVITY') || { - errors: [], - } - ).errors || [] - ).map( - obj => - ({ - message: obj.description, - type: 'error', - } as IConnectorConfigurationFormValidationResult) - ); - if (Object.keys(errors).length) { - throw errors; - } - if (validationResults.length === 0) { - validationResults = [ - { - message: `${ - this.props.connector.name - } has been successfully validated`, - type: 'success', - } as IConnectorConfigurationFormValidationResult, - ]; - } + status.find(obj => obj.scope === 'PARAMETERS') || { + errors: [], + } + ).errors || [] + ).forEach(obj => { + obj.parameters.forEach(p => (errors[p] = obj.description)); + }); + validationResults = ( + ( + status.find(obj => obj.scope === 'CONNECTIVITY') || { + errors: [], + } + ).errors || [] + ).map( + obj => + ({ + message: obj.description, + type: 'error', + } as IConnectorConfigurationFormValidationResult) + ); + if (Object.keys(errors).length) { + throw errors; + } + if (validationResults.length === 0) { + validationResults = [ + { + message: `${ + this.props.connector.name + } has been successfully validated`, + type: 'success', + } as IConnectorConfigurationFormValidationResult, + ]; } + return validationResults; }; + const initialValue = applyInitialValues( + definition, + this.props.initialValue! + ); const requiredPrompt = getRequiredStatusText( definition, i18n.t('shared:AllFieldsRequired'), @@ -177,13 +181,19 @@ export class WithConnectorForm extends React.Component< '' ); return ( - + i18nRequiredProperty={'* Required field'} definition={toFormDefinition(definition)} i18nFieldsStatusText={requiredPrompt} allFieldsRequired={allFieldsRequired(definition)} - initialValue={this.props.initialValue!} - validate={validateFormAgainstBackend} + initialValue={initialValue!} + validate={(values: IFormValue) => + validateRequiredProperties( + definition, + (name: string) => `${name} is required`, + values + ) + } onSave={this.props.onSave} > {({ @@ -198,12 +208,6 @@ export class WithConnectorForm extends React.Component< validateForm, values, }) => { - const enableValidationAgainstBackend = async () => { - shouldValidateAgainstBackend = true; - await validateForm(); - shouldValidateAgainstBackend = false; - }; - return this.props.children({ dirty, fields, @@ -213,7 +217,7 @@ export class WithConnectorForm extends React.Component< isValidating, resetForm, submitForm, - validateForm: enableValidationAgainstBackend, + validateForm: () => validateFormAgainstBackend(values), validationResults, values, }); diff --git a/app/ui-react/syndesis/src/modules/connections/pages/create/ConfigurationPage.tsx b/app/ui-react/syndesis/src/modules/connections/pages/create/ConfigurationPage.tsx index 065bd5fb571..dcfceb2028c 100644 --- a/app/ui-react/syndesis/src/modules/connections/pages/create/ConfigurationPage.tsx +++ b/app/ui-react/syndesis/src/modules/connections/pages/create/ConfigurationPage.tsx @@ -72,7 +72,6 @@ export default class ConfigurationPage extends React.Component { {fields} diff --git a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationCreatePage.tsx b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationCreatePage.tsx index 0b9d29a4ab4..1aa744528be 100644 --- a/app/ui-react/syndesis/src/modules/data/pages/VirtualizationCreatePage.tsx +++ b/app/ui-react/syndesis/src/modules/data/pages/VirtualizationCreatePage.tsx @@ -109,19 +109,18 @@ export class VirtualizationCreatePage extends React.Component { onSave={handleCreate} > {({ fields, handleSubmit }) => ( - +
{fields} - +
)} diff --git a/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx index 2e4aff15884..2aecd2f4054 100644 --- a/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx @@ -35,7 +35,13 @@ const addStepPage = ( ...state, }) } - filterHref={resolvers.create.configure.editStep.basicFilter} + filterHref={(step, params, state) => + resolvers.create.configure.editStep.basicFilter({ + step, + ...params, + ...state, + }) + } getAddMapperStepHref={(position, params, state) => resolvers.create.configure.addStep.dataMapper({ position: `${position}`, diff --git a/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx index bb1184390fa..7b249eee069 100644 --- a/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx @@ -38,7 +38,13 @@ const addStepPage = ( ...state, }) } - filterHref={resolvers.integration.edit.editStep.basicFilter} + filterHref={(step, params, state) => + resolvers.integration.edit.editStep.basicFilter({ + step, + ...params, + ...state, + }) + } getAddMapperStepHref={(position, params, state) => resolvers.integration.edit.addStep.dataMapper({ position: `${position}`, 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 index a66c633d5a9..a0d1098897a 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorApp.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorApp.tsx @@ -23,12 +23,11 @@ import { stepRoutes, } from './interfaces'; import { makeEditorResolvers } from './makeEditorResolvers'; +import { RuleFilterStepPage } from './ruleFilter/RuleFilterStepPage'; import { SelectConnectionPage } from './SelectConnectionPage'; import { ConfigureStepPage } from './step/ConfigureStepPage'; import { TemplateStepPage } from './template/TemplateStepPage'; -const TODO: React.FunctionComponent = () => <>TODO; - export interface IEditorApp { mode: 'adding' | 'editing'; appStepRoutes: typeof stepRoutes; @@ -68,7 +67,13 @@ export const EditorApp: React.FunctionComponent = ({ ...state, }) } - filterHref={(step, p, s) => appResolvers.basicFilter()} + filterHref={(step, params, state) => + appResolvers.basicFilter({ + step, + ...params, + ...state, + }) + } mapperHref={(step, params, state) => appResolvers.dataMapper({ step, @@ -210,6 +215,17 @@ export const EditorApp: React.FunctionComponent = ({ /> ); + const basicFilterPage = ( + ( + + )} + postConfigureHref={postConfigureHref} + /> + ); + return ( <> = ({ mapperChildren: dataMapperPage, }} basicFilter={{ - filterPath: appStepRoutes.basicFilter, - filterChildren: TODO, + basicFilterPath: appStepRoutes.basicFilter, + basicFilterChildren: basicFilterPage, }} step={{ configurePath: appStepRoutes.step, diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx index a8073200055..6bccf3cb3d3 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx @@ -88,8 +88,8 @@ export const TemplateApp: React.FunctionComponent< }; export interface IBasicFilterAppProps { - filterPath: string; - filterChildren: React.ReactNode; + basicFilterPath: string; + basicFilterChildren: React.ReactElement; } export const BasicFilterApp: React.FunctionComponent< IBasicFilterAppProps @@ -97,9 +97,9 @@ export const BasicFilterApp: React.FunctionComponent< return ( ); @@ -211,10 +211,10 @@ export const EditorRoutes: React.FunctionComponent = props => { mapperChildren={props.dataMapper.mapperChildren} /> - + diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/ConfigurationForm.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/ConfigurationForm.tsx index e0d97325573..b798a8cf3ca 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/ConfigurationForm.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/ConfigurationForm.tsx @@ -4,7 +4,7 @@ import { getActionStepDefinition, getActionSteps, } from '@syndesis/api'; -import { AutoForm } from '@syndesis/auto-form'; +import { AutoForm, IFormValue } from '@syndesis/auto-form'; import { Action, ActionDescriptor } from '@syndesis/models'; import { IntegrationEditorForm } from '@syndesis/ui'; import { @@ -13,6 +13,7 @@ import { getRequiredStatusText, toFormDefinition, validateConfiguredProperties, + validateRequiredProperties, } from '@syndesis/utils'; import * as React from 'react'; import i18n from '../../../../../i18n'; @@ -82,7 +83,7 @@ export const ConfigurationForm: React.FunctionComponent< '' ); return ( - + i18nRequiredProperty={'* Required field'} allFieldsRequired={allFieldsRequired(definition)} i18nFieldsStatusText={requiredPrompt} @@ -90,8 +91,12 @@ export const ConfigurationForm: React.FunctionComponent< initialValue={initialValue} isInitialValid={isInitialValid} onSave={onSave} - validate={(values: { [name: string]: any }): any => - validateConfiguredProperties(definition, values) + validate={(values: IFormValue) => + validateRequiredProperties( + definition, + (name: string) => `${name} is required`, + values + ) } key={key} > diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx index 219a6a32118..fcb857e6924 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx @@ -145,6 +145,8 @@ export interface ITemplateStepRouteParams extends IConfigureStepRouteParams {} export interface ITemplateStepRouteState extends IConfigureStepRouteState {} export interface IDataMapperRouteParams extends IConfigureStepRouteParams {} export interface IDataMapperRouteState extends IConfigureStepRouteState {} +export interface IRuleFilterStepRouteParams extends IConfigureStepRouteParams {} +export interface IRuleFilterStepRouteState extends IConfigureStepRouteState {} /** * @param integration - the integration object coming from step 3.index, used to diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/makeEditorResolvers.ts b/app/ui-react/syndesis/src/modules/integrations/components/editor/makeEditorResolvers.ts index 017ed3438eb..77b8a10093c 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/makeEditorResolvers.ts +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/makeEditorResolvers.ts @@ -16,6 +16,8 @@ import { IEditorConfigureStep, IEditorSelectAction, IEditorSelectConnection, + IRuleFilterStepRouteParams, + IRuleFilterStepRouteState, ISelectActionRouteParams, ISelectActionRouteState, ISelectConnectionRouteParams, @@ -193,11 +195,15 @@ export function makeEditorResolvers(esr: typeof stepRoutes) { IEditorConfigureStep, IConfigureStepRouteParams, IConfigureStepRouteState - >(esr.apiProvider.upload, configureConfigureStepMapper), + >(esr.apiProvider.upload, configureConfigureStepMapper), review: makeResolverNoParams('todo review'), edit: makeResolverNoParams('todo edit'), }, - basicFilter: makeResolverNoParams('todo basicFilter'), + basicFilter: makeResolver< + IEditorConfigureStep, + IRuleFilterStepRouteParams, + IRuleFilterStepRouteState + >(esr.basicFilter, configureConfigureDataMapperMapper), dataMapper: makeResolver< IEditorConfigureStep, IDataMapperRouteParams, diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/ruleFilter/RuleFilterStepPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/ruleFilter/RuleFilterStepPage.tsx new file mode 100644 index 00000000000..65160f90e05 --- /dev/null +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/ruleFilter/RuleFilterStepPage.tsx @@ -0,0 +1,169 @@ +import { + getPreviousIntegrationStepWithDataShape, + getSteps, + WithFilterOptions, + WithIntegrationHelpers, +} from '@syndesis/api'; +import * as H from '@syndesis/history'; +import { DataShape, Integration } from '@syndesis/models'; +import { + IntegrationEditorLayout, + PageLoader, + PageSection, + RuleFilterCard, +} from '@syndesis/ui'; +import { WithLoader, WithRouteData } from '@syndesis/utils'; +import * as React from 'react'; +import { ApiError, PageTitle } from '../../../../../shared'; +import { IEditorSidebarProps } from '../EditorSidebar'; +import { + IRuleFilterStepRouteParams, + IRuleFilterStepRouteState, +} from '../interfaces'; +import { toUIStep, toUIStepCollection } from '../utils'; +import { + IOnUpdatedIntegrationProps, + WithRuleFilterForm, +} from './WithRuleFilterForm'; + +export interface IRuleFilterStepPageProps { + cancelHref: ( + p: IRuleFilterStepRouteParams, + s: IRuleFilterStepRouteState + ) => H.LocationDescriptor; + // tslint:disable-next-line:react-unused-props-and-state + mode: 'adding' | 'editing'; + sidebar: (props: IEditorSidebarProps) => React.ReactNode; + // tslint:disable-next-line:react-unused-props-and-state + postConfigureHref: ( + integration: Integration, + p: IRuleFilterStepRouteParams, + s: IRuleFilterStepRouteState + ) => H.LocationDescriptorObject; +} + +export class RuleFilterStepPage extends React.Component< + IRuleFilterStepPageProps +> { + public render() { + return ( + <> + + {({ addStep, updateStep }) => ( + > + {( + { flowId, position }, + { step, integration, updatedIntegration }, + { history } + ) => { + const positionAsNumber = parseInt(position, 10); + let dataShape = {} as DataShape; + try { + const prevStep = getPreviousIntegrationStepWithDataShape( + integration, + flowId, + positionAsNumber + ); + dataShape = + prevStep!.action!.descriptor!.outputDataShape || + ({} as DataShape); + } catch (err) { + // ignore + } + const handleSubmitForm = async ({ + values, + }: IOnUpdatedIntegrationProps) => { + updatedIntegration = await (this.props.mode === 'adding' + ? addStep + : updateStep)( + updatedIntegration || integration, + step, + flowId, + positionAsNumber, + values + ); + history.push( + this.props.postConfigureHref( + updatedIntegration, + { flowId, position }, + { + integration, + step, + updatedIntegration, + } + ) + ); + }; + return ( + <> + + + {({ data, error, hasData }) => ( + } + errorChildren={ + + + + } + > + {() => ( + + {({ form, isValid, submitForm }) => ( + <> + + {form} + + + )} + + )} + + )} + + } + cancelHref={this.props.cancelHref( + { flowId, position }, + { + integration, + step, + updatedIntegration, + } + )} + /> + + ); + }} + + )} + + + ); + } +} diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/ruleFilter/WithRuleFilterForm.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/ruleFilter/WithRuleFilterForm.tsx new file mode 100644 index 00000000000..a8d3656841b --- /dev/null +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/ruleFilter/WithRuleFilterForm.tsx @@ -0,0 +1,165 @@ +import { AutoForm, IAutoFormActions } from '@syndesis/auto-form'; +import { FilterOptions, Op, StepKind } from '@syndesis/models'; +import { + applyInitialValues, + toFormDefinition, + validateConfiguredProperties, + validateRequiredProperties, +} from '@syndesis/utils'; +import * as React from 'react'; + +export interface IWithRuleFilterFormChildrenProps { + form: JSX.Element; + isValid: boolean; + isSubmitting: boolean; + submitForm(): any; +} + +export interface IOnUpdatedIntegrationProps { + /** + * the configured values. + */ + values: IRuleFilterConfigStringRules; +} + +export interface IWithRuleFilterFormProps { + filterOptions: FilterOptions; + step: StepKind; + children(props: IWithRuleFilterFormChildrenProps): any; + onUpdatedIntegration(props: IOnUpdatedIntegrationProps): Promise; +} + +export interface IRuleFilterConfigStringRules { + type: string; + predicate: string; + rules: string; +} + +interface IRuleFilterConfig { + type: string; + predicate: string; + rules: Op[]; +} + +export class WithRuleFilterForm extends React.Component< + IWithRuleFilterFormProps +> { + public render() { + const onSave = async ( + values: IRuleFilterConfig, + actions: IAutoFormActions + ): Promise => { + await this.props.onUpdatedIntegration({ + values: { + ...values, + rules: JSON.stringify(values.rules || []), + }, + }); + actions.setSubmitting(false); + }; + const definition = { + predicate: { + defaultValue: 'AND', + displayName: 'Continue only if incoming data match ', + enum: [ + { + label: 'ALL of the following', + value: 'AND', + }, + + { + label: 'ANY of the following', + value: 'OR', + }, + ], + type: 'select', + }, + rules: { + arrayDefinition: { + op: { + description: 'Must meet this condition', + enum: this.props.filterOptions.ops, + order: 1, + required: true, + type: 'text', + }, + path: { + dataList: this.props.filterOptions.paths, + description: 'The data you want to evaluate', + order: 0, + placeholder: 'Property name', + required: true, + type: 'text', + }, + value: { + description: 'For this value', + order: 2, + placeholder: 'Keywords', + required: true, + type: 'text', + }, + }, + arrayDefinitionOptions: { + arrayControlAttributes: { + className: 'col-md-3 form-group', + }, + controlLabelAttributes: { + style: { display: 'none' }, + }, + formGroupAttributes: { + className: 'col-md-3', + }, + i18nAddElementText: '+ Add another rule', + }, + required: true, + type: 'array', + }, + type: { + defaultValue: 'rule', + type: 'hidden', + }, + }; + const configuredProperties = this.props.step.configuredProperties || {}; + const config = {} as IRuleFilterConfig; + config.rules = + typeof configuredProperties.rules === 'string' + ? JSON.parse(configuredProperties.rules) + : configuredProperties.rules; + config.predicate = configuredProperties.predicate || 'AND'; + config.type = configuredProperties.type || 'rule'; + const initialValue = applyInitialValues( + definition, + config + ); + const isInitialValid = validateConfiguredProperties( + definition, + initialValue + ); + return ( + + definition={toFormDefinition(definition)} + i18nRequiredProperty={'* Required field'} + initialValue={initialValue} + isInitialValid={isInitialValid} + onSave={onSave} + validate={(values: IRuleFilterConfig) => { + return validateRequiredProperties( + definition, + (name: string) => `${name} is required`, + values + ); + }} + key={this.props.step.id} + > + {({ fields, handleSubmit, isSubmitting, isValid, submitForm }) => + this.props.children({ + form: <>{fields}, + isSubmitting, + isValid, + submitForm, + }) + } + + ); + } +} diff --git a/app/ui-react/syndesis/src/modules/settings/pages/OAuthAppsPage.tsx b/app/ui-react/syndesis/src/modules/settings/pages/OAuthAppsPage.tsx index 712cf8e71b7..b76090d63f9 100644 --- a/app/ui-react/syndesis/src/modules/settings/pages/OAuthAppsPage.tsx +++ b/app/ui-react/syndesis/src/modules/settings/pages/OAuthAppsPage.tsx @@ -1,5 +1,5 @@ import { ApiContext, WithOAuthAppHelpers, WithOAuthApps } from '@syndesis/api'; -import { AutoForm } from '@syndesis/auto-form'; +import { AutoForm, IFormValue } from '@syndesis/auto-form'; import { OAuthApp } from '@syndesis/models'; import { ConfirmationButtonStyle, @@ -21,6 +21,7 @@ import { getRequiredStatusText, toFormDefinition, validateConfiguredProperties, + validateRequiredProperties, WithListViewToolbarHelpers, WithLoader, } from '@syndesis/utils'; @@ -229,7 +230,7 @@ export class OAuthAppsPage extends React.Component<{}, IOAuthAppsPageState> { id={oauthApp.id!} name={oauthApp.name!} > - key={index + '-' + key} definition={toFormDefinition( definition @@ -244,6 +245,16 @@ export class OAuthAppsPage extends React.Component<{}, IOAuthAppsPageState> { i18nRequiredProperty={t( 'shared:requiredFieldMessage' )} + validate={( + values: IFormValue + ) => + validateRequiredProperties( + definition, + (name: string) => + `${name} is required`, + values + ) + } initialValue={configuration} onSave={( configuredProperties, From 3de6f93caad76fd57ae9334121faa684c3b272cc Mon Sep 17 00:00:00 2001 From: kahboom Date: Wed, 22 May 2019 10:58:51 +0100 Subject: [PATCH 10/40] Refactor files in Customizations UI package --- .../ApiConnectorDetailCard.css | 0 .../ApiConnectorDetailCard.tsx | 0 .../ApiConnectorDetailsForm.css | 0 .../ApiConnectorDetailsForm.tsx | 2 +- .../ApiConnectorListItem.tsx | 4 ++-- .../ApiConnectorListSkeleton.tsx | 0 .../ApiConnectorListView.tsx | 4 ++-- .../ApiConnectorReview.css | 0 .../ApiConnectorReview.tsx | 2 +- .../Customization/apiClientConnectors/index.ts | 6 ++++++ .../{ => extensions}/ExtensionDetail.css | 0 .../{ => extensions}/ExtensionDetail.tsx | 6 +++--- .../{ => extensions}/ExtensionImportCard.tsx | 2 +- .../{ => extensions}/ExtensionImportReview.css | 0 .../{ => extensions}/ExtensionImportReview.tsx | 2 +- .../ExtensionIntegrationsTable.tsx | 0 .../{ => extensions}/ExtensionListItem.tsx | 4 ++-- .../{ => extensions}/ExtensionListSkeleton.tsx | 0 .../{ => extensions}/ExtensionListView.tsx | 4 ++-- .../{ => extensions}/ExtensionOverview.css | 0 .../{ => extensions}/ExtensionOverview.tsx | 0 .../{ => extensions}/ExtensionSupports.tsx | 0 .../ui/src/Customization/extensions/index.ts | 9 +++++++++ .../packages/ui/src/Customization/index.ts | 17 ++--------------- 24 files changed, 32 insertions(+), 30 deletions(-) rename app/ui-react/packages/ui/src/Customization/{ => apiClientConnectors}/ApiConnectorDetailCard.css (100%) rename app/ui-react/packages/ui/src/Customization/{ => apiClientConnectors}/ApiConnectorDetailCard.tsx (100%) rename app/ui-react/packages/ui/src/Customization/{ => apiClientConnectors}/ApiConnectorDetailsForm.css (100%) rename app/ui-react/packages/ui/src/Customization/{ => apiClientConnectors}/ApiConnectorDetailsForm.tsx (99%) rename app/ui-react/packages/ui/src/Customization/{ => apiClientConnectors}/ApiConnectorListItem.tsx (98%) rename app/ui-react/packages/ui/src/Customization/{ => apiClientConnectors}/ApiConnectorListSkeleton.tsx (100%) rename app/ui-react/packages/ui/src/Customization/{ => apiClientConnectors}/ApiConnectorListView.tsx (95%) rename app/ui-react/packages/ui/src/Customization/{ => apiClientConnectors}/ApiConnectorReview.css (100%) rename app/ui-react/packages/ui/src/Customization/{ => apiClientConnectors}/ApiConnectorReview.tsx (98%) create mode 100644 app/ui-react/packages/ui/src/Customization/apiClientConnectors/index.ts rename app/ui-react/packages/ui/src/Customization/{ => extensions}/ExtensionDetail.css (100%) rename app/ui-react/packages/ui/src/Customization/{ => extensions}/ExtensionDetail.tsx (98%) rename app/ui-react/packages/ui/src/Customization/{ => extensions}/ExtensionImportCard.tsx (98%) rename app/ui-react/packages/ui/src/Customization/{ => extensions}/ExtensionImportReview.css (100%) rename app/ui-react/packages/ui/src/Customization/{ => extensions}/ExtensionImportReview.tsx (99%) rename app/ui-react/packages/ui/src/Customization/{ => extensions}/ExtensionIntegrationsTable.tsx (100%) rename app/ui-react/packages/ui/src/Customization/{ => extensions}/ExtensionListItem.tsx (98%) rename app/ui-react/packages/ui/src/Customization/{ => extensions}/ExtensionListSkeleton.tsx (100%) rename app/ui-react/packages/ui/src/Customization/{ => extensions}/ExtensionListView.tsx (95%) rename app/ui-react/packages/ui/src/Customization/{ => extensions}/ExtensionOverview.css (100%) rename app/ui-react/packages/ui/src/Customization/{ => extensions}/ExtensionOverview.tsx (100%) rename app/ui-react/packages/ui/src/Customization/{ => extensions}/ExtensionSupports.tsx (100%) create mode 100644 app/ui-react/packages/ui/src/Customization/extensions/index.ts diff --git a/app/ui-react/packages/ui/src/Customization/ApiConnectorDetailCard.css b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailCard.css similarity index 100% rename from app/ui-react/packages/ui/src/Customization/ApiConnectorDetailCard.css rename to app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailCard.css diff --git a/app/ui-react/packages/ui/src/Customization/ApiConnectorDetailCard.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailCard.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Customization/ApiConnectorDetailCard.tsx rename to app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailCard.tsx diff --git a/app/ui-react/packages/ui/src/Customization/ApiConnectorDetailsForm.css b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailsForm.css similarity index 100% rename from app/ui-react/packages/ui/src/Customization/ApiConnectorDetailsForm.css rename to app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailsForm.css diff --git a/app/ui-react/packages/ui/src/Customization/ApiConnectorDetailsForm.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailsForm.tsx similarity index 99% rename from app/ui-react/packages/ui/src/Customization/ApiConnectorDetailsForm.tsx rename to app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailsForm.tsx index 2a0a636120f..0a42e3765b4 100644 --- a/app/ui-react/packages/ui/src/Customization/ApiConnectorDetailsForm.tsx +++ b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailsForm.tsx @@ -1,6 +1,6 @@ import { Button, Card } from 'patternfly-react'; import * as React from 'react'; -import { Loader } from '../Layout'; +import { Loader } from '../../Layout'; import './ApiConnectorDetailsForm.css'; export interface IApiConnectorDetailsFormProps { diff --git a/app/ui-react/packages/ui/src/Customization/ApiConnectorListItem.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListItem.tsx similarity index 98% rename from app/ui-react/packages/ui/src/Customization/ApiConnectorListItem.tsx rename to app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListItem.tsx index f70ad9b4bbd..0fbd217e322 100644 --- a/app/ui-react/packages/ui/src/Customization/ApiConnectorListItem.tsx +++ b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListItem.tsx @@ -7,12 +7,12 @@ import { Tooltip, } from 'patternfly-react'; import * as React from 'react'; -import { ButtonLink } from '../Layout'; +import { ButtonLink } from '../../Layout'; import { ConfirmationButtonStyle, ConfirmationDialog, ConfirmationIconType, -} from '../Shared'; +} from '../../Shared'; export interface IApiConnectorListItemProps { apiConnectorDescription?: string; diff --git a/app/ui-react/packages/ui/src/Customization/ApiConnectorListSkeleton.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListSkeleton.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Customization/ApiConnectorListSkeleton.tsx rename to app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListSkeleton.tsx diff --git a/app/ui-react/packages/ui/src/Customization/ApiConnectorListView.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListView.tsx similarity index 95% rename from app/ui-react/packages/ui/src/Customization/ApiConnectorListView.tsx rename to app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListView.tsx index 8fff54553b8..9e39bcb8305 100644 --- a/app/ui-react/packages/ui/src/Customization/ApiConnectorListView.tsx +++ b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListView.tsx @@ -6,8 +6,8 @@ import { Tooltip, } from 'patternfly-react'; import * as React from 'react'; -import { ButtonLink, PageSection } from '../Layout'; -import { IListViewToolbarProps, ListViewToolbar } from '../Shared'; +import { ButtonLink, PageSection } from '../../Layout'; +import { IListViewToolbarProps, ListViewToolbar } from '../../Shared'; export interface IApiConnectorListViewProps extends IListViewToolbarProps { i18nDescription: string; diff --git a/app/ui-react/packages/ui/src/Customization/ApiConnectorReview.css b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorReview.css similarity index 100% rename from app/ui-react/packages/ui/src/Customization/ApiConnectorReview.css rename to app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorReview.css diff --git a/app/ui-react/packages/ui/src/Customization/ApiConnectorReview.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorReview.tsx similarity index 98% rename from app/ui-react/packages/ui/src/Customization/ApiConnectorReview.tsx rename to app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorReview.tsx index 98b19c4ee56..5504252375b 100644 --- a/app/ui-react/packages/ui/src/Customization/ApiConnectorReview.tsx +++ b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorReview.tsx @@ -10,7 +10,7 @@ import { } from '@patternfly/react-core'; import { Card } from 'patternfly-react'; import * as React from 'react'; -import { Container } from '../Layout/Container'; +import { Container } from '../../Layout/Container'; import './ApiConnectorReview.css'; export interface IApiConnectorReviewProps { diff --git a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/index.ts b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/index.ts new file mode 100644 index 00000000000..26b264f9e13 --- /dev/null +++ b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/index.ts @@ -0,0 +1,6 @@ +export * from './ApiConnectorDetailCard'; +export * from './ApiConnectorDetailsForm'; +export * from './ApiConnectorListItem'; +export * from './ApiConnectorListSkeleton'; +export * from './ApiConnectorListView'; +export * from './ApiConnectorReview'; diff --git a/app/ui-react/packages/ui/src/Customization/ExtensionDetail.css b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionDetail.css similarity index 100% rename from app/ui-react/packages/ui/src/Customization/ExtensionDetail.css rename to app/ui-react/packages/ui/src/Customization/extensions/ExtensionDetail.css diff --git a/app/ui-react/packages/ui/src/Customization/ExtensionDetail.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionDetail.tsx similarity index 98% rename from app/ui-react/packages/ui/src/Customization/ExtensionDetail.tsx rename to app/ui-react/packages/ui/src/Customization/extensions/ExtensionDetail.tsx index d6a3ee44803..e87fbac06a4 100644 --- a/app/ui-react/packages/ui/src/Customization/ExtensionDetail.tsx +++ b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionDetail.tsx @@ -16,13 +16,13 @@ import { Tooltip, } from 'patternfly-react'; import * as React from 'react'; -import { ButtonLink } from '../Layout'; -import { Container } from '../Layout/Container'; +import { ButtonLink } from '../../Layout'; +import { Container } from '../../Layout/Container'; import { ConfirmationButtonStyle, ConfirmationDialog, ConfirmationIconType, -} from '../Shared'; +} from '../../Shared'; import './ExtensionDetail.css'; export interface IExtensionDetailProps { diff --git a/app/ui-react/packages/ui/src/Customization/ExtensionImportCard.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionImportCard.tsx similarity index 98% rename from app/ui-react/packages/ui/src/Customization/ExtensionImportCard.tsx rename to app/ui-react/packages/ui/src/Customization/extensions/ExtensionImportCard.tsx index 1c644248f95..b146fbe9bcf 100644 --- a/app/ui-react/packages/ui/src/Customization/ExtensionImportCard.tsx +++ b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionImportCard.tsx @@ -1,7 +1,7 @@ import { Text } from '@patternfly/react-core'; import { Alert, Card } from 'patternfly-react'; import * as React from 'react'; -import { DndFileChooser } from '../Shared/DndFileChooser'; +import { DndFileChooser } from '../../Shared/DndFileChooser'; export interface IExtensionImportCardProps { /** diff --git a/app/ui-react/packages/ui/src/Customization/ExtensionImportReview.css b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionImportReview.css similarity index 100% rename from app/ui-react/packages/ui/src/Customization/ExtensionImportReview.css rename to app/ui-react/packages/ui/src/Customization/extensions/ExtensionImportReview.css diff --git a/app/ui-react/packages/ui/src/Customization/ExtensionImportReview.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionImportReview.tsx similarity index 99% rename from app/ui-react/packages/ui/src/Customization/ExtensionImportReview.tsx rename to app/ui-react/packages/ui/src/Customization/extensions/ExtensionImportReview.tsx index b32026ad560..df8f0a37202 100644 --- a/app/ui-react/packages/ui/src/Customization/ExtensionImportReview.tsx +++ b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionImportReview.tsx @@ -1,7 +1,7 @@ import * as H from '@syndesis/history'; import { Button, Grid } from 'patternfly-react'; import * as React from 'react'; -import { ButtonLink, Container } from '../Layout'; +import { ButtonLink, Container } from '../../Layout'; import './ExtensionImportReview.css'; export interface IImportAction { diff --git a/app/ui-react/packages/ui/src/Customization/ExtensionIntegrationsTable.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionIntegrationsTable.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Customization/ExtensionIntegrationsTable.tsx rename to app/ui-react/packages/ui/src/Customization/extensions/ExtensionIntegrationsTable.tsx diff --git a/app/ui-react/packages/ui/src/Customization/ExtensionListItem.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListItem.tsx similarity index 98% rename from app/ui-react/packages/ui/src/Customization/ExtensionListItem.tsx rename to app/ui-react/packages/ui/src/Customization/extensions/ExtensionListItem.tsx index 96d4a3a01ae..86c9394fed8 100644 --- a/app/ui-react/packages/ui/src/Customization/ExtensionListItem.tsx +++ b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListItem.tsx @@ -7,12 +7,12 @@ import { Tooltip, } from 'patternfly-react'; import * as React from 'react'; -import { ButtonLink } from '../Layout'; +import { ButtonLink } from '../../Layout'; import { ConfirmationButtonStyle, ConfirmationDialog, ConfirmationIconType, -} from '../Shared'; +} from '../../Shared'; export interface IExtensionListItemProps { detailsPageLink: H.LocationDescriptor; diff --git a/app/ui-react/packages/ui/src/Customization/ExtensionListSkeleton.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListSkeleton.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Customization/ExtensionListSkeleton.tsx rename to app/ui-react/packages/ui/src/Customization/extensions/ExtensionListSkeleton.tsx diff --git a/app/ui-react/packages/ui/src/Customization/ExtensionListView.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListView.tsx similarity index 95% rename from app/ui-react/packages/ui/src/Customization/ExtensionListView.tsx rename to app/ui-react/packages/ui/src/Customization/extensions/ExtensionListView.tsx index fd793f818df..05db93768bb 100644 --- a/app/ui-react/packages/ui/src/Customization/ExtensionListView.tsx +++ b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListView.tsx @@ -7,8 +7,8 @@ import { Tooltip, } from 'patternfly-react'; import * as React from 'react'; -import { ButtonLink, PageSection } from '../Layout'; -import { IListViewToolbarProps, ListViewToolbar } from '../Shared'; +import { ButtonLink, PageSection } from '../../Layout'; +import { IListViewToolbarProps, ListViewToolbar } from '../../Shared'; export interface IExtensionListViewProps extends IListViewToolbarProps { i18nDescription: string; diff --git a/app/ui-react/packages/ui/src/Customization/ExtensionOverview.css b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionOverview.css similarity index 100% rename from app/ui-react/packages/ui/src/Customization/ExtensionOverview.css rename to app/ui-react/packages/ui/src/Customization/extensions/ExtensionOverview.css diff --git a/app/ui-react/packages/ui/src/Customization/ExtensionOverview.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionOverview.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Customization/ExtensionOverview.tsx rename to app/ui-react/packages/ui/src/Customization/extensions/ExtensionOverview.tsx diff --git a/app/ui-react/packages/ui/src/Customization/ExtensionSupports.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionSupports.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Customization/ExtensionSupports.tsx rename to app/ui-react/packages/ui/src/Customization/extensions/ExtensionSupports.tsx diff --git a/app/ui-react/packages/ui/src/Customization/extensions/index.ts b/app/ui-react/packages/ui/src/Customization/extensions/index.ts new file mode 100644 index 00000000000..6b74abad35a --- /dev/null +++ b/app/ui-react/packages/ui/src/Customization/extensions/index.ts @@ -0,0 +1,9 @@ +export * from './ExtensionDetail'; +export * from './ExtensionImportCard'; +export * from './ExtensionImportReview'; +export * from './ExtensionIntegrationsTable'; +export * from './ExtensionListItem'; +export * from './ExtensionListSkeleton'; +export * from './ExtensionListView'; +export * from './ExtensionOverview'; +export * from './ExtensionSupports'; diff --git a/app/ui-react/packages/ui/src/Customization/index.ts b/app/ui-react/packages/ui/src/Customization/index.ts index aca2fd069a6..1495dafbfcb 100644 --- a/app/ui-react/packages/ui/src/Customization/index.ts +++ b/app/ui-react/packages/ui/src/Customization/index.ts @@ -1,15 +1,2 @@ -export * from './ApiConnectorDetailCard'; -export * from './ApiConnectorDetailsForm'; -export * from './ApiConnectorReview'; -export * from './ApiConnectorListItem'; -export * from './ApiConnectorListSkeleton'; -export * from './ApiConnectorListView'; -export * from './ExtensionDetail'; -export * from './ExtensionImportCard'; -export * from './ExtensionImportReview'; -export * from './ExtensionIntegrationsTable'; -export * from './ExtensionListItem'; -export * from './ExtensionListSkeleton'; -export * from './ExtensionListView'; -export * from './ExtensionOverview'; -export * from './ExtensionSupports'; +export * from './apiClientConnectors'; +export * from './extensions'; From bd8ba9f85d8c66753e318b542f577182f033147c Mon Sep 17 00:00:00 2001 From: kahboom Date: Wed, 22 May 2019 11:14:29 +0100 Subject: [PATCH 11/40] Set up ApiClientConnectorCreateUpload --- .../create/ApiClientConnectorCreateUpload.tsx | 11 +++++++++++ .../Customization/apiClientConnectors/create/index.ts | 1 + .../ui/src/Customization/apiClientConnectors/index.ts | 1 + 3 files changed, 13 insertions(+) create mode 100644 app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/ApiClientConnectorCreateUpload.tsx create mode 100644 app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/index.ts diff --git a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/ApiClientConnectorCreateUpload.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/ApiClientConnectorCreateUpload.tsx new file mode 100644 index 00000000000..63c1615ea0c --- /dev/null +++ b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/ApiClientConnectorCreateUpload.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; + +export interface IApiClientConnectorCreateUploadProps {} + +export class ApiClientConnectorCreateUpload extends React.Component< + IApiClientConnectorCreateUploadProps +> { + public render() { + return <>; + } +} diff --git a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/index.ts b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/index.ts new file mode 100644 index 00000000000..a4327bfc874 --- /dev/null +++ b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/index.ts @@ -0,0 +1 @@ +export * from './ApiClientConnectorCreateUpload'; diff --git a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/index.ts b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/index.ts index 26b264f9e13..0b26d69ef5b 100644 --- a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/index.ts +++ b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/index.ts @@ -4,3 +4,4 @@ export * from './ApiConnectorListItem'; export * from './ApiConnectorListSkeleton'; export * from './ApiConnectorListView'; export * from './ApiConnectorReview'; +export * from './create'; From 189a7ac54e898f65cd888fcb7034c0e14f2fe5c1 Mon Sep 17 00:00:00 2001 From: kahboom Date: Wed, 22 May 2019 11:36:37 +0100 Subject: [PATCH 12/40] Initial setup of ApiClientConnectorCreateUpload --- .../create/ApiClientConnectorCreateUpload.tsx | 82 ++++++++++++++++++- 1 file changed, 80 insertions(+), 2 deletions(-) diff --git a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/ApiClientConnectorCreateUpload.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/ApiClientConnectorCreateUpload.tsx index 63c1615ea0c..3692f6990d5 100644 --- a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/ApiClientConnectorCreateUpload.tsx +++ b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/ApiClientConnectorCreateUpload.tsx @@ -1,11 +1,89 @@ +import { Card } from 'patternfly-react'; import * as React from 'react'; +import { DndFileChooser } from '../../../Shared'; -export interface IApiClientConnectorCreateUploadProps {} +export interface IApiClientConnectorCreateUploadProps { + /** + * `true` if the dropzone should be disabled. + */ + dndDisabled: boolean; + + /** + * The localized text that appears below the selected file information at the bottom of the drop area. This + * message should identify the accepted file extension. + */ + i18nDndHelpMessage: string; + + /** + * The localized text (may include HTML tags) that appears above the selected file information at the + * top of the drop area. This message should describe how the DnD works. + */ + i18nDndInstructions: string; + + /** + * The localized text that appears when no file has been selected. + */ + i18nDndNoFileSelectedMessage: string; + + /** + * The localized text for the label that appears before the selected file information. + */ + i18nDndSelectedFileLabel: string; + + /** + * A general, localized message for when a file upload failed. This message will be shown + * along with an error icon and appears next to the selected file message. If this property + * is set then `i18nDndUploadSuccessMessage` should not be set. + */ + i18nDndUploadFailedMessage?: string; + + /** + * A general, localized message for when a file upload was successful. This message will be shown + * along with an OK icon and appear next to the selected file message. If this property + * is set then `i18nDndUploadFailedMessage` should not be set. + */ + i18nDndUploadSuccessMessage?: string; + + /** + * The localized title text that appears above the DnD component. + */ + i18nTitle: string; + + /** + * Callback for when one or more file uploads have been accepted. Caller should handler processing of the files. + */ + onDndUploadAccepted(files: File[]): void; + + /** + * The localized text (may include HTML tags) that appears when the file upload fails. + */ + onDndUploadRejected(fileName: string): string; +} export class ApiClientConnectorCreateUpload extends React.Component< IApiClientConnectorCreateUploadProps > { public render() { - return <>; + return ( + + + {this.props.i18nTitle} + + + + + + ); } } From 6f9c35f3801b246267d33ad27a167add3877c36d Mon Sep 17 00:00:00 2001 From: kahboom Date: Wed, 22 May 2019 11:42:14 +0100 Subject: [PATCH 13/40] Comment to move the drag and drop stuff to sep component later --- .../create/ApiClientConnectorCreateUpload.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/ApiClientConnectorCreateUpload.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/ApiClientConnectorCreateUpload.tsx index 3692f6990d5..3fe363e442f 100644 --- a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/ApiClientConnectorCreateUpload.tsx +++ b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/create/ApiClientConnectorCreateUpload.tsx @@ -65,6 +65,10 @@ export class ApiClientConnectorCreateUpload extends React.Component< > { public render() { return ( + /** + * TODO: Move drag and drop stuff to its own component, + * keep this is as a list of options: Upload or Use a URL + */ {this.props.i18nTitle} From f2fe1f47612e5f9709de6849ba8be7084a52a8f8 Mon Sep 17 00:00:00 2001 From: kahboom Date: Wed, 22 May 2019 12:09:16 +0100 Subject: [PATCH 14/40] Move Integration details into separate dir --- .../IntegrationEditorActionsListItem.tsx | 0 .../IntegrationEditorChooseAction.tsx | 2 +- .../IntegrationEditorConnectionsListItem.tsx | 0 .../{ => Editor}/IntegrationEditorForm.tsx | 2 +- .../{ => Editor}/IntegrationEditorLayout.css | 0 .../{ => Editor}/IntegrationEditorLayout.tsx | 2 +- .../IntegrationEditorNothingToConfigure.tsx | 2 +- .../IntegrationEditorStepsAdderHeader.tsx | 0 .../{ => Editor}/IntegrationEditorStepsList.css | 0 .../{ => Editor}/IntegrationEditorStepsList.tsx | 0 .../IntegrationEditorStepsListItem.tsx | 2 +- .../{ => Editor}/IntegrationEditorWizard.css | 0 .../{ => Editor}/IntegrationEditorWizard.tsx | 2 +- .../endpoint/DescribeDataShapeForm.tsx | 0 .../{editor => Editor}/endpoint/index.ts | 0 .../packages/ui/src/Integration/Editor/index.ts | 13 +++++++++++++ .../ruleFilter/RuleFilterCard.tsx | 0 .../{editor => Editor}/ruleFilter/index.ts | 0 .../shared/PageSectionLoader.tsx | 0 .../{editor => Editor}/shared/index.ts | 0 .../template/TemplateStepCard.tsx | 0 .../template/TemplateStepTemplateEditor.tsx | 0 .../template/TemplateStepTypeSelector.tsx | 0 .../{editor => Editor}/template/index.ts | 0 .../packages/ui/src/Integration/editor/index.ts | 13 +++++++++++-- app/ui-react/packages/ui/src/Integration/index.ts | 15 +++------------ 26 files changed, 33 insertions(+), 20 deletions(-) rename app/ui-react/packages/ui/src/Integration/{ => Editor}/IntegrationEditorActionsListItem.tsx (100%) rename app/ui-react/packages/ui/src/Integration/{ => Editor}/IntegrationEditorChooseAction.tsx (89%) rename app/ui-react/packages/ui/src/Integration/{ => Editor}/IntegrationEditorConnectionsListItem.tsx (100%) rename app/ui-react/packages/ui/src/Integration/{ => Editor}/IntegrationEditorForm.tsx (97%) rename app/ui-react/packages/ui/src/Integration/{ => Editor}/IntegrationEditorLayout.css (100%) rename app/ui-react/packages/ui/src/Integration/{ => Editor}/IntegrationEditorLayout.tsx (98%) rename app/ui-react/packages/ui/src/Integration/{ => Editor}/IntegrationEditorNothingToConfigure.tsx (96%) rename app/ui-react/packages/ui/src/Integration/{ => Editor}/IntegrationEditorStepsAdderHeader.tsx (100%) rename app/ui-react/packages/ui/src/Integration/{ => Editor}/IntegrationEditorStepsList.css (100%) rename app/ui-react/packages/ui/src/Integration/{ => Editor}/IntegrationEditorStepsList.tsx (100%) rename app/ui-react/packages/ui/src/Integration/{ => Editor}/IntegrationEditorStepsListItem.tsx (98%) rename app/ui-react/packages/ui/src/Integration/{ => Editor}/IntegrationEditorWizard.css (100%) rename app/ui-react/packages/ui/src/Integration/{ => Editor}/IntegrationEditorWizard.tsx (98%) rename app/ui-react/packages/ui/src/Integration/{editor => Editor}/endpoint/DescribeDataShapeForm.tsx (100%) rename app/ui-react/packages/ui/src/Integration/{editor => Editor}/endpoint/index.ts (100%) create mode 100644 app/ui-react/packages/ui/src/Integration/Editor/index.ts rename app/ui-react/packages/ui/src/Integration/{editor => Editor}/ruleFilter/RuleFilterCard.tsx (100%) rename app/ui-react/packages/ui/src/Integration/{editor => Editor}/ruleFilter/index.ts (100%) rename app/ui-react/packages/ui/src/Integration/{editor => Editor}/shared/PageSectionLoader.tsx (100%) rename app/ui-react/packages/ui/src/Integration/{editor => Editor}/shared/index.ts (100%) rename app/ui-react/packages/ui/src/Integration/{editor => Editor}/template/TemplateStepCard.tsx (100%) rename app/ui-react/packages/ui/src/Integration/{editor => Editor}/template/TemplateStepTemplateEditor.tsx (100%) rename app/ui-react/packages/ui/src/Integration/{editor => Editor}/template/TemplateStepTypeSelector.tsx (100%) rename app/ui-react/packages/ui/src/Integration/{editor => Editor}/template/index.ts (100%) diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationEditorActionsListItem.tsx b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorActionsListItem.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/IntegrationEditorActionsListItem.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorActionsListItem.tsx diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationEditorChooseAction.tsx b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorChooseAction.tsx similarity index 89% rename from app/ui-react/packages/ui/src/Integration/IntegrationEditorChooseAction.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorChooseAction.tsx index 2c4f9ef5b40..0835e767956 100644 --- a/app/ui-react/packages/ui/src/Integration/IntegrationEditorChooseAction.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorChooseAction.tsx @@ -1,6 +1,6 @@ import { ListView } from 'patternfly-react'; import * as React from 'react'; -import { PageSection } from '../Layout'; +import { PageSection } from '../../Layout'; /** * A component to render a list of actions, to be used in the integration diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationEditorConnectionsListItem.tsx b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorConnectionsListItem.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/IntegrationEditorConnectionsListItem.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorConnectionsListItem.tsx diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationEditorForm.tsx b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorForm.tsx similarity index 97% rename from app/ui-react/packages/ui/src/Integration/IntegrationEditorForm.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorForm.tsx index 42605be0ee5..17042e7951e 100644 --- a/app/ui-react/packages/ui/src/Integration/IntegrationEditorForm.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorForm.tsx @@ -1,7 +1,7 @@ import * as H from '@syndesis/history'; import { Alert } from 'patternfly-react'; import * as React from 'react'; -import { ButtonLink, Container, PageSection } from '../Layout'; +import { ButtonLink, Container, PageSection } from '../../Layout'; export interface IIntegrationEditorFormProps { /** diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationEditorLayout.css b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorLayout.css similarity index 100% rename from app/ui-react/packages/ui/src/Integration/IntegrationEditorLayout.css rename to app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorLayout.css diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationEditorLayout.tsx b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorLayout.tsx similarity index 98% rename from app/ui-react/packages/ui/src/Integration/IntegrationEditorLayout.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorLayout.tsx index 3c86ff893d9..c0eb37cf440 100644 --- a/app/ui-react/packages/ui/src/Integration/IntegrationEditorLayout.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorLayout.tsx @@ -10,7 +10,7 @@ import { } from '@patternfly/react-core'; import * as H from '@syndesis/history'; import * as React from 'react'; -import { ButtonLink, Loader, PageSection } from '../Layout'; +import { ButtonLink, Loader, PageSection } from '../../Layout'; import './IntegrationEditorLayout.css'; /** diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationEditorNothingToConfigure.tsx b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorNothingToConfigure.tsx similarity index 96% rename from app/ui-react/packages/ui/src/Integration/IntegrationEditorNothingToConfigure.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorNothingToConfigure.tsx index 9a02e00dd5d..c985728f4a6 100644 --- a/app/ui-react/packages/ui/src/Integration/IntegrationEditorNothingToConfigure.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorNothingToConfigure.tsx @@ -1,7 +1,7 @@ import { Text } from '@patternfly/react-core'; import * as H from '@syndesis/history'; import * as React from 'react'; -import { ButtonLink, Container, PageSection } from '../Layout'; +import { ButtonLink, Container, PageSection } from '../../Layout'; export interface IIntegrationEditorNothingToConfigureProps { /** diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationEditorStepsAdderHeader.tsx b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorStepsAdderHeader.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/IntegrationEditorStepsAdderHeader.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorStepsAdderHeader.tsx diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationEditorStepsList.css b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorStepsList.css similarity index 100% rename from app/ui-react/packages/ui/src/Integration/IntegrationEditorStepsList.css rename to app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorStepsList.css diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationEditorStepsList.tsx b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorStepsList.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/IntegrationEditorStepsList.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorStepsList.tsx diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationEditorStepsListItem.tsx b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorStepsListItem.tsx similarity index 98% rename from app/ui-react/packages/ui/src/Integration/IntegrationEditorStepsListItem.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorStepsListItem.tsx index a3caadfb580..ef2353e3dd5 100644 --- a/app/ui-react/packages/ui/src/Integration/IntegrationEditorStepsListItem.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorStepsListItem.tsx @@ -1,6 +1,6 @@ import { ListView, Overlay, Popover } from 'patternfly-react'; import * as React from 'react'; -import { ButtonLink } from '../Layout'; +import { ButtonLink } from '../../Layout'; export interface IIntegrationEditorStepsListItemProps { stepName: string; diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationEditorWizard.css b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorWizard.css similarity index 100% rename from app/ui-react/packages/ui/src/Integration/IntegrationEditorWizard.css rename to app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorWizard.css diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationEditorWizard.tsx b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorWizard.tsx similarity index 98% rename from app/ui-react/packages/ui/src/Integration/IntegrationEditorWizard.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorWizard.tsx index 8a7a2b37e99..5080188ccf3 100644 --- a/app/ui-react/packages/ui/src/Integration/IntegrationEditorWizard.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorWizard.tsx @@ -3,7 +3,7 @@ import * as H from '@syndesis/history'; import classnames from 'classnames'; import * as React from 'react'; -import { ButtonLink, Loader } from '../Layout'; +import { ButtonLink, Loader } from '../../Layout'; import './IntegrationEditorWizard.css'; /** diff --git a/app/ui-react/packages/ui/src/Integration/editor/endpoint/DescribeDataShapeForm.tsx b/app/ui-react/packages/ui/src/Integration/Editor/endpoint/DescribeDataShapeForm.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/editor/endpoint/DescribeDataShapeForm.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/endpoint/DescribeDataShapeForm.tsx diff --git a/app/ui-react/packages/ui/src/Integration/editor/endpoint/index.ts b/app/ui-react/packages/ui/src/Integration/Editor/endpoint/index.ts similarity index 100% rename from app/ui-react/packages/ui/src/Integration/editor/endpoint/index.ts rename to app/ui-react/packages/ui/src/Integration/Editor/endpoint/index.ts diff --git a/app/ui-react/packages/ui/src/Integration/Editor/index.ts b/app/ui-react/packages/ui/src/Integration/Editor/index.ts new file mode 100644 index 00000000000..ee3c00b760f --- /dev/null +++ b/app/ui-react/packages/ui/src/Integration/Editor/index.ts @@ -0,0 +1,13 @@ +export * from './shared'; +export * from './template'; +export * from './endpoint'; +export * from './IntegrationEditorActionsListItem'; +export * from './IntegrationEditorChooseAction'; +export * from './IntegrationEditorConnectionsListItem'; +export * from './IntegrationEditorForm'; +export * from './IntegrationEditorLayout'; +export * from './IntegrationEditorNothingToConfigure'; +export * from './IntegrationEditorStepsAdderHeader'; +export * from './IntegrationEditorStepsList'; +export * from './IntegrationEditorStepsListItem'; +export * from './IntegrationEditorWizard'; diff --git a/app/ui-react/packages/ui/src/Integration/editor/ruleFilter/RuleFilterCard.tsx b/app/ui-react/packages/ui/src/Integration/Editor/ruleFilter/RuleFilterCard.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/editor/ruleFilter/RuleFilterCard.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/ruleFilter/RuleFilterCard.tsx diff --git a/app/ui-react/packages/ui/src/Integration/editor/ruleFilter/index.ts b/app/ui-react/packages/ui/src/Integration/Editor/ruleFilter/index.ts similarity index 100% rename from app/ui-react/packages/ui/src/Integration/editor/ruleFilter/index.ts rename to app/ui-react/packages/ui/src/Integration/Editor/ruleFilter/index.ts diff --git a/app/ui-react/packages/ui/src/Integration/editor/shared/PageSectionLoader.tsx b/app/ui-react/packages/ui/src/Integration/Editor/shared/PageSectionLoader.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/editor/shared/PageSectionLoader.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/shared/PageSectionLoader.tsx diff --git a/app/ui-react/packages/ui/src/Integration/editor/shared/index.ts b/app/ui-react/packages/ui/src/Integration/Editor/shared/index.ts similarity index 100% rename from app/ui-react/packages/ui/src/Integration/editor/shared/index.ts rename to app/ui-react/packages/ui/src/Integration/Editor/shared/index.ts diff --git a/app/ui-react/packages/ui/src/Integration/editor/template/TemplateStepCard.tsx b/app/ui-react/packages/ui/src/Integration/Editor/template/TemplateStepCard.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/editor/template/TemplateStepCard.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/template/TemplateStepCard.tsx diff --git a/app/ui-react/packages/ui/src/Integration/editor/template/TemplateStepTemplateEditor.tsx b/app/ui-react/packages/ui/src/Integration/Editor/template/TemplateStepTemplateEditor.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/editor/template/TemplateStepTemplateEditor.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/template/TemplateStepTemplateEditor.tsx diff --git a/app/ui-react/packages/ui/src/Integration/editor/template/TemplateStepTypeSelector.tsx b/app/ui-react/packages/ui/src/Integration/Editor/template/TemplateStepTypeSelector.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/editor/template/TemplateStepTypeSelector.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/template/TemplateStepTypeSelector.tsx diff --git a/app/ui-react/packages/ui/src/Integration/editor/template/index.ts b/app/ui-react/packages/ui/src/Integration/Editor/template/index.ts similarity index 100% rename from app/ui-react/packages/ui/src/Integration/editor/template/index.ts rename to app/ui-react/packages/ui/src/Integration/Editor/template/index.ts diff --git a/app/ui-react/packages/ui/src/Integration/editor/index.ts b/app/ui-react/packages/ui/src/Integration/editor/index.ts index 53fa612e98e..ee3c00b760f 100644 --- a/app/ui-react/packages/ui/src/Integration/editor/index.ts +++ b/app/ui-react/packages/ui/src/Integration/editor/index.ts @@ -1,4 +1,13 @@ -export * from './endpoint'; -export * from './ruleFilter'; export * from './shared'; export * from './template'; +export * from './endpoint'; +export * from './IntegrationEditorActionsListItem'; +export * from './IntegrationEditorChooseAction'; +export * from './IntegrationEditorConnectionsListItem'; +export * from './IntegrationEditorForm'; +export * from './IntegrationEditorLayout'; +export * from './IntegrationEditorNothingToConfigure'; +export * from './IntegrationEditorStepsAdderHeader'; +export * from './IntegrationEditorStepsList'; +export * from './IntegrationEditorStepsListItem'; +export * from './IntegrationEditorWizard'; diff --git a/app/ui-react/packages/ui/src/Integration/index.ts b/app/ui-react/packages/ui/src/Integration/index.ts index 80ac9b29817..7855aeccf11 100644 --- a/app/ui-react/packages/ui/src/Integration/index.ts +++ b/app/ui-react/packages/ui/src/Integration/index.ts @@ -1,18 +1,9 @@ -export * from './editor'; +export * from './Activity'; export * from './CiCd'; -export * from './Import'; export * from './Details'; -export * from './Activity'; +export * from './Editor'; +export * from './Import'; export * from './Metrics'; -export * from './IntegrationEditorActionsListItem'; -export * from './IntegrationEditorChooseAction'; -export * from './IntegrationEditorConnectionsListItem'; -export * from './IntegrationEditorForm'; -export * from './IntegrationEditorLayout'; -export * from './IntegrationEditorNothingToConfigure'; -export * from './IntegrationEditorStepsList'; -export * from './IntegrationEditorStepsListItem'; -export * from './IntegrationEditorWizard'; export * from './IntegrationFlowAddStep'; export * from './IntegrationFlowStep'; export * from './IntegrationFlowStepDetails'; From a1fd30dd36a3a96ac68027cfef6ddf3aded24344 Mon Sep 17 00:00:00 2001 From: kahboom Date: Wed, 22 May 2019 12:52:54 +0100 Subject: [PATCH 15/40] Rename to SpecificationPage for clarity --- .../modules/integrations/components/editor/EditorApp.tsx | 4 ++-- .../integrations/components/editor/EditorRoutes.tsx | 4 ++-- .../{UploadPage.tsx => SpecificationPage.tsx} | 8 ++++++-- 3 files changed, 10 insertions(+), 6 deletions(-) rename app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/{UploadPage.tsx => SpecificationPage.tsx} (95%) 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 index a0d1098897a..935f9c4d05a 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorApp.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorApp.tsx @@ -4,7 +4,7 @@ import { Integration } from '@syndesis/models'; import * as React from 'react'; import { ReviewPage } from './api-provider/EditPage'; import { EditPage } from './api-provider/ReviewPage'; -import { UploadPage } from './api-provider/UploadPage'; +import { SpecificationPage } from './api-provider/SpecificationPage'; import { DataMapperPage } from './dataMapper/DataMapperPage'; import { EditorRoutes } from './EditorRoutes'; import { EditorSidebar } from './EditorSidebar'; @@ -241,7 +241,7 @@ export const EditorApp: React.FunctionComponent = ({ }} apiProvider={{ uploadPath: appStepRoutes.apiProvider.upload, - uploadChildren: , + uploadChildren: , reviewPath: appStepRoutes.apiProvider.review, reviewChildren: , editPath: appStepRoutes.apiProvider.edit, diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx index 6bccf3cb3d3..fe86135f813 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Route, Switch } from 'react-router'; import { ReviewPage } from './api-provider/EditPage'; import { EditPage } from './api-provider/ReviewPage'; -import { UploadPage } from './api-provider/UploadPage'; +import { SpecificationPage } from './api-provider/SpecificationPage'; import { IDataMapperPageProps } from './dataMapper/DataMapperPage'; import { ConfigureActionPage } from './endpoint/ConfigureActionPage'; import { DescribeDataShapePage } from './endpoint/DescribeDataShapePage'; @@ -43,7 +43,7 @@ export const EndpointEditorApp: React.FunctionComponent< export interface IApiProviderAppProps { uploadPath: string; - uploadChildren: React.ReactElement; + uploadChildren: React.ReactElement; reviewPath: string; reviewChildren: React.ReactElement; editPath: string; diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/UploadPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SpecificationPage.tsx similarity index 95% rename from app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/UploadPage.tsx rename to app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SpecificationPage.tsx index ca824bfeac8..bab0c483551 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/UploadPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SpecificationPage.tsx @@ -3,11 +3,15 @@ import { PageSection } from '@syndesis/ui'; import * as React from 'react'; import { PageTitle } from '../../../../../shared'; -export class UploadPage extends React.Component { +/** + * This is the page where you define or edit your API specification. + * At the moment, we are using Apicurio as the API specification editor. + */ +export class SpecificationPage extends React.Component { public render() { return ( - + Date: Wed, 22 May 2019 14:00:08 +0100 Subject: [PATCH 16/40] Add remaining pages, routes, resolvers, mostly as placeholders --- .../integrations/IntegrationCreatorApp.tsx | 2 +- .../integrations/IntegrationEditorApp.tsx | 4 +- .../components/editor/EditorApp.tsx | 26 ++++--- .../components/editor/EditorRoutes.tsx | 68 +++++++++++++------ ...tionPage.tsx => EditSpecificationPage.tsx} | 2 +- .../editor/api-provider/ReviewActionsPage.tsx | 23 +++++++ ...eviewPage.tsx => ReviewOperationsPage.tsx} | 9 ++- .../editor/api-provider/SelectMethodPage.tsx | 23 +++++++ .../{EditPage.tsx => SetInfoPage.tsx} | 7 +- .../components/editor/interfaces.tsx | 8 ++- .../components/editor/makeEditorResolvers.ts | 10 +-- 11 files changed, 137 insertions(+), 45 deletions(-) rename app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/{SpecificationPage.tsx => EditSpecificationPage.tsx} (98%) create mode 100644 app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewActionsPage.tsx rename app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/{ReviewPage.tsx => ReviewOperationsPage.tsx} (61%) create mode 100644 app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SelectMethodPage.tsx rename app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/{EditPage.tsx => SetInfoPage.tsx} (66%) diff --git a/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx index 2aecd2f4054..5867741ab81 100644 --- a/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx @@ -25,7 +25,7 @@ const addStepPage = ( }) } apiProviderHref={(step, p, s) => - resolvers.create.configure.editStep.apiProvider.review() + resolvers.create.configure.editStep.apiProvider.selectMethod() } connectionHref={(step, params, state) => resolvers.create.configure.editStep.connection.configureAction({ diff --git a/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx index 7b249eee069..90f8015413c 100644 --- a/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx @@ -29,7 +29,9 @@ const addStepPage = ( ...s, }) } - apiProviderHref={resolvers.integration.edit.editStep.apiProvider.review} + apiProviderHref={ + resolvers.integration.edit.editStep.apiProvider.selectMethod + } connectionHref={(step, params, state) => resolvers.integration.edit.editStep.connection.configureAction({ actionId: step.action!.id!, 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 index 935f9c4d05a..20b6471e2e3 100644 --- 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,9 +2,11 @@ import * as H from '@syndesis/history'; import { Integration } from '@syndesis/models'; import * as React from 'react'; -import { ReviewPage } from './api-provider/EditPage'; -import { EditPage } from './api-provider/ReviewPage'; -import { SpecificationPage } from './api-provider/SpecificationPage'; +import { EditSpecificationPage } from './api-provider/EditSpecificationPage'; +import { SelectMethodPage } from './api-provider/SelectMethodPage'; +import { SetInfoPage } from './api-provider/SetInfoPage'; +import { ReviewActionsPage } from './api-provider/ReviewActionsPage'; +import { ReviewOperationsPage } from './api-provider/ReviewOperationsPage'; import { DataMapperPage } from './dataMapper/DataMapperPage'; import { EditorRoutes } from './EditorRoutes'; import { EditorSidebar } from './EditorSidebar'; @@ -54,7 +56,7 @@ export const EditorApp: React.FunctionComponent = ({ - appResolvers.apiProvider.upload({ + appResolvers.apiProvider.editSpecification({ step, ...params, ...state, @@ -240,12 +242,16 @@ export const EditorApp: React.FunctionComponent = ({ describeDataChildren: describeDataShapePage, }} apiProvider={{ - uploadPath: appStepRoutes.apiProvider.upload, - uploadChildren: , - reviewPath: appStepRoutes.apiProvider.review, - reviewChildren: , - editPath: appStepRoutes.apiProvider.edit, - editChildren: , + selectMethodPath: appStepRoutes.apiProvider.selectMethod, + selectMethodChildren: , + reviewActionsPath: appStepRoutes.apiProvider.reviewActions, + reviewActionsChildren: , + editSpecificationPath: appStepRoutes.apiProvider.editSpecification, + editSpecificationChildren: , + setInfoPath: appStepRoutes.apiProvider.setInfo, + setInfoChildren: , + reviewOperationsPath: appStepRoutes.apiProvider.reviewOperations, + reviewOperationsChildren: , }} template={{ templatePath: appStepRoutes.template, diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx index fe86135f813..6a36c6632f1 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import { Route, Switch } from 'react-router'; -import { ReviewPage } from './api-provider/EditPage'; -import { EditPage } from './api-provider/ReviewPage'; -import { SpecificationPage } from './api-provider/SpecificationPage'; +import { EditSpecificationPage } from './api-provider/EditSpecificationPage'; +import { SelectMethodPage } from './api-provider/SelectMethodPage'; +import { SetInfoPage } from './api-provider/SetInfoPage'; +import { ReviewActionsPage } from './api-provider/ReviewActionsPage'; +import { ReviewOperationsPage } from './api-provider/ReviewOperationsPage'; import { IDataMapperPageProps } from './dataMapper/DataMapperPage'; import { ConfigureActionPage } from './endpoint/ConfigureActionPage'; import { DescribeDataShapePage } from './endpoint/DescribeDataShapePage'; @@ -42,12 +44,16 @@ export const EndpointEditorApp: React.FunctionComponent< }; export interface IApiProviderAppProps { - uploadPath: string; - uploadChildren: React.ReactElement; - reviewPath: string; - reviewChildren: React.ReactElement; - editPath: string; - editChildren: React.ReactElement; + selectMethodPath: string; + selectMethodChildren: React.ReactElement; + reviewActionsPath: string; + reviewActionsChildren: React.ReactElement; + editSpecificationPath: string; + editSpecificationChildren: React.ReactElement; + setInfoPath: string; + setInfoChildren: React.ReactElement; + reviewOperationsPath: string; + reviewOperationsChildren: React.ReactElement; } export const ApiProviderApp: React.FunctionComponent< IApiProviderAppProps @@ -55,16 +61,30 @@ export const ApiProviderApp: React.FunctionComponent< return ( + + + - ); }; @@ -189,14 +209,20 @@ export const EditorRoutes: React.FunctionComponent = props => { describeDataChildren={props.endpointEditor.describeDataChildren} /> - + diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SpecificationPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/EditSpecificationPage.tsx similarity index 98% rename from app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SpecificationPage.tsx rename to app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/EditSpecificationPage.tsx index bab0c483551..1822559bb01 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SpecificationPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/EditSpecificationPage.tsx @@ -7,7 +7,7 @@ import { PageTitle } from '../../../../../shared'; * This is the page where you define or edit your API specification. * At the moment, we are using Apicurio as the API specification editor. */ -export class SpecificationPage extends React.Component { +export class EditSpecificationPage extends React.Component { public render() { return ( diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewActionsPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewActionsPage.tsx new file mode 100644 index 00000000000..f136d4101ff --- /dev/null +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewActionsPage.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { PageTitle } from '../../../../../shared'; + +/** + * This is the page where a user reviews the actions that have been + * extracted from the API specification previously created or provided + * earlier in the API Provider editor. + */ +export class ReviewActionsPage extends React.Component { + public render() { + return ( + <> + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis + illo, iusto nesciunt nostrum omnis pariatur rerum vero voluptates. + Accusamus aliquid corporis deleniti ea earum ipsa optio, quidem quod + ut! Placeat. +

+ + ); + } +} diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewOperationsPage.tsx similarity index 61% rename from app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewPage.tsx rename to app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewOperationsPage.tsx index ebbdf8e2246..1dfc105cf2f 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewOperationsPage.tsx @@ -1,11 +1,16 @@ import * as React from 'react'; import { PageTitle } from '../../../../../shared'; -export class EditPage extends React.Component { +/** + * This is usually the final step of the API Provider user flow. + * This page shows the operations that have been previously defined + * earlier in the user flow. + */ +export class ReviewOperationsPage extends React.Component { public render() { return ( <> - +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo, iusto nesciunt nostrum omnis pariatur rerum vero voluptates. diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SelectMethodPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SelectMethodPage.tsx new file mode 100644 index 00000000000..43117db2e25 --- /dev/null +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SelectMethodPage.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { PageTitle } from '../../../../../shared'; + +/** + * The very first page of the API Provider editor, where you decide + * if you want to provide an OpenAPI Spec file via drag and drop, or + * if you a URL of an OpenAPI spec + */ +export class SelectMethodPage extends React.Component { + public render() { + return ( + <> + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis + illo, iusto nesciunt nostrum omnis pariatur rerum vero voluptates. + Accusamus aliquid corporis deleniti ea earum ipsa optio, quidem quod + ut! Placeat. +

+ + ); + } +} diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/EditPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SetInfoPage.tsx similarity index 66% rename from app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/EditPage.tsx rename to app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SetInfoPage.tsx index 706babaf438..13a1a4b504d 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/EditPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SetInfoPage.tsx @@ -1,11 +1,14 @@ import * as React from 'react'; import { PageTitle } from '../../../../../shared'; -export class ReviewPage extends React.Component { +/** + * The page where you define basic info such as the name and description of the integration. + */ +export class SetInfoPage extends React.Component { public render() { return ( <> - +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo, iusto nesciunt nostrum omnis pariatur rerum vero voluptates. diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx index fcb857e6924..ef1b0a9d307 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx @@ -211,9 +211,11 @@ export const stepRoutes = { selectStep: '', // if selected step is api provider apiProvider: include('api-provider', { - upload: '', - review: 'review', - edit: 'edit', + selectMethod: '', + reviewActions: 'review-actions', + editSpecification: 'edit-specification', + setInfo: 'set-info', + reviewOperations: 'review-operations', }), // if selected step kind is data mapper dataMapper: 'mapper', diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/makeEditorResolvers.ts b/app/ui-react/syndesis/src/modules/integrations/components/editor/makeEditorResolvers.ts index 77b8a10093c..5bf7bde44bf 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/makeEditorResolvers.ts +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/makeEditorResolvers.ts @@ -191,13 +191,15 @@ export function makeEditorResolvers(esr: typeof stepRoutes) { >(esr.connection.describeData, configureDescribeDataShapeMapper), }, apiProvider: { - upload: makeResolver< + editSpecification: makeResolver< IEditorConfigureStep, IConfigureStepRouteParams, IConfigureStepRouteState - >(esr.apiProvider.upload, configureConfigureStepMapper), - review: makeResolverNoParams('todo review'), - edit: makeResolverNoParams('todo edit'), + >(esr.apiProvider.editSpecification, configureConfigureStepMapper), + selectMethod: makeResolverNoParams('todo select method'), + reviewActions: makeResolverNoParams('todo review actions'), + setInfo: makeResolverNoParams('todo set info'), + reviewOperations: makeResolverNoParams('todo review operations'), }, basicFilter: makeResolver< IEditorConfigureStep, From 312941db1092f99eed0839044e019a79530471b7 Mon Sep 17 00:00:00 2001 From: kahboom Date: Wed, 22 May 2019 14:02:47 +0100 Subject: [PATCH 17/40] Lint fixes --- .../src/modules/integrations/components/editor/EditorApp.tsx | 4 ++-- .../modules/integrations/components/editor/EditorRoutes.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) 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 index 20b6471e2e3..3f68acf8eb4 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorApp.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorApp.tsx @@ -3,10 +3,10 @@ import * as H from '@syndesis/history'; import { Integration } from '@syndesis/models'; import * as React from 'react'; import { EditSpecificationPage } from './api-provider/EditSpecificationPage'; -import { SelectMethodPage } from './api-provider/SelectMethodPage'; -import { SetInfoPage } from './api-provider/SetInfoPage'; import { ReviewActionsPage } from './api-provider/ReviewActionsPage'; import { ReviewOperationsPage } from './api-provider/ReviewOperationsPage'; +import { SelectMethodPage } from './api-provider/SelectMethodPage'; +import { SetInfoPage } from './api-provider/SetInfoPage'; import { DataMapperPage } from './dataMapper/DataMapperPage'; import { EditorRoutes } from './EditorRoutes'; import { EditorSidebar } from './EditorSidebar'; diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx index 6a36c6632f1..d7d8c94e0be 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { Route, Switch } from 'react-router'; import { EditSpecificationPage } from './api-provider/EditSpecificationPage'; -import { SelectMethodPage } from './api-provider/SelectMethodPage'; -import { SetInfoPage } from './api-provider/SetInfoPage'; import { ReviewActionsPage } from './api-provider/ReviewActionsPage'; import { ReviewOperationsPage } from './api-provider/ReviewOperationsPage'; +import { SelectMethodPage } from './api-provider/SelectMethodPage'; +import { SetInfoPage } from './api-provider/SetInfoPage'; import { IDataMapperPageProps } from './dataMapper/DataMapperPage'; import { ConfigureActionPage } from './endpoint/ConfigureActionPage'; import { DescribeDataShapePage } from './endpoint/DescribeDataShapePage'; From f95025a08e3eb9f833d5b0d4271eb52188365a46 Mon Sep 17 00:00:00 2001 From: kahboom Date: Wed, 22 May 2019 14:30:22 +0100 Subject: [PATCH 18/40] Set up UI components --- .../ApiProviderEditSpecification.tsx | 16 ++++ .../api-provider/ApiProviderReviewActions.tsx | 16 ++++ .../ApiProviderReviewOperations.tsx | 16 ++++ .../api-provider/ApiProviderSelectMethod.tsx | 16 ++++ .../api-provider/ApiProviderSetInfo.tsx | 16 ++++ .../api-provider/ApiProviderUploader.tsx | 93 +++++++++++++++++++ .../Integration/Editor/api-provider/index.ts | 6 ++ 7 files changed, 179 insertions(+) create mode 100644 app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderEditSpecification.tsx create mode 100644 app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewActions.tsx create mode 100644 app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewOperations.tsx create mode 100644 app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSelectMethod.tsx create mode 100644 app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx create mode 100644 app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderUploader.tsx create mode 100644 app/ui-react/packages/ui/src/Integration/Editor/api-provider/index.ts diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderEditSpecification.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderEditSpecification.tsx new file mode 100644 index 00000000000..15ccefe066f --- /dev/null +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderEditSpecification.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; + +export interface IApiProviderEditSpecificationProps { + /** + * The title + */ + i18nTitle: string; +} + +export class ApiProviderEditSpecification extends React.Component< + IApiProviderEditSpecificationProps +> { + public render() { + return <>; + } +} diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewActions.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewActions.tsx new file mode 100644 index 00000000000..4ebb752f936 --- /dev/null +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewActions.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; + +export interface IApiProviderReviewActionsProps { + /** + * The title + */ + i18nTitle: string; +} + +export class ApiProviderReviewActions extends React.Component< + IApiProviderReviewActionsProps +> { + public render() { + return <>; + } +} diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewOperations.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewOperations.tsx new file mode 100644 index 00000000000..81804d36458 --- /dev/null +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewOperations.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; + +export interface IApiProviderReviewOperationsProps { + /** + * The title + */ + i18nTitle: string; +} + +export class ApiProviderReviewOperations extends React.Component< + IApiProviderReviewOperationsProps +> { + public render() { + return <>; + } +} diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSelectMethod.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSelectMethod.tsx new file mode 100644 index 00000000000..5ed8a21a7c4 --- /dev/null +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSelectMethod.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; + +export interface IApiProviderSelectMethodProps { + /** + * The title + */ + i18nTitle: string; +} + +export class ApiProviderSelectMethod extends React.Component< + IApiProviderSelectMethodProps +> { + public render() { + return <>; + } +} diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx new file mode 100644 index 00000000000..4a7d59bc2ba --- /dev/null +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; + +export interface IApiProviderSetInfoProps { + /** + * The title + */ + i18nTitle: string; +} + +export class ApiProviderSetInfo extends React.Component< + IApiProviderSetInfoProps +> { + public render() { + return <>; + } +} diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderUploader.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderUploader.tsx new file mode 100644 index 00000000000..688a8bdfe32 --- /dev/null +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderUploader.tsx @@ -0,0 +1,93 @@ +import { Card } from 'patternfly-react'; +import * as React from 'react'; +import { DndFileChooser } from '../../../Shared'; + +export interface IApiProviderUploaderProps { + /** + * `true` if the dropzone should be disabled. + */ + dndDisabled: boolean; + + /** + * The localized text that appears below the selected file information at the bottom of the drop area. This + * message should identify the accepted file extension. + */ + i18nDndHelpMessage: string; + + /** + * The localized text (may include HTML tags) that appears above the selected file information at the + * top of the drop area. This message should describe how the DnD works. + */ + i18nDndInstructions: string; + + /** + * The localized text that appears when no file has been selected. + */ + i18nDndNoFileSelectedMessage: string; + + /** + * The localized text for the label that appears before the selected file information. + */ + i18nDndSelectedFileLabel: string; + + /** + * A general, localized message for when a file upload failed. This message will be shown + * along with an error icon and appears next to the selected file message. If this property + * is set then `i18nDndUploadSuccessMessage` should not be set. + */ + i18nDndUploadFailedMessage?: string; + + /** + * A general, localized message for when a file upload was successful. This message will be shown + * along with an OK icon and appear next to the selected file message. If this property + * is set then `i18nDndUploadFailedMessage` should not be set. + */ + i18nDndUploadSuccessMessage?: string; + + /** + * The title + */ + i18nTitle: string; + + /** + * Callback for when one or more file uploads have been accepted. Caller should handler processing of the files. + */ + onDndUploadAccepted(files: File[]): void; + + /** + * The localized text (may include HTML tags) that appears when the file upload fails. + */ + onDndUploadRejected(fileName: string): string; +} + +export class ApiProviderUploader extends React.Component< + IApiProviderUploaderProps +> { + public render() { + return ( + /** + * TODO: Move drag and drop stuff to its own component, + * keep this is as a list of options: Upload or Use a URL + */ + + + {this.props.i18nTitle} + + + + + + ); + } +} diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/index.ts b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/index.ts new file mode 100644 index 00000000000..b90dfeb1a65 --- /dev/null +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/index.ts @@ -0,0 +1,6 @@ +export * from './ApiProviderEditSpecification'; +export * from './ApiProviderReviewActions'; +export * from './ApiProviderReviewOperations'; +export * from './ApiProviderSelectMethod'; +export * from './ApiProviderSetInfo'; +export * from './ApiProviderUploader'; From 010217301bbe590ad66f6acda15e145809c559eb Mon Sep 17 00:00:00 2001 From: kahboom Date: Wed, 22 May 2019 14:32:43 +0100 Subject: [PATCH 19/40] Move API provider components into separate dir, export --- app/ui-react/packages/ui/src/Integration/Editor/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/app/ui-react/packages/ui/src/Integration/Editor/index.ts b/app/ui-react/packages/ui/src/Integration/Editor/index.ts index ee3c00b760f..1dcc753d505 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/index.ts +++ b/app/ui-react/packages/ui/src/Integration/Editor/index.ts @@ -1,3 +1,4 @@ +export * from './api-provider'; export * from './shared'; export * from './template'; export * from './endpoint'; From 2e1b31ee9b62ef6efe479d589af28ce3ce512409 Mon Sep 17 00:00:00 2001 From: kahboom Date: Wed, 22 May 2019 16:27:27 +0100 Subject: [PATCH 20/40] Placeholder stuff for UI components --- .../ApiProviderEditSpecification.tsx | 4 +- .../api-provider/ApiProviderReviewActions.tsx | 76 ++++++++++++++++- .../ApiProviderReviewOperations.tsx | 2 +- .../api-provider/ApiProviderSelectMethod.tsx | 81 ++++++++++++++++++- .../api-provider/ApiProviderSetInfo.tsx | 2 +- .../components/editor/EditorRoutes.tsx | 4 +- .../api-provider/EditSpecificationPage.tsx | 18 +++-- .../editor/api-provider/ReviewActionsPage.tsx | 6 +- .../api-provider/ReviewOperationsPage.tsx | 6 +- .../editor/api-provider/SelectMethodPage.tsx | 17 ++-- .../editor/api-provider/SetInfoPage.tsx | 6 +- 11 files changed, 190 insertions(+), 32 deletions(-) diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderEditSpecification.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderEditSpecification.tsx index 15ccefe066f..7071f3c6e5f 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderEditSpecification.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderEditSpecification.tsx @@ -4,13 +4,13 @@ export interface IApiProviderEditSpecificationProps { /** * The title */ - i18nTitle: string; + i18nTitle?: string; } export class ApiProviderEditSpecification extends React.Component< IApiProviderEditSpecificationProps > { public render() { - return <>; + return <>{this.props.children}; } } diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewActions.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewActions.tsx index 4ebb752f936..2c876f6ec1f 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewActions.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewActions.tsx @@ -1,16 +1,88 @@ +import { ListView } from 'patternfly-react'; import * as React from 'react'; export interface IApiProviderReviewActionsProps { /** * The title */ - i18nTitle: string; + i18nTitle?: string; } export class ApiProviderReviewActions extends React.Component< IApiProviderReviewActionsProps > { public render() { - return <>; + return ( + + } + leftContent={} + additionalInfo={[ + Item 1, + , + ]} + stacked={false} + > + Expanded Content + + } + heading={ + + This is EVENT One that is with very LONG and should not overflow + and push other elements out of the bounding box. + Feb 23, 2015 12:32 am + + } + actions={

} + description={ + + The following snippet of text is rendered as{' '} + link text. + + } + stacked={false} + /> + } + heading="Stacked Additional Info items" + description={ + + The following snippet of text is rendered as{' '} + link text. + + } + additionalInfo={[ + + 113,735 + Service One + , + + 35% + Service Two + , + ]} + stacked={false} + /> + Only Additional, + Info Items, + ]} + stacked={true} + /> + + ); } } diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewOperations.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewOperations.tsx index 81804d36458..3aef8f717f6 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewOperations.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewOperations.tsx @@ -4,7 +4,7 @@ export interface IApiProviderReviewOperationsProps { /** * The title */ - i18nTitle: string; + i18nTitle?: string; } export class ApiProviderReviewOperations extends React.Component< diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSelectMethod.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSelectMethod.tsx index 5ed8a21a7c4..eb5b6d1e020 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSelectMethod.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSelectMethod.tsx @@ -1,16 +1,93 @@ +import { Text } from '@patternfly/react-core'; +import { ListView } from 'patternfly-react'; import * as React from 'react'; export interface IApiProviderSelectMethodProps { + i18nDescription?: string; /** * The title */ - i18nTitle: string; + i18nTitle?: string; } export class ApiProviderSelectMethod extends React.Component< IApiProviderSelectMethodProps > { public render() { - return <>; + return ( + <> + {this.props.i18nDescription} + + } + leftContent={} + additionalInfo={[ + Item 1, + , + ]} + stacked={false} + > + Expanded Content + + } + heading={ + + This is EVENT One that is with very LONG and should not overflow + and push other elements out of the bounding box. + Feb 23, 2015 12:32 am + + } + actions={
} + description={ + + The following snippet of text is rendered as{' '} + link text. + + } + stacked={false} + /> + } + heading="Stacked Additional Info items" + description={ + + The following snippet of text is rendered as{' '} + link text. + + } + additionalInfo={[ + + 113,735 + Service One + , + + 35% + Service Two + , + ]} + stacked={false} + /> + Only Additional, + Info Items, + ]} + stacked={true} + /> + + + ); } } diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx index 4a7d59bc2ba..c446c992c20 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx @@ -4,7 +4,7 @@ export interface IApiProviderSetInfoProps { /** * The title */ - i18nTitle: string; + i18nTitle?: string; } export class ApiProviderSetInfo extends React.Component< diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx index d7d8c94e0be..6a36c6632f1 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { Route, Switch } from 'react-router'; import { EditSpecificationPage } from './api-provider/EditSpecificationPage'; -import { ReviewActionsPage } from './api-provider/ReviewActionsPage'; -import { ReviewOperationsPage } from './api-provider/ReviewOperationsPage'; import { SelectMethodPage } from './api-provider/SelectMethodPage'; import { SetInfoPage } from './api-provider/SetInfoPage'; +import { ReviewActionsPage } from './api-provider/ReviewActionsPage'; +import { ReviewOperationsPage } from './api-provider/ReviewOperationsPage'; import { IDataMapperPageProps } from './dataMapper/DataMapperPage'; import { ConfigureActionPage } from './endpoint/ConfigureActionPage'; import { DescribeDataShapePage } from './endpoint/DescribeDataShapePage'; diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/EditSpecificationPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/EditSpecificationPage.tsx index 1822559bb01..923c50e96c6 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/EditSpecificationPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/EditSpecificationPage.tsx @@ -1,5 +1,5 @@ import { ApicurioAdapter } from '@syndesis/apicurio-adapter'; -import { PageSection } from '@syndesis/ui'; +import { ApiProviderEditSpecification, PageSection } from '@syndesis/ui'; import * as React from 'react'; import { PageTitle } from '../../../../../shared'; @@ -12,13 +12,15 @@ export class EditSpecificationPage extends React.Component { return ( - console.log(s) - } - /> + + console.log(s) + } + /> + ); } diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewActionsPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewActionsPage.tsx index f136d4101ff..c8ee2de3990 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewActionsPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewActionsPage.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { ApiProviderReviewActions, PageSection } from '@syndesis/ui'; import { PageTitle } from '../../../../../shared'; /** @@ -9,15 +10,16 @@ import { PageTitle } from '../../../../../shared'; export class ReviewActionsPage extends React.Component { public render() { return ( - <> + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo, iusto nesciunt nostrum omnis pariatur rerum vero voluptates. Accusamus aliquid corporis deleniti ea earum ipsa optio, quidem quod ut! Placeat.

- + ); } } diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewOperationsPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewOperationsPage.tsx index 1dfc105cf2f..e27ffa618fe 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewOperationsPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewOperationsPage.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { ApiProviderReviewOperations, PageSection } from '@syndesis/ui'; import { PageTitle } from '../../../../../shared'; /** @@ -9,15 +10,16 @@ import { PageTitle } from '../../../../../shared'; export class ReviewOperationsPage extends React.Component { public render() { return ( - <> + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo, iusto nesciunt nostrum omnis pariatur rerum vero voluptates. Accusamus aliquid corporis deleniti ea earum ipsa optio, quidem quod ut! Placeat.

- + ); } } diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SelectMethodPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SelectMethodPage.tsx index 43117db2e25..95688e0efbc 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SelectMethodPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SelectMethodPage.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { ApiProviderSelectMethod, PageSection } from '@syndesis/ui'; import { PageTitle } from '../../../../../shared'; /** @@ -9,15 +10,15 @@ import { PageTitle } from '../../../../../shared'; export class SelectMethodPage extends React.Component { public render() { return ( - <> + -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis - illo, iusto nesciunt nostrum omnis pariatur rerum vero voluptates. - Accusamus aliquid corporis deleniti ea earum ipsa optio, quidem quod - ut! Placeat. -

- + + ); } } diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SetInfoPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SetInfoPage.tsx index 13a1a4b504d..3c98812500c 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SetInfoPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SetInfoPage.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { ApiProviderSetInfo, PageSection } from '@syndesis/ui'; import { PageTitle } from '../../../../../shared'; /** @@ -7,15 +8,16 @@ import { PageTitle } from '../../../../../shared'; export class SetInfoPage extends React.Component { public render() { return ( - <> + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo, iusto nesciunt nostrum omnis pariatur rerum vero voluptates. Accusamus aliquid corporis deleniti ea earum ipsa optio, quidem quod ut! Placeat.

- + ); } } From a42ae1d456c91f9d5a9c14232203b06438a9e4e2 Mon Sep 17 00:00:00 2001 From: kahboom Date: Wed, 22 May 2019 16:37:49 +0100 Subject: [PATCH 21/40] Minor changes --- .../api-provider/ApiProviderSetInfo.tsx | 83 ++++++++++++++++++- 1 file changed, 82 insertions(+), 1 deletion(-) diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx index c446c992c20..935d28e20b3 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx @@ -1,4 +1,18 @@ import * as React from 'react'; +import { + Grid, + Form, + FormGroup, + Col, + ControlLabel, + FormControl, + HelpBlock, + FieldLevelHelp, + InputGroup, + InputGroupButton, + Button, + CopyUrl, +} from 'patternfly-react'; export interface IApiProviderSetInfoProps { /** @@ -11,6 +25,73 @@ export class ApiProviderSetInfo extends React.Component< IApiProviderSetInfoProps > { public render() { - return <>; + return ( + <> + +
+ + + Name + + + + Enter your name + + + + + Address + + + + Enter your address + + + + + City + + + + Enter your city + + + + + Email + + + + Enter a valid email address + + + + + Phone + } close={true} /> + + + + Enter a valid phone number + + + + + My meeting URL + + + + + + + + + Enter a valid URL + + +
+ + + ); } } From 7e4c75f3d6d7a4d225c2ed02be73dece45e01201 Mon Sep 17 00:00:00 2001 From: kahboom Date: Wed, 22 May 2019 16:40:45 +0100 Subject: [PATCH 22/40] Minor changes --- .../api-provider/ApiProviderSetInfo.tsx | 83 +------------------ 1 file changed, 1 insertion(+), 82 deletions(-) diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx index 935d28e20b3..c446c992c20 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx @@ -1,18 +1,4 @@ import * as React from 'react'; -import { - Grid, - Form, - FormGroup, - Col, - ControlLabel, - FormControl, - HelpBlock, - FieldLevelHelp, - InputGroup, - InputGroupButton, - Button, - CopyUrl, -} from 'patternfly-react'; export interface IApiProviderSetInfoProps { /** @@ -25,73 +11,6 @@ export class ApiProviderSetInfo extends React.Component< IApiProviderSetInfoProps > { public render() { - return ( - <> - -
- - - Name - - - - Enter your name - - - - - Address - - - - Enter your address - - - - - City - - - - Enter your city - - - - - Email - - - - Enter a valid email address - - - - - Phone - } close={true} /> - - - - Enter a valid phone number - - - - - My meeting URL - - - - - - - - - Enter a valid URL - - -
- - - ); + return <>; } } From 12088690e346baaa4b52c863ab968a40d7a8b002 Mon Sep 17 00:00:00 2001 From: kahboom Date: Wed, 22 May 2019 16:50:50 +0100 Subject: [PATCH 23/40] Lint fix --- .../ApiProviderEditSpecification.tsx | 7 +- .../api-provider/ApiProviderReviewActions.tsx | 141 +++++++++--------- .../ApiProviderReviewOperations.tsx | 2 +- .../api-provider/ApiProviderSelectMethod.tsx | 9 +- .../api-provider/ApiProviderSetInfo.tsx | 2 +- .../components/editor/EditorRoutes.tsx | 4 +- .../editor/api-provider/ReviewActionsPage.tsx | 2 +- .../api-provider/ReviewOperationsPage.tsx | 2 +- .../editor/api-provider/SelectMethodPage.tsx | 2 +- .../editor/api-provider/SetInfoPage.tsx | 2 +- 10 files changed, 91 insertions(+), 82 deletions(-) diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderEditSpecification.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderEditSpecification.tsx index 7071f3c6e5f..7d7af075191 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderEditSpecification.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderEditSpecification.tsx @@ -11,6 +11,11 @@ export class ApiProviderEditSpecification extends React.Component< IApiProviderEditSpecificationProps > { public render() { - return <>{this.props.children}; + return ( + <> +
{this.props.i18nTitle}
+
{this.props.children}
+ + ); } } diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewActions.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewActions.tsx index 2c876f6ec1f..6c8eb335dc8 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewActions.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewActions.tsx @@ -13,76 +13,79 @@ export class ApiProviderReviewActions extends React.Component< > { public render() { return ( - - } - leftContent={} - additionalInfo={[ - Item 1, - , - ]} - stacked={false} + <> +
{this.props.i18nTitle}
+ - Expanded Content - - } - heading={ - - This is EVENT One that is with very LONG and should not overflow - and push other elements out of the bounding box. - Feb 23, 2015 12:32 am - - } - actions={
} - description={ - - The following snippet of text is rendered as{' '} - link text. - - } - stacked={false} - /> - } - heading="Stacked Additional Info items" - description={ - - The following snippet of text is rendered as{' '} - link text. - - } - additionalInfo={[ - - 113,735 - Service One - , - - 35% - Service Two - , - ]} - stacked={false} - /> - Only Additional, - Info Items, - ]} - stacked={true} - /> - + } + leftContent={} + additionalInfo={[ + Item 1, + , + ]} + stacked={false} + > + Expanded Content + + } + heading={ + + This is EVENT One that is with very LONG and should not overflow + and push other elements out of the bounding box. + Feb 23, 2015 12:32 am + + } + actions={
} + description={ + + The following snippet of text is rendered as{' '} + link text. + + } + stacked={false} + /> + } + heading="Stacked Additional Info items" + description={ + + The following snippet of text is rendered as{' '} + link text. + + } + additionalInfo={[ + + 113,735 + Service One + , + + 35% + Service Two + , + ]} + stacked={false} + /> + Only Additional, + Info Items, + ]} + stacked={true} + /> + + ); } } diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewOperations.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewOperations.tsx index 3aef8f717f6..d808c3d60b1 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewOperations.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewOperations.tsx @@ -11,6 +11,6 @@ export class ApiProviderReviewOperations extends React.Component< IApiProviderReviewOperationsProps > { public render() { - return <>; + return <>{this.props.i18nTitle}; } } diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSelectMethod.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSelectMethod.tsx index eb5b6d1e020..f944946240c 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSelectMethod.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSelectMethod.tsx @@ -16,6 +16,7 @@ export class ApiProviderSelectMethod extends React.Component< public render() { return ( <> + {this.props.i18nTitle} {this.props.i18nDescription} } additionalInfo={[ - + 113,735 Service One , - + 35% Service Two , @@ -81,8 +82,8 @@ export class ApiProviderSelectMethod extends React.Component< Only Additional, - Info Items, + Only Additional, + Info Items, ]} stacked={true} /> diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx index c446c992c20..1171f79e15a 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx @@ -11,6 +11,6 @@ export class ApiProviderSetInfo extends React.Component< IApiProviderSetInfoProps > { public render() { - return <>; + return <>{this.props.i18nTitle}; } } diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx index 6a36c6632f1..d7d8c94e0be 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { Route, Switch } from 'react-router'; import { EditSpecificationPage } from './api-provider/EditSpecificationPage'; -import { SelectMethodPage } from './api-provider/SelectMethodPage'; -import { SetInfoPage } from './api-provider/SetInfoPage'; import { ReviewActionsPage } from './api-provider/ReviewActionsPage'; import { ReviewOperationsPage } from './api-provider/ReviewOperationsPage'; +import { SelectMethodPage } from './api-provider/SelectMethodPage'; +import { SetInfoPage } from './api-provider/SetInfoPage'; import { IDataMapperPageProps } from './dataMapper/DataMapperPage'; import { ConfigureActionPage } from './endpoint/ConfigureActionPage'; import { DescribeDataShapePage } from './endpoint/DescribeDataShapePage'; diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewActionsPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewActionsPage.tsx index c8ee2de3990..9c503cbc492 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewActionsPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewActionsPage.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; import { ApiProviderReviewActions, PageSection } from '@syndesis/ui'; +import * as React from 'react'; import { PageTitle } from '../../../../../shared'; /** diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewOperationsPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewOperationsPage.tsx index e27ffa618fe..28ee1e335e2 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewOperationsPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewOperationsPage.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; import { ApiProviderReviewOperations, PageSection } from '@syndesis/ui'; +import * as React from 'react'; import { PageTitle } from '../../../../../shared'; /** diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SelectMethodPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SelectMethodPage.tsx index 95688e0efbc..50192314823 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SelectMethodPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SelectMethodPage.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; import { ApiProviderSelectMethod, PageSection } from '@syndesis/ui'; +import * as React from 'react'; import { PageTitle } from '../../../../../shared'; /** diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SetInfoPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SetInfoPage.tsx index 3c98812500c..972dde2c6b9 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SetInfoPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SetInfoPage.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; import { ApiProviderSetInfo, PageSection } from '@syndesis/ui'; +import * as React from 'react'; import { PageTitle } from '../../../../../shared'; /** From bb523b8795dcf728add885f8b73ace35b76cd233 Mon Sep 17 00:00:00 2001 From: kahboom Date: Thu, 23 May 2019 10:07:05 +0100 Subject: [PATCH 24/40] Switch to camelcase for naming module and UI components --- app/ui-react/packages/api/src/WithConnections.tsx | 2 +- app/ui-react/packages/api/src/constants.ts | 2 +- .../ApiProviderEditSpecification.tsx | 0 .../ApiProviderReviewActions.tsx | 0 .../ApiProviderReviewOperations.tsx | 0 .../ApiProviderSelectMethod.tsx | 0 .../ApiProviderSetInfo.tsx | 0 .../ApiProviderUploader.tsx | 0 .../Editor/{api-provider => apiProvider}/index.ts | 0 .../packages/ui/src/Integration/Editor/index.ts | 2 +- .../integrations/components/editor/EditorApp.tsx | 10 +++++----- .../integrations/components/editor/EditorRoutes.tsx | 10 +++++----- .../EditSpecificationPage.tsx | 0 .../ReviewActionsPage.tsx | 0 .../ReviewOperationsPage.tsx | 0 .../{api-provider => apiProvider}/SelectMethodPage.tsx | 0 .../{api-provider => apiProvider}/SetInfoPage.tsx | 0 .../integrations/components/editor/interfaces.tsx | 4 ++-- .../modules/integrations/components/editor/utils.ts | 4 ++-- 19 files changed, 17 insertions(+), 17 deletions(-) rename app/ui-react/packages/ui/src/Integration/Editor/{api-provider => apiProvider}/ApiProviderEditSpecification.tsx (100%) rename app/ui-react/packages/ui/src/Integration/Editor/{api-provider => apiProvider}/ApiProviderReviewActions.tsx (100%) rename app/ui-react/packages/ui/src/Integration/Editor/{api-provider => apiProvider}/ApiProviderReviewOperations.tsx (100%) rename app/ui-react/packages/ui/src/Integration/Editor/{api-provider => apiProvider}/ApiProviderSelectMethod.tsx (100%) rename app/ui-react/packages/ui/src/Integration/Editor/{api-provider => apiProvider}/ApiProviderSetInfo.tsx (100%) rename app/ui-react/packages/ui/src/Integration/Editor/{api-provider => apiProvider}/ApiProviderUploader.tsx (100%) rename app/ui-react/packages/ui/src/Integration/Editor/{api-provider => apiProvider}/index.ts (100%) rename app/ui-react/syndesis/src/modules/integrations/components/editor/{api-provider => apiProvider}/EditSpecificationPage.tsx (100%) rename app/ui-react/syndesis/src/modules/integrations/components/editor/{api-provider => apiProvider}/ReviewActionsPage.tsx (100%) rename app/ui-react/syndesis/src/modules/integrations/components/editor/{api-provider => apiProvider}/ReviewOperationsPage.tsx (100%) rename app/ui-react/syndesis/src/modules/integrations/components/editor/{api-provider => apiProvider}/SelectMethodPage.tsx (100%) rename app/ui-react/syndesis/src/modules/integrations/components/editor/{api-provider => apiProvider}/SetInfoPage.tsx (100%) diff --git a/app/ui-react/packages/api/src/WithConnections.tsx b/app/ui-react/packages/api/src/WithConnections.tsx index a33b67c3ed4..6ef3a7a54c9 100644 --- a/app/ui-react/packages/api/src/WithConnections.tsx +++ b/app/ui-react/packages/api/src/WithConnections.tsx @@ -32,7 +32,7 @@ export function getConnectionsWithToAction(connections: ConnectionOverview[]) { // safety net return true; } - if (connection.connectorId === 'api-provider') { + if (connection.connectorId === 'apiProvider') { // api provider can be used only for From actions return false; } diff --git a/app/ui-react/packages/api/src/constants.ts b/app/ui-react/packages/api/src/constants.ts index 475d65d8cd3..d55aa7db94a 100644 --- a/app/ui-react/packages/api/src/constants.ts +++ b/app/ui-react/packages/api/src/constants.ts @@ -81,5 +81,5 @@ export const SPLIT = 'split'; export const AGGREGATE = 'aggregate'; export const LOG = 'log'; export const TEMPLATE = 'template'; -export const API_PROVIDER = 'api-provider'; +export const API_PROVIDER = 'apiProvider'; export const CONNECTOR = 'connector'; diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderEditSpecification.tsx b/app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderEditSpecification.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderEditSpecification.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderEditSpecification.tsx diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewActions.tsx b/app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderReviewActions.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewActions.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderReviewActions.tsx diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewOperations.tsx b/app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderReviewOperations.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderReviewOperations.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderReviewOperations.tsx diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSelectMethod.tsx b/app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderSelectMethod.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSelectMethod.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderSelectMethod.tsx diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx b/app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderSetInfo.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderSetInfo.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderSetInfo.tsx diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderUploader.tsx b/app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderUploader.tsx similarity index 100% rename from app/ui-react/packages/ui/src/Integration/Editor/api-provider/ApiProviderUploader.tsx rename to app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderUploader.tsx diff --git a/app/ui-react/packages/ui/src/Integration/Editor/api-provider/index.ts b/app/ui-react/packages/ui/src/Integration/Editor/apiProvider/index.ts similarity index 100% rename from app/ui-react/packages/ui/src/Integration/Editor/api-provider/index.ts rename to app/ui-react/packages/ui/src/Integration/Editor/apiProvider/index.ts diff --git a/app/ui-react/packages/ui/src/Integration/Editor/index.ts b/app/ui-react/packages/ui/src/Integration/Editor/index.ts index 1dcc753d505..e2ea90fc860 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/index.ts +++ b/app/ui-react/packages/ui/src/Integration/Editor/index.ts @@ -1,4 +1,4 @@ -export * from './api-provider'; +export * from './apiProvider'; export * from './shared'; export * from './template'; export * from './endpoint'; 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 index 3f68acf8eb4..1824ddcb851 100644 --- 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,11 +2,11 @@ import * as H from '@syndesis/history'; import { Integration } from '@syndesis/models'; import * as React from 'react'; -import { EditSpecificationPage } from './api-provider/EditSpecificationPage'; -import { ReviewActionsPage } from './api-provider/ReviewActionsPage'; -import { ReviewOperationsPage } from './api-provider/ReviewOperationsPage'; -import { SelectMethodPage } from './api-provider/SelectMethodPage'; -import { SetInfoPage } from './api-provider/SetInfoPage'; +import { EditSpecificationPage } from './apiProvider/EditSpecificationPage'; +import { ReviewActionsPage } from './apiProvider/ReviewActionsPage'; +import { ReviewOperationsPage } from './apiProvider/ReviewOperationsPage'; +import { SelectMethodPage } from './apiProvider/SelectMethodPage'; +import { SetInfoPage } from './apiProvider/SetInfoPage'; import { DataMapperPage } from './dataMapper/DataMapperPage'; import { EditorRoutes } from './EditorRoutes'; import { EditorSidebar } from './EditorSidebar'; diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx index d7d8c94e0be..5415c70646b 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorRoutes.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { Route, Switch } from 'react-router'; -import { EditSpecificationPage } from './api-provider/EditSpecificationPage'; -import { ReviewActionsPage } from './api-provider/ReviewActionsPage'; -import { ReviewOperationsPage } from './api-provider/ReviewOperationsPage'; -import { SelectMethodPage } from './api-provider/SelectMethodPage'; -import { SetInfoPage } from './api-provider/SetInfoPage'; +import { EditSpecificationPage } from './apiProvider/EditSpecificationPage'; +import { ReviewActionsPage } from './apiProvider/ReviewActionsPage'; +import { ReviewOperationsPage } from './apiProvider/ReviewOperationsPage'; +import { SelectMethodPage } from './apiProvider/SelectMethodPage'; +import { SetInfoPage } from './apiProvider/SetInfoPage'; import { IDataMapperPageProps } from './dataMapper/DataMapperPage'; import { ConfigureActionPage } from './endpoint/ConfigureActionPage'; import { DescribeDataShapePage } from './endpoint/DescribeDataShapePage'; diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/EditSpecificationPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/apiProvider/EditSpecificationPage.tsx similarity index 100% rename from app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/EditSpecificationPage.tsx rename to app/ui-react/syndesis/src/modules/integrations/components/editor/apiProvider/EditSpecificationPage.tsx diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewActionsPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/apiProvider/ReviewActionsPage.tsx similarity index 100% rename from app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewActionsPage.tsx rename to app/ui-react/syndesis/src/modules/integrations/components/editor/apiProvider/ReviewActionsPage.tsx diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewOperationsPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/apiProvider/ReviewOperationsPage.tsx similarity index 100% rename from app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/ReviewOperationsPage.tsx rename to app/ui-react/syndesis/src/modules/integrations/components/editor/apiProvider/ReviewOperationsPage.tsx diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SelectMethodPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/apiProvider/SelectMethodPage.tsx similarity index 100% rename from app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SelectMethodPage.tsx rename to app/ui-react/syndesis/src/modules/integrations/components/editor/apiProvider/SelectMethodPage.tsx diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SetInfoPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/apiProvider/SetInfoPage.tsx similarity index 100% rename from app/ui-react/syndesis/src/modules/integrations/components/editor/api-provider/SetInfoPage.tsx rename to app/ui-react/syndesis/src/modules/integrations/components/editor/apiProvider/SetInfoPage.tsx diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx index ef1b0a9d307..b9500d50220 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx @@ -192,7 +192,7 @@ export interface IUIStep extends StepKind { board?: ConnectionBulletinBoard; connector?: Connector; icon: string; - uiStepKind: 'api-provider' | StepKind['stepKind']; + uiStepKind: 'apiProvider' | StepKind['stepKind']; title: string; metadata: { [key: string]: any }; inputDataShape?: DataShape; @@ -210,7 +210,7 @@ export const stepRoutes = { // step 1 selectStep: '', // if selected step is api provider - apiProvider: include('api-provider', { + apiProvider: include('apiProvider', { selectMethod: '', reviewActions: 'review-actions', editSpecification: 'edit-specification', diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts b/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts index 2f00e3206b2..d8a30087bb6 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts @@ -43,8 +43,8 @@ type StepKindHrefCallback = ( ) => H.LocationDescriptorObject; export function getStepKind(step: Step): IUIStep['uiStepKind'] { - if (step.connection && step.connection.id === 'api-provider') { - return 'api-provider'; + if (step.connection && step.connection.id === 'apiProvider') { + return 'apiProvider'; } return step.stepKind; } From 31c05b23f9f76c6960c4aae0d8eecd4dc3cae536 Mon Sep 17 00:00:00 2001 From: kahboom Date: Thu, 23 May 2019 12:14:26 +0100 Subject: [PATCH 25/40] Rename Editor to account for case-insensitive os --- .../packages/ui/src/Integration/Editor/index.ts | 1 + .../packages/ui/src/Integration/editor/index.ts | 13 ------------- 2 files changed, 1 insertion(+), 13 deletions(-) delete mode 100644 app/ui-react/packages/ui/src/Integration/editor/index.ts diff --git a/app/ui-react/packages/ui/src/Integration/Editor/index.ts b/app/ui-react/packages/ui/src/Integration/Editor/index.ts index e2ea90fc860..0b05ab339a8 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/index.ts +++ b/app/ui-react/packages/ui/src/Integration/Editor/index.ts @@ -1,4 +1,5 @@ export * from './apiProvider'; +export * from './ruleFilter'; export * from './shared'; export * from './template'; export * from './endpoint'; diff --git a/app/ui-react/packages/ui/src/Integration/editor/index.ts b/app/ui-react/packages/ui/src/Integration/editor/index.ts deleted file mode 100644 index ee3c00b760f..00000000000 --- a/app/ui-react/packages/ui/src/Integration/editor/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -export * from './shared'; -export * from './template'; -export * from './endpoint'; -export * from './IntegrationEditorActionsListItem'; -export * from './IntegrationEditorChooseAction'; -export * from './IntegrationEditorConnectionsListItem'; -export * from './IntegrationEditorForm'; -export * from './IntegrationEditorLayout'; -export * from './IntegrationEditorNothingToConfigure'; -export * from './IntegrationEditorStepsAdderHeader'; -export * from './IntegrationEditorStepsList'; -export * from './IntegrationEditorStepsListItem'; -export * from './IntegrationEditorWizard'; From c99d99ecfc7611a572214444d23705958fb1d860 Mon Sep 17 00:00:00 2001 From: kahboom Date: Thu, 23 May 2019 13:17:46 +0100 Subject: [PATCH 26/40] Use API_PROVIDER const, change back stepKind typo to use hyphenated --- app/ui-react/packages/api/src/WithConnections.tsx | 2 +- app/ui-react/packages/api/src/constants.ts | 2 +- .../Editor/apiProvider/ApiProviderEditSpecification.tsx | 2 +- .../src/modules/integrations/components/editor/interfaces.tsx | 4 ++-- .../src/modules/integrations/components/editor/utils.ts | 4 ++-- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/ui-react/packages/api/src/WithConnections.tsx b/app/ui-react/packages/api/src/WithConnections.tsx index 6ef3a7a54c9..a33b67c3ed4 100644 --- a/app/ui-react/packages/api/src/WithConnections.tsx +++ b/app/ui-react/packages/api/src/WithConnections.tsx @@ -32,7 +32,7 @@ export function getConnectionsWithToAction(connections: ConnectionOverview[]) { // safety net return true; } - if (connection.connectorId === 'apiProvider') { + if (connection.connectorId === 'api-provider') { // api provider can be used only for From actions return false; } diff --git a/app/ui-react/packages/api/src/constants.ts b/app/ui-react/packages/api/src/constants.ts index d55aa7db94a..475d65d8cd3 100644 --- a/app/ui-react/packages/api/src/constants.ts +++ b/app/ui-react/packages/api/src/constants.ts @@ -81,5 +81,5 @@ export const SPLIT = 'split'; export const AGGREGATE = 'aggregate'; export const LOG = 'log'; export const TEMPLATE = 'template'; -export const API_PROVIDER = 'apiProvider'; +export const API_PROVIDER = 'api-provider'; export const CONNECTOR = 'connector'; diff --git a/app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderEditSpecification.tsx b/app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderEditSpecification.tsx index 7d7af075191..91770ddb1e6 100644 --- a/app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderEditSpecification.tsx +++ b/app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderEditSpecification.tsx @@ -14,7 +14,7 @@ export class ApiProviderEditSpecification extends React.Component< return ( <>
{this.props.i18nTitle}
-
{this.props.children}
+ {this.props.children} ); } diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx index b9500d50220..ef1b0a9d307 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.tsx @@ -192,7 +192,7 @@ export interface IUIStep extends StepKind { board?: ConnectionBulletinBoard; connector?: Connector; icon: string; - uiStepKind: 'apiProvider' | StepKind['stepKind']; + uiStepKind: 'api-provider' | StepKind['stepKind']; title: string; metadata: { [key: string]: any }; inputDataShape?: DataShape; @@ -210,7 +210,7 @@ export const stepRoutes = { // step 1 selectStep: '', // if selected step is api provider - apiProvider: include('apiProvider', { + apiProvider: include('api-provider', { selectMethod: '', reviewActions: 'review-actions', editSpecification: 'edit-specification', diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts b/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts index d8a30087bb6..f42d2b79d25 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts @@ -43,8 +43,8 @@ type StepKindHrefCallback = ( ) => H.LocationDescriptorObject; export function getStepKind(step: Step): IUIStep['uiStepKind'] { - if (step.connection && step.connection.id === 'apiProvider') { - return 'apiProvider'; + if (step.connection && step.connection.id === API_PROVIDER) { + return API_PROVIDER; } return step.stepKind; } From b9600520223a9c52f40ee13f89db3f1b9e53492d Mon Sep 17 00:00:00 2001 From: kahboom Date: Mon, 20 May 2019 23:24:13 +0100 Subject: [PATCH 27/40] Conditional delete for integration editor step i18n for data mapping step Use addStepHref also for editing --- .../components/IntegrationEditorStepAdder.tsx | 82 +++++++++++++++---- .../components/editor/AddStepPage.tsx | 14 ++-- .../locales/integrations-translations.en.json | 3 + 3 files changed, 75 insertions(+), 24 deletions(-) diff --git a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx index a3917730981..fe834b623ea 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx @@ -1,4 +1,9 @@ -import { getStepIcon, removeStepFromFlow } from '@syndesis/api'; +import { + getFirstPosition, + getLastPosition, + getStepIcon, + removeStepFromFlow, +} from '@syndesis/api'; import * as H from '@syndesis/history'; import { Integration, Step } from '@syndesis/models'; import { @@ -32,10 +37,11 @@ export interface IIntegrationEditorStepAdderProps { addDataMapperStepHref: (idx: number) => H.LocationDescriptor; /** * a callback to get the `LocationDescriptor` that should be reached when - * clicking the Add Connection button + * clicking the Add Connection button, or when deleting the first or last + * step * @param idx - the zero-based index where a new connection should be added */ - addStepHref: (idx: number) => H.LocationDescriptor; + editAddStepHref: (idx: number) => H.LocationDescriptor; /** * a callback to get the `LocationDescriptor` that should be reached when * clicking the Edit Step button @@ -56,6 +62,8 @@ export interface IIntegrationEditorStepAdderProps { export interface IIntegrationEditorStepAdderState { position: number; showDeleteDialog: boolean; + step?: Step; + stepIdx?: number; } /** @@ -78,6 +86,8 @@ export class IntegrationEditorStepAdder extends React.Component< this.state = { position: 0, showDeleteDialog: false, + step: {}, + stepIdx: 0, }; this.onDelete = this.onDelete.bind(this); @@ -89,14 +99,50 @@ export class IntegrationEditorStepAdder extends React.Component< if (this.state.showDeleteDialog) { this.closeDeleteDialog(); } + + const newInt = removeStepFromFlow( + this.props.integration!, + this.props.flowId!, + this.state.position! + ); + + this.props.deleteAction(newInt); } - public onDelete(idx: any): void { - this.setState({ position: idx, showDeleteDialog: true }); + public onDelete(idx: any, step: Step): void { + console.log('step: ' + JSON.stringify(step)); + // console.log('idx: ' + idx); + // console.log('firstPosition: ' + getFirstPosition(this.props.integration, this.props.flowId)); + // console.log('lastPosition: ' + getLastPosition(this.props.integration, this.props.flowId)); + + if (idx === getFirstPosition(this.props.integration, this.props.flowId)) { + console.log('Is first position'); + } + + if (idx === getLastPosition(this.props.integration, this.props.flowId)) { + console.log('Is last position'); + } + + // Check if it's an API provider step that can't be deleted + if (step.configuredProperties!.stepKind === 'mapper') { + console.log('Data mapper step'); + } + + this.setState({ + position: idx, + showDeleteDialog: true, + step: step, + stepIdx: idx, + }); } public closeDeleteDialog(): void { - this.setState({ position: 0, showDeleteDialog: false }); + this.setState({ + position: 0, + showDeleteDialog: false, + step: {}, + stepIdx: 0, + }); } public render() { @@ -120,12 +166,6 @@ export class IntegrationEditorStepAdder extends React.Component< onCancel={this.closeDeleteDialog} onConfirm={() => { this.handleDeleteConfirm(); - const newInt = removeStepFromFlow( - this.props.integration!, - this.props.flowId!, - this.state.position! - ); - this.props.deleteAction(newInt); }} /> )} @@ -169,9 +209,9 @@ export class IntegrationEditorStepAdder extends React.Component< } to={this.props.addDataMapperStepHref(idx)} > - Add a data mapping step + {t('integrations:editor:addStepDataMapping')} {' '} - before this connection to resolve the difference. + {t('integrations:editor:addStepDataMappingTrail')} ) } @@ -205,9 +245,17 @@ export class IntegrationEditorStepAdder extends React.Component< addStepHref={this.props.addStepHref(idx + 1)} i18nAddStep={t('integrations:editor:addStep')} /> - )} - - ))} + {idx < this.props.steps.length - 1 && ( + + )} + + ); + })} diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx index ae5626d1c58..5264c9026df 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx @@ -74,13 +74,6 @@ export class AddStepPage extends React.Component { { integration } ) } - addStepHref={position => - this.props.getEditAddStepHref( - position, - { flowId }, - { integration } - ) - } configureStepHref={(position: number, step: Step) => getStepHref( step, @@ -89,6 +82,13 @@ export class AddStepPage extends React.Component { this.props ) } + editAddStepHref={position => + this.props.getEditAddStepHref( + position, + { flowId }, + { integration } + ) + } flowId={flowId} integration={integration} deleteAction={deleteAction} diff --git a/app/ui-react/syndesis/src/modules/integrations/locales/integrations-translations.en.json b/app/ui-react/syndesis/src/modules/integrations/locales/integrations-translations.en.json index fd23b97ef57..0d013c78d53 100644 --- a/app/ui-react/syndesis/src/modules/integrations/locales/integrations-translations.en.json +++ b/app/ui-react/syndesis/src/modules/integrations/locales/integrations-translations.en.json @@ -70,11 +70,14 @@ }, "editor": { "addStep": "Add a step", + "addStepDataMapping": "Add a data mapping step", + "addStepDataMappingTrail": " before this connection to resolve the difference.", "addStepDescription": "You can continue adding steps and connections to your integration as well.", "addToIntegration": "Add to Integration", "confirmDeleteStepDialogBody": "Are you sure you want to delete this step from the integration?", "confirmDeleteStepDialogTitle": "Confirm Delete", "dataShape": "Data Shape", + "defineDataTypeMessage": "Define the data type for the previous step to resolve this warning.", "saveOrAddStep": "Save or Add Step" }, "ReplaceDraft": "Replace Draft", From 406666ad197c38b635f9af45705797cce6ea25e7 Mon Sep 17 00:00:00 2001 From: kahboom Date: Tue, 21 May 2019 14:16:59 +0100 Subject: [PATCH 28/40] Move delete stuff back to AddStepPage to facilitate working with history Minor changes Rm i18n to res conflicts --- .../components/IntegrationEditorStepAdder.tsx | 152 ++-------- .../components/editor/AddStepPage.tsx | 261 +++++++++++++----- .../locales/integrations-translations.en.json | 4 - 3 files changed, 218 insertions(+), 199 deletions(-) diff --git a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx index fe834b623ea..81ff2bd66d8 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx @@ -1,16 +1,8 @@ -import { - getFirstPosition, - getLastPosition, - getStepIcon, - removeStepFromFlow, -} from '@syndesis/api'; +import { getStepIcon } from '@syndesis/api'; import * as H from '@syndesis/history'; -import { Integration, Step } from '@syndesis/models'; +import { Step } from '@syndesis/models'; import { ButtonLink, - ConfirmationButtonStyle, - ConfirmationDialog, - ConfirmationIconType, IntegrationEditorStepsList, IntegrationEditorStepsListItem, IntegrationFlowAddStep, @@ -41,7 +33,7 @@ export interface IIntegrationEditorStepAdderProps { * step * @param idx - the zero-based index where a new connection should be added */ - editAddStepHref: (idx: number) => H.LocationDescriptor; + addStepHref: (idx: number) => H.LocationDescriptor; /** * a callback to get the `LocationDescriptor` that should be reached when * clicking the Edit Step button @@ -54,16 +46,7 @@ export interface IIntegrationEditorStepAdderProps { stepIdx: number, step: Step ) => H.LocationDescriptorObject; - deleteAction: (integration: Integration) => void; - flowId: string; - integration: Integration; -} - -export interface IIntegrationEditorStepAdderState { - position: number; - showDeleteDialog: boolean; - step?: Step; - stepIdx?: number; + onDelete: (idx: number, step: Step) => void; } /** @@ -71,109 +54,24 @@ export interface IIntegrationEditorStepAdderState { * buttons to add a new step, edit an existing one, etc. * * @see [steps]{@link IIntegrationEditorStepAdderProps#steps} - * @see [addStepHref]{@link IIntegrationEditorStepAdderProps#addStepHref} - * @see [addStepHref]{@link IIntegrationEditorStepAdderProps#addStepHref} + * @see [editAddStepHref]{@link IIntegrationEditorStepAdderProps#editAddStepHref} * @see [configureStepHref]{@link IIntegrationEditorStepAdderProps#configureStepHref} * * @todo add the delete step button */ export class IntegrationEditorStepAdder extends React.Component< - IIntegrationEditorStepAdderProps, - IIntegrationEditorStepAdderState + IIntegrationEditorStepAdderProps > { - constructor(props: any) { - super(props); - this.state = { - position: 0, - showDeleteDialog: false, - step: {}, - stepIdx: 0, - }; - - this.onDelete = this.onDelete.bind(this); - this.closeDeleteDialog = this.closeDeleteDialog.bind(this); - this.handleDeleteConfirm = this.handleDeleteConfirm.bind(this); - } - - public handleDeleteConfirm() { - if (this.state.showDeleteDialog) { - this.closeDeleteDialog(); - } - - const newInt = removeStepFromFlow( - this.props.integration!, - this.props.flowId!, - this.state.position! - ); - - this.props.deleteAction(newInt); - } - - public onDelete(idx: any, step: Step): void { - console.log('step: ' + JSON.stringify(step)); - // console.log('idx: ' + idx); - // console.log('firstPosition: ' + getFirstPosition(this.props.integration, this.props.flowId)); - // console.log('lastPosition: ' + getLastPosition(this.props.integration, this.props.flowId)); - - if (idx === getFirstPosition(this.props.integration, this.props.flowId)) { - console.log('Is first position'); - } - - if (idx === getLastPosition(this.props.integration, this.props.flowId)) { - console.log('Is last position'); - } - - // Check if it's an API provider step that can't be deleted - if (step.configuredProperties!.stepKind === 'mapper') { - console.log('Data mapper step'); - } - - this.setState({ - position: idx, - showDeleteDialog: true, - step: step, - stepIdx: idx, - }); - } - - public closeDeleteDialog(): void { - this.setState({ - position: 0, - showDeleteDialog: false, - step: {}, - stepIdx: 0, - }); - } - public render() { return ( {t => ( - <> - {this.state.showDeleteDialog && ( - { - this.handleDeleteConfirm(); - }} - /> - )} - - - {toUIIntegrationStepCollection( - toUIStepCollection(this.props.steps) - ).map((s, idx) => ( + + + {toUIIntegrationStepCollection( + toUIStepCollection(this.props.steps) + ).map((s, idx) => { + return ( - {t('integrations:editor:addStepDataMapping')} + Add a data mapping step {' '} - {t('integrations:editor:addStepDataMappingTrail')} + before this connection to resolve the difference. ) } @@ -230,7 +128,7 @@ export class IntegrationEditorStepAdder extends React.Component< this.onDelete(idx)} + onClick={() => this.props.onDelete(idx, s)} as={'danger'} > @@ -245,20 +143,12 @@ export class IntegrationEditorStepAdder extends React.Component< addStepHref={this.props.addStepHref(idx + 1)} i18nAddStep={t('integrations:editor:addStep')} /> - {idx < this.props.steps.length - 1 && ( - - )} - - ); - })} - - - + )} + + ); + })} + + )} ); diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx index 5264c9026df..6038f26ed12 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx @@ -1,7 +1,17 @@ -import { getSteps } from '@syndesis/api'; +import { + getFirstPosition, + getLastPosition, + getSteps, + removeStepFromFlow, +} from '@syndesis/api'; import * as H from '@syndesis/history'; -import { Integration, Step } from '@syndesis/models'; -import { IntegrationEditorLayout } from '@syndesis/ui'; +import { Step } from '@syndesis/models'; +import { + ConfirmationButtonStyle, + ConfirmationDialog, + ConfirmationIconType, + IntegrationEditorLayout, +} from '@syndesis/ui'; import { WithRouteData } from '@syndesis/utils'; import * as React from 'react'; import { Translation } from 'react-i18next'; @@ -17,7 +27,7 @@ export interface IAddStepPageProps extends IGetStepHrefs { p: IBaseRouteParams, s: IBaseRouteState ) => H.LocationDescriptor; - getEditAddStepHref: ( + getAddStepHref: ( position: number, p: IBaseRouteParams, s: IBaseRouteState @@ -29,6 +39,12 @@ export interface IAddStepPageProps extends IGetStepHrefs { ) => H.LocationDescriptorObject; } +export interface IAddStepPageState { + position?: number; + showDeleteDialog: boolean; + step?: Step; +} + /** * This page shows the steps of an existing integration. * @@ -42,72 +58,189 @@ export interface IAddStepPageProps extends IGetStepHrefs { * optional and adding a WithIntegration component to retrieve the integration * from the backend */ -export class AddStepPage extends React.Component { +export class AddStepPage extends React.Component< + IAddStepPageProps, + IAddStepPageState +> { + constructor(props: any) { + super(props); + this.state = { + position: 0, + showDeleteDialog: false, + step: {}, + }; + + // this.onDelete = this.onDelete.bind(this); + this.closeDeleteDialog = this.closeDeleteDialog.bind(this); + this.openDeleteDialog = this.openDeleteDialog.bind(this); + this.handleDeleteConfirm = this.handleDeleteConfirm.bind(this); + this.setStepAndPosition = this.setStepAndPosition.bind(this); + } + + public closeDeleteDialog(): void { + this.setState({ + showDeleteDialog: false, + }); + } + + public openDeleteDialog(): void { + this.setState({ + showDeleteDialog: true, + }); + } + + public handleDeleteConfirm() { + if (this.state.showDeleteDialog) { + this.closeDeleteDialog(); + } + } + + public setStepAndPosition(idx: number, step: Step): void { + this.setState({ + position: idx, + step: step, + }); + } + + /** + public onDelete(idx: number, step: Step): void { + this.setState({ position: idx, showDeleteDialog: true }); + } + **/ + public render() { return ( {t => ( - > - {({ flowId }, { integration }, { history }) => { - const deleteAction = (newIntegration: Integration) => { - history.push( - this.props.selfHref( - { flowId }, - { integration: newIntegration } - ) - ); - }; - - return ( - <> - - - this.props.getAddMapperStepHref( - position, - { flowId }, - { integration } - ) - } - configureStepHref={(position: number, step: Step) => - getStepHref( - step, - { flowId, position: `${position}` }, - { integration }, - this.props - ) - } - editAddStepHref={position => - this.props.getEditAddStepHref( - position, - { flowId }, - { integration } - ) - } - flowId={flowId} - integration={integration} - deleteAction={deleteAction} + <> + > + {({ flowId }, { integration }, { history }) => { + const onDelete = (idx: number, step: Step): void => { + console.log('step: ' + JSON.stringify(step)); + console.log('idx: ' + idx); + // console.log('idx: ' + idx); + // console.log('firstPosition: ' + getFirstPosition(this.props.integration, this.props.flowId)); + // console.log('lastPosition: ' + getLastPosition(this.props.integration, this.props.flowId)); + + if (idx === getFirstPosition(integration, flowId)) { + console.log('Is first position'); + // H.location.push({this.props.editAddStepHref(idx)}); + } + + if (idx === getLastPosition(integration, flowId)) { + console.log('Is last position'); + } + + // Check if it's an API provider step that can't be deleted + if (step.configuredProperties!.stepKind === 'mapper') { + console.log('Data mapper step'); + } + + this.setStepAndPosition(idx, step); + this.openDeleteDialog(); + + console.log( + 'this.state.position: ' + + JSON.stringify(this.state.position) + ); + console.log( + 'this.state.step: ' + JSON.stringify(this.state.step) + ); + }; + + return ( + <> + {this.state.showDeleteDialog && ( + { + this.handleDeleteConfirm(); + + console.log( + 'this.state.position: ' + this.state.position + ); + console.log('this.state.step: ' + this.state.step); + + const newInt = removeStepFromFlow( + integration, + flowId, + this.state.position! + ); + + console.log('newInt: ' + JSON.stringify(newInt)); + + // deleteAction(newInt); + + history.push( + this.props.selfHref( + { flowId }, + { integration: newInt } + ) + ); + }} /> - } - cancelHref={this.props.cancelHref( - { flowId }, - { integration } - )} - saveHref={this.props.saveHref({ flowId }, { integration })} - publishHref={this.props.saveHref( - { flowId }, - { integration } )} - /> - - ); - }} - + + + this.props.getAddMapperStepHref( + position, + { flowId }, + { integration } + ) + } + addStepHref={position => + this.props.getAddStepHref( + position, + { flowId }, + { integration } + ) + } + configureStepHref={(position: number, step: Step) => + getStepHref( + step, + { flowId, position: `${position}` }, + { integration }, + this.props + ) + } + onDelete={onDelete} + /> + } + cancelHref={this.props.cancelHref( + { flowId }, + { integration } + )} + saveHref={this.props.saveHref( + { flowId }, + { integration } + )} + publishHref={this.props.saveHref( + { flowId }, + { integration } + )} + /> + + ); + }} + + )} ); diff --git a/app/ui-react/syndesis/src/modules/integrations/locales/integrations-translations.en.json b/app/ui-react/syndesis/src/modules/integrations/locales/integrations-translations.en.json index 0d013c78d53..5069f550127 100644 --- a/app/ui-react/syndesis/src/modules/integrations/locales/integrations-translations.en.json +++ b/app/ui-react/syndesis/src/modules/integrations/locales/integrations-translations.en.json @@ -70,14 +70,10 @@ }, "editor": { "addStep": "Add a step", - "addStepDataMapping": "Add a data mapping step", - "addStepDataMappingTrail": " before this connection to resolve the difference.", "addStepDescription": "You can continue adding steps and connections to your integration as well.", "addToIntegration": "Add to Integration", "confirmDeleteStepDialogBody": "Are you sure you want to delete this step from the integration?", "confirmDeleteStepDialogTitle": "Confirm Delete", - "dataShape": "Data Shape", - "defineDataTypeMessage": "Define the data type for the previous step to resolve this warning.", "saveOrAddStep": "Save or Add Step" }, "ReplaceDraft": "Replace Draft", From 21fe9667497e35a465302541053932e5f7ff8091 Mon Sep 17 00:00:00 2001 From: kahboom Date: Tue, 21 May 2019 17:28:10 +0100 Subject: [PATCH 29/40] If first or last step, redirect to select step page Make getEditStepHref an optional param Account for if undefined --- .../integrations/IntegrationCreatorApp.tsx | 2 +- .../integrations/IntegrationEditorApp.tsx | 2 +- .../components/editor/AddStepPage.tsx | 32 +++++++++---------- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx index 5867741ab81..226d392a495 100644 --- a/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx @@ -17,7 +17,7 @@ import routes from './routes'; const addStepPage = ( + getAddStepHref={(position, p, s) => resolvers.create.configure.addStep.selectStep({ position: `${position}`, ...p, diff --git a/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx index 90f8015413c..e4dcf920a42 100644 --- a/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx @@ -22,7 +22,7 @@ import routes from './routes'; const addStepPage = ( + getAddStepHref={(position, p, s) => resolvers.integration.edit.addStep.selectStep({ position: `${position}`, ...p, diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx index 6038f26ed12..20e7f5a6ea3 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx @@ -32,6 +32,11 @@ export interface IAddStepPageProps extends IGetStepHrefs { p: IBaseRouteParams, s: IBaseRouteState ) => H.LocationDescriptor; + getEditStepHref?: ( + position: number, + p: IBaseRouteParams, + s: IBaseRouteState + ) => H.LocationDescriptorObject; saveHref: (p: IBaseRouteParams, s: IBaseRouteState) => H.LocationDescriptor; selfHref: ( p: IBaseRouteParams, @@ -122,13 +127,17 @@ export class AddStepPage extends React.Component< // console.log('firstPosition: ' + getFirstPosition(this.props.integration, this.props.flowId)); // console.log('lastPosition: ' + getLastPosition(this.props.integration, this.props.flowId)); - if (idx === getFirstPosition(integration, flowId)) { - console.log('Is first position'); - // H.location.push({this.props.editAddStepHref(idx)}); - } - - if (idx === getLastPosition(integration, flowId)) { - console.log('Is last position'); + if ( + idx === getFirstPosition(integration, flowId) || + idx === getLastPosition(integration, flowId) + ) { + history.push( + this.props.getEditStepHref!( + this.state.position!, + { flowId }, + { integration } + ) + ); } // Check if it's an API provider step that can't be deleted @@ -167,21 +176,12 @@ export class AddStepPage extends React.Component< onConfirm={() => { this.handleDeleteConfirm(); - console.log( - 'this.state.position: ' + this.state.position - ); - console.log('this.state.step: ' + this.state.step); - const newInt = removeStepFromFlow( integration, flowId, this.state.position! ); - console.log('newInt: ' + JSON.stringify(newInt)); - - // deleteAction(newInt); - history.push( this.props.selfHref( { flowId }, From e4f14fc058d09cc44b7c7459d5d0147fdd9d26a4 Mon Sep 17 00:00:00 2001 From: kahboom Date: Tue, 21 May 2019 17:34:44 +0100 Subject: [PATCH 30/40] Fix for add new step on delete first or last step Cleanup Cleanup --- .../integrations/IntegrationCreatorApp.tsx | 7 ++++ .../integrations/IntegrationEditorApp.tsx | 7 ++++ .../components/IntegrationEditorStepAdder.tsx | 2 +- .../components/editor/AddStepPage.tsx | 32 ++----------------- 4 files changed, 18 insertions(+), 30 deletions(-) diff --git a/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx index 226d392a495..3051904c4a1 100644 --- a/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx @@ -24,6 +24,13 @@ const addStepPage = ( ...s, }) } + getEditStepHref={(position, p, s) => + resolvers.create.configure.addStep.selectStep({ + position: `${position}`, + ...p, + ...s, + }) + } apiProviderHref={(step, p, s) => resolvers.create.configure.editStep.apiProvider.selectMethod() } diff --git a/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx index e4dcf920a42..aaf08913202 100644 --- a/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx @@ -32,6 +32,13 @@ const addStepPage = ( apiProviderHref={ resolvers.integration.edit.editStep.apiProvider.selectMethod } + getEditStepHref={(position, p, s) => + resolvers.integration.edit.addStep.selectStep({ + position: `${position}`, + ...p, + ...s, + }) + } connectionHref={(step, params, state) => resolvers.integration.edit.editStep.connection.configureAction({ actionId: step.action!.id!, diff --git a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx index 81ff2bd66d8..cc9b793f409 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx @@ -54,7 +54,7 @@ export interface IIntegrationEditorStepAdderProps { * buttons to add a new step, edit an existing one, etc. * * @see [steps]{@link IIntegrationEditorStepAdderProps#steps} - * @see [editAddStepHref]{@link IIntegrationEditorStepAdderProps#editAddStepHref} + * @see [addStepHref]{@link IIntegrationEditorStepAdderProps#addStepHref} * @see [configureStepHref]{@link IIntegrationEditorStepAdderProps#configureStepHref} * * @todo add the delete step button diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx index 20e7f5a6ea3..a827d0952cd 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx @@ -32,7 +32,7 @@ export interface IAddStepPageProps extends IGetStepHrefs { p: IBaseRouteParams, s: IBaseRouteState ) => H.LocationDescriptor; - getEditStepHref?: ( + getEditStepHref: ( position: number, p: IBaseRouteParams, s: IBaseRouteState @@ -75,7 +75,6 @@ export class AddStepPage extends React.Component< step: {}, }; - // this.onDelete = this.onDelete.bind(this); this.closeDeleteDialog = this.closeDeleteDialog.bind(this); this.openDeleteDialog = this.openDeleteDialog.bind(this); this.handleDeleteConfirm = this.handleDeleteConfirm.bind(this); @@ -107,32 +106,20 @@ export class AddStepPage extends React.Component< }); } - /** - public onDelete(idx: number, step: Step): void { - this.setState({ position: idx, showDeleteDialog: true }); - } - **/ - public render() { return ( - + {t => ( <> > {({ flowId }, { integration }, { history }) => { const onDelete = (idx: number, step: Step): void => { - console.log('step: ' + JSON.stringify(step)); - console.log('idx: ' + idx); - // console.log('idx: ' + idx); - // console.log('firstPosition: ' + getFirstPosition(this.props.integration, this.props.flowId)); - // console.log('lastPosition: ' + getLastPosition(this.props.integration, this.props.flowId)); - if ( idx === getFirstPosition(integration, flowId) || idx === getLastPosition(integration, flowId) ) { history.push( - this.props.getEditStepHref!( + this.props.getEditStepHref( this.state.position!, { flowId }, { integration } @@ -140,21 +127,8 @@ export class AddStepPage extends React.Component< ); } - // Check if it's an API provider step that can't be deleted - if (step.configuredProperties!.stepKind === 'mapper') { - console.log('Data mapper step'); - } - this.setStepAndPosition(idx, step); this.openDeleteDialog(); - - console.log( - 'this.state.position: ' + - JSON.stringify(this.state.position) - ); - console.log( - 'this.state.step: ' + JSON.stringify(this.state.step) - ); }; return ( From b5743cf1fdaf0d44aba84685ce254369c3a847e6 Mon Sep 17 00:00:00 2001 From: kahboom Date: Tue, 21 May 2019 18:20:28 +0100 Subject: [PATCH 31/40] Check for CBR step --- .../components/IntegrationEditorStepAdder.tsx | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx index cc9b793f409..cda6583d355 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx @@ -71,6 +71,9 @@ export class IntegrationEditorStepAdder extends React.Component< {toUIIntegrationStepCollection( toUIStepCollection(this.props.steps) ).map((s, idx) => { + const restrictedDelete = + s.configuredProperties!.stepKind === 'choice'; + return ( {t('shared:Configure')} - this.props.onDelete(idx, s)} - as={'danger'} - > - - + {!restrictedDelete && ( + this.props.onDelete(idx, s)} + as={'danger'} + > + + + )} } /> From 6bcb6fcf2e929fce65cdb3676da2d88821af1e29 Mon Sep 17 00:00:00 2001 From: kahboom Date: Tue, 21 May 2019 18:23:50 +0100 Subject: [PATCH 32/40] Pass integration and flowId to determine startConnection --- .../components/IntegrationEditorStepAdder.tsx | 9 ++++++--- .../integrations/components/editor/AddStepPage.tsx | 2 ++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx index cda6583d355..c48f4ef9943 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx @@ -1,6 +1,6 @@ -import { getStepIcon } from '@syndesis/api'; +import { getStartStep, getStepIcon } from '@syndesis/api'; import * as H from '@syndesis/history'; -import { Step } from '@syndesis/models'; +import { Integration, Step } from '@syndesis/models'; import { ButtonLink, IntegrationEditorStepsList, @@ -46,6 +46,8 @@ export interface IIntegrationEditorStepAdderProps { stepIdx: number, step: Step ) => H.LocationDescriptorObject; + flowId: string; + integration: Integration; onDelete: (idx: number, step: Step) => void; } @@ -72,7 +74,8 @@ export class IntegrationEditorStepAdder extends React.Component< toUIStepCollection(this.props.steps) ).map((s, idx) => { const restrictedDelete = - s.configuredProperties!.stepKind === 'choice'; + s.configuredProperties!.stepKind === 'choice' || + getStartStep().connection.connectorId === 'api-provider'; return ( diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx index a827d0952cd..ac144e2e3a7 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx @@ -194,6 +194,8 @@ export class AddStepPage extends React.Component< this.props ) } + flowId={flowId} + integration={integration} onDelete={onDelete} /> } From a20d6f3fc89a28dc62d302e8ee180cd2c1c3e659 Mon Sep 17 00:00:00 2001 From: kahboom Date: Tue, 21 May 2019 18:28:02 +0100 Subject: [PATCH 33/40] Check for API provider --- .../integrations/components/IntegrationEditorStepAdder.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx index c48f4ef9943..dd0d710ac02 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx @@ -75,7 +75,8 @@ export class IntegrationEditorStepAdder extends React.Component< ).map((s, idx) => { const restrictedDelete = s.configuredProperties!.stepKind === 'choice' || - getStartStep().connection.connectorId === 'api-provider'; + getStartStep(this.props.integration, this.props.flowId)! + .connection!.connectorId === 'api-provider'; return ( From e217bc5f99cf3231e6ade8b8544e4d6fca371b69 Mon Sep 17 00:00:00 2001 From: kahboom Date: Tue, 21 May 2019 19:10:14 +0100 Subject: [PATCH 34/40] Disable delete for CBR and API provider Cleanup Minor fixes Add docs, addl check Lint fix --- .../components/IntegrationEditorStepAdder.tsx | 16 ++++-- .../components/editor/AddStepPage.tsx | 56 ++++++++++++------- 2 files changed, 47 insertions(+), 25 deletions(-) diff --git a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx index dd0d710ac02..011523c1c6c 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationEditorStepAdder.tsx @@ -1,4 +1,4 @@ -import { getStartStep, getStepIcon } from '@syndesis/api'; +import { getStepIcon } from '@syndesis/api'; import * as H from '@syndesis/history'; import { Integration, Step } from '@syndesis/models'; import { @@ -73,10 +73,16 @@ export class IntegrationEditorStepAdder extends React.Component< {toUIIntegrationStepCollection( toUIStepCollection(this.props.steps) ).map((s, idx) => { - const restrictedDelete = - s.configuredProperties!.stepKind === 'choice' || - getStartStep(this.props.integration, this.props.flowId)! - .connection!.connectorId === 'api-provider'; + let restrictedDelete = false; + + if ( + (s.configuredProperties && + s.configuredProperties!.stepKind === 'choice') || + (s.connection && + s.connection!.connectorId! === 'api-provider') + ) { + restrictedDelete = true; + } return ( diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx index ac144e2e3a7..17788f73492 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx @@ -102,7 +102,7 @@ export class AddStepPage extends React.Component< public setStepAndPosition(idx: number, step: Step): void { this.setState({ position: idx, - step: step, + step, }); } @@ -114,19 +114,6 @@ export class AddStepPage extends React.Component< > {({ flowId }, { integration }, { history }) => { const onDelete = (idx: number, step: Step): void => { - if ( - idx === getFirstPosition(integration, flowId) || - idx === getLastPosition(integration, flowId) - ) { - history.push( - this.props.getEditStepHref( - this.state.position!, - { flowId }, - { integration } - ) - ); - } - this.setStepAndPosition(idx, step); this.openDeleteDialog(); }; @@ -150,18 +137,47 @@ export class AddStepPage extends React.Component< onConfirm={() => { this.handleDeleteConfirm(); + /** + * Remove the step from the integration flow + * and receive a copy of the new integration. + */ const newInt = removeStepFromFlow( integration, flowId, this.state.position! ); - history.push( - this.props.selfHref( - { flowId }, - { integration: newInt } - ) - ); + /** + * Check if step is first or last position, + * in which case you should delete the step and + * subsequently redirect the user to the step select + * page for that position. + */ + if ( + this.state.position === + getFirstPosition(integration, flowId) || + this.state.position === + getLastPosition(integration, flowId) + ) { + history.push( + this.props.getEditStepHref( + this.state.position!, + { flowId }, + { integration } + ) + ); + } else { + /** + * If is a middle step, simply remove the step + * and update the UI. + */ + history.push( + this.props.selfHref( + { flowId }, + { integration: newInt } + ) + ); + } }} /> )} From f25a6642af5b77abedf6e494bd7998672c1c0bc3 Mon Sep 17 00:00:00 2001 From: Riccardo Forina Date: Thu, 23 May 2019 15:25:55 +0200 Subject: [PATCH 35/40] add support to deleting (really, replacing) the start and end steps --- .../integrations/IntegrationCreatorApp.tsx | 4 +- .../integrations/IntegrationEditorApp.tsx | 4 +- .../components/editor/AddStepPage.tsx | 203 +++++++++--------- 3 files changed, 103 insertions(+), 108 deletions(-) diff --git a/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx index 3051904c4a1..6e267a37c84 100644 --- a/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/IntegrationCreatorApp.tsx @@ -24,8 +24,8 @@ const addStepPage = ( ...s, }) } - getEditStepHref={(position, p, s) => - resolvers.create.configure.addStep.selectStep({ + getDeleteEdgeStepHref={(position, p, s) => + resolvers.create.configure.editStep.selectStep({ position: `${position}`, ...p, ...s, diff --git a/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx b/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx index aaf08913202..b7d36d0d423 100644 --- a/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/IntegrationEditorApp.tsx @@ -32,8 +32,8 @@ const addStepPage = ( apiProviderHref={ resolvers.integration.edit.editStep.apiProvider.selectMethod } - getEditStepHref={(position, p, s) => - resolvers.integration.edit.addStep.selectStep({ + getDeleteEdgeStepHref={(position, p, s) => + resolvers.integration.edit.editStep.selectStep({ position: `${position}`, ...p, ...s, diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx index 17788f73492..79301a3a9ea 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/AddStepPage.tsx @@ -32,7 +32,7 @@ export interface IAddStepPageProps extends IGetStepHrefs { p: IBaseRouteParams, s: IBaseRouteState ) => H.LocationDescriptor; - getEditStepHref: ( + getDeleteEdgeStepHref: ( position: number, p: IBaseRouteParams, s: IBaseRouteState @@ -107,36 +107,55 @@ export class AddStepPage extends React.Component< } public render() { + const onDelete = (idx: number, step: Step): void => { + this.setStepAndPosition(idx, step); + this.openDeleteDialog(); + }; + return ( {t => ( <> > - {({ flowId }, { integration }, { history }) => { - const onDelete = (idx: number, step: Step): void => { - this.setStepAndPosition(idx, step); - this.openDeleteDialog(); - }; - - return ( - <> - {this.state.showDeleteDialog && ( - { - this.handleDeleteConfirm(); + {({ flowId }, { integration }, { history }) => ( + <> + {this.state.showDeleteDialog && ( + { + this.handleDeleteConfirm(); + /** + * Check if step is first or last position, + * in which case you should delete the step and + * subsequently redirect the user to the step select + * page for that position. + */ + if ( + this.state.position === + getFirstPosition(integration, flowId) || + this.state.position === + getLastPosition(integration, flowId) + ) { + history.push( + this.props.getDeleteEdgeStepHref( + this.state.position!, + { flowId }, + { integration } + ) + ); + } else { /** * Remove the step from the integration flow * and receive a copy of the new integration. @@ -148,89 +167,65 @@ export class AddStepPage extends React.Component< ); /** - * Check if step is first or last position, - * in which case you should delete the step and - * subsequently redirect the user to the step select - * page for that position. + * If is a middle step, simply remove the step + * and update the UI. */ - if ( - this.state.position === - getFirstPosition(integration, flowId) || - this.state.position === - getLastPosition(integration, flowId) - ) { - history.push( - this.props.getEditStepHref( - this.state.position!, - { flowId }, - { integration } - ) - ); - } else { - /** - * If is a middle step, simply remove the step - * and update the UI. - */ - history.push( - this.props.selfHref( - { flowId }, - { integration: newInt } - ) - ); - } - }} - /> - )} - - - this.props.getAddMapperStepHref( - position, + history.push( + this.props.selfHref( { flowId }, - { integration } + { integration: newInt } ) - } - addStepHref={position => - this.props.getAddStepHref( - position, - { flowId }, - { integration } - ) - } - configureStepHref={(position: number, step: Step) => - getStepHref( - step, - { flowId, position: `${position}` }, - { integration }, - this.props - ) - } - flowId={flowId} - integration={integration} - onDelete={onDelete} - /> - } - cancelHref={this.props.cancelHref( - { flowId }, - { integration } - )} - saveHref={this.props.saveHref( - { flowId }, - { integration } - )} - publishHref={this.props.saveHref( - { flowId }, - { integration } - )} + ); + } + }} /> - - ); - }} + )} + + + this.props.getAddMapperStepHref( + position, + { flowId }, + { integration } + ) + } + addStepHref={position => + this.props.getAddStepHref( + position, + { flowId }, + { integration } + ) + } + configureStepHref={(position: number, step: Step) => + getStepHref( + step, + { flowId, position: `${position}` }, + { integration }, + this.props + ) + } + flowId={flowId} + integration={integration} + onDelete={onDelete} + /> + } + cancelHref={this.props.cancelHref( + { flowId }, + { integration } + )} + saveHref={this.props.saveHref({ flowId }, { integration })} + publishHref={this.props.saveHref( + { flowId }, + { integration } + )} + /> + + )} )} From 09048f6c0ae3c5aa3336bc0bdf59e7419301bd20 Mon Sep 17 00:00:00 2001 From: Michael Spaxman Date: Thu, 23 May 2019 09:35:04 -0400 Subject: [PATCH 36/40] [logout] use better base path, no need for manual redirect after logout action --- app/ui-react/packages/api/src/WithUserHelpers.tsx | 2 +- app/ui-react/syndesis/src/app/UI.tsx | 8 +------- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/app/ui-react/packages/api/src/WithUserHelpers.tsx b/app/ui-react/packages/api/src/WithUserHelpers.tsx index 15494123bea..6860cc5cdfe 100644 --- a/app/ui-react/packages/api/src/WithUserHelpers.tsx +++ b/app/ui-react/packages/api/src/WithUserHelpers.tsx @@ -24,7 +24,7 @@ export class WithUserHelpersWrapped extends React.Component< responseType: 'arraybuffer', }, method: 'GET', - url: `/logout`, + url: `${process.env.PUBLIC_URL}/logout`, }); // const html = String.fromCharCode.apply(null, new Uint8Array(response.body!)); diff --git a/app/ui-react/syndesis/src/app/UI.tsx b/app/ui-react/syndesis/src/app/UI.tsx index 8a290810f4d..2a3e9ad9e3e 100644 --- a/app/ui-react/syndesis/src/app/UI.tsx +++ b/app/ui-react/syndesis/src/app/UI.tsx @@ -204,13 +204,7 @@ export const UI: React.FunctionComponent = ({ routes }) => { return ( { - logout().then(() => { - console.log( - 'do we need to manually redirect here?' - ); - }); - }} + onSelectLogout={logout} > {t('Logout')} From 528f7b7485205927ca2d8bdec024073b979ea554 Mon Sep 17 00:00:00 2001 From: Michael Spaxman Date: Thu, 23 May 2019 11:14:53 -0400 Subject: [PATCH 37/40] [logout] use better method of handling user dropdown items --- .../packages/api/src/WithUserHelpers.tsx | 6 ----- .../packages/ui/src/Layout/AppTopMenu.tsx | 24 +++---------------- .../packages/ui/src/Shared/PfDropdownItem.tsx | 7 +++++- .../ui/stories/Layout/AppLayout.stories.tsx | 7 +----- app/ui-react/syndesis/src/app/UI.tsx | 13 ++++++++-- 5 files changed, 21 insertions(+), 36 deletions(-) diff --git a/app/ui-react/packages/api/src/WithUserHelpers.tsx b/app/ui-react/packages/api/src/WithUserHelpers.tsx index 6860cc5cdfe..f9b73508a3f 100644 --- a/app/ui-react/packages/api/src/WithUserHelpers.tsx +++ b/app/ui-react/packages/api/src/WithUserHelpers.tsx @@ -26,12 +26,6 @@ export class WithUserHelpersWrapped extends React.Component< method: 'GET', url: `${process.env.PUBLIC_URL}/logout`, }); - - // const html = String.fromCharCode.apply(null, new Uint8Array(response.body!)); - // window.history.pushState(null, null, '/logout'); - // window.document.open(); - // window.document.write(html); - // window.document.close(); return await response.body; } diff --git a/app/ui-react/packages/ui/src/Layout/AppTopMenu.tsx b/app/ui-react/packages/ui/src/Layout/AppTopMenu.tsx index 528e3ea3cc3..d7e949581c7 100644 --- a/app/ui-react/packages/ui/src/Layout/AppTopMenu.tsx +++ b/app/ui-react/packages/ui/src/Layout/AppTopMenu.tsx @@ -1,10 +1,9 @@ -import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core'; +import { Dropdown, DropdownToggle } from '@patternfly/react-core'; import * as React from 'react'; export interface IAppTopMenuProps { username: string; children: any; - onSelectLogout(): void; } export interface IAppTopMenuState { @@ -32,12 +31,7 @@ export class AppTopMenu extends React.Component< }); }; public render() { - const { children, username, onSelectLogout } = this.props; - const handleClick = (link: string) => { - if (link.toLowerCase() === 'logout') { - onSelectLogout(); - } - }; + const { children, username } = this.props; return ( {username} } isOpen={this.state.isOpen} - dropdownItems={React.Children.toArray(children).map((child, idx) => { - return ( - { - event.preventDefault(); - handleClick(child); - }} - key={idx} - > - {child} - - ); - })} + dropdownItems={React.Children.toArray(children)} /> ); } diff --git a/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx b/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx index 86b00e211fd..de5384edd26 100644 --- a/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx +++ b/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx @@ -3,10 +3,15 @@ import * as React from 'react'; export interface IPfDropdownItem { children: React.ReactNode; + onClick?(): void; } class PfDropdownItem extends React.Component { public render() { - return {this.props.children}; + return ( + + {this.props.children} + + ); } } diff --git a/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx b/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx index 5f90644c28d..f1b10ce57db 100644 --- a/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx +++ b/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx @@ -13,7 +13,6 @@ import { import { withState } from '@dump247/storybook-state'; const stories = storiesOf('Layout/AppLayout', module); const logDropdownItemSelection = action('select dropdown item log'); -const logLogout = action('logout'); stories.add( 'sample usage', @@ -57,11 +56,7 @@ stories.add( }} showNavigation={true} pictograph={text('Application title', 'Syndesis')} - appNav={ - - Logout - - } + appNav={Logout} verticalNav={[ = ({ routes }) => { return ( - {t('Logout')} + + + ); }} From 1f7817a547ae0e427c9d721e9b21c83ed6e17488 Mon Sep 17 00:00:00 2001 From: Riccardo Forina Date: Thu, 23 May 2019 17:18:43 +0200 Subject: [PATCH 38/40] properly filter the steps based on the current position --- .../integrations/components/editor/utils.ts | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts b/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts index f42d2b79d25..5e86eba9296 100644 --- a/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts +++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts @@ -313,14 +313,19 @@ export function mergeConnectionsSources( * Filters connections based on the supplied position in the step array * @param steps * @param position + * @param atStart + * @param atEnd */ -export function filterStepsByPosition(steps: StepKind[], position: number) { +export function filterStepsByPosition( + steps: StepKind[], + position: number, + atStart: boolean, + atEnd: boolean +) { if (typeof position === 'undefined' || !steps) { // safety net return steps; } - const atStart = position === 0; - const atEnd = getStepsLastPosition(steps) === position; return steps.filter(step => { // Hide steps that are marked as such, and specifically the log connection if ( @@ -399,7 +404,12 @@ export function visibleStepsByPosition( ) { const previousSteps = flowSteps.slice(0, position); const subsequentSteps = flowSteps.slice(position + 1); - return filterStepsByPosition(steps, position).filter(s => { + return filterStepsByPosition( + steps, + position, + position === 0, + getStepsLastPosition(flowSteps) === position + ).filter(s => { if (typeof s.visible === 'function') { return s.visible(position, previousSteps, subsequentSteps); } From 22849d6f74724aec622a318e688fda8b812eb437 Mon Sep 17 00:00:00 2001 From: Michael Spaxman Date: Thu, 23 May 2019 11:33:26 -0400 Subject: [PATCH 39/40] [logout] expose event object so we can prevent default browser behavior --- .../packages/ui/src/Shared/PfDropdownItem.tsx | 2 +- .../packages/ui/src/Shared/PfDropdownItem.tsx.rej | 8 ++++++++ .../ui/stories/Layout/AppLayout.stories.tsx | 15 ++++++++++++++- .../ui/stories/Layout/AppLayout.stories.tsx.rej | 8 ++++++++ 4 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx.rej create mode 100644 app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx.rej diff --git a/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx b/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx index de5384edd26..202c0645d42 100644 --- a/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx +++ b/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; export interface IPfDropdownItem { children: React.ReactNode; - onClick?(): void; + onClick?(event?: React.MouseEvent): void; } class PfDropdownItem extends React.Component { public render() { diff --git a/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx.rej b/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx.rej new file mode 100644 index 00000000000..337866605b1 --- /dev/null +++ b/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx.rej @@ -0,0 +1,8 @@ +diff a/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx b/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx (rejected hunks) +@@ -10 +10,5 @@ class PfDropdownItem extends React.Component { +- return {this.props.children}; ++ return ( ++ ++ {this.props.children} ++ ++ ); diff --git a/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx b/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx index f1b10ce57db..7a8f0ee052f 100644 --- a/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx +++ b/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx @@ -8,11 +8,13 @@ import { AboutModalContent, AppLayout, AppTopMenu, + PfDropdownItem, PfVerticalNavItem, } from '../../src'; import { withState } from '@dump247/storybook-state'; const stories = storiesOf('Layout/AppLayout', module); const logDropdownItemSelection = action('select dropdown item log'); +const logLogout = action('logout action'); stories.add( 'sample usage', @@ -56,7 +58,18 @@ stories.add( }} showNavigation={true} pictograph={text('Application title', 'Syndesis')} - appNav={Logout} + appNav={ + + { + event && event.preventDefault(); + logLogout(); + }} + > + Logout + + + } verticalNav={[ +- Logout +- +- } ++ appNav={Logout} From 58fc4c62b086d9d079afd135cfa3cfbd420faddc Mon Sep 17 00:00:00 2001 From: Michael Spaxman Date: Thu, 23 May 2019 11:37:01 -0400 Subject: [PATCH 40/40] [cleanup] remove files rejected by git --- .../packages/ui/src/Shared/PfDropdownItem.tsx.rej | 8 -------- .../packages/ui/stories/Layout/AppLayout.stories.tsx.rej | 8 -------- 2 files changed, 16 deletions(-) delete mode 100644 app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx.rej delete mode 100644 app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx.rej diff --git a/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx.rej b/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx.rej deleted file mode 100644 index 337866605b1..00000000000 --- a/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx.rej +++ /dev/null @@ -1,8 +0,0 @@ -diff a/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx b/app/ui-react/packages/ui/src/Shared/PfDropdownItem.tsx (rejected hunks) -@@ -10 +10,5 @@ class PfDropdownItem extends React.Component { -- return {this.props.children}; -+ return ( -+ -+ {this.props.children} -+ -+ ); diff --git a/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx.rej b/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx.rej deleted file mode 100644 index d2ef0a0159c..00000000000 --- a/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx.rej +++ /dev/null @@ -1,8 +0,0 @@ -diff a/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx b/app/ui-react/packages/ui/stories/Layout/AppLayout.stories.tsx (rejected hunks) -@@ -59,5 +59 @@ stories.add( -- appNav={ -- -- Logout -- -- } -+ appNav={Logout}