fix: show all selected application names (#6110)

Unleash · Feb 2, 2024 · 1834f9f · 1834f9f
1 parent fbb5733
commit 1834f9f
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 1 deletion.
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
@@ -79,7 +79,14 @@ export const FeatureMetrics = () => {
                 .filter((metric) =>
                     selectedApplications.includes(metric.appName),
                 ) || [],
-        );
+        ).map((metric) => ({
+            ...metric,
+            appName:
+                selectedApplications.length > 1
+                    ? 'all selected'
+                    : metric.appName,
+            selectedApplications,
+        }));
     }, [
         cachedMetrics,
         selectedEnvironment,

diff --git a/...src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/ApplicationsCell.tsx b/...src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/ApplicationsCell.tsx
@@ -0,0 +1,45 @@
+import { VFC } from 'react';
+import { styled, Typography } from '@mui/material';
+import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
+import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
+
+const StyledTag = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.smallerBody,
+}));
+
+interface IFeatureTagCellProps {
+    row: {
+        original: {
+            appName: string;
+            selectedApplications: string[];
+        };
+    };
+}
+
+export const ApplicationsCell: VFC<IFeatureTagCellProps> = ({ row }) => {
+    if (
+        row.original.selectedApplications &&
+        row.original.selectedApplications.length > 1
+    ) {
+        return (
+            <TextCell>
+                <TooltipLink
+                    tooltip={
+                        <>
+                            {row.original.selectedApplications.map(
+                                (appName) => (
+                                    <StyledTag key={appName}>
+                                        {appName}
+                                    </StyledTag>
+                                ),
+                            )}
+                        </>
+                    }
+                >
+                    {row.original.appName}
+                </TooltipLink>
+            </TextCell>
+        );
+    }
+    return <TextCell>{row.original.appName}</TextCell>;
+};
diff --git a/.../component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx b/.../component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
@@ -9,6 +9,7 @@ import { useMemo } from 'react';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import theme from 'themes/theme';
 import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
+import { ApplicationsCell } from './ApplicationsCell';
 
 interface IFeatureMetricsTableProps {
     metrics: IFeatureMetricsRaw[];
@@ -103,6 +104,7 @@ const COLUMNS = [
     {
         Header: 'Application',
         accessor: 'appName',
+        Cell: ApplicationsCell,
     },
     {
         Header: 'Environment',