diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.styles.ts b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.styles.ts index 9086c8b07c..fb25df6238 100644 --- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.styles.ts +++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.styles.ts @@ -2,6 +2,7 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ rolesListBody: { + padding: theme.spacing(4), paddingBottom: '4rem', minHeight: '50vh', position: 'relative', diff --git a/frontend/src/component/admin/users/UserAdmin.styles.ts b/frontend/src/component/admin/users/UserAdmin.styles.ts index e6da4dca58..a93b3c7f2b 100644 --- a/frontend/src/component/admin/users/UserAdmin.styles.ts +++ b/frontend/src/component/admin/users/UserAdmin.styles.ts @@ -1,7 +1,8 @@ import { makeStyles } from 'tss-react/mui'; -export const useStyles = makeStyles()(() => ({ +export const useStyles = makeStyles()(theme => ({ userListBody: { + padding: theme.spacing(4), paddingBottom: '4rem', minHeight: '50vh', position: 'relative', diff --git a/frontend/src/component/common/PageContent/PageContent.styles.ts b/frontend/src/component/common/PageContent/PageContent.styles.ts index 6d20f6014d..d9ead5943b 100644 --- a/frontend/src/component/common/PageContent/PageContent.styles.ts +++ b/frontend/src/component/common/PageContent/PageContent.styles.ts @@ -15,9 +15,9 @@ export const useStyles = makeStyles()(theme => ({ }, }, bodyContainer: { - padding: '2rem', + padding: theme.spacing(4), [theme.breakpoints.down('md')]: { - padding: '1rem', + padding: theme.spacing(2), }, }, paddingDisabled: { diff --git a/frontend/src/component/common/PageContent/PageContent.tsx b/frontend/src/component/common/PageContent/PageContent.tsx index 2580fd4488..3adb29e73c 100644 --- a/frontend/src/component/common/PageContent/PageContent.tsx +++ b/frontend/src/component/common/PageContent/PageContent.tsx @@ -38,11 +38,13 @@ export const PageContent: FC = ({ [styles.borderDisabled]: disableBorder, }); - const bodyClasses = classnames(styles.bodyContainer, { - [styles.paddingDisabled]: disablePadding, - [styles.borderDisabled]: disableBorder, - [bodyClass]: bodyClass, - }); + const bodyClasses = classnames( + bodyClass ? bodyClass : styles.bodyContainer, + { + [styles.paddingDisabled]: disablePadding, + [styles.borderDisabled]: disableBorder, + } + ); const paperProps = disableBorder ? { elevation: 0 } : {}; diff --git a/frontend/src/component/common/PageHeader/PageHeader.styles.ts b/frontend/src/component/common/PageHeader/PageHeader.styles.ts index f6b5657c8b..c7a01a8b1e 100644 --- a/frontend/src/component/common/PageHeader/PageHeader.styles.ts +++ b/frontend/src/component/common/PageHeader/PageHeader.styles.ts @@ -10,7 +10,12 @@ export const useStyles = makeStyles()(theme => ({ justifyContent: 'space-between', alignItems: 'center', position: 'relative', - flexWrap: 'wrap', + }, + header: { + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + marginRight: theme.spacing(2), }, headerTitle: { fontSize: theme.fontSizes.mainHeader, @@ -21,6 +26,7 @@ export const useStyles = makeStyles()(theme => ({ flexGrow: 1, justifyContent: 'flex-end', alignItems: 'center', + gap: theme.spacing(1), }, verticalSeparator: { height: '100%', diff --git a/frontend/src/component/common/PageHeader/PageHeader.tsx b/frontend/src/component/common/PageHeader/PageHeader.tsx index 5715401906..faa24d8f06 100644 --- a/frontend/src/component/common/PageHeader/PageHeader.tsx +++ b/frontend/src/component/common/PageHeader/PageHeader.tsx @@ -35,7 +35,10 @@ const PageHeaderComponent: FC & { Divider: VFC } = ({ return (
-
+
({ padding: theme.spacing(2), whiteSpace: 'nowrap', width: '100%', + '& .hover-only': { + visibility: 'hidden', + }, ':hover, :focus, &:focus-visible, &:active': { outline: 'revert', '& svg': { color: 'inherit', }, + '& .hover-only': { + visibility: 'visible', + }, }, display: 'flex', alignItems: 'center', diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx index f8c8220e4a..e3943d9822 100644 --- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx +++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx @@ -41,7 +41,7 @@ export const SortArrow: VFC = ({ } elseShow={ } diff --git a/frontend/src/component/common/Table/TableActions/TableActions.tsx b/frontend/src/component/common/Table/TableActions/TableActions.tsx index f5ebfc07b0..1986a01417 100644 --- a/frontend/src/component/common/Table/TableActions/TableActions.tsx +++ b/frontend/src/component/common/Table/TableActions/TableActions.tsx @@ -15,7 +15,7 @@ interface ITableActionsProps { } /** - * @deprecated + * @deprecated Use instead */ export const TableActions: FC = ({ initialSearchValue: search, diff --git a/frontend/src/component/common/Table/TableCell/TableCell.tsx b/frontend/src/component/common/Table/TableCell/TableCell.tsx index 03360d91b7..f43275d934 100644 --- a/frontend/src/component/common/Table/TableCell/TableCell.tsx +++ b/frontend/src/component/common/Table/TableCell/TableCell.tsx @@ -1,9 +1,15 @@ import { FC } from 'react'; +import classnames from 'classnames'; import { TableCell as MUITableCell, TableCellProps } from '@mui/material'; import { useStyles } from './TableCell.styles'; -export const TableCell: FC = ({ ...props }) => { +export const TableCell: FC = ({ className, ...props }) => { const { classes: styles } = useStyles(); - return ; + return ( + + ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx index 31cabc6986..d4603f2014 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx @@ -37,7 +37,7 @@ const FeatureOverviewEnvSwitch = ({ await toggleFeatureEnvironmentOn(projectId, featureId, env.name); setToastData({ type: 'success', - title: 'Available in production', + title: `Available in ${env.name}`, text: `${featureId} is now available in ${env.name} based on its defined strategies.`, }); refetchFeature(); @@ -61,7 +61,7 @@ const FeatureOverviewEnvSwitch = ({ await toggleFeatureEnvironmentOff(projectId, featureId, env.name); setToastData({ type: 'success', - title: 'Unavailable in production', + title: `Unavailable in ${env.name}`, text: `${featureId} is unavailable in ${env.name} and its strategies will no longer have any effect.`, }); refetchFeature(); diff --git a/frontend/src/component/project/Project/Project.styles.ts b/frontend/src/component/project/Project/Project.styles.ts index 169fa586d4..f2c1e99e6d 100644 --- a/frontend/src/component/project/Project/Project.styles.ts +++ b/frontend/src/component/project/Project/Project.styles.ts @@ -8,7 +8,10 @@ export const useStyles = makeStyles()(theme => ({ flexDirection: 'column', }, }, - projectToggles: { width: '100%', minHeight: '100%' }, + projectToggles: { + width: '100%', + minWidth: 0, + }, header: { backgroundColor: '#fff', borderRadius: theme.shape.borderRadiusLarge, @@ -36,13 +39,15 @@ export const useStyles = makeStyles()(theme => ({ }, }, title: { + margin: 0, + width: '100%', fontSize: theme.fontSizes.mainHeader, fontWeight: 'bold', marginBottom: '0.5rem', - display: 'grid', - gridTemplateColumns: '1fr auto', + display: 'flex', + justifyContent: 'space-between', alignItems: 'center', - gridGap: '1rem', + gap: '1rem', }, titleText: { overflow: 'hidden', diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index 0a0cbe6c56..fad7f7e4a2 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -90,7 +90,6 @@ const Project = () => { return tabData.map((tab, index) => { return ( {
-

-
{project?.name}
+

+
+ {project?.name || projectId} +
({ + cell: { + display: 'flex', + justifyContent: 'center', + paddingRight: theme.spacing(2), + }, menuContainer: { borderRadius: theme.shape.borderRadiusLarge, padding: theme.spacing(1), + paddingRight: theme.spacing(3), }, item: { borderRadius: theme.shape.borderRadius, diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx index 9d8610dc9c..97ab342709 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx @@ -57,7 +57,7 @@ export const ActionsCell: VFC = ({ projectId, row }) => { const menuId = `${id}-menu`; return ( - + void; @@ -104,6 +103,7 @@ export const ColumnsMenu: VFC = ({ onClick={handleClick} type="button" className={classes.button} + data-loading > @@ -165,14 +165,12 @@ export const ColumnsMenu: VFC = ({ primary={ <>{column.Header}} - elseShow={() => - capitalize(column.id) - } + elseShow={() => column.id} /> } diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.tsx index fd4e9866b6..8bd91e312d 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.tsx @@ -43,12 +43,13 @@ export const FeatureToggleSwitch: VFC = ({ key={`${featureName}-${environmentName}`} // Prevent animation when archiving rows > ); diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts index b6522227e2..1d681909e5 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts @@ -7,7 +7,6 @@ export const useStyles = makeStyles()(theme => ({ minHeight: '100%', width: 'calc(100% - 1rem)', position: 'relative', - paddingBottom: '4rem', [theme.breakpoints.down('md')]: { marginLeft: '0', paddingBottom: '4rem', @@ -25,7 +24,10 @@ export const useStyles = makeStyles()(theme => ({ }, }, }, - bodyClass: { padding: '0.5rem 1rem' }, + bodyClass: { + overflowX: 'auto', + padding: theme.spacing(4), + }, header: { padding: '1rem', }, diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx index 6af8f3d493..8fc93b5ec8 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -70,13 +70,15 @@ export const ProjectFeatureToggles = ({ const projectId = useRequiredPathParam('projectId'); const navigate = useNavigate(); const { uiConfig } = useUiConfig(); - const environments = useEnvironmentsRef(newEnvironments); + const environments = useEnvironmentsRef( + loading ? ['a', 'b', 'c'] : newEnvironments + ); const { refetch } = useProject(projectId); const { setToastData, setToastApiError } = useToast(); const data = useMemo(() => { if (loading) { - return Array(12).fill({ + return Array(6).fill({ type: '-', name: 'Feature name', createdAt: new Date(), @@ -180,7 +182,8 @@ export const ProjectFeatureToggles = ({ /> ), width: '99%', - minWdith: 100, + minWidth: 100, + maxWidth: 200, sortType: 'alphanumeric', }, { @@ -191,9 +194,9 @@ export const ProjectFeatureToggles = ({ align: 'center', }, ...environments.map(name => ({ - Header: name, - maxWidth: 103, - minWidth: 103, + Header: loading ? () => '' : name, + maxWidth: 90, + minWidth: 90, accessor: `environments.${name}`, align: 'center', Cell: ({ @@ -218,25 +221,16 @@ export const ProjectFeatureToggles = ({ }, })), { - Header: ({ allColumns, setHiddenColumns }: any) => ( - - ), - maxWidth: 60, - width: 60, - id: 'actions', + id: 'Actions', + maxWidth: 56, + width: 56, Cell: (props: { row: { original: ListItemType } }) => ( ), disableSortBy: true, }, ], - [projectId, environments, onToggle] + [projectId, environments, onToggle, loading] ); const initialState = useMemo( @@ -250,13 +244,15 @@ export const ProjectFeatureToggles = ({ ); const { - state: { filters }, - getTableProps, - getTableBodyProps, + allColumns, headerGroups, rows, + state: { filters }, + getTableBodyProps, + getTableProps, prepareRow, setFilter, + setHiddenColumns, } = useTable( { columns: columns as any[], // TODO: fix after `react-table` v8 update @@ -275,7 +271,6 @@ export const ProjectFeatureToggles = ({ () => filters?.find(filterRow => filterRow?.id === 'name')?.value || '', [filters] ); - return ( setFilter('name', value)} /> + diff --git a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts index ee881e99b6..63cc22b5b0 100644 --- a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts +++ b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts @@ -41,7 +41,7 @@ export const useStyles = makeStyles()(theme => ({ }, }, subtitle: { - marginBottom: '1.25rem', + marginBottom: '1rem', }, emphazisedText: { fontSize: '1.5rem', diff --git a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx index 096350b943..5824fb3d99 100644 --- a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx +++ b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx @@ -121,7 +121,7 @@ const ProjectInfo = ({ />

-

projectId: {id}

+

projectId: {id}

diff --git a/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap b/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap index 9928a1ffd4..a8c1095321 100644 --- a/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap +++ b/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap @@ -13,10 +13,10 @@ exports[`renders correctly 1`] = ` className="tss-1ylehva-headerContainer" >

      = () => [ setValue: React.Dispatch> ]; -// Create a hook that stores global state (shared across all hook instances). -// The state is also persisted to localStorage and restored on page load. -// The localStorage state is not synced between tabs. +/** + * Create a hook that stores global state (shared across all hook instances). + * The state is also persisted to localStorage and restored on page load. + * The localStorage state is not synced between tabs. + * + * @deprecated + */ export const createPersistentGlobalStateHook = ( key: string, initialValue: T diff --git a/frontend/src/themes/colors.ts b/frontend/src/themes/colors.ts index 97ae99c020..4a3c143706 100644 --- a/frontend/src/themes/colors.ts +++ b/frontend/src/themes/colors.ts @@ -4,6 +4,8 @@ * @see https://www.figma.com/file/qdwpPfuitJUNinm6mvmCmG/Unleash-application?node-id=7175%3A44590 */ export const colors = { + white: '#FFFFFF', + black: '#000000', grey: { 900: '#202021', 800: '#6E6E70', diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts index 924792f1ae..ded0b545e1 100644 --- a/frontend/src/themes/theme.ts +++ b/frontend/src/themes/theme.ts @@ -234,5 +234,15 @@ export default createTheme({ }, }, }, + MuiSwitch: { + styleOverrides: { + switchBase: { + zIndex: 1, + '&:not(.Mui-checked) .MuiTouchRipple-child': { + color: colors.grey['500'], + }, + }, + }, + }, }, }); diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts index 52e322fe05..f15658a8a5 100644 --- a/frontend/src/themes/themeTypes.ts +++ b/frontend/src/themes/themeTypes.ts @@ -77,5 +77,10 @@ declare module '@mui/system/createTheme/shape' { borderRadiusExtraLarge: string; } } +declare module '@mui/material/styles/zIndex' { + interface ZIndex { + sticky: number; + } +} export {};