feat: licensed users chart

frontend/src/component/admin/users/UsersHeader/LicensedUsersChart.tsx

@@ -0,0 +1,74 @@
+import type { FC } from 'react';
+import 'chartjs-adapter-date-fns';
+import type { LicensedUsersSchema } from 'openapi';
+import { LineChart } from 'component/insights/components/LineChart/LineChart';
+import { useTheme } from '@mui/material';
+
+interface ILicensedUsersChartProps {
+    licensedUsers: LicensedUsersSchema['licensedUsers']['history'];
+}
+
+export const LicensedUsersChart: FC<ILicensedUsersChartProps> = ({
+    licensedUsers,
+}) => {
+    const theme = useTheme();
+
+    const data = {
+        datasets: [
+            {
+                label: 'Licensed users',
+                data: licensedUsers,
+                borderColor: theme.palette.primary.main,
+                backgroundColor: theme.palette.primary.main,
+                fill: false,
+            },
+        ],
+    };
+    return (
+        <LineChart
+            data={data}
+            overrideOptions={{
+                parsing: {
+                    yAxisKey: 'count',
+                    xAxisKey: 'date',
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        type: 'linear',
+                        grid: {
+                            color: theme.palette.divider,
+                            borderColor: theme.palette.divider,
+                        },
+                        ticks: {
+                            color: theme.palette.text.secondary,
+                            display: true,
+                            precision: 0,
+                        },
+                    },
+                    x: {
+                        type: 'time',
+                        time: {
+                            unit: 'month',
+                            tooltipFormat: 'MMM yyyy',
+                            displayFormats: {
+                                month: 'MMM',
+                            },
+                        },
+                        grid: {
+                            color: 'transparent',
+                            borderColor: 'transparent',
+                        },
+                        ticks: {
+                            color: theme.palette.text.secondary,
+                            display: true,
+                            source: 'data',
+                            maxRotation: 90,
+                            minRotation: 23.5,
+                        },
+                    },
+                },
+            }}
+        />
+    );
+};

frontend/src/component/admin/users/UsersHeader/LicensedUsersSidebar.tsx

@@ -1,6 +1,8 @@
 import { Alert, Button, styled, Typography } from '@mui/material';
 import { DynamicSidebarModal } from 'component/common/SidebarModal/SidebarModal';
 import type React from 'react';
+import { LicensedUsersChart } from './LicensedUsersChart';
+import { useLicensedUsers } from '../../../../hooks/useLicensedUsers';
 const ModalContentContainer = styled('section')(({ theme }) => ({
     minHeight: '100vh',
     maxWidth: 700,
@@ -74,6 +76,7 @@ export const LicensedUsersSidebar = ({
     open,
     close,
 }: LicensedUsersSidebarProps) => {
+    const { data } = useLicensedUsers();
     return (
         <DynamicSidebarModal
             open={open}
@@ -94,7 +97,10 @@ export const LicensedUsersSidebar = ({
                         <RowHeader>Last 30 days</RowHeader>
                         <InfoRow>
                             <LicenceBox>
-                                <Typography fontWeight='bold'>11/25</Typography>
+                                <Typography fontWeight='bold'>
+                                    {data.licensedUsers.current}/
+                                    {data.seatCount}
+                                </Typography>
                                 <Typography variant='body2'>
                                     Used seats last 30 days
                                 </Typography>
@@ -108,7 +114,9 @@ export const LicensedUsersSidebar = ({
                     </Row>
                     <Row>
                         <RowHeader>Last year</RowHeader>
-                        <div>this will be great grid</div>
+                        <LicensedUsersChart
+                            licensedUsers={data.licensedUsers.history}
+                        />
                     </Row>
                 </WidgetContainer>
                 <CloseRow>

frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx

@@ -29,7 +29,7 @@ const StyledElement = styled(Box)(({ theme }) => ({
 export const UsersHeader = () => {
     const licensedUsers = useUiFlag('licensedUsers');
     const { isOss } = useUiConfig();
-    const licensedUsersEnabled = licensedUsers && !isOss();
+    const licensedUsersEnabled = true;
 
     return (
         <StyledContainer licensedUsersEnabled={licensedUsersEnabled}>

frontend/src/hooks/useLicensedUsers.ts

@@ -0,0 +1,22 @@
+import type { LicensedUsersSchema } from '../openapi';
+import { useApiGetter, fetcher } from './api/getters/useApiGetter/useApiGetter';
+import { formatApiPath } from '../utils/formatPath';
+
+const path = `api/admin/licensed-users`;
+
+const placeholderData: LicensedUsersSchema = {
+    seatCount: 0,
+    licensedUsers: {
+        current: 0,
+        history: [],
+    },
+};
+
+export const useLicensedUsers = () => {
+    const { data, refetch, loading, error } = useApiGetter<LicensedUsersSchema>(
+        formatApiPath(path),
+        () => fetcher(formatApiPath(path), 'Licensed users'),
+    );
+
+    return { data: data || placeholderData, refetch, loading, error };
+};