mirror of
https://github.com/Unleash/unleash.git
synced 2025-02-19 00:15:43 +01:00
fix: extract panels into separate components
This commit is contained in:
Thomas Heartman
parent
f9bd9d2d03
commit
e31cb875dc
@ -106,6 +106,158 @@ const AccordionSummarySubtitle = styled(Typography)(({ theme }) => ({
|
|||||||
fontWeight: theme.typography.body2.fontWeight,
|
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 = () => {
|
export const PersonalDashboard = () => {
|
||||||
const { user } = useAuthUser();
|
const { user } = useAuthUser();
|
||||||
const { trackEvent } = usePlausibleTracker();
|
const { trackEvent } = usePlausibleTracker();
|
||||||
@ -117,24 +269,6 @@ export const PersonalDashboard = () => {
|
|||||||
|
|
||||||
usePageTitle(name ? `Dashboard: ${name}` : 'Dashboard');
|
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<
|
const [welcomeDialog, setWelcomeDialog] = useLocalStorageState<
|
||||||
'open' | 'closed'
|
'open' | 'closed'
|
||||||
>(
|
>(
|
||||||
@ -142,11 +276,6 @@ export const PersonalDashboard = () => {
|
|||||||
splash?.personalDashboardKeyConcepts ? 'closed' : 'open',
|
splash?.personalDashboardKeyConcepts ? 'closed' : 'open',
|
||||||
);
|
);
|
||||||
|
|
||||||
const personalDashboardProjectDetails =
|
|
||||||
fromPersonalDashboardProjectDetailsOutput(
|
|
||||||
usePersonalDashboardProjectDetails(activeProject),
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
trackEvent('personal-dashboard', {
|
trackEvent('personal-dashboard', {
|
||||||
props: {
|
props: {
|
||||||
@ -183,122 +312,12 @@ export const PersonalDashboard = () => {
|
|||||||
</ViewKeyConceptsButton>
|
</ViewKeyConceptsButton>
|
||||||
</WelcomeSection>
|
</WelcomeSection>
|
||||||
|
|
||||||
{showTimelinePanel && (
|
{showTimelinePanel && <EventTimelinePanel />}
|
||||||
<SectionAccordion
|
|
||||||
disableGutters
|
<ProjectPanel />
|
||||||
expanded={expandTimeline ?? false}
|
|
||||||
onChange={() => toggleSectionState('timeline')}
|
<FlagPanel />
|
||||||
>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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
|
<WelcomeDialog
|
||||||
open={welcomeDialog === 'open'}
|
open={welcomeDialog === 'open'}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user