From 15e99392047b9bcc99d36e84305e31ea62196138 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 27 Nov 2024 13:15:54 +0100
Subject: [PATCH 1/2] chore: add licensed user data to the licensed users box

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    | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx
index a8c1c8f8dfa8..b9cdb31291a0 100644
--- a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx
+++ b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx
@@ -2,6 +2,7 @@ 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';
 
 const StyledButton = styled('button')(({ theme }) => ({
     background: 'none',
@@ -40,12 +41,34 @@ const MainMetric = styled('span')(({ theme }) => ({
     fontWeight: 'bold',
 }));
 
-export const LicensedUsersBox = () => {
+const OpenSidebarButton = () => {
     const [licensedUsersChartOpen, setLicensedUsersChartOpen] = useState(false);
+
+    return (
+        <>
+            <StyledButton
+                onClick={() => {
+                    setLicensedUsersChartOpen(true);
+                }}
+            >
+                View graph over time
+            </StyledButton>
+            <LicensedUsersSidebar
+                open={licensedUsersChartOpen}
+                close={() => setLicensedUsersChartOpen(false)}
+            />
+        </>
+    );
+};
+
+export const LicensedUsersBox = () => {
+    const { data } = useLicensedUsers();
     return (
         <Figure>
             <TopRow>
-                <MainMetric>11/25</MainMetric>
+                <MainMetric>
+                    {data.licensedUsers.current}/{data.seatCount}
+                </MainMetric>
                 <HelpIcon
                     htmlTooltip
                     tooltip={
@@ -60,18 +83,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>
     );
 };

From 82f22e5e2a80106f6a2c2e61cfe2f78d186d60e2 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 27 Nov 2024 14:08:31 +0100
Subject: [PATCH 2/2] chore:

---
 .../admin/users/UsersHeader/LicensedUsersBox.tsx          | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx
index b9cdb31291a0..96fca8478ca7 100644
--- a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx
+++ b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx
@@ -3,6 +3,7 @@ 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',
@@ -62,11 +63,12 @@ const OpenSidebarButton = () => {
 };
 
 export const LicensedUsersBox = () => {
-    const { data } = useLicensedUsers();
+    const { data, loading } = useLicensedUsers();
+    const ref = useLoading(loading, '[data-loading-licensed-users=true]');
     return (
-        <Figure>
+        <Figure ref={ref}>
             <TopRow>
-                <MainMetric>
+                <MainMetric data-loading-licensed-users>
                     {data.licensedUsers.current}/{data.seatCount}
                 </MainMetric>
                 <HelpIcon