-
-
Notifications
You must be signed in to change notification settings - Fork 730
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor front end code pt 1 (#8438)
This PR is the first in the front end code refactoring. It moves My Flags out into a separate file and includes some extra error handling (such as if the name of the flag causes problems for the API). 
- Loading branch information
1 parent
d8ddb57
commit 8c2ed5d
Showing
6 changed files
with
362 additions
and
269 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<HTMLLIElement>(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 ( | ||
| <ListItem | ||
| key={flag.name} | ||
| disablePadding={true} | ||
| sx={{ mb: 1 }} | ||
| ref={selected ? activeFlagRef : null} | ||
| > | ||
| <ListItemButton | ||
| sx={listItemStyle} | ||
| selected={selected} | ||
| onClick={onClick} | ||
| > | ||
| <ListItemBox> | ||
| <IconComponent color='primary' /> | ||
| <StyledCardTitle>{flag.name}</StyledCardTitle> | ||
| <IconButton | ||
| component={Link} | ||
| href={flagLink} | ||
| onClick={() => { | ||
| trackEvent('personal-dashboard', { | ||
| props: { | ||
| eventType: `Go to flag from list`, | ||
| }, | ||
| }); | ||
| }} | ||
| size='small' | ||
| sx={{ ml: 'auto' }} | ||
| > | ||
| <LinkIcon titleAccess={flagLink} /> | ||
| </IconButton> | ||
| </ListItemBox> | ||
| </ListItemButton> | ||
| </ListItem> | ||
| ); | ||
| }; | ||
|
|
||
| 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<Props> = ({ | ||
| hasProjects, | ||
| flagData, | ||
| setActiveFlag, | ||
| refetchDashboard, | ||
| }) => { | ||
| return ( | ||
| <ContentGridContainer> | ||
| <FlagGrid> | ||
| <SpacedGridItem gridArea='flags'> | ||
| {flagData.state === 'flags' ? ( | ||
| <StyledList | ||
| disablePadding={true} | ||
| sx={{ | ||
| height: '100%', | ||
| overflow: 'auto', | ||
| }} | ||
| > | ||
| {flagData.flags.map((flag) => ( | ||
| <FlagListItem | ||
| key={flag.name} | ||
| flag={flag} | ||
| selected={ | ||
| flag.name === flagData.activeFlag.name | ||
| } | ||
| onClick={() => setActiveFlag(flag)} | ||
| /> | ||
| ))} | ||
| </StyledList> | ||
| ) : hasProjects ? ( | ||
| <NoActiveFlagsInfo> | ||
| <Typography> | ||
| You have not created or favorited any feature | ||
| flags. Once you do, they will show up here. | ||
| </Typography> | ||
| <Typography> | ||
| To create a new flag, go to one of your | ||
| projects. | ||
| </Typography> | ||
| </NoActiveFlagsInfo> | ||
| ) : ( | ||
| <Alert severity='info'> | ||
| 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. | ||
| </Alert> | ||
| )} | ||
| </SpacedGridItem> | ||
|
|
||
| <SpacedGridItem gridArea='chart'> | ||
| {flagData.state === 'flags' ? ( | ||
| <FlagMetricsChart | ||
| flag={flagData.activeFlag} | ||
| onArchive={refetchDashboard} | ||
| /> | ||
| ) : ( | ||
| <PlaceholderFlagMetricsChart | ||
| label={ | ||
| 'Metrics for your feature flags will be shown here' | ||
| } | ||
| /> | ||
| )} | ||
| </SpacedGridItem> | ||
| </FlagGrid> | ||
| </ContentGridContainer> | ||
| ); | ||
| }; | ||
|
|
||
| const FlagMetricsChart = React.lazy(() => | ||
| import('./FlagMetricsChart').then((module) => ({ | ||
| default: module.FlagMetricsChart, | ||
| })), | ||
| ); | ||
| const PlaceholderFlagMetricsChart = React.lazy(() => | ||
| import('./FlagMetricsChart').then((module) => ({ | ||
| default: module.PlaceholderFlagMetricsChartWithWrapper, | ||
| })), | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.