From e02a51f2799aaab5cdd0194dc9363e31592d4209 Mon Sep 17 00:00:00 2001 From: Janicki Artur Date: Thu, 20 Sep 2018 12:12:49 +0200 Subject: [PATCH] init login panel and main panel, change workbench Feature #13935 Arvados-DCO-1.1-Signed-off-by: Janicki Artur --- src/index.tsx | 7 +- .../main-app-bar/main-app-bar.tsx | 2 +- src/views/login-panel/login-panel.tsx | 72 +++++++ src/views/main-panel/main-panel.tsx | 78 ++++++++ src/views/workbench/workbench.test.tsx | 4 +- src/views/workbench/workbench.tsx | 186 ++++++------------ 6 files changed, 216 insertions(+), 133 deletions(-) create mode 100644 src/views/login-panel/login-panel.tsx create mode 100644 src/views/main-panel/main-panel.tsx diff --git a/src/index.tsx b/src/index.tsx index 020f5482cd..f456c995d1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { Provider } from "react-redux"; -import { Workbench } from './views/workbench/workbench'; +import { MainPanel } from './views/main-panel/main-panel'; import './index.css'; import { Route } from 'react-router'; import createBrowserHistory from "history/createBrowserHistory"; @@ -38,7 +38,6 @@ import { addRouteChangeHandlers } from './routes/route-change-handlers'; import { setCurrentTokenDialogApiHost } from '~/store/current-token-dialog/current-token-dialog-actions'; import { processResourceActionSet } from './views-components/context-menu/action-sets/process-resource-action-set'; import { progressIndicatorActions } from '~/store/progress-indicator/progress-indicator-actions'; -import { snackbarActions, SnackbarKind } from "~/store/snackbar/snackbar-actions"; const getBuildNumber = () => "BN-" + (process.env.REACT_APP_BUILD_NUMBER || "dev"); const getGitCommit = () => "GIT-" + (process.env.REACT_APP_GIT_COMMIT || "latest").substr(0, 7); @@ -79,7 +78,7 @@ fetchConfig() store.dispatch(setCurrentTokenDialogApiHost(apiHost)); const TokenComponent = (props: any) => ; - const WorkbenchComponent = (props: any) => ; + const MainPanelComponent = (props: any) => ; const App = () => @@ -87,7 +86,7 @@ fetchConfig()
- +
diff --git a/src/views-components/main-app-bar/main-app-bar.tsx b/src/views-components/main-app-bar/main-app-bar.tsx index 93cf4968e9..1072a56f65 100644 --- a/src/views-components/main-app-bar/main-app-bar.tsx +++ b/src/views-components/main-app-bar/main-app-bar.tsx @@ -78,7 +78,7 @@ export const MainAppBar = withStyles(styles)( - : } + : } diff --git a/src/views/login-panel/login-panel.tsx b/src/views/login-panel/login-panel.tsx new file mode 100644 index 0000000000..2521e14385 --- /dev/null +++ b/src/views/login-panel/login-panel.tsx @@ -0,0 +1,72 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from 'react'; +import { compose } from 'redux'; +import { connect, DispatchProp } from 'react-redux'; +import { Grid, Typography, Button } from '@material-ui/core'; +import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'; +import { login } from '~/store/auth/auth-action'; +import { ArvadosTheme } from '~/common/custom-theme'; +import * as classNames from 'classnames'; + +type CssRules = 'root' | 'container' | 'title' | 'content' | 'content__bolder' | 'button'; + +const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ + root: { + background: theme.palette.background.default + }, + container: { + width: '560px' + }, + title: { + marginBottom: theme.spacing.unit * 6, + color: theme.palette.grey["800"] + }, + content: { + marginBottom: theme.spacing.unit * 3, + lineHeight: '1.2rem', + color: theme.palette.grey["800"] + }, + 'content__bolder': { + fontWeight: 'bolder' + }, + button: { + boxShadow: 'none' + } +}); + +type LoginPanelProps = DispatchProp & WithStyles; + +export const LoginPanel = compose( + withStyles(styles), + connect() +)(({ classes, dispatch }: LoginPanelProps) => + + + + Welcome to the Arvados Wrokbench + + + The "Log in" button below will show you a Google sign-in page. + After you assure Google that you want to log in here with your Google account, + you will be redirected back here to Arvados Workbench. + + + If you have never used Arvados Workbench before, logging in for the first time will automatically create a new account. + + + IMPORTANT: Please keep in mind to store exploratory data only but not any information used for clinical decision making. + + + Arvados Workbench uses your name and email address only for identification, and does not retrieve any other personal information from Google. + + + + + + +); \ No newline at end of file diff --git a/src/views/main-panel/main-panel.tsx b/src/views/main-panel/main-panel.tsx new file mode 100644 index 0000000000..22455c3c37 --- /dev/null +++ b/src/views/main-panel/main-panel.tsx @@ -0,0 +1,78 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from 'react'; +import { connect, DispatchProp } from 'react-redux'; +import { push } from 'react-router-redux'; +import { LinearProgress, Grid } from '@material-ui/core'; +import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'; +import { ArvadosTheme } from '~/common/custom-theme'; +import { isSystemWorking } from '~/store/progress-indicator/progress-indicator-reducer'; +import { RootState } from '~/store/store'; +import { User } from '~/models/user'; +import { WorkbenchPanel } from '~/views/workbench/workbench'; +import { LoginPanel } from '~/views/login-panel/login-panel'; +import { MainAppBar } from '~/views-components/main-app-bar/main-app-bar'; + +type CssRules = 'root'; + +const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ + root: { + overflow: 'hidden', + width: '100vw', + height: '100vh' + } +}); + +interface MainPanelDataProps { + user?: User; + working: boolean; +} + +interface MainPanelGeneralProps { + buildInfo: string; +} + +interface MainPanelState { + searchText: string; +} + +type MainPanelProps = MainPanelDataProps & MainPanelGeneralProps & DispatchProp & WithStyles; + +export const MainPanel = withStyles(styles)( + connect( + (state: RootState) => ({ + user: state.auth.user, + working: isSystemWorking(state.progressIndicator) + }) + )( + class extends React.Component { + state = { + searchText: "", + }; + + render() { + const { classes, user, buildInfo, working } = this.props; + const { searchText } = this.state; + return <> + + {working ? : null} + + + {user ? : } + + ; + } + + onSearch = (searchText: string) => { + this.setState({ searchText }); + this.props.dispatch(push(`/search?q=${searchText}`)); + } + } + ) +); \ No newline at end of file diff --git a/src/views/workbench/workbench.test.tsx b/src/views/workbench/workbench.test.tsx index d03e1172fb..14ca6947ed 100644 --- a/src/views/workbench/workbench.test.tsx +++ b/src/views/workbench/workbench.test.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { Workbench } from './workbench'; +import { WorkbenchPanel } from './workbench'; import { Provider } from "react-redux"; import { configureStore } from "~/store/store"; import createBrowserHistory from "history/createBrowserHistory"; @@ -24,7 +24,7 @@ it('renders without crashing', () => { - + , diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index ad1a266881..78918be0c6 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -4,22 +4,15 @@ import * as React from 'react'; import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'; -import { connect, DispatchProp } from "react-redux"; import { Route, Switch } from "react-router"; -import { User } from "~/models/user"; -import { RootState } from "~/store/store"; -import { MainAppBar } from '~/views-components/main-app-bar/main-app-bar'; -import { push } from 'react-router-redux'; import { ProjectPanel } from "~/views/project-panel/project-panel"; import { DetailsPanel } from '~/views-components/details-panel/details-panel'; import { ArvadosTheme } from '~/common/custom-theme'; -import { detailsPanelActions } from "~/store/details-panel/details-panel-action"; import { ContextMenu } from "~/views-components/context-menu/context-menu"; import { FavoritePanel } from "../favorite-panel/favorite-panel"; import { CurrentTokenDialog } from '~/views-components/current-token-dialog/current-token-dialog'; import { Snackbar } from '~/views-components/snackbar/snackbar'; import { CollectionPanel } from '../collection-panel/collection-panel'; -import { AuthService } from "~/services/auth-service/auth-service"; import { RenameFileDialog } from '~/views-components/rename-file-dialog/rename-file-dialog'; import { FileRemoveDialog } from '~/views-components/file-remove-dialog/file-remove-dialog'; import { MultipleFilesRemoveDialog } from '~/views-components/file-remove-dialog/multiple-files-remove-dialog'; @@ -41,20 +34,17 @@ import { FilesUploadCollectionDialog } from '~/views-components/dialog-forms/fil import { PartialCopyCollectionDialog } from '~/views-components/dialog-forms/partial-copy-collection-dialog'; import { TrashPanel } from "~/views/trash-panel/trash-panel"; import { MainContentBar } from '~/views-components/main-content-bar/main-content-bar'; -import { Grid, LinearProgress } from '@material-ui/core'; +import { Grid } from '@material-ui/core'; import { SharedWithMePanel } from '../shared-with-me-panel/shared-with-me-panel'; import SplitterLayout from 'react-splitter-layout'; import { ProcessCommandDialog } from '~/views-components/process-command-dialog/process-command-dialog'; -import { isSystemWorking } from "~/store/progress-indicator/progress-indicator-reducer"; -type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content' | 'appBar'; +type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content'; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ root: { - overflow: 'hidden', - width: '100vw', - height: '100vh', - paddingTop: theme.spacing.unit * 8 + paddingTop: theme.spacing.unit * 7, + background: theme.palette.background.default }, container: { position: 'relative' @@ -65,127 +55,71 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ } }, asidePanel: { - height: '100%', - background: theme.palette.background.default + paddingTop: theme.spacing.unit, + height: '100%' }, contentWrapper: { - background: theme.palette.background.default, - minWidth: 0, + paddingTop: theme.spacing.unit, + minWidth: 0 }, content: { minWidth: 0, paddingLeft: theme.spacing.unit * 3, paddingRight: theme.spacing.unit * 3, - }, - appBar: { - zIndex: 1, } }); -interface WorkbenchDataProps { - user?: User; - currentToken?: string; - working: boolean; -} - -interface WorkbenchGeneralProps { - authService: AuthService; - buildInfo: string; -} - -type WorkbenchProps = WorkbenchDataProps & WorkbenchGeneralProps & DispatchProp & WithStyles; +type WorkbenchPanelProps = WithStyles; -interface WorkbenchState { - searchText: string; -} - -export const Workbench = withStyles(styles)( - connect( - (state: RootState) => ({ - user: state.auth.user, - currentToken: state.auth.apiToken, - working: isSystemWorking(state.progressIndicator) - }) - )( - class extends React.Component { - state = { - searchText: "", - }; - render() { - const { classes } = this.props; - return <> - - {this.props.working ? : null} - - - {this.props.user && - - - - - - - - - - - - - - - - - - - - - - - - - - - - - } +export const WorkbenchPanel = + withStyles(styles)(({ classes }: WorkbenchPanelProps) => + + + + + - - - - - - - - - - - - - - - - - - - - - ; - } - - onSearch = (searchText: string) => { - this.setState({ searchText }); - this.props.dispatch(push(`/search?q=${searchText}`)); - } - - toggleDetailsPanel = () => { - this.props.dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL()); - } - - } - ) -); + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); -- 2.39.5