From 3a295d7344e0497520880411b8bf7811ad41b69e Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Fri, 11 Oct 2024 11:20:23 +0200 Subject: [PATCH 01/11] refactor: move useDashboardState into own file --- .../personalDashboard/PersonalDashboard.tsx | 95 +------------------ .../personalDashboard/useDashboardState.ts | 95 +++++++++++++++++++ 2 files changed, 96 insertions(+), 94 deletions(-) create mode 100644 frontend/src/component/personalDashboard/useDashboardState.ts diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx index be9a8d954a76..06c4ed2c83d1 100644 --- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx +++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx @@ -18,10 +18,6 @@ import { WelcomeDialog } from './WelcomeDialog'; import { useLocalStorageState } from 'hooks/useLocalStorageState'; import { usePersonalDashboard } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboard'; import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons'; -import type { - PersonalDashboardSchemaFlagsItem, - PersonalDashboardSchemaProjectsItem, -} from '../../openapi'; import { usePersonalDashboardProjectDetails } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboardProjectDetails'; import useLoading from '../../hooks/useLoading'; import { MyProjects } from './MyProjects'; @@ -38,6 +34,7 @@ import ExpandMore from '@mui/icons-material/ExpandMore'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import useSplashApi from 'hooks/api/actions/useSplashApi/useSplashApi'; import { useAuthSplash } from 'hooks/api/getters/useAuth/useAuthSplash'; +import { useDashboardState } from './useDashboardState'; export const StyledCardTitle = styled('div')<{ lines?: number }>( ({ theme, lines = 2 }) => ({ @@ -109,96 +106,6 @@ const FlagListItem: FC<{ ); }; -// todo: move into own file -const useDashboardState = ( - projects: PersonalDashboardSchemaProjectsItem[], - flags: PersonalDashboardSchemaFlagsItem[], -) => { - type State = { - activeProject: string | undefined; - activeFlag: PersonalDashboardSchemaFlagsItem | undefined; - expandProjects: boolean; - expandFlags: boolean; - }; - - const defaultState: State = { - activeProject: undefined, - activeFlag: undefined, - expandProjects: true, - expandFlags: true, - }; - - const [state, setState] = useLocalStorageState( - 'personal-dashboard:v1', - defaultState, - ); - - const updateState = (newState: Partial) => - setState({ ...defaultState, ...state, ...newState }); - - useEffect(() => { - const updates: Partial = {}; - const setDefaultFlag = - flags.length && - (!state.activeFlag || - !flags.some((flag) => flag.name === state.activeFlag?.name)); - - if (setDefaultFlag) { - updates.activeFlag = flags[0]; - } - - const setDefaultProject = - projects.length && - (!state.activeProject || - !projects.some( - (project) => project.id === state.activeProject, - )); - - if (setDefaultProject) { - updates.activeProject = projects[0].id; - } - - if (Object.keys(updates).length) { - updateState(updates); - } - }, [ - JSON.stringify(projects, null, 2), - JSON.stringify(flags, null, 2), - JSON.stringify(state, null, 2), - ]); - - const { activeFlag, activeProject } = state; - - const setActiveFlag = (flag: PersonalDashboardSchemaFlagsItem) => { - updateState({ - activeFlag: flag, - }); - }; - - const setActiveProject = (projectId: string) => { - updateState({ - activeProject: projectId, - }); - }; - - const toggleSectionState = (section: 'flags' | 'projects') => { - const property = section === 'flags' ? 'expandFlags' : 'expandProjects'; - updateState({ - [property]: !(state[property] ?? true), - }); - }; - - return { - activeFlag, - setActiveFlag, - activeProject, - setActiveProject, - expandFlags: state.expandFlags ?? true, - expandProjects: state.expandProjects ?? true, - toggleSectionState, - }; -}; - const WelcomeSection = styled('div')(({ theme }) => ({ display: 'flex', justifyContent: 'space-between', diff --git a/frontend/src/component/personalDashboard/useDashboardState.ts b/frontend/src/component/personalDashboard/useDashboardState.ts new file mode 100644 index 000000000000..e1275c089c42 --- /dev/null +++ b/frontend/src/component/personalDashboard/useDashboardState.ts @@ -0,0 +1,95 @@ +import { useLocalStorageState } from 'hooks/useLocalStorageState'; +import type { + PersonalDashboardSchemaFlagsItem, + PersonalDashboardSchemaProjectsItem, +} from 'openapi'; +import { useEffect } from 'react'; + +export const useDashboardState = ( + projects: PersonalDashboardSchemaProjectsItem[], + flags: PersonalDashboardSchemaFlagsItem[], +) => { + type State = { + activeProject: string | undefined; + activeFlag: PersonalDashboardSchemaFlagsItem | undefined; + expandProjects: boolean; + expandFlags: boolean; + }; + + const defaultState: State = { + activeProject: undefined, + activeFlag: undefined, + expandProjects: true, + expandFlags: true, + }; + + const [state, setState] = useLocalStorageState( + 'personal-dashboard:v1', + defaultState, + ); + + const updateState = (newState: Partial) => + setState({ ...defaultState, ...state, ...newState }); + + useEffect(() => { + const updates: Partial = {}; + const setDefaultFlag = + flags.length && + (!state.activeFlag || + !flags.some((flag) => flag.name === state.activeFlag?.name)); + + if (setDefaultFlag) { + updates.activeFlag = flags[0]; + } + + const setDefaultProject = + projects.length && + (!state.activeProject || + !projects.some( + (project) => project.id === state.activeProject, + )); + + if (setDefaultProject) { + updates.activeProject = projects[0].id; + } + + if (Object.keys(updates).length) { + updateState(updates); + } + }, [ + JSON.stringify(projects, null, 2), + JSON.stringify(flags, null, 2), + JSON.stringify(state, null, 2), + ]); + + const { activeFlag, activeProject } = state; + + const setActiveFlag = (flag: PersonalDashboardSchemaFlagsItem) => { + updateState({ + activeFlag: flag, + }); + }; + + const setActiveProject = (projectId: string) => { + updateState({ + activeProject: projectId, + }); + }; + + const toggleSectionState = (section: 'flags' | 'projects') => { + const property = section === 'flags' ? 'expandFlags' : 'expandProjects'; + updateState({ + [property]: !(state[property] ?? true), + }); + }; + + return { + activeFlag, + setActiveFlag, + activeProject, + setActiveProject, + expandFlags: state.expandFlags ?? true, + expandProjects: state.expandProjects ?? true, + toggleSectionState, + }; +}; From 7a7eb789ab5d8cb3b2911a0cddc3e1db47335322 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Fri, 11 Oct 2024 11:20:36 +0200 Subject: [PATCH 02/11] refactor: remove unused prop --- frontend/src/component/personalDashboard/Grid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/personalDashboard/Grid.tsx b/frontend/src/component/personalDashboard/Grid.tsx index 11f25ecf3d6f..29301e41eaa9 100644 --- a/frontend/src/component/personalDashboard/Grid.tsx +++ b/frontend/src/component/personalDashboard/Grid.tsx @@ -58,7 +58,7 @@ export const FlagGrid = styled(ContentGrid)( ); export const GridItem = styled('div', { - shouldForwardProp: (prop) => !['gridArea', 'sx'].includes(prop.toString()), + shouldForwardProp: (prop) => !['gridArea'].includes(prop.toString()), })<{ gridArea: string }>(({ theme, gridArea }) => ({ padding: theme.spacing(2, 4), maxHeight: '100%', From 2ccec1a8b5cc95a2b0efa990024410fa249b5fce Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Fri, 11 Oct 2024 11:31:08 +0200 Subject: [PATCH 03/11] refactor: mock out state --- .../personalDashboard/PersonalDashboard.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx index 06c4ed2c83d1..df80fc10a022 100644 --- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx +++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx @@ -171,6 +171,28 @@ const NoActiveFlagsInfo = styled('div')(({ theme }) => ({ gap: theme.spacing(2), })); +type DashboardState = + | { + state: 'flags and projects'; + // regular state; show everything + activeFlag: any; + activeProject: any; + } + | { + state: 'projects, no flags'; + // show projects as normal, tell the user to create a flag + activeProject: any; + } + | { + state: 'no projects, no flags'; + // no projects and no flags; show information about admins, project owners, and tell the user to join a project to create a flags + } + | { + state: 'flags, no projects'; + // show info about admins + project owners, regular flags + activeFlag: any; + }; + export const PersonalDashboard = () => { const { user } = useAuthUser(); const { trackEvent } = usePlausibleTracker(); From 5febe86b6c77b3e7e90b4c31e708c4afb5a9a184 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 14 Oct 2024 11:01:54 +0200 Subject: [PATCH 04/11] refactor: move myflags into own file --- .../src/component/personalDashboard/Grid.tsx | 17 ++ .../component/personalDashboard/MyFlags.tsx | 180 +++++++++++++++++ .../personalDashboard/MyProjects.tsx | 2 +- .../personalDashboard/PersonalDashboard.tsx | 185 +++--------------- 4 files changed, 220 insertions(+), 164 deletions(-) create mode 100644 frontend/src/component/personalDashboard/MyFlags.tsx diff --git a/frontend/src/component/personalDashboard/Grid.tsx b/frontend/src/component/personalDashboard/Grid.tsx index 29301e41eaa9..97e6a8d05834 100644 --- a/frontend/src/component/personalDashboard/Grid.tsx +++ b/frontend/src/component/personalDashboard/Grid.tsx @@ -113,3 +113,20 @@ export const StyledList = styled(List)(({ theme }) => ({ maxHeight: '100%', })({ theme }), })); + +export const StyledCardTitle = styled('div')<{ lines?: number }>( + ({ theme, lines = 2 }) => ({ + fontWeight: theme.typography.fontWeightRegular, + fontSize: theme.typography.body1.fontSize, + lineClamp: `${lines}`, + WebkitLineClamp: lines, + lineHeight: '1.2', + display: '-webkit-box', + boxOrient: 'vertical', + textOverflow: 'ellipsis', + overflow: 'hidden', + alignItems: 'flex-start', + WebkitBoxOrient: 'vertical', + wordBreak: 'break-word', + }), +); diff --git a/frontend/src/component/personalDashboard/MyFlags.tsx b/frontend/src/component/personalDashboard/MyFlags.tsx new file mode 100644 index 000000000000..fb75cda0da2c --- /dev/null +++ b/frontend/src/component/personalDashboard/MyFlags.tsx @@ -0,0 +1,180 @@ +import { type FC, useEffect, useRef } from 'react'; +import { + ContentGridContainer, + FlagGrid, + ListItemBox, + SpacedGridItem, + StyledCardTitle, + StyledList, + listItemStyle, +} from './Grid'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; +import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons'; +import { + Alert, + IconButton, + Link, + ListItem, + ListItemButton, + Typography, + styled, +} from '@mui/material'; +import LinkIcon from '@mui/icons-material/ArrowForward'; +import React from 'react'; +import type { PersonalDashboardSchemaFlagsItem } from 'openapi'; + +const NoActiveFlagsInfo = styled('div')(({ theme }) => ({ + display: 'flex', + flexFlow: 'column', + gap: theme.spacing(2), +})); + +const FlagListItem: FC<{ + flag: { name: string; project: string; type: string }; + selected: boolean; + onClick: () => void; +}> = ({ flag, selected, onClick }) => { + const activeFlagRef = useRef(null); + const { trackEvent } = usePlausibleTracker(); + + useEffect(() => { + if (activeFlagRef.current) { + activeFlagRef.current.scrollIntoView({ + block: 'nearest', + inline: 'start', + }); + } + }, []); + const IconComponent = getFeatureTypeIcons(flag.type); + const flagLink = `projects/${flag.project}/features/${flag.name}`; + return ( + + + + + {flag.name} + { + trackEvent('personal-dashboard', { + props: { + eventType: `Go to flag from list`, + }, + }); + }} + size='small' + sx={{ ml: 'auto' }} + > + + + + + + ); +}; + +type FlagData = + | { + state: 'flags'; + flags: PersonalDashboardSchemaFlagsItem[]; + activeFlag: PersonalDashboardSchemaFlagsItem; + } + | { + state: 'no flags'; + }; + +type Props = { + hasProjects: boolean; + flagData: FlagData; + setActiveFlag: (flag: PersonalDashboardSchemaFlagsItem) => void; + refetchDashboard: () => void; +}; + +export const MyFlags: FC = ({ + hasProjects, + flagData, + setActiveFlag, + refetchDashboard, +}) => { + return ( + + + + {flagData.state === 'flags' ? ( + + {flagData.flags.map((flag) => ( + setActiveFlag(flag)} + /> + ))} + + ) : hasProjects ? ( + + + You have not created or favorited any feature + flags. Once you do, they will show up here. + + + To create a new flag, go to one of your + projects. + + + ) : ( + + You need to create or join a project to be able to + add a flag, or you must be given the rights by your + admin to add feature flags. + + )} + + + + {flagData.state === 'flags' ? ( + + ) : ( + + )} + + + + ); +}; + +const FlagMetricsChart = React.lazy(() => + import('./FlagMetricsChart').then((module) => ({ + default: module.FlagMetricsChart, + })), +); +const PlaceholderFlagMetricsChart = React.lazy(() => + import('./FlagMetricsChart').then((module) => ({ + default: module.PlaceholderFlagMetricsChartWithWrapper, + })), +); diff --git a/frontend/src/component/personalDashboard/MyProjects.tsx b/frontend/src/component/personalDashboard/MyProjects.tsx index 70062e4f7f12..f58b76f8ebb1 100644 --- a/frontend/src/component/personalDashboard/MyProjects.tsx +++ b/frontend/src/component/personalDashboard/MyProjects.tsx @@ -13,7 +13,6 @@ import { ConnectSDK, CreateFlag, ExistingFlag } from './ConnectSDK'; import { LatestProjectEvents } from './LatestProjectEvents'; import { RoleAndOwnerInfo } from './RoleAndOwnerInfo'; import { forwardRef, useEffect, useRef, type FC } from 'react'; -import { StyledCardTitle } from './PersonalDashboard'; import type { PersonalDashboardProjectDetailsSchema, PersonalDashboardSchemaAdminsItem, @@ -28,6 +27,7 @@ import { GridItem, SpacedGridItem, StyledList, + StyledCardTitle, } from './Grid'; import { ContactAdmins, DataError } from './ProjectDetailsError'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx index df80fc10a022..dd7be3bc8513 100644 --- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx +++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx @@ -3,108 +3,23 @@ import { Accordion, AccordionDetails, AccordionSummary, - Alert, Button, - IconButton, - Link, - ListItem, - ListItemButton, styled, Typography, } from '@mui/material'; -import React, { type FC, useEffect, useRef } from 'react'; -import LinkIcon from '@mui/icons-material/ArrowForward'; import { WelcomeDialog } from './WelcomeDialog'; import { useLocalStorageState } from 'hooks/useLocalStorageState'; import { usePersonalDashboard } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboard'; -import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons'; import { usePersonalDashboardProjectDetails } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboardProjectDetails'; import useLoading from '../../hooks/useLoading'; import { MyProjects } from './MyProjects'; -import { - ContentGridContainer, - FlagGrid, - ListItemBox, - listItemStyle, - SpacedGridItem, - StyledList, -} from './Grid'; import { ContentGridNoProjects } from './ContentGridNoProjects'; import ExpandMore from '@mui/icons-material/ExpandMore'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import useSplashApi from 'hooks/api/actions/useSplashApi/useSplashApi'; import { useAuthSplash } from 'hooks/api/getters/useAuth/useAuthSplash'; import { useDashboardState } from './useDashboardState'; - -export const StyledCardTitle = styled('div')<{ lines?: number }>( - ({ theme, lines = 2 }) => ({ - fontWeight: theme.typography.fontWeightRegular, - fontSize: theme.typography.body1.fontSize, - lineClamp: `${lines}`, - WebkitLineClamp: lines, - lineHeight: '1.2', - display: '-webkit-box', - boxOrient: 'vertical', - textOverflow: 'ellipsis', - overflow: 'hidden', - alignItems: 'flex-start', - WebkitBoxOrient: 'vertical', - wordBreak: 'break-word', - }), -); -const FlagListItem: FC<{ - flag: { name: string; project: string; type: string }; - selected: boolean; - onClick: () => void; -}> = ({ flag, selected, onClick }) => { - const activeFlagRef = useRef(null); - const { trackEvent } = usePlausibleTracker(); - - useEffect(() => { - if (activeFlagRef.current) { - activeFlagRef.current.scrollIntoView({ - block: 'nearest', - inline: 'start', - }); - } - }, []); - const IconComponent = getFeatureTypeIcons(flag.type); - const flagLink = `projects/${flag.project}/features/${flag.name}`; - return ( - - - - - {flag.name} - { - trackEvent('personal-dashboard', { - props: { - eventType: `Go to flag from list`, - }, - }); - }} - size='small' - sx={{ ml: 'auto' }} - > - - - - - - ); -}; +import { MyFlags } from './MyFlags'; const WelcomeSection = styled('div')(({ theme }) => ({ display: 'flex', @@ -201,8 +116,11 @@ export const PersonalDashboard = () => { const name = user?.name; - const { personalDashboard, refetch: refetchDashboard } = - usePersonalDashboard(); + const { + personalDashboard, + refetch: refetchDashboard, + loading: personalDashboardLoading, + } = usePersonalDashboard(); const projects = personalDashboard?.projects || []; @@ -314,70 +232,22 @@ export const PersonalDashboard = () => { - - - - {personalDashboard && - personalDashboard.flags.length > 0 ? ( - - {personalDashboard.flags.map((flag) => ( - - setActiveFlag(flag) - } - /> - ))} - - ) : activeProject ? ( - - - You have not created or favorited - any feature flags. Once you do, they - will show up here. - - - To create a new flag, go to one of - your projects. - - - ) : ( - - You need to create or join a project to - be able to add a flag, or you must be - given the rights by your admin to add - feature flags. - - )} - - - - {activeFlag ? ( - - ) : ( - - )} - - - + 0} + flagData={ + personalDashboard && + personalDashboard.flags.length && + activeFlag + ? { + state: 'flags' as const, + activeFlag, + flags: personalDashboard.flags, + } + : { state: 'no flags' as const } + } + setActiveFlag={setActiveFlag} + refetchDashboard={refetchDashboard} + /> { ); }; - -const FlagMetricsChart = React.lazy(() => - import('./FlagMetricsChart').then((module) => ({ - default: module.FlagMetricsChart, - })), -); -const PlaceholderFlagMetricsChart = React.lazy(() => - import('./FlagMetricsChart').then((module) => ({ - default: module.PlaceholderFlagMetricsChartWithWrapper, - })), -); From c75f88b4738c0cf88004eb2f1810868fdd2ecc9a Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 14 Oct 2024 11:36:45 +0200 Subject: [PATCH 05/11] fix: handle metrics errors for flag metrics chart --- .../personalDashboard/FlagMetricsChart.tsx | 35 +++++++++++++------ 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx index 8312459f74ed..d086ebd5d216 100644 --- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx +++ b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx @@ -121,10 +121,12 @@ const useFlagMetrics = ( environment: string | null, hoursBack: number, ) => { - const { featureMetrics: metrics = [], loading } = useFeatureMetricsRaw( - flagName, - hoursBack, - ); + const { + featureMetrics: metrics = [], + loading, + error, + } = useFeatureMetricsRaw(flagName, hoursBack); + const sortedMetrics = useMemo(() => { return [...metrics].sort((metricA, metricB) => { return metricA.timestamp.localeCompare(metricB.timestamp); @@ -151,7 +153,7 @@ const useFlagMetrics = ( return createBarChartOptions(theme, hoursBack, locationSettings); }, [theme, hoursBack, locationSettings]); - return { data, options, loading }; + return { data, options, loading, error }; }; const EnvironmentSelect: FC<{ @@ -222,13 +224,24 @@ export const FlagMetricsChart: FC<{ const { environment, setEnvironment, activeEnvironments } = useMetricsEnvironments(flag.project, flag.name); - const { data, options, loading } = useFlagMetrics( - flag.name, - environment, - hoursBack, - ); + const { + data, + options, + loading, + error: metricsError, + } = useFlagMetrics(flag.name, environment, hoursBack); + + if (metricsError) { + return ( + + + + ); + } - const noData = data.datasets[0].data.length === 0; + const noData = data?.datasets[0].data.length === 0; return ( From 4d140b61fcbefe688ea3f4c590205bd000ffe79f Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 14 Oct 2024 11:40:24 +0200 Subject: [PATCH 06/11] refactor: copy update --- frontend/src/component/personalDashboard/FlagMetricsChart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx index d086ebd5d216..bf79cf50667f 100644 --- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx +++ b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx @@ -235,7 +235,7 @@ export const FlagMetricsChart: FC<{ return ( ); From a483e76d16ff32d7a679c6bd65b93fd894d053f1 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 14 Oct 2024 11:41:14 +0200 Subject: [PATCH 07/11] refactor: remove redundant conditional accessor --- frontend/src/component/personalDashboard/FlagMetricsChart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx index bf79cf50667f..31f7ab284887 100644 --- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx +++ b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx @@ -241,7 +241,7 @@ export const FlagMetricsChart: FC<{ ); } - const noData = data?.datasets[0].data.length === 0; + const noData = data.datasets[0].data.length === 0; return ( From d277158e28bbfc48abc207764a696bfe0afbb0ca Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 14 Oct 2024 13:03:17 +0200 Subject: [PATCH 08/11] refactor: revert some unused changes --- .../personalDashboard/PersonalDashboard.tsx | 35 ++----------------- 1 file changed, 2 insertions(+), 33 deletions(-) diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx index dd7be3bc8513..6d70ec292209 100644 --- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx +++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx @@ -80,34 +80,6 @@ const MainContent = styled('div')(({ theme }) => ({ gap: theme.spacing(2), })); -const NoActiveFlagsInfo = styled('div')(({ theme }) => ({ - display: 'flex', - flexFlow: 'column', - gap: theme.spacing(2), -})); - -type DashboardState = - | { - state: 'flags and projects'; - // regular state; show everything - activeFlag: any; - activeProject: any; - } - | { - state: 'projects, no flags'; - // show projects as normal, tell the user to create a flag - activeProject: any; - } - | { - state: 'no projects, no flags'; - // no projects and no flags; show information about admins, project owners, and tell the user to join a project to create a flags - } - | { - state: 'flags, no projects'; - // show info about admins + project owners, regular flags - activeFlag: any; - }; - export const PersonalDashboard = () => { const { user } = useAuthUser(); const { trackEvent } = usePlausibleTracker(); @@ -116,11 +88,8 @@ export const PersonalDashboard = () => { const name = user?.name; - const { - personalDashboard, - refetch: refetchDashboard, - loading: personalDashboardLoading, - } = usePersonalDashboard(); + const { personalDashboard, refetch: refetchDashboard } = + usePersonalDashboard(); const projects = personalDashboard?.projects || []; From b0ec703c3f26942fbe4ada1dfaa167e73a1045c7 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 14 Oct 2024 13:04:30 +0200 Subject: [PATCH 09/11] refactor: rename grid file --- .../src/component/personalDashboard/ContentGridNoProjects.tsx | 2 +- frontend/src/component/personalDashboard/MyFlags.tsx | 2 +- frontend/src/component/personalDashboard/MyProjects.tsx | 2 +- .../personalDashboard/{Grid.tsx => SharedComponents.tsx} | 0 4 files changed, 3 insertions(+), 3 deletions(-) rename frontend/src/component/personalDashboard/{Grid.tsx => SharedComponents.tsx} (100%) diff --git a/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx b/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx index 02f791203a80..68041240dc9c 100644 --- a/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx +++ b/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx @@ -9,7 +9,7 @@ import { EmptyGridItem, ProjectGrid, GridItem, -} from './Grid'; +} from './SharedComponents'; const PaddedEmptyGridItem = styled(EmptyGridItem)(({ theme }) => ({ padding: theme.spacing(4), diff --git a/frontend/src/component/personalDashboard/MyFlags.tsx b/frontend/src/component/personalDashboard/MyFlags.tsx index fb75cda0da2c..757dffd8059a 100644 --- a/frontend/src/component/personalDashboard/MyFlags.tsx +++ b/frontend/src/component/personalDashboard/MyFlags.tsx @@ -7,7 +7,7 @@ import { StyledCardTitle, StyledList, listItemStyle, -} from './Grid'; +} from './SharedComponents'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons'; import { diff --git a/frontend/src/component/personalDashboard/MyProjects.tsx b/frontend/src/component/personalDashboard/MyProjects.tsx index f58b76f8ebb1..3a2d20c1bece 100644 --- a/frontend/src/component/personalDashboard/MyProjects.tsx +++ b/frontend/src/component/personalDashboard/MyProjects.tsx @@ -28,7 +28,7 @@ import { SpacedGridItem, StyledList, StyledCardTitle, -} from './Grid'; +} from './SharedComponents'; import { ContactAdmins, DataError } from './ProjectDetailsError'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; diff --git a/frontend/src/component/personalDashboard/Grid.tsx b/frontend/src/component/personalDashboard/SharedComponents.tsx similarity index 100% rename from frontend/src/component/personalDashboard/Grid.tsx rename to frontend/src/component/personalDashboard/SharedComponents.tsx From da9b38f37c9435b8f7f5a8c799e7a400c3bbffe4 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 14 Oct 2024 13:09:40 +0200 Subject: [PATCH 10/11] refactor: allow activeFlag to be undefined It should be an edge case, but this way we'll still render the list of flag as long as you have them. --- frontend/src/component/personalDashboard/MyFlags.tsx | 6 +++--- .../src/component/personalDashboard/PersonalDashboard.tsx | 4 +--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/frontend/src/component/personalDashboard/MyFlags.tsx b/frontend/src/component/personalDashboard/MyFlags.tsx index 757dffd8059a..a1b3132989d5 100644 --- a/frontend/src/component/personalDashboard/MyFlags.tsx +++ b/frontend/src/component/personalDashboard/MyFlags.tsx @@ -87,7 +87,7 @@ type FlagData = | { state: 'flags'; flags: PersonalDashboardSchemaFlagsItem[]; - activeFlag: PersonalDashboardSchemaFlagsItem; + activeFlag?: PersonalDashboardSchemaFlagsItem; } | { state: 'no flags'; @@ -123,7 +123,7 @@ export const MyFlags: FC = ({ key={flag.name} flag={flag} selected={ - flag.name === flagData.activeFlag.name + flag.name === flagData.activeFlag?.name } onClick={() => setActiveFlag(flag)} /> @@ -150,7 +150,7 @@ export const MyFlags: FC = ({ - {flagData.state === 'flags' ? ( + {flagData.state === 'flags' && flagData.activeFlag ? ( { 0} flagData={ - personalDashboard && - personalDashboard.flags.length && - activeFlag + personalDashboard && personalDashboard.flags.length ? { state: 'flags' as const, activeFlag, From 26b6e7e7cfc254ddac09138fff42641ae173d196 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 14 Oct 2024 13:46:03 +0200 Subject: [PATCH 11/11] refactor: simplify stringification --- .../src/component/personalDashboard/useDashboardState.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/component/personalDashboard/useDashboardState.ts b/frontend/src/component/personalDashboard/useDashboardState.ts index e1275c089c42..11eaee89080e 100644 --- a/frontend/src/component/personalDashboard/useDashboardState.ts +++ b/frontend/src/component/personalDashboard/useDashboardState.ts @@ -57,9 +57,9 @@ export const useDashboardState = ( updateState(updates); } }, [ - JSON.stringify(projects, null, 2), - JSON.stringify(flags, null, 2), - JSON.stringify(state, null, 2), + JSON.stringify(projects), + JSON.stringify(flags), + JSON.stringify(state), ]); const { activeFlag, activeProject } = state;