feat: show users with multiple parallel sessions (#8756)

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<UserSessionsCellProps> = ({ count }) => {
+    const { uiConfig } = useUiConfig();
+    const minimumCountToShow = useVariant<number>(
+        uiConfig.flags.showUserDeviceCount,
+    );
+
+    if (!count || count < (minimumCountToShow ? minimumCountToShow : 5)) {
+        return null;
+    }
+
+    return (
+        <IconCell
+            icon={
+                <>
+                    <Tooltip
+                        title={`Multiple parallel browser sessions (${count})`}
+                    >
+                        <WarningIcon
+                            aria-label='Multiple parallel browser sessions'
+                            color='warning'
+                        />
+                    </Tooltip>
+                </>
+            }
+        />
+    );
+};

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) => (
                     <HighlightCell
                         value={user.name}
@@ -148,6 +151,21 @@ const UsersList = () => {
                 ),
                 searchable: true,
             },
+            ...(showUserDeviceCount
+                ? [
+                      {
+                          id: 'warning',
+                          Header: ' ',
+                          accessor: (row: any) => row.name || '',
+                          maxWidth: 40,
+                          Cell: ({ row: { original: user } }: any) => (
+                              <UserSessionsCell count={user.activeSessions} />
+                          ),
+                          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={
                             <TablePlaceholder>
-                                No users available. Get started by adding one.
+                                <span data-loading>
+                                    No users available. Get started by adding
+                                    one.
+                                </span>
                             </TablePlaceholder>
                         }
                     />

frontend/src/interfaces/uiConfig.ts

@@ -93,6 +93,7 @@ export type UiFlags = {
     'enterprise-payg'?: boolean;
     simplifyProjectOverview?: boolean;
     productivityReportEmail?: boolean;
+    showUserDeviceCount?: Variant;
     flagOverviewRedesign?: boolean;
 };
 

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(
+    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 = {