From 80a9591d37e00d681abf069a3dd5fa9dcffcf3b3 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Mon, 26 Aug 2024 12:28:21 +0200
Subject: [PATCH] Fix/metrics chip adhock improvement (#7976)

On flag metrics page
---
 .../FeatureMetrics/FeatureMetrics.tsx         | 18 ++++++++----------
 .../FeatureMetricsChips.tsx                   | 19 +++++++++----------
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
index e1ee6698dbf8..bcb3da5df44c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
@@ -40,21 +40,19 @@ export const FeatureMetrics = () => {
         featureId,
         query.hoursBack || FEATURE_METRIC_HOURS_BACK_DEFAULT,
     );
-    const defaultApplication = Array.from(applications)[0];
+
+    const allApplications = Array.from(applications);
+    const defaultApplication = allApplications[0];
 
     const { environment: selectedEnvironment, hoursBack } = query;
     const selectedApplications = query.applications.filter(
         (item) => item !== null,
     ) as string[];
     useEffect(() => {
-        if (
-            query.applications &&
-            query.applications.length === 0 &&
-            defaultApplication
-        ) {
-            setQuery({ applications: [defaultApplication] });
+        if (query.applications && query.applications.length === 0) {
+            setQuery({ applications: allApplications });
         }
-    }, [JSON.stringify(Array.from(applications))]);
+    }, [JSON.stringify(allApplications)]);
 
     const allSelected = [...applications].every((element) =>
         selectedApplications.includes(element),
@@ -100,7 +98,7 @@ export const FeatureMetrics = () => {
     return (
         <PageContent>
             <Grid container component='header' spacing={2}>
-                <Grid item xs={12} md={5}>
+                <Grid item xs={12} md={4}>
                     <ConditionallyRender
                         condition={environments.size > 0}
                         show={
@@ -115,7 +113,7 @@ export const FeatureMetrics = () => {
                         }
                     />
                 </Grid>
-                <Grid item xs={12} md={5}>
+                <Grid item xs={12} md={6}>
                     <ConditionallyRender
                         condition={applications.size > 0}
                         show={
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx
index 8f5a98fe28b3..254be1a5719f 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx
@@ -64,6 +64,15 @@ export const FeatureMetricsChips = ({
         <div>
             <StyledTitle>{title}</StyledTitle>
             <StyledList>
+                {toggleValues && values.size > 1 && (
+                    <Button
+                        size={'small'}
+                        onClick={toggleValues}
+                        aria-pressed={allSelected}
+                    >
+                        {allSelected ? 'Unselect' : 'Select all'}
+                    </Button>
+                )}
                 {sortedValues.map((val) => (
                     <StyledItem key={val}>
                         <Chip
@@ -74,16 +83,6 @@ export const FeatureMetricsChips = ({
                         />
                     </StyledItem>
                 ))}
-
-                {toggleValues && values.size > 1 && (
-                    <Button
-                        size={'small'}
-                        onClick={toggleValues}
-                        aria-pressed={allSelected}
-                    >
-                        {allSelected ? 'Unselect' : 'Select all'}
-                    </Button>
-                )}
             </StyledList>
         </div>
     );