From eaca09b35a155d9bb3fe9c9ab444f1a9c7320320 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 27 Nov 2024 14:27:07 +0100
Subject: [PATCH] chore: add licensed user data to the licensed users box
 (#8868)

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.
---
 .../users/UsersHeader/LicensedUsersBox.tsx    | 43 +++++++++++++------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx
index a8c1c8f8df..96fca8478c 100644
--- a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx
+++ b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx
@@ -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>
     );
 };