From 0c688f48e779c65c1bb849c5acd204817b295bc6 Mon Sep 17 00:00:00 2001 From: Janicki Artur Date: Thu, 27 Sep 2018 15:01:19 +0200 Subject: [PATCH] prepare structure and init stepper Feature #14225 Arvados-DCO-1.1-Signed-off-by: Janicki Artur --- src/common/custom-theme.ts | 10 +++++ src/routes/route-change-handlers.ts | 8 ++-- src/routes/routes.ts | 4 ++ src/store/navigation/navigation-action.ts | 2 + .../run-process-panel-actions.ts | 21 ++++++++++ .../run-process-panel-reducer.ts | 19 +++++++++ src/store/store.ts | 4 +- src/store/workbench/workbench-actions.ts | 7 ++++ .../side-panel-button/side-panel-button.tsx | 7 +++- .../run-process-panel-root.tsx | 39 +++++++++++++++++++ .../run-process-panel/run-process-panel.tsx | 23 +++++++++++ src/views/workbench/workbench.tsx | 8 ++-- 12 files changed, 144 insertions(+), 8 deletions(-) create mode 100644 src/store/run-process-panel/run-process-panel-actions.ts create mode 100644 src/store/run-process-panel/run-process-panel-reducer.ts create mode 100644 src/views/run-process-panel/run-process-panel-root.tsx create mode 100644 src/views/run-process-panel/run-process-panel.tsx diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts index 8f349794..98380b96 100644 --- a/src/common/custom-theme.ts +++ b/src/common/custom-theme.ts @@ -123,6 +123,16 @@ export const themeOptions: ArvadosThemeOptions = { color: arvadosPurple } } + }, + MuiStepIcon: { + root: { + '&$active': { + color: arvadosPurple + }, + '&$completed': { + color: 'inherited' + }, + } } }, mixins: { diff --git a/src/routes/route-change-handlers.ts b/src/routes/route-change-handlers.ts index 33e0bef7..9b56a7fc 100644 --- a/src/routes/route-change-handlers.ts +++ b/src/routes/route-change-handlers.ts @@ -4,11 +4,10 @@ import { History, Location } from 'history'; import { RootStore } from '~/store/store'; -import { matchProcessRoute, matchProcessLogRoute, matchProjectRoute, matchCollectionRoute, matchFavoritesRoute, matchTrashRoute, matchRootRoute, matchSharedWithMeRoute } from './routes'; +import { matchProcessRoute, matchProcessLogRoute, matchProjectRoute, matchCollectionRoute, matchFavoritesRoute, matchTrashRoute, matchRootRoute, matchSharedWithMeRoute, matchRunProcessRoute } from './routes'; import { loadProject, loadCollection, loadFavorites, loadTrash, loadProcess, loadProcessLog } from '~/store/workbench/workbench-actions'; import { navigateToRootProject } from '~/store/navigation/navigation-action'; -import { navigateToSharedWithMe } from '../store/navigation/navigation-action'; -import { loadSharedWithMe } from '../store/workbench/workbench-actions'; +import { loadSharedWithMe, loadRunProcess } from '../store/workbench/workbench-actions'; export const addRouteChangeHandlers = (history: History, store: RootStore) => { const handler = handleLocationChange(store); @@ -25,6 +24,7 @@ const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => { const processMatch = matchProcessRoute(pathname); const processLogMatch = matchProcessLogRoute(pathname); const sharedWithMeMatch = matchSharedWithMeRoute(pathname); + const runProcessMatch = matchRunProcessRoute(pathname); if (projectMatch) { store.dispatch(loadProject(projectMatch.params.id)); @@ -42,5 +42,7 @@ const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => { store.dispatch(navigateToRootProject); } else if (sharedWithMeMatch) { store.dispatch(loadSharedWithMe); + } else if (runProcessMatch) { + store.dispatch(loadRunProcess); } }; diff --git a/src/routes/routes.ts b/src/routes/routes.ts index fb28bd05..4e8cf366 100644 --- a/src/routes/routes.ts +++ b/src/routes/routes.ts @@ -17,6 +17,7 @@ export const Routes = { TRASH: '/trash', PROCESS_LOGS: `/process-logs/:id(${RESOURCE_UUID_PATTERN})`, SHARED_WITH_ME: '/shared-with-me', + RUN_PROCESS: '/run-process' }; export const getResourceUrl = (uuid: string) => { @@ -64,3 +65,6 @@ export const matchProcessLogRoute = (route: string) => export const matchSharedWithMeRoute = (route: string) => matchPath(route, { path: Routes.SHARED_WITH_ME }); + +export const matchRunProcessRoute = (route: string) => + matchPath(route, { path: Routes.RUN_PROCESS }); \ No newline at end of file diff --git a/src/store/navigation/navigation-action.ts b/src/store/navigation/navigation-action.ts index 943f38ce..d8c70710 100644 --- a/src/store/navigation/navigation-action.ts +++ b/src/store/navigation/navigation-action.ts @@ -51,3 +51,5 @@ export const navigateToRootProject = (dispatch: Dispatch, getState: () => RootSt }; export const navigateToSharedWithMe = push(Routes.SHARED_WITH_ME); + +export const navigateToRunProcess = push(Routes.RUN_PROCESS); \ No newline at end of file diff --git a/src/store/run-process-panel/run-process-panel-actions.ts b/src/store/run-process-panel/run-process-panel-actions.ts new file mode 100644 index 00000000..5213d2fa --- /dev/null +++ b/src/store/run-process-panel/run-process-panel-actions.ts @@ -0,0 +1,21 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { Dispatch } from 'redux'; +import { unionize, ofType, UnionOf } from "~/common/unionize"; +import { ServiceRepository } from "~/services/services"; +import { RootState } from '~/store/store'; + +export const runProcessPanelActions = unionize({ + CHANGE_STEP: ofType() +}); + +export type RunProcessPanelAction = UnionOf; + +export const loadRunProcessPanel = () => + (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { + + }; + +export const goToStep = (step: number) => runProcessPanelActions.CHANGE_STEP(step); \ No newline at end of file diff --git a/src/store/run-process-panel/run-process-panel-reducer.ts b/src/store/run-process-panel/run-process-panel-reducer.ts new file mode 100644 index 00000000..aff19124 --- /dev/null +++ b/src/store/run-process-panel/run-process-panel-reducer.ts @@ -0,0 +1,19 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { RunProcessPanelAction, runProcessPanelActions } from '~/store/run-process-panel/run-process-panel-actions'; + +interface RunProcessPanel { + currentStep: number; +} + +const initialState: RunProcessPanel = { + currentStep: 0 +}; + +export const runProcessPanelReducer = (state = initialState, action: RunProcessPanelAction): RunProcessPanel => + runProcessPanelActions.match(action, { + CHANGE_STEP: currentStep => ({ ...state, currentStep }), + default: () => state + }); \ No newline at end of file diff --git a/src/store/store.ts b/src/store/store.ts index 012b7474..6fb0305c 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -35,6 +35,7 @@ import { processPanelReducer } from '~/store/process-panel/process-panel-reducer import { SHARED_WITH_ME_PANEL_ID } from '~/store/shared-with-me-panel/shared-with-me-panel-actions'; import { SharedWithMeMiddlewareService } from './shared-with-me-panel/shared-with-me-middleware-service'; import { progressIndicatorReducer } from './progress-indicator/progress-indicator-reducer'; +import { runProcessPanelReducer } from '~/store/run-process-panel/run-process-panel-reducer'; const composeEnhancers = (process.env.NODE_ENV === 'development' && @@ -91,5 +92,6 @@ const createRootReducer = (services: ServiceRepository) => combineReducers({ treePicker: treePickerReducer, fileUploader: fileUploaderReducer, processPanel: processPanelReducer, - progressIndicator: progressIndicatorReducer + progressIndicator: progressIndicatorReducer, + runProcessPanel: runProcessPanelReducer }); diff --git a/src/store/workbench/workbench-actions.ts b/src/store/workbench/workbench-actions.ts index 94b4b4f5..a7614c4d 100644 --- a/src/store/workbench/workbench-actions.ts +++ b/src/store/workbench/workbench-actions.ts @@ -44,6 +44,7 @@ import { ResourceKind, extractUuidKind } from '~/models/resource'; import { FilterBuilder } from '~/services/api/filter-builder'; import { GroupContentsResource } from '~/services/groups-service/groups-service'; import { unionize, ofType, UnionOf, MatchCases } from '~/common/unionize'; +import { loadRunProcessPanel } from '~/store/run-process-panel/run-process-panel-actions'; export const WORKBENCH_LOADING_SCREEN = 'workbenchLoadingScreen'; @@ -347,6 +348,12 @@ export const loadSharedWithMe = handleFirstTimeLoad(async (dispatch: Dispatch) = await dispatch(setSidePanelBreadcrumbs(SidePanelTreeCategory.SHARED_WITH_ME)); }); +export const loadRunProcess = handleFirstTimeLoad( + async (dispatch: Dispatch) => { + dispatch(loadRunProcessPanel()); + } +); + const finishLoadingProject = (project: GroupContentsResource | string) => async (dispatch: Dispatch) => { const uuid = typeof project === 'string' ? project : project.uuid; diff --git a/src/views-components/side-panel-button/side-panel-button.tsx b/src/views-components/side-panel-button/side-panel-button.tsx index 89c3400b..2e8433a9 100644 --- a/src/views-components/side-panel-button/side-panel-button.tsx +++ b/src/views-components/side-panel-button/side-panel-button.tsx @@ -14,6 +14,7 @@ import { AddIcon, CollectionIcon, ProcessIcon, ProjectIcon } from '~/components/ import { openProjectCreateDialog } from '~/store/projects/project-create-actions'; import { openCollectionCreateDialog } from '~/store/collections/collection-create-actions'; import { matchProjectRoute } from '~/routes/routes'; +import { navigateToRunProcess } from '~/store/navigation/navigation-action'; type CssRules = 'button' | 'menuItem' | 'icon'; @@ -88,7 +89,7 @@ export const SidePanelButton = withStyles(styles)( New collection - + Run a process @@ -104,6 +105,10 @@ export const SidePanelButton = withStyles(styles)( this.props.dispatch(openProjectCreateDialog(this.props.currentItemId)); } + handleRunProcessClick = () => { + this.props.dispatch(navigateToRunProcess); + } + handleNewCollectionClick = () => { this.props.dispatch(openCollectionCreateDialog(this.props.currentItemId)); } diff --git a/src/views/run-process-panel/run-process-panel-root.tsx b/src/views/run-process-panel/run-process-panel-root.tsx new file mode 100644 index 00000000..b1a8ceab --- /dev/null +++ b/src/views/run-process-panel/run-process-panel-root.tsx @@ -0,0 +1,39 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from 'react'; +import { Stepper, Step, StepLabel, StepContent, Button } from '@material-ui/core'; + +export interface RunProcessPanelRootDataProps { + currentStep: number; +} + +export interface RunProcessPanelRootActionProps { + onClick: (step: number) => void; +} + +type RunProcessPanelRootProps = RunProcessPanelRootDataProps & RunProcessPanelRootActionProps; + +export const RunProcessPanelRoot = ({ currentStep, onClick, ...props }: RunProcessPanelRootProps) => + + + Choose a workflow + + + + + + Select inputs + + + + + + ; \ No newline at end of file diff --git a/src/views/run-process-panel/run-process-panel.tsx b/src/views/run-process-panel/run-process-panel.tsx new file mode 100644 index 00000000..e6bdf0f7 --- /dev/null +++ b/src/views/run-process-panel/run-process-panel.tsx @@ -0,0 +1,23 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { Dispatch } from 'redux'; +import { connect } from 'react-redux'; +import { RootState } from '~/store/store'; +import { RunProcessPanelRootDataProps, RunProcessPanelRootActionProps, RunProcessPanelRoot } from '~/views/run-process-panel/run-process-panel-root'; +import { goToStep } from '~/store/run-process-panel/run-process-panel-actions'; + +const mapStateToProps = ({ runProcessPanel }: RootState): RunProcessPanelRootDataProps => { + return { + currentStep: runProcessPanel.currentStep + }; +}; + +const mapDispatchToProps = (dispatch: Dispatch): RunProcessPanelRootActionProps => ({ + onClick: (step: number) => { + dispatch(goToStep(step)); + } +}); + +export const RunProcessPanel = connect(mapStateToProps, mapDispatchToProps)(RunProcessPanelRoot); \ No newline at end of file diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index b0d14f09..3a68a710 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -33,12 +33,13 @@ import { MoveProjectDialog } from '~/views-components/dialog-forms/move-project- import { MoveCollectionDialog } from '~/views-components/dialog-forms/move-collection-dialog'; import { FilesUploadCollectionDialog } from '~/views-components/dialog-forms/files-upload-collection-dialog'; import { PartialCopyCollectionDialog } from '~/views-components/dialog-forms/partial-copy-collection-dialog'; -import { TrashPanel } from "~/views/trash-panel/trash-panel"; +import { ProcessCommandDialog } from '~/views-components/process-command-dialog/process-command-dialog'; import { MainContentBar } from '~/views-components/main-content-bar/main-content-bar'; import { Grid } from '@material-ui/core'; -import { SharedWithMePanel } from '../shared-with-me-panel/shared-with-me-panel'; +import { TrashPanel } from "~/views/trash-panel/trash-panel"; +import { SharedWithMePanel } from '~/views/shared-with-me-panel/shared-with-me-panel'; +import { RunProcessPanel } from '~/views/run-process-panel/run-process-panel'; import SplitterLayout from 'react-splitter-layout'; -import { ProcessCommandDialog } from '~/views-components/process-command-dialog/process-command-dialog'; type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content'; @@ -94,6 +95,7 @@ export const WorkbenchPanel = + -- 2.30.2