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.

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>
     );
 };