From 79fccbd8f3f88ba908ca12585ef77d7bfe22f7db Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Fri, 30 Aug 2024 13:39:11 +0200
Subject: [PATCH] refactor: ts checking conditionallyrender props (#7840)

Fix issues found by TS checking after removing ConditionallyRender
---
 .../groups/GroupsList/GroupCard/GroupCard.tsx | 22 ++++----
 frontend/src/component/common/Badge/Badge.tsx | 16 +++---
 frontend/src/component/layout/Error/Error.tsx |  1 +
 .../SegmentExecution/SegmentExecution.tsx     |  1 +
 .../ReportTable/ReportCard/ReportCard.tsx     | 51 +++++++++----------
 5 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
index 0c1fd4465655..d85ec189c7bd 100644
--- a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
+++ b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
@@ -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>
diff --git a/frontend/src/component/common/Badge/Badge.tsx b/frontend/src/component/common/Badge/Badge.tsx
index 81652c652caf..94e46e512ed4 100644
--- a/frontend/src/component/common/Badge/Badge.tsx
+++ b/frontend/src/component/common/Badge/Badge.tsx
@@ -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>
@@ -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={
@@ -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>
     ),
diff --git a/frontend/src/component/layout/Error/Error.tsx b/frontend/src/component/layout/Error/Error.tsx
index 853d530d62e5..595e448a5cce 100644
--- a/frontend/src/component/layout/Error/Error.tsx
+++ b/frontend/src/component/layout/Error/Error.tsx
@@ -55,6 +55,7 @@ export const Error: VFC<IErrorProps> = ({ error }) => {
                     <ConditionallyRender
                         condition={showZendeskButton}
                         show={<ZendeskButton />}
+                        elseShow={undefined}
                     />
                 }
             >
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx
index 91007c58d236..c8d4d2575f8f 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx
@@ -54,6 +54,7 @@ export const SegmentExecution: VFC<ISegmentExecutionProps> = ({
                                         </span>
                                     </SegmentResultTextWrapper>
                                 }
+                                elseShow={undefined}
                             />
                         }
                         isExpanded
diff --git a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportCard/ReportCard.tsx b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportCard/ReportCard.tsx
index 8f6b87239419..e8e516012f0c 100644
--- a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportCard/ReportCard.tsx
+++ b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportCard/ReportCard.tsx
@@ -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={
@@ -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
@@ -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>
@@ -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>