fix: show all selected application names (#6110)

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,

frontend/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>;
+};

frontend/src/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',