feat:playground environment table (#3985)

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

@@ -0,0 +1,134 @@
+import { useMemo } from 'react';
+import {
+    useFlexLayout,
+    useGlobalFilter,
+    useSortBy,
+    useTable,
+} from 'react-table';
+
+import { VirtualizedTable } from 'component/common/Table';
+import { sortTypes } from 'utils/sortTypes';
+import {
+    AdvancedPlaygroundEnvironmentFeatureSchema,
+    PlaygroundFeatureSchema,
+} from 'openapi';
+import { useMediaQuery, useTheme } from '@mui/material';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
+import { FeatureStatusCell } from '../PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell';
+import { FeatureResultInfoPopoverCell } from '../PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell';
+import { VariantCell } from '../PlaygroundResultsTable/VariantCell/VariantCell';
+import { HighlightCell } from '../../../common/Table/cells/HighlightCell/HighlightCell';
+
+interface IPlaygroundEnvironmentTableProps {
+    features: AdvancedPlaygroundEnvironmentFeatureSchema[];
+}
+
+export const PlaygroundEnvironmentTable = ({
+    features,
+}: IPlaygroundEnvironmentTableProps) => {
+    const theme = useTheme();
+    const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
+    const dynamicHeaders = Object.keys(features[0].context)
+        .filter(contextField => contextField !== 'appName')
+        .map(contextField => ({
+            Header: contextField,
+            accessor: `context.${contextField}`,
+            minWidth: 160,
+            Cell: HighlightCell,
+        }));
+
+    const COLUMNS = useMemo(() => {
+        return [
+            ...dynamicHeaders,
+            {
+                Header: 'Variant',
+                id: 'variant',
+                accessor: 'variant.name',
+                sortType: 'alphanumeric',
+                filterName: 'variant',
+                maxWidth: 200,
+                Cell: ({
+                    value,
+                    row: {
+                        original: { variant, feature, variants, isEnabled },
+                    },
+                }: any) => (
+                    <VariantCell
+                        variant={variant?.enabled ? value : ''}
+                        variants={variants}
+                        feature={feature}
+                        isEnabled={isEnabled}
+                    />
+                ),
+            },
+            {
+                id: 'isEnabled',
+                Header: 'isEnabled',
+                filterName: 'isEnabled',
+                accessor: (row: PlaygroundFeatureSchema) =>
+                    row?.isEnabled
+                        ? 'true'
+                        : row?.strategies?.result === 'unknown'
+                        ? 'unknown'
+                        : 'false',
+                Cell: ({ row }: any) => (
+                    <FeatureStatusCell feature={row.original} />
+                ),
+                sortType: 'playgroundResultState',
+                maxWidth: 120,
+                sortInverted: true,
+            },
+            {
+                Header: '',
+                maxWidth: 70,
+                id: 'info',
+                Cell: ({ row }: any) => (
+                    <FeatureResultInfoPopoverCell
+                        feature={row.original}
+                        input={{
+                            environment: row.original.environment,
+                            context: row.original.context,
+                        }}
+                    />
+                ),
+            },
+        ];
+    }, []);
+
+    const {
+        headerGroups,
+        rows,
+        state: { sortBy },
+        prepareRow,
+        setHiddenColumns,
+    } = useTable(
+        {
+            columns: COLUMNS as any,
+            data: features,
+            sortTypes,
+        },
+        useGlobalFilter,
+        useFlexLayout,
+        useSortBy
+    );
+
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isExtraSmallScreen,
+                columns: ['variant'],
+            },
+        ],
+        setHiddenColumns,
+        COLUMNS
+    );
+
+    return (
+        <VirtualizedTable
+            rows={rows}
+            headerGroups={headerGroups}
+            prepareRow={prepareRow}
+        />
+    );
+};