From: Pawel Kromplewski <pawel.kromplewski@contractors.roche.com>
Date: Wed, 5 Dec 2018 15:13:43 +0000 (+0100)
Subject: Merge branch 'master' into 14452-my-account
X-Git-Tag: 1.4.0~92^2~3
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/a1e2b8ba77e4a7273940a3fc542bc42e282618a7?hp=ceda57340f34d71fb4289b344e6ca839db06f5e7

Merge branch 'master' into 14452-my-account

refs #14452

Arvados-DCO-1.1-Signed-off-by: Pawel Kromplewski <pawel.kromplewski@contractors.roche.com>
---

diff --git a/src/components/text-field/text-field.tsx b/src/components/text-field/text-field.tsx
index d57c4a8c..627e004d 100644
--- a/src/components/text-field/text-field.tsx
+++ b/src/components/text-field/text-field.tsx
@@ -19,13 +19,13 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 type TextFieldProps = WrappedFieldProps & WithStyles<CssRules>;
 
 export const TextField = withStyles(styles)((props: TextFieldProps & { 
-    label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, children: React.ReactNode
+    label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, disabled?: boolean, children: React.ReactNode
 }) =>
     <MaterialTextField
         helperText={props.meta.touched && props.meta.error}
         className={props.classes.textField}
         label={props.label}
-        disabled={props.meta.submitting}
+        disabled={props.disabled || props.meta.submitting}
         error={props.meta.touched && !!props.meta.error}
         autoComplete='off'
         autoFocus={props.autoFocus}
diff --git a/src/models/user.ts b/src/models/user.ts
index 9f9c5347..dfb41889 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -4,12 +4,24 @@
 
 import { Resource, ResourceKind } from '~/models/resource';
 
+export type userPrefs = {
+    profile?: {
+        organization?: string,
+        organization_email?: string,
+        lab?: string,
+        website_url?: string,
+        role?: string
+    }
+};
+
 export interface User {
     email: string;
     firstName: string;
     lastName: string;
     uuid: string;
     ownerUuid: string;
+    identityUrl: string;
+    prefs: userPrefs;
     isAdmin: boolean;
 }
 
diff --git a/src/routes/route-change-handlers.ts b/src/routes/route-change-handlers.ts
index f2304aca..68de3107 100644
--- a/src/routes/route-change-handlers.ts
+++ b/src/routes/route-change-handlers.ts
@@ -31,6 +31,7 @@ const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => {
     const sshKeysMatch = Routes.matchSshKeysRoute(pathname);
     const keepServicesMatch = Routes.matchKeepServicesRoute(pathname);
     const computeNodesMatch = Routes.matchComputeNodesRoute(pathname);
+    const myAccountMatch = Routes.matchMyAccountRoute(pathname);
 
     if (projectMatch) {
         store.dispatch(WorkbenchActions.loadProject(projectMatch.params.id));
@@ -64,5 +65,7 @@ const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => {
         store.dispatch(WorkbenchActions.loadKeepServices);
     } else if (computeNodesMatch) {
         store.dispatch(WorkbenchActions.loadComputeNodes);
+    } else if (myAccountMatch) {
+        store.dispatch(WorkbenchActions.loadMyAccount);
     }
 };
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
index 8f8fa06b..71d920ab 100644
--- a/src/routes/routes.ts
+++ b/src/routes/routes.ts
@@ -23,6 +23,7 @@ export const Routes = {
     WORKFLOWS: '/workflows',
     SEARCH_RESULTS: '/search-results',
     SSH_KEYS: `/ssh-keys`,
+    MY_ACCOUNT: '/my-account',
     KEEP_SERVICES: `/keep-services`,
     COMPUTE_NODES: `/nodes`
 };
@@ -91,6 +92,9 @@ export const matchRepositoriesRoute = (route: string) =>
 export const matchSshKeysRoute = (route: string) =>
     matchPath(route, { path: Routes.SSH_KEYS });
 
+export const matchMyAccountRoute = (route: string) =>
+    matchPath(route, { path: Routes.MY_ACCOUNT });
+
 export const matchKeepServicesRoute = (route: string) =>
     matchPath(route, { path: Routes.KEEP_SERVICES });
 
diff --git a/src/services/auth-service/auth-service.ts b/src/services/auth-service/auth-service.ts
index 98c03215..8c2ad5ca 100644
--- a/src/services/auth-service/auth-service.ts
+++ b/src/services/auth-service/auth-service.ts
@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import { User } from "~/models/user";
+import { User, userPrefs } from "~/models/user";
 import { AxiosInstance } from "axios";
 import { ApiActions } from "~/services/api/api-actions";
 import * as uuid from "uuid/v4";
@@ -14,6 +14,8 @@ export const USER_LAST_NAME_KEY = 'userLastName';
 export const USER_UUID_KEY = 'userUuid';
 export const USER_OWNER_UUID_KEY = 'userOwnerUuid';
 export const USER_IS_ADMIN = 'isAdmin';
+export const USER_IDENTITY_URL = 'identityUrl';
+export const USER_PREFS = 'prefs';
 
 export interface UserDetailsResponse {
     email: string;
@@ -22,6 +24,8 @@ export interface UserDetailsResponse {
     uuid: string;
     owner_uuid: string;
     is_admin: boolean;
+    identity_url: string;
+    prefs: userPrefs;
 }
 
 export class AuthService {
@@ -61,10 +65,12 @@ export class AuthService {
         const lastName = localStorage.getItem(USER_LAST_NAME_KEY);
         const uuid = this.getUuid();
         const ownerUuid = this.getOwnerUuid();
-        const isAdmin = this.getIsAdmin();   
+        const isAdmin = this.getIsAdmin();
+        const identityUrl = localStorage.getItem(USER_IDENTITY_URL);
+        const prefs = JSON.parse(localStorage.getItem(USER_PREFS) || '{"profile": {}}');
 
-        return email && firstName && lastName && uuid && ownerUuid
-            ? { email, firstName, lastName, uuid, ownerUuid, isAdmin }
+        return email && firstName && lastName && uuid && ownerUuid && identityUrl && prefs
+            ? { email, firstName, lastName, uuid, ownerUuid, isAdmin, identityUrl, prefs }
             : undefined;
     }
 
@@ -75,6 +81,8 @@ export class AuthService {
         localStorage.setItem(USER_UUID_KEY, user.uuid);
         localStorage.setItem(USER_OWNER_UUID_KEY, user.ownerUuid);
         localStorage.setItem(USER_IS_ADMIN, JSON.stringify(user.isAdmin));
+        localStorage.setItem(USER_IDENTITY_URL, user.identityUrl);
+        localStorage.setItem(USER_PREFS, JSON.stringify(user.prefs));
     }
 
     public removeUser() {
@@ -84,6 +92,8 @@ export class AuthService {
         localStorage.removeItem(USER_UUID_KEY);
         localStorage.removeItem(USER_OWNER_UUID_KEY);
         localStorage.removeItem(USER_IS_ADMIN);
+        localStorage.removeItem(USER_IDENTITY_URL);
+        localStorage.removeItem(USER_PREFS);
     }
 
     public login() {
@@ -103,13 +113,17 @@ export class AuthService {
             .get<UserDetailsResponse>('/users/current')
             .then(resp => {
                 this.actions.progressFn(reqId, false);
+                const prefs = resp.data.prefs.profile ? resp.data.prefs : { profile: {}};
+                console.log(resp.data);
                 return {
                     email: resp.data.email,
                     firstName: resp.data.first_name,
                     lastName: resp.data.last_name,
                     uuid: resp.data.uuid,
                     ownerUuid: resp.data.owner_uuid,
-                    isAdmin: resp.data.is_admin
+                    isAdmin: resp.data.is_admin,
+                    identityUrl: resp.data.identity_url,
+                    prefs
                 };
             })
             .catch(e => {
diff --git a/src/store/auth/auth-action.ts b/src/store/auth/auth-action.ts
index e1b36f82..0ec39ebc 100644
--- a/src/store/auth/auth-action.ts
+++ b/src/store/auth/auth-action.ts
@@ -161,5 +161,4 @@ export const loadSshKeysPanel = () =>
         }
     };
 
-
 export type AuthAction = UnionOf<typeof authActions>;
diff --git a/src/store/auth/auth-reducer.test.ts b/src/store/auth/auth-reducer.test.ts
index a4017db3..b9f768f1 100644
--- a/src/store/auth/auth-reducer.test.ts
+++ b/src/store/auth/auth-reducer.test.ts
@@ -30,6 +30,8 @@ describe('auth-reducer', () => {
             lastName: "Doe",
             uuid: "uuid",
             ownerUuid: "ownerUuid",
+            identityUrl: "identityUrl",
+            prefs: {},
             isAdmin: false
         };
         const state = reducer(initialState, authActions.INIT({ user, token: "token" }));
@@ -60,6 +62,8 @@ describe('auth-reducer', () => {
             lastName: "Doe",
             uuid: "uuid",
             ownerUuid: "ownerUuid",
+            identityUrl: "identityUrl",
+            prefs: {},
             isAdmin: false
         };
 
diff --git a/src/store/my-account/my-account-panel-actions.ts b/src/store/my-account/my-account-panel-actions.ts
new file mode 100644
index 00000000..93c6a3c5
--- /dev/null
+++ b/src/store/my-account/my-account-panel-actions.ts
@@ -0,0 +1,34 @@
+// 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 } from "~/store/snackbar/snackbar-actions";
+import { MY_ACCOUNT_FORM } from "~/views/my-account-panel/my-account-panel-root";
+
+export const loadMyAccountPanel = () =>
+    async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+        try {
+            dispatch(setBreadcrumbs([{ label: 'User profile'}]));
+        } catch (e) {
+            return;
+        }
+    };
+
+export const saveEditedUser = (resource: any) =>
+    async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+        try {
+            await services.userService.update(resource.uuid, resource);
+            services.authService.saveUser(resource);
+            dispatch(authActions.USER_DETAILS_SUCCESS(resource));
+            dispatch(initialize(MY_ACCOUNT_FORM, resource));
+            dispatch(snackbarActions.OPEN_SNACKBAR({ message: "Profile has been updated." }));
+        } catch(e) {
+            return;
+        }
+    };
diff --git a/src/store/navigation/navigation-action.ts b/src/store/navigation/navigation-action.ts
index 50cfd88d..a3652726 100644
--- a/src/store/navigation/navigation-action.ts
+++ b/src/store/navigation/navigation-action.ts
@@ -68,6 +68,8 @@ export const navigateToRepositories = push(Routes.REPOSITORIES);
 
 export const navigateToSshKeys= push(Routes.SSH_KEYS);
 
+export const navigateToMyAccount = push(Routes.MY_ACCOUNT);
+
 export const navigateToKeepServices = push(Routes.KEEP_SERVICES);
 
 export const navigateToComputeNodes = push(Routes.COMPUTE_NODES);
\ No newline at end of file
diff --git a/src/store/workbench/workbench-actions.ts b/src/store/workbench/workbench-actions.ts
index e3f96a9c..9d0140f3 100644
--- a/src/store/workbench/workbench-actions.ts
+++ b/src/store/workbench/workbench-actions.ts
@@ -40,6 +40,7 @@ import { loadSharedWithMePanel } from '~/store/shared-with-me-panel/shared-with-
 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';
+import { loadMyAccountPanel } from '~/store/my-account/my-account-panel-actions';
 import { workflowPanelColumns } from '~/views/workflow-panel/workflow-panel-view';
 import { progressIndicatorActions } from '~/store/progress-indicator/progress-indicator-actions';
 import { getProgressIndicator } from '~/store/progress-indicator/progress-indicator-reducer';
@@ -412,6 +413,11 @@ export const loadSshKeys = handleFirstTimeLoad(
         await dispatch(loadSshKeysPanel());
     });
 
+export const loadMyAccount = handleFirstTimeLoad(
+    async (dispatch: Dispatch<any>) => {
+        await dispatch(loadMyAccountPanel());
+    });
+
 export const loadKeepServices = handleFirstTimeLoad(
     async (dispatch: Dispatch<any>) => {
         await dispatch(loadKeepServicesPanel());
diff --git a/src/views-components/main-app-bar/account-menu.tsx b/src/views-components/main-app-bar/account-menu.tsx
index f4232a12..ee726f3d 100644
--- a/src/views-components/main-app-bar/account-menu.tsx
+++ b/src/views-components/main-app-bar/account-menu.tsx
@@ -12,7 +12,7 @@ import { logout } from '~/store/auth/auth-action';
 import { RootState } from "~/store/store";
 import { openCurrentTokenDialog } from '~/store/current-token-dialog/current-token-dialog-actions';
 import { openRepositoriesPanel } from "~/store/repositories/repositories-actions";
-import { navigateToSshKeys, navigateToKeepServices, navigateToComputeNodes } from '~/store/navigation/navigation-action';
+import { navigateToSshKeys, navigateToKeepServices, navigateToComputeNodes, navigateToMyAccount } from '~/store/navigation/navigation-action';
 import { openVirtualMachines } from "~/store/virtual-machines/virtual-machines-actions";
 
 interface AccountMenuProps {
@@ -39,7 +39,7 @@ export const AccountMenu = connect(mapStateToProps)(
                 <MenuItem onClick={() => dispatch(navigateToSshKeys)}>Ssh Keys</MenuItem>
                 { user.isAdmin && <MenuItem onClick={() => dispatch(navigateToKeepServices)}>Keep Services</MenuItem> }
                 { user.isAdmin && <MenuItem onClick={() => dispatch(navigateToComputeNodes)}>Compute Nodes</MenuItem> }
-                <MenuItem>My account</MenuItem>
+                <MenuItem onClick={() => dispatch(navigateToMyAccount)}>My account</MenuItem>
                 <MenuItem onClick={() => dispatch(logout())}>Logout</MenuItem>
             </DropdownMenu>
             : null);
diff --git a/src/views/my-account-panel/my-account-panel-root.tsx b/src/views/my-account-panel/my-account-panel-root.tsx
new file mode 100644
index 00000000..994a7819
--- /dev/null
+++ b/src/views/my-account-panel/my-account-panel-root.tsx
@@ -0,0 +1,155 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Field, InjectedFormProps } from "redux-form";
+import { TextField } from "~/components/text-field/text-field";
+import { NativeSelectField } from "~/components/select-field/select-field";
+import {
+    StyleRulesCallback,
+    WithStyles,
+    withStyles,
+    Card,
+    CardContent,
+    Button,
+    Typography,
+    Grid,
+    InputLabel
+} from '@material-ui/core';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { User } from "~/models/user";
+import { require } from "~/validators/require";
+
+type CssRules = 'root' | 'gridItem' | 'label' | 'title' | 'actions';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        width: '100%',
+        overflow: 'auto'
+    },
+    gridItem: {
+        height: 45,
+        marginBottom: 20
+    },
+    label: {
+        fontSize: '0.675rem'
+    },
+    title: {
+        marginBottom: theme.spacing.unit * 3,
+        color: theme.palette.grey["600"]
+    },
+    actions: {
+        display: 'flex',
+        justifyContent: 'flex-end'
+    }
+});
+
+export interface MyAccountPanelRootActionProps {}
+
+export interface MyAccountPanelRootDataProps {
+    isPristine: boolean;
+    isValid: boolean;
+    initialValues?: User;
+}
+
+export const MY_ACCOUNT_FORM = 'myAccountForm';
+
+const FILES_FIELD_VALIDATION = [require];
+
+type MyAccountPanelRootProps = InjectedFormProps<MyAccountPanelRootActionProps> & MyAccountPanelRootDataProps & WithStyles<CssRules>;
+
+export const MyAccountPanelRoot = withStyles(styles)(
+    ({ classes, isValid, handleSubmit, reset, isPristine, invalid, submitting }: MyAccountPanelRootProps) => {
+        return <Card className={classes.root}>
+            <CardContent>
+                <Typography variant="title" className={classes.title}>User profile</Typography>
+                <form onSubmit={handleSubmit}>
+                    <Grid container direction="row" spacing={24}>
+                        <Grid item xs={6}>
+                            <Grid item className={classes.gridItem}>
+                                <Field
+                                    label="E-mail"
+                                    name="email"
+                                    component={TextField}
+                                    disabled
+                                />
+                            </Grid>
+                            <Grid item className={classes.gridItem}>
+                                <Field
+                                    label="First name"
+                                    name="firstName"
+                                    component={TextField}
+                                    disabled
+                                />
+                            </Grid>
+                            <Grid item className={classes.gridItem}>
+                                <Field
+                                    label="Identity URL"
+                                    name="identityUrl"
+                                    component={TextField}
+                                    disabled
+                                />
+                            </Grid>
+                            <Grid item className={classes.gridItem}>
+                                <Field
+                                    label="*Organization"
+                                    name="prefs.profile.organization"
+                                    component={TextField}
+                                    validate={FILES_FIELD_VALIDATION}
+                                />
+                            </Grid>
+                            <Grid item className={classes.gridItem}>
+                                <Field
+                                    label="Website"
+                                    name="prefs.profile.website_url"
+                                    component={TextField}
+                                />
+                            </Grid>
+                            <Grid item className={classes.gridItem}>
+                                <InputLabel className={classes.label} htmlFor="prefs.profile.role">Organization</InputLabel>
+                                <Field
+                                    id="prefs.profile.role"
+                                    name="prefs.profile.role"
+                                    component={NativeSelectField}
+                                    items={[
+                                        {key: 'Bio-informatician', value: 'Bio-informatician'},
+                                        {key: 'Data Scientist', value: 'Data Scientist'},
+                                        {key: 'Analyst', value: 'Analyst'},
+                                        {key: 'Researcher', value: 'Researcher'},
+                                        {key: 'Software Developer', value: 'Software Developer'},
+                                        {key: 'System Administrator', value: 'System Administrator'},
+                                        {key: 'Other', value: 'Other'}
+                                    ]}
+                                />
+                            </Grid>
+                        </Grid>
+                        <Grid item xs={6}>
+                            <Grid item className={classes.gridItem} />
+                            <Grid item className={classes.gridItem}>
+                                <Field
+                                    label="Last name"
+                                    name="lastName"
+                                    component={TextField}
+                                    disabled
+                                />
+                            </Grid>
+                            <Grid item className={classes.gridItem} />
+                            <Grid item className={classes.gridItem}>
+                                <Field
+                                    label="*E-mail at Organization"
+                                    name="prefs.profile.organization_email"
+                                    component={TextField}
+                                    validate={FILES_FIELD_VALIDATION}
+                                />
+                            </Grid>
+                        </Grid>
+                        <Grid item xs={12} className={classes.actions}>
+                            <Button color="primary" onClick={reset} disabled={isPristine}>Discard changes</Button>
+                            <Button color="primary" variant="contained" type="submit" disabled={isPristine || invalid || submitting}>Save changes</Button>
+                        </Grid>
+                    </Grid>
+                </form>
+            </CardContent>
+        </Card>;}
+);
\ No newline at end of file
diff --git a/src/views/my-account-panel/my-account-panel.tsx b/src/views/my-account-panel/my-account-panel.tsx
new file mode 100644
index 00000000..03caa887
--- /dev/null
+++ b/src/views/my-account-panel/my-account-panel.tsx
@@ -0,0 +1,25 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { RootState } from '~/store/store';
+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, MY_ACCOUNT_FORM } from '~/views/my-account-panel/my-account-panel-root';
+
+const mapStateToProps = (state: RootState): MyAccountPanelRootDataProps => ({
+    isPristine: isPristine(MY_ACCOUNT_FORM)(state),
+    isValid: isValid(MY_ACCOUNT_FORM)(state),
+    initialValues: state.auth.user
+});
+
+export const MyAccountPanel = compose(
+    connect(mapStateToProps),
+    reduxForm({
+    form: MY_ACCOUNT_FORM,
+    onSubmit: (data, dispatch) => {
+        dispatch(saveEditedUser(data));
+    }
+}))(MyAccountPanelRoot);
\ No newline at end of file
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 92c2438b..5efffa19 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -45,6 +45,7 @@ import SplitterLayout from 'react-splitter-layout';
 import { WorkflowPanel } from '~/views/workflow-panel/workflow-panel';
 import { SearchResultsPanel } from '~/views/search-results-panel/search-results-panel';
 import { SshKeyPanel } from '~/views/ssh-key-panel/ssh-key-panel';
+import { MyAccountPanel } from '~/views/my-account-panel/my-account-panel';
 import { SharingDialog } from '~/views-components/sharing-dialog/sharing-dialog';
 import { AdvancedTabDialog } from '~/views-components/advanced-tab-dialog/advanced-tab-dialog';
 import { ProcessInputDialog } from '~/views-components/process-input-dialog/process-input-dialog';
@@ -141,6 +142,7 @@ export const WorkbenchPanel =
                                 <Route path={Routes.SSH_KEYS} component={SshKeyPanel} />
                                 <Route path={Routes.KEEP_SERVICES} component={KeepServicePanel} />
                                 <Route path={Routes.COMPUTE_NODES} component={ComputeNodePanel} />
+                                <Route path={Routes.MY_ACCOUNT} component={MyAccountPanel} />
                             </Switch>
                         </Grid>
                     </Grid>