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

Feat/new strategies table (#1012)

Browse Source 
* fix: add flex to toolbarcontainer

* feat: add initial new table

* feat: add styled badge

* feat: remove dead code

* fix: remove useContext import

* fix: update context buttons to icon buttons

* feat: add loading

* fix: remove unused imports

* Update src/component/strategies/StrategiesList/PredefinedBadge/PredefinedBadge.tsx

Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>

* fix: update spacing to use theme

* fix: update loading

* fix: update type

Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
This commit is contained in:
Fredrik Strand Oseberg 2022-05-24 10:58:06 +02:00 committed by GitHub
parent 9463c8df90
commit 7ba9d2a577
17 changed files with 310 additions and 447 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/common/InstanceStatus/InstanceStatusBar.tsx
View File

@ -72,6 +72,7 @@ const calculateTrialDaysRemaining = (
: undefined;
};
// TODO - Cleanup to use theme instead of colors
const StyledBar = styled('aside')(({ theme }) => ({
position: 'relative',
zIndex: 1,
@ -92,6 +93,7 @@ const StyledButton = styled(Button)(({ theme }) => ({
marginLeft: theme.spacing(2),
}));
// TODO - Cleanup to use theme instead of colors
const StyledInfoIcon = styled(Info)(({ theme }) => ({
color: colors.blue[500],
}));

1
frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
View File

@ -19,6 +19,7 @@ interface IPermissionIconButtonProps {
type?: 'button';
edge?: IconButtonProps['edge'];
tooltipProps?: Omit<ITooltipResolverProps, 'children'>;
size?: string;
}
interface IButtonProps extends IPermissionIconButtonProps {

1
frontend/src/component/common/Table/cells/LinkCell/LinkCell.styles.ts
View File

@ -28,7 +28,6 @@ export const useStyles = makeStyles()(theme => ({
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
},
description: {
color: theme.palette.text.secondary,

8
frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx
View File

@ -13,7 +13,12 @@ interface ILinkCellProps {
subtitle?: string;
}
export const LinkCell: FC<ILinkCellProps> = ({ title, to, subtitle }) => {
export const LinkCell: FC<ILinkCellProps> = ({
title,
to,
subtitle,
children,
}) => {
const { classes: styles } = useStyles();
const search = useSearchHighlightContext();
@ -28,6 +33,7 @@ export const LinkCell: FC<ILinkCellProps> = ({ title, to, subtitle }) => {
}}
>
<Highlighter search={search}>{title}</Highlighter>
{children}
</span>
<ConditionallyRender
condition={Boolean(subtitle)}

45
frontend/src/component/context/ContextList/AddContextButton/AddContextButton.tsx
View File

@ -5,40 +5,37 @@ import { Add } from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import AccessContext from 'contexts/AccessContext';
import { CREATE_CONTEXT_FIELD } from 'component/providers/AccessProvider/permissions';
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
interface IAddContextButtonProps {}
export const AddContextButton: VFC<IAddContextButtonProps> = () => {
const smallScreen = useMediaQuery('(max-width:700px)');
const { hasAccess } = useContext(AccessContext);
const navigate = useNavigate();
return (
<ConditionallyRender
condition={hasAccess(CREATE_CONTEXT_FIELD)}
condition={smallScreen}
show={
<ConditionallyRender
condition={smallScreen}
show={
<Tooltip title="Add context type" arrow>
<IconButton
onClick={() => navigate('/context/create')}
size="large"
>
<Add />
</IconButton>
</Tooltip>
}
elseShow={
<Button
onClick={() => navigate('/context/create')}
color="primary"
variant="contained"
>
New context field
</Button>
}
/>
<PermissionIconButton
permission={CREATE_CONTEXT_FIELD}
onClick={() => navigate('/context/create')}
size="large"
tooltipProps={{ title: 'Add context type' }}
>
<Add />
</PermissionIconButton>
}
elseShow={
<PermissionButton
onClick={() => navigate('/context/create')}
permission={CREATE_CONTEXT_FIELD}
color="primary"
variant="contained"
>
New context field
</PermissionButton>
}
/>
);

1
frontend/src/component/context/ContextList/ContextActionsCell/ContextActionsCell.tsx
View File

@ -21,6 +21,7 @@ export const ContextActionsCell: VFC<IContextActionsCellProps> = ({
return (
<Box
data-loading
sx={{
display: 'flex',
px: 2,

16
frontend/src/component/context/ContextList/ContextList.tsx
View File

@ -1,4 +1,4 @@
import { useContext, useMemo, useState, VFC } from 'react';
import { useMemo, useState, VFC } from 'react';
import { useGlobalFilter, useSortBy, useTable } from 'react-table';
import {
Table,
@ -12,9 +12,7 @@ import {
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { UPDATE_CONTEXT_FIELD } from 'component/providers/AccessProvider/permissions';
import { Dialogue as ConfirmDialogue } from 'component/common/Dialogue/Dialogue';
import AccessContext from 'contexts/AccessContext';
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
import useContextsApi from 'hooks/api/actions/useContextsApi/useContextsApi';
import useToast from 'hooks/useToast';
@ -28,12 +26,12 @@ import { Adjust } from '@mui/icons-material';
import { Box } from '@mui/material';
const ContextList: VFC = () => {
const { hasAccess } = useContext(AccessContext);
const [showDelDialogue, setShowDelDialogue] = useState(false);
const [name, setName] = useState<string>();
const { context, refetchUnleashContext, loading } = useUnleashContext();
const { removeContext } = useContextsApi();
const { setToastData, setToastApiError } = useToast();
const data = useMemo(() => {
if (loading) {
return Array(5).fill({
@ -57,6 +55,7 @@ const ContextList: VFC = () => {
id: 'Icon',
Cell: () => (
<Box
data-loading
sx={{
pl: 2,
pr: 1,
@ -79,12 +78,8 @@ const ContextList: VFC = () => {
}: any) => (
<LinkCell
title={name}
to={
hasAccess(UPDATE_CONTEXT_FIELD)
? `/context/edit/${name}`
: undefined
}
subtitle={description}
data-loading
/>
),
sortType: 'alphanumeric',
@ -118,7 +113,7 @@ const ContextList: VFC = () => {
sortType: 'number',
},
],
[hasAccess]
[]
);
const initialState = useMemo(
@ -172,6 +167,7 @@ const ContextList: VFC = () => {
return (
<PageContent
isLoading={loading}
header={
<PageHeader
title="Context fields"

1
frontend/src/component/feature/FeatureView/FeatureView.styles.ts
View File

@ -17,6 +17,7 @@ export const useStyles = makeStyles()(theme => ({
},
toolbarContainer: {
flexShrink: 0,
display: 'flex',
},
innerContainer: {
padding: '1rem 2rem',

1
frontend/src/component/menu/routes.ts
View File

@ -1,6 +1,7 @@
import { FeatureToggleListContainer } from 'component/feature/FeatureToggleList/FeatureToggleListContainer';
import { StrategyView } from 'component/strategies/StrategyView/StrategyView';
import { StrategiesList } from 'component/strategies/StrategiesList/StrategiesList';
import { ArchiveListContainer } from 'component/archive/ArchiveListContainer';
import { TagTypeList } from 'component/tags/TagTypeList/TagTypeList';
import { AddonList } from 'component/addons/AddonList/AddonList';

40
frontend/src/component/strategies/StrategiesList/AddStrategyButton/AddStrategyButton.tsx Normal file
View File

@ -0,0 +1,40 @@
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import { useMediaQuery } from '@mui/material';
import { CREATE_STRATEGY } from 'component/providers/AccessProvider/permissions';
import { ADD_NEW_STRATEGY_ID } from 'utils/testIds';
import { Add } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
export const AddStrategyButton = () => {
const smallScreen = useMediaQuery('(max-width:700px)');
const navigate = useNavigate();
return (
<ConditionallyRender
condition={smallScreen}
show={
<PermissionIconButton
data-testid={ADD_NEW_STRATEGY_ID}
onClick={() => navigate('/strategies/create')}
permission={CREATE_STRATEGY}
size="large"
tooltipProps={{ title: 'New strategy' }}
>
<Add />
</PermissionIconButton>
}
elseShow={
<PermissionButton
onClick={() => navigate('/strategies/create')}
color="primary"
permission={CREATE_STRATEGY}
data-testid={ADD_NEW_STRATEGY_ID}
>
New strategy
</PermissionButton>
}
/>
);
};

15
frontend/src/component/strategies/StrategiesList/PredefinedBadge/PredefinedBadge.tsx Normal file
View File

@ -0,0 +1,15 @@
import { styled } from '@mui/material';
export const PredefinedBadge = () => {
return <StyledBadge>Predefined</StyledBadge>;
};
const StyledBadge = styled('div')(({ theme }) => ({
padding: theme.spacing(0.3, 1.25),
backgroundColor: theme.palette.predefinedBadgeColor,
textDecoration: 'none',
color: theme.palette.text.primary,
display: 'inline-block',
borderRadius: theme.shape.borderRadius,
marginLeft: theme.spacing(1.5),
}));

14
frontend/src/component/strategies/StrategiesList/StrategiesList.styles.ts
View File

@ -1,14 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
listItem: {
padding: '0',
['& a']: {
textDecoration: 'none',
color: 'inherit',
},
'&:hover': {
backgroundColor: theme.palette.grey[200],
},
},
}));

28
frontend/src/component/strategies/StrategiesList/StrategiesList.test.tsx
View File

@ -1,28 +0,0 @@
import { MemoryRouter } from 'react-router-dom';
import { StrategiesList } from './StrategiesList';
import renderer from 'react-test-renderer';
import { ADMIN } from 'component/providers/AccessProvider/permissions';
import UIProvider from 'component/providers/UIProvider/UIProvider';
import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider';
import { ThemeProvider } from 'themes/ThemeProvider';
import { AccessProviderMock } from 'component/providers/AccessProvider/AccessProviderMock';
test('renders correctly', () => {
const tree = renderer.create(
<MemoryRouter>
<ThemeProvider>
<AnnouncerProvider>
<UIProvider>
<AccessProviderMock
permissions={[{ permission: ADMIN }]}
>
<StrategiesList />
</AccessProviderMock>
</UIProvider>
</AnnouncerProvider>
</ThemeProvider>
</MemoryRouter>
);
expect(tree).toMatchSnapshot();
});

308
frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
View File

@ -1,16 +1,7 @@
import { useContext, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useState, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { IconButton, Tooltip, Box } from '@mui/material';
import {
IconButton,
List,
ListItem,
ListItemAvatar,
ListItemText,
Tooltip,
} from '@mui/material';
import {
Add,
Delete,
Edit,
Extension,
@ -18,26 +9,35 @@ import {
VisibilityOff,
} from '@mui/icons-material';
import {
CREATE_STRATEGY,
DELETE_STRATEGY,
UPDATE_STRATEGY,
} from 'component/providers/AccessProvider/permissions';
import {
Table,
SortableTableHeader,
TableBody,
TableCell,
TableRow,
TablePlaceholder,
TableSearch,
} from 'component/common/Table';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { useStyles } from './StrategiesList.styles';
import AccessContext from 'contexts/AccessContext';
import { Dialogue } from 'component/common/Dialogue/Dialogue';
import { ADD_NEW_STRATEGY_ID } from 'utils/testIds';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import { formatStrategyName } from 'utils/strategyNames';
import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
import useStrategiesApi from 'hooks/api/actions/useStrategiesApi/useStrategiesApi';
import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
import { IStrategy } from 'interfaces/strategy';
import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { sortTypes } from 'utils/sortTypes';
import { useTable, useGlobalFilter, useSortBy } from 'react-table';
import { AddStrategyButton } from './AddStrategyButton/AddStrategyButton';
import { PredefinedBadge } from './PredefinedBadge/PredefinedBadge';
interface IDialogueMetaData {
show: boolean;
title: string;
@ -46,9 +46,6 @@ interface IDialogueMetaData {
export const StrategiesList = () => {
const navigate = useNavigate();
const { classes: styles } = useStyles();
const smallScreen = useMediaQuery('(max-width:700px)');
const { hasAccess } = useContext(AccessContext);
const [dialogueMetaData, setDialogueMetaData] = useState<IDialogueMetaData>(
{
show: false,
@ -56,50 +53,137 @@ export const StrategiesList = () => {
onConfirm: () => {},
}
);
const { strategies, refetchStrategies } = useStrategies();
const { strategies, refetchStrategies, loading } = useStrategies();
const { removeStrategy, deprecateStrategy, reactivateStrategy } =
useStrategiesApi();
const { setToastData, setToastApiError } = useToast();
const headerButton = () => (
<ConditionallyRender
condition={hasAccess(CREATE_STRATEGY)}
show={
<ConditionallyRender
condition={smallScreen}
show={
<PermissionIconButton
data-testid={ADD_NEW_STRATEGY_ID}
onClick={() => navigate('/strategies/create')}
permission={CREATE_STRATEGY}
tooltipProps={{ title: 'New strategy' }}
const data = useMemo(() => {
if (loading) {
return Array(5).fill({
name: 'Context name',
description: 'Context description when loading',
});
}
return strategies.map(
({ name, description, editable, deprecated }) => ({
name,
description,
editable,
deprecated,
})
);
}, [strategies, loading]);
const columns = useMemo(
() => [
{
id: 'Icon',
Cell: () => (
<Box
data-loading
sx={{
pl: 2,
pr: 1,
display: 'flex',
alignItems: 'center',
}}
>
<Extension color="disabled" />
</Box>
),
},
{
Header: 'Name',
accessor: 'name',
width: '90%',
Cell: ({
row: {
original: { name, description, deprecated, editable },
},
}: any) => {
const subTitleText = deprecated
? `${description} (deprecated)`
: description;
return (
<LinkCell
data-loading
title={formatStrategyName(name)}
subtitle={subTitleText}
to={`/strategies/${name}`}
>
<Add />
</PermissionIconButton>
}
elseShow={
<PermissionButton
onClick={() => navigate('/strategies/create')}
color="primary"
permission={CREATE_STRATEGY}
data-testid={ADD_NEW_STRATEGY_ID}
>
New strategy
</PermissionButton>
}
/>
}
/>
<ConditionallyRender
condition={!editable}
show={() => <PredefinedBadge />}
/>
</LinkCell>
);
},
sortType: 'alphanumeric',
},
{
Header: 'Actions',
id: 'Actions',
align: 'center',
Cell: ({ row: { original } }: any) => (
<Box
sx={{ display: 'flex', justifyContent: 'flex-end' }}
data-loading
>
<ConditionallyRender
condition={original.deprecated}
show={reactivateButton(original)}
elseShow={deprecateButton(original)}
/>
{editButton(original)}
{deleteButton(original)}
</Box>
),
width: 150,
disableSortBy: true,
},
{
accessor: 'description',
disableSortBy: true,
},
{
accessor: 'sortOrder',
sortType: 'number',
},
],
[]
);
const strategyLink = (name: string, deprecated: boolean) => (
<Link to={`/strategies/${name}`}>
<strong>{formatStrategyName(name)}</strong>
<ConditionallyRender
condition={deprecated}
show={<small> (Deprecated)</small>}
/>
</Link>
const initialState = useMemo(
() => ({
sortBy: [{ id: 'name', desc: false }],
hiddenColumns: ['description', 'sortOrder'],
}),
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state: { globalFilter },
setGlobalFilter,
} = useTable(
{
columns: columns as any[], // TODO: fix after `react-table` v8 update
data,
initialState,
sortTypes,
autoResetGlobalFilter: false,
autoResetSortBy: false,
disableSortRemove: true,
},
useGlobalFilter,
useSortBy
);
const onReactivateStrategy = (strategy: IStrategy) => {
@ -176,10 +260,7 @@ export const StrategiesList = () => {
<ConditionallyRender
condition={strategy.name === 'default'}
show={
<Tooltip
title="You cannot deprecate the default strategy"
arrow
>
<Tooltip title="You cannot deprecate the default strategy">
<div>
<IconButton disabled size="large">
<Visibility titleAccess="Deprecate strategy" />
@ -216,7 +297,7 @@ export const StrategiesList = () => {
</PermissionIconButton>
}
elseShow={
<Tooltip title="You cannot delete a built-in strategy" arrow>
<Tooltip title="You cannot edit a built-in strategy" arrow>
<div>
<IconButton disabled size="large">
<Edit titleAccess="Edit strategy" />
@ -251,56 +332,85 @@ export const StrategiesList = () => {
/>
);
const strategyList = () =>
strategies.map(strategy => (
<ListItem key={strategy.name} className={styles.listItem}>
<ListItemAvatar>
<Extension color="disabled" />
</ListItemAvatar>
<ListItemText
primary={strategyLink(strategy?.name, strategy?.deprecated)}
secondary={strategy.description}
/>
<ConditionallyRender
condition={strategy.deprecated}
show={reactivateButton(strategy)}
elseShow={deprecateButton(strategy)}
/>
<ConditionallyRender
condition={hasAccess(UPDATE_STRATEGY)}
show={editButton(strategy)}
/>
<ConditionallyRender
condition={hasAccess(DELETE_STRATEGY)}
show={deleteButton(strategy)}
/>
</ListItem>
));
const onDialogConfirm = () => {
dialogueMetaData?.onConfirm();
setDialogueMetaData(prev => ({ ...prev, show: false }));
setDialogueMetaData((prev: IDialogueMetaData) => ({
...prev,
show: false,
}));
};
return (
<PageContent
header={<PageHeader title="Strategies" actions={headerButton()} />}
isLoading={loading}
header={
<PageHeader
title="Strategies"
actions={
<>
<TableSearch
initialValue={globalFilter}
onChange={setGlobalFilter}
/>
<PageHeader.Divider />
<AddStrategyButton />
</>
}
/>
}
>
<SearchHighlightProvider value={globalFilter}>
<Table {...getTableProps()}>
<SortableTableHeader headerGroups={headerGroups} />
<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>
<ConditionallyRender
condition={rows.length === 0}
show={
<ConditionallyRender
condition={globalFilter?.length > 0}
show={
<TablePlaceholder>
No strategies found matching &ldquo;
{globalFilter}
&rdquo;
</TablePlaceholder>
}
elseShow={
<TablePlaceholder>
No strategies available. Get started by adding
one.
</TablePlaceholder>
}
/>
}
/>
<Dialogue
open={dialogueMetaData.show}
onClick={onDialogConfirm}
title={dialogueMetaData?.title}
onClose={() =>
setDialogueMetaData(prev => ({ ...prev, show: false }))
setDialogueMetaData((prev: IDialogueMetaData) => ({
...prev,
show: false,
}))
}
/>
<List>
<ConditionallyRender
condition={strategies.length > 0}
show={<>{strategyList()}</>}
elseShow={<ListItem>No strategies found</ListItem>}
/>
</List>
</PageContent>
);
};

270
frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap
View File

@ -1,270 +0,0 @@
// Vitest Snapshot v1
exports[`renders correctly 1`] = `
[
<div>
<div
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15wj2kz-container mui-177gdp-MuiPaper-root"
>
<div
className="tss-1ywhhai-headerContainer"
>
<div
className="tss-1ylehva-headerContainer"
>
<div
className="tss-1uxyh7x-topContainer"
>
<div
className="tss-sd6bs4-header"
data-loading={true}
>
<h1
className="MuiTypography-root MuiTypography-h1 tss-7lbvh4-headerTitle mui-ylrecv-MuiTypography-root"
>
Strategies
</h1>
</div>
<div
className="tss-u5t8ea-headerActions"
>
<span
id="useId-0"
>
<button
aria-describedby="useId-0"
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
data-testid="ADD_NEW_STRATEGY_ID"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
New strategy
<span
className="MuiButton-endIcon MuiButton-iconSizeMedium mui-9tj150-MuiButton-endIcon"
/>
<span
className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
/>
</button>
</span>
</div>
</div>
</div>
</div>
<div
className="tss-54jt3w-bodyContainer"
>
<ul
className="MuiList-root MuiList-padding mui-h4y409-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-gutters MuiListItem-padding tss-ynyzms-listItem mui-vlytkl-MuiListItem-root"
disabled={false}
>
<div
className="MuiListItemAvatar-root mui-1e9lk82-MuiListItemAvatar-root"
>
<svg
aria-hidden={true}
className="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeMedium mui-1db085k-MuiSvgIcon-root"
data-testid="ExtensionIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
/>
</svg>
</div>
<div
className="MuiListItemText-root MuiListItemText-multiline mui-konndc-MuiListItemText-root"
>
<span
className="MuiTypography-root MuiTypography-body1 MuiListItemText-primary mui-1k7ov6f-MuiTypography-root"
>
<a
href="/strategies/flexibleRollout"
onClick={[Function]}
>
<strong>
Gradual rollout
</strong>
</a>
</span>
<p
className="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary mui-of6c4k-MuiTypography-root"
>
Roll out to a percentage of your userbase, and ensure that the experience is the same for the user on each visit.
</p>
</div>
<div>
<div
aria-label="Deprecate strategy"
aria-labelledby={null}
className=""
data-mui-internal-clone-element={true}
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
onTouchStart={[Function]}
>
<button
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
<svg
aria-hidden={true}
className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
data-testid="VisibilityIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
/>
</svg>
<span
className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
<div
aria-label="You cannot delete a built-in strategy"
aria-labelledby={null}
className=""
data-mui-internal-clone-element={true}
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
onTouchStart={[Function]}
>
<button
className="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
disabled={true}
onBlur={[Function]}
onContextMenu={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={-1}
type="button"
>
<svg
className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
data-testid="EditIcon"
focusable="false"
role="img"
viewBox="0 0 24 24"
>
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
<title>
Edit strategy
</title>
</svg>
</button>
</div>
<div
aria-label="You cannot delete a built-in strategy"
aria-labelledby={null}
className=""
data-mui-internal-clone-element={true}
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
onTouchStart={[Function]}
>
<button
className="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
disabled={true}
onBlur={[Function]}
onContextMenu={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={-1}
type="button"
>
<svg
className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
data-testid="DeleteIcon"
focusable="false"
role="img"
viewBox="0 0 24 24"
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
<title>
Delete strategy
</title>
</svg>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>,
<div
aria-atomic={true}
aria-live="polite"
className="tss-i8rqz1-container"
data-testid="ANNOUNCER_ELEMENT_TEST_ID"
role="status"
>
Navigated to Strategies
</div>,
]
`;

1
frontend/src/themes/theme.ts
View File

@ -81,6 +81,7 @@ export default createTheme({
highlight: '#FFEACC',
sidebarContainer: 'rgba(32,32,33, 0.2)',
grey: colors.grey,
predefinedBadgeColor: colors.green[100],
text: {
primary: colors.grey[900],
secondary: colors.grey[800],

5
frontend/src/themes/themeTypes.ts
View File

@ -49,6 +49,11 @@ declare module '@mui/material/styles' {
abandoned: string;
};
dividerAlternative: string;
/**
* Color for predefined badge
*/
predefinedBadgeColor: string;
/**
* For table header hover effect.
*/