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

refactor: ts checking conditionallyrender props (#7840)

Browse Source 
Fix issues found by TS checking after removing ConditionallyRender
This commit is contained in:
Tymoteusz Czech 2024-08-30 13:39:11 +02:00 committed by GitHub
parent a918590d1e
commit 79fccbd8f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 48 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
View File

@ -171,18 +171,20 @@ export const GroupCard = ({
</Tooltip> </Tooltip>
))} ))}
elseShow={ elseShow={
<ConditionallyRender
condition={!group.rootRole}
show={
<Tooltip <Tooltip
title='This group is not used in any project' title='This group is not used in any project'
arrow arrow
describeChild describeChild
> >
<ConditionallyRender <Badge>Not used</Badge>
condition={!group.rootRole}
show={<Badge>Not used</Badge>}
/>
</Tooltip> </Tooltip>
} }
/> />
}
/>
</ProjectBadgeContainer> </ProjectBadgeContainer>
</StyledBottomRow> </StyledBottomRow>
</StyledGroupCard> </StyledGroupCard>

12
frontend/src/component/common/Badge/Badge.tsx
View File

@ -70,15 +70,17 @@ const StyledBadgeIcon = styled('span')<
: theme.palette[color].main, : theme.palette[color].main,
})); }));
const BadgeIcon = (color: Color, icon: ReactElement) => ( const BadgeIcon = (color: Color, icon?: ReactElement) => (
<StyledBadgeIcon color={color}> <StyledBadgeIcon color={color}>
<ConditionallyRender <ConditionallyRender
condition={Boolean(icon?.props.sx)} condition={Boolean(icon?.props.sx)}
show={icon} show={icon}
elseShow={() => elseShow={
cloneElement(icon!, { icon
? cloneElement(icon, {
sx: { fontSize: '16px' }, sx: { fontSize: '16px' },
}) })
: null
} }
/> />
</StyledBadgeIcon> </StyledBadgeIcon>
@ -110,7 +112,7 @@ export const Badge: FC<IBadgeProps> = forwardRef(
> >
<ConditionallyRender <ConditionallyRender
condition={Boolean(icon) && !iconRight} condition={Boolean(icon) && !iconRight}
show={BadgeIcon(color, icon!)} show={BadgeIcon(color, icon)}
/> />
<ConditionallyRender <ConditionallyRender
condition={ condition={
@ -122,7 +124,7 @@ export const Badge: FC<IBadgeProps> = forwardRef(
/> />
<ConditionallyRender <ConditionallyRender
condition={Boolean(icon) && Boolean(iconRight)} condition={Boolean(icon) && Boolean(iconRight)}
show={BadgeIcon(color, icon!)} show={BadgeIcon(color, icon)}
/> />
</StyledBadge> </StyledBadge>
), ),

1
frontend/src/component/layout/Error/Error.tsx
View File

@ -55,6 +55,7 @@ export const Error: VFC<IErrorProps> = ({ error }) => {
<ConditionallyRender <ConditionallyRender
condition={showZendeskButton} condition={showZendeskButton}
show={<ZendeskButton />} show={<ZendeskButton />}
elseShow={undefined}
/> />
} }
> >

1
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx
View File

@ -54,6 +54,7 @@ export const SegmentExecution: VFC<ISegmentExecutionProps> = ({
</span> </span>
</SegmentResultTextWrapper> </SegmentResultTextWrapper>
} }
elseShow={undefined}
/> />
} }
isExpanded isExpanded

51
frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportCard/ReportCard.tsx
View File

@ -80,29 +80,6 @@ export const ReportCard = ({ healthReport }: IReportCardProps) => {
? 'warning.main' ? 'warning.main'
: 'success.main'; : 'success.main';
const renderActiveToggles = () => (
<StyledBoxActive>
<CheckIcon />
<span>{healthReport.activeCount} active flags</span>
</StyledBoxActive>
);
const renderStaleToggles = () => (
<StyledBoxStale>
<ReportProblemOutlinedIcon />
<span>{healthReport.staleCount} stale flags</span>
</StyledBoxStale>
);
const renderPotentiallyStaleToggles = () => (
<StyledBoxStale>
<ReportProblemOutlinedIcon />
<span>
{healthReport.potentiallyStaleCount} potentially stale flags
</span>
</StyledBoxStale>
);
const StalenessInfoIcon = () => ( const StalenessInfoIcon = () => (
<HtmlTooltip <HtmlTooltip
title={ title={
@ -157,7 +134,14 @@ export const ReportCard = ({ healthReport }: IReportCardProps) => {
<li> <li>
<ConditionallyRender <ConditionallyRender
condition={Boolean(healthReport.activeCount)} condition={Boolean(healthReport.activeCount)}
show={renderActiveToggles} show={
<StyledBoxActive>
<CheckIcon />
<span>
{healthReport.activeCount} active flags
</span>
</StyledBoxActive>
}
/> />
</li> </li>
<ConditionallyRender <ConditionallyRender
@ -172,7 +156,14 @@ export const ReportCard = ({ healthReport }: IReportCardProps) => {
<li> <li>
<ConditionallyRender <ConditionallyRender
condition={Boolean(healthReport.staleCount)} condition={Boolean(healthReport.staleCount)}
show={renderStaleToggles} show={
<StyledBoxStale>
<ReportProblemOutlinedIcon />
<span>
{healthReport.staleCount} stale flags
</span>
</StyledBoxStale>
}
/> />
</li> </li>
</StyledList> </StyledList>
@ -190,7 +181,15 @@ export const ReportCard = ({ healthReport }: IReportCardProps) => {
condition={Boolean( condition={Boolean(
healthReport.potentiallyStaleCount, healthReport.potentiallyStaleCount,
)} )}
show={renderPotentiallyStaleToggles} show={
<StyledBoxStale>
<ReportProblemOutlinedIcon />
<span>
{healthReport.potentiallyStaleCount}{' '}
potentially stale flags
</span>
</StyledBoxStale>
}
/> />
</li> </li>
</StyledList> </StyledList>