Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-04 01:18:20 +02:00
Code Issues Projects Releases Wiki Activity

Refactor: page container (#967)

Browse Source 
* refactor: page container

* refactor: table page header
This commit is contained in:
Tymoteusz Czech 2022-05-09 14:38:12 +02:00 committed by GitHub
parent cd37624de4
commit 44c579f7a8
46 changed files with 564 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/component/addons/AddonForm/AddonForm.tsx
View File

@ -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<IAddonFormProps> = ({
} = provider ? provider : ({} as Partial<IAddonProvider>);
return (
<PageContent headerContent={`Configure ${name} addon`}>
<PageContent header={`Configure ${name} addon`}>
<section className={styles.formSection}>
{description}&nbsp;
<a href={documentationUrl} target="_blank" rel="noreferrer">

4
frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx
View File

@ -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 = ({
</ListItem>
);
return (
<PageContent headerContent="Available addons">
<PageContent header="Available addons">
<List>
{providers.map((provider: IProvider) =>
renderProvider(provider)

4
frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
View File

@ -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) => {
</ListItem>
);
return (
<PageContent headerContent="Configured addons">
<PageContent header="Configured addons">
<List>
{sortAddons(addons).map((addon: IAddon) => renderAddon(addon))}
</List>

8
frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx
View File

@ -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 (
<PageContent
headerContent={
<HeaderTitle
header={
<PageHeader
title="API Access"
actions={
<ConditionallyRender

4
frontend/src/component/admin/auth/AuthSettings.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import AdminMenu from '../menu/AdminMenu';
import { Alert } from '@mui/material';
import PageContent from 'component/common/PageContent/PageContent';
import { PageContent } from 'component/common/PageContent/PageContent';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { OidcAuth } from './OidcAuth/OidcAuth';
@ -35,7 +35,7 @@ export const AuthSettings = () => {
return (
<div>
<AdminMenu />
<PageContent headerContent="Single Sign-On">
<PageContent header="Single Sign-On">
<ConditionallyRender
condition={authenticationType === 'enterprise'}
show={<TabNav tabData={tabs} />}

4
frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx
View File

@ -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 (
<PageContent headerContent="">
<PageContent>
<Grid container style={{ marginBottom: '1rem' }}>
<Grid item xs={12}>
<Alert severity="info">

4
frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
View File

@ -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 (
<PageContent headerContent="">
<PageContent>
<Grid container style={{ marginBottom: '1rem' }}>
<Grid item md={12}>
<Alert severity="info">

4
frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx
View File

@ -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 (
<PageContent headerContent="">
<PageContent>
<form onSubmit={onSubmit}>
<Grid container spacing={3} mb={2}>
<Grid item md={5}>

4
frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx
View File

@ -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 (
<PageContent headerContent="">
<PageContent>
<Grid container style={{ marginBottom: '1rem' }}>
<Grid item md={12}>
<Alert severity="info">

8
frontend/src/component/admin/invoice/InvoiceList.tsx
View File

@ -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={
<PageContent
headerContent={
<HeaderTitle
header={
<PageHeader
title="Invoices"
actions={
<Button

8
frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.tsx
View File

@ -3,8 +3,8 @@ import { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import AccessContext from 'contexts/AccessContext';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
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 { ADMIN } from 'component/providers/AccessProvider/permissions';
import AdminMenu from 'component/admin/menu/AdminMenu';
import { useStyles } from './ProjectRoles.styles';
@ -21,8 +21,8 @@ const ProjectRoles = () => {
<AdminMenu />
<PageContent
bodyClass={styles.rolesListBody}
headerContent={
<HeaderTitle
header={
<PageHeader
title="Project Roles"
actions={
<ConditionallyRender

8
frontend/src/component/admin/users/UsersAdmin.tsx
View File

@ -1,13 +1,13 @@
import { useContext, useState } from 'react';
import UsersList from './UsersList/UsersList';
import AdminMenu from '../menu/AdminMenu';
import PageContent from 'component/common/PageContent/PageContent';
import { PageContent } from 'component/common/PageContent/PageContent';
import AccessContext from 'contexts/AccessContext';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { ADMIN } from 'component/providers/AccessProvider/permissions';
import { Button } from '@mui/material';
import { TableActions } from 'component/common/Table/TableActions/TableActions';
import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { useStyles } from './UserAdmin.styles';
import { useNavigate } from 'react-router-dom';
import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
@ -23,8 +23,8 @@ const UsersAdmin = () => {
<AdminMenu />
<PageContent
bodyClass={styles.userListBody}
headerContent={
<HeaderTitle
header={
<PageHeader
title="Users"
actions={
<ConditionallyRender

8
frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
View File

@ -15,8 +15,8 @@ import { ApplicationView } from '../ApplicationView/ApplicationView';
import { ApplicationUpdate } from '../ApplicationUpdate/ApplicationUpdate';
import { TabNav } from 'component/common/TabNav/TabNav/TabNav';
import { Dialogue } from 'component/common/Dialogue/Dialogue';
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 AccessContext from 'contexts/AccessContext';
import useApplicationsApi from 'hooks/api/actions/useApplicationsApi/useApplicationsApi';
import useApplication from 'hooks/api/getters/useApplication/useApplication';
@ -92,8 +92,8 @@ export const ApplicationEdit = () => {
}
return (
<PageContent
headerContent={
<HeaderTitle
header={
<PageHeader
titleElement={
<span
style={{

6
frontend/src/component/application/ApplicationList/ApplicationList.tsx
View File

@ -3,8 +3,8 @@ import { CircularProgress } from '@mui/material';
import { Warning } from '@mui/icons-material';
import { AppsLinkList, styles as themeStyles } from 'component/common';
import { SearchField } from 'component/common/SearchField/SearchField';
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 useApplications from 'hooks/api/getters/useApplications/useApplications';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@ -47,7 +47,7 @@ export const ApplicationList = () => {
<div className={themeStyles.searchField}>
<SearchField initialValue={filter} updateValue={setFilter} />
</div>
<PageContent headerContent={<HeaderTitle title="Applications" />}>
<PageContent header={<PageHeader title="Applications" />}>
<div className={themeStyles.fullwidth}>
<ConditionallyRender
condition={filteredApplications.length > 0}

52
frontend/src/component/common/HeaderTitle/HeaderTitle.tsx
View File

@ -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<IHeaderTitleProps> = ({
title,
titleElement,
actions,
subtitle,
variant,
loading,
className = '',
}) => {
const { classes: styles } = useStyles();
const headerClasses = classnames({ skeleton: loading });
usePageTitle(title);
return (
<div className={styles.headerTitleContainer}>
<div className={headerClasses} data-loading>
<Typography
variant={variant || 'h1'}
className={classnames(styles.headerTitle, className)}
>
{titleElement || title}
</Typography>
{subtitle && <small>{subtitle}</small>}
</div>
<ConditionallyRender
condition={Boolean(actions)}
show={<div className={styles.headerActions}>{actions}</div>}
/>
</div>
);
};

18
frontend/src/component/common/HeaderTitle/styles.ts
View File

@ -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,
},
}));

63
frontend/src/component/common/PageContent/PageContent.jsx
View File

@ -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 = (
<div className={headerClasses}>
<HeaderTitle title={headerContent} />
</div>
);
} else {
header = <div className={headerClasses}>{headerContent}</div>;
}
}
const paperProps = disableBorder ? { elevation: 0 } : {};
return (
<Paper
{...rest}
{...paperProps}
style={{ borderRadius: '10px', boxShadow: 'none' }}
>
{header}
<div className={bodyClasses}>{children}</div>
</Paper>
);
};
export default PageContent;
PageContent.propTypes = {
headerContent: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
disablePadding: PropTypes.bool,
disableBorder: PropTypes.bool,
};

8
frontend/src/component/common/PageContent/styles.ts → frontend/src/component/common/PageContent/PageContent.styles.ts
View File

@ -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',
},

72
frontend/src/component/common/PageContent/PageContent.tsx Normal file
View File

@ -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<IPageContentProps> = ({
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 (
<div ref={ref}>
<Paper
{...rest}
{...paperProps}
className={classnames(styles.container, className)}
>
<ConditionallyRender
condition={Boolean(header)}
show={
<div className={headerClasses}>
<ConditionallyRender
condition={typeof header === 'string'}
show={<PageHeader title={header as string} />}
elseShow={header}
/>
</div>
}
/>
<div className={bodyClasses}>{children}</div>
</Paper>
</div>
);
};

3
frontend/src/component/common/PageContent/index.jsx
View File

@ -1,3 +0,0 @@
import PageContent from './PageContent';
export default PageContent;

27
frontend/src/component/common/Table/TableToolbar/TableToolbar.styles.ts → frontend/src/component/common/PageHeader/PageHeader.styles.ts
View File

@ -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),

71
frontend/src/component/common/PageHeader/PageHeader.tsx Normal file
View File

@ -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<IPageHeaderProps> & { Divider: VFC } = ({
title,
titleElement,
actions,
subtitle,
variant,
loading,
className = '',
children,
}) => {
const { classes: styles } = useStyles();
const headerClasses = classnames({ skeleton: loading });
usePageTitle(title);
return (
<div className={styles.headerContainer}>
<div className={styles.topContainer}>
<div className={headerClasses} data-loading>
<Typography
variant={variant || 'h1'}
className={classnames(styles.headerTitle, className)}
>
{titleElement || title}
</Typography>
{subtitle && <small>{subtitle}</small>}
</div>
<ConditionallyRender
condition={Boolean(actions)}
show={<div className={styles.headerActions}>{actions}</div>}
/>
</div>
{children}
</div>
);
};
const PageHeaderDivider: VFC = () => {
const { classes: styles } = useStyles();
return (
<Divider
orientation="vertical"
variant="middle"
className={styles.verticalSeparator}
/>
);
};
PageHeaderComponent.Divider = PageHeaderDivider;
export const PageHeader = PageHeaderComponent;

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

@ -1,8 +0,0 @@
import { FC } from 'react';
import { Box, Table as MUITable } from '@mui/material';
export const Table: FC = ({ children }) => (
<Box sx={{ p: 4, pb: 0 }}>
<MUITable>{children}</MUITable>
</Box>
);

3
frontend/src/component/common/Table/TableContainer/TableContainer.tsx
View File

@ -2,6 +2,9 @@ import { forwardRef } from 'react';
import { Paper, PaperProps } from '@mui/material';
import { useStyles } from './TableContainer.styles';
/**
* @deprecated
*/
export const TableContainer = forwardRef<HTMLDivElement, PaperProps>(
({ children, ...props }, ref) => {
const { classes } = useStyles();

37
frontend/src/component/common/Table/TableToolbar/TableToolbar.tsx
View File

@ -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<ITableToolbarProps> & {
Divider: VFC;
} = ({ title, children }) => {
const { classes: styles } = useStyles();
return (
<Toolbar className={styles.toolbar}>
<HeaderTitle title={title} data-loading />
<Box className={styles.actions}>{children}</Box>
</Toolbar>
);
};
const ToolbarDivider: VFC = () => {
const { classes: styles } = useStyles();
return (
<Divider
orientation="vertical"
variant="middle"
className={styles.verticalSeparator}
/>
);
};
TableToolbarComponent.Divider = ToolbarDivider;
export const TableToolbar = TableToolbarComponent;

5
frontend/src/component/common/Table/index.ts
View File

@ -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';

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

@ -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 (
<PageContent
headerContent={
<HeaderTitle
actions={headerButton()}
title={'Context fields'}
/>
header={
<PageHeader actions={headerButton()} title={'Context fields'} />
}
>
<List>

8
frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
View File

@ -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={
<>
<PageContent
headerContent={
<HeaderTitle title="Create environment" />
}
header={<PageHeader title="Create environment" />}
>
<Alert severity="error">
<p>

8
frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx
View File

@ -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 (
<PageContent
headerContent={
<HeaderTitle
header={
<PageHeader
title="Environments"
actions={
<>

8
frontend/src/component/feature/FeatureToggleList/FeatureToggleArchiveList.tsx
View File

@ -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<IFeatureToggleListProps> = ({
</div>
<PageContent
headerContent={
<HeaderTitle
header={
<PageHeader
loading={loading}
title={headerTitle}
actions={

24
frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureToggleListTable.tsx
View File

@ -4,8 +4,6 @@ import { Link as RouterLink } from 'react-router-dom';
import { useGlobalFilter, useSortBy, useTable } from 'react-table';
import useLoading from 'hooks/useLoading';
import {
TableContainer,
TableToolbar,
Table,
SortableTableHeader,
TableBody,
@ -22,6 +20,8 @@ import { FeatureStaleCell } from './FeatureStaleCell/FeatureStaleCell';
import { FeatureTypeCell } from './FeatureTypeCell/FeatureTypeCell';
import { CreateFeatureButton } from '../../CreateFeatureButton/CreateFeatureButton';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
interface IExperimentProps {
data: Record<string, any>[];
@ -106,7 +106,6 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
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,13 +154,18 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
}, [setHiddenColumns, isSmallScreen, isMediumScreen]);
return (
<TableContainer ref={ref}>
<TableToolbar title={`Feature toggles (${data.length})`}>
<PageContent
isLoading={isLoading}
header={
<PageHeader
title={`Feature toggles (${data.length})`}
actions={
<>
<TableSearch
initialValue={globalFilter}
onChange={setGlobalFilter}
/>
<TableToolbar.Divider />
<PageHeader.Divider />
<Link
component={RouterLink}
to="/archive"
@ -174,7 +178,11 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
loading={false}
filter={{ query: '', project: 'default' }}
/>
</TableToolbar>
</>
}
/>
}
>
<SearchHighlightProvider value={globalFilter}>
<Table {...getTableProps()}>
<SortableTableHeader headerGroups={headerGroups} />
@ -215,6 +223,6 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
/>
}
/>
</TableContainer>
</PageContent>
);
};

4
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
View File

@ -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 (
<PageContent headerContent="">
<PageContent>
<Grid
container
component="header"

4
frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx
View File

@ -1,5 +1,5 @@
import { useState } from 'react';
import PageContent from 'component/common/PageContent';
import { PageContent } from 'component/common/PageContent/PageContent';
import { useStyles } from './FeatureSettings.styles';
import { List, ListItem } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@ -17,7 +17,7 @@ export const FeatureSettings = () => {
const [settings, setSettings] = useState(METADATA);
return (
<PageContent headerContent="Settings" bodyClass={styles.bodyContainer}>
<PageContent header="Settings" bodyClass={styles.bodyContainer}>
<div className={styles.innerContainer}>
<div className={styles.listContainer}>
<List>

8
frontend/src/component/history/EventLog/EventLog.jsx
View File

@ -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 = ({
<PageContent
disablePadding={displayInline}
disableBorder={displayInline}
headerContent={
<HeaderTitle
header={
<PageHeader
title={title}
actions={
<FormControlLabel

2
frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
View File

@ -20,8 +20,6 @@ export const useStyles = makeStyles()(theme => ({
padding: '1rem',
},
title: {
fontSize: '1rem',
fontWeight: 'normal',
display: 'unset',
[theme.breakpoints.down(600)]: {
display: 'none',

8
frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
View File

@ -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 = ({
<PageContent
className={styles.container}
bodyClass={styles.bodyClass}
headerContent={
<HeaderTitle
header={
<PageHeader
className={styles.title}
title={`Project feature toggles (${filteredFeatures.length})`}
actions={

8
frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
View File

@ -2,7 +2,7 @@
import React, { useState } from 'react';
import { Alert, SelectChangeEvent } from '@mui/material';
import { ProjectAccessAddUser } from './ProjectAccessAddUser/ProjectAccessAddUser';
import PageContent from 'component/common/PageContent';
import { PageContent } from 'component/common/PageContent/PageContent';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useStyles } from './ProjectAccess.styles';
import usePagination from 'hooks/usePagination';
@ -13,7 +13,7 @@ import useProjectAccess, {
IProjectAccessUser,
} from 'hooks/api/getters/useProjectAccess/useProjectAccess';
import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { ProjectAccessList } from './ProjectAccessList/ProjectAccessList';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
@ -31,7 +31,7 @@ export const ProjectAccess = () => {
if (isOss()) {
return (
<PageContent headerContent={<HeaderTitle title="Project Access" />}>
<PageContent header={<PageHeader title="Project Access" />}>
<Alert severity="error">
Controlling access to projects requires a paid version of
Unleash. Check out{' '}
@ -90,7 +90,7 @@ export const ProjectAccess = () => {
return (
<PageContent
headerContent={<HeaderTitle title="Project Roles"></HeaderTitle>}
header={<PageHeader title="Project Roles"></PageHeader>}
className={styles.pageContent}
>
<ProjectAccessAddUser roles={access?.roles} />

8
frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
View File

@ -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 (
<div ref={ref}>
<PageContent
headerContent={
<HeaderTitle
header={
<PageHeader
title={`Configure environments for "${project?.name}" project`}
/>
}

8
frontend/src/component/project/ProjectList/ProjectList.tsx
View File

@ -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 = () => {
/>
</div>
<PageContent
headerContent={
<HeaderTitle
header={
<PageHeader
title="Projects"
actions={
<ResponsiveButton

8
frontend/src/component/segments/SegmentList/SegmentList.tsx
View File

@ -19,8 +19,8 @@ import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
import { Link, useNavigate } from 'react-router-dom';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
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 PermissionButton from 'component/common/PermissionButton/PermissionButton';
import { SegmentDelete } from '../SegmentDelete/SegmentDelete';
import { SegmentDocsWarning } from 'component/segments/SegmentDocs/SegmentDocs';
@ -90,8 +90,8 @@ export const SegmentsList = () => {
return (
<PageContent
headerContent={
<HeaderTitle
header={
<PageHeader
title="Segments"
actions={
<PermissionButton

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

@ -23,8 +23,8 @@ import {
UPDATE_STRATEGY,
} from 'component/providers/AccessProvider/permissions';
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 { useStyles } from './StrategiesList.styles';
import AccessContext from 'contexts/AccessContext';
import { Dialogue } from 'component/common/Dialogue/Dialogue';
@ -281,9 +281,7 @@ export const StrategiesList = () => {
return (
<PageContent
headerContent={
<HeaderTitle title="Strategies" actions={headerButton()} />
}
header={<PageHeader title="Strategies" actions={headerButton()} />}
>
<Dialogue
open={dialogueMetaData.show}

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

@ -2,20 +2,18 @@
exports[`renders correctly 1`] = `
[
<div>
<div
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-45jkiv-MuiPaper-root"
style={
{
"borderRadius": "10px",
"boxShadow": "none",
}
}
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15amf7-container mui-45jkiv-MuiPaper-root"
>
<div
className="tss-ee3n06-headerContainer"
className="tss-1yjkq3l-headerContainer"
>
<div
className="tss-14s7qul-headerTitleContainer"
className="tss-1ylehva-headerContainer"
>
<div
className="tss-1dw2af8-topContainer"
>
<div
className=""
@ -28,7 +26,7 @@ exports[`renders correctly 1`] = `
</h1>
</div>
<div
className="tss-ap2nhp-headerActions"
className="tss-1u1bjy8-headerActions"
>
<span
id="useId-0"
@ -66,6 +64,7 @@ exports[`renders correctly 1`] = `
</div>
</div>
</div>
</div>
<div
className="tss-kiw3z8-bodyContainer"
>
@ -263,6 +262,7 @@ exports[`renders correctly 1`] = `
</li>
</ul>
</div>
</div>
</div>,
<div
aria-atomic={true}

8
frontend/src/component/strategies/StrategyView/StrategyView.tsx
View File

@ -1,12 +1,12 @@
import { Grid } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import { UPDATE_STRATEGY } from 'component/providers/AccessProvider/permissions';
import PageContent from 'component/common/PageContent/PageContent';
import { PageContent } from 'component/common/PageContent/PageContent';
import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
import { useFeatures } from 'hooks/api/getters/useFeatures/useFeatures';
import useApplications from 'hooks/api/getters/useApplications/useApplications';
import { StrategyDetails } from './StrategyDetails/StrategyDetails';
import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import { Edit } from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@ -32,8 +32,8 @@ export const StrategyView = () => {
if (!strategy) return null;
return (
<PageContent
headerContent={
<HeaderTitle
header={
<PageHeader
title={strategy?.name}
subtitle={strategy?.description}
actions={

8
frontend/src/component/tags/TagTypeList/TagTypeList.tsx
View File

@ -10,8 +10,8 @@ import {
Tooltip,
} from '@mui/material';
import { Add, Delete, Edit, Label } from '@mui/icons-material';
import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
import PageContent from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { PageContent } from 'component/common/PageContent/PageContent';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import {
DELETE_TAG_TYPE,
@ -58,7 +58,7 @@ export const TagTypeList = () => {
};
let header = (
<HeaderTitle
<PageHeader
title="Tag Types"
actions={
<ConditionallyRender
@ -143,7 +143,7 @@ export const TagTypeList = () => {
);
};
return (
<PageContent headerContent={header}>
<PageContent header={header}>
<List>
<ConditionallyRender
condition={tagTypes.length > 0}

20
frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
View File

@ -2,20 +2,18 @@
exports[`renders an empty list correctly 1`] = `
[
<div>
<div
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-45jkiv-MuiPaper-root"
style={
{
"borderRadius": "10px",
"boxShadow": "none",
}
}
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15amf7-container mui-45jkiv-MuiPaper-root"
>
<div
className="tss-ee3n06-headerContainer"
className="tss-1yjkq3l-headerContainer"
>
<div
className="tss-14s7qul-headerTitleContainer"
className="tss-1ylehva-headerContainer"
>
<div
className="tss-1dw2af8-topContainer"
>
<div
className=""
@ -28,7 +26,7 @@ exports[`renders an empty list correctly 1`] = `
</h1>
</div>
<div
className="tss-ap2nhp-headerActions"
className="tss-1u1bjy8-headerActions"
>
<button
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
@ -54,6 +52,7 @@ exports[`renders an empty list correctly 1`] = `
</div>
</div>
</div>
</div>
<div
className="tss-kiw3z8-bodyContainer"
>
@ -68,6 +67,7 @@ exports[`renders an empty list correctly 1`] = `
</li>
</ul>
</div>
</div>
</div>,
<div
aria-atomic={true}

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

@ -89,13 +89,6 @@ export default createTheme({
},
},
components: {
MuiTableHead: {
styleOverrides: {
root: {
background: colors.grey[200],
},
},
},
MuiLink: {
styleOverrides: {
root: {
@ -112,6 +105,13 @@ export default createTheme({
},
},
},
MuiTableHead: {
styleOverrides: {
root: {
background: colors.grey[200],
},
},
},
MuiTableRow: {
styleOverrides: {
root: {
@ -121,5 +121,12 @@ export default createTheme({
},
},
},
MuiTableCell: {
styleOverrides: {
root: {
borderBottomColor: colors.grey[300],
},
},
},
},
});