From f0fe2368e18484ace1abf5b2d08d6872810d0d1f Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 22 Jun 2023 13:46:29 +0200
Subject: [PATCH] feat: execution plan diff table (#4065)

---
 .../AdvancedPlaygroundResultsTable.tsx           |  6 +-----
 .../PlaygroundEnvironmentDiffTable.tsx           | 16 ++++++++++++++--
 .../FeatureStatusCell/FeatureStatusCell.tsx      |  2 +-
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.tsx b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.tsx
index 1461467eb5..caed624b31 100644
--- a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.tsx
+++ b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.tsx
@@ -33,13 +33,9 @@ import {
     AdvancedPlaygroundRequestSchema,
     AdvancedPlaygroundFeatureSchema,
     AdvancedPlaygroundFeatureSchemaEnvironments,
-    AdvancedPlaygroundEnvironmentFeatureSchema,
 } from 'openapi';
 import { capitalizeFirst } from 'utils/capitalizeFirst';
-import {
-    AdvancedPlaygroundEnvironmentDiffCell,
-    IAdvancedPlaygroundEnvironmentCellProps,
-} from './AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell';
+import { AdvancedPlaygroundEnvironmentDiffCell } from './AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell';
 
 const defaultSort: SortingRule<string> = { id: 'name' };
 const { value, setValue } = createLocalStorage(
diff --git a/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentDiffTable.tsx b/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentDiffTable.tsx
index 5ef68dab71..5aebd0fc09 100644
--- a/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentDiffTable.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentDiffTable.tsx
@@ -13,6 +13,7 @@ import { Box } from '@mui/material';
 import { FeatureStatusCell } from '../PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell';
 import { HighlightCell } from '../../../common/Table/cells/HighlightCell/HighlightCell';
 import { capitalizeFirst } from 'utils/capitalizeFirst';
+import { FeatureResultInfoPopoverCell } from '../PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell';
 
 interface IPlaygroundEnvironmentTableProps {
     features: AdvancedPlaygroundFeatureSchemaEnvironments;
@@ -54,10 +55,21 @@ export const PlaygroundEnvironmentDiffTable = ({
                 ? 'unknown'
                 : 'false',
         Cell: ({ row }: { row: { original: RowType } }) => {
-            return <FeatureStatusCell feature={row.original[environment]} />;
+            return (
+                <Box sx={{ display: 'flex' }}>
+                    <FeatureStatusCell feature={row.original[environment]} />
+                    <FeatureResultInfoPopoverCell
+                        feature={row.original[environment]}
+                        input={{
+                            environment: row.original[environment].environment,
+                            context: row.original[environment].context,
+                        }}
+                    />
+                </Box>
+            );
         },
         sortType: 'playgroundResultState',
-        maxWidth: 120,
+        maxWidth: 140,
     }));
 
     const COLUMNS = useMemo(() => {
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx
index 7a5029dd29..f4e61a7af6 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx
@@ -10,7 +10,7 @@ interface IFeatureStatusCellProps {
 const StyledCellBox = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-    padding: theme.spacing(1, 2),
+    padding: theme.spacing(1, 0, 1, 2),
 }));
 
 const StyledChipWrapper = styled(Box)(() => ({