From 2ab43f230662c3f5d7d7ff75c08bdab0c66b22b0 Mon Sep 17 00:00:00 2001
From: Stephen Smith <stephen@curii.com>
Date: Wed, 30 Mar 2022 22:29:18 -0400
Subject: [PATCH] 18559: Add account status indicator to user profile

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>
---
 .../data-explorer/renderers.tsx               |  6 ++---
 .../user-profile-panel-root.tsx               | 27 +++++++++++--------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/views-components/data-explorer/renderers.tsx b/src/views-components/data-explorer/renderers.tsx
index d1fed3a9..8b29b24d 100644
--- a/src/views-components/data-explorer/renderers.tsx
+++ b/src/views-components/data-explorer/renderers.tsx
@@ -225,11 +225,11 @@ const renderAccountStatus = (props: {status: UserAccountStatus}) =>
             {(() => {
                 switch(props.status) {
                     case UserAccountStatus.ACTIVE:
-                        return <ActiveIcon style={{color: '#4caf50'}} />;
+                        return <ActiveIcon style={{color: '#4caf50', verticalAlign: "middle"}} />;
                     case UserAccountStatus.SETUP:
-                        return <SetupIcon style={{color: '#2196f3'}} />;
+                        return <SetupIcon style={{color: '#2196f3', verticalAlign: "middle"}} />;
                     case UserAccountStatus.INACTIVE:
-                        return <InactiveIcon style={{color: '#9e9e9e'}} />;
+                        return <InactiveIcon style={{color: '#9e9e9e', verticalAlign: "middle"}} />;
                     default:
                         return <></>;
                 }
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 acb1c161..445f15e8 100644
--- a/src/views/user-profile-panel/user-profile-panel-root.tsx
+++ b/src/views/user-profile-panel/user-profile-panel-root.tsx
@@ -30,7 +30,7 @@ import { USER_PROFILE_PANEL_ID } from 'store/user-profile/user-profile-actions';
 import { noop } from 'lodash';
 import { 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 { ResourceLinkHeadUuid, ResourceLinkHeadPermissionLevel, ResourceLinkHead, ResourceLinkDelete, ResourceLinkTailIsVisible, UserResourceAccountStatus } from 'views-components/data-explorer/renderers';
 import { createTree } from 'models/tree';
 import { getResource, ResourcesState } from 'store/resources/resources';
 import { DefaultView } from 'components/default-view/default-view';
@@ -205,21 +205,26 @@ export const UserProfilePanelRoot = withStyles(styles)(
                     {this.state.value === TABS.PROFILE &&
                         <CardContent>
                             <Grid container justify="space-between">
-                                <Grid item xs={11}>
+                                <Grid item>
                                     <Typography className={this.props.classes.title}>
                                         {this.props.userUuid}
                                         <CopyToClipboardSnackbar value={this.props.userUuid} />
                                     </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 item>
+                                    <Grid container alignItems="center">
+                                        <Grid item style={{marginRight: '10px'}}><UserResourceAccountStatus uuid={this.props.userUuid} /></Grid>
+                                        <Grid item>
+                                            <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>
                             </Grid>
                             <form onSubmit={this.props.handleSubmit} data-cy="profile-form">
-- 
2.30.2