Skip to content

Commit

Permalink
refactor: ts checking conditionallyrender props (#7840)
Browse files Browse the repository at this point in the history 
Fix issues found by TS checking after removing ConditionallyRender
  • Loading branch information
@Tymek
Tymek authored Aug 30, 2024
1 parent a918590 commit 79fccbd
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 43 deletions.
22 changes: 12 additions & 10 deletions frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,16 +171,18 @@ export const GroupCard = ({
</Tooltip>
))}
elseShow={
<Tooltip
title='This group is not used in any project'
arrow
describeChild
>
<ConditionallyRender
condition={!group.rootRole}
show={<Badge>Not used</Badge>}
/>
</Tooltip>
<ConditionallyRender
condition={!group.rootRole}
show={
<Tooltip
title='This group is not used in any project'
arrow
describeChild
>
<Badge>Not used</Badge>
</Tooltip>
}
/>
}
/>
</ProjectBadgeContainer>
Expand Down
16 changes: 9 additions & 7 deletions frontend/src/component/common/Badge/Badge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,15 +70,17 @@ const StyledBadgeIcon = styled('span')<
: theme.palette[color].main,
}));

const BadgeIcon = (color: Color, icon: ReactElement) => (
const BadgeIcon = (color: Color, icon?: ReactElement) => (
<StyledBadgeIcon color={color}>
<ConditionallyRender
condition={Boolean(icon?.props.sx)}
show={icon}
elseShow={() =>
cloneElement(icon!, {
sx: { fontSize: '16px' },
})
elseShow={
icon
? cloneElement(icon, {
sx: { fontSize: '16px' },
})
: null
}
/>
</StyledBadgeIcon>
Expand Down Expand Up @@ -110,7 +112,7 @@ export const Badge: FC<IBadgeProps> = forwardRef(
>
<ConditionallyRender
condition={Boolean(icon) && !iconRight}
show={BadgeIcon(color, icon!)}
show={BadgeIcon(color, icon)}
/>
<ConditionallyRender
condition={
Expand All @@ -122,7 +124,7 @@ export const Badge: FC<IBadgeProps> = forwardRef(
/>
<ConditionallyRender
condition={Boolean(icon) && Boolean(iconRight)}
show={BadgeIcon(color, icon!)}
show={BadgeIcon(color, icon)}
/>
</StyledBadge>
),
Expand Down
1 change: 1 addition & 0 deletions frontend/src/component/layout/Error/Error.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export const Error: VFC<IErrorProps> = ({ error }) => {
<ConditionallyRender
condition={showZendeskButton}
show={<ZendeskButton />}
elseShow={undefined}
/>
}
>
Expand Down
1 change: 1 addition & 0 deletions ...egyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export const SegmentExecution: VFC<ISegmentExecutionProps> = ({
</span>
</SegmentResultTextWrapper>
}
elseShow={undefined}
/>
}
isExpanded
Expand Down
51 changes: 25 additions & 26 deletions frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportCard/ReportCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,29 +80,6 @@ export const ReportCard = ({ healthReport }: IReportCardProps) => {
? 'warning.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 = () => (
<HtmlTooltip
title={
Expand Down Expand Up @@ -157,7 +134,14 @@ export const ReportCard = ({ healthReport }: IReportCardProps) => {
<li>
<ConditionallyRender
condition={Boolean(healthReport.activeCount)}
show={renderActiveToggles}
show={
<StyledBoxActive>
<CheckIcon />
<span>
{healthReport.activeCount} active flags
</span>
</StyledBoxActive>
}
/>
</li>
<ConditionallyRender
Expand All @@ -172,7 +156,14 @@ export const ReportCard = ({ healthReport }: IReportCardProps) => {
<li>
<ConditionallyRender
condition={Boolean(healthReport.staleCount)}
show={renderStaleToggles}
show={
<StyledBoxStale>
<ReportProblemOutlinedIcon />
<span>
{healthReport.staleCount} stale flags
</span>
</StyledBoxStale>
}
/>
</li>
</StyledList>
Expand All @@ -190,7 +181,15 @@ export const ReportCard = ({ healthReport }: IReportCardProps) => {
condition={Boolean(
healthReport.potentiallyStaleCount,
)}
show={renderPotentiallyStaleToggles}
show={
<StyledBoxStale>
<ReportProblemOutlinedIcon />
<span>
{healthReport.potentiallyStaleCount}{' '}
potentially stale flags
</span>
</StyledBoxStale>
}
/>
</li>
</StyledList>
Expand Down

0 comments on commit 79fccbd

Please sign in to comment.