From a01c494550dd359d4e5f9a7c44247ee6609917bc Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 26 Nov 2024 10:34:33 +0100 Subject: [PATCH 01/10] 1-3158: fix border color --- frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx b/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx index 8a2164081514..56f0385a293f 100644 --- a/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx +++ b/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx @@ -23,7 +23,7 @@ const StyledElement = styled(Box)(({ theme }) => ({ borderRadius: `${theme.shape.borderRadiusLarge}px`, display: 'flex', border: '2px solid', - borderColor: theme.palette.background.alternative, + borderColor: theme.palette.divider, })); export const UsersHeader = () => { From 8dd4af9ca759aab51bc61b40011924b03e9c9b80 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 26 Nov 2024 10:34:48 +0100 Subject: [PATCH 02/10] 1-3158: remove unused variable assignment --- .../admin/users/InviteLinkBar/InviteLinkBarContent.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx index 1e72927cb223..d960fb0e5b48 100644 --- a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx +++ b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx @@ -7,7 +7,6 @@ import { LinkField } from '../LinkField/LinkField'; import { add, formatDistanceToNowStrict, isAfter, parseISO } from 'date-fns'; import { formatDateYMD } from 'utils/formatDate'; import { useLocationSettings } from 'hooks/useLocationSettings'; -import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; interface IInviteLinkBarContentProps { onActionClick?: (inviteLink?: string) => void; @@ -35,7 +34,6 @@ export const InviteLinkBarContent = ({ const navigate = useNavigate(); const { data, loading } = useInviteTokens(); const ref = useLoading(loading); - const { trackEvent } = usePlausibleTracker(); const inviteToken = data?.tokens?.find((token) => token.name === 'default') ?? null; const inviteLink = inviteToken?.url; From c3409302954cab89d6a8f1fc11feab0b1c7c99f5 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 26 Nov 2024 10:46:20 +0100 Subject: [PATCH 03/10] 1-3158: move invite link wrap into component --- .../users/InviteLinkBar/InviteLinkBar.tsx | 15 ++++++++++- .../InviteLinkBar/InviteLinkBarContent.tsx | 27 +++++-------------- .../admin/users/UsersHeader/UsersHeader.tsx | 3 +-- 3 files changed, 21 insertions(+), 24 deletions(-) diff --git a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx index e03d2697f108..0e489c65298d 100644 --- a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx +++ b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx @@ -1,6 +1,15 @@ import type { VFC } from 'react'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { InviteLinkBarContent } from './InviteLinkBarContent'; +import { styled } from '@mui/material'; + +const Bar = styled('article')(({ theme }) => ({ + display: 'flex', + flexFlow: 'row wrap', + gap: theme.spacing(2), + justifyContent: 'space-between', + alignItems: 'center', +})); export const InviteLinkBar: VFC = () => { const { trackEvent } = usePlausibleTracker(); @@ -14,5 +23,9 @@ export const InviteLinkBar: VFC = () => { }); }; - return ; + return ( + + + + ); }; diff --git a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx index d960fb0e5b48..dcb8a3cfe95e 100644 --- a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx +++ b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx @@ -22,12 +22,6 @@ export const StyledBox = styled(Box)(() => ({ flexDirection: 'column', })); -export const StyledButtonBox = styled(Box)(() => ({ - display: 'flex', - alignItems: 'center', - flexGrow: 1, -})); - export const InviteLinkBarContent = ({ onActionClick, }: IInviteLinkBarContentProps) => { @@ -108,22 +102,13 @@ export const InviteLinkBarContent = ({ } /> - - - + {inviteLink ? 'Update' : 'Create'} invite link + ); }; diff --git a/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx b/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx index 56f0385a293f..e9ff626a5f11 100644 --- a/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx +++ b/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx @@ -21,7 +21,6 @@ const StyledElement = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.background.paper, padding: theme.spacing(2, 3, 2, 2), borderRadius: `${theme.shape.borderRadiusLarge}px`, - display: 'flex', border: '2px solid', borderColor: theme.palette.divider, })); @@ -29,7 +28,7 @@ const StyledElement = styled(Box)(({ theme }) => ({ export const UsersHeader = () => { const licensedUsers = useUiFlag('licensedUsers'); const { isOss } = useUiConfig(); - const licensedUsersEnabled = licensedUsers && !isOss(); + const licensedUsersEnabled = true; //licensedUsers && !isOss(); return ( From 930a2c8f03497fe32b64dbda05fcd66dbcd6bdaf Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 26 Nov 2024 10:59:02 +0100 Subject: [PATCH 04/10] 1-3158: style button --- .../admin/users/UsersHeader/LicensedUsersBox.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx index 9790cb69c8bc..2ec804bcaf74 100644 --- a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx +++ b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx @@ -1,4 +1,4 @@ -import { Box, Button, styled, Typography } from '@mui/material'; +import { Box, styled, Typography } from '@mui/material'; import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; import { useState } from 'react'; import { LicensedUsersSidebar } from './LicensedUsersSidebar'; @@ -20,14 +20,14 @@ const RightColumn = styled(StyledColumn)({ alignItems: 'flex-end', }); -const StyledButton = styled(Button)(({ theme }) => ({ - fontSize: theme.spacing(1.75), +const StyledButton = styled('button')(({ theme }) => ({ + background: 'none', + border: 'none', + fontSize: theme.typography.body2.fontSize, textDecoration: 'underline', - textAlign: 'right', - '&:hover': { - backgroundColor: theme.palette.background.paper, - }, - fontWeight: theme.typography.h4.fontWeight, + color: theme.palette.primary.main, + cursor: 'pointer', + padding: 0, })); const InvisibleParagraph = styled('p')({ From 7969badc2d1888474f7913ad3d141f35c1e82751 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 26 Nov 2024 12:56:54 +0100 Subject: [PATCH 05/10] 1-3158: more layout tweaking --- .../users/UsersHeader/LicensedUsersBox.tsx | 2 +- .../admin/users/UsersHeader/UsersHeader.tsx | 23 ++++++++----------- 2 files changed, 10 insertions(+), 15 deletions(-) diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx index 2ec804bcaf74..c32f82ad8045 100644 --- a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx +++ b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx @@ -5,7 +5,7 @@ import { LicensedUsersSidebar } from './LicensedUsersSidebar'; const StyledContainer = styled(Box)(({ theme }) => ({ display: 'flex', - flexDirection: 'row', + flexFlow: 'row wrap', width: '100%', justifyContent: 'space-between', alignItems: 'center', diff --git a/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx b/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx index e9ff626a5f11..df55ad62bc63 100644 --- a/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx +++ b/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx @@ -4,18 +4,12 @@ import { useUiFlag } from 'hooks/useUiFlag'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { LicensedUsersBox } from './LicensedUsersBox'; -interface StyledContainerProps { - licensedUsersEnabled: boolean; -} - -const StyledContainer = styled(Box)( - ({ theme, licensedUsersEnabled }) => ({ - display: 'grid', - gridTemplateColumns: licensedUsersEnabled ? '60% 40%' : '100%', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }), -); +const StyledContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + flexFlow: 'row', + gap: theme.spacing(2), + paddingBottom: theme.spacing(3), +})); const StyledElement = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.background.paper, @@ -23,15 +17,16 @@ const StyledElement = styled(Box)(({ theme }) => ({ borderRadius: `${theme.shape.borderRadiusLarge}px`, border: '2px solid', borderColor: theme.palette.divider, + flex: 'auto', })); export const UsersHeader = () => { const licensedUsers = useUiFlag('licensedUsers'); const { isOss } = useUiConfig(); - const licensedUsersEnabled = true; //licensedUsers && !isOss(); + const licensedUsersEnabled = licensedUsers && !isOss(); return ( - + From 96d126b03ff423162b60034c4b49a8d8baf78ca9 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 26 Nov 2024 14:00:13 +0100 Subject: [PATCH 06/10] Revert later; storing state --- .../users/UsersHeader/LicensedUsersBox.tsx | 86 ++++++++++++------- 1 file changed, 53 insertions(+), 33 deletions(-) diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx index c32f82ad8045..f04b2fc2dc3c 100644 --- a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx +++ b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx @@ -1,4 +1,4 @@ -import { Box, styled, Typography } from '@mui/material'; +import { Box, styled } from '@mui/material'; import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; import { useState } from 'react'; import { LicensedUsersSidebar } from './LicensedUsersSidebar'; @@ -30,47 +30,67 @@ const StyledButton = styled('button')(({ theme }) => ({ padding: 0, })); -const InvisibleParagraph = styled('p')({ +const InvisibleParagraph = styled('dl')(({ theme }) => ({ display: 'contents', -}); + '& dt': { + gridArea: 'c', + display: 'flex', + flexFlow: 'row wrap', + gap: theme.spacing(2), + justifyContent: 'space-between', + }, + '& dd': { + gridArea: 'a', + display: 'flex', + flexFlow: 'row wrap', + gap: theme.spacing(2), + justifyContent: 'space-between', + }, +})); + +const Grid = styled('div')(({ theme }) => ({ + display: 'grid', + gridTemplateAreas: ` + 'a' + 'c' + `, + gap: theme.spacing(2), +})); export const LicensedUsersBox = () => { const [licensedUsersChartOpen, setLicensedUsersChartOpen] = useState(false); return ( - + - - 11/25 - - - Seats used last 30 days - +
+ Seats used last 30 days + { + setLicensedUsersChartOpen(true); + }} + > + View graph over time + +
+
+ 11/25 + + A licensed seat is a unique user that had + access to your instance within the last 30 + days, and thereby occupied a seat. + + } + /> +
- - - - A licensed seat is a unique user that had access to - your instance within the last 30 days, and thereby - occupied a seat. - - } - /> + - { - setLicensedUsersChartOpen(true); - }} - > - View graph over time - + setLicensedUsersChartOpen(false)} From 63b90b117c688fa6dd5d7746e1fb1761855c3795 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 26 Nov 2024 14:15:34 +0100 Subject: [PATCH 07/10] 1-3158: some cleanup --- .../users/UsersHeader/LicensedUsersBox.tsx | 121 +++++++----------- 1 file changed, 45 insertions(+), 76 deletions(-) diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx index f04b2fc2dc3c..eba093042707 100644 --- a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx +++ b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx @@ -3,99 +3,68 @@ import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; import { useState } from 'react'; import { LicensedUsersSidebar } from './LicensedUsersSidebar'; -const StyledContainer = styled(Box)(({ theme }) => ({ - display: 'flex', - flexFlow: 'row wrap', - width: '100%', - justifyContent: 'space-between', - alignItems: 'center', -})); - -const StyledColumn = styled(Box)({ - display: 'flex', - flexDirection: 'column', -}); - -const RightColumn = styled(StyledColumn)({ - alignItems: 'flex-end', -}); - const StyledButton = styled('button')(({ theme }) => ({ background: 'none', border: 'none', - fontSize: theme.typography.body2.fontSize, + fontSize: 'inherit', textDecoration: 'underline', color: theme.palette.primary.main, cursor: 'pointer', padding: 0, })); -const InvisibleParagraph = styled('dl')(({ theme }) => ({ - display: 'contents', - '& dt': { - gridArea: 'c', - display: 'flex', - flexFlow: 'row wrap', - gap: theme.spacing(2), - justifyContent: 'space-between', - }, - '& dd': { - gridArea: 'a', - display: 'flex', - flexFlow: 'row wrap', - gap: theme.spacing(2), - justifyContent: 'space-between', - }, +const TopRow = styled('div')(({ theme }) => ({ + display: 'flex', + justifyContent: 'space-between', + gap: theme.spacing(2), +})); + +const StyledCaption = styled('figcaption')(({ theme }) => ({ + display: 'flex', + flexFlow: 'row wrap', + gap: theme.spacing(2), + justifyContent: 'space-between', })); -const Grid = styled('div')(({ theme }) => ({ - display: 'grid', - gridTemplateAreas: ` - 'a' - 'c' - `, +const Grid = styled('figure')(({ theme }) => ({ + margin: 0, + display: 'flex', + flexFlow: 'column', gap: theme.spacing(2), })); export const LicensedUsersBox = () => { const [licensedUsersChartOpen, setLicensedUsersChartOpen] = useState(false); return ( - - - -
- Seats used last 30 days - { - setLicensedUsersChartOpen(true); - }} - > - View graph over time - -
-
- 11/25 - - A licensed seat is a unique user that had - access to your instance within the last 30 - days, and thereby occupied a seat. - - } - /> -
- - - - - setLicensedUsersChartOpen(false)} + + + 11/25 + + A licensed seat is a unique user that had access to + your instance within the last 30 days, and thereby + occupied a seat. + + } /> - - + + + + Seats used in the last 30 days + { + setLicensedUsersChartOpen(true); + }} + > + View graph over time + + + setLicensedUsersChartOpen(false)} + /> + ); }; From 33e900ca8bc8d5cab2e02fc76f556e54734eb14b Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 26 Nov 2024 14:22:53 +0100 Subject: [PATCH 08/10] 1-3158: use figure --- .../users/UsersHeader/LicensedUsersBox.tsx | 17 ++++++++++++----- .../admin/users/UsersHeader/UsersHeader.tsx | 3 +++ 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx index eba093042707..6f9f18efeadf 100644 --- a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx +++ b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx @@ -11,6 +11,7 @@ const StyledButton = styled('button')(({ theme }) => ({ color: theme.palette.primary.main, cursor: 'pointer', padding: 0, + textAlign: 'left', })); const TopRow = styled('div')(({ theme }) => ({ @@ -26,19 +27,25 @@ const StyledCaption = styled('figcaption')(({ theme }) => ({ justifyContent: 'space-between', })); -const Grid = styled('figure')(({ theme }) => ({ +const Figure = styled('figure')(({ theme }) => ({ margin: 0, display: 'flex', flexFlow: 'column', - gap: theme.spacing(2), + justifyContent: 'center', + // gap: theme.spacing(2), +})); + +const MainMetric = styled('span')(({ theme }) => ({ + fontSize: theme.typography.h2.fontSize, + fontWeight: 'bold', })); export const LicensedUsersBox = () => { const [licensedUsersChartOpen, setLicensedUsersChartOpen] = useState(false); return ( - +
- 11/25 + 11/25 { open={licensedUsersChartOpen} close={() => setLicensedUsersChartOpen(false)} /> - +
); }; diff --git a/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx b/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx index df55ad62bc63..43b6edb6233f 100644 --- a/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx +++ b/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx @@ -18,6 +18,9 @@ const StyledElement = styled(Box)(({ theme }) => ({ border: '2px solid', borderColor: theme.palette.divider, flex: 'auto', + display: 'flex', + flexFlow: 'column', + justifyContent: 'center', })); export const UsersHeader = () => { From ee89aa2efbcb5e74547eb6320e3d010cd11d7bd0 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 26 Nov 2024 14:29:39 +0100 Subject: [PATCH 09/10] 1-3158: adjust font sizes --- .../component/admin/users/UsersHeader/LicensedUsersBox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx index 6f9f18efeadf..9abd5d36312b 100644 --- a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx +++ b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx @@ -21,6 +21,7 @@ const TopRow = styled('div')(({ theme }) => ({ })); const StyledCaption = styled('figcaption')(({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, display: 'flex', flexFlow: 'row wrap', gap: theme.spacing(2), @@ -32,11 +33,10 @@ const Figure = styled('figure')(({ theme }) => ({ display: 'flex', flexFlow: 'column', justifyContent: 'center', - // gap: theme.spacing(2), })); const MainMetric = styled('span')(({ theme }) => ({ - fontSize: theme.typography.h2.fontSize, + fontSize: theme.typography.body1.fontSize, fontWeight: 'bold', })); From 55ce6a0050414dc901f16f859779cc844a5b0576 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 26 Nov 2024 14:47:51 +0100 Subject: [PATCH 10/10] 1-3158: reduce spacing a little bit --- .../src/component/admin/users/UsersHeader/LicensedUsersBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx index 9abd5d36312b..a8c1c8f8dfa8 100644 --- a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx +++ b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx @@ -24,7 +24,7 @@ const StyledCaption = styled('figcaption')(({ theme }) => ({ fontSize: theme.typography.body2.fontSize, display: 'flex', flexFlow: 'row wrap', - gap: theme.spacing(2), + gap: theme.spacing(1), justifyContent: 'space-between', }));