Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

chore: add licensed user data to the licensed users box (#8868)

Browse Source 
This change adds actual data from the server to the licensed users box
in the users header.

It also extracts the open sidebar button into its own component so
that we don't re-fetch the data when we open the sidebar. That's the
same issue we've had with project status and project creation screens,
etc.
This commit is contained in:
Thomas Heartman 2024-11-27 14:27:07 +01:00 committed by GitHub
parent 679e9d12ef
commit eaca09b35a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx
View File

@ -2,6 +2,8 @@ import { Box, styled } from '@mui/material';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
import { useState } from 'react';
import { LicensedUsersSidebar } from './LicensedUsersSidebar';
import { useLicensedUsers } from 'hooks/useLicensedUsers';
import useLoading from 'hooks/useLoading';
const StyledButton = styled('button')(({ theme }) => ({
background: 'none',
@ -40,12 +42,35 @@ const MainMetric = styled('span')(({ theme }) => ({
fontWeight: 'bold',
}));
export const LicensedUsersBox = () => {
const OpenSidebarButton = () => {
const [licensedUsersChartOpen, setLicensedUsersChartOpen] = useState(false);
return (
<Figure>
<>
<StyledButton
onClick={() => {
setLicensedUsersChartOpen(true);
}}
>
View graph over time
</StyledButton>
<LicensedUsersSidebar
open={licensedUsersChartOpen}
close={() => setLicensedUsersChartOpen(false)}
/>
</>
);
};
export const LicensedUsersBox = () => {
const { data, loading } = useLicensedUsers();
const ref = useLoading(loading, '[data-loading-licensed-users=true]');
return (
<Figure ref={ref}>
<TopRow>
<MainMetric>11/25</MainMetric>
<MainMetric data-loading-licensed-users>
{data.licensedUsers.current}/{data.seatCount}
</MainMetric>
<HelpIcon
htmlTooltip
tooltip={
@ -60,18 +85,8 @@ export const LicensedUsersBox = () => {
<StyledCaption>
<span>Seats used in the last 30 days</span>
<StyledButton
onClick={() => {
setLicensedUsersChartOpen(true);
}}
>
View graph over time
</StyledButton>
<OpenSidebarButton />
</StyledCaption>
<LicensedUsersSidebar
open={licensedUsersChartOpen}
close={() => setLicensedUsersChartOpen(false)}
/>
</Figure>
);
};