Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-28 00:06:53 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1214 from Unleash/fix/playground_virtualisation_loader

Browse Source 
Fix/playground virtualisation loader
This commit is contained in:
andreas-unleash 2022-08-11 10:50:42 +03:00 committed by GitHub
commit 2c3b0bbebd
3 changed files with 35 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/component/playground/Playground/Playground.tsx
View File

@ -18,6 +18,7 @@ import {
} from './playground.utils'; } from './playground.utils';
import { PlaygroundGuidance } from './PlaygroundGuidance/PlaygroundGuidance'; import { PlaygroundGuidance } from './PlaygroundGuidance/PlaygroundGuidance';
import { PlaygroundGuidancePopper } from './PlaygroundGuidancePopper/PlaygroundGuidancePopper'; import { PlaygroundGuidancePopper } from './PlaygroundGuidancePopper/PlaygroundGuidancePopper';
import Loader from '../../common/Loader/Loader';
export const Playground: VFC<{}> = () => { export const Playground: VFC<{}> = () => {
const { environments } = useEnvironments(); const { environments } = useEnvironments();
@ -101,7 +102,6 @@ export const Playground: VFC<{}> = () => {
if (action && typeof action === 'function') { if (action && typeof action === 'function') {
action(); action();
} }
setResults(response); setResults(response);
} catch (error: unknown) { } catch (error: unknown) {
setToastData({ setToastData({
@ -198,15 +198,21 @@ export const Playground: VFC<{}> = () => {
})} })}
> >
<ConditionallyRender <ConditionallyRender
condition={Boolean(results)} condition={loading}
show={ show={<Loader />}
<PlaygroundResultsTable elseShow={
loading={loading} <ConditionallyRender
features={results?.features} condition={Boolean(results)}
input={results?.input} show={
<PlaygroundResultsTable
loading={loading}
features={results?.features}
input={results?.input}
/>
}
elseShow={<PlaygroundGuidance />}
/> />
} }
elseShow={<PlaygroundGuidance />}
/> />
</Box> </Box>
</Box> </Box>

4
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx
View File

@ -20,12 +20,12 @@ const StyledChipWrapper = styled(Box)(() => ({
export const FeatureStatusCell = ({ feature }: IFeatureStatusCellProps) => { export const FeatureStatusCell = ({ feature }: IFeatureStatusCellProps) => {
const enabled = feature.isEnabled const enabled = feature.isEnabled
? true ? true
: feature.strategies.result === false : feature.strategies?.result === false
? false ? false
: 'unknown'; : 'unknown';
const label = feature.isEnabled const label = feature.isEnabled
? 'True' ? 'True'
: feature.strategies.result === false : feature.strategies?.result === false
? 'False' ? 'False'
: 'Unknown'; : 'Unknown';
return ( return (

57
frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
View File

@ -1,15 +1,14 @@
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from 'react-router-dom';
import { SortingRule, useGlobalFilter, useSortBy, useTable } from 'react-table';
import { import {
SortableTableHeader, SortingRule,
Table, useFlexLayout,
TableBody, useGlobalFilter,
TableCell, useSortBy,
TablePlaceholder, useTable,
TableRow, } from 'react-table';
} from 'component/common/Table';
import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { sortTypes } from 'utils/sortTypes'; import { sortTypes } from 'utils/sortTypes';
import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell'; import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
@ -86,7 +85,7 @@ export const PlaygroundResultsTable = ({
sortType: 'alphanumeric', sortType: 'alphanumeric',
filterName: 'variant', filterName: 'variant',
searchable: true, searchable: true,
width: 200, maxWidth: 200,
Cell: ({ Cell: ({
value, value,
row: { row: {
@ -110,10 +109,12 @@ export const PlaygroundResultsTable = ({
<FeatureStatusCell feature={row.original} /> <FeatureStatusCell feature={row.original} />
), ),
sortType: 'boolean', sortType: 'boolean',
maxWidth: 120,
sortInverted: true, sortInverted: true,
}, },
{ {
Header: '', Header: '',
maxWidth: 70,
id: 'info', id: 'info',
Cell: ({ row }: any) => ( Cell: ({ row }: any) => (
<FeatureResultInfoPopoverCell <FeatureResultInfoPopoverCell
@ -154,11 +155,9 @@ export const PlaygroundResultsTable = ({
})); }));
const { const {
getTableProps,
getTableBodyProps,
headerGroups, headerGroups,
state: { sortBy },
rows, rows,
state: { sortBy },
prepareRow, prepareRow,
setHiddenColumns, setHiddenColumns,
} = useTable( } = useTable(
@ -170,11 +169,13 @@ export const PlaygroundResultsTable = ({
autoResetGlobalFilter: false, autoResetGlobalFilter: false,
autoResetSortBy: false, autoResetSortBy: false,
disableSortRemove: true, disableSortRemove: true,
disableMultiSort: true,
defaultColumn: { defaultColumn: {
Cell: HighlightCell, Cell: HighlightCell,
}, },
}, },
useGlobalFilter, useGlobalFilter,
useFlexLayout,
useSortBy useSortBy
); );
@ -244,7 +245,6 @@ export const PlaygroundResultsTable = ({
containerStyles={{ marginLeft: '1rem', maxWidth: '400px' }} containerStyles={{ marginLeft: '1rem', maxWidth: '400px' }}
/> />
</Box> </Box>
<ConditionallyRender <ConditionallyRender
condition={!loading && !data} condition={!loading && !data}
show={() => ( show={() => (
@ -259,30 +259,11 @@ export const PlaygroundResultsTable = ({
<SearchHighlightProvider <SearchHighlightProvider
value={getSearchText(searchValue)} value={getSearchText(searchValue)}
> >
<Table {...getTableProps()} rowHeight="standard"> <VirtualizedTable
<SortableTableHeader rows={rows}
headerGroups={headerGroups as any} headerGroups={headerGroups}
/> prepareRow={prepareRow}
<TableBody {...getTableBodyProps()}> />
{rows.map(row => {
prepareRow(row);
return (
<TableRow
hover
{...row.getRowProps()}
>
{row.cells.map(cell => (
<TableCell
{...cell.getCellProps()}
>
{cell.render('Cell')}
</TableCell>
))}
</TableRow>
);
})}
</TableBody>
</Table>
</SearchHighlightProvider> </SearchHighlightProvider>
<ConditionallyRender <ConditionallyRender
condition={ condition={