Skip to content

Commit a2b063c

Browse files
eshankvaisheshankvaish
committed
feat: add support for user status in permission list view
1 parent b11ddf8 commit a2b063c

File tree

13 files changed

+206
-149
lines changed

13 files changed

+206
-149
lines changed

‎src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupList.component.tsx

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -97,62 +97,64 @@ const PermissionGroupList = () => {
9797
initialSearchText={searchKey}
9898
getDataToExport={getPermissionGroupDataForExport}
9999
/>
100-
{isAutoAssignFlowEnabled && <PermissionGroupInfoBar />}
101-
<div className="flexbox-col flex-grow-1">
102-
<div className="user-permission__header cn-7 fs-12 fw-6 lh-20 dc__uppercase pl-20 pr-20 dc__border-bottom">
103-
<span />
104-
<SortableTableHeaderCell
105-
title="Name"
106-
sortOrder={sortOrder}
107-
isSorted={sortBy === SortableKeys.name}
108-
triggerSorting={sortByName}
109-
disabled={isLoading}
110-
/>
111-
<span>Description</span>
112-
<span />
100+
{isAutoAssignFlowEnabled && (
101+
<div className="pl-20 pr-20">
102+
<PermissionGroupInfoBar />
113103
</div>
114-
{isLoading || (result.totalCount && result.permissionGroups.length) ? (
115-
<>
116-
{isLoading ? (
117-
permissionGroupLoading.map((permissionGroup) => (
118-
<div
119-
className="user-permission__row pl-20 pr-20 show-shimmer-loading"
120-
key={`permission-group-list-${permissionGroup.id}`}
121-
>
122-
<span className="child child-shimmer-loading" />
123-
<span className="child child-shimmer-loading" />
124-
<span className="child child-shimmer-loading" />
125-
</div>
126-
))
127-
) : (
128-
<>
129-
<div className="fs-13 fw-4 lh-20 cn-9 flex-grow-1">
130-
{result.permissionGroups.map((permissionGroup, index) => (
131-
<PermissionGroupRow
132-
{...permissionGroup}
133-
index={index}
134-
key={`permission-group-${permissionGroup.id}`}
135-
refetchPermissionGroupList={reload}
136-
/>
137-
))}
138-
</div>
139-
{result.totalCount > DEFAULT_BASE_PAGE_SIZE && (
140-
<Pagination
141-
rootClassName="flex dc__content-space pl-20 pr-20 dc__border-top"
142-
size={result.totalCount}
143-
offset={offset}
144-
pageSize={pageSize}
145-
changePage={changePage}
146-
changePageSize={changePageSize}
104+
)}
105+
{isLoading || (result.totalCount && result.permissionGroups.length) ? (
106+
<div className="flexbox-col flex-grow-1">
107+
<div className="user-permission__header cn-7 fs-12 fw-6 lh-20 dc__uppercase pl-20 pr-20 dc__border-bottom">
108+
<span />
109+
<SortableTableHeaderCell
110+
title="Name"
111+
sortOrder={sortOrder}
112+
isSorted={sortBy === SortableKeys.name}
113+
triggerSorting={sortByName}
114+
disabled={isLoading}
115+
/>
116+
<span>Description</span>
117+
<span />
118+
</div>
119+
{isLoading ? (
120+
permissionGroupLoading.map((permissionGroup) => (
121+
<div
122+
className="user-permission__row pl-20 pr-20 show-shimmer-loading"
123+
key={`permission-group-list-${permissionGroup.id}`}
124+
>
125+
<span className="child child-shimmer-loading" />
126+
<span className="child child-shimmer-loading" />
127+
<span className="child child-shimmer-loading" />
128+
</div>
129+
))
130+
) : (
131+
<>
132+
<div className="fs-13 fw-4 lh-20 cn-9 flex-grow-1">
133+
{result.permissionGroups.map((permissionGroup, index) => (
134+
<PermissionGroupRow
135+
{...permissionGroup}
136+
index={index}
137+
key={`permission-group-${permissionGroup.id}`}
138+
refetchPermissionGroupList={reload}
147139
/>
148-
)}
149-
</>
150-
)}
151-
</>
152-
) : (
153-
<FiltersEmptyState clearFilters={handleClearFilters} />
154-
)}
155-
</div>
140+
))}
141+
</div>
142+
{result.totalCount > DEFAULT_BASE_PAGE_SIZE && (
143+
<Pagination
144+
rootClassName="flex dc__content-space pl-20 pr-20 dc__border-top"
145+
size={result.totalCount}
146+
offset={offset}
147+
pageSize={pageSize}
148+
changePage={changePage}
149+
changePageSize={changePageSize}
150+
/>
151+
)}
152+
</>
153+
)}
154+
</div>
155+
) : (
156+
<FiltersEmptyState clearFilters={handleClearFilters} />
157+
)}
156158
</div>
157159
)
158160
}

‎src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupRow.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const PermissionGroupRow = ({ id, name, description, index, refetchPermissionGro
2121
setIsModalLoading(true)
2222
try {
2323
await deletePermissionGroup(id)
24-
toast.success('User deleted')
24+
toast.success('Group deleted')
2525
refetchPermissionGroupList()
2626
setIsDeleteModalOpen(false)
2727
} catch (err) {

‎src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/ExportUserPermissionsToCsv.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import ExportToCsv from '../../../../../components/common/ExportToCsv/ExportToCs
77
import { FILE_NAMES, USER_EXPORT_HEADER_ROW } from '../../../../../components/common/ExportToCsv/constants'
88
import { useAuthorizationContext } from '../../AuthorizationProvider'
99
import { getRoleFiltersToExport } from '../../utils'
10+
import { LAST_LOGIN_TIME_NULL_STATE } from '../constants'
1011

1112
const ExportUserPermissionsToCsv = ({
1213
disabled,
@@ -35,9 +36,10 @@ const ExportUserPermissionsToCsv = ({
3536
emailId: _user.emailId,
3637
userId: _user.id,
3738
// TODO (v1): Add support for status column
38-
lastLoginTime: _user.lastLoginTime
39-
? `${moment.utc(_user.lastLoginTime).format(Moment12HourExportFormat)} (UTC)`
40-
: 'Never',
39+
lastLoginTime:
40+
_user.lastLoginTime === LAST_LOGIN_TIME_NULL_STATE
41+
? _user.lastLoginTime
42+
: `${moment.utc(_user.lastLoginTime).format(Moment12HourExportFormat)} (UTC)`,
4143
superAdmin: _user.superAdmin,
4244
groups: '-',
4345
project: '-',

‎src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionList.component.tsx

Lines changed: 69 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import React, { useCallback, useMemo } from 'react'
22
import {
33
ErrorScreenNotAuthorized,
44
ERROR_EMPTY_SCREEN,
5+
noop,
56
Pagination,
67
Reload,
78
TOAST_ACCESS_DENIED,
89
useAsync,
910
} from '@devtron-labs/devtron-fe-common-lib'
1011
import { API_STATUS_CODES, DEFAULT_BASE_PAGE_SIZE, SortingOrder } from '../../../../../config'
11-
import { ReactComponent as HelpOutlineIcon } from '../../../../../assets/icons/ic-help-outline.svg'
1212

1313
import { getUserList } from '../../authorization.service'
1414
import { SortableKeys, userListLoading } from './constants'
@@ -18,9 +18,11 @@ import useUrlFilters from '../../shared/hooks/useUrlFilters'
1818
import SortableTableHeaderCell from '../../../../../components/common/SortableTableHeaderCell'
1919
import FiltersEmptyState from '../../shared/components/FilterEmptyState/FilterEmptyState.component'
2020
import NoUsers from './NoUsers'
21+
import { importComponentFromFELibrary } from '../../../../../components/common'
2122

22-
// TODO (v1): Replace with enterprise check
23-
const showStatus = false
23+
const StatusHeaderCell = importComponentFromFELibrary('StatusHeaderCell', noop, 'function')
24+
25+
const showStatus = !!StatusHeaderCell
2426

2527
const UserPermissionList = () => {
2628
const {
@@ -102,75 +104,72 @@ const UserPermissionList = () => {
102104
initialSearchText={searchKey}
103105
getDataToExport={getUserDataForExport}
104106
/>
105-
<div className="flexbox-col flex-grow-1">
106-
<div className="user-permission__header cn-7 fs-12 fw-6 lh-20 dc__uppercase pl-20 pr-20 dc__border-bottom">
107-
<span />
108-
<SortableTableHeaderCell
109-
title="Email"
110-
triggerSorting={sortByEmail}
111-
isSorted={sortBy === SortableKeys.email}
112-
sortOrder={sortOrder}
113-
disabled={isLoading}
114-
/>
115-
<SortableTableHeaderCell
116-
title="Last Login"
117-
triggerSorting={sortByLastLogin}
118-
isSorted={sortBy === SortableKeys.lastLogin}
119-
sortOrder={sortOrder}
120-
disabled={isLoading}
121-
/>
122-
{showStatus && (
123-
<span className="flex dc__gap-4">
124-
Status
125-
<HelpOutlineIcon className="mw-16 icon-dim-16 fcn-6" />
126-
</span>
107+
{isLoading || (result.totalCount && result.users.length) ? (
108+
<div className="flexbox-col flex-grow-1">
109+
<div
110+
className={`user-permission__header ${
111+
showStatus ? 'user-permission__header--with-status' : ''
112+
} cn-7 fs-12 fw-6 lh-20 dc__uppercase pl-20 pr-20 dc__border-bottom`}
113+
>
114+
<span />
115+
<SortableTableHeaderCell
116+
title="Email"
117+
triggerSorting={sortByEmail}
118+
isSorted={sortBy === SortableKeys.email}
119+
sortOrder={sortOrder}
120+
disabled={isLoading}
121+
/>
122+
<SortableTableHeaderCell
123+
title="Last Login"
124+
triggerSorting={sortByLastLogin}
125+
isSorted={sortBy === SortableKeys.lastLogin}
126+
sortOrder={sortOrder}
127+
disabled={isLoading}
128+
/>
129+
{showStatus && <StatusHeaderCell />}
130+
<span />
131+
</div>
132+
{isLoading ? (
133+
userListLoading.map((user) => (
134+
<div
135+
className="user-permission__row pl-20 pr-20 show-shimmer-loading"
136+
key={`user-list-${user.id}`}
137+
>
138+
<span className="child child-shimmer-loading" />
139+
<span className="child child-shimmer-loading" />
140+
<span className="child child-shimmer-loading" />
141+
{showStatus && <span className="child child-shimmer-loading" />}
142+
</div>
143+
))
144+
) : (
145+
<>
146+
<div className="fs-13 fw-4 lh-20 cn-9 flex-grow-1" id="user-permissions-list">
147+
{result.users.map((user, index) => (
148+
<UserPermissionRow
149+
{...user}
150+
index={index}
151+
key={`user-${user.id}`}
152+
showStatus={showStatus}
153+
refetchUserPermissionList={reload}
154+
/>
155+
))}
156+
</div>
157+
{result.totalCount > DEFAULT_BASE_PAGE_SIZE && (
158+
<Pagination
159+
rootClassName="flex dc__content-space pl-20 pr-20 dc__border-top"
160+
size={result.totalCount}
161+
offset={offset}
162+
pageSize={pageSize}
163+
changePage={changePage}
164+
changePageSize={changePageSize}
165+
/>
166+
)}
167+
</>
127168
)}
128-
<span />
129169
</div>
130-
{isLoading || (result.totalCount && result.users.length) ? (
131-
<>
132-
{isLoading ? (
133-
userListLoading.map((user) => (
134-
<div
135-
className="user-permission__row pl-20 pr-20 show-shimmer-loading"
136-
key={`user-list-${user.id}`}
137-
>
138-
<span className="child child-shimmer-loading" />
139-
<span className="child child-shimmer-loading" />
140-
<span className="child child-shimmer-loading" />
141-
{showStatus && <span className="child child-shimmer-loading" />}
142-
</div>
143-
))
144-
) : (
145-
<>
146-
<div className="fs-13 fw-4 lh-20 cn-9 flex-grow-1">
147-
{result.users.map((user, index) => (
148-
<UserPermissionRow
149-
{...user}
150-
index={index}
151-
key={`user-${user.id}`}
152-
showStatus={showStatus}
153-
refetchUserPermissionList={reload}
154-
/>
155-
))}
156-
</div>
157-
{result.totalCount > DEFAULT_BASE_PAGE_SIZE && (
158-
<Pagination
159-
rootClassName="flex dc__content-space pl-20 pr-20 dc__border-top"
160-
size={result.totalCount}
161-
offset={offset}
162-
pageSize={pageSize}
163-
changePage={changePage}
164-
changePageSize={changePageSize}
165-
/>
166-
)}
167-
</>
168-
)}
169-
</>
170-
) : (
171-
<FiltersEmptyState clearFilters={handleClearFilters} />
172-
)}
173-
</div>
170+
) : (
171+
<FiltersEmptyState clearFilters={handleClearFilters} />
172+
)}
174173
</div>
175174
)
176175
}

‎src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionListHeader.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import ExportUserPermissionsToCsv from './ExportUserPermissionsToCsv'
1313

1414
const UserPermissionListHeader = ({
1515
disabled,
16-
showStatus,
16+
// showStatus,
1717
handleSearch,
1818
initialSearchText,
1919
getDataToExport,
@@ -64,7 +64,8 @@ const UserPermissionListHeader = ({
6464
debounceTimeout={3000}
6565
initialSearchText={initialSearchText}
6666
/>
67-
{showStatus && <div>Status</div>}
67+
{/* TODO (v3): Add the multi-select filtering */}
68+
{/* {showStatus && <div>Status</div>} */}
6869
<div className="dc__divider h-20" />
6970
<Link to={`${path}/add`} type="button" className="cta anchor flex dc__gap-6 h-32">
7071
<PlusIcon className="icon-dim-14 mw-14" />

0 commit comments

Comments
 (0)