From 6ef5cf3bc7d4aafaa09555debb01d479e5f334cd Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Mon, 12 Aug 2024 13:49:40 +0200
Subject: [PATCH 1/2] refactor: conditionallyrender inconsistent props

---
 .../groups/GroupsList/GroupCard/GroupCard.tsx | 22 ++++----
 frontend/src/component/common/Badge/Badge.tsx |  8 ++-
 .../FeatureStrategyCreate.tsx                 |  1 +
 frontend/src/component/layout/Error/Error.tsx |  1 +
 .../SegmentExecution/SegmentExecution.tsx     |  1 +
 .../ReportTable/ReportCard/ReportCard.tsx     | 51 +++++++++----------
 6 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
index 2c2ee17b213e..734c9e8dbe2d 100644
--- a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
+++ b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
@@ -165,16 +165,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..df9af17710b0 100644
--- a/frontend/src/component/common/Badge/Badge.tsx
+++ b/frontend/src/component/common/Badge/Badge.tsx
@@ -75,11 +75,9 @@ const BadgeIcon = (color: Color, icon: ReactElement) => (
         <ConditionallyRender
             condition={Boolean(icon?.props.sx)}
             show={icon}
-            elseShow={() =>
-                cloneElement(icon!, {
-                    sx: { fontSize: '16px' },
-                })
-            }
+            elseShow={cloneElement(icon!, {
+                sx: { fontSize: '16px' },
+            })}
         />
     </StyledBadgeIcon>
 );
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
index 25edd4794c78..352924fd98dd 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
@@ -257,6 +257,7 @@ export const FeatureStrategyCreate = () => {
                                 limit={limit}
                             />
                         }
+                        elseShow={undefined}
                     />
                 }
                 disabled={limitReached}
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 21c1f1560cda..df0f7b7d2f8a 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>

From 7f183a6075858814082e07f1ba08c36ec5c50794 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Thu, 15 Aug 2024 09:34:46 +0200
Subject: [PATCH 2/2] fix: icon badge cloneelement

---
 frontend/src/component/common/Badge/Badge.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/common/Badge/Badge.tsx b/frontend/src/component/common/Badge/Badge.tsx
index df9af17710b0..94e46e512ed4 100644
--- a/frontend/src/component/common/Badge/Badge.tsx
+++ b/frontend/src/component/common/Badge/Badge.tsx
@@ -70,14 +70,18 @@ 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>
 );
@@ -108,7 +112,7 @@ export const Badge: FC<IBadgeProps> = forwardRef(
         >
             <ConditionallyRender
                 condition={Boolean(icon) && !iconRight}
-                show={BadgeIcon(color, icon!)}
+                show={BadgeIcon(color, icon)}
             />
             <ConditionallyRender
                 condition={
@@ -120,7 +124,7 @@ export const Badge: FC<IBadgeProps> = forwardRef(
             />
             <ConditionallyRender
                 condition={Boolean(icon) && Boolean(iconRight)}
-                show={BadgeIcon(color, icon!)}
+                show={BadgeIcon(color, icon)}
             />
         </StyledBadge>
     ),