Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +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';
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<{}> = () => {
})}
>
<ConditionallyRender
condition={Boolean(results)}
show={
<PlaygroundResultsTable
loading={loading}
features={results?.features}
input={results?.input}
condition={loading}
show={<Loader />}
elseShow={
<ConditionallyRender
condition={Boolean(results)}
show={
<PlaygroundResultsTable
loading={loading}
features={results?.features}
input={results?.input}
/>
}
elseShow={<PlaygroundGuidance />}
/>
}
elseShow={<PlaygroundGuidance />}
/>
</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) => {
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 (

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

@ -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 = ({
<FeatureStatusCell feature={row.original} />
),
sortType: 'boolean',
maxWidth: 120,
sortInverted: true,
},
{
Header: '',
maxWidth: 70,
id: 'info',
Cell: ({ row }: any) => (
<FeatureResultInfoPopoverCell
@ -154,11 +155,9 @@ export const PlaygroundResultsTable = ({
}));
const {
getTableProps,
getTableBodyProps,
headerGroups,
state: { sortBy },
rows,
state: { sortBy },
prepareRow,
setHiddenColumns,
} = useTable(
@ -170,11 +169,13 @@ export const PlaygroundResultsTable = ({
autoResetGlobalFilter: false,
autoResetSortBy: false,
disableSortRemove: true,
disableMultiSort: true,
defaultColumn: {
Cell: HighlightCell,
},
},
useGlobalFilter,
useFlexLayout,
useSortBy
);
@ -244,7 +245,6 @@ export const PlaygroundResultsTable = ({
containerStyles={{ marginLeft: '1rem', maxWidth: '400px' }}
/>
</Box>
<ConditionallyRender
condition={!loading && !data}
show={() => (
@ -259,30 +259,11 @@ export const PlaygroundResultsTable = ({
<SearchHighlightProvider
value={getSearchText(searchValue)}
>
<Table {...getTableProps()} rowHeight="standard">
<SortableTableHeader
headerGroups={headerGroups as any}
/>
<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>
<VirtualizedTable
rows={rows}
headerGroups={headerGroups}
prepareRow={prepareRow}
/>
</SearchHighlightProvider>
<ConditionallyRender
condition={