From c18952f374add622c7d10f0aa2b7a60210c84f54 Mon Sep 17 00:00:00 2001 From: Jaanus Sellin Date: Thu, 21 Nov 2024 11:46:40 +0200 Subject: [PATCH] feat: licensed users ui rework (#8809) 1. Moved link creation bottom next to licensed users view 2. Created licensed users component 3. Added flag OSS: ![image](https://github.com/user-attachments/assets/cfb2b971-3861-4093-91a5-f3118b906029) All others ![image](https://github.com/user-attachments/assets/e8cf712f-7e66-44f6-9965-1bb785e4f3fc) --- .../users/InviteLinkBar/InviteLinkBar.tsx | 22 +------- .../InviteLinkBar/InviteLinkBarContent.tsx | 5 +- .../src/component/admin/users/UsersAdmin.tsx | 2 - .../users/UsersHeader/LicensedUsersBox.tsx | 56 +++++++++++++++++++ .../admin/users/UsersHeader/UsersHeader.tsx | 47 ++++++++++++++++ .../admin/users/UsersList/UsersList.tsx | 3 + frontend/src/interfaces/uiConfig.ts | 1 + src/lib/types/experimental.ts | 7 ++- src/server-dev.ts | 1 + 9 files changed, 117 insertions(+), 27 deletions(-) create mode 100644 frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx create mode 100644 frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx diff --git a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx index 6133251b4b..e03d2697f1 100644 --- a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx +++ b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx @@ -1,5 +1,4 @@ import type { VFC } from 'react'; -import { Box } from '@mui/material'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { InviteLinkBarContent } from './InviteLinkBarContent'; @@ -15,24 +14,5 @@ export const InviteLinkBar: VFC = () => { }); }; - return ( - ({ - backgroundColor: theme.palette.background.paper, - py: 2, - px: 4, - mb: 2, - borderRadius: `${theme.shape.borderRadiusLarge}px`, - display: 'flex', - flexDirection: { - xs: 'column', - md: 'row', - }, - border: '2px solid', - borderColor: theme.palette.background.alternative, - })} - > - - - ); + return ; }; diff --git a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx index 3766d7d629..1e72927cb2 100644 --- a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx +++ b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx @@ -104,9 +104,8 @@ export const InviteLinkBarContent = ({ } elseShow={ - You can easily create an invite link here that you - can share and use to invite people from your company - to your Unleash setup. + Create a link to invite people from your company to + your Unleash setup. } /> diff --git a/frontend/src/component/admin/users/UsersAdmin.tsx b/frontend/src/component/admin/users/UsersAdmin.tsx index f259426b7e..12213b50fe 100644 --- a/frontend/src/component/admin/users/UsersAdmin.tsx +++ b/frontend/src/component/admin/users/UsersAdmin.tsx @@ -1,7 +1,6 @@ import UsersList from './UsersList/UsersList'; import { ADMIN } from 'component/providers/AccessProvider/permissions'; import { PermissionGuard } from 'component/common/PermissionGuard/PermissionGuard'; -import { InviteLinkBar } from './InviteLinkBar/InviteLinkBar'; import { Route, Routes } from 'react-router-dom'; import EditUser from './EditUser/EditUser'; import NotFound from 'component/common/NotFound/NotFound'; @@ -21,7 +20,6 @@ export const UsersAdmin = () => { index element={ <> - } diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx new file mode 100644 index 0000000000..9d8f953101 --- /dev/null +++ b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx @@ -0,0 +1,56 @@ +import { Box, Button, styled, Typography } from '@mui/material'; +import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; + +const StyledContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + width: '100%', + justifyContent: 'space-between', + alignItems: 'center', +})); + +const StyledColumn = styled(Box)({ + display: 'flex', + flexDirection: 'column', +}); + +const RightColumn = styled(StyledColumn)({ + alignItems: 'flex-end', +}); + +const StyledButton = styled(Button)(({ theme }) => ({ + fontSize: theme.spacing(1.75), + textDecoration: 'underline', + '&:hover': { + backgroundColor: theme.palette.background.paper, + }, + fontWeight: theme.typography.h4.fontWeight, +})); + +export const LicensedUsersBox = () => { + return ( + + + + 11/25 + + Seats used last 30 days + + + + A licensed seat is a unique user that had access to + your instance within the last 30 days, and thereby + occupied a seat. + + } + /> + {}}> + View graph over time + + + + ); +}; diff --git a/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx b/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx new file mode 100644 index 0000000000..35179e81fa --- /dev/null +++ b/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx @@ -0,0 +1,47 @@ +import { Box, styled } from '@mui/material'; +import { InviteLinkBar } from '../InviteLinkBar/InviteLinkBar'; +import { useUiFlag } from 'hooks/useUiFlag'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; +import { LicensedUsersBox } from './LicensedUsersBox'; + +interface StyledContainerProps { + licensedUsersEnabled: boolean; +} + +const StyledContainer = styled(Box)( + ({ theme, licensedUsersEnabled }) => ({ + display: 'grid', + gridTemplateColumns: licensedUsersEnabled ? '60% 40%' : '100%', + gap: theme.spacing(2), + paddingBottom: theme.spacing(3), + }), +); + +const StyledElement = styled(Box)(({ theme }) => ({ + backgroundColor: theme.palette.background.paper, + padding: theme.spacing(2, 3, 2, 2), + borderRadius: `${theme.shape.borderRadiusLarge}px`, + display: 'flex', + border: '2px solid', + borderColor: theme.palette.background.alternative, +})); + +export const UsersHeader = () => { + const licensedUsers = useUiFlag('licensedUsers'); + const { isOss } = useUiConfig(); + const licensedUsersEnabled = licensedUsers && isOss(); + + return ( + + + + + + {licensedUsersEnabled && ( + + + + )} + + ); +}; diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx index ec9bb4d040..40b57a15c4 100644 --- a/frontend/src/component/admin/users/UsersList/UsersList.tsx +++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx @@ -40,6 +40,7 @@ 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'; +import { UsersHeader } from '../UsersHeader/UsersHeader'; import { UpgradeSSO } from './UpgradeSSO'; const UsersList = () => { @@ -355,6 +356,7 @@ const UsersList = () => { } /> + { prepareRow={prepareRow} /> + ; @@ -289,6 +290,10 @@ const flags: IFlags = { process.env.UNLEASH_EXPERIMENTAL_FLAG_OVERVIEW_REDESIGN, false, ), + licensedUsers: parseEnvVarBoolean( + process.env.UNLEASH_EXPERIMENTAL_FLAG_LICENSED_USERS, + false, + ), }; export const defaultExperimentalOptions: IExperimentalOptions = { diff --git a/src/server-dev.ts b/src/server-dev.ts index 5eb786bbb2..df20b74723 100644 --- a/src/server-dev.ts +++ b/src/server-dev.ts @@ -57,6 +57,7 @@ process.nextTick(async () => { simplifyProjectOverview: true, showUserDeviceCount: true, flagOverviewRedesign: false, + licensedUsers: true, }, }, authentication: {