From: Eric Biagiotti Date: Tue, 23 Apr 2019 15:09:35 +0000 (-0400) Subject: 15088: Adds routing for link-account panel X-Git-Tag: 1.4.0~1^2~34 X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/6dfcd99cab6ea26ef947bdc2c90020ccea1c925b 15088: Adds routing for link-account panel Also adds a link in the my-account panel to access the link-account panel Arvados-DCO-1.1-Signed-off-by: Eric Biagiotti --- diff --git a/src/routes/route-change-handlers.ts b/src/routes/route-change-handlers.ts index 2811f95a..e0a51550 100644 --- a/src/routes/route-change-handlers.ts +++ b/src/routes/route-change-handlers.ts @@ -41,6 +41,7 @@ const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => { const computeNodesMatch = Routes.matchComputeNodesRoute(pathname); const apiClientAuthorizationsMatch = Routes.matchApiClientAuthorizationsRoute(pathname); const myAccountMatch = Routes.matchMyAccountRoute(pathname); + const linkAccountMatch = Routes.matchLinkAccountRoute(pathname); const userMatch = Routes.matchUsersRoute(pathname); const groupsMatch = Routes.matchGroupsRoute(pathname); const groupDetailsMatch = Routes.matchGroupDetailsRoute(pathname); @@ -94,6 +95,8 @@ const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => { store.dispatch(WorkbenchActions.loadApiClientAuthorizations); } else if (myAccountMatch) { store.dispatch(WorkbenchActions.loadMyAccount); + } else if (linkAccountMatch) { + store.dispatch(WorkbenchActions.loadLinkAccount); } else if (userMatch) { store.dispatch(WorkbenchActions.loadUsers); } else if (groupsMatch) { diff --git a/src/routes/routes.ts b/src/routes/routes.ts index 3fd6670d..02835fcc 100644 --- a/src/routes/routes.ts +++ b/src/routes/routes.ts @@ -27,6 +27,7 @@ export const Routes = { SSH_KEYS_USER: `/ssh-keys-user`, SITE_MANAGER: `/site-manager`, MY_ACCOUNT: '/my-account', + LINK_ACCOUNT: '/link_account', KEEP_SERVICES: `/keep-services`, COMPUTE_NODES: `/nodes`, USERS: '/users', @@ -115,6 +116,9 @@ export const matchSiteManagerRoute = (route: string) => export const matchMyAccountRoute = (route: string) => matchPath(route, { path: Routes.MY_ACCOUNT }); +export const matchLinkAccountRoute = (route: string) => + matchPath(route, { path: Routes.LINK_ACCOUNT }); + export const matchKeepServicesRoute = (route: string) => matchPath(route, { path: Routes.KEEP_SERVICES }); diff --git a/src/store/link-account/link-account-panel-actions.ts b/src/store/link-account/link-account-panel-actions.ts new file mode 100644 index 00000000..51397524 --- /dev/null +++ b/src/store/link-account/link-account-panel-actions.ts @@ -0,0 +1,18 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { Dispatch } from "redux"; +import { RootState } from "~/store/store"; +import { initialize } from "redux-form"; +import { ServiceRepository } from "~/services/services"; +import { setBreadcrumbs } from "~/store/breadcrumbs/breadcrumbs-actions"; +import { authActions } from "~/store/auth/auth-action"; +import { snackbarActions, SnackbarKind } from "~/store/snackbar/snackbar-actions"; + +export const LINK_ACCOUNT_FORM = 'linkAccountForm'; + +export const loadLinkAccountPanel = () => + (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { + dispatch(setBreadcrumbs([{ label: 'Link account'}])); + }; diff --git a/src/store/my-account/my-account-panel-actions.ts b/src/store/my-account/my-account-panel-actions.ts index 34bb2693..294f77f6 100644 --- a/src/store/my-account/my-account-panel-actions.ts +++ b/src/store/my-account/my-account-panel-actions.ts @@ -9,6 +9,7 @@ import { ServiceRepository } from "~/services/services"; import { setBreadcrumbs } from "~/store/breadcrumbs/breadcrumbs-actions"; import { authActions } from "~/store/auth/auth-action"; import { snackbarActions, SnackbarKind } from "~/store/snackbar/snackbar-actions"; +import { navigateToLinkAccount } from '~/store/navigation/navigation-action'; export const MY_ACCOUNT_FORM = 'myAccountForm'; @@ -17,6 +18,11 @@ export const loadMyAccountPanel = () => dispatch(setBreadcrumbs([{ label: 'User profile'}])); }; +export const openLinkAccount = () => + (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { + dispatch(navigateToLinkAccount); + }; + export const saveEditedUser = (resource: any) => async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { try { diff --git a/src/store/navigation/navigation-action.ts b/src/store/navigation/navigation-action.ts index af7a0c03..3bec1609 100644 --- a/src/store/navigation/navigation-action.ts +++ b/src/store/navigation/navigation-action.ts @@ -85,6 +85,8 @@ export const navigateToSiteManager= push(Routes.SITE_MANAGER); export const navigateToMyAccount = push(Routes.MY_ACCOUNT); +export const navigateToLinkAccount = push(Routes.LINK_ACCOUNT); + export const navigateToKeepServices = push(Routes.KEEP_SERVICES); export const navigateToComputeNodes = push(Routes.COMPUTE_NODES); diff --git a/src/store/workbench/workbench-actions.ts b/src/store/workbench/workbench-actions.ts index adf3fa15..10f86a68 100644 --- a/src/store/workbench/workbench-actions.ts +++ b/src/store/workbench/workbench-actions.ts @@ -59,6 +59,7 @@ import { CopyFormDialogData } from '~/store/copy-dialog/copy-dialog'; import { loadWorkflowPanel, workflowPanelActions } from '~/store/workflow-panel/workflow-panel-actions'; import { loadSshKeysPanel } from '~/store/auth/auth-action-ssh'; import { loadMyAccountPanel } from '~/store/my-account/my-account-panel-actions'; +import { loadLinkAccountPanel } from '~/store/link-account/link-account-panel-actions'; import { loadSiteManagerPanel } from '~/store/auth/auth-action-session'; import { workflowPanelColumns } from '~/views/workflow-panel/workflow-panel-view'; import { progressIndicatorActions } from '~/store/progress-indicator/progress-indicator-actions'; @@ -485,6 +486,11 @@ export const loadMyAccount = handleFirstTimeLoad( dispatch(loadMyAccountPanel()); }); +export const loadLinkAccount = handleFirstTimeLoad( + (dispatch: Dispatch) => { + dispatch(loadLinkAccountPanel()); + }); + export const loadKeepServices = handleFirstTimeLoad( async (dispatch: Dispatch) => { await dispatch(loadKeepServicesPanel()); diff --git a/src/views/my-account-panel/my-account-panel-root.tsx b/src/views/my-account-panel/my-account-panel-root.tsx index e84b3b64..7dcbe09a 100644 --- a/src/views/my-account-panel/my-account-panel-root.tsx +++ b/src/views/my-account-panel/my-account-panel-root.tsx @@ -6,6 +6,7 @@ import * as React from 'react'; import { Field, InjectedFormProps, WrappedFieldProps } from "redux-form"; import { TextField } from "~/components/text-field/text-field"; import { NativeSelectField } from "~/components/select-field/select-field"; +import { DetailsAttribute } from '~/components/details-attribute/details-attribute'; import { StyleRulesCallback, WithStyles, @@ -21,7 +22,7 @@ import { ArvadosTheme } from '~/common/custom-theme'; import { User } from "~/models/user"; import { MY_ACCOUNT_VALIDATION } from "~/validators/validators"; -type CssRules = 'root' | 'gridItem' | 'label' | 'title' | 'actions'; +type CssRules = 'root' | 'gridItem' | 'label' | 'title' | 'actions' | 'link'; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ root: { @@ -39,13 +40,24 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ marginBottom: theme.spacing.unit * 3, color: theme.palette.grey["600"] }, + link: { + lineHeight:'2.1', + whiteSpace: 'nowrap', + fontSize: '1rem', + color: theme.palette.primary.main, + '&:hover': { + cursor: 'pointer' + } + }, actions: { display: 'flex', justifyContent: 'flex-end' } }); -export interface MyAccountPanelRootActionProps { } +export interface MyAccountPanelRootActionProps { + openLinkAccount: () => void; + } export interface MyAccountPanelRootDataProps { isPristine: boolean; @@ -64,7 +76,7 @@ const RoleTypes = [ { key: 'Other', value: 'Other' } ]; -type MyAccountPanelRootProps = InjectedFormProps & MyAccountPanelRootDataProps & WithStyles; +type MyAccountPanelRootProps = InjectedFormProps & MyAccountPanelRootActionProps & MyAccountPanelRootDataProps & WithStyles; type LocalClusterProp = { localCluster: string }; const renderField: React.ComponentType = ({ input, localCluster }) => ( @@ -72,12 +84,21 @@ const renderField: React.ComponentType = ( ); export const MyAccountPanelRoot = withStyles(styles)( - ({ classes, isValid, handleSubmit, reset, isPristine, invalid, submitting, localCluster }: MyAccountPanelRootProps) => { + ({ classes, isValid, handleSubmit, reset, isPristine, invalid, submitting, localCluster, openLinkAccount}: MyAccountPanelRootProps) => { return - - Logged in as - + + + + Logged in as + + + + openLinkAccount()}> + + + +
diff --git a/src/views/my-account-panel/my-account-panel.tsx b/src/views/my-account-panel/my-account-panel.tsx index bd1f5874..85f285d6 100644 --- a/src/views/my-account-panel/my-account-panel.tsx +++ b/src/views/my-account-panel/my-account-panel.tsx @@ -3,11 +3,12 @@ // SPDX-License-Identifier: AGPL-3.0 import { RootState } from '~/store/store'; +import { Dispatch } from 'redux'; import { compose } from 'redux'; import { reduxForm, isPristine, isValid } from 'redux-form'; import { connect } from 'react-redux'; -import { saveEditedUser } from '~/store/my-account/my-account-panel-actions'; -import { MyAccountPanelRoot, MyAccountPanelRootDataProps } from '~/views/my-account-panel/my-account-panel-root'; +import { saveEditedUser, openLinkAccount } from '~/store/my-account/my-account-panel-actions'; +import { MyAccountPanelRoot, MyAccountPanelRootDataProps, MyAccountPanelRootActionProps } from '~/views/my-account-panel/my-account-panel-root'; import { MY_ACCOUNT_FORM } from "~/store/my-account/my-account-panel-actions"; const mapStateToProps = (state: RootState): MyAccountPanelRootDataProps => ({ @@ -17,8 +18,12 @@ const mapStateToProps = (state: RootState): MyAccountPanelRootDataProps => ({ localCluster: state.auth.localCluster }); +const mapDispatchToProps = (dispatch: Dispatch): MyAccountPanelRootActionProps => ({ + openLinkAccount: () => dispatch(openLinkAccount()) +}); + export const MyAccountPanel = compose( - connect(mapStateToProps), + connect(mapStateToProps, mapDispatchToProps), reduxForm({ form: MY_ACCOUNT_FORM, onSubmit: (data, dispatch) => {