Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-14 00:19:16 +01:00
Code Issues Projects Releases Wiki Activity

fix: extract panels into separate components

Browse Source
This commit is contained in:
Thomas Heartman 2025-02-07 11:05:13 +01:00
parent f9bd9d2d03
commit e31cb875dc
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
1 changed files with 157 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

295
frontend/src/component/personalDashboard/PersonalDashboard.tsx
View File

@ -106,6 +106,158 @@ const AccordionSummarySubtitle = styled(Typography)(({ theme }) => ({
fontWeight: theme.typography.body2.fontWeight,
}));
const EventTimelinePanel = () => {
const { toggleSectionState, expandTimeline } = useDashboardState([], []);
const { trackEvent } = usePlausibleTracker();
const signalsLink = '/integrations/signals';
return (
<SectionAccordion
disableGutters
expanded={expandTimeline ?? false}
onChange={() => toggleSectionState('timeline')}
>
<StyledAccordionSummary
expandIcon={
<ExpandMore titleAccess='Toggle timeline section' />
}
id='timeline-panel-header'
aria-controls='timeline-panel-content'
>
<AccordionSummaryText>
<AccordionSummaryHeader>
Event timeline
</AccordionSummaryHeader>
<AccordionSummarySubtitle>
Overview of recent activities across all projects in
Unleash. Make debugging easier and{' '}
<Link
to={signalsLink}
onClick={() => {
trackEvent('event-timeline', {
props: {
eventType: 'signals clicked',
},
});
}}
>
include external signals
</Link>{' '}
to get a fuller overview.
</AccordionSummarySubtitle>
</AccordionSummaryText>
</StyledAccordionSummary>
<StyledAccordionDetails>
<AccordionContent>
<EventTimeline />
</AccordionContent>
</StyledAccordionDetails>
</SectionAccordion>
);
};
const FlagPanel = () => {
const { personalDashboard, refetch: refetchDashboard } =
usePersonalDashboard();
const projects = personalDashboard?.projects || [];
const { activeFlag, setActiveFlag, toggleSectionState, expandFlags } =
useDashboardState(projects, personalDashboard?.flags ?? []);
return (
<SectionAccordion
expanded={expandFlags ?? true}
onChange={() => toggleSectionState('flags')}
>
<StyledAccordionSummary
expandIcon={<ExpandMore titleAccess='Toggle flags section' />}
id='flags-panel-header'
aria-controls='flags-panel-content'
>
<AccordionSummaryText>
<AccordionSummaryHeader>
My feature flags
</AccordionSummaryHeader>
<AccordionSummarySubtitle>
Feature flags you have created or favorited
</AccordionSummarySubtitle>
</AccordionSummaryText>
</StyledAccordionSummary>
<StyledAccordionDetails>
<MyFlags
hasProjects={projects?.length > 0}
flagData={
personalDashboard?.flags.length
? {
state: 'flags' as const,
activeFlag,
flags: personalDashboard.flags,
}
: { state: 'no flags' as const }
}
setActiveFlag={setActiveFlag}
refetchDashboard={refetchDashboard}
/>
</StyledAccordionDetails>
</SectionAccordion>
);
};
const ProjectPanel = () => {
const { personalDashboard } = usePersonalDashboard();
const projects = personalDashboard?.projects || [];
const {
activeProject,
setActiveProject,
toggleSectionState,
expandProjects,
} = useDashboardState(projects, personalDashboard?.flags ?? []);
const personalDashboardProjectDetails =
fromPersonalDashboardProjectDetailsOutput(
usePersonalDashboardProjectDetails(activeProject),
);
return (
<SectionAccordion
disableGutters
expanded={expandProjects ?? true}
onChange={() => toggleSectionState('projects')}
>
<StyledAccordionSummary
expandIcon={
<ExpandMore titleAccess='Toggle projects section' />
}
id='projects-panel-header'
aria-controls='projects-panel-content'
>
<AccordionSummaryText>
<AccordionSummaryHeader>My projects</AccordionSummaryHeader>
<AccordionSummarySubtitle>
Favorite projects, projects you own, and projects you
are a member of
</AccordionSummarySubtitle>
</AccordionSummaryText>
</StyledAccordionSummary>
<StyledAccordionDetails>
<MyProjects
owners={personalDashboard?.projectOwners ?? []}
admins={personalDashboard?.admins ?? []}
projects={projects}
activeProject={activeProject || ''}
setActiveProject={setActiveProject}
personalDashboardProjectDetails={
personalDashboardProjectDetails
}
/>
</StyledAccordionDetails>
</SectionAccordion>
);
};
export const PersonalDashboard = () => {
const { user } = useAuthUser();
const { trackEvent } = usePlausibleTracker();
@ -117,24 +269,6 @@ export const PersonalDashboard = () => {
usePageTitle(name ? `Dashboard: ${name}` : 'Dashboard');
const { personalDashboard, refetch: refetchDashboard } =
usePersonalDashboard();
const projects = personalDashboard?.projects || [];
const {
activeProject,
setActiveProject,
activeFlag,
setActiveFlag,
toggleSectionState,
expandFlags,
expandProjects,
expandTimeline,
} = useDashboardState(projects, personalDashboard?.flags ?? []);
const signalsLink = '/integrations/signals';
const [welcomeDialog, setWelcomeDialog] = useLocalStorageState<
'open' | 'closed'
>(
@ -142,11 +276,6 @@ export const PersonalDashboard = () => {
splash?.personalDashboardKeyConcepts ? 'closed' : 'open',
);
const personalDashboardProjectDetails =
fromPersonalDashboardProjectDetailsOutput(
usePersonalDashboardProjectDetails(activeProject),
);
useEffect(() => {
trackEvent('personal-dashboard', {
props: {
@ -183,122 +312,12 @@ export const PersonalDashboard = () => {
</ViewKeyConceptsButton>
</WelcomeSection>
{showTimelinePanel && (
<SectionAccordion
disableGutters
expanded={expandTimeline ?? false}
onChange={() => toggleSectionState('timeline')}
>
<StyledAccordionSummary
expandIcon={
<ExpandMore titleAccess='Toggle timeline section' />
}
id='timeline-panel-header'
aria-controls='timeline-panel-content'
>
<AccordionSummaryText>
<AccordionSummaryHeader>
Event timeline
</AccordionSummaryHeader>
<AccordionSummarySubtitle>
Overview of recent activities across all
projects in Unleash. Make debugging easier and{' '}
<Link
to={signalsLink}
onClick={() => {
trackEvent('event-timeline', {
props: {
eventType: 'signals clicked',
},
});
}}
>
include external signals
</Link>{' '}
to get a fuller overview.
</AccordionSummarySubtitle>
</AccordionSummaryText>
</StyledAccordionSummary>
<StyledAccordionDetails>
<AccordionContent>
<EventTimeline />
</AccordionContent>
</StyledAccordionDetails>
</SectionAccordion>
)}
<SectionAccordion
disableGutters
expanded={expandProjects ?? true}
onChange={() => toggleSectionState('projects')}
>
<StyledAccordionSummary
expandIcon={
<ExpandMore titleAccess='Toggle projects section' />
}
id='projects-panel-header'
aria-controls='projects-panel-content'
>
<AccordionSummaryText>
<AccordionSummaryHeader>
My projects
</AccordionSummaryHeader>
<AccordionSummarySubtitle>
Favorite projects, projects you own, and projects
you are a member of
</AccordionSummarySubtitle>
</AccordionSummaryText>
</StyledAccordionSummary>
<StyledAccordionDetails>
<MyProjects
owners={personalDashboard?.projectOwners ?? []}
admins={personalDashboard?.admins ?? []}
projects={projects}
activeProject={activeProject || ''}
setActiveProject={setActiveProject}
personalDashboardProjectDetails={
personalDashboardProjectDetails
}
/>
</StyledAccordionDetails>
</SectionAccordion>
{showTimelinePanel && <EventTimelinePanel />}
<ProjectPanel />
<FlagPanel />
<SectionAccordion
expanded={expandFlags ?? true}
onChange={() => toggleSectionState('flags')}
>
<StyledAccordionSummary
expandIcon={
<ExpandMore titleAccess='Toggle flags section' />
}
id='flags-panel-header'
aria-controls='flags-panel-content'
>
<AccordionSummaryText>
<AccordionSummaryHeader>
My feature flags
</AccordionSummaryHeader>
<AccordionSummarySubtitle>
Feature flags you have created or favorited
</AccordionSummarySubtitle>
</AccordionSummaryText>
</StyledAccordionSummary>
<StyledAccordionDetails>
<MyFlags
hasProjects={projects?.length > 0}
flagData={
personalDashboard?.flags.length
? {
state: 'flags' as const,
activeFlag,
flags: personalDashboard.flags,
}
: { state: 'no flags' as const }
}
setActiveFlag={setActiveFlag}
refetchDashboard={refetchDashboard}
/>
</StyledAccordionDetails>
</SectionAccordion>
<WelcomeDialog
open={welcomeDialog === 'open'}
onClose={() => {