feat: new contexts table (#998)

* feat: new contexts table * improve context list actions * refactor: disabled icon colors * fix: update snapshots * fix: icons * fix: context fields typo
2025-01-25 00:07:47 +01:00 · 2022-05-20 10:29:23 +02:00 · 2022-05-20 10:29:23 +02:00 · 6d130f61f6
commit 6d130f61f6
parent c28cdab6e8
34 changed files with 462 additions and 272 deletions
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.styles.ts
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.styles.ts
@ -10,9 +10,6 @@ export const useStyles = makeStyles()(theme => ({
        textAlign: 'left',
        maxWidth: '300px',
    },
-    icon: {
-        color: theme.palette.grey[600],
-    },
    description: {
        textAlign: 'left',
        maxWidth: '300px',
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
@ -2,7 +2,7 @@ import { useStyles } from './ProjectRoleListItem.styles';
 import { TableCell, TableRow, Typography } from '@mui/material';
 import { Delete, Edit } from '@mui/icons-material';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
-import SupervisedUserCircleIcon from '@mui/icons-material/SupervisedUserCircle';
+import { SupervisedUserCircle } from '@mui/icons-material';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { IProjectRole } from 'interfaces/role';
 import { useNavigate } from 'react-router-dom';
@ -34,7 +34,7 @@ const RoleListItem = ({
        <>
            <TableRow className={styles.tableRow}>
                <TableCell className={styles.hideXS}>
-                    <SupervisedUserCircleIcon className={styles.icon} />
+                    <SupervisedUserCircle color="disabled" />
                </TableCell>
                <TableCell className={styles.leftTableCell}>
                    <Typography variant="body2" data-loading>
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
@ -154,7 +154,7 @@ export const useStyles = makeStyles()(theme => ({
        height: '32.5px',
        width: '32.5px',
        marginRight: '0.5rem',
-        fill: theme.palette.grey[600],
+        fill: theme.palette.inactiveIcon,
    },
    singleValueView: {
        display: 'flex',
--- a/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx
+++ b/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx
@ -14,7 +14,7 @@ const EnvironmentIcon = ({ enabled, className }: IEnvironmentIcon) => {
    const container = {
        backgroundColor: enabled
            ? theme.palette.primary.light
-            : theme.palette.grey[600],
+            : theme.palette.inactiveIcon,
        borderRadius: '50%',
        width: '28px',
        height: '28px',
--- a/frontend/src/component/common/HelpIcon/HelpIcon.styles.ts
+++ b/frontend/src/component/common/HelpIcon/HelpIcon.styles.ts
@ -17,6 +17,6 @@ export const useStyles = makeStyles()(theme => ({
    },
    icon: {
        fontSize: '1rem',
-        color: theme.palette.grey[600],
+        color: theme.palette.inactiveIcon,
    },
 }));
--- a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
+++ b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
@ -55,9 +55,11 @@ const PermissionIconButton = ({
            title={formatAccessText(access, tooltipProps?.title)}
            arrow
        >
-            <IconButton {...rest} disabled={!access} size="large">
-                {children}
-            </IconButton>
+            <div>
+                <IconButton {...rest} disabled={!access} size="large">
+                    {children}
+                </IconButton>
+            </div>
        </TooltipResolver>
    );
 };
--- a/frontend/src/component/common/SearchField/styles.ts
+++ b/frontend/src/component/common/SearchField/styles.ts
@ -20,7 +20,7 @@ export const useStyles = makeStyles()(theme => ({
    },
    searchIcon: {
        marginRight: 8,
-        color: theme.palette.grey[600],
+        color: theme.palette.inactiveIcon,
    },
    inputRoot: {
        width: '100%',
--- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts
+++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts
@ -55,4 +55,16 @@ export const useStyles = makeStyles()(theme => ({
            overflow: 'hidden',
        },
    },
+    alignLeft: {
+        justifyContent: 'flex-start',
+        textAlign: 'left',
+    },
+    alignRight: {
+        justifyContent: 'flex-end',
+        textAlign: 'right',
+    },
+    alignCenter: {
+        justifyContent: 'center',
+        textAlign: 'center',
+    },
 }));
--- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
+++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
@ -58,18 +58,18 @@ export const CellSortable: FC<ICellSortableProps> = ({
        );
    };

-    const justifyContent = useMemo(() => {
+    const alignClass = useMemo(() => {
        switch (align) {
            case 'left':
-                return 'flex-start';
+                return styles.alignLeft;
            case 'center':
-                return 'center';
+                return styles.alignCenter;
            case 'right':
-                return 'flex-end';
+                return styles.alignRight;
            default:
                return undefined;
        }
-    }, [align]);
+    }, [align, styles]);

    useEffect(() => {
        const updateTitle = () => {
@ -102,10 +102,10 @@ export const CellSortable: FC<ICellSortableProps> = ({
                        <button
                            className={classnames(
                                isSorted && styles.sortedButton,
-                                styles.sortButton
+                                styles.sortButton,
+                                alignClass
                            )}
                            onClick={onSortClick}
-                            style={{ justifyContent }}
                        >
                            <span
                                className={styles.label}
@ -122,7 +122,7 @@ export const CellSortable: FC<ICellSortableProps> = ({
                        </button>
                    </Tooltip>
                }
-                elseShow={children}
+                elseShow={<div className={alignClass}>{children}</div>}
            />
        </TableCell>
    );
--- a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
+++ b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
@ -28,7 +28,9 @@ export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
                        return (
                            <CellSortable
                                {...column.getHeaderProps(
-                                    column.getSortByToggleProps()
+                                    column.canSort
+                                        ? column.getSortByToggleProps()
+                                        : undefined
                                )}
                                ariaTitle={
                                    typeof content === 'string'
--- a/frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.styles.ts
+++ b/frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.styles.ts
@ -25,7 +25,7 @@ export const useStyles = makeStyles()(theme => ({
    },
    searchIcon: {
        marginRight: 8,
-        color: theme.palette.grey[600],
+        color: theme.palette.inactiveIcon,
    },
    clearContainer: {
        width: '30px',
@ -34,8 +34,6 @@ export const useStyles = makeStyles()(theme => ({
        },
    },
    clearIcon: {
-        // color: theme.palette.grey[700],
-        color: 'red',
        fontSize: '18px',
    },
    inputRoot: {
--- a/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchField.styles.ts
+++ b/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchField.styles.ts
@ -25,7 +25,7 @@ export const useStyles = makeStyles()(theme => ({
    },
    searchIcon: {
        marginRight: 8,
-        color: theme.palette.grey[600],
+        color: theme.palette.inactiveIcon,
    },
    clearContainer: {
        width: '30px',
--- a/frontend/src/component/common/Table/cells/FeatureLinkCell/FeatureLinkCell.tsx
+++ b/frontend/src/component/common/Table/cells/FeatureLinkCell/FeatureLinkCell.tsx
@ -1,60 +0,0 @@
-import { FC } from 'react';
-import { Link, Typography } from '@mui/material';
-import { Link as RouterLink } from 'react-router-dom';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { useStyles } from './FeatureLinkCell.styles';
-import { Highlighter } from 'component/common/Highlighter/Highlighter';
-import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
-
-interface IFeatureLinkCellProps {
-    title?: string;
-    to: string;
-    subtitle?: string;
-}
-
-export const FeatureLinkCell: FC<IFeatureLinkCellProps> = ({
-    title,
-    to,
-    subtitle,
-}) => {
-    const { classes: styles } = useStyles();
-    const search = useSearchHighlightContext();
-
-    return (
-        <Link
-            component={RouterLink}
-            to={to}
-            underline="hover"
-            className={styles.wrapper}
-        >
-            <div className={styles.container}>
-                <span
-                    data-loading
-                    className={styles.title}
-                    style={{
-                        WebkitLineClamp: Boolean(subtitle) ? 1 : 2,
-                        lineClamp: Boolean(subtitle) ? 1 : 2,
-                    }}
-                >
-                    <Highlighter search={search}>{title}</Highlighter>
-                </span>
-                <ConditionallyRender
-                    condition={Boolean(subtitle)}
-                    show={
-                        <>
-                            <Typography
-                                className={styles.description}
-                                component="span"
-                                data-loading
-                            >
-                                <Highlighter search={search}>
-                                    {subtitle}
-                                </Highlighter>
-                            </Typography>
-                        </>
-                    }
-                />
-            </div>
-        </Link>
-    );
-};
--- a/frontend/src/component/common/Table/cells/FeatureTypeCell/FeatureTypeCell.styles.ts
+++ b/frontend/src/component/common/Table/cells/FeatureTypeCell/FeatureTypeCell.styles.ts
@ -8,6 +8,6 @@ export const useStyles = makeStyles()(theme => ({
        alignItems: 'center',
    },
    icon: {
-        color: theme.palette.grey[600],
+        color: theme.palette.inactiveIcon,
    },
 }));
--- a/frontend/src/component/common/Table/cells/FeatureLinkCell/FeatureLinkCell.styles.ts
+++ b/frontend/src/component/common/Table/cells/FeatureLinkCell/FeatureLinkCell.styles.ts
@ -9,6 +9,8 @@ export const useStyles = makeStyles()(theme => ({
        display: 'flex',
        alignItems: 'center',
        minHeight: '62px',
+    },
+    link: {
        '&:hover, &:focus': {
            textDecoration: 'none',
            '& > div > span:first-of-type': {
--- a/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx
+++ b/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx
@ -0,0 +1,63 @@
+import { FC } from 'react';
+import { Link, Typography } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { useStyles } from './LinkCell.styles';
+import { Highlighter } from 'component/common/Highlighter/Highlighter';
+import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
+import classnames from 'classnames';
+
+interface ILinkCellProps {
+    title?: string;
+    to?: string;
+    subtitle?: string;
+}
+
+export const LinkCell: FC<ILinkCellProps> = ({ title, to, subtitle }) => {
+    const { classes: styles } = useStyles();
+    const search = useSearchHighlightContext();
+
+    const content = (
+        <div className={styles.container}>
+            <span
+                data-loading
+                className={styles.title}
+                style={{
+                    WebkitLineClamp: Boolean(subtitle) ? 1 : 2,
+                    lineClamp: Boolean(subtitle) ? 1 : 2,
+                }}
+            >
+                <Highlighter search={search}>{title}</Highlighter>
+            </span>
+            <ConditionallyRender
+                condition={Boolean(subtitle)}
+                show={
+                    <>
+                        <Typography
+                            className={styles.description}
+                            component="span"
+                            data-loading
+                        >
+                            <Highlighter search={search}>
+                                {subtitle}
+                            </Highlighter>
+                        </Typography>
+                    </>
+                }
+            />
+        </div>
+    );
+
+    return to ? (
+        <Link
+            component={RouterLink}
+            to={to}
+            underline="hover"
+            className={classnames(styles.wrapper, styles.link)}
+        >
+            {content}
+        </Link>
+    ) : (
+        <span className={styles.wrapper}>{content}</span>
+    );
+};
--- a/frontend/src/component/context/ContextList/AddContextButton/AddContextButton.tsx
+++ b/frontend/src/component/context/ContextList/AddContextButton/AddContextButton.tsx
@ -0,0 +1,45 @@
+import { useContext, VFC } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button, IconButton, Tooltip, useMediaQuery } from '@mui/material';
+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';
+
+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)}
+            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>
+                    }
+                />
+            }
+        />
+    );
+};
--- a/frontend/src/component/context/ContextList/ContextActionsCell/ContextActionsCell.tsx
+++ b/frontend/src/component/context/ContextList/ContextActionsCell/ContextActionsCell.tsx
@ -0,0 +1,54 @@
+import { VFC } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Delete, Edit } from '@mui/icons-material';
+import { Box } from '@mui/material';
+import {
+    DELETE_CONTEXT_FIELD,
+    UPDATE_CONTEXT_FIELD,
+} from 'component/providers/AccessProvider/permissions';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
+
+interface IContextActionsCellProps {
+    name: string;
+    onDelete: () => void;
+}
+
+export const ContextActionsCell: VFC<IContextActionsCellProps> = ({
+    name,
+    onDelete,
+}) => {
+    const navigate = useNavigate();
+
+    return (
+        <Box
+            sx={{
+                display: 'flex',
+                px: 2,
+                justifyContent: 'flex-end',
+            }}
+        >
+            <PermissionIconButton
+                permission={UPDATE_CONTEXT_FIELD}
+                onClick={() => navigate(`/context/edit/${name}`)}
+                data-loading
+                aria-label="edit"
+                tooltipProps={{
+                    title: 'Edit context field',
+                }}
+            >
+                <Edit />
+            </PermissionIconButton>
+            <PermissionIconButton
+                permission={DELETE_CONTEXT_FIELD}
+                onClick={onDelete}
+                data-loading
+                aria-label="delete"
+                tooltipProps={{
+                    title: 'Delete context field',
+                }}
+            >
+                <Delete />
+            </PermissionIconButton>
+        </Box>
+    );
+};
--- a/frontend/src/component/context/ContextList/ContextList.tsx
+++ b/frontend/src/component/context/ContextList/ContextList.tsx
@ -1,42 +1,133 @@
-import { useContext, useState, VFC } from 'react';
-import { Add, Album, Delete, Edit } from '@mui/icons-material';
-import { Link, useNavigate } from 'react-router-dom';
+import { useContext, useMemo, useState, VFC } from 'react';
+import { useGlobalFilter, useSortBy, useTable } from 'react-table';
 import {
-    Button,
-    IconButton,
-    List,
-    ListItem,
-    ListItemIcon,
-    ListItemText,
-    Tooltip,
-    useMediaQuery,
-} from '@mui/material';
+    Table,
+    SortableTableHeader,
+    TableBody,
+    TableCell,
+    TableRow,
+    TablePlaceholder,
+    TableSearch,
+} from 'component/common/Table';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import {
-    CREATE_CONTEXT_FIELD,
-    DELETE_CONTEXT_FIELD,
-    UPDATE_CONTEXT_FIELD,
-} from 'component/providers/AccessProvider/permissions';
+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';
 import { formatUnknownError } from 'utils/formatUnknownError';
-import { useStyles } from './styles';
+import { AddContextButton } from './AddContextButton/AddContextButton';
+import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
+import { sortTypes } from 'utils/sortTypes';
+import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
+import { ContextActionsCell } from './ContextActionsCell/ContextActionsCell';
+import { Adjust } from '@mui/icons-material';
+import { Box } from '@mui/material';

 const ContextList: VFC = () => {
    const { hasAccess } = useContext(AccessContext);
    const [showDelDialogue, setShowDelDialogue] = useState(false);
-    const smallScreen = useMediaQuery('(max-width:700px)');
    const [name, setName] = useState<string>();
-    const { context, refetchUnleashContext } = useUnleashContext();
+    const { context, refetchUnleashContext, loading } = useUnleashContext();
    const { removeContext } = useContextsApi();
    const { setToastData, setToastApiError } = useToast();
-    const navigate = useNavigate();
-    const { classes: styles } = useStyles();
+    const data = useMemo(() => {
+        if (loading) {
+            return Array(5).fill({
+                name: 'Context name',
+                description: 'Context description when loading',
+            });
+        }
+
+        return context
+            .map(({ name, description, sortOrder }) => ({
+                name,
+                description,
+                sortOrder,
+            }))
+            .sort((a, b) => a.sortOrder - b.sortOrder);
+    }, [context, loading]);
+
+    const columns = useMemo(
+        () => [
+            {
+                id: 'Icon',
+                Cell: () => (
+                    <Box
+                        sx={{
+                            pl: 2,
+                            pr: 1,
+                            display: 'flex',
+                            alignItems: 'center',
+                        }}
+                    >
+                        <Adjust color="disabled" />
+                    </Box>
+                ),
+            },
+            {
+                Header: 'Name',
+                accessor: 'name',
+                width: '90%',
+                Cell: ({
+                    row: {
+                        original: { name, description },
+                    },
+                }: any) => (
+                    <LinkCell
+                        title={name}
+                        to={
+                            hasAccess(UPDATE_CONTEXT_FIELD)
+                                ? `/context/edit/${name}`
+                                : undefined
+                        }
+                        subtitle={description}
+                    />
+                ),
+                sortType: 'alphanumeric',
+            },
+            {
+                Header: 'Actions',
+                id: 'Actions',
+                align: 'center',
+                Cell: ({
+                    row: {
+                        original: { name },
+                    },
+                }: any) => (
+                    <ContextActionsCell
+                        name={name}
+                        onDelete={() => {
+                            setName(name);
+                            setShowDelDialogue(true);
+                        }}
+                    />
+                ),
+                width: 150,
+                disableSortBy: true,
+            },
+            {
+                accessor: 'description',
+                disableSortBy: true,
+            },
+            {
+                accessor: 'sortOrder',
+                sortType: 'number',
+            },
+        ],
+        [hasAccess]
+    );
+
+    const initialState = useMemo(
+        () => ({
+            sortBy: [{ id: 'name', desc: false }],
+            hiddenColumns: ['description', 'sortOrder'],
+        }),
+        []
+    );

    const onDeleteContext = async () => {
        try {
@ -57,103 +148,86 @@ const ContextList: VFC = () => {
        setShowDelDialogue(false);
    };

-    const contextList = () =>
-        context.map(field => (
-            <ListItem key={field.name} classes={{ root: styles.listItem }}>
-                <ListItemIcon>
-                    <Album />
-                </ListItemIcon>
-                <ListItemText
-                    primary={
-                        <ConditionallyRender
-                            condition={hasAccess(UPDATE_CONTEXT_FIELD)}
-                            show={
-                                <Link to={`/context/edit/${field.name}`}>
-                                    <strong>{field.name}</strong>
-                                </Link>
-                            }
-                            elseShow={<strong>{field.name}</strong>}
-                        />
-                    }
-                    secondary={field.description}
-                />
-                <ConditionallyRender
-                    condition={hasAccess(UPDATE_CONTEXT_FIELD)}
-                    show={
-                        <Tooltip title="Edit context field" arrow>
-                            <IconButton
-                                onClick={() =>
-                                    navigate(`/context/edit/${field.name}`)
-                                }
-                                size="large"
-                            >
-                                <Edit />
-                            </IconButton>
-                        </Tooltip>
-                    }
-                />
-                <ConditionallyRender
-                    condition={hasAccess(DELETE_CONTEXT_FIELD)}
-                    show={
-                        <Tooltip title="Delete context field" arrow>
-                            <IconButton
-                                aria-label="delete"
-                                onClick={() => {
-                                    setName(field.name);
-                                    setShowDelDialogue(true);
-                                }}
-                                size="large"
-                            >
-                                <Delete />
-                            </IconButton>
-                        </Tooltip>
-                    }
-                />
-            </ListItem>
-        ));
-    const headerButton = () => (
-        <ConditionallyRender
-            condition={hasAccess(CREATE_CONTEXT_FIELD)}
-            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>
-                    }
-                />
-            }
-        />
+    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
    );

    return (
        <PageContent
            header={
-                <PageHeader actions={headerButton()} title={'Context fields'} />
+                <PageHeader
+                    title="Context fields"
+                    actions={
+                        <>
+                            <TableSearch
+                                initialValue={globalFilter}
+                                onChange={setGlobalFilter}
+                            />
+                            <PageHeader.Divider />
+                            <AddContextButton />
+                        </>
+                    }
+                />
            }
        >
-            <List>
-                <ConditionallyRender
-                    condition={context.length > 0}
-                    show={contextList}
-                    elseShow={<ListItem>No context fields defined</ListItem>}
-                />
-            </List>
+            <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 contexts found matching &ldquo;
+                                {globalFilter}
+                                &rdquo;
+                            </TablePlaceholder>
+                        }
+                        elseShow={
+                            <TablePlaceholder>
+                                No contexts available. Get started by adding
+                                one.
+                            </TablePlaceholder>
+                        }
+                    />
+                }
+            />
            <ConfirmDialogue
                open={showDelDialogue}
                onClick={onDeleteContext}
--- a/frontend/src/component/context/ContextList/styles.ts
+++ b/frontend/src/component/context/ContextList/styles.ts
@ -1,11 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()({
-    listItem: {
-        padding: 0,
-        '& a': {
-            textDecoration: 'none',
-            color: 'inherit',
-        },
-    },
-});
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentCard/EnvironmentCard.styles.ts
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentCard/EnvironmentCard.styles.ts
@ -11,7 +11,7 @@ export const useStyles = makeStyles()(theme => ({
        minWidth: '450px',
    },
    icon: {
-        fill: theme.palette.grey[600],
+        fill: theme.palette.inactiveIcon,
        marginRight: '0.5rem',
    },
    header: {
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureToggleListTable.tsx
@ -13,7 +13,7 @@ import {
 } from 'component/common/Table';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { DateCell } from '../../../common/Table/cells/DateCell/DateCell';
-import { FeatureLinkCell } from 'component/common/Table/cells/FeatureLinkCell/FeatureLinkCell';
+import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
 import { FeatureSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureSeenCell';
 import { FeatureTypeCell } from 'component/common/Table/cells/FeatureTypeCell/FeatureTypeCell';
 import { FeatureStaleCell } from './FeatureStaleCell/FeatureStaleCell';
@ -53,7 +53,7 @@ const columns = [
                original: { name, description, project },
            },
        }) => (
-            <FeatureLinkCell
+            <LinkCell
                title={name}
                subtitle={description}
                to={`/projects/${project}/features/${name}`}
@ -71,7 +71,7 @@ const columns = [
        Header: 'Project ID',
        accessor: 'project',
        Cell: ({ value }: { value: string }) => (
-            <FeatureLinkCell title={value} to={`/projects/${value}`} />
+            <LinkCell title={value} to={`/projects/${value}`} />
        ),
        sortType: 'alphanumeric',
    },
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts
@ -116,7 +116,7 @@ export const useStyles = makeStyles()(theme => ({
        },
    },
    strategyIcon: {
-        fill: theme.palette.grey[600],
+        fill: theme.palette.inactiveIcon,
    },
    container: {
        display: 'flex',
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.styles.ts
@ -16,7 +16,7 @@ export const useStyles = makeStyles()(theme => ({
        borderBottom: `1px solid ${theme.palette.grey[300]}`,
    },
    icon: {
-        fill: theme.palette.grey[600],
+        fill: theme.palette.inactiveIcon,
    },
    actions: {
        marginLeft: 'auto',
--- a/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.styles.ts
@ -2,6 +2,6 @@ import { makeStyles } from 'tss-react/mui';

 export const useStyles = makeStyles()(theme => ({
    icon: {
-        color: theme.palette.grey[600],
+        color: theme.palette.inactiveIcon,
    },
 }));
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCES.styles.ts
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCES.styles.ts
@ -32,6 +32,6 @@ export const useStyles = makeStyles()(theme => ({
    },
    closeIcon: {
        fontSize: '1.5rem',
-        color: theme.palette.grey[600],
+        color: theme.palette.inactiveIcon,
    },
 }));
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ColumnsMenu/ColumnsMenu.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ColumnsMenu/ColumnsMenu.tsx
@ -14,7 +14,7 @@ import {
    useMediaQuery,
    useTheme,
 } from '@mui/material';
-import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import ColumnIcon from '@mui/icons-material/ViewWeek';
 import CloseIcon from '@mui/icons-material/Close';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useStyles } from './ColumnsMenu.styles';
@ -105,7 +105,7 @@ export const ColumnsMenu: VFC<IColumnsMenuProps> = ({
                    className={classes.button}
                    data-loading
                >
-                    <ViewColumnIcon />
+                    <ColumnIcon />
                </IconButton>
            </Tooltip>

--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@ -11,7 +11,7 @@ import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
-import { FeatureLinkCell } from 'component/common/Table/cells/FeatureLinkCell/FeatureLinkCell';
+import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
 import { FeatureSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureSeenCell';
 import { FeatureTypeCell } from 'component/common/Table/cells/FeatureTypeCell/FeatureTypeCell';
 import { sortTypes } from 'utils/sortTypes';
@ -176,7 +176,7 @@ export const ProjectFeatureToggles = ({
                Header: 'Feature toggle name',
                accessor: 'name',
                Cell: ({ value }: { value: string }) => (
-                    <FeatureLinkCell
+                    <LinkCell
                        title={value}
                        to={`/projects/${projectId}/features/${value}`}
                    />
@ -271,6 +271,7 @@ export const ProjectFeatureToggles = ({
        () => filters?.find(filterRow => filterRow?.id === 'name')?.value || '',
        [filters]
    );
+
    return (
        <PageContent
            isLoading={loading}
--- a/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.styles.ts
+++ b/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.styles.ts
@ -11,7 +11,7 @@ export const useStyles = makeStyles()(theme => ({
        maxWidth: '300px',
    },
    icon: {
-        color: theme.palette.grey[600],
+        color: theme.palette.inactiveIcon,
    },
    descriptionCell: {
        textAlign: 'left',
--- a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
+++ b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
@ -255,7 +255,7 @@ export const StrategiesList = () => {
        strategies.map(strategy => (
            <ListItem key={strategy.name} className={styles.listItem}>
                <ListItemAvatar>
-                    <Extension style={{ color: '#0000008a' }} />
+                    <Extension color="disabled" />
                </ListItemAvatar>
                <ListItemText
                    primary={strategyLink(strategy?.name, strategy?.deprecated)}
--- a/frontend/src/component/strategies/StrategiesList/snapshots/StrategiesList.test.tsx.snap
+++ b/frontend/src/component/strategies/StrategiesList/snapshots/StrategiesList.test.tsx.snap
@ -80,14 +80,9 @@ exports[`renders correctly 1`] = `
            >
              <svg
                aria-hidden={true}
-                className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
+                className="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeMedium mui-1db085k-MuiSvgIcon-root"
                data-testid="ExtensionIcon"
                focusable="false"
-                style={
-                  {
-                    "color": "#0000008a",
-                  }
-                }
                viewBox="0 0 24 24"
              >
                <path
@ -117,44 +112,53 @@ exports[`renders correctly 1`] = `
              </p>
            </div>
            <div>
-              <button
+              <div
                aria-label="Deprecate strategy"
                aria-labelledby={null}
-                className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                className=""
                data-mui-internal-clone-element={true}
-                disabled={false}
                onBlur={[Function]}
-                onClick={[Function]}
-                onContextMenu={[Function]}
-                onDragLeave={[Function]}
                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
                onMouseLeave={[Function]}
                onMouseOver={[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"
+                <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"
                >
-                  <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
+                    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"
                  />
-                </svg>
-                <span
-                  className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
-                />
-              </button>
+                </button>
+              </div>
            </div>
            <div
              aria-label="You cannot delete a built-in strategy"
--- a/frontend/src/hooks/api/getters/useUnleashContext/useUnleashContext.ts
+++ b/frontend/src/hooks/api/getters/useUnleashContext/useUnleashContext.ts
@ -1,5 +1,4 @@
-import useSWR, { mutate, SWRConfiguration } from 'swr';
-import { useState, useEffect } from 'react';
+import useSWR, { SWRConfiguration } from 'swr';
 import { formatApiPath } from 'utils/formatPath';
 import handleErrorResponses from '../httpErrorResponseHandler';
 import { IUnleashContextDefinition } from 'interfaces/context';
@ -9,7 +8,6 @@ interface IUnleashContextOutput {
    refetchUnleashContext: () => void;
    loading: boolean;
    error?: Error;
-    CONTEXT_CACHE_KEY: string;
 }

 const useUnleashContext = (
@ -30,24 +28,17 @@ const useUnleashContext = (

    const CONTEXT_CACHE_KEY = 'api/admin/context';

-    const { data, error } = useSWR(CONTEXT_CACHE_KEY, fetcher, options);
-
-    const [loading, setLoading] = useState(!error && !data);
-
-    const refetchUnleashContext = () => {
-        mutate(CONTEXT_CACHE_KEY);
-    };
-
-    useEffect(() => {
-        setLoading(!error && !data);
-    }, [data, error]);
+    const { data, mutate, error, isValidating } = useSWR(
+        CONTEXT_CACHE_KEY,
+        fetcher,
+        options
+    );

    return {
        context: data || [],
        error,
-        loading,
-        refetchUnleashContext,
-        CONTEXT_CACHE_KEY,
+        loading: isValidating && !error && !data,
+        refetchUnleashContext: mutate,
    };
 };

--- a/frontend/src/themes/theme.ts
+++ b/frontend/src/themes/theme.ts
@ -100,6 +100,7 @@ export default createTheme({
            inactive: colors.orange[200],
            abandoned: colors.red[200],
        },
+        inactiveIcon: colors.grey[600],
    },
    components: {
        MuiLink: {
@ -244,5 +245,12 @@ export default createTheme({
                },
            },
        },
+        MuiIcon: {
+            styleOverrides: {
+                colorDisabled: {
+                    color: colors.grey[600],
+                },
+            },
+        },
    },
 });
--- a/frontend/src/themes/themeTypes.ts
+++ b/frontend/src/themes/themeTypes.ts
@ -61,6 +61,14 @@ declare module '@mui/material/styles' {
         * For sidebar container background.
         */
        sidebarContainer: string;
+        /**
+         * Icon that doesn't have an action (visual only, no click handler).
+         *
+         * @deprecated use `<YourIcon color="disabled" />`.
+         * ⚠️ `color` only works with `import { YourIcon } from "@mui/icons"`
+         * and not with `import YourIcon from "@mui/icons/YourIcon"`.
+         */
+        inactiveIcon: string;
    }

    interface Theme extends CustomTheme {}