feat: Table with feature overview cell #6713
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
![codescene-delta-analysis[bot]](https://avatars.githubusercontent.com/in/53921?s=60&v=4){kind=small}
There was a problem hiding this comment.
❌ Code Health Quality Gates: FAILED
- Declining Code Health: 1 findings(s) 🚩
- Improving Code Health: 0 findings(s) ✅
- Affected Hotspots: 0 files(s) 🔥
Recommended Review Level: Detailed -- Inspect the code that degrades in code health.
View detailed results in CodeScene
🚩 Declining Code Health (highest to lowest):
| featureEnvironment.variantCount && | ||
| featureEnvironment.variantCount > 0 && | ||
| featureEnvironment.enabled, | ||
| ) || false, | ||
| }), | ||
| { | ||
| id: formatEnvironmentColumnId(name), | ||
| header: name, | ||
| meta: { | ||
| align: 'center', | ||
| width: 90, | ||
| }, | ||
| cell: ({ getValue }) => { | ||
| const { | ||
| featureId, | ||
| environment, | ||
| someEnabledEnvironmentHasVariants, | ||
| } = getValue(); | ||
|
|
||
| return ( | ||
| <FeatureToggleCell | ||
| value={environment?.enabled || false} | ||
| featureId={featureId} | ||
| someEnabledEnvironmentHasVariants={ | ||
| someEnabledEnvironmentHasVariants | ||
| } | ||
| environment={environment} | ||
| projectId={projectId} | ||
| environmentName={name} | ||
| isChangeRequestEnabled={ | ||
| isChangeRequestEnabled | ||
| } | ||
| refetch={refetch} | ||
| onFeatureToggleSwitch={onFeatureToggle} | ||
| /> | ||
| ); | ||
| }, | ||
| }, | ||
| ); | ||
| }), | ||
| columnHelper.display({ | ||
| id: 'actions', | ||
| header: '', | ||
| cell: ({ row }) => ( | ||
| <ActionsCell | ||
| row={row} | ||
| projectId={projectId} | ||
| onOpenArchiveDialog={setFeatureArchiveState} | ||
| onOpenStaleDialog={setFeatureStaleDialogState} | ||
| /> | ||
| ), | ||
| enableSorting: false, | ||
| enableHiding: false, | ||
| meta: { | ||
| align: 'right', | ||
| width: '1%', | ||
| }, | ||
| }), | ||
| ], | ||
| [projectId, environments, tableState.favoritesFirst, refetch], | ||
| ); | ||
|
|
||
| const placeholderData = useMemo( | ||
| () => | ||
| Array(tableState.limit) | ||
| .fill(null) | ||
| .map((_, index) => ({ | ||
| id: index, | ||
| type: '-', | ||
| name: `Feature name ${index}`, | ||
| createdAt: new Date().toISOString(), | ||
| dependencyType: null, | ||
| favorite: false, | ||
| impressionData: false, | ||
| project: 'project', | ||
| segments: [], | ||
| stale: false, | ||
| environments: [ | ||
| { | ||
| name: 'production', | ||
| enabled: false, | ||
| }, | ||
| { | ||
| name: 'production', | ||
| enabled: false, | ||
| }, | ||
| ], | ||
| })), | ||
| [tableState.limit], | ||
| ); | ||
|
|
||
| const isPlaceholder = Boolean(initialLoad || (loading && total)); | ||
| const bodyLoadingRef = useLoading(isPlaceholder); | ||
|
|
||
| const data = useMemo(() => { | ||
| if (isPlaceholder) { | ||
| return placeholderData; | ||
| } | ||
| return features; | ||
| }, [isPlaceholder, features]); |
There was a problem hiding this comment.
❌ New issue: Complex Method
OldProjectFeatureToggles.columns has a cyclomatic complexity of 16, threshold = 10
Why does this problem occur?
This function has many conditional statements (e.g. if, for, while), leading to lower code health. Avoid adding more conditionals and code to it without refactoring. Read more.
To ignore this warning click here.
| @@ -28,8 +28,7 @@ const HeaderCell = <T extends object>(header: Header<T, unknown>) => { | |||
| onClick={() => column.toggleSorting()} | |||
| styles={{ | |||
| borderRadius: '0px', | |||
| paddingTop: 0, | |||
| paddingBottom: 0, | |||
| padding: 0, | |||
There was a problem hiding this comment.
previously we had 16px padding from left and right that other components had to compensate for
| @@ -5,12 +5,12 @@ import StarBorderIcon from '@mui/icons-material/StarBorder'; | |||
| import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; | |||
|
|
|||
| const StyledCell = styled(Box)(({ theme }) => ({ | |||
| paddingLeft: theme.spacing(1.25), | |||
| paddingRight: theme.spacing(0.5), | |||
There was a problem hiding this comment.
there was too much spacing around the star icon
| @@ -59,25 +59,40 @@ const CappedDescription: FC<{ text: string; searchQuery: string }> = ({ | |||
| placement='bottom-start' | |||
| arrow | |||
| > | |||
| <StyledDescription data-loading> | |||
| <StyledDescription> | |||
There was a problem hiding this comment.
loader moved onto the parent so those data-loading attributes had no effect
| <Highlighter search={searchQuery}>{text}</Highlighter> | ||
| </StyledDescription> | ||
| } | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| const CappedTag: FC<{ tag: string }> = ({ tag }) => { |
There was a problem hiding this comment.
tags get tooltip when they are long
| const { featureTypes } = useFeatureTypes(); | ||
| const IconComponent = getFeatureTypeIcons(type); | ||
| const typeName = featureTypes.find( | ||
| (featureType) => featureType.id === type, | ||
| )?.name; | ||
| const title = `This is a "${typeName || type}" flag`; | ||
| const title = `${typeName || type} flag`; |
There was a problem hiding this comment.
simplified message
| data-loading | ||
| /> | ||
| </Tooltip> | ||
| <HtmlTooltip arrow title={title} describeChild> |
There was a problem hiding this comment.
this is nicely styled with a white background
| ); | ||
|
|
||
| return ( | ||
| <FeatureNameAndType> | ||
| <FeatureNameAndType data-loading> |
There was a problem hiding this comment.
loading on the parent
| show={ | ||
| <Box | ||
| sx={(theme) => ({ display: 'flex', gap: theme.spacing(1) })} | ||
| > | ||
| <DependencyBadge |
There was a problem hiding this comment.
moved dependency onto the first row
| @@ -7,24 +7,21 @@ interface IRowSelectCellProps { | |||
| onChange: (_?: unknown) => void; | |||
| checked: boolean; | |||
| title: string; | |||
| noPadding?: boolean; | |||
There was a problem hiding this comment.
this was probably a hack and I'n removing it now because I fixed the underlying issue with extra padding
| } | ||
|
|
||
| const StyledBoxCell = styled(Box)(({ theme }) => ({ | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| paddingLeft: theme.spacing(2), |
There was a problem hiding this comment.
row selector has predictable with without special case noPadding
kwasniew
changed the title
About the changes
This PR is only 80 LOC. 500 LOC is copy paste of the old table component that will be removed soon. I renamed the previous version to keep the history for the evolving component.
Old table:
New table:
Improved flag type tooltip
Tooltip for long tag names
Adjusted row selector and favourite spacing
Important files
Discussion points