Merge pull request #1596 from devtron-labs/feat/inactive-user-ent

feat: add support for user status in permission list view

Author: eshankvaish

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.0.58",
+        "@devtron-labs/devtron-fe-common-lib": "0.0.58-beta-6",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
         "@rjsf/validator-ajv8": "^5.13.3",

src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx

@@ -13,6 +13,7 @@ import {
     TippyCustomized,
     TippyTheme,
     CustomInput,
+    OptionType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { FormType, GenerateTokenType } from './authorization.type'
 import { createGeneratedAPIToken } from './service'
@@ -28,7 +29,6 @@ import {
     ChartGroupPermissionsFilter,
     DirectPermissionsRoleFilter,
     EntityTypes,
-    OptionType,
 } from '../shared/components/userGroups/userGroups.types'
 import GroupPermission from './GroupPermission'
 import { mainContext } from '../../../../components/common/navigation/NavigationRoutes'

src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx

@@ -10,6 +10,7 @@ import {
     copyToClipboard,
     CustomInput,
     noop,
+    OptionType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useHistory, useRouteMatch, useParams } from 'react-router-dom'
 import moment from 'moment'
@@ -31,7 +32,6 @@ import {
     ChartGroupPermissionsFilter,
     DirectPermissionsRoleFilter,
     EntityTypes,
-    OptionType,
 } from '../shared/components/userGroups/userGroups.types'
 import { mainContext } from '../../../../components/common/navigation/NavigationRoutes'
 import DeleteAPITokenModal from './DeleteAPITokenModal'

src/Pages/GlobalConfigurations/Authorization/APITokens/authorization.utils.ts

@@ -1,10 +1,10 @@
+import { OptionType } from '@devtron-labs/devtron-fe-common-lib'
 import { ACCESS_TYPE_MAP, SERVER_MODE } from '../../../../config'
 import {
     ActionTypes,
     ChartGroupPermissionsFilter,
     DirectPermissionsRoleFilter,
     EntityTypes,
-    OptionType,
     ViewChartGroupPermission,
 } from '../shared/components/userGroups/userGroups.types'
 import { UserCreateOrUpdatePayload } from '../types'

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

@@ -1,25 +1,28 @@
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback, useMemo, useRef } from 'react'
 import {
+    SortingOrder,
+    SortableTableHeaderCell,
     ErrorScreenNotAuthorized,
     ERROR_EMPTY_SCREEN,
     noop,
     Pagination,
     Reload,
     TOAST_ACCESS_DENIED,
     useAsync,
+    DEFAULT_BASE_PAGE_SIZE,
+    useUrlFilters,
 } from '@devtron-labs/devtron-fe-common-lib'
-import { API_STATUS_CODES, DEFAULT_BASE_PAGE_SIZE, SortingOrder } from '../../../../../config'
+import { API_STATUS_CODES } from '../../../../../config'
 
 import { getPermissionGroupList } from '../../authorization.service'
 import { permissionGroupLoading, SortableKeys } from './constants'
 import PermissionGroupListHeader from './PermissionGroupListHeader'
 import PermissionGroupRow from './PermissionGroupRow'
 import { useAuthorizationContext } from '../../AuthorizationProvider'
 import { importComponentFromFELibrary } from '../../../../../components/common'
-import useUrlFilters from '../../shared/hooks/useUrlFilters'
-import SortableTableHeaderCell from '../../../../../components/common/SortableTableHeaderCell'
 import FiltersEmptyState from '../../shared/components/FilterEmptyState/FilterEmptyState.component'
 import NoPermissionGroups from './NoPermissionGroups'
+import { abortPreviousRequests, getIsRequestAborted } from '../../utils'
 
 const PermissionGroupInfoBar = importComponentFromFELibrary('PermissionGroupInfoBar', noop, 'function')
 
@@ -46,9 +49,19 @@ const PermissionGroupList = () => {
         }),
         [pageSize, offset, searchKey, sortBy, sortOrder],
     )
-    const [isLoading, result, error, reload] = useAsync(() => getPermissionGroupList(filterConfig), [filterConfig])
+    const abortControllerRef = useRef(new AbortController())
+    const [isLoading, result, error, reload] = useAsync(
+        () =>
+            abortPreviousRequests(
+                () => getPermissionGroupList(filterConfig, abortControllerRef.current.signal),
+                abortControllerRef,
+            ),
+        [filterConfig],
+    )
     const { isAutoAssignFlowEnabled } = useAuthorizationContext()
 
+    const showLoadingState = isLoading || getIsRequestAborted(error)
+
     const getPermissionGroupDataForExport = useCallback(
         () =>
             getPermissionGroupList({
@@ -62,7 +75,7 @@ const PermissionGroupList = () => {
         [filterConfig],
     )
 
-    if (!isLoading) {
+    if (!showLoadingState) {
         if (error) {
             if ([API_STATUS_CODES.PERMISSION_DENIED, API_STATUS_CODES.UNAUTHORIZED].includes(error.code)) {
                 return (
@@ -72,7 +85,7 @@ const PermissionGroupList = () => {
                     />
                 )
             }
-            return <Reload reload={reload} />
+            return <Reload reload={reload} className="flex-grow-1" />
         }
 
         // The null state is shown only when filters are not applied
@@ -81,78 +94,79 @@ const PermissionGroupList = () => {
         }
     }
 
+    // Disable the filter actions
+    const isActionsDisabled = showLoadingState || !(result.totalCount && result.permissionGroups.length)
+
     const sortByName = () => {
         handleSorting(SortableKeys.name)
     }
 
-    const handleClearFilters = () => {
-        clearFilters()
-    }
-
     return (
         <div className="flexbox-col dc__gap-8 flex-grow-1">
             <PermissionGroupListHeader
-                disabled={isLoading || !(result.totalCount && result.permissionGroups.length)}
+                disabled={isActionsDisabled}
                 handleSearch={handleSearch}
                 initialSearchText={searchKey}
                 getDataToExport={getPermissionGroupDataForExport}
             />
-            {isAutoAssignFlowEnabled && <PermissionGroupInfoBar />}
-            <div className="flexbox-col flex-grow-1">
-                <div className="user-permission__header cn-7 fs-12 fw-6 lh-20 dc__uppercase pl-20 pr-20 dc__border-bottom">
-                    <span />
-                    <SortableTableHeaderCell
-                        title="Name"
-                        sortOrder={sortOrder}
-                        isSorted={sortBy === SortableKeys.name}
-                        triggerSorting={sortByName}
-                        disabled={isLoading}
-                    />
-                    <span>Description</span>
-                    <span />
+            {isAutoAssignFlowEnabled && (
+                <div className="pl-20 pr-20">
+                    <PermissionGroupInfoBar />
                 </div>
-                {isLoading || (result.totalCount && result.permissionGroups.length) ? (
-                    <>
-                        {isLoading ? (
-                            permissionGroupLoading.map((permissionGroup) => (
-                                <div
-                                    className="user-permission__row pl-20 pr-20 show-shimmer-loading"
-                                    key={`permission-group-list-${permissionGroup.id}`}
-                                >
-                                    <span className="child child-shimmer-loading" />
-                                    <span className="child child-shimmer-loading" />
-                                    <span className="child child-shimmer-loading" />
-                                </div>
-                            ))
-                        ) : (
-                            <>
-                                <div className="fs-13 fw-4 lh-20 cn-9 flex-grow-1">
-                                    {result.permissionGroups.map((permissionGroup, index) => (
-                                        <PermissionGroupRow
-                                            {...permissionGroup}
-                                            index={index}
-                                            key={`permission-group-${permissionGroup.id}`}
-                                            refetchPermissionGroupList={reload}
-                                        />
-                                    ))}
-                                </div>
-                                {result.totalCount > DEFAULT_BASE_PAGE_SIZE && (
-                                    <Pagination
-                                        rootClassName="flex dc__content-space pl-20 pr-20 dc__border-top"
-                                        size={result.totalCount}
-                                        offset={offset}
-                                        pageSize={pageSize}
-                                        changePage={changePage}
-                                        changePageSize={changePageSize}
+            )}
+            {isLoading || (result.totalCount && result.permissionGroups.length) ? (
+                <div className="flexbox-col flex-grow-1">
+                    <div className="user-permission__header cn-7 fs-12 fw-6 lh-20 dc__uppercase pl-20 pr-20 dc__border-bottom">
+                        <span />
+                        <SortableTableHeaderCell
+                            title="Name"
+                            sortOrder={sortOrder}
+                            isSorted={sortBy === SortableKeys.name}
+                            triggerSorting={sortByName}
+                            disabled={isActionsDisabled}
+                        />
+                        <span>Description</span>
+                        <span />
+                    </div>
+                    {showLoadingState ? (
+                        permissionGroupLoading.map((permissionGroup) => (
+                            <div
+                                className="user-permission__row pl-20 pr-20 show-shimmer-loading"
+                                key={`permission-group-list-${permissionGroup.id}`}
+                            >
+                                <span className="child child-shimmer-loading" />
+                                <span className="child child-shimmer-loading" />
+                                <span className="child child-shimmer-loading" />
+                            </div>
+                        ))
+                    ) : (
+                        <>
+                            <div className="fs-13 fw-4 lh-20 cn-9 flex-grow-1">
+                                {result.permissionGroups.map((permissionGroup, index) => (
+                                    <PermissionGroupRow
+                                        {...permissionGroup}
+                                        index={index}
+                                        key={`permission-group-${permissionGroup.id}`}
+                                        refetchPermissionGroupList={reload}
                                     />
-                                )}
-                            </>
-                        )}
-                    </>
-                ) : (
-                    <FiltersEmptyState clearFilters={handleClearFilters} />
-                )}
-            </div>
+                                ))}
+                            </div>
+                            {result.totalCount > DEFAULT_BASE_PAGE_SIZE && (
+                                <Pagination
+                                    rootClassName="flex dc__content-space pl-20 pr-20 dc__border-top"
+                                    size={result.totalCount}
+                                    offset={offset}
+                                    pageSize={pageSize}
+                                    changePage={changePage}
+                                    changePageSize={changePageSize}
+                                />
+                            )}
+                        </>
+                    )}
+                </div>
+            ) : (
+                <FiltersEmptyState clearFilters={clearFilters} />
+            )}
         </div>
     )
 }

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

@@ -21,7 +21,7 @@ const PermissionGroupRow = ({ id, name, description, index, refetchPermissionGro
         setIsModalLoading(true)
         try {
             await deletePermissionGroup(id)
-            toast.success('User deleted')
+            toast.success('Group deleted')
             refetchPermissionGroupList()
             setIsDeleteModalOpen(false)
         } catch (err) {

src/Pages/GlobalConfigurations/Authorization/UserAndGroupPermissions.tsx

@@ -216,7 +216,7 @@ const UserAndGroupPermissions = () => {
     const [userGroups, projects, environments, chartGroups, envClustersList, customRolesList] = data
 
     return (
-        <div className="flexbox-col flex-grow-1 h-100 w-100">
+        <div className="flexbox-col flex-grow-1 h-100 w-100 dc__content-center">
             <AuthorizationProvider
                 // TODO (v3): Simplify and move these to API service instead
                 value={{

src/Pages/GlobalConfigurations/Authorization/UserPermissions/AddEdit/UserForm.tsx

@@ -11,6 +11,7 @@ import {
     RadioGroup,
     RadioGroupItem,
     ServerErrors,
+    OptionType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Creatable from 'react-select/creatable'
 import Select from 'react-select'
@@ -21,7 +22,6 @@ import {
     ChartGroupPermissionsFilter,
     EntityTypes,
     ActionTypes,
-    OptionType,
     ViewChartGroupPermission,
 } from '../../shared/components/userGroups/userGroups.types'
 import { mapByKey, validateEmail, deepEqual, importComponentFromFELibrary } from '../../../../../components/common'
@@ -63,9 +63,6 @@ const CreatableChipStyle = {
     }),
 }
 
-// TODO (v1): Replace with enterprise check
-const showStatus = false
-
 const UserForm = ({ isAddMode, userData = null }: { isAddMode: boolean; userData: User }) => {
     const { serverMode } = useMainContext()
 
@@ -390,9 +387,8 @@ const UserForm = ({ isAddMode, userData = null }: { isAddMode: boolean; userData
                     <span className="cn-5">/</span>
                     <span className="cn-9 fw-6 dc__ellipsis-right">{isAddMode ? 'Add User' : userData.emailId}</span>
                 </div>
-                {(showStatus || !isAddMode) && (
+                {!isAddMode && (
                     <div className="flex dc__content-start dc__gap-12">
-                        {showStatus && <div>status</div>}
                         {!isAddMode && (
                             <button
                                 disabled={submitting}

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

@@ -7,6 +7,11 @@ import ExportToCsv from '../../../../../components/common/ExportToCsv/ExportToCs
 import { FILE_NAMES, USER_EXPORT_HEADER_ROW } from '../../../../../components/common/ExportToCsv/constants'
 import { useAuthorizationContext } from '../../AuthorizationProvider'
 import { getRoleFiltersToExport } from '../../utils'
+import { LAST_LOGIN_TIME_NULL_STATE } from '../constants'
+import { importComponentFromFELibrary } from '../../../../../components/common'
+
+const getStatusExportText = importComponentFromFELibrary('getStatusExportText', null, 'function')
+const showStatus = !!getStatusExportText
 
 const ExportUserPermissionsToCsv = ({
     disabled,
@@ -34,10 +39,15 @@ const ExportUserPermissionsToCsv = ({
             const _userData = {
                 emailId: _user.emailId,
                 userId: _user.id,
-                // TODO (v1): Add support for status column
-                lastLoginTime: _user.lastLoginTime
-                    ? `${moment.utc(_user.lastLoginTime).format(Moment12HourExportFormat)} (UTC)`
-                    : 'Never',
+                ...(showStatus
+                    ? {
+                          status: getStatusExportText(_user.userStatus, _user.timeToLive),
+                      }
+                    : {}),
+                lastLoginTime:
+                    _user.lastLoginTime === LAST_LOGIN_TIME_NULL_STATE
+                        ? _user.lastLoginTime
+                        : `${moment.utc(_user.lastLoginTime).format(Moment12HourExportFormat)} (UTC)`,
                 superAdmin: _user.superAdmin,
                 groups: '-',
                 project: '-',