18559: Add empty user profile page for 404

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/src/store/user-profile/user-profile-actions.ts b/src/store/user-profile/user-profile-actions.ts
index c8556862a1db7be46ff78fb18ad97a87594919d2..0fdeef9e9ebc9af37ee46c664c1b02ad55dd393e 100644 (file)
--- a/src/store/user-profile/user-profile-actions.ts
+++ b/src/store/user-profile/user-profile-actions.ts
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 import { RootState } from "store/store";
 import { Dispatch } from 'redux';
 // SPDX-License-Identifier: AGPL-3.0
 import { RootState } from "store/store";
 import { Dispatch } from 'redux';

-import { initialize } from "redux-form";
+import { initialize, reset } from "redux-form";

 import { ServiceRepository } from "services/services";
 import { bindDataExplorerActions } from "store/data-explorer/data-explorer-action";
 import { propertiesActions } from 'store/properties/properties-actions';
 import { ServiceRepository } from "services/services";
 import { bindDataExplorerActions } from "store/data-explorer/data-explorer-action";
 import { propertiesActions } from 'store/properties/properties-actions';


@@ -16,21 +16,37 @@ export const USER_PROFILE_PANEL_ID = 'userProfilePanel';
 export const USER_PROFILE_FORM = 'userProfileForm';
 export const DEACTIVATE_DIALOG = 'deactivateDialog';
 export const SETUP_DIALOG = 'setupDialog';
 export const USER_PROFILE_FORM = 'userProfileForm';
 export const DEACTIVATE_DIALOG = 'deactivateDialog';
 export const SETUP_DIALOG = 'setupDialog';

+export const IS_PROFILE_INACCESSIBLE = 'isProfileInaccessible';

 
 export const UserProfileGroupsActions = bindDataExplorerActions(USER_PROFILE_PANEL_ID);
 
 export const getCurrentUserProfilePanelUuid = getProperty<string>(USER_PROFILE_PANEL_ID);
 
 export const UserProfileGroupsActions = bindDataExplorerActions(USER_PROFILE_PANEL_ID);
 
 export const getCurrentUserProfilePanelUuid = getProperty<string>(USER_PROFILE_PANEL_ID);

+export const getUserProfileIsInaccessible = getProperty<boolean>(IS_PROFILE_INACCESSIBLE);

 
 export const loadUserProfilePanel = (userUuid?: string) =>
   async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
 
 export const loadUserProfilePanel = (userUuid?: string) =>
   async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {

+    // Reset isInacessible to ensure error screen is hidden
+    dispatch(propertiesActions.SET_PROPERTY({ key: IS_PROFILE_INACCESSIBLE, value: false }));

     // Get user uuid from route or use current user uuid
     const uuid = userUuid || getState().auth.user?.uuid;
     if (uuid) {
       await dispatch(propertiesActions.SET_PROPERTY({ key: USER_PROFILE_PANEL_ID, value: uuid }));
     // Get user uuid from route or use current user uuid
     const uuid = userUuid || getState().auth.user?.uuid;
     if (uuid) {
       await dispatch(propertiesActions.SET_PROPERTY({ key: USER_PROFILE_PANEL_ID, value: uuid }));

-      const user = await services.userService.get(uuid);
-      dispatch(initialize(USER_PROFILE_FORM, user));
-      dispatch(updateResources([user]));
-      dispatch(UserProfileGroupsActions.REQUEST_ITEMS());
+      try {
+        const user = await services.userService.get(uuid, false);
+        dispatch(initialize(USER_PROFILE_FORM, user));
+        dispatch(updateResources([user]));
+        dispatch(UserProfileGroupsActions.REQUEST_ITEMS());
+      } catch (e) {
+        if (e.status === 404) {
+          await dispatch(propertiesActions.SET_PROPERTY({ key: IS_PROFILE_INACCESSIBLE, value: true }));
+          dispatch(reset(USER_PROFILE_FORM));
+        } else {
+          dispatch(snackbarActions.OPEN_SNACKBAR({
+            message: 'Could not load user profile',
+            kind: SnackbarKind.ERROR
+          }));
+        }
+      }

     }
   }
 
     }
   }
 

diff --git a/src/views/user-profile-panel/user-profile-panel-root.tsx b/src/views/user-profile-panel/user-profile-panel-root.tsx
index 0beeab4fbc020fa60978e3c4f1def37d245c7032..f89ca5c5e8ebe5580aed3995bc270e9d00a730f8 100644 (file)
--- a/src/views/user-profile-panel/user-profile-panel-root.tsx
+++ b/src/views/user-profile-panel/user-profile-panel-root.tsx
@@ -28,23 +28,26 @@ import { DataTableDefaultView } from 'components/data-table-default-view/data-ta
 import { PROFILE_EMAIL_VALIDATION } from "validators/validators";
 import { USER_PROFILE_PANEL_ID } from 'store/user-profile/user-profile-actions';
 import { noop } from 'lodash';
 import { PROFILE_EMAIL_VALIDATION } from "validators/validators";
 import { USER_PROFILE_PANEL_ID } from 'store/user-profile/user-profile-actions';
 import { noop } from 'lodash';

-import { CopyIcon, GroupsIcon, MoreOptionsIcon } from 'components/icon/icon';
+import { CopyIcon, DetailsIcon, GroupsIcon, MoreOptionsIcon } from 'components/icon/icon';

 import { DataColumns } from 'components/data-table/data-table';
 import { ResourceLinkHeadUuid, ResourceLinkHeadPermissionLevel, ResourceLinkHead, ResourceLinkDelete, ResourceLinkTailIsVisible } from 'views-components/data-explorer/renderers';
 import { createTree } from 'models/tree';
 import { getResource, ResourcesState } from 'store/resources/resources';
 import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { DataColumns } from 'components/data-table/data-table';
 import { ResourceLinkHeadUuid, ResourceLinkHeadPermissionLevel, ResourceLinkHead, ResourceLinkDelete, ResourceLinkTailIsVisible } from 'views-components/data-explorer/renderers';
 import { createTree } from 'models/tree';
 import { getResource, ResourcesState } from 'store/resources/resources';
 import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
 import CopyToClipboard from 'react-copy-to-clipboard';

+import { DefaultView } from 'components/default-view/default-view';

 
 

-type CssRules = 'root' | 'adminRoot' | 'gridItem' | 'label' | 'readOnlyValue' | 'title' | 'description' | 'actions' | 'content' | 'copyIcon';
+type CssRules = 'root' | 'emptyRoot' | 'gridItem' | 'label' | 'readOnlyValue' | 'title' | 'description' | 'actions' | 'content' | 'copyIcon';

 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
         width: '100%',
         overflow: 'auto'
     },
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
         width: '100%',
         overflow: 'auto'
     },

-    adminRoot: {
-        // ...theme.mixins.gutters()
+    emptyRoot: {
+        width: '100%',
+        overflow: 'auto',
+        padding: theme.spacing.unit * 4,

     },
     gridItem: {
         height: 45,
     },
     gridItem: {
         height: 45,


@@ -91,8 +94,9 @@ export interface UserProfilePanelRootDataProps {
     isSelf: boolean;
     isPristine: boolean;
     isValid: boolean;
     isSelf: boolean;
     isPristine: boolean;
     isValid: boolean;

+    isInaccessible: boolean;

     userUuid: string;
     userUuid: string;

-    resources: ResourcesState
+    resources: ResourcesState;

     localCluster: string;
 }
 
     localCluster: string;
 }
 


@@ -193,143 +197,154 @@ export const UserProfilePanelRoot = withStyles(styles)(
         }
 
         render() {
         }
 
         render() {

-            return <Paper className={this.props.classes.root}>
-                <Tabs value={this.state.value} onChange={this.handleChange} variant={"fullWidth"}>
-                    <Tab label={TABS.PROFILE} value={TABS.PROFILE} />
-                    <Tab label={TABS.GROUPS} value={TABS.GROUPS} />
-                </Tabs>
-                {this.state.value === TABS.PROFILE &&
-                    <CardContent>
-                        <Grid container justify="space-between">
-                            <Grid item xs={11}>
-                                <Typography className={this.props.classes.title}>
-                                    {this.props.userUuid}
-                                    <Tooltip title="Copy to clipboard">
-                                        <span className={this.props.classes.copyIcon}>
-                                            <CopyToClipboard text={this.props.userUuid || ""} onCopy={() => this.onCopy!("Copied")}>
-                                                <CopyIcon />
-                                            </CopyToClipboard>
-                                        </span>
-                                    </Tooltip>
-                                </Typography>
-                            </Grid>
-                            <Grid item xs={1} style={{ textAlign: "right" }}>
-                                <Tooltip title="Actions" disableFocusListener>
-                                    <IconButton
-                                        data-cy='collection-panel-options-btn'
-                                        aria-label="Actions"
-                                        onClick={(event) => this.handleContextMenu(event, this.props.userUuid)}>
-                                        <MoreOptionsIcon />
-                                    </IconButton>
-                                </Tooltip>
-                            </Grid>
-                        </Grid>
-                        <form onSubmit={this.props.handleSubmit} data-cy="profile-form">
-                            <Grid container spacing={24}>
-                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="firstName">
-                                    <Field
-                                        label="First name"
-                                        name="firstName"
-                                        component={ReadOnlyField as any}
-                                        disabled
-                                    />
-                                </Grid>
-                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="lastName">
-                                    <Field
-                                        label="Last name"
-                                        name="lastName"
-                                        component={ReadOnlyField as any}
-                                        disabled
-                                    />
-                                </Grid>
-                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="email">
-                                    <Field
-                                        label="E-mail"
-                                        name="email"
-                                        component={ReadOnlyField as any}
-                                        disabled
-                                    />
+            if (this.props.isInaccessible) {
+                return (
+                    <Paper className={this.props.classes.emptyRoot}>
+                        <CardContent>
+                            <DefaultView icon={DetailsIcon} messages={['This user does not exist or your account does not have permission to view it']} />
+                        </CardContent>
+                    </Paper>
+                );
+            } else {
+                return <Paper className={this.props.classes.root}>
+                    <Tabs value={this.state.value} onChange={this.handleChange} variant={"fullWidth"}>
+                        <Tab label={TABS.PROFILE} value={TABS.PROFILE} />
+                        <Tab label={TABS.GROUPS} value={TABS.GROUPS} />
+                    </Tabs>
+                    {this.state.value === TABS.PROFILE &&
+                        <CardContent>
+                            <Grid container justify="space-between">
+                                <Grid item xs={11}>
+                                    <Typography className={this.props.classes.title}>
+                                        {this.props.userUuid}
+                                        <Tooltip title="Copy to clipboard">
+                                            <span className={this.props.classes.copyIcon}>
+                                                <CopyToClipboard text={this.props.userUuid || ""} onCopy={() => this.onCopy!("Copied")}>
+                                                    <CopyIcon />
+                                                </CopyToClipboard>
+                                            </span>
+                                        </Tooltip>
+                                    </Typography>

                                 </Grid>
                                 </Grid>

-                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="username">
-                                    <Field
-                                        label="Username"
-                                        name="username"
-                                        component={ReadOnlyField as any}
-                                        disabled
-                                    />
-                                </Grid>
-                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
-                                    <Field
-                                        label="Organization"
-                                        name="prefs.profile.organization"
-                                        component={TextField as any}
-                                        disabled={!this.props.isAdmin && !this.props.isSelf}
-                                    />
-                                </Grid>
-                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
-                                    <Field
-                                        label="E-mail at Organization"
-                                        name="prefs.profile.organization_email"
-                                        component={TextField as any}
-                                        disabled={!this.props.isAdmin && !this.props.isSelf}
-                                        validate={PROFILE_EMAIL_VALIDATION}
-                                    />
-                                </Grid>
-                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
-                                    <InputLabel className={this.props.classes.label} htmlFor="prefs.profile.role">Role</InputLabel>
-                                    <Field
-                                        id="prefs.profile.role"
-                                        name="prefs.profile.role"
-                                        component={NativeSelectField as any}
-                                        items={RoleTypes}
-                                        disabled={!this.props.isAdmin && !this.props.isSelf}
-                                    />
-                                </Grid>
-                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
-                                    <Field
-                                        label="Website"
-                                        name="prefs.profile.website_url"
-                                        component={TextField as any}
-                                        disabled={!this.props.isAdmin && !this.props.isSelf}
-                                    />
+                                <Grid item xs={1} style={{ textAlign: "right" }}>
+                                    <Tooltip title="Actions" disableFocusListener>
+                                        <IconButton
+                                            data-cy='collection-panel-options-btn'
+                                            aria-label="Actions"
+                                            onClick={(event) => this.handleContextMenu(event, this.props.userUuid)}>
+                                            <MoreOptionsIcon />
+                                        </IconButton>
+                                    </Tooltip>

                                 </Grid>
                                 </Grid>

-                                <Grid item sm={12}>
-                                    <Grid container direction="row" justify="flex-end">
-                                        <Button color="primary" onClick={this.props.reset} disabled={this.props.isPristine}>Discard changes</Button>
-                                        <Button
-                                            color="primary"
-                                            variant="contained"
-                                            type="submit"
-                                            disabled={this.props.isPristine || this.props.invalid || this.props.submitting}>
-                                            Save changes
-                                        </Button>
+                            </Grid>
+                            <form onSubmit={this.props.handleSubmit} data-cy="profile-form">
+                                <Grid container spacing={24}>
+                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="firstName">
+                                        <Field
+                                            label="First name"
+                                            name="firstName"
+                                            component={ReadOnlyField as any}
+                                            disabled
+                                        />
+                                    </Grid>
+                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="lastName">
+                                        <Field
+                                            label="Last name"
+                                            name="lastName"
+                                            component={ReadOnlyField as any}
+                                            disabled
+                                        />
+                                    </Grid>
+                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="email">
+                                        <Field
+                                            label="E-mail"
+                                            name="email"
+                                            component={ReadOnlyField as any}
+                                            disabled
+                                        />
+                                    </Grid>
+                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="username">
+                                        <Field
+                                            label="Username"
+                                            name="username"
+                                            component={ReadOnlyField as any}
+                                            disabled
+                                        />
+                                    </Grid>
+                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
+                                        <Field
+                                            label="Organization"
+                                            name="prefs.profile.organization"
+                                            component={TextField as any}
+                                            disabled={!this.props.isAdmin && !this.props.isSelf}
+                                        />
+                                    </Grid>
+                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
+                                        <Field
+                                            label="E-mail at Organization"
+                                            name="prefs.profile.organization_email"
+                                            component={TextField as any}
+                                            disabled={!this.props.isAdmin && !this.props.isSelf}
+                                            validate={PROFILE_EMAIL_VALIDATION}
+                                        />
+                                    </Grid>
+                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
+                                        <InputLabel className={this.props.classes.label} htmlFor="prefs.profile.role">Role</InputLabel>
+                                        <Field
+                                            id="prefs.profile.role"
+                                            name="prefs.profile.role"
+                                            component={NativeSelectField as any}
+                                            items={RoleTypes}
+                                            disabled={!this.props.isAdmin && !this.props.isSelf}
+                                        />
+                                    </Grid>
+                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
+                                        <Field
+                                            label="Website"
+                                            name="prefs.profile.website_url"
+                                            component={TextField as any}
+                                            disabled={!this.props.isAdmin && !this.props.isSelf}
+
+                                        />
+                                    </Grid>
+                                    <Grid item sm={12}>
+                                        <Grid container direction="row" justify="flex-end">
+                                            <Button color="primary" onClick={this.props.reset} disabled={this.props.isPristine}>Discard changes</Button>
+                                            <Button
+                                                color="primary"
+                                                variant="contained"
+                                                type="submit"
+                                                disabled={this.props.isPristine || this.props.invalid || this.props.submitting}>
+                                                Save changes
+                                            </Button>
+                                        </Grid>

                                     </Grid>
                                 </Grid>
                                     </Grid>
                                 </Grid>

-                            </Grid>
-                        </form >
-                    </CardContent>
-                }
-                {this.state.value === TABS.GROUPS &&
-                    <div className={this.props.classes.content}>
-                        <DataExplorer
-                                id={USER_PROFILE_PANEL_ID}
-                                data-cy="user-profile-groups-data-explorer"
-                                onRowClick={noop}
-                                onRowDoubleClick={noop}
-                                onContextMenu={noop}
-                                contextMenuColumn={false}
-                                hideColumnSelector
-                                hideSearchInput
-                                paperProps={{
-                                    elevation: 0,
-                                }}
-                                dataTableDefaultView={
-                                    <DataTableDefaultView
-                                        icon={GroupsIcon}
-                                        messages={['Group list is empty.']} />
-                                } />
-                    </div>}
-            </Paper >;
+                            </form >
+                        </CardContent>
+                    }
+                    {this.state.value === TABS.GROUPS &&
+                        <div className={this.props.classes.content}>
+                            <DataExplorer
+                                    id={USER_PROFILE_PANEL_ID}
+                                    data-cy="user-profile-groups-data-explorer"
+                                    onRowClick={noop}
+                                    onRowDoubleClick={noop}
+                                    onContextMenu={noop}
+                                    contextMenuColumn={false}
+                                    hideColumnSelector
+                                    hideSearchInput
+                                    paperProps={{
+                                        elevation: 0,
+                                    }}
+                                    dataTableDefaultView={
+                                        <DataTableDefaultView
+                                            icon={GroupsIcon}
+                                            messages={['Group list is empty.']} />
+                                    } />
+                        </div>}
+                </Paper >;
+            }

         }
 
         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
         }
 
         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {

diff --git a/src/views/user-profile-panel/user-profile-panel.tsx b/src/views/user-profile-panel/user-profile-panel.tsx
index 207a98fee171df5e779086ae9b1ca5c7eaf53189..a90d44a9a7a7d207e5ca3d4ea6b425acca21d356 100644 (file)
--- a/src/views/user-profile-panel/user-profile-panel.tsx
+++ b/src/views/user-profile-panel/user-profile-panel.tsx
@@ -7,7 +7,7 @@ import { compose, Dispatch } from 'redux';
 import { reduxForm, isPristine, isValid } from 'redux-form';
 import { connect } from 'react-redux';
 import { UserResource } from 'models/user';
 import { reduxForm, isPristine, isValid } from 'redux-form';
 import { connect } from 'react-redux';
 import { UserResource } from 'models/user';

-import { saveEditedUser } from 'store/user-profile/user-profile-actions';
+import { getUserProfileIsInaccessible, saveEditedUser } from 'store/user-profile/user-profile-actions';

 import { UserProfilePanelRoot, UserProfilePanelRootDataProps } from 'views/user-profile-panel/user-profile-panel-root';
 import { USER_PROFILE_FORM } from "store/user-profile/user-profile-actions";
 import { matchUserProfileRoute } from 'routes/routes';
 import { UserProfilePanelRoot, UserProfilePanelRootDataProps } from 'views/user-profile-panel/user-profile-panel-root';
 import { USER_PROFILE_FORM } from "store/user-profile/user-profile-actions";
 import { matchUserProfileRoute } from 'routes/routes';


@@ -23,6 +23,7 @@ const mapStateToProps = (state: RootState): UserProfilePanelRootDataProps => {
     isSelf: state.auth.user!.uuid === uuid,
     isPristine: isPristine(USER_PROFILE_FORM)(state),
     isValid: isValid(USER_PROFILE_FORM)(state),
     isSelf: state.auth.user!.uuid === uuid,
     isPristine: isPristine(USER_PROFILE_FORM)(state),
     isValid: isValid(USER_PROFILE_FORM)(state),

+    isInaccessible: getUserProfileIsInaccessible(state.properties) || false,

     localCluster: state.auth.localCluster,
     userUuid: uuid,
     resources: state.resources,
     localCluster: state.auth.localCluster,
     userUuid: uuid,
     resources: state.resources,