diff --git a/frontend/src/component/addons/AddonForm/AddonForm.tsx b/frontend/src/component/addons/AddonForm/AddonForm.tsx index de18c94909..fab9f48166 100644 --- a/frontend/src/component/addons/AddonForm/AddonForm.tsx +++ b/frontend/src/component/addons/AddonForm/AddonForm.tsx @@ -15,7 +15,7 @@ import { IAddon, IAddonProvider } from 'interfaces/addons'; import { AddonParameters } from './AddonParameters/AddonParameters'; import { AddonEvents } from './AddonEvents/AddonEvents'; import cloneDeep from 'lodash.clonedeep'; -import PageContent from 'component/common/PageContent/PageContent'; +import { PageContent } from 'component/common/PageContent/PageContent'; import { useNavigate } from 'react-router-dom'; import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi'; import useToast from 'hooks/useToast'; @@ -184,7 +184,7 @@ export const AddonForm: VFC = ({ } = provider ? provider : ({} as Partial); return ( - +
{description}  diff --git a/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx b/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx index 838d285bb3..34856fedb7 100644 --- a/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx +++ b/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx @@ -1,5 +1,5 @@ import { ReactElement } from 'react'; -import PageContent from 'component/common/PageContent/PageContent'; +import { PageContent } from 'component/common/PageContent/PageContent'; import { List, ListItem, @@ -49,7 +49,7 @@ export const AvailableAddons = ({ ); return ( - + {providers.map((provider: IProvider) => renderProvider(provider) diff --git a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx index eed53c0fc5..63f6e3b485 100644 --- a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx +++ b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx @@ -12,7 +12,7 @@ import { UPDATE_ADDON, } from 'component/providers/AccessProvider/permissions'; import { Link, useNavigate } from 'react-router-dom'; -import PageContent from 'component/common/PageContent/PageContent'; +import { PageContent } from 'component/common/PageContent/PageContent'; import useAddons from 'hooks/api/getters/useAddons/useAddons'; import useToast from 'hooks/useToast'; import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi'; @@ -142,7 +142,7 @@ export const ConfiguredAddons = ({ getAddonIcon }: IConfigureAddonsProps) => { ); return ( - + {sortAddons(addons).map((addon: IAddon) => renderAddon(addon))} diff --git a/frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx b/frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx index bfee1fd56f..7ff0ca1aa0 100644 --- a/frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx +++ b/frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx @@ -3,8 +3,8 @@ import { useNavigate } from 'react-router-dom'; import { Button } from '@mui/material'; import AccessContext from 'contexts/AccessContext'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import PageContent from 'component/common/PageContent'; -import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle'; +import { PageContent } from 'component/common/PageContent/PageContent'; +import { PageHeader } from 'component/common/PageHeader/PageHeader'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { CREATE_API_TOKEN, @@ -24,8 +24,8 @@ export const ApiTokenPage = () => { return ( { return (
- + } diff --git a/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx b/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx index 8d7d98b9bd..fb23b99aa3 100644 --- a/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx +++ b/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx @@ -7,7 +7,7 @@ import { TextField, } from '@mui/material'; import { Alert } from '@mui/material'; -import PageContent from 'component/common/PageContent/PageContent'; +import { PageContent } from 'component/common/PageContent/PageContent'; import AccessContext from 'contexts/AccessContext'; import { ADMIN } from 'component/providers/AccessProvider/permissions'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; @@ -74,7 +74,7 @@ export const GoogleAuth = () => { }; return ( - + diff --git a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx index 056cfc5776..721f65beff 100644 --- a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx +++ b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx @@ -7,7 +7,7 @@ import { TextField, } from '@mui/material'; import { Alert } from '@mui/material'; -import PageContent from 'component/common/PageContent/PageContent'; +import { PageContent } from 'component/common/PageContent/PageContent'; import AccessContext from 'contexts/AccessContext'; import { ADMIN } from 'component/providers/AccessProvider/permissions'; import { AutoCreateForm } from '../AutoCreateForm/AutoCreateForm'; @@ -85,7 +85,7 @@ export const OidcAuth = () => { }; return ( - + diff --git a/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx b/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx index f2897e7de2..2aef86c5cd 100644 --- a/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx +++ b/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx @@ -1,7 +1,7 @@ import React, { useContext, useEffect, useState } from 'react'; import { Button, FormControlLabel, Grid, Switch } from '@mui/material'; import { Alert } from '@mui/material'; -import PageContent from 'component/common/PageContent/PageContent'; +import { PageContent } from 'component/common/PageContent/PageContent'; import AccessContext from 'contexts/AccessContext'; import { ADMIN } from 'component/providers/AccessProvider/permissions'; import useAuthSettings from 'hooks/api/getters/useAuthSettings/useAuthSettings'; @@ -57,7 +57,7 @@ export const PasswordAuth = () => { } }; return ( - +
diff --git a/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx b/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx index e424543f7b..5e1da6f385 100644 --- a/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx +++ b/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx @@ -7,7 +7,7 @@ import { TextField, } from '@mui/material'; import { Alert } from '@mui/material'; -import PageContent from 'component/common/PageContent/PageContent'; +import { PageContent } from 'component/common/PageContent/PageContent'; import AccessContext from 'contexts/AccessContext'; import { ADMIN } from 'component/providers/AccessProvider/permissions'; import { AutoCreateForm } from '../AutoCreateForm/AutoCreateForm'; @@ -81,7 +81,7 @@ export const SamlAuth = () => { }; return ( - + diff --git a/frontend/src/component/admin/invoice/InvoiceList.tsx b/frontend/src/component/admin/invoice/InvoiceList.tsx index 8b63c0341a..48e8db4317 100644 --- a/frontend/src/component/admin/invoice/InvoiceList.tsx +++ b/frontend/src/component/admin/invoice/InvoiceList.tsx @@ -8,8 +8,8 @@ import { Button, } from '@mui/material'; import OpenInNew from '@mui/icons-material/OpenInNew'; -import PageContent from 'component/common/PageContent'; -import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle'; +import { PageContent } from 'component/common/PageContent/PageContent'; +import { PageHeader } from 'component/common/PageHeader/PageHeader'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { formatApiPath } from 'utils/formatPath'; import useInvoices from 'hooks/api/getters/useInvoices/useInvoices'; @@ -35,8 +35,8 @@ const InvoiceList = () => { condition={invoices.length > 0} show={ { { { } return ( {
- }> + }>
0} diff --git a/frontend/src/component/common/HeaderTitle/HeaderTitle.tsx b/frontend/src/component/common/HeaderTitle/HeaderTitle.tsx deleted file mode 100644 index e397bb395f..0000000000 --- a/frontend/src/component/common/HeaderTitle/HeaderTitle.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { ReactNode, VFC } from 'react'; -import classnames from 'classnames'; - -import { Typography, TypographyProps } from '@mui/material'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; - -import { useStyles } from './styles'; -import { usePageTitle } from 'hooks/usePageTitle'; - -interface IHeaderTitleProps { - title: string; - titleElement?: ReactNode; - subtitle?: string; - variant?: TypographyProps['variant']; - loading?: boolean; - actions?: ReactNode; - className?: string; -} - -export const HeaderTitle: VFC = ({ - title, - titleElement, - actions, - subtitle, - variant, - loading, - className = '', -}) => { - const { classes: styles } = useStyles(); - const headerClasses = classnames({ skeleton: loading }); - - usePageTitle(title); - - return ( -
-
- - {titleElement || title} - - {subtitle && {subtitle}} -
- - {actions}
} - /> -
- ); -}; diff --git a/frontend/src/component/common/HeaderTitle/styles.ts b/frontend/src/component/common/HeaderTitle/styles.ts deleted file mode 100644 index 9f692e1617..0000000000 --- a/frontend/src/component/common/HeaderTitle/styles.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - headerTitleContainer: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - position: 'relative', - }, - headerTitle: { - fontSize: theme.fontSizes.mainHeader, - fontWeight: 'normal', - }, - headerActions: { - position: 'absolute', - right: 0, - }, -})); diff --git a/frontend/src/component/common/PageContent/PageContent.jsx b/frontend/src/component/common/PageContent/PageContent.jsx deleted file mode 100644 index e6ec4e2635..0000000000 --- a/frontend/src/component/common/PageContent/PageContent.jsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import classnames from 'classnames'; -import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle'; -import { Paper } from '@mui/material'; -import { useStyles } from './styles'; - -const PageContent = ({ - children, - headerContent, - disablePadding = false, - disableBorder = false, - bodyClass = '', - ...rest -}) => { - const { classes: styles } = useStyles(); - - const headerClasses = classnames(styles.headerContainer, { - [styles.paddingDisabled]: disablePadding, - [styles.borderDisabled]: disableBorder, - }); - - const bodyClasses = classnames(styles.bodyContainer, { - [styles.paddingDisabled]: disablePadding, - [styles.borderDisabled]: disableBorder, - [bodyClass]: bodyClass, - }); - - let header = null; - if (headerContent) { - if (typeof headerContent === 'string') { - header = ( -
- -
- ); - } else { - header =
{headerContent}
; - } - } - - const paperProps = disableBorder ? { elevation: 0 } : {}; - - return ( - - {header} -
{children}
- - ); -}; - -export default PageContent; - -PageContent.propTypes = { - headerContent: PropTypes.oneOfType([PropTypes.element, PropTypes.string]), - disablePadding: PropTypes.bool, - disableBorder: PropTypes.bool, -}; diff --git a/frontend/src/component/common/PageContent/styles.ts b/frontend/src/component/common/PageContent/PageContent.styles.ts similarity index 69% rename from frontend/src/component/common/PageContent/styles.ts rename to frontend/src/component/common/PageContent/PageContent.styles.ts index 9db1c6301f..6d20f6014d 100644 --- a/frontend/src/component/common/PageContent/styles.ts +++ b/frontend/src/component/common/PageContent/PageContent.styles.ts @@ -1,9 +1,15 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ + container: { + borderRadius: theme.shape.borderRadiusLarge, + boxShadow: 'none', + }, headerContainer: { padding: theme.spacing(2, 4), - borderBottom: `1px solid ${theme.palette.grey[100]}`, + borderBottomStyle: 'solid', + borderBottomWidth: 1, + borderBottomColor: theme.palette.divider, [theme.breakpoints.down('md')]: { padding: '1.5rem 1rem', }, diff --git a/frontend/src/component/common/PageContent/PageContent.tsx b/frontend/src/component/common/PageContent/PageContent.tsx new file mode 100644 index 0000000000..2580fd4488 --- /dev/null +++ b/frontend/src/component/common/PageContent/PageContent.tsx @@ -0,0 +1,72 @@ +import React, { FC, ReactNode } from 'react'; +import classnames from 'classnames'; +import { PageHeader } from 'component/common/PageHeader/PageHeader'; +import { Paper, PaperProps } from '@mui/material'; +import { useStyles } from './PageContent.styles'; +import useLoading from 'hooks/useLoading'; +import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender'; + +interface IPageContentProps extends PaperProps { + header?: ReactNode; + isLoading?: boolean; + /** + * @deprecated fix feature event log and remove + */ + disablePadding?: boolean; + /** + * @deprecated fix feature event log and remove + */ + disableBorder?: boolean; + bodyClass?: string; +} + +export const PageContent: FC = ({ + children, + header, + disablePadding = false, + disableBorder = false, + bodyClass = '', + isLoading = false, + className, + ...rest +}) => { + const { classes: styles } = useStyles(); + const ref = useLoading(isLoading); + + const headerClasses = classnames(styles.headerContainer, { + [styles.paddingDisabled]: disablePadding, + [styles.borderDisabled]: disableBorder, + }); + + const bodyClasses = classnames(styles.bodyContainer, { + [styles.paddingDisabled]: disablePadding, + [styles.borderDisabled]: disableBorder, + [bodyClass]: bodyClass, + }); + + const paperProps = disableBorder ? { elevation: 0 } : {}; + + return ( +
+ + + } + elseShow={header} + /> +
+ } + /> +
{children}
+ +
+ ); +}; diff --git a/frontend/src/component/common/PageContent/index.jsx b/frontend/src/component/common/PageContent/index.jsx deleted file mode 100644 index 29126440c9..0000000000 --- a/frontend/src/component/common/PageContent/index.jsx +++ /dev/null @@ -1,3 +0,0 @@ -import PageContent from './PageContent'; - -export default PageContent; diff --git a/frontend/src/component/common/Table/TableToolbar/TableToolbar.styles.ts b/frontend/src/component/common/PageHeader/PageHeader.styles.ts similarity index 58% rename from frontend/src/component/common/Table/TableToolbar/TableToolbar.styles.ts rename to frontend/src/component/common/PageHeader/PageHeader.styles.ts index 36eee8d8f8..f6b5657c8b 100644 --- a/frontend/src/component/common/Table/TableToolbar/TableToolbar.styles.ts +++ b/frontend/src/component/common/PageHeader/PageHeader.styles.ts @@ -1,25 +1,30 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ - toolbar: { - paddingLeft: theme.spacing(4), - paddingRight: theme.spacing(4), - paddingTop: theme.spacing(2), - paddingBottom: theme.spacing(2), - borderBottom: `1px solid ${theme.palette.divider}`, + headerContainer: { display: 'flex', - flexWrap: 'wrap', - alignItems: 'center', + flexDirection: 'column', }, - actions: { - flex: 1, + topContainer: { display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + position: 'relative', + flexWrap: 'wrap', + }, + headerTitle: { + fontSize: theme.fontSizes.mainHeader, + fontWeight: 'normal', + }, + headerActions: { + display: 'flex', + flexGrow: 1, justifyContent: 'flex-end', alignItems: 'center', }, verticalSeparator: { height: '100%', - borderColor: theme.palette.grey[500], + borderColor: theme.palette.dividerAlternative, width: '1px', display: 'inline-block', marginLeft: theme.spacing(2), diff --git a/frontend/src/component/common/PageHeader/PageHeader.tsx b/frontend/src/component/common/PageHeader/PageHeader.tsx new file mode 100644 index 0000000000..5715401906 --- /dev/null +++ b/frontend/src/component/common/PageHeader/PageHeader.tsx @@ -0,0 +1,71 @@ +import { ReactNode, FC, VFC } from 'react'; +import classnames from 'classnames'; + +import { Divider, Typography, TypographyProps } from '@mui/material'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; + +import { useStyles } from './PageHeader.styles'; +import { usePageTitle } from 'hooks/usePageTitle'; + +interface IPageHeaderProps { + title: string; + titleElement?: ReactNode; + subtitle?: string; + variant?: TypographyProps['variant']; + loading?: boolean; + actions?: ReactNode; + className?: string; +} + +const PageHeaderComponent: FC & { Divider: VFC } = ({ + title, + titleElement, + actions, + subtitle, + variant, + loading, + className = '', + children, +}) => { + const { classes: styles } = useStyles(); + const headerClasses = classnames({ skeleton: loading }); + + usePageTitle(title); + + return ( +
+
+
+ + {titleElement || title} + + {subtitle && {subtitle}} +
+ {actions}
} + /> +
+ {children} + + ); +}; + +const PageHeaderDivider: VFC = () => { + const { classes: styles } = useStyles(); + + return ( + + ); +}; + +PageHeaderComponent.Divider = PageHeaderDivider; + +export const PageHeader = PageHeaderComponent; diff --git a/frontend/src/component/common/Table/Table.tsx b/frontend/src/component/common/Table/Table.tsx deleted file mode 100644 index cc8179d5f7..0000000000 --- a/frontend/src/component/common/Table/Table.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { FC } from 'react'; -import { Box, Table as MUITable } from '@mui/material'; - -export const Table: FC = ({ children }) => ( - - {children} - -); diff --git a/frontend/src/component/common/Table/TableContainer/TableContainer.tsx b/frontend/src/component/common/Table/TableContainer/TableContainer.tsx index 04d5e7fcc6..14d866c7a7 100644 --- a/frontend/src/component/common/Table/TableContainer/TableContainer.tsx +++ b/frontend/src/component/common/Table/TableContainer/TableContainer.tsx @@ -2,6 +2,9 @@ import { forwardRef } from 'react'; import { Paper, PaperProps } from '@mui/material'; import { useStyles } from './TableContainer.styles'; +/** + * @deprecated + */ export const TableContainer = forwardRef( ({ children, ...props }, ref) => { const { classes } = useStyles(); diff --git a/frontend/src/component/common/Table/TableToolbar/TableToolbar.tsx b/frontend/src/component/common/Table/TableToolbar/TableToolbar.tsx deleted file mode 100644 index e9a01d131e..0000000000 --- a/frontend/src/component/common/Table/TableToolbar/TableToolbar.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { FC, VFC } from 'react'; -import { Divider, Box, Toolbar } from '@mui/material'; -import { useStyles } from './TableToolbar.styles'; -import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle'; - -interface ITableToolbarProps { - title: string; -} - -export const TableToolbarComponent: FC & { - Divider: VFC; -} = ({ title, children }) => { - const { classes: styles } = useStyles(); - - return ( - - - {children} - - ); -}; - -const ToolbarDivider: VFC = () => { - const { classes: styles } = useStyles(); - - return ( - - ); -}; - -TableToolbarComponent.Divider = ToolbarDivider; - -export const TableToolbar = TableToolbarComponent; diff --git a/frontend/src/component/common/Table/index.ts b/frontend/src/component/common/Table/index.ts index 958a56b16c..08f82dbcc7 100644 --- a/frontend/src/component/common/Table/index.ts +++ b/frontend/src/component/common/Table/index.ts @@ -1,8 +1,5 @@ -export { TableContainer } from './TableContainer/TableContainer'; -export { TableToolbar } from './TableToolbar/TableToolbar'; export { TableSearch } from './TableSearch/TableSearch'; -export { Table } from './Table'; export { SortableTableHeader } from './SortableTableHeader/SortableTableHeader'; -export { TableBody, TableRow } from '@mui/material'; +export { Table, TableBody, TableRow } from '@mui/material'; export { TableCell } from './TableCell/TableCell'; export { TablePlaceholder } from './TablePlaceholder/TablePlaceholder'; diff --git a/frontend/src/component/context/ContextList/ContextList.tsx b/frontend/src/component/context/ContextList/ContextList.tsx index 725507547c..ff54f2bc4c 100644 --- a/frontend/src/component/context/ContextList/ContextList.tsx +++ b/frontend/src/component/context/ContextList/ContextList.tsx @@ -11,8 +11,8 @@ import { Tooltip, useMediaQuery, } from '@mui/material'; -import PageContent from 'component/common/PageContent/PageContent'; -import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle'; +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, @@ -143,11 +143,8 @@ const ContextList: VFC = () => { return ( + header={ + } > diff --git a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx index 186caa6135..0ec073d357 100644 --- a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx +++ b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx @@ -11,9 +11,9 @@ import useToast from 'hooks/useToast'; import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments'; import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import PageContent from 'component/common/PageContent/PageContent'; +import { PageContent } from 'component/common/PageContent/PageContent'; import { ADMIN } from 'component/providers/AccessProvider/permissions'; -import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle'; +import { PageHeader } from 'component/common/PageHeader/PageHeader'; import { formatUnknownError } from 'utils/formatUnknownError'; const CreateEnvironment = () => { @@ -109,9 +109,7 @@ const CreateEnvironment = () => { elseShow={ <> - } + header={} >

diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx index 53c3774587..500bfa604b 100644 --- a/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx +++ b/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx @@ -4,9 +4,9 @@ import { List } from '@mui/material'; import { Add } from '@mui/icons-material'; import useToast from 'hooks/useToast'; import { IEnvironment, ISortOrderPayload } from 'interfaces/environments'; -import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle'; +import { PageHeader } from 'component/common/PageHeader/PageHeader'; import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton'; -import PageContent from 'component/common/PageContent'; +import { PageContent } from 'component/common/PageContent/PageContent'; import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments'; import useEnvironmentApi from 'hooks/api/actions/useEnvironmentApi/useEnvironmentApi'; import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions'; @@ -159,8 +159,8 @@ const EnvironmentList = () => { }; return ( diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleArchiveList.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleArchiveList.tsx index 21f1dedc85..c0bf892afe 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleArchiveList.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleArchiveList.tsx @@ -6,8 +6,8 @@ import useMediaQuery from '@mui/material/useMediaQuery'; import { IFlags } from 'interfaces/uiConfig'; import { SearchField } from 'component/common/SearchField/SearchField'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import PageContent from 'component/common/PageContent/PageContent'; -import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle'; +import { PageContent } from 'component/common/PageContent/PageContent'; +import { PageHeader } from 'component/common/PageHeader/PageHeader'; import AccessContext from 'contexts/AccessContext'; import { IFeaturesFilter } from 'hooks/useFeaturesFilter'; import { FeatureToggleListItem } from './FeatureToggleListItem/FeatureToggleListItem'; @@ -138,8 +138,8 @@ export const FeatureToggleList: VFC = ({ []; @@ -106,7 +106,6 @@ export const FeatureToggleListTable: VFC = ({ const theme = useTheme(); const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg')); - const ref = useLoading(isLoading); const initialState = useMemo( () => ({ @@ -155,26 +154,35 @@ export const FeatureToggleListTable: VFC = ({ }, [setHiddenColumns, isSmallScreen, isMediumScreen]); return ( - - - + + + + View archive + + + + } /> - - - View archive - - - + } + > @@ -215,6 +223,6 @@ export const FeatureToggleListTable: VFC = ({ /> } /> - + ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx index c38a726128..649145c358 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx @@ -1,5 +1,5 @@ import { useFeatureMetricsRaw } from 'hooks/api/getters/useFeatureMetricsRaw/useFeatureMetricsRaw'; -import PageContent from 'component/common/PageContent'; +import { PageContent } from 'component/common/PageContent/PageContent'; import { useEffect, useMemo, useState } from 'react'; import { FEATURE_METRIC_HOURS_BACK_MAX, @@ -57,7 +57,7 @@ export const FeatureMetrics = () => { } return ( - + { const [settings, setSettings] = useState(METADATA); return ( - +
diff --git a/frontend/src/component/history/EventLog/EventLog.jsx b/frontend/src/component/history/EventLog/EventLog.jsx index 4a1df97adc..cd3e75ff7b 100644 --- a/frontend/src/component/history/EventLog/EventLog.jsx +++ b/frontend/src/component/history/EventLog/EventLog.jsx @@ -1,8 +1,8 @@ import { List, Switch, FormControlLabel } from '@mui/material'; import PropTypes from 'prop-types'; import EventJson from './EventJson/EventJson'; -import PageContent from 'component/common/PageContent/PageContent'; -import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle'; +import { PageContent } from 'component/common/PageContent/PageContent'; +import { PageHeader } from 'component/common/PageHeader/PageHeader'; import EventCard from './EventCard/EventCard'; import { useStyles } from './EventLog.styles'; import { formatDateYMDHMS } from 'utils/formatDate'; @@ -50,8 +50,8 @@ const EventLog = ({ ({ padding: '1rem', }, title: { - fontSize: '1rem', - fontWeight: 'normal', display: 'unset', [theme.breakpoints.down(600)]: { display: 'none', diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx index a33325da54..2998eccf76 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -7,8 +7,8 @@ import AccessContext from 'contexts/AccessContext'; import { SearchField } from 'component/common/SearchField/SearchField'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { PROJECTFILTERING } from 'component/common/flags'; -import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle'; -import PageContent from 'component/common/PageContent'; +import { PageHeader } from 'component/common/PageHeader/PageHeader'; +import { PageContent } from 'component/common/PageContent/PageContent'; import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton'; import FeatureToggleListNew from 'component/feature/FeatureToggleListNew/FeatureToggleListNew'; import { IFeatureToggleListItem } from 'interfaces/featureToggle'; @@ -46,8 +46,8 @@ export const ProjectFeatureToggles = ({ { if (isOss()) { return ( - }> + }> Controlling access to projects requires a paid version of Unleash. Check out{' '} @@ -90,7 +90,7 @@ export const ProjectAccess = () => { return ( } + header={} className={styles.pageContent} > diff --git a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx index 3a2ef41727..19f5093df9 100644 --- a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx +++ b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx @@ -3,8 +3,8 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import { useStyles } from './ProjectEnvironment.styles'; import useLoading from 'hooks/useLoading'; -import PageContent from 'component/common/PageContent'; -import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle'; +import { PageContent } from 'component/common/PageContent/PageContent'; +import { PageHeader } from 'component/common/PageHeader/PageHeader'; import { UPDATE_PROJECT } from 'component/providers/AccessProvider/permissions'; import ApiError from 'component/common/ApiError/ApiError'; @@ -174,8 +174,8 @@ const ProjectEnvironmentList = ({ return (
} diff --git a/frontend/src/component/project/ProjectList/ProjectList.tsx b/frontend/src/component/project/ProjectList/ProjectList.tsx index ab28fe49ff..69ea110e4a 100644 --- a/frontend/src/component/project/ProjectList/ProjectList.tsx +++ b/frontend/src/component/project/ProjectList/ProjectList.tsx @@ -9,9 +9,9 @@ import { useStyles } from './ProjectList.styles'; import { IProjectCard } from 'interfaces/project'; import loadingData from './loadingData'; import useLoading from 'hooks/useLoading'; -import PageContent from 'component/common/PageContent'; +import { PageContent } from 'component/common/PageContent/PageContent'; import AccessContext from 'contexts/AccessContext'; -import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle'; +import { PageHeader } from 'component/common/PageHeader/PageHeader'; import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton'; import { CREATE_PROJECT } from 'component/providers/AccessProvider/permissions'; import { Add } from '@mui/icons-material'; @@ -140,8 +140,8 @@ export const ProjectListNew = () => { />
{ return ( { return ( - } + header={} > +
-

- Strategies -

-
-
- -
+
- New strategy - - - + id="useId-0" + > + + +
+
-
-
-
    -
  • -
    - + - - -
    - +
    - Roll out to a percentage of your userbase, and ensure that the experience is the same for the user on each visit. -

    -
    -
    - + + + Gradual rollout + + + +

    + Roll out to a percentage of your userbase, and ensure that the experience is the same for the user on each visit. +

    +
    +
    + + + +
    +
    - -
    -
    - -
    -
    - -
    -
    • -
+ + + + Delete strategy + + + +
+ + +
,
{ if (!strategy) return null; return ( { }; let header = ( - { ); }; return ( - + 0} diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap index 0d5806fef7..194b4e43a4 100644 --- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap +++ b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap @@ -2,71 +2,71 @@ exports[`renders an empty list correctly 1`] = ` [ -
+
-

- Tag Types -

-
-
- +
+

+ Tag Types +

+
+
+ +
+
-
-
-
    -
  • - No entries -
    • -
+
  • + No entries +
    • + +
    ,