From 101bc936e8bde273f7bc145873a8894973bec884 Mon Sep 17 00:00:00 2001 From: Stanislav Vishnevetskiy Date: Mon, 23 Jul 2018 13:26:41 +0300 Subject: FE docker & FE App Issue-ID: SDC-1482 Change-Id: I1fbdcc4f00f7dbc76ffdc1ad4c2a60a16fb34e70 Signed-off-by: Stanislav Vishnevetskiy --- workflow/pom.xml | 2 + workflow/workflow-designer-be/pom.xml | 2 - workflow/workflow-designer-ui/pom.xml | 149 +- .../src/main/frontend/.babelrc | 15 + .../src/main/frontend/.eslintignore | 3 + .../src/main/frontend/.eslintrc | 48 + .../src/main/frontend/.gitignore | 19 + .../src/main/frontend/__mocks__/fileMock.js | 19 + .../frontend/__mocks__/sdc-ui/lib/react/SVGIcon.js | 51 + .../src/main/frontend/external-resources/ping/ping | 11 + .../src/main/frontend/index.html | 13 + .../src/main/frontend/jest.config.js | 47 + .../src/main/frontend/jsconfig.json | 12 + .../src/main/frontend/package.json | 95 + .../src/main/frontend/resources/scss/_common.scss | 5 + .../main/frontend/resources/scss/_components.scss | 12 + .../main/frontend/resources/scss/_features.scss | 6 + .../resources/scss/common/_customVariables.scss | 44 + .../frontend/resources/scss/common/_fonts.scss | 31 + .../frontend/resources/scss/common/_utils.scss | 313 + .../resources/scss/components/_customModal.scss | 16 + .../scss/components/_expandableInput.scss | 56 + .../resources/scss/components/_inputOptions.scss | 48 + .../resources/scss/components/_layout.scss | 16 + .../resources/scss/components/_loader.scss | 160 + .../scss/components/_navigationSideBar.scss | 63 + .../resources/scss/components/_notifications.scss | 7 + .../resources/scss/components/_searchInput.scss | 59 + .../frontend/resources/scss/components/_tree.scss | 57 + .../resources/scss/components/_validationForm.scss | 117 + .../scss/components/_versionController.scss | 171 + .../frontend/resources/scss/features/_catalog.scss | 95 + .../resources/scss/features/_composition.scss | 15 + .../frontend/resources/scss/features/_general.scss | 39 + .../resources/scss/features/_inputOutput.scss | 143 + .../resources/scss/features/_overview.scss | 290 + .../resources/scss/features/_workflow.scss | 6 + .../src/main/frontend/resources/scss/style.scss | 4 + .../src/main/frontend/src/App.js | 44 + .../src/main/frontend/src/appConstants.js | 36 + .../src/main/frontend/src/appSelectors.js | 16 + .../src/main/frontend/src/config/Configuration.js | 59 + .../src/main/frontend/src/config/config.json | 5 + .../main/frontend/src/features/catalog/Catalog.js | 47 + .../frontend/src/features/catalog/CatalogView.jsx | 113 + .../catalog/__tests__/catalogActions-test.js | 64 + .../catalog/__tests__/catalogReducer-test.js | 52 + .../catalog/__tests__/catalogSagas-test.js | 21 + .../catalog/__tests__/catalogSelectors-test.js | 71 + .../src/features/catalog/catalogActions.js | 35 + .../frontend/src/features/catalog/catalogApi.js | 31 + .../src/features/catalog/catalogConstants.js | 25 + .../src/features/catalog/catalogReducer.js | 62 + .../frontend/src/features/catalog/catalogSagas.js | 52 + .../src/features/catalog/catalogSelectors.js | 26 + .../src/features/catalog/views/AddWorkflow.jsx | 42 + .../frontend/src/features/catalog/views/Header.jsx | 39 + .../frontend/src/features/catalog/views/Main.jsx | 74 + .../src/features/catalog/views/Workflows.jsx | 42 + .../main/frontend/src/features/version/Version.js | 10 + .../frontend/src/features/version/VersionView.jsx | 120 + .../version/composition/CompositionView.js | 91 + .../features/version/composition/newDiagram.bpmn | 9 + .../src/features/version/create/CreateVersion.js | 50 + .../features/version/create/CreateVersionView.jsx | 93 + .../version/create/createVersionConstants.js | 30 + .../version/create/views/NewVersionContainer.jsx | 41 + .../src/features/version/general/General.js | 42 + .../src/features/version/general/GeneralView.js | 46 + .../src/features/version/general/generalApi.js | 15 + .../features/version/general/generalSelectors.js | 39 + .../features/version/inputOutput/InputOutput.js | 78 + .../version/inputOutput/InputOutputView.jsx | 224 + .../__tests__/inputOutputActions-test.js | 150 + .../__tests__/inputOutputReducer-test.js | 191 + .../__tests__/inputOutputSelectors-test.js | 149 + .../version/inputOutput/inputOutputActions.js | 53 + .../version/inputOutput/inputOutputConstants.js | 38 + .../version/inputOutput/inputOutputReducer.js | 129 + .../version/inputOutput/inputOutputSelectors.js | 62 + .../version/inputOutput/inputOutputValidations.js | 54 + .../features/version/inputOutput/views/DataRow.jsx | 78 + .../version/inputOutput/views/NoDataRow.jsx | 32 + .../src/features/version/inputOutput/views/Tab.js | 39 + .../version/inputOutput/views/TableBody.jsx | 41 + .../version/inputOutput/views/TableHead.jsx | 41 + .../frontend/src/features/version/versionApi.js | 52 + .../src/features/version/versionConstants.js | 46 + .../version/versionController/VersionController.js | 56 + .../versionController/VersionControllerView.jsx | 110 + .../VersionControllerView_snapshot-test.js | 52 + .../VersionControllerView_snapshot-test.js.snap | 122 + .../versionControllerConstants.js | 30 + .../versionControllerSelectors.js | 34 + .../versionController/views/ActionButtons.js | 66 + .../version/versionController/views/SvgButton.js | 59 + .../versionController/views/VersionButton.js | 38 + .../versionController/views/VersionSelect.js | 65 + .../versionController/views/VersionsContainer.js | 67 + .../versionController/views/WorkflowTitle.js | 34 + .../src/features/version/versionReducer.js | 42 + .../frontend/src/features/version/versionSaga.js | 97 + .../src/features/workflow/create/CreateWorkflow.js | 54 + .../workflow/create/CreateWorkflowView.jsx | 89 + .../__tests__/CreateWorkflowView_snapshot-test.js | 29 + .../CreateWorkflowView_snapshot-test.js.snap | 73 + .../create/__tests__/createWorkflowSaga-test.js | 56 + .../__tests__/createWorkflowSelector-test.js | 51 + .../features/workflow/create/createWorkflowApi.js | 30 + .../workflow/create/createWorkflowConstants.js | 32 + .../features/workflow/create/createWorkflowSaga.js | 50 + .../workflow/create/createWorkflowSelector.js | 31 + .../src/features/workflow/overview/Overview.js | 58 + .../features/workflow/overview/OverviewView.jsx | 117 + .../src/features/workflow/overview/overviewApi.js | 41 + .../workflow/overview/overviewConstansts.js | 42 + .../features/workflow/overview/overviewReducer.js | 26 + .../features/workflow/overview/overviewSagas.js | 67 + .../workflow/overview/overviewSelectors.js | 59 + .../overview/views/VersionList/VersionListItem.jsx | 74 + .../workflow/overview/views/VersionList/index.js | 51 + .../workflow/overview/views/VersionTree.jsx | 43 + .../workflow/overview/views/WorkflowDetails.jsx | 87 + .../workflow/overview/views/WorkflowHeader.jsx | 32 + .../workflow/overview/views/WorkflowVersions.jsx | 64 + .../src/features/workflow/workflowConstants.js | 22 + .../src/features/workflow/workflowReducer.js | 40 + .../src/features/workflow/workflowSelectors.js | 20 + .../src/main/frontend/src/i18n/I18n.js | 31 + .../frontend/src/i18n/i18next-scanner.config.js | 44 + .../src/main/frontend/src/i18n/languages.json | 68 + .../src/main/frontend/src/i18n/translationSaga.js | 24 + .../src/main/frontend/src/index.js | 44 + .../src/main/frontend/src/rootReducers.js | 43 + .../src/main/frontend/src/rootSaga.js | 35 + .../src/main/frontend/src/routes.js | 59 + .../src/main/frontend/src/services/restAPIUtil.js | 162 + .../src/shared/components/Description/index.js | 44 + .../frontend/src/shared/components/Select/index.js | 54 + .../src/shared/components/VersionInfo/index.js | 59 + .../errorResponseHandler/errorResponseHandler.js | 32 + .../src/main/frontend/src/shared/loader/Loader.jsx | 50 + .../frontend/src/shared/loader/LoaderConstants.js | 38 + .../frontend/src/shared/loader/LoaderReducer.js | 49 + .../shared/loader/__tests__/loaderReducer-test.js | 56 + .../main/frontend/src/shared/modal/ModalWrapper.js | 34 + .../frontend/src/shared/modal/ModalWrapperView.jsx | 99 + .../modal/__tests__/modalWrapperActions-test.js | 85 + .../modal/__tests__/modalWrapperReducer-test.js | 61 + .../src/shared/modal/modalWrapperActions.js | 46 + .../src/shared/modal/modalWrapperComponents.js | 27 + .../src/shared/modal/modalWrapperReducer.js | 32 + .../shared/navigationSideBar/NavigationLink.jsx | 48 + .../shared/navigationSideBar/NavigationMenu.jsx | 39 + .../navigationSideBar/NavigationMenuItem.jsx | 44 + .../navigationSideBar/NavigationMenuItems.jsx | 47 + .../frontend/src/shared/navigationSideBar/index.js | 73 + .../src/shared/notifications/Notifications.js | 33 + .../src/shared/notifications/NotificationsView.jsx | 56 + .../__tests__/NotificationView_snapshot-test.js | 30 + .../NotificationView_snapshot-test.js.snap | 9 + .../__tests__/notificationsReducer-test.js | 61 + .../shared/notifications/notificationsActions.js | 60 + .../shared/notifications/notificationsConstants.js | 21 + .../shared/notifications/notificationsReducer.js | 30 + .../src/shared/notifications/notificationsSagas.js | 33 + .../src/shared/searchInput/SearchInput.jsx | 123 + .../src/main/frontend/src/shared/tree/Tree.jsx | 234 + .../src/main/frontend/src/store.js | 42 + .../src/main/frontend/testSetup/fileTransform.js | 25 + .../main/frontend/tools/ModuleRedirectPlugin.js | 44 + .../main/frontend/tools/devConfig.defaults.json | 27 + .../src/main/frontend/tools/getDevConfig.js | 25 + .../src/main/frontend/tools/mocks/mock.js | 209 + .../src/main/frontend/tools/proxy-server.js | 44 + .../src/main/frontend/webpack.config.js | 161 + .../src/main/frontend/yarn.lock | 12465 +++++++++++++++++++ .../org/onap/workflow/web/TransparentProxy.java | 80 + .../src/main/webapp/WEB-INF/jetty-web.xml | 6 + .../src/main/webapp/WEB-INF/web.xml | 19 + 180 files changed, 22829 insertions(+), 3 deletions(-) mode change 100644 => 100755 workflow/workflow-designer-ui/pom.xml create mode 100644 workflow/workflow-designer-ui/src/main/frontend/.babelrc create mode 100644 workflow/workflow-designer-ui/src/main/frontend/.eslintignore create mode 100644 workflow/workflow-designer-ui/src/main/frontend/.eslintrc create mode 100644 workflow/workflow-designer-ui/src/main/frontend/.gitignore create mode 100644 workflow/workflow-designer-ui/src/main/frontend/__mocks__/fileMock.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/__mocks__/sdc-ui/lib/react/SVGIcon.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/external-resources/ping/ping create mode 100644 workflow/workflow-designer-ui/src/main/frontend/index.html create mode 100644 workflow/workflow-designer-ui/src/main/frontend/jest.config.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/jsconfig.json create mode 100644 workflow/workflow-designer-ui/src/main/frontend/package.json create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/_features.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_expandableInput.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_inputOptions.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_notifications.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_searchInput.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_validationForm.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/resources/scss/style.scss create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/App.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/appConstants.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/appSelectors.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/config/Configuration.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/config/config.json create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSelectors-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSelectors.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/AddWorkflow.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Header.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Main.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/Version.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/VersionView.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/composition/newDiagram.bpmn create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersion.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersionView.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/create/createVersionConstants.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/create/views/NewVersionContainer.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/general/General.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/general/GeneralView.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/general/generalApi.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/general/generalSelectors.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutput.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/__tests__/inputOutputActions-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/__tests__/inputOutputReducer-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/__tests__/inputOutputSelectors-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/inputOutputActions.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/inputOutputConstants.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/inputOutputReducer.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/inputOutputSelectors.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/inputOutputValidations.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/DataRow.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/NoDataRow.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/Tab.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableBody.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableHead.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionApi.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionConstants.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionController.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionControllerView.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/VersionControllerView_snapshot-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/versionControllerConstants.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/versionControllerSelectors.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/ActionButtons.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/SvgButton.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionButton.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionSelect.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionsContainer.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/WorkflowTitle.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionReducer.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionSaga.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflow.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflowView.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/__tests__/CreateWorkflowView_snapshot-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/__tests__/__snapshots__/CreateWorkflowView_snapshot-test.js.snap create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/__tests__/createWorkflowSaga-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/__tests__/createWorkflowSelector-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowApi.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowConstants.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowSaga.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowSelector.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/Overview.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/OverviewView.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/overviewApi.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/overviewConstansts.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/overviewReducer.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/overviewSagas.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/overviewSelectors.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/VersionList/VersionListItem.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/VersionList/index.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/VersionTree.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/WorkflowDetails.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/WorkflowHeader.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/WorkflowVersions.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowConstants.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowReducer.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowSelectors.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/i18n/I18n.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/i18n/i18next-scanner.config.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/i18n/languages.json create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/i18n/translationSaga.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/index.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/rootReducers.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/rootSaga.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/routes.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/services/restAPIUtil.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/components/Description/index.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/components/Select/index.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/components/VersionInfo/index.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/errorResponseHandler/errorResponseHandler.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/loader/Loader.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/loader/LoaderConstants.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/loader/LoaderReducer.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/loader/__tests__/loaderReducer-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/modal/ModalWrapper.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/modal/ModalWrapperView.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/modal/__tests__/modalWrapperActions-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/modal/__tests__/modalWrapperReducer-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/modal/modalWrapperActions.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/modal/modalWrapperComponents.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/modal/modalWrapperReducer.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/navigationSideBar/NavigationLink.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/navigationSideBar/NavigationMenu.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/navigationSideBar/NavigationMenuItem.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/navigationSideBar/NavigationMenuItems.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/navigationSideBar/index.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/notifications/Notifications.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/notifications/NotificationsView.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/notifications/__tests__/NotificationView_snapshot-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/notifications/__tests__/__snapshots__/NotificationView_snapshot-test.js.snap create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/notifications/__tests__/notificationsReducer-test.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/notifications/notificationsActions.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/notifications/notificationsConstants.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/notifications/notificationsReducer.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/notifications/notificationsSagas.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/searchInput/SearchInput.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/shared/tree/Tree.jsx create mode 100644 workflow/workflow-designer-ui/src/main/frontend/src/store.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/testSetup/fileTransform.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/tools/ModuleRedirectPlugin.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/tools/devConfig.defaults.json create mode 100644 workflow/workflow-designer-ui/src/main/frontend/tools/getDevConfig.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/tools/mocks/mock.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/tools/proxy-server.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/webpack.config.js create mode 100644 workflow/workflow-designer-ui/src/main/frontend/yarn.lock create mode 100755 workflow/workflow-designer-ui/src/main/java/org/onap/workflow/web/TransparentProxy.java create mode 100755 workflow/workflow-designer-ui/src/main/webapp/WEB-INF/jetty-web.xml create mode 100755 workflow/workflow-designer-ui/src/main/webapp/WEB-INF/web.xml diff --git a/workflow/pom.xml b/workflow/pom.xml index ea4edbcf..e51acccc 100644 --- a/workflow/pom.xml +++ b/workflow/pom.xml @@ -10,6 +10,8 @@ pom + 1.8 + 1.8 UTF-8 UTF-8 1.3.0-SNAPSHOT diff --git a/workflow/workflow-designer-be/pom.xml b/workflow/workflow-designer-be/pom.xml index b76dc467..92c4c009 100644 --- a/workflow/workflow-designer-be/pom.xml +++ b/workflow/workflow-designer-be/pom.xml @@ -14,8 +14,6 @@ - 1.8 - 1.8 2.0.3.RELEASE 1.2.0.Final 1.18.0 diff --git a/workflow/workflow-designer-ui/pom.xml b/workflow/workflow-designer-ui/pom.xml old mode 100644 new mode 100755 index 652aec65..a841a5aa --- a/workflow/workflow-designer-ui/pom.xml +++ b/workflow/workflow-designer-ui/pom.xml @@ -22,7 +22,7 @@ 4.0.0 workflow-designer-ui - pom + war org.onap.sdc.workflow_designer @@ -30,5 +30,152 @@ 1.3.0-SNAPSHOT + + + + + + + + org.eclipse.jetty + jetty-proxy + 9.4.11.v20180605 + + + javax.servlet + javax.servlet-api + 3.0.1 + provided + + + + + + + com.github.eirslett + frontend-maven-plugin + 1.6 + + src/main/frontend + target + + + + install node and yarn + + install-node-and-yarn + + generate-resources + + v9.4.0 + v1.7.0 + + + + yarn install + + yarn + + + install + + + + yarn run webpack build + + yarn + + + false + build + + + + ui test + + yarn + + + false + test-build ${jest.command} + ${skipTests} + + test + + + + + org.apache.maven.plugins + maven-war-plugin + 3.2.2 + + + + src/main/frontend/dist + + *.html + *.js + + + + src/main/frontend/external-resources/ping/ + true + + ping + + + + + + + + + + jest-windows-profile + + + windows + + + + --runInBand + + + + docker + + false + + + + + io.fabric8 + docker-maven-plugin + + + + onap/workflow-frontend + + + ${project.version} + + jetty:9.4.11-alpine + root + + artifact + /var/lib/jetty/webapps + + + java -DproxyTo=$BACKEND $JAVA_OPTIONS -jar $JETTY_HOME/start.jar + + + + + + + + + + diff --git a/workflow/workflow-designer-ui/src/main/frontend/.babelrc b/workflow/workflow-designer-ui/src/main/frontend/.babelrc new file mode 100644 index 00000000..97edcc9f --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/.babelrc @@ -0,0 +1,15 @@ +{ + "presets": [["env", { + "targets": { + "browsers": ["last 2 versions", "Firefox >= 47"] + } + }], "react"], + "plugins": [ + "react-hot-loader/babel", + "transform-object-rest-spread", + "transform-class-properties", + "transform-runtime", + "transform-decorators-legacy" + ], + "sourceMap": "inline" +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/.eslintignore b/workflow/workflow-designer-ui/src/main/frontend/.eslintignore new file mode 100644 index 00000000..2410c0ec --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/.eslintignore @@ -0,0 +1,3 @@ +webpack.i18next-scanner.config.js +tools +common diff --git a/workflow/workflow-designer-ui/src/main/frontend/.eslintrc b/workflow/workflow-designer-ui/src/main/frontend/.eslintrc new file mode 100644 index 00000000..0ce8aa4c --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/.eslintrc @@ -0,0 +1,48 @@ +{ + "root": true, + + "parser": "babel-eslint", + + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:jest/recommended", + "prettier" + ], + + "plugins": ["prettier", "react"], + + "env": { + "browser": true, + "commonjs": true, + "es6": true, + "jest": true, + "node": true + }, + + "parserOptions": { + "ecmaVersion": 6, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true, + "generators": true, + "experimentalObjectRestSpread": true + } + }, + + "rules": { + "no-console": 0, + "prettier/prettier": [ + "error", + { + "singleQuote": true, + "jsxBracketSameLine": true, + "tabWidth": 4 + } + ] + }, + + "globals": { + "DEBUG": false + } +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/.gitignore b/workflow/workflow-designer-ui/src/main/frontend/.gitignore new file mode 100644 index 00000000..d2d69816 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/.gitignore @@ -0,0 +1,19 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules +/node-install +.idea/ + +# testing +/coverage + +# production +/target +/dist + +# misc +npm-debug.log* +yarn-debug.log* +yarn-error.log* +/tools/devConfig.json diff --git a/workflow/workflow-designer-ui/src/main/frontend/__mocks__/fileMock.js b/workflow/workflow-designer-ui/src/main/frontend/__mocks__/fileMock.js new file mode 100644 index 00000000..2297d426 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/__mocks__/fileMock.js @@ -0,0 +1,19 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +'use strict'; + +module.exports = 'test-file-stub'; diff --git a/workflow/workflow-designer-ui/src/main/frontend/__mocks__/sdc-ui/lib/react/SVGIcon.js b/workflow/workflow-designer-ui/src/main/frontend/__mocks__/sdc-ui/lib/react/SVGIcon.js new file mode 100644 index 00000000..2136c492 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/__mocks__/sdc-ui/lib/react/SVGIcon.js @@ -0,0 +1,51 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import React from 'react'; + +const SVGIcon = ({ + name, + onClick, + label, + className, + iconClassName, + labelClassName, + labelPosition, + color, + disabled, + ...other +}) => { + let colorClass = color !== '' ? '__' + color : ''; + let classes = `svg-icon-wrapper ${iconClassName} ${className} ${colorClass} ${ + onClick ? 'clickable' : '' + } ${disabled ? 'disabled' : ''} ${labelPosition}`; + + let iconMock = ( +
+ + {label && ( + + {label} + + )} +
+ ); + + return iconMock; +}; +export default SVGIcon; diff --git a/workflow/workflow-designer-ui/src/main/frontend/external-resources/ping/ping b/workflow/workflow-designer-ui/src/main/frontend/external-resources/ping/ping new file mode 100644 index 00000000..9a02d73d --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/external-resources/ping/ping @@ -0,0 +1,11 @@ +{ + "workflowVersion": "1.3.0-SNAPSHOT", + "componentsInfo": [ + { + "healthCheckComponent": "FE", + "healthCheckStatus": "UP", + "version": "1.3.0-SNAPSHOT", + "description": "OK" + } + ] +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/index.html b/workflow/workflow-designer-ui/src/main/frontend/index.html new file mode 100644 index 00000000..c3a6f3b6 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/index.html @@ -0,0 +1,13 @@ + + + + + + + + SDC Workflow App + + +
+ + diff --git a/workflow/workflow-designer-ui/src/main/frontend/jest.config.js b/workflow/workflow-designer-ui/src/main/frontend/jest.config.js new file mode 100644 index 00000000..58bfdf5d --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/jest.config.js @@ -0,0 +1,47 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +module.exports = { + collectCoverageFrom: ['src/**/*.{js,jsx,mjs}'], + setupFiles: ['jest-localstorage-mock'], + testMatch: [ + '/src/**/__tests__/**/*.{js,jsx,mjs}', + '/src/**/?(*.)(spec|test).{js,jsx,mjs}' + ], + testEnvironment: 'node', + testURL: 'http://localhost', + globals: { + DEBUG: false + }, + transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$'], + moduleNameMapper: { + '\\.(css|scss)$': 'identity-obj-proxy', + '\\.(gif|ttf|eot|svg)$': '/__mocks__/fileMock.js', + '^src(.*)$': '/src$1', + '^config(.*)$': '/src/config$1', + '^features(.*)$': '/src/features$1', + '^common(.*)$': '/common$1', + '^services(.*)$': '/src/services$1', + '^shared(.*)$': '/src/shared$1', + '^i18n(.*)$': '/src/i18n$1' + }, + transform: { + '^.+\\.(js|jsx|mjs)$': '/node_modules/babel-jest', + '^(?!.*\\.(js|jsx|mjs|css|json)$)': + '/testSetup/fileTransform.js' + }, + roots: ['/src/features', '/src/shared'] +}; diff --git a/workflow/workflow-designer-ui/src/main/frontend/jsconfig.json b/workflow/workflow-designer-ui/src/main/frontend/jsconfig.json new file mode 100644 index 00000000..cb990650 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/jsconfig.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "config/*": ["./src/config/*"], + "features/*": ["./src/features/*"], + "shared/*": ["./src/shared/*"], + "services/*": ["./src/services/*"] + } + }, + "include": ["src"] +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/package.json b/workflow/workflow-designer-ui/src/main/frontend/package.json new file mode 100644 index 00000000..911eb629 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/package.json @@ -0,0 +1,95 @@ +{ + "name": "sdc-workflow", + "license": "SEE LICENSE IN LICENSE", + "scripts": { + "start": "webpack-dev-server --mode=development --progress --hot --inline", + "start-mock": "webpack-dev-server --mode=development --progress --hot --inline --env=mock", + "build": "webpack --mode=production", + "test": "jest --env=jsdom", + "test-dev": "jest --env=jsdom --watch", + "test-coverage": "jest --coverage --env=jsdom && start ./coverage/lcov-report/index.html", + "test-build": "jest --coverage --env=jsdom", + "lint-fix": "eslint -c .eslintrc --fix --ext .js --ext .jsx src", + "scan-for-i18n-keys": "i18next-scanner --config ./src/i18n/i18next-scanner.config.js 'src/**/*.{js,jsx }' --output dist" + }, + "dependencies": { + "axios": "^0.18.0", + "bpmn-js": "^2.3.0", + "bpmn-js-properties-panel": "^0.20.0", + "camunda-bpmn-moddle": "^3.0.0", + "classnames": "^2.2.6", + "d3-hierarchy": "^1.1.6", + "d3-selection": "^1.3.0", + "dateformat": "^3.0.3", + "enzyme": "^3.3.0", + "enzyme-adapter-react-16": "^1.1.1", + "http-proxy-middleware": "^0.17.4", + "lodash": "^3.0.1", + "md5": "^2.2.1", + "moment": "^2.18.1", + "prop-types": "^15.6.1", + "qs": "^6.5.2", + "react": "^16.2.0", + "react-datepicker": "^0.48.0", + "react-dom": "^16.3.2", + "react-hot-loader": "^4.3.3", + "react-infinite-scroller": "^1.2.0", + "react-redux": "^5.0.6", + "react-redux-i18n": "^1.9.2", + "react-router": "^4.3.1", + "react-router-dom": "^4.2.2", + "react-select": "^1.2.1", + "react-transition-group": "^2.3.1", + "redux": "^3.7.2", + "redux-actions": "^2.4.0", + "redux-saga": "^0.16.0", + "redux-thunk": "^2.3.0", + "reselect": "^3.0.1", + "sdc-ui": "1.6.55", + "uuid-js": "^0.7.5", + "validator": "^10.2.0" + }, + "devDependencies": { + "babel-core": "^6.24.0", + "babel-eslint": "^8.2.1", + "babel-jest": "^22.1.0", + "babel-loader": "7.1.4", + "babel-plugin-transform-class-properties": "^6.10.2", + "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-plugin-transform-object-rest-spread": "^6.8.0", + "babel-plugin-transform-runtime": "^6.22.0", + "babel-preset-env": "^1.6.1", + "babel-preset-react": "^6.23.0", + "clean-webpack-plugin": "^0.1.19", + "css-loader": "^0.23.1", + "eslint": "^4.18.1", + "eslint-config-prettier": "^2.9.0", + "eslint-loader": "^2.0.0", + "eslint-plugin-import": "^2.9.0", + "eslint-plugin-jest": "^21.17.0", + "eslint-plugin-prettier": "^2.6.0", + "eslint-plugin-react": "^7.7.0", + "html-webpack-plugin": "^3.2.0", + "i18next-scanner": "^2.4.6", + "identity-obj-proxy": "^3.0.0", + "install": "^0.11.0", + "jest": "^22.0.5", + "jest-localstorage-mock": "^2.2.0", + "less": "^3.0.4", + "less-loader": "^4.1.0", + "node-sass": "^4.7.2", + "npm": "^6.0.1", + "raw-loader": "^0.5.1", + "react-test-renderer": "^16.4.1", + "sass-loader": "^6.0.6", + "source-map-loader": "^0.1.5", + "uglifyjs-webpack-plugin": "^1.1.6", + "webpack": "^4.5.0", + "webpack-api-mocker": "^1.4.3", + "webpack-cli": "^2.0.14", + "webpack-dev-server": "^3.1.3", + "webpack-glob-entry": "^2.1.1", + "webpack-sass-loaders": "^1.0.0", + "webpack-shell-plugin": "^0.5.0" + } +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss new file mode 100644 index 00000000..6f4e6e91 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss @@ -0,0 +1,5 @@ +@import 'common/fonts'; +@import '../../node_modules/sdc-ui/lib/style/scss/common/variables.scss'; +@import '../../node_modules/sdc-ui/lib/style/scss/common/typography.scss'; +@import 'common/customVariables'; +@import 'common/utils'; diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss new file mode 100644 index 00000000..974317e8 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss @@ -0,0 +1,12 @@ +@import 'components/layout'; +@import 'components/inputOptions'; +@import 'components/navigationSideBar'; +@import 'components/versionController'; +@import 'components/expandableInput'; +@import 'components/notifications'; +@import 'components/searchInput'; +@import 'components/loader'; +@import 'components/tree'; +@import 'components/customModal'; + + diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/_features.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/_features.scss new file mode 100644 index 00000000..c83b6e75 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/_features.scss @@ -0,0 +1,6 @@ +@import "features/general"; +@import "features/workflow"; +@import "features/catalog"; +@import "features/composition"; +@import "features/overview"; +@import "features/inputOutput"; diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss new file mode 100644 index 00000000..997e0a21 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss @@ -0,0 +1,44 @@ +$cursor-disabled: not-allowed !default; +$cursor-pointer: pointer; + +.flex { + display: flex; + flex: 1; +} + +.flex-column { + @extend .flex; + flex-direction: column; +} + +.text-uppercase { + text-transform: uppercase; +} + +.content-area { + padding: 30px 60px 70px 60px; + overflow-y: auto; + overflow-x: hidden; + height: 100%; + &.no-padding-content-area { + padding: 0; + } +} + +.page-title { + @include heading-1; + @extend .text-uppercase !optional; + margin-bottom: 20px; + color: $blue; +} + +.disabled { + opacity: 0.7 !important; + cursor: $cursor-disabled; +} + +@mixin semi-bold() { + font-weight: 600; +}; + + diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss new file mode 100644 index 00000000..9d71cf7e --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss @@ -0,0 +1,31 @@ +/* Fonts */ +@font-face { + font-family: 'OpenSans-Regular'; + font-style: normal; + font-weight: 400; + src: + local('Open Sans Regular'), + local('OpenSans-Regular'), + url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'), + url(http://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); + } + @font-face { + font-family: 'OpenSans-Italic'; + font-style: normal; + font-weight: 400; + src: + local('Open Sans Italic'), + local('OpenSans-Italic'), + url(https://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), + url(http://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff'); + } + @font-face { + font-family: 'OpenSans-Semibold'; + font-style: normal; + font-weight: 400; + src: + local('Open Sans Semibold'), + local('OpenSans-Semibold'), + url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'), + url(http://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff'); + } \ No newline at end of file diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss new file mode 100644 index 00000000..99b1ff5d --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss @@ -0,0 +1,313 @@ + + +/* Prefix */ + +$box-sizing-prefix: webkit moz spec; +$border-radius-prefix: webkit spec; +$box-shadow-radius-prefix: webkit moz spec; +$text-shadow-radius-prefix: spec; +$text-shadow-prefix: spec; +$box-shadow-prefix: all; +$linear-gradient-prefix: all; +$transition-prefix: webkit moz o spec; +$flex-prefix: webkit spec; +$browserPrefixes: webkit moz o ms; + +@mixin prefix($property, $value, $prefixeslist: 'all') { + @if $prefixeslist == all { + -webkit-#{$property}: $value; + -moz-#{$property}: $value; + -ms-#{$property}: $value; + -o-#{$property}: $value; + #{$property}: $value; + } @else { + @each $prefix in $prefixeslist { + @if $prefix == webkit { + -webkit-#{$property}: $value; + } @else if $prefix == moz { + -moz-#{$property}: $value; + } @else if $prefix == ms { + -ms-#{$property}: $value; + } @else if $prefix == o { + -o-#{$property}: $value; + } @else if $prefix == spec { + #{$property}: $value; + } @else { + @warn "No such prefix: #{$prefix}"; + } + } + } +} + +/* Value Prefix*/ +@mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) { + + @if $prefixeslist == all { + #{property} : -webkit-#{$valuesuffix}($from, $to); + #{property} : -moz-#{$valuesuffix}($from, $to); + #{property} : -o-#{$valuesuffix}($from, $to); + #{property} : -ms-#{$valuesuffix}($from, $to); + + } @else { + @each $prefix in $prefixeslist { + @if $prefix == webkit { + #{property} : -webkit-#{$valuesuffix}($from, $to); + } @else if $prefix == moz { + #{property} : -moz-#{$valuesuffix}($from, $to); + } @else if $prefix == ms { + #{property} : -ms-#{$valuesuffix}($from, $to); + } @else if $prefix == o { + #{property} : -o-#{$valuesuffix}($from, $to); + } @else { + @warn "No such prefix: #{$prefix}"; + } + } + } +} + +/* Box sizing */ +@mixin box-sizing($value: border-box) { + @include prefix(box-sizing, $value, $box-sizing-prefix); +} + +/* Borders & Shadows */ +@mixin box-shadow($value) { + @include prefix(box-shadow, $value, $box-shadow-radius-prefix); +} + +@mixin text-shadow($value) { + @include prefix(text-shadow, $value, $text-shadow-radius-prefix); +} + +@mixin border-radius($value, $positions: all) { + @if ($positions == all) { + @include prefix(border-radius, $value, $border-radius-prefix); + } @else { + @each $position in $positions { + @include prefix(border-#{$position}-radius, $value, $border-radius-prefix); + } + } + +} + +@mixin transition($value) { + @include prefix(transition, $value, $transition-prefix); +} + +/* Opacity */ +@mixin opacity($alpha) { + $ie-opacity: round($alpha * 100); + opacity: $alpha; + filter: unquote("alpha(opacity = #{$ie-opacity})"); +} + +/* Ellipsis */ +@mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) { + overflow: hidden; + text-overflow: ellipsis; + width: $width; + white-space: nowrap; + display: $display; + max-width: $max-width; +} + +@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white){ + overflow: hidden; + position: relative; + line-height: $lineHeight; + max-height: $lineHeight * $lineCount; + text-align: justify; + word-break: break-all; + // margin-right: -1em; + padding-right: 1em; + &:before { + content: '...'; + position: absolute; + right: 3px; + bottom: 0; + } + &:after { + content: ''; + position: absolute; + right: 0; + width: 1em; + height: 1em; + margin-top: 0.2em; + background: $bgColor; + } +} + +@mixin gradient($from, $to) { + /* fallback/image non-cover color */ + background-color: $from; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); + @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix); +} + +/* Vertical placement of multuple lines of text */ +@mixin vertical-text($height) { + position: absolute; + top: 50%; + margin-top: -$height/2; +} + +@mixin text-vertical-align($align: middle) { + display: table; + width: 100%; + + & > * { + vertical-align: $align; + display: table-cell; + } +} + +@mixin center-element($width) { + width: $width; + margin-left: auto; + margin-right: auto; +} + +@mixin center-content($width) { + & > * { + @include center-element($width); + } +} + +/* transform-rotate */ +// @mixin +// Defines a 2D rotation, the angle is specified in the parameter +// @param +// $deg - angle in degrees +@mixin transform-rotate($deg) { + transform: rotate($deg + deg); /* IE10 and Mozilla */ + -ms-transform: rotate($deg + deg); /* IE 9 */ + -webkit-transform: rotate($deg + deg); /* Safari and Chrome */ +} + +/* transform-translate */ +// @mixin +// Defines a 2D rotation, the angle is specified in the parameter +// @param +// $deg - angle in degrees +@mixin transform-translate($x, $y) { + transform: translate($x, $y); /* IE10 and Mozilla */ + -ms-transform: translate($x, $y); /* IE 9 */ + -webkit-transform: translate($x, $y); /* Safari and Chrome */ +} + +/* transform-scale */ +// @mixin +// Defines a 2D scale transformation, changing the elements width and height +// @param +// $width - width +// @param +// $height - height +@mixin transform-scale($width, $height) { + transform: scale($width, $height); /* IE10 and Mozilla */ + -ms-transform: scale($width, $height); /* IE 9 */ + -webkit-transform: scale($width, $height); /* Safari and Chrome */ +} + +@mixin scrollable() { + ::-webkit-scrollbar { + width: 8px; + } +} + +@mixin create-circle($size, $bgcolor) { + border-radius: 50%; + width: $size; + height: $size; + background: $bgcolor; + border: 3px solid $bgcolor; + display: flex; + align-items: center; + justify-content: center; +} + +/**/ +@mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) { + + @keyframes #{$animationType} { + from { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($fromValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + to { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($toValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + } + @-moz-keyframes #{$animationType}{ + /* Firefox */ + from { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($fromValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + to { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($toValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + } + @-webkit-keyframes #{$animationType} { + /* Safari and Chrome */ + from { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($fromValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + to { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($toValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + } + @-o-keyframes #{$animationType} { + /* Opera */ + from { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($fromValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + to { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($toValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + } +} + + +/**/ +@mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) { + @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity)); +} + +/* percent-plus-value */ +// @mixin +// Calculate length property (e.g. width, margin) by adding a value (e.g. in pixels) +// to a percentage of container height/width +@mixin percent-plus-value($property, $value, $percent: 100%) { + $string: 'calc(' + $percent + ' + ' + $value + ')'; + #{$property}: unquote($string); +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss new file mode 100644 index 00000000..48cd4cff --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss @@ -0,0 +1,16 @@ +.sdc-modal { + .custom-modal-wrapper { + padding: 35px 60px 60px 60px; + width: auto; + } + +} + +.modal-action-bar { + display: flex; + justify-content: flex-end; + + button:first-child { + margin-right: 2em; + } +} \ No newline at end of file diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_expandableInput.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_expandableInput.scss new file mode 100644 index 00000000..2484a73e --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_expandableInput.scss @@ -0,0 +1,56 @@ +.expandable-input-top { + display: flex; + height: 22px; + .expandable-input-wrapper { + display: flex; + &.closed { + .svg-icon + { + &.__search { + height: 17px; + width: 17px; + transition: fill 0.5s ease-in; + fill: $blue; + cursor: pointer; + &:hover { + transition: fill 0.5s ease-in; + fill: $dark-blue; + } + } + } + } + &.opened { + .svg-icon-wrapper { + margin-left: 3px; + } + .svg-icon { + &.__search { + height: 17px; + width: 17px; + fill: $dark-blue; + } + } + .svg-icon { + &.__close { + margin-left: 7px; + opacity: 0.6; + fill: $dark-gray; + &:hover { + opacity: 1; + } + } + } + } + .expandable-input-control { + .form-control { + border: none; + background-color: transparent; + border-radius: 0; + border-bottom: 1px solid $gray; + height: 22px; + padding: 0 5px; + } + margin: 0; + } + } +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_inputOptions.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_inputOptions.scss new file mode 100644 index 00000000..4f7e309a --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_inputOptions.scss @@ -0,0 +1,48 @@ +.disabled { + .Select-control { + background-color: $silver; + .Select-placeholder { + color: $dark-gray; + } + } +} + +.input-options { + display: flex; + border: 1px solid $light-gray; + border-radius: 2px; + height: 30px; + &:hover { + border-color: $gray; + } + .input-options-select { + float: left; + border: none; + transition-property: width; + transition-duration: 300ms; + padding-top:0px; + padding-bottom: 0px; + height:28px; + + } + + .input-options-other{ + float: left; + height: 30px; + border: none; + padding-top:0px; + padding-bottom: 0px; + height:28px; + } + .input-options-separator { + width: 1px; + height: 24px; + margin-top: 2px; + margin-bottom: 2px; + border:1px solid $light-gray; + } +} + +.input-options.has-error { + border-color: $red; +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss new file mode 100644 index 00000000..bcd07ebe --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss @@ -0,0 +1,16 @@ +.workflow-app { + height: 100%; + * { + box-sizing: border-box; + } + + .version-wrapper { + height: 100%; + display: flex; + flex-direction: column; + } +} + +#root { + height: 100%; +} \ No newline at end of file diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss new file mode 100644 index 00000000..eb91d7c7 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss @@ -0,0 +1,160 @@ +.onboarding-loader { + .onboarding-loader-backdrop { + top: 0; + right: 0; + bottom: 0; + left: 0; + position: absolute; + background-color: #E1E4E6; + opacity: 0.5; + } + .tlv-loader { + height: 63px; + width: 63px; + position: absolute; + top: 30%; + left: 50%; + margin-top: -10.5px; + margin-left: -10.5px; + } + .tlv-loader.large { + transform: scale(1); + } + .tlv-loader::before { + background-color: $gray; + border-radius: 50%; + box-shadow: 21px 21px 0px 0px $gray, 0px 42px 0px 0px $gray, -21px 21px 0px 0px $gray; + content: ''; + display: block; + height: 21px; + width: 21px; + position: absolute; + left: 50%; + margin-left: -10.5px; + } + .tlv-loader::after { + border-radius: 50%; + content: ''; + display: block; + position: absolute; + height: 21px; + width: 21px; + animation: dot-move-2 4.5s infinite ease-in; + } + @keyframes dot-move { + 0% { + background-color: $blue; + left: 21px; + top: 0; + } + 25% { + background-color: $yellow; + left: 42px; + top: 21px; + } + 50% { + background-color: $light-purple; + left: 21px; + top: 42px; + } + 75% { + background-color: $light-green; + left: 0; + top: 21px; + } + 100% { + background-color: $blue; + left: 21px; + top: 0; + } + } + @keyframes dot-move-2 { + 0% { + background-color: $blue; + left: 21px; + top: 0; + } + 6.25% { + background-color: $blue; + left: 42px; + top: 21px; + } + 12.5% { + background-color: $blue; + left: 21px; + top: 42px; + } + 18.75% { + background-color: $blue; + left: 0; + top: 21px; + } + 25% { + background-color: $yellow; + left: 21px; + top: 0; + } + 31.25% { + background-color: $yellow; + left: 42px; + top: 21px; + } + 37.5% { + background-color: $yellow; + left: 21px; + top: 42px; + } + 43.75% { + background-color: $yellow; + left: 0; + top: 21px; + } + 50% { + background-color: $light-purple; + left: 21px; + top: 0; + } + 56.25% { + background-color: $light-purple; + left: 42px; + top: 21px; + } + 62.5% { + background-color: $light-purple; + left: 21px; + top: 42px; + } + 68.75% { + background-color: $light-purple; + left: 0; + top: 21px; + } + 75% { + background-color: $light-green; + left: 21px; + top: 0; + } + 81.25% { + background-color: $light-green; + left: 42px; + top: 21px; + } + 87.5% { + background-color: $light-green; + left: 21px; + top: 42px; + } + 93.75% { + background-color: $light-green; + left: 0; + top: 21px; + } + 100% { + background-color: $blue; + left: 21px; + top: 0; + } + } + } + + \ No newline at end of file diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss new file mode 100644 index 00000000..695dc6a5 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss @@ -0,0 +1,63 @@ +.workflow-navigation-side-bar { + width: 245px; + height: 100%; + background-color: $white; + border-right: 1px solid $light-gray; + @include box-shadow(1px -1px 3px 0px $silver); + border-bottom: 0; + + .navigation-side-content { + overflow: hidden; + height: 100%; + + .navigation-group { + height: 100%; + display: flex; + flex-direction: column; + background-color: $light-silver; + .group-name { + @include heading-4; + @include semi-bold; + @include ellipsis; + display: block; + padding: 24px 12px 13px 40px; + background-color: $white; + border-bottom: 1px solid $silver; + } + } + + .navigation-group-items { + padding-left: 20px; + + .navigation-group-item { + @include body-1; + cursor: pointer; + margin: 18px 0; + padding-left: 20px; + color: $dark-gray; + line-height: 17px; + &.selected-item { + padding-left: 0; + .collapse.in { + padding-left: 20px; + } + } + .navigation-group-item-name { + @include ellipsis; + white-space: normal; + &.selected { + @include body-1; + @include semi-bold; + border-left: 4px solid $blue; + padding-left: 18px; + color: $blue; + } + &.bold-name { + @include body-1; + @include semi-bold; + } + } + } + } + } +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_notifications.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_notifications.scss new file mode 100644 index 00000000..cc44cfbc --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_notifications.scss @@ -0,0 +1,7 @@ +.workflow-notifications-container { + position: absolute; + &.position-top-right { + right: 30px; + top: 50px; + } +} \ No newline at end of file diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_searchInput.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_searchInput.scss new file mode 100644 index 00000000..efd68496 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_searchInput.scss @@ -0,0 +1,59 @@ +.search-input-top { + display: flex; + height: 22px; + .search-input-wrapper { + display: flex; + &.closed { + .svg-icon { + &.__search { + height: 17px; + width: 17px; + transition: fill 0.5s ease-in; + fill: $blue; + cursor: pointer; + &:hover { + transition: fill 0.5s ease-in; + fill: $dark-blue; + } + } + } + } + &.opened { + .svg-icon-wrapper { + margin-left: 3px; + } + .svg-icon { + &.__search { + height: 17px; + width: 17px; + fill: $dark-blue; + } + } + .svg-icon { + &.__close { + margin-left: 7px; + opacity: 0.6; + fill: $dark-gray; + &:hover { + opacity: 1; + } + } + } + } + .search-input-control { + .input-control { + border: none; + background-color: transparent; + border-radius: 0; + border-bottom: 1px solid $gray; + height: 22px; + padding: 0 5px; + outline: 0; + box-shadow: none; + transition: border-color ease-in-out 0.95s, + box-shadow ease-in-out 0.95s; + } + margin: 0; + } + } +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss new file mode 100644 index 00000000..1847ff30 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss @@ -0,0 +1,57 @@ + +.tree-view { + overflow: hidden; + + &.scrollable { + overflow: auto; + } + + .node { + text-shadow: none; + stroke: none; + + .outer-circle { + stroke: $blue; + stroke-width: 2px; + fill: $white; + } + + .inner-circle { + fill: $blue; + } + + text { + text-anchor: end; + @include body-2; + @include semi-bold; + fill: $blue; + } + + &.clickable { + cursor: pointer; + } + + &.selectedNode { + .outer-circle { + fill: $blue; + } + + .inner-circle { + fill: $blue; + } + + text { + fill: $blue; + } + } + } + + + .link { + fill: none; + stroke: $dark-gray; + stroke-opacity: 0.4; + stroke-width: 1.5px; + } + +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_validationForm.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_validationForm.scss new file mode 100644 index 00000000..176e5469 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_validationForm.scss @@ -0,0 +1,117 @@ +form { + .validation-form-content { + .validation-input-wrapper { + position: relative; + flex: 1; + } + .validation-radio-wrapper { + position: relative; + } + .sdc-tabs { + position: relative; + .invalid-tab:not(.sdc-tab-active) { + color: $red; + } + } + .validation-error-message { + &.bottom { + .tooltip-arrow { + border-bottom-color: $red; + } + } + &.right { + .tooltip-arrow { + border-right-color: $red; + } + } + &.left { + .tooltip-arrow { + border-left-color: $red; + } + } + .tooltip-inner { + background-color: $red; + } + } + .input-row { + padding-bottom: 32px; + &:only-child { + padding-bottom: 0; + } + &:last-child { + padding-bottom: 0; + } + .form-group { + margin-bottom: 0; + } + } + + .rows-section { + .row-flex-components { + display: flex; + } + .validation-input-wrapper { + flex: 1; + } + .empty-col { + flex: 1.2; + content: ' '; + } + .empty-two-col { + flex: 2.4; + content: ' '; + } + + .two-col { + flex: 2.2; + } + .three-col { + flex: 3.4; + } + .single-col { + flex: 1.2; + display: flex; + &:after { + flex: 0.2; + content: ' '; + } + @media (min-width: 1389px) { + &.add-line-break { + .control-label { + &:after { + content: "\00a0"; + display: block; + } + } + } + } + + } + } + } + + .validation-buttons { + padding: 20px 0; + text-align: right; + button:first-child { + margin-right: 15px; + } + .svg-icon { + height: 14px; + width: 14px; + } + .svg-icon.check { + fill: $white; + } + .svg-icon.close { + fill: $blue; + } + } +} + +.modal-body { + .validation-buttons { + padding: 20px 15px; + background-color: $light-silver; + } +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss new file mode 100644 index 00000000..fe397d31 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss @@ -0,0 +1,171 @@ +.version-controller-bar { + display: flex; + height: 70px; + border-bottom: 1px solid $silver; + background-color: transparent; + + .group-name-wrapper { + width: 245px; + .group-name { + @include heading-4; + @include semi-bold; + @include ellipsis; + display: block; + padding: 24px 12px 13px 40px; + background-color: $white; + } + } + + .vc-container { + display: flex; + flex: 1; + align-self: center; + background-color: transparent; + justify-content: space-between; + align-items: center; + padding-left: 16px; + padding-right: 40px; + border-left: 1px solid #eaeaea; + + .vc-separator { + border-left: 1px solid $silver; + height: 37px; + margin-left: 5px; + margin-right: 5px; + } + + .version-status-container { + .version-selector-more-versions { + color: $blue; + cursor: pointer; + } + + .version-selector { + margin-top: 0px; + padding-right: 10px; + margin-right: 15px; + margin-left: 10px; + border-color: $light-gray; + border-radius: 2px; + width: 243px; + height: 30px; + @include body-1; + } + + .version-section { + .form-group { + margin-right: 20px; + + .input-options { + border: none; + + .input-options-select { + padding-top: 4px; + } + } + } + } + + .vc-status { + display: flex; + padding-left: 20px; + border-left: $light-gray thin solid; + + .status-text { + align-self: center; + margin-top: 2px; + @include heading-5; + color: $dark-gray; + } + } + } + + .save-submit-cancel-container { + display: flex; + align-items: center; + height: 100%; + + .action-buttons, .select-action-buttons, .vc-save-section, .vc-submit-section { + display: flex; + align-items: center; + height: 100%; + cursor: $cursor-pointer; + + .vc-submit-button { + border: 1px solid $dark-gray; + width: 94px; + height: 30px; + border-radius: 2px; + padding-top: 5px; + padding-left: 10px; + margin-left: 10px; + margin-right: 10px; + + &:hover:not(.disabled) { + cursor: pointer; + background-color: $silver; + } + + &.disabled { + border-color: $light-gray; + } + + .vc-v-submit { + width: 11px; + height: 8px; + margin-right: 10px; + position: relative; + top: -1px; + } + } + + .certifyBtn { + margin-left: 10px; + } + + .version-control-buttons { + display: flex; + } + + .action-button-wrapper { + display: flex; + align-items: center; + height: 70px; + + &:hover:not(.disabled) { + background-color: $silver; + } + + &:active:not(.disabled) { + background-color: $light-gray; + } + + .action-buttons-svg { + padding-left: 10px; + padding-right: 10px; + + .svg-icon { + fill: $text-black; + height: 20px; + + &, &.__version-controller-save { width: 20px; } + &.__version-controller-permissions { width: 32px; } + &.__version-controller-undo, &.__version-controller-revert { width: 20px; } + &.__version-controller-sync, &.__version-controller-commit { width: 28px; } + } + } + + } + + .action-button-label { + @include body-4; + display: block; + height: 1em; + margin-top: 5px; + margin-bottom: 0; + } + + } + } + } +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss new file mode 100644 index 00000000..debb8b81 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss @@ -0,0 +1,95 @@ +.wf-catalog { + background-color: $light-silver; + height: 100%; + display: flex; + flex-direction: column; + .header { + align-items: center; + display: flex; + justify-content: flex-end; + background-color: $silver; + margin-bottom: 2px; + @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2)); + padding: 8px 60px 0 60px; + &__search { + height: 25px; + } + } + .main { + flex: 1; + &__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 25px 60px; + &__total { + @include body-1; + @include semi-bold; + color: $dark-gray; + } + &__order { + display: flex; + &__label { + @include body-1; + @include semi-bold; + color: $dark-gray; + } + &__alphabetical { + cursor: pointer; + display: flex; + &__label { + margin-left: 5px; + @include body-1; + color: $blue; + } + &__icon { + display: flex; + align-items: center; + margin-left: 5px; + .svg-icon { + width: 9px; + height: 9px; + } + &--flip { + transform: rotate(180deg); + } + } + } + } + } + &__content { + display: grid; + grid-template-columns: repeat(auto-fit, 204px); + grid-gap: 20px; + padding: 0 60px; + } + .add-workflow { + border: 2px dashed #a8b3b9; + width: 204px; + height: 204px; + padding: 10px; + box-sizing: border-box; + cursor: pointer; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: $gray; + &__icon { + color: $gray; + fill: $gray; + } + &__label { + text-transform: uppercase; + @include body-1; + } + &:hover { + color: $blue; + .svg-icon-wrapper { + color: $blue; + fill: $blue; + } + } + } + } +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss new file mode 100644 index 00000000..7ab294a2 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss @@ -0,0 +1,15 @@ +.composition-view { + display: flex; + width: 100%; + + .bpmn-container { + flex-basis: 100%; + height: 100%; + } + + .properties-panel { + &, .bpp-properties-panel { + height: 100%; + } + } +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss new file mode 100644 index 00000000..f99b8aad --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss @@ -0,0 +1,39 @@ +.general-page { + @include body-1; + padding: 0 100px 20px 100px; + background-color: #fff; + + .general-page-title { + height: 110px; + line-height: 110px; + @include heading-1; + @include semi-bold; + color: $dark-gray; + } + + .general-page-content { + display: grid; + grid-template-columns: 50% 50%; + grid-gap: 30px; + color: #444; + + .description-part textarea { + height: 200px; + } + + .version-info-part { + background-color: $light-silver; + height: 200px; + margin-top: 25px; + padding: 20px; + box-sizing: border-box; + .label { + @include body-3; + margin-bottom: 5px; + } + .value { + margin-bottom: 10px; + } + } + } +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss new file mode 100644 index 00000000..9bfe6cbc --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss @@ -0,0 +1,143 @@ +.input-output { + @mixin border($top: 1px, $right: 1px, $bottom: 1px, $left: 1px) { + border-width: $top $right $bottom $left; + border-style: solid; + border-color: $light-gray; + } + padding: 0 100px 20px 100px; + flex: 1; + overflow: auto; + + &__title { + height: 110px; + line-height: 110px; + @include heading-1; + @include semi-bold; + color: $dark-gray; + } + + &__header { + display: flex; + @include body-1; + @include semi-bold; + &__right { + flex: 1; + display: flex; + justify-content: flex-end; + align-items: center; + } + } + + &__tab { + padding: 12px; + @include border(1px, 1px, 0, 1px); + background-color: $light-silver; + color: $gray; + min-width: 128px; + text-align: center; + cursor: pointer; + &--active { + color: $blue; + padding-top: 9px; + border-top: 4px solid $blue; + background-color: $white; + } + & + & { + border-left: none; + } + } + + &__table { + &__thead { + background-color: $silver; + @include body-1; + @include semi-bold; + } + } + + &__tr { + display: flex; + @include border(); + &:hover:not(.no-data) { + background-color: $light-silver; + } + & + & { + border-top: none; + } + } + + &__th { + flex: 1; + padding: 10px; + color: $black; + display: flex; + align-items: center; + } + + &__td { + flex: 1; + display: flex; + align-items: center; + padding: 25px 30px; + &--empty { + padding: 20px; + color: $dark-gray; + @include body-1; + justify-content: center; + } + + .input-output-select { + width: 100%; + height: 32px; + border: solid 1px #d2d2d2; + border-radius: 2px; + color: #5a5a5a; + } + + .sdc-input { + width: 100%; + position: relative; + margin: unset; + .sdc-input__label { + display: none; + } + .sdc-input__input { + height: 32px; + } + .sdc-label__error { + margin: unset; + position: absolute; + bottom: -20px; + } + } + } + + &__add { + cursor: pointer; + @include border(0, 0, 0, 1px); + padding-left: 10px; + margin-left: 10px; + } + + &__search { + } + + &__td, + &__th { + &--unflex { + flex: unset; + justify-content: center; + text-align: center; + width: 140px; + } + &--icon { + width: 100px; + .svg-icon-wrapper { + cursor: pointer; + } + } + & + & { + @include border(0, 0, 0, 1px); + } + } +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss new file mode 100644 index 00000000..b713b93f --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss @@ -0,0 +1,290 @@ +.overview-page { + @include body-1; + @include base-font-regular; + padding: 25px; + + .overview-content { + display: flex; + flex-wrap: wrap; + + .workflow-details { + @extend .flex; + padding: 20px 0 0 60px; + flex-direction: column; + + .description-part textarea{ + height: 200px; + } + + .save-description { + display: flex; + justify-content: flex-end; + } + + .version-info-part { + background-color: $light-silver; + margin-top: 25px; + padding: 20px; + box-sizing: border-box; + .label { + @include body-3; + margin-bottom: 5px; + } + .value { + margin-bottom: 10px; + } + } + } + + .workflow-versions { + display: flex; + flex: 2; + } + } + + .overview-header { + @include heading-1; + text-transform: uppercase; + margin: 35px 0 35px 60px; + color: $blue; + } + + @mixin version-page-box-shadow() { + box-shadow: 1px 1px 0 0 rgba(24, 24, 24, 0.06); + } + + @mixin version-page-sub-title(){ + color: $text-black; + text-transform: uppercase; + //background-color: $white; + border-bottom: 1px solid $light-gray; + padding: 12px 0 10px 45px; + } + + .versions-page-view { + height: 100%; + overflow: auto; + padding: 0 35px 0 90px; + display: flex; + flex: 2; + flex-direction: column; + + .svg-icon-wrapper { + justify-content: flex-start; + } + + .create-new-version { + @extend .text-uppercase; + display: flex; + flex-direction: row-reverse; + color: $blue; + margin-left: auto; + cursor: pointer; + } + .newVersionDisabled > *, .svg-icon-wrapper{ + pointer-events: none; + color: $gray; + } + .version-page-header { + display: flex; + justify-content: space-between; + .versions-page-title { + @include heading-1; + text-transform: uppercase; + margin-bottom: 29px; + color: $blue; + } + .depricate-btn-wrapper { + display: flex; + justify-content: flex-end; + margin-bottom: 10px; + } + } + + .versions-page-list-and-tree { + display: flex; + margin-top: 20px; + + .version-tree-wrapper { + display: flex; + flex-direction: column; + transition: all 1s ease; + @include version-page-box-shadow(); + + .version-tree-title-container { + @include base-font-semibold(); + background-color: $light-silver; + display: flex; + align-items: center; + height: 40px; + @include version-page-sub-title(); + padding-right: 10px; + + .version-tree-full-screen { + margin-left: auto; + } + } + + .tree-view { + //background-color: $white; + flex: 1; + + .node:not(.selectedNode):hover { + .outer-circle, .inner-circle { + transform: scale(1.1); + } + } + } + } + } + + .version-list { + @extend .flex; + color: $text-black; + flex-direction: column; + + .version-list-items { + @extend .flex-column; + + .version-item-row { + border-bottom: 1px solid $silver; + + &:last-child { + border-bottom: none; + } + } + } + + .version-item-row { + $row-hover-color: lighten($blue, 54%); + $row-active-color: lighten($blue, 51%); + cursor: $cursor-pointer; + + display: flex; + align-items: center; + padding: 15px 30px; + @include version-page-box-shadow(); + height: 70px; + + &:hover { + background-color: $row-hover-color; + } + + &.selected { + box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 $blue; + background-color: $row-active-color; + + &:hover { + box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 lighten($blue, 35%); + } + } + + &.header-row { + height: 40px; + background-color: $light-silver; + + @include base-font-semibold(); + @include version-page-sub-title(); + padding: 15px 27px; + + &:hover { + pointer-events: none; + &:active { + @include version-page-box-shadow(); + } + } + .header-field.actions { + margin-right: 57px; + } + } + + .version-item-field { + @extend .flex; + margin-right: 10px; + + &.item-version, &.item-status { + flex: 0 1 10%; + color: $text-black; + } + + &.item-description, &.item-last-edited { + @include body-1; + color: $dark-gray; + } + + &.item-description, &.header-description { + flex: 2 1 0; + } + + &.item-description > .description-text { + margin-right: 10px; + @include ellipsis($max-width: 280px); + width: initial; + } + + &.item-actions { + display: flex; + flex: 1 1 3%; + justify-content: space-between; + } + + &.item-select, &.item-create { + @include body-1; + flex: 0 1 auto; + margin-right: 0; + + .svg-icon-wrapper { + fill: $blue; + color: $blue; + + &[disabled] { + cursor: default; + } + + .svg-icon { + width: 16px; + height: 16px; + } + + &:hover:not([disabled]) { + fill: $dark-blue; + color: $dark-blue; + } + } + } + + } + + /* To keep ellipsis hider's background the same color as row background */ + &:not(.selected):hover .item-description > .description-text:after { + background: $row-hover-color; + } + + &:hover:active .item-description > .description-text:after { + background: $row-active-color; + } + + } + + } + + &.clickable { + cursor: pointer; + } + } + +} + +.inputinput-selector { + padding-right: 10px; + border-color: $light-gray; + border-radius: 2px; + width: 100%; + height: 30px; + @include body-1; + + &:disabled { + @extend .disabled; + background-color: $silver; + } +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss new file mode 100644 index 00000000..58d1df98 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss @@ -0,0 +1,6 @@ +.workflow-view { + display: grid; + grid-template-columns: 245px 1fr; + height: auto; + flex: 1; +} \ No newline at end of file diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/style.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/style.scss new file mode 100644 index 00000000..95828ae2 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/style.scss @@ -0,0 +1,4 @@ +@import 'common'; +@import '../../node_modules/sdc-ui/lib/css/style.css'; +@import 'components'; +@import 'features'; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/App.js b/workflow/workflow-designer-ui/src/main/frontend/src/App.js new file mode 100644 index 00000000..f780c8ed --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/App.js @@ -0,0 +1,44 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +import { hot } from 'react-hot-loader'; +import React, { Component } from 'react'; +import { Route } from 'react-router-dom'; + +import 'resources/scss/style.scss'; +import 'bpmn-js-properties-panel/styles/properties.less'; +import { routes } from './routes'; + +const RouteWithSubRoutes = route => ( + } + /> +); + +class App extends Component { + constructor(props) { + super(props); + } + + render() { + return routes.map((route, i) => ( + + )); + } +} + +export default hot(module)(App); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/appConstants.js b/workflow/workflow-designer-ui/src/main/frontend/src/appConstants.js new file mode 100644 index 00000000..b1497a95 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/appConstants.js @@ -0,0 +1,36 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import { createAction } from 'redux-actions'; +export const LANG = 'en'; +export const VERSION_LEVEL_LIST = [ + { + id: '2', + name: 'Major', + value: '2' + }, + { + id: '1', + name: 'Minor', + value: '1' + } +]; + +export const NETWORK_GENERIC_ERROR = 'NETWORK_GENERIC_ERROR'; +export const genericNetworkErrorAction = createAction( + NETWORK_GENERIC_ERROR, + error => error +); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/appSelectors.js b/workflow/workflow-designer-ui/src/main/frontend/src/appSelectors.js new file mode 100644 index 00000000..657429e4 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/appSelectors.js @@ -0,0 +1,16 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +export const i18nSelector = state => state && state.i18n.locale; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/config/Configuration.js b/workflow/workflow-designer-ui/src/main/frontend/src/config/Configuration.js new file mode 100644 index 00000000..3e558dad --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/config/Configuration.js @@ -0,0 +1,59 @@ +/* + * Copyright © 2018 European Support Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import configData from './config.json'; + +class Configuration { + get(key) { + return configData[key]; + } + + set(key, value) { + var prev = configData[key]; + configData[key] = value; + return prev; + } + + setCatalogApiRoot(CatalogApiRoot) { + let restCatalogPrefix = CatalogApiRoot, + restPrefix = CatalogApiRoot.replace( + /\/feProxy\b[^:]*$/, + '/feProxy/onboarding-api' + ); + + this.set('restPrefix', restPrefix); + this.set('restCatalogPrefix', restCatalogPrefix); + } + + setCatalogApiHeaders(CatalogApiHeaders) { + this.set('CatalogApiHeaders', CatalogApiHeaders); + + let { userId: { value: UserID } = {} } = CatalogApiHeaders; + this.set('UserID', UserID); + } +} + +const configuration = new Configuration(); + +(function setDefaultRestPrefixes(configuration) { + configuration.set('restPrefix', configuration.get('defaultRestPrefix')); + configuration.set( + 'restCatalogPrefix', + configuration.get('defaultRestCatalogPrefix') + ); + configuration.set('appContextPath', configuration.get('appContextPath')); +})(configuration); + +export default configuration; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/config/config.json b/workflow/workflow-designer-ui/src/main/frontend/src/config/config.json new file mode 100644 index 00000000..f1121444 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/config/config.json @@ -0,0 +1,5 @@ +{ + "version": "0.1", + "appContextPath" : "/", + "defaultRestPrefix": "/wf" +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js new file mode 100644 index 00000000..503423f5 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js @@ -0,0 +1,47 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http: //www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import { connect } from 'react-redux'; + +import CatalogView from 'features/catalog/CatalogView'; +import { sort, scroll } from 'features/catalog/catalogActions'; +import { getSort, getWorkflows } from 'features/catalog/catalogSelectors'; + +import { showCustomModalAction } from 'shared/modal/modalWrapperActions'; +import { NEW_WORKFLOW_MODAL } from 'shared/modal/modalWrapperComponents'; +import { clearWorkflowAction } from 'features/workflow/workflowConstants'; + +const mapStateToProps = state => ({ + sort: getSort(state), + workflows: getWorkflows(state) +}); + +const mapDispatchToProps = dispatch => ({ + handleSort: payload => dispatch(sort(payload)), + handleScroll: (page, sort) => dispatch(scroll(page, sort)), + clearWorkflow: () => dispatch(clearWorkflowAction), + showNewWorkflowModal: () => + dispatch( + showCustomModalAction({ + customComponentName: NEW_WORKFLOW_MODAL, + title: 'New Workflow' + }) + ) +}); + +const Catalog = connect(mapStateToProps, mapDispatchToProps)(CatalogView); + +export default Catalog; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx new file mode 100644 index 00000000..0af791df --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx @@ -0,0 +1,113 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http: //www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; +import InfiniteScroll from 'react-infinite-scroller'; +import Workflows from 'features/catalog/views/Workflows'; +import AddWorkflow from 'features/catalog/views/AddWorkflow'; + +import Header from 'features/catalog/views/Header'; +import Main from 'features/catalog/views/Main'; + +import { NAME, ASC, DESC } from 'features/catalog/catalogConstants'; + +class CatalogView extends React.Component { + componentDidMount() { + const { clearWorkflow } = this.props; + + clearWorkflow(); + } + + handleAlphabeticalOrderByClick = e => { + e.preventDefault(); + + const { handleSort, sort } = this.props; + + const payload = { ...sort }; + + payload[NAME] = payload[NAME] === ASC ? DESC : ASC; + + handleSort(payload); + }; + + handleScroll = () => { + const { workflows, sort, handleScroll } = this.props; + const { page } = workflows; + + handleScroll(page, sort); + }; + + goToOverviewPage = id => { + const { history } = this.props; + history.push('/workflow/' + id + '/overview'); + }; + + render() { + const { workflows, sort, showNewWorkflowModal } = this.props; + + const alphabeticalOrder = sort[NAME]; + // TODO remove offset, fix hasMore, use size + const { total, results = [], /*size,*/ page, offset } = workflows; + + // const hasMore = total === 0 || size * (page + 1) < total; + const hasMore = offset !== undefined ? offset < 0 : page < 0; + + return ( +
+
+
+ +
+ + +
+ +
+
+ ); + } +} + +CatalogView.propTypes = { + history: PropTypes.object, + workflows: PropTypes.object, + sort: PropTypes.object, + handleScroll: PropTypes.func, + handleSort: PropTypes.func, + showNewWorkflowModal: PropTypes.func, + clearWorkflow: PropTypes.func +}; + +CatalogView.defaultProps = { + workflows: {}, + sort: {}, + handleScroll: () => {}, + showNewWorkflowModal: () => {}, + clearWorkflow: () => {} +}; + +export default CatalogView; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js new file mode 100644 index 00000000..15a9c8c5 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js @@ -0,0 +1,64 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import { + UPDATE, + SCROLL, + SORT, + LIMIT, + NAME, + ASC +} from 'features/catalog/catalogConstants'; +import { update, scroll, sort } from 'features/catalog/catalogActions'; + +describe('Catalog Actions', () => { + it('show have `update` action', () => { + expect(update()).toEqual({ + type: UPDATE + }); + }); + + it('show have `scroll` action', () => { + const page = 1; + const sort = {}; + + const expected = { + type: SCROLL, + payload: { + page, + sort, + size: LIMIT + } + }; + + expect(scroll(page, sort)).toEqual(expected); + }); + + it('show have `sort` action', () => { + const sortPayload = { + [NAME]: ASC + }; + + const expected = { + type: SORT, + payload: { + sort: sortPayload + } + }; + + expect(sort(sortPayload)).toEqual(expected); + }); +}); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js new file mode 100644 index 00000000..cebddb35 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js @@ -0,0 +1,52 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http: //www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +'use strict'; + +import catalogReducer, { initialState } from 'features/catalog/catalogReducer'; +import { update } from 'features/catalog/catalogActions'; + +describe('Catalog Reducer', () => { + it('returns the initial state', () => { + expect(catalogReducer(undefined, {})).toEqual(initialState); + }); + + it('returns correct state for workflows update action', () => { + const payload = { + total: 2, + size: 100, + page: 0, + results: [ + { + id: '755eab7752374a2380544065b59b082d', + name: 'Alfa', + description: 'description description 1', + category: null + }, + { + id: 'ef8159204dac4c10a85b29ec30b4bd56', + name: 'Bravo', + description: 'description description 2', + category: null + } + ] + }; + + const action = update(payload); + + expect(catalogReducer(initialState, action).workflows).toEqual(payload); + }); +}); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js new file mode 100644 index 00000000..f06d240f --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js @@ -0,0 +1,21 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http: //www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +'use strict'; + +describe('Catalog Sagas', () => { + it('Write test', () => {}); +}); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSelectors-test.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSelectors-test.js new file mode 100644 index 00000000..0aa73ce4 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSelectors-test.js @@ -0,0 +1,71 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http: //www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +'use strict'; + +import { + getCatalog, + getWorkflows, + getSort, + getQueryString +} from 'features/catalog/catalogSelectors'; + +describe('Catalog Selectors', () => { + const catalog = { + page: -1, + workflows: { + total: 2, + limit: 0, + offset: 0, + results: [ + { + id: '755eab7752374a2380544065b59b082d', + name: 'Alfa', + description: 'description description 1', + category: null + }, + { + id: 'ef8159204dac4c10a85b29ec30b4bd56', + name: 'Bravo', + description: 'description description 2', + category: null + } + ] + }, + sort: { + name: 'ASC', + date: 'DESC' + } + }; + + it('returns catalog', () => { + const state = { catalog }; + + expect(getCatalog(state)).toEqual(catalog); + }); + + it('returns catalog workflows', () => { + const state = { catalog }; + + expect(getWorkflows(state)).toEqual(catalog.workflows); + }); + + it('returns catalog sort', () => { + const state = { catalog }; + + expect(getSort(state)).toEqual(catalog.sort); + }); +}); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js new file mode 100644 index 00000000..5be27887 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js @@ -0,0 +1,35 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import { createActions } from 'redux-actions'; + +import { NAMESPACE, LIMIT } from 'features/catalog/catalogConstants'; + +export const { + [NAMESPACE]: { update, sort, scroll } +} = createActions({ + [NAMESPACE]: { + UPDATE: undefined, + SORT: sort => ({ + sort + }), + SCROLL: (page, sort) => ({ + page, + size: LIMIT, + sort + }) + } +}); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js new file mode 100644 index 00000000..7273d215 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js @@ -0,0 +1,31 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http: //www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import RestfulAPIUtil from 'services/restAPIUtil'; +import Configuration from 'config/Configuration.js'; + +function baseUrl() { + const restPrefix = Configuration.get('restPrefix'); + return `${restPrefix}/workflows`; +} + +const Api = { + getWorkflows: queryString => { + return RestfulAPIUtil.fetch(`${baseUrl()}${queryString}`); + } +}; + +export default Api; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js new file mode 100644 index 00000000..39f90dd0 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js @@ -0,0 +1,25 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +export const NAMESPACE = 'catalog'; +export const ASC = 'asc'; +export const DESC = 'desc'; +export const NAME = 'name'; +export const LIMIT = 50; + +export const UPDATE = `${NAMESPACE}/UPDATE`; +export const SORT = `${NAMESPACE}/SORT`; +export const SCROLL = `${NAMESPACE}/SCROLL`; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js new file mode 100644 index 00000000..9816a96f --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js @@ -0,0 +1,62 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http: //www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import { + LIMIT, + NAME, + ASC, + UPDATE, + SORT +} from 'features/catalog/catalogConstants'; + +export const initialState = { + workflows: { + size: LIMIT, + page: -1, + results: [], + total: 0 + }, + sort: { + [NAME]: ASC + } +}; + +const catalogReducer = (state = initialState, action) => { + const { type, payload } = action; + + switch (type) { + case UPDATE: + return { + ...state, + workflows: { + ...state.workflows, + ...payload, + results: [...state.workflows.results, ...payload.results] + } + }; + + case SORT: + return { + ...initialState, + sort: { ...payload.sort } + }; + + default: + return state; + } +}; + +export default catalogReducer; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js new file mode 100644 index 00000000..ffc6d18d --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js @@ -0,0 +1,52 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http: //www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import qs from 'qs'; +import { call, put, takeLatest } from 'redux-saga/effects'; + +import catalogApi from 'features/catalog/catalogApi'; +import { update, scroll } from 'features/catalog/catalogActions'; + +const noOp = () => {}; + +export function* fetchWorkflows({ payload }) { + const { page, size, sort } = payload; + + const queryString = qs.stringify( + { + sort: Object.keys(sort).map(key => `${key},${sort[key]}`), + size, + page: page + 1 + }, + { + indices: false, + addQueryPrefix: true + } + ); + + try { + const data = yield call(catalogApi.getWorkflows, queryString); + yield put(update(data)); + } catch (e) { + noOp(); + } +} + +function* catalogSaga() { + yield takeLatest(scroll, fetchWorkflows); +} + +export default catalogSaga; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSelectors.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSelectors.js new file mode 100644 index 00000000..f4fe18e3 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSelectors.js @@ -0,0 +1,26 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http: //www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import { createSelector } from 'reselect'; + +export const getCatalog = state => state.catalog; + +export const getWorkflows = createSelector( + getCatalog, + catalog => catalog.workflows +); + +export const getSort = createSelector(getCatalog, catalog => catalog.sort); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/AddWorkflow.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/AddWorkflow.jsx new file mode 100644 index 00000000..1e39c174 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/AddWorkflow.jsx @@ -0,0 +1,42 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; +import { Translate } from 'react-redux-i18n'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon'; + +class AddWorkflow extends React.Component { + render() { + const { onClick } = this.props; + return ( +
+
+ +
+
+ +
+
+ ); + } +} + +AddWorkflow.propTypes = { + onClick: PropTypes.func +}; + +export default AddWorkflow; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Header.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Header.jsx new file mode 100644 index 00000000..93dfffe8 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Header.jsx @@ -0,0 +1,39 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http: //www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; + +import SearchInput from 'shared/searchInput/SearchInput'; + +const Header = ({ searchChange, searchValue }) => ( +
+
+ +
+
+); + +Header.propTypes = { + searchChange: PropTypes.func, + searchValue: PropTypes.string +}; + +Header.defaultProps = { + searchChange: () => {}, + searchValue: '' +}; +export default Header; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Main.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Main.jsx new file mode 100644 index 00000000..abf58be2 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Main.jsx @@ -0,0 +1,74 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http: //www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { Translate } from 'react-redux-i18n'; + +import { ASC } from 'features/catalog/catalogConstants'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon'; + +class Main extends Component { + render() { + const { + total, + alphabeticalOrder, + onAlphabeticalOrderByClick, + children + } = this.props; + + return ( +
+
+
+ +
+
+
+ : +
+
+
+ +
+
+ +
+
+
+
+ {children} +
+ ); + } +} + +Main.propTypes = { + total: PropTypes.number, + alphabeticalOrder: PropTypes.string, + onAlphabeticalOrderByClick: PropTypes.func, + handleSort: PropTypes.func, + children: PropTypes.node +}; + +export default Main; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx new file mode 100644 index 00000000..42bd57c2 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx @@ -0,0 +1,42 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http: //www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; + +import { Tile, TileInfo, TileInfoLine } from 'sdc-ui/lib/react'; + +const Workflows = ({ workflows, onWorkflowClick }) => + workflows.map((workflow, index) => ( + onWorkflowClick(workflow.id)}> + + {workflow.name} + + + )); + +Workflows.propTypes = { + workflows: PropTypes.array, + onWorkflowClick: PropTypes.func +}; + +export default Workflows; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/Version.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/Version.js new file mode 100644 index 00000000..3a52058e --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/Version.js @@ -0,0 +1,10 @@ +import { connect } from 'react-redux'; +import VersionView from 'features/version/VersionView'; +import { workflowVersionFetchRequestedAction } from 'features/version/versionConstants'; + +const mapDispatchToProps = dispatch => ({ + loadSelectedVersion: payload => + dispatch(workflowVersionFetchRequestedAction(payload)) +}); + +export default connect(null, mapDispatchToProps)(VersionView); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/VersionView.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/VersionView.jsx new file mode 100644 index 00000000..a7c0f88e --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/VersionView.jsx @@ -0,0 +1,120 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; +import { Route, matchPath } from 'react-router-dom'; +import { I18n } from 'react-redux-i18n'; + +import NavigationSideBar from 'shared/navigationSideBar/index'; +import VersionController from 'features/version/versionController/VersionController'; + +class VersionView extends React.Component { + componentDidMount() { + const { loadSelectedVersion, match } = this.props; + const workflowId = match.params.workflowId; + const versionId = match.params.versionId; + loadSelectedVersion({ workflowId, versionId }); + } + + onSelect = item => { + const { history, match } = this.props; + + if (!item.disabled) { + history.push( + item.path === '/' ? match.url : `${match.url}${item.path}` + ); + } + }; + + getGroups = () => { + const { routes } = this.props; + + const items = routes.map(route => { + return route.i18nName + ? { + ...route, + name: I18n.t(route.i18nName) + } + : route; + }); + + return [ + { + id: 'WORKFLOW', + items + } + ]; + }; + + getActiveItemIdProps = () => { + const { location, routes, match } = this.props; + + const activeItem = routes.find(route => + matchPath(location.pathname, { + path: `${match.path}${route.path}`, + exact: true, + strict: false + }) + ); + + return activeItem && activeItem.id; + }; + + render() { + const { match, routes, history } = this.props; + + const groups = this.getGroups(); + const activeItemId = this.getActiveItemIdProps(); + + return ( +
+ +
+
+ +
+ {routes.map((route, i) => ( + + ))} +
+
+ ); + } +} + +VersionView.propTypes = { + history: PropTypes.object, + location: PropTypes.object, + match: PropTypes.object, + routes: PropTypes.array, + loadSelectedVersion: PropTypes.func +}; + +export default VersionView; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js new file mode 100644 index 00000000..ba0351b6 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js @@ -0,0 +1,91 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; + +import BpmnModeler from 'bpmn-js/lib/Modeler'; +// import propertiesPanelModule from 'bpmn-js-properties-panel'; +import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'; +import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'; + +import newDiagramXML from './newDiagram.bpmn'; + +class CompositionView extends Component { + constructor() { + super(); + this.generatedId = 'bpmn-container' + Date.now(); + } + + componentDidMount() { + this.modeler = new BpmnModeler({ + propertiesPanel: { + parent: '#js-properties-navigationSideBar' + }, + additionalModules: [ + //TODO:: need to fix + // propertiesPanelModule, + propertiesProviderModule + ], + moddleExtensions: { + camunda: camundaModdleDescriptor + } + }); + window.modeler = this.modeler; + this.modeler.attachTo('#' + this.generatedId); + // let diagramXML = + // '\r\n\r\n\r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138\r\n sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26\r\n SCAN_OK\r\n sid-E49425CF-8287-4798-B622-D2A7D78EF00B\r\n sid-E433566C-2289-4BEB-A19C-1697048900D2\r\n sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9\r\n \r\n \r\n \r\n sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD\r\n \r\n \r\n sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D\r\n sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A\r\n \r\n \r\n sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A\r\n sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB\r\n sid-337A23B9-A923-4CCE-B613-3E247B773CCE\r\n \r\n \r\n sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB\r\n sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C\r\n \r\n \r\n sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C\r\n \r\n \r\n sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD\r\n sid-337A23B9-A923-4CCE-B613-3E247B773CCE\r\n sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n'; + this.importXML(newDiagramXML); + } + + importXML(xml) { + let modeler = this.modeler; + this.modeler.importXML(xml, function(err) { + if (err) { + return console.error('could not import BPMN file'); + } + let canvas = modeler.get('canvas'); + canvas.zoom('fit-viewport'); + }); + } + + exportDiagram() { + this.modeler.saveXML({ format: true }, (err, xml) => { + if (err) { + return console.error('could not save diagram'); + } + console.log('Exported diagram: ', xml); + }); + } + + render() { + return ( +
+
+
+
+ ); + } +} + +function mapStateToProps() { + return {}; +} + +function mapDispatchToProps() { + return {}; +} + +export default connect(mapStateToProps, mapDispatchToProps)(CompositionView); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/composition/newDiagram.bpmn b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/composition/newDiagram.bpmn new file mode 100644 index 00000000..7ed9b6e1 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/composition/newDiagram.bpmn @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersion.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersion.js new file mode 100644 index 00000000..e659bb6b --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersion.js @@ -0,0 +1,50 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; + +import { hideModalAction } from 'shared/modal/modalWrapperActions'; +import CreateVersionView from 'features/version/create/CreateVersionView'; +import { + newVersionAction, + submitVersionAction +} from 'features/version/create/createVersionConstants'; +import { + getWorkflowId, + getLatestBaseId +} from 'features/workflow/overview/overviewSelectors'; + +function mapStateToProps(state) { + return { + workflowId: getWorkflowId(state), + versionBaseId: getLatestBaseId(state) + }; +} + +function mapDispatchToProps(dispatch) { + return { + submitNewVersion: payload => { + dispatch(submitVersionAction(payload)); + dispatch(hideModalAction()); + }, + closeCreateVersionModal: () => dispatch(hideModalAction()), + versionDetailsChanged: payload => dispatch(newVersionAction(payload)) + }; +} + +export default withRouter( + connect(mapStateToProps, mapDispatchToProps)(CreateVersionView) +); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersionView.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersionView.jsx new file mode 100644 index 00000000..555dbf9e --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersionView.jsx @@ -0,0 +1,93 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { I18n } from 'react-redux-i18n'; +import { Button } from 'sdc-ui/lib/react'; +import Description from 'shared/components/Description'; +import Select from 'shared/components/Select/index'; +import { VERSION_LEVEL_LIST } from 'wfapp/appConstants'; + +class CreateVersionView extends Component { + static propTypes = { + versionCategories: PropTypes.array, + closeCreateVersionModal: PropTypes.func, + versionDetailsChanged: PropTypes.func, + submitNewVersion: PropTypes.func, + workflowId: PropTypes.string, + baseVersionId: PropTypes.string, + history: PropTypes.object + }; + + constructor(props) { + super(props); + this.state = { + newVersion: '' + }; + } + handleSubmitForm = () => { + const { + submitNewVersion, + workflowId, + baseVersionId, + history + } = this.props; + submitNewVersion({ + description: this.state.newVersion.description, + workflowId: workflowId, + baseVersionId: baseVersionId || null, + history: history + }); + }; + + versionDetailsChanged = val => { + this.setState({ newVersion: val }); + }; + + render() { + const { closeCreateVersionModal } = this.props; + return ( +
+
+ +
+
+ +
+
+ +
+
+ +
+
+); + +DataRow.propTypes = { + data: PropTypes.object, + types: PropTypes.array, + nameErrorMessage: PropTypes.string, + handleNameChange: PropTypes.func, + handleNameBlur: PropTypes.func, + handleTypeChange: PropTypes.func, + handleMandatoryChange: PropTypes.func, + handleRemoveClick: PropTypes.func +}; + +export default DataRow; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/NoDataRow.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/NoDataRow.jsx new file mode 100644 index 00000000..1a4d7534 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/NoDataRow.jsx @@ -0,0 +1,32 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; + +const NoDataRow = ({ children }) => ( +
+
+ {children} +
+
+); + +NoDataRow.propTypes = { + children: PropTypes.node +}; + +export default NoDataRow; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/Tab.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/Tab.js new file mode 100644 index 00000000..4b983731 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/Tab.js @@ -0,0 +1,39 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; +import cn from 'classnames'; + +const Tab = ({ children, isActive, handleTabClick }) => { + const className = cn('input-output__tab', { + 'input-output__tab--active': isActive + }); + + return ( +
+ {children} +
+ ); +}; + +Tab.propTypes = { + children: PropTypes.node, + isActive: PropTypes.bool, + handleTabClick: PropTypes.func +}; + +export default Tab; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableBody.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableBody.jsx new file mode 100644 index 00000000..052846b3 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableBody.jsx @@ -0,0 +1,41 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http: //www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +/* eslint-disable no-unused-vars */ + +import React from 'react'; +import PropTypes from 'prop-types'; + +class TableBody extends React.Component { + handleNameInputChange = params => { + console.log('handleNameInputChange', { params }); + }; + + handleMandatoryCheckboxChange = params => { + console.log('handleMandatoryCheckboxChange: ', { params }); + }; + + render() { + const { children } = this.props; + + return
{children}
; + } +} + +TableBody.propTypes = { + children: PropTypes.node +}; + +export default TableBody; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableHead.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableHead.jsx new file mode 100644 index 00000000..206f54a8 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableHead.jsx @@ -0,0 +1,41 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http: //www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import React from 'react'; +import { Translate } from 'react-redux-i18n'; + +export default class TableHead extends React.Component { + render() { + return ( +
+
+
+ +
+
+ +
+
+ +
+
+ ••• +
+
+
+ ); + } +} diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionApi.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionApi.js new file mode 100644 index 00000000..8f6895eb --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionApi.js @@ -0,0 +1,52 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import RestfulAPIUtil from 'services/restAPIUtil'; +import Configuration from 'config/Configuration.js'; +import { CERTIFY_JSON } from 'features/version/versionController/versionControllerConstants'; + +function baseUrl(workflowId) { + const restPrefix = Configuration.get('restPrefix'); + return `${restPrefix}/workflows/${workflowId}/versions`; +} + +const Api = { + fetchVersion: ({ workflowId, versionId }) => { + return RestfulAPIUtil.fetch(`${baseUrl(workflowId)}/${versionId}`); + }, + createNewVersion: ({ workflowId, baseVersionId, description }) => { + return RestfulAPIUtil.post(baseUrl(workflowId), { + baseVersionId, + description + }); + }, + updateVersion: ({ workflowId, ...payload }) => { + return RestfulAPIUtil.put( + `${baseUrl(workflowId)}${payload.params.id}`, + { + ...payload.params + } + ); + }, + certifyVersion: ({ workflowId, versionId }) => { + return RestfulAPIUtil.post( + `${baseUrl(workflowId)}/${versionId}/state`, + CERTIFY_JSON + ); + } +}; + +export default Api; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionConstants.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionConstants.js new file mode 100644 index 00000000..ea9f0cbb --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionConstants.js @@ -0,0 +1,46 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +import { createAction } from 'redux-actions'; + +export const SET_CURRENT_VERSION = 'workflow/version/SET_CURRENT_VERSION'; +export const FETCH_REQUESTED = 'workflow/version/FETCH_REQUESTED'; +export const DETAILS_CHANGED = 'workflow/version/DETAILS_CHANGED'; +export const FETCH_REQUESTED_FAILED = 'workflow/version/FETCH_REQUESTED_FAILED'; +export const VERSION_STATE_CHANGED = 'workflow/version/VERSION_STATE_CHANGED'; + +export const workflowVersionFetchRequestedAction = createAction( + FETCH_REQUESTED +); + +export const workflowVersionDetailsChangedAction = createAction( + DETAILS_CHANGED +); + +export const setWorkflowVersionAction = createAction(SET_CURRENT_VERSION); +export const fetchWorkflowVersionActionFailed = createAction( + FETCH_REQUESTED_FAILED, + error => error +); + +export const versionStateChangedAction = createAction( + VERSION_STATE_CHANGED, + payload => payload +); + +export const versionState = { + DRAFT: 'draft', + CERTIFIED: 'certified' +}; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionController.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionController.js new file mode 100644 index 00000000..c14f4fc1 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionController.js @@ -0,0 +1,56 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import { connect } from 'react-redux'; +import { + getVersionsList, + getSavedObjParams +} from 'features/version/versionController/versionControllerSelectors'; +import VersionControllerView from 'features/version/versionController/VersionControllerView'; +import { getVersions } from 'features/workflow/overview/overviewSelectors'; +import { + getWorkflowId, + getWorkflowName +} from 'features/workflow/workflowSelectors'; +import { + saveParamsAction, + certifyVersionAction +} from 'features/version/versionController/versionControllerConstants'; + +function mapStateToProps(state) { + return { + workflowName: getWorkflowName(state), + workflowId: getWorkflowId(state), + versionsList: getVersionsList(state), + savedParams: getSavedObjParams(state), + currentWorkflowVersion: state.currentVersion.general.id, + versionState: state.currentVersion.general.state + }; +} + +function mapDispatchToProps(dispatch) { + return { + callForAction: (action, payload) => + dispatch({ type: action, payload: payload }), + getVersions: () => dispatch(getVersions), + saveParamsToServer: params => dispatch(saveParamsAction(params)), + certifyVersion: payload => dispatch(certifyVersionAction(payload)) + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)( + VersionControllerView +); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionControllerView.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionControllerView.jsx new file mode 100644 index 00000000..27260e60 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionControllerView.jsx @@ -0,0 +1,110 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import ActionButtons from 'features/version/versionController/views/ActionButtons'; +import VersionContainer from 'features/version/versionController/views/VersionsContainer'; +import WorkflowTitle from 'features/version/versionController/views/WorkflowTitle'; +import { versionState as versionStateType } from 'features/version/versionConstants'; + +export default class VersionControllerView extends Component { + static propTypes = { + location: PropTypes.object, + workflowName: PropTypes.string, + currentWorkflowVersion: PropTypes.string, + viewableVersions: PropTypes.arrayOf(Object), + callForAction: PropTypes.func, + getVersions: PropTypes.func, + versionsList: PropTypes.array, + history: PropTypes.object, + getOverview: PropTypes.func, + match: PropTypes.object, + savedParams: PropTypes.object, + saveParamsToServer: PropTypes.func, + workflowId: PropTypes.string, + versionState: PropTypes.string, + certifyVersion: PropTypes.func + }; + + constructor(props) { + super(props); + } + + dynamicDispatcher = (action, payload) => { + const { history, callForAction } = this.props; + const actionName = + typeof action === 'object' + ? action.target.attributes.actionType.value + : action; + let pageName = history.location.pathname.split('/').pop(); + callForAction(pageName + '/' + actionName, payload); + }; + + routeToOverview = () => { + const { history, match } = this.props; + const workflowId = match.params.workflowId; + history.push('/workflow/' + workflowId + '/overview'); + }; + + sendSaveParamsToServer = () => { + const { savedParams, saveParamsToServer, workflowId } = this.props; + saveParamsToServer({ params: savedParams, workflowId }); + }; + + certifyVersion = () => { + const { + certifyVersion, + workflowId, + currentWorkflowVersion + } = this.props; + certifyVersion({ workflowId, versionId: currentWorkflowVersion }); + }; + + render() { + const { + currentWorkflowVersion, + workflowName, + versionsList, + versionState + } = this.props; + let isCertifyDisable = + versionState && + versionState.toLowerCase() === versionStateType.CERTIFIED; + return ( +
+ +
+ + +
+
+ ); + } +} + +VersionControllerView.defaultProps = { + getVersions: () => {}, + callForAction: () => {} +}; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/VersionControllerView_snapshot-test.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/VersionControllerView_snapshot-test.js new file mode 100644 index 00000000..b3adc721 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/VersionControllerView_snapshot-test.js @@ -0,0 +1,52 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +import React from 'react'; +import renderer from 'react-test-renderer'; + +import VersionControllerView from 'features/version/versionController/VersionControllerView'; + +describe('Version Controller View Snapshot', () => { + it('renders correctly', () => { + const versionList = [ + { + id: '7b5f6b086613470985082df2c0f6c713', + name: '1.0', + description: + 'Initial version, bug fix for previous version that fixed an exception when the port was occupied', + status: 'Draft', + creationTime: 1530687330460, + modificationTime: 1530687330575, + archivedStatus: 'ACTIVE' + }, + { + id: '7b5f6b086613470985082df2c0f6c666', + name: '2.0', + description: + 'Test version, bug fix for previous version that fixed an exception when the port was occupied', + status: 'Draft', + creationTime: 1530687330461, + modificationTime: 1530687330576, + archivedStatus: 'ACTIVE', + baseId: '7b5f6b086613470985082df2c0f6c713' + } + ]; + const tree = renderer + .create() + .toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap new file mode 100644 index 00000000..1ad910c6 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap @@ -0,0 +1,122 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Version Controller View Snapshot renders correctly 1`] = ` +
+
+
+
+ +
+
+
+
+
+
+ + {!isEmpty(viewableVersions) && + viewableVersions.map(item => { + return ( + + ); + })} + + ); +}; + +VersionSelect.propTypes = { + currentWorkflowVersion: PropTypes.string, + viewableVersions: PropTypes.arrayOf(Object), + dynamicDispatcher: PropTypes.func +}; + +export default VersionSelect; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionsContainer.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionsContainer.js new file mode 100644 index 00000000..47f08073 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionsContainer.js @@ -0,0 +1,67 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +import React from 'react'; +import VersionSelect from 'features/version/versionController/views/VersionSelect'; +import { I18n } from 'react-redux-i18n'; +import PropTypes from 'prop-types'; +import { isEmpty } from 'lodash'; + +const VersionContainer = props => { + let { + currentWorkflowVersion, + viewableVersions, + dynamicDispatcher, + onOverviewClick + } = props; + + function createDisplayedVersionName() { + if (isEmpty(viewableVersions)) return; + Object.keys(viewableVersions).map((val, key) => { + viewableVersions[key].displayed = + viewableVersions[key].name + ' ' + viewableVersions[key].state; + }); + return viewableVersions; + } + + const versionList = createDisplayedVersionName(); + + return ( +
+
+ + + {I18n.t('workflow.overview.viewOverview')} + +
+
+ ); +}; + +VersionContainer.propTypes = { + currentWorkflowVersion: PropTypes.string, + viewableVersions: PropTypes.arrayOf(Object), + dynamicDispatcher: PropTypes.func, + onOverviewClick: PropTypes.func +}; + +export default VersionContainer; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/WorkflowTitle.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/WorkflowTitle.js new file mode 100644 index 00000000..230ecf08 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/WorkflowTitle.js @@ -0,0 +1,34 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +import React from 'react'; +import PropTypes from 'prop-types'; + +const WorkflowTitle = props => { + const { workflowName } = props; + return ( +
+
+
{workflowName || ''}
+
+
+ ); +}; + +WorkflowTitle.propTypes = { + workflowName: PropTypes.string +}; + +export default WorkflowTitle; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionReducer.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionReducer.js new file mode 100644 index 00000000..c7fccd22 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionReducer.js @@ -0,0 +1,42 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +import { + SET_CURRENT_VERSION, + DETAILS_CHANGED, + VERSION_STATE_CHANGED +} from 'features/version/versionConstants'; +const initialState = {}; + +function versionReducer(state = initialState, action) { + switch (action.type) { + case SET_CURRENT_VERSION: + return action.payload; + case DETAILS_CHANGED: + return { + ...state, + ...action.payload + }; + case VERSION_STATE_CHANGED: + return { + ...state, + ...action.payload + }; + default: + return state; + } +} + +export default versionReducer; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionSaga.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionSaga.js new file mode 100644 index 00000000..49d4d32f --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/version/versionSaga.js @@ -0,0 +1,97 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +import { all, call, put, takeEvery, takeLatest } from 'redux-saga/effects'; + +import { genericNetworkErrorAction } from 'src/appConstants'; +import { + setWorkflowVersionAction, + versionStateChangedAction, + FETCH_REQUESTED +} from 'features/version/versionConstants'; +import { setInputsOutputs } from 'features/version/inputOutput/inputOutputActions'; +import { SUBMIT_VERSION } from 'features/version/create/createVersionConstants'; +import { + SAVE_ACTION, + CERTIFY_ACTION +} from 'features/version/versionController/versionControllerConstants'; +import versionApi from 'features/version/versionApi'; +import { notificationActions } from 'shared/notifications/notificationsActions'; +import { versionState } from 'features/version/versionConstants'; + +function* fetchVersion(action) { + try { + const data = yield call(versionApi.fetchVersion, action.payload); + const { inputs, outputs, ...rest } = data; + + yield all([ + put(setWorkflowVersionAction(rest)), + put(setInputsOutputs({ inputs, outputs })) + ]); + } catch (error) { + yield put(genericNetworkErrorAction(error)); + } +} + +function* watchSubmitVersion(action) { + try { + const { workflowId, history } = action.payload; + const data = yield call(versionApi.createNewVersion, action.payload); + yield call(history.push('/workflow/' + workflowId + '/version/')); + console.log(data); + } catch (error) { + yield put(genericNetworkErrorAction(error)); + } +} + +function* watchUpdateVersion(action) { + try { + yield call(versionApi.updateVersion, action.payload); + yield put( + notificationActions.showSuccess({ + title: 'Update Workflow Version', + message: 'Successfully updated' + }) + ); + } catch (error) { + yield put(genericNetworkErrorAction(error)); + } +} + +function* watchCertifyVersion(action) { + try { + yield call(versionApi.certifyVersion, { + ...action.payload + }); + yield put( + notificationActions.showSuccess({ + title: 'Certify Version', + message: 'Successfully updated' + }) + ); + yield put(versionStateChangedAction({ state: versionState.CERTIFIED })); + } catch (error) { + yield put(genericNetworkErrorAction(error)); + } +} + +function* versionSaga() { + yield takeLatest(FETCH_REQUESTED, fetchVersion); + yield takeEvery(SUBMIT_VERSION, watchSubmitVersion); + yield takeEvery(SAVE_ACTION, watchUpdateVersion); + yield takeEvery(CERTIFY_ACTION, watchCertifyVersion); +} + +export default versionSaga; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflow.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflow.js new file mode 100644 index 00000000..ece4e5e1 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflow.js @@ -0,0 +1,54 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; + +import { i18nSelector } from 'wfapp/appSelectors'; +import { hideModalAction } from 'shared/modal/modalWrapperActions'; +import CreateWorkflowView from 'features/workflow/create/CreateWorkflowView'; +import { getWorkflowParams } from 'features/workflow/create/createWorkflowSelector'; +import { + getWorkflowDescription, + getWorkflowName +} from 'features/workflow/workflowSelectors'; +import { + inputChangeAction, + submitWorkflowAction +} from 'features/workflow/create/createWorkflowConstants'; + +function mapStateToProps(state) { + return { + translation: i18nSelector(state), + workflowDescription: getWorkflowDescription(state), + workflowName: getWorkflowName(state), + workflowParams: getWorkflowParams(state) + }; +} + +function mapDispatchToProps(dispatch) { + return { + submitWorkflow: payload => { + dispatch(submitWorkflowAction(payload)); + dispatch(hideModalAction()); + }, + closeCreateWorkflowModal: () => dispatch(hideModalAction()), + workflowInputChange: payload => dispatch(inputChangeAction(payload)) + }; +} + +export default withRouter( + connect(mapStateToProps, mapDispatchToProps)(CreateWorkflowView) +); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflowView.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflowView.jsx new file mode 100644 index 00000000..5f6f1805 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflowView.jsx @@ -0,0 +1,89 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Input, Button } from 'sdc-ui/lib/react'; +import { I18n } from 'react-redux-i18n'; +import Description from 'shared/components/Description'; + +const CreateWorkflowView = props => { + const { + workflowInputChange, + workflowDescription, + workflowName, + submitWorkflow, + closeCreateWorkflowModal, + workflowParams, + history + } = props; + + function handleSubmitForm(e) { + e.preventDefault(); + submitWorkflow({ ...workflowParams, history }); + } + + return ( + +
+ + workflowInputChange({ + name: val + }) + } + isRequired + /> + +
+ + +
+
+ + ); +}; + +CreateWorkflowView.propTypes = { + submitWorkflow: PropTypes.func, + workflowInputChange: PropTypes.func, + workflowDescription: PropTypes.string, + workflowName: PropTypes.string, + closeCreateWorkflowModal: PropTypes.func, + workflowParams: PropTypes.object, + history: PropTypes.object +}; + +CreateWorkflowView.defaultProps = { + submitWorkflow: () => {}, + workflowInputChange: () => {}, + closeCreateWorkflowModal: () => {} +}; + +export default CreateWorkflowView; diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/__tests__/CreateWorkflowView_snapshot-test.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/__tests__/CreateWorkflowView_snapshot-test.js new file mode 100644 index 00000000..a0d81c71 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/__tests__/CreateWorkflowView_snapshot-test.js @@ -0,0 +1,29 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* + * http://www.apache.org/licenses/LICENSE-2.0 +* + * Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +'use strict'; + +import React from 'react'; +import renderer from 'react-test-renderer'; + +import CreateWorkflowView from 'features/workflow/create/CreateWorkflowView'; + +describe('New Workflow View Snapshot', () => { + it('renders correctly', () => { + const tree = renderer.create().toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/__tests__/__snapshots__/CreateWorkflowView_snapshot-test.js.snap b/workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/__tests__/__snapshots__/CreateWorkflowView_snapshot-test.js.snap new file mode 100644 index 00000000..8a2790a9 --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/workflow/create/__tests__/__snapshots__/CreateWorkflowView_snapshot-test.js.snap @@ -0,0 +1,73 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`New Workflow View Snapshot renders correctly 1`] = ` +
+
+
+ + +
+
+
+
+ description +
+