feat: environment diff (#4007)

frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx

@@ -104,4 +104,5 @@ test('should render advanced playground table', async () => {
     expect(screen.getByText('ChangeReqs')).toBeInTheDocument();
     expect(screen.getByText('Development')).toBeInTheDocument();
     expect(screen.getByText('Production')).toBeInTheDocument();
+    expect(screen.getByText('Preview diff')).toBeInTheDocument();
 });

frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.tsx

@@ -32,9 +32,14 @@ import { AdvancedPlaygroundEnvironmentCell } from './AdvancedPlaygroundEnvironme
 import {
     AdvancedPlaygroundRequestSchema,
     AdvancedPlaygroundFeatureSchema,
+    AdvancedPlaygroundFeatureSchemaEnvironments,
+    AdvancedPlaygroundEnvironmentFeatureSchema,
 } from 'openapi';
 import { capitalizeFirst } from 'utils/capitalizeFirst';
-import { AdvancedPlaygroundEnvironmentDiffCell } from './AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell';
+import {
+    AdvancedPlaygroundEnvironmentDiffCell,
+    IAdvancedPlaygroundEnvironmentCellProps,
+} from './AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell';
 
 const defaultSort: SortingRule<string> = { id: 'name' };
 const { value, setValue } = createLocalStorage(
@@ -67,6 +72,10 @@ export const AdvancedPlaygroundResultsTable = ({
     );
     const theme = useTheme();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+    const environmentsCount =
+        features && features.length > 0
+            ? Object.keys(features[0].environments).length
+            : 0;
 
     const COLUMNS = useMemo(() => {
         return [
@@ -106,17 +115,29 @@ export const AdvancedPlaygroundResultsTable = ({
                     ),
                 };
             }) || []),
-            {
+            ...(environmentsCount > 1
-                Header: 'Diff',
+                ? [
-                minWidth: 150,
+                      {
-                id: 'diff',
+                          Header: 'Diff',
-                align: 'left',
+                          minWidth: 150,
-                Cell: ({ row }: any) => (
+                          id: 'diff',
-                    <AdvancedPlaygroundEnvironmentDiffCell
+                          align: 'left',
-                        value={row.original.environments}
+                          Cell: ({
-                    />
+                              row,
-                ),
+                          }: {
-            },
+                              row: {
+                                  original: {
+                                      environments: AdvancedPlaygroundFeatureSchemaEnvironments;
+                                  };
+                              };
+                          }) => (
+                              <AdvancedPlaygroundEnvironmentDiffCell
+                                  value={row.original.environments}
+                              />
+                          ),
+                      },
+                  ]
+                : []),
         ];
     }, [input]);
 
@@ -131,7 +152,7 @@ export const AdvancedPlaygroundResultsTable = ({
             ? Array(5).fill({
                   name: 'Feature name',
                   projectId: 'Feature Project',
-                  environments: { name: 'Feature Envrironments', variants: [] },
+                  environments: { name: 'Feature Environments', variants: [] },
                   enabled: true,
               })
             : searchedData;

frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentDiffTable.test.tsx

@@ -0,0 +1,65 @@
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { PlaygroundEnvironmentDiffTable } from './PlaygroundEnvironmentDiffTable';
+import { UIProviderContainer } from '../../../providers/UIProvider/UIProviderContainer';
+
+const irrelevantDetails = {
+    strategies: {
+        data: [],
+        result: false,
+    },
+    isEnabledInCurrentEnvironment: true,
+    variants: [],
+    variant: {
+        name: 'variantName',
+        enabled: true,
+        payload: {
+            type: 'string' as const,
+            value: 'variantValue',
+        },
+    },
+    projectId: 'projectA',
+};
+
+test('should render environment table', async () => {
+    render(
+        <UIProviderContainer>
+            <PlaygroundEnvironmentDiffTable
+                features={{
+                    development: [
+                        {
+                            name: 'featureA',
+                            isEnabled: true,
+                            environment: 'development',
+                            context: {
+                                channel: 'web',
+                                client: 'clientA',
+                                appName: 'myapp',
+                            },
+                            ...irrelevantDetails,
+                        },
+                    ],
+                    production: [
+                        {
+                            name: 'featureA',
+                            isEnabled: false,
+                            environment: 'production',
+                            context: {
+                                channel: 'web',
+                                client: 'clientA',
+                                appName: 'myapp',
+                            },
+                            ...irrelevantDetails,
+                        },
+                    ],
+                }}
+            />
+        </UIProviderContainer>
+    );
+
+    expect(screen.getByText('web')).toBeInTheDocument();
+    expect(screen.getByText('clientA')).toBeInTheDocument();
+    expect(screen.getByText('True')).toBeInTheDocument();
+    expect(screen.getByText('False')).toBeInTheDocument();
+    expect(screen.getByText('myapp')).toBeInTheDocument();
+});