diff --git a/frontend/src/component/admin/users/UsersList/UserSessionsCell/UserSessionsCell.tsx b/frontend/src/component/admin/users/UsersList/UserSessionsCell/UserSessionsCell.tsx new file mode 100644 index 000000000000..d146276160f0 --- /dev/null +++ b/frontend/src/component/admin/users/UsersList/UserSessionsCell/UserSessionsCell.tsx @@ -0,0 +1,38 @@ +import type { FC } from 'react'; +import { IconCell } from 'component/common/Table/cells/IconCell/IconCell'; +import WarningIcon from '@mui/icons-material/WarningAmber'; +import { Tooltip } from '@mui/material'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; +import { useVariant } from 'hooks/useVariant'; + +type UserSessionsCellProps = { + count?: number; +}; + +export const UserSessionsCell: FC = ({ count }) => { + const { uiConfig } = useUiConfig(); + const minimumCountToShow = useVariant( + uiConfig.flags.showUserDeviceCount, + ); + + if (!count || count < (minimumCountToShow ? minimumCountToShow : 5)) { + return null; + } + + return ( + + + + + + } + /> + ); +}; diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx index c03aa2a32237..bdda4a0a7be4 100644 --- a/frontend/src/component/admin/users/UsersList/UsersList.tsx +++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx @@ -39,6 +39,7 @@ import { StyledUsersLinkDiv } from '../Users.styles'; import { useUiFlag } from 'hooks/useUiFlag'; import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig'; import { useScimSettings } from 'hooks/api/getters/useScimSettings/useScimSettings'; +import { UserSessionsCell } from './UserSessionsCell/UserSessionsCell'; const UsersList = () => { const navigate = useNavigate(); @@ -57,6 +58,8 @@ const UsersList = () => { open: false, }); const userAccessUIEnabled = useUiFlag('userAccessUIEnabled'); + const showUserDeviceCount = useUiFlag('showUserDeviceCount'); + const { settings: { enabled: scimEnabled }, } = useScimSettings(); @@ -139,7 +142,7 @@ const UsersList = () => { id: 'name', Header: 'Name', accessor: (row: any) => row.name || '', - minWidth: 200, + minWidth: 180, Cell: ({ row: { original: user } }: any) => ( { ), searchable: true, }, + ...(showUserDeviceCount + ? [ + { + id: 'warning', + Header: ' ', + accessor: (row: any) => row.name || '', + maxWidth: 40, + Cell: ({ row: { original: user } }: any) => ( + + ), + searchable: false, + disableSortBy: true, + }, + ] + : []), { id: 'role', Header: 'Role', @@ -283,7 +301,7 @@ const UsersList = () => { }, { condition: isSmallScreen, - columns: ['createdAt', 'last-login'], + columns: ['createdAt', 'last-login', 'warning'], }, ], setHiddenColumns, @@ -356,7 +374,10 @@ const UsersList = () => { } elseShow={ - No users available. Get started by adding one. + + No users available. Get started by adding + one. + } /> diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts index ba54e46280be..f6c86fe14cab 100644 --- a/frontend/src/interfaces/uiConfig.ts +++ b/frontend/src/interfaces/uiConfig.ts @@ -93,6 +93,7 @@ export type UiFlags = { 'enterprise-payg'?: boolean; simplifyProjectOverview?: boolean; productivityReportEmail?: boolean; + showUserDeviceCount?: Variant; flagOverviewRedesign?: boolean; }; diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts index 98f739a3470e..1bc29eb363cd 100644 --- a/src/lib/types/experimental.ts +++ b/src/lib/types/experimental.ts @@ -1,5 +1,5 @@ import { PayloadType, type Variant } from 'unleash-client'; -import { parseEnvVarBoolean } from '../util'; +import { parseEnvVarBoolean, parseEnvVarNumber } from '../util'; import { getDefaultVariant } from 'unleash-client/lib/variant'; export type IFlagKey = @@ -289,10 +289,20 @@ const flags: IFlags = { process.env.UNLEASH_EXPERIMENTAL_FLAG_OVERVIEW_REDESIGN, false, ), - showUserDeviceCount: parseEnvVarBoolean( - process.env.UNLEASH_EXPERIMENTAL_SHOW_USER_DEVICE_COUNT, - false, - ), + showUserDeviceCount: { + name: 'showUserDeviceCount', + enabled: parseEnvVarBoolean( + process.env.UNLEASH_EXPERIMENTAL_SHOW_USER_DEVICE_COUNT, + false, + ), + payload: { + type: PayloadType.NUMBER, + value: `${parseEnvVarNumber( + process.env.UNLEASH_EXPERIMENTAL_WARN_ABOVE_SESSION_COUNT, + 0, + )}`, + }, + }, }; export const defaultExperimentalOptions: IExperimentalOptions = {