diff --git a/frontend/src/component/playground/Playground/Playground.tsx b/frontend/src/component/playground/Playground/Playground.tsx index 03001ecb66..53e1b7e185 100644 --- a/frontend/src/component/playground/Playground/Playground.tsx +++ b/frontend/src/component/playground/Playground/Playground.tsx @@ -18,6 +18,7 @@ import { } from './playground.utils'; import { PlaygroundGuidance } from './PlaygroundGuidance/PlaygroundGuidance'; import { PlaygroundGuidancePopper } from './PlaygroundGuidancePopper/PlaygroundGuidancePopper'; +import Loader from '../../common/Loader/Loader'; export const Playground: VFC<{}> = () => { const { environments } = useEnvironments(); @@ -101,7 +102,6 @@ export const Playground: VFC<{}> = () => { if (action && typeof action === 'function') { action(); } - setResults(response); } catch (error: unknown) { setToastData({ @@ -198,15 +198,21 @@ export const Playground: VFC<{}> = () => { })} > } + elseShow={ + + } + elseShow={} /> } - elseShow={} /> diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx index efffa73f3a..0a0fe4d692 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx @@ -20,12 +20,12 @@ const StyledChipWrapper = styled(Box)(() => ({ export const FeatureStatusCell = ({ feature }: IFeatureStatusCellProps) => { const enabled = feature.isEnabled ? true - : feature.strategies.result === false + : feature.strategies?.result === false ? false : 'unknown'; const label = feature.isEnabled ? 'True' - : feature.strategies.result === false + : feature.strategies?.result === false ? 'False' : 'Unknown'; return ( diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx index fd5db14d1a..fac8ab4921 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx @@ -1,15 +1,14 @@ import { useEffect, useMemo, useState } from 'react'; import { useSearchParams } from 'react-router-dom'; -import { SortingRule, useGlobalFilter, useSortBy, useTable } from 'react-table'; - import { - SortableTableHeader, - Table, - TableBody, - TableCell, - TablePlaceholder, - TableRow, -} from 'component/common/Table'; + SortingRule, + useFlexLayout, + useGlobalFilter, + useSortBy, + useTable, +} from 'react-table'; + +import { TablePlaceholder, VirtualizedTable } from 'component/common/Table'; import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; import { sortTypes } from 'utils/sortTypes'; import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell'; @@ -86,7 +85,7 @@ export const PlaygroundResultsTable = ({ sortType: 'alphanumeric', filterName: 'variant', searchable: true, - width: 200, + maxWidth: 200, Cell: ({ value, row: { @@ -110,10 +109,12 @@ export const PlaygroundResultsTable = ({ ), sortType: 'boolean', + maxWidth: 120, sortInverted: true, }, { Header: '', + maxWidth: 70, id: 'info', Cell: ({ row }: any) => ( - ( @@ -259,30 +259,11 @@ export const PlaygroundResultsTable = ({ - - - - {rows.map(row => { - prepareRow(row); - return ( - - {row.cells.map(cell => ( - - {cell.render('Cell')} - - ))} - - ); - })} - -
+