@centreon/ui 23.10.21-MON-19322-dashboard-pages-layout-component.0 → 23.10.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.21-MON-19322-dashboard-pages-layout-component.0",
+  "version": "23.10.21",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Dashboard/DashboardLayout.stories.tsx

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 import { ComponentMeta } from '@storybook/react';
 import { Layout } from 'react-grid-layout';
 
@@ -60,18 +62,18 @@ const generateLayout = (maxElements: number): Array<CustomLayout> => {
 };
 
 interface DashboardTemplateProps {
-  header?: JSX.Element;
+  header?: ReactElement;
   layout?: Array<CustomLayout>;
 }
 
-const Header = (): JSX.Element => (
+const Header = (): ReactElement => (
   <Typography variant="body2">The title</Typography>
 );
 
 const DashboardTemplate = ({
   header,
   layout = dashboardLayout
-}: DashboardTemplateProps): JSX.Element => (
+}: DashboardTemplateProps): ReactElement => (
   <DashboardLayout.Layout<CustomLayout> layout={layout}>
     {layout.map(({ i, content, shouldUseFluidTypography }) => (
       <DashboardLayout.Item header={header} key={i}>

package/src/Dashboard/Layout.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState } from 'react';
 
 import { Responsive } from '@visx/visx';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
@@ -14,7 +14,7 @@ const ReactGridLayout = WidthProvider(GridLayout);
 
 interface DashboardLayoutProps<T> {
   changeLayout?: (newLayout: Array<Layout>) => void;
-  children: Array<JSX.Element>;
+  children: Array<ReactElement>;
   displayGrid?: boolean;
   layout: Array<T>;
 }
@@ -24,7 +24,7 @@ const Layout = <T extends Layout>({
   changeLayout,
   displayGrid,
   layout
-}: DashboardLayoutProps<T>): JSX.Element => {
+}: DashboardLayoutProps<T>): ReactElement => {
   const { classes } = useDashboardLayoutStyles();
 
   const [columns, setColumns] = useState(getColumnsFromScreenSize());
@@ -45,7 +45,7 @@ const Layout = <T extends Layout>({
     Component: (
       <ResponsiveHeight>
         <Responsive.ParentSize>
-          {({ width, height }): JSX.Element => (
+          {({ width, height }): ReactElement => (
             <div className={classes.container}>
               {displayGrid && (
                 <Grid columns={columns} height={height} width={width} />

package/src/Dashboard/utils.ts

@@ -1,28 +1,28 @@
-import { lt } from 'ramda';
-import { Layout } from 'react-grid-layout';
-
-export const maxColumns = 12;
-const minColumns = 1;
-const breakpoint = 768;
-
-export const rowHeight = 64;
-
-export const getIsSmallScreenSize = (): boolean =>
-  lt(window.innerWidth, breakpoint);
-
-export const getColumnsFromScreenSize = (): number =>
-  getIsSmallScreenSize() ? minColumns : maxColumns;
-
-export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
-  const isSmallScreenSize = getIsSmallScreenSize();
-  if (!isSmallScreenSize) {
-    return layout;
-  }
-
-  return layout
-    .sort((a, b) => a.x + a.y - (b.x + b.y))
-    .map((widget) => ({
-      ...widget,
-      w: 1
-    }));
-};
+import { lt } from 'ramda';
+import { Layout } from 'react-grid-layout';
+
+export const maxColumns = 12;
+const minColumns = 1;
+const breakpoint = 768;
+
+export const rowHeight = 64;
+
+export const getIsSmallScreenSize = (): boolean =>
+  lt(window.innerWidth, breakpoint);
+
+export const getColumnsFromScreenSize = (): number =>
+  getIsSmallScreenSize() ? minColumns : maxColumns;
+
+export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
+  const isSmallScreenSize = getIsSmallScreenSize();
+  if (!isSmallScreenSize) {
+    return layout;
+  }
+
+  return layout
+    .sort((a, b) => a.x + a.y - (b.x + b.y))
+    .map((widget) => ({
+      ...widget,
+      w: 1
+    }));
+};

package/src/ThemeProvider/palettes.ts

@@ -1,231 +1,201 @@
-import { equals } from 'ramda';
-
-import { alpha, PaletteOptions } from '@mui/material';
-
-import { ThemeMode } from '@centreon/ui-context';
-
-declare module '@mui/material/styles/createPalette' {
-  interface TypeAction {
-    acknowledged: string;
-    acknowledgedBackground: string;
-    inDowntime: string;
-    inDowntimeBackground: string;
-  }
-}
-
-declare module '@mui/material/styles' {
-  interface Palette {
-    background: {
-      default: string;
-      listingHeader: string;
-      paper: string;
-    };
-    layout: TypeLayout;
-    pending: {
-      contrastText: string;
-      main: string;
-    };
-    statusBackground: StatusBackground;
-  }
-  interface StatusBackground {
-    error: string;
-    none: string;
-    pending: string;
-    success: string;
-    unknown: string;
-    warning: string;
-  }
-  interface PaletteOptions {
-    layout: TypeLayout;
-    pending: {
-      contrastText: string;
-      main: string;
-    };
-    statusBackground: StatusBackground;
-  }
-
-  interface TypeBackground {
-    listingHeader: string;
-  }
-
-  interface TypeLayout {
-    body: {
-      background: string;
-    };
-    header: {
-      background: string;
-      border: string;
-    };
-  }
-}
-
-declare module '@mui/material/Button' {
-  interface ButtonPropsColorOverrides {
-    pending: true;
-  }
-}
-
-declare module '@mui/material/Badge' {
-  interface BadgePropsColorOverrides {
-    pending: true;
-  }
-}
-
-export const lightPalette: PaletteOptions = {
-  action: {
-    acknowledged: '#67532C',
-    acknowledgedBackground: '#F5F1E9',
-    activatedOpacity: 0.12,
-    active: '#666666',
-    disabled: '#999999',
-    disabledBackground: 'rgba(0, 0, 0, 0.12)',
-    focus: 'rgba(0, 0, 0, 0.12)',
-    focusOpacity: 0.12,
-    hover: 'rgba(0, 0, 0, 0.06)',
-    hoverOpacity: 0.06,
-    inDowntime: '#4B2352',
-    inDowntimeBackground: '#F0E9F8',
-    selected: 'rgba(102, 102, 102, 0.3)',
-    selectedOpacity: 0.3
-  },
-  background: {
-    default: '#F4F4F4',
-    listingHeader: '#666666',
-    paper: '#FFFFFF'
-  },
-  divider: '#E3E3E3',
-  error: {
-    contrastText: '#000',
-    main: '#FF4A4A'
-  },
-  info: {
-    contrastText: '#000',
-    main: '#1588D1'
-  },
-  layout: {
-    body: {
-      background: '#F6F6F6'
-    },
-    header: {
-      background: '#FFFFFF',
-      border: '#E3E3E3'
-    }
-  },
-  mode: ThemeMode.light,
-  pending: {
-    contrastText: '#000',
-    main: '#1EBEB3'
-  },
-  primary: {
-    contrastText: '#fff',
-    dark: '#255891',
-    light: '#cde7fc',
-    main: '#2E68AA'
-  },
-  secondary: {
-    contrastText: '#fff',
-    main: '#C772D6'
-  },
-  statusBackground: {
-    error: '#FF6666',
-    none: alpha('#2E68AA', 0.1),
-    pending: '#1EBEB3',
-    success: '#88B922',
-    unknown: '#E3E3E3',
-    warning: '#FD9B27'
-  },
-  success: {
-    contrastText: '#000',
-    main: '#88B922'
-  },
-  text: {
-    disabled: '#999999',
-    primary: '#000000',
-    secondary: '#666666'
-  },
-  warning: {
-    contrastText: '#000',
-    main: '#FD9B27'
-  }
-};
-
-export const darkPalette: PaletteOptions = {
-  action: {
-    acknowledged: '#67532C',
-    acknowledgedBackground: '#67532C',
-    activatedOpacity: 0.3,
-    active: '#B5B5B5',
-    disabled: '#999999',
-    disabledBackground: '#555555',
-    focus: 'rgba(255, 255, 255, 0.30)',
-    focusOpacity: 0.3,
-    hover: 'rgba(255, 255, 255, 0.16)',
-    hoverOpacity: 0.16,
-    inDowntime: '#4B2352',
-    inDowntimeBackground: '#4B2352',
-    selected: 'rgba(255, 255, 255, 0.5)',
-    selectedOpacity: 0.5
-  },
-  background: {
-    default: '#4a4a4a',
-    listingHeader: '#666666',
-    paper: '#212121'
-  },
-  divider: '#666666',
-  error: {
-    contrastText: '#fff',
-    main: '#D60101'
-  },
-  info: {
-    contrastText: '#fff',
-    main: '#1CA9F4'
-  },
-  layout: {
-    body: {
-      background: '#F6F6F6'
-    },
-    header: {
-      background: '#FFFFFF',
-      border: '#E3E3E3'
-    }
-  },
-  mode: ThemeMode.dark,
-  pending: {
-    contrastText: '#fff',
-    main: '#118077'
-  },
-  primary: {
-    contrastText: '#000',
-    dark: '#4974A5',
-    light: '#8bbff9',
-    main: '#6eaff8'
-  },
-  secondary: {
-    contrastText: '#fff',
-    main: '#7C1FA2'
-  },
-  statusBackground: {
-    error: '#D60101',
-    none: alpha('#2E68AA', 0.1),
-    pending: '#118077',
-    success: '#5F8118',
-    unknown: '#666666',
-    warning: '#C55400'
-  },
-  success: {
-    contrastText: '#fff',
-    main: '#5F8118'
-  },
-  text: {
-    disabled: '#666666',
-    primary: '#FFFFFF',
-    secondary: '#CCCCCC'
-  },
-  warning: {
-    contrastText: '#fff',
-    main: '#C55400'
-  }
-};
-
-export const getPalette = (mode: ThemeMode): PaletteOptions =>
-  equals(mode, ThemeMode.dark) ? darkPalette : lightPalette;
+import { equals } from 'ramda';
+
+import { alpha, PaletteOptions } from '@mui/material';
+
+import { ThemeMode } from '@centreon/ui-context';
+
+declare module '@mui/material/styles/createPalette' {
+  interface TypeAction {
+    acknowledged: string;
+    acknowledgedBackground: string;
+    inDowntime: string;
+    inDowntimeBackground: string;
+  }
+}
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    background: {
+      default: string;
+      listingHeader: string;
+      paper: string;
+    };
+    pending: {
+      contrastText: string;
+      main: string;
+    };
+    statusBackground: StatusBackground;
+  }
+  interface StatusBackground {
+    error: string;
+    none: string;
+    pending: string;
+    success: string;
+    unknown: string;
+    warning: string;
+  }
+  interface PaletteOptions {
+    pending: {
+      contrastText: string;
+      main: string;
+    };
+    statusBackground: StatusBackground;
+  }
+
+  interface TypeBackground {
+    listingHeader: string;
+  }
+}
+
+declare module '@mui/material/Button' {
+  interface ButtonPropsColorOverrides {
+    pending: true;
+  }
+}
+
+declare module '@mui/material/Badge' {
+  interface BadgePropsColorOverrides {
+    pending: true;
+  }
+}
+
+export const lightPalette: PaletteOptions = {
+  action: {
+    acknowledged: '#67532C',
+    acknowledgedBackground: '#F5F1E9',
+    activatedOpacity: 0.12,
+    active: '#666666',
+    disabled: '#999999',
+    disabledBackground: 'rgba(0, 0, 0, 0.12)',
+    focus: 'rgba(0, 0, 0, 0.12)',
+    focusOpacity: 0.12,
+    hover: 'rgba(0, 0, 0, 0.06)',
+    hoverOpacity: 0.06,
+    inDowntime: '#4B2352',
+    inDowntimeBackground: '#F0E9F8',
+    selected: 'rgba(102, 102, 102, 0.3)',
+    selectedOpacity: 0.3
+  },
+  background: {
+    default: '#F4F4F4',
+    listingHeader: '#666666',
+    paper: '#FFFFFF'
+  },
+  divider: '#E3E3E3',
+  error: {
+    contrastText: '#000',
+    main: '#FF4A4A'
+  },
+  info: {
+    contrastText: '#000',
+    main: '#1588D1'
+  },
+  mode: ThemeMode.light,
+  pending: {
+    contrastText: '#000',
+    main: '#1EBEB3'
+  },
+  primary: {
+    contrastText: '#fff',
+    dark: '#255891',
+    light: '#cde7fc',
+    main: '#2E68AA'
+  },
+  secondary: {
+    contrastText: '#fff',
+    main: '#C772D6'
+  },
+  statusBackground: {
+    error: '#FF6666',
+    none: alpha('#2E68AA', 0.1),
+    pending: '#1EBEB3',
+    success: '#88B922',
+    unknown: '#E3E3E3',
+    warning: '#FD9B27'
+  },
+  success: {
+    contrastText: '#000',
+    main: '#88B922'
+  },
+  text: {
+    disabled: '#999999',
+    primary: '#000000',
+    secondary: '#666666'
+  },
+  warning: {
+    contrastText: '#000',
+    main: '#FD9B27'
+  }
+};
+
+export const darkPalette: PaletteOptions = {
+  action: {
+    acknowledged: '#67532C',
+    acknowledgedBackground: '#67532C',
+    activatedOpacity: 0.3,
+    active: '#B5B5B5',
+    disabled: '#999999',
+    disabledBackground: '#555555',
+    focus: 'rgba(255, 255, 255, 0.30)',
+    focusOpacity: 0.3,
+    hover: 'rgba(255, 255, 255, 0.16)',
+    hoverOpacity: 0.16,
+    inDowntime: '#4B2352',
+    inDowntimeBackground: '#4B2352',
+    selected: 'rgba(255, 255, 255, 0.5)',
+    selectedOpacity: 0.5
+  },
+  background: {
+    default: '#4a4a4a',
+    listingHeader: '#666666',
+    paper: '#212121'
+  },
+  divider: '#666666',
+  error: {
+    contrastText: '#fff',
+    main: '#D60101'
+  },
+  info: {
+    contrastText: '#fff',
+    main: '#1CA9F4'
+  },
+  mode: ThemeMode.dark,
+  pending: {
+    contrastText: '#fff',
+    main: '#118077'
+  },
+  primary: {
+    contrastText: '#000',
+    dark: '#4974A5',
+    light: '#8bbff9',
+    main: '#6eaff8'
+  },
+  secondary: {
+    contrastText: '#fff',
+    main: '#7C1FA2'
+  },
+  statusBackground: {
+    error: '#D60101',
+    none: alpha('#2E68AA', 0.1),
+    pending: '#118077',
+    success: '#5F8118',
+    unknown: '#666666',
+    warning: '#C55400'
+  },
+  success: {
+    contrastText: '#fff',
+    main: '#5F8118'
+  },
+  text: {
+    disabled: '#666666',
+    primary: '#FFFFFF',
+    secondary: '#CCCCCC'
+  },
+  warning: {
+    contrastText: '#fff',
+    main: '#C55400'
+  }
+};
+
+export const getPalette = (mode: ThemeMode): PaletteOptions =>
+  equals(mode, ThemeMode.dark) ? darkPalette : lightPalette;

package/src/components/Header/Header.styles.ts

@@ -12,6 +12,7 @@ const useStyles = makeStyles()((theme) => ({
       margin: theme.spacing(0, 0, 1.5, 0)
     },
     justifyContent: 'space-between',
+    marginBottom: theme.spacing(2.5),
 
     nav: {
       display: 'flex',

package/src/components/index.ts

@@ -3,4 +3,3 @@ export * from './Modal';
 export * from './Form';
 export * from './Header';
 export * from './DataTable';
-export * from './Layout';

package/src/index.ts

@@ -138,6 +138,8 @@ export { default as ActionsList } from './ActionsList';
 
 export type { ResponseError, CatchErrorProps } from './api/customFetch';
 
+export * from './layout/TiledListingPage';
+
 export * from './utils';
 export { default as FluidTypography } from './Typography/FluidTypography';
 export * from './Dashboard';

package/src/layout/TiledListingPage/TiledListingActions.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+import { useTiledListingActionsStyles } from './TiledListingPage.styles';
+
+interface TiledListingActionsProps {
+  children: Array<ReactNode> | ReactNode;
+}
+
+export const TiledListingActions = ({
+  children
+}: TiledListingActionsProps): JSX.Element => {
+  const { classes } = useTiledListingActionsStyles();
+
+  return <div className={classes.actions}>{children}</div>;
+};

package/src/layout/TiledListingPage/TiledListingContent.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import Responsive from '../../Responsive';
+
+import { useTiledListingActionsStyles } from './TiledListingPage.styles';
+
+interface TiledListingContentProps {
+  children: ReactNode;
+}
+
+export const TiledListingContent = ({
+  children
+}: TiledListingContentProps): JSX.Element => {
+  const { classes } = useTiledListingActionsStyles();
+
+  return (
+    <Responsive>
+      <div className={classes.actions}>{children}</div>
+    </Responsive>
+  );
+};

package/src/layout/TiledListingPage/TiledListingList.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+interface TiledListingListProps {
+  children: Array<ReactNode>;
+}
+
+export const TiledListingList = ({
+  children
+}: TiledListingListProps): JSX.Element => {
+  return <div>{children}</div>;
+};

package/src/layout/TiledListingPage/TiledListingPage.styles.ts

@@ -0,0 +1,16 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useTiledListPageStyles = makeStyles()((theme) => ({
+  listPage: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    padding: theme.spacing(1.5)
+  }
+}));
+
+export const useTiledListingActionsStyles = makeStyles()((theme) => ({
+  actions: {
+    paddingBottom: theme.spacing(2.5)
+  }
+}));

package/src/layout/TiledListingPage/TiledListingPage.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+import { useTiledListPageStyles } from './TiledListingPage.styles';
+
+interface TiledListingPageProps {
+  children: Array<ReactNode>;
+}
+
+export const TiledListingPage = ({
+  children
+}: TiledListingPageProps): JSX.Element => {
+  const { classes } = useTiledListPageStyles();
+
+  return <div className={classes.listPage}>{children}</div>;
+};

package/src/layout/TiledListingPage/index.ts

@@ -0,0 +1,4 @@
+export * from './TiledListingPage';
+export * from './TiledListingActions';
+export * from './TiledListingList';
+export * from './TiledListingContent';

package/src/screens/dashboard/DashboardsOverview.stories.tsx

@@ -15,7 +15,12 @@ import {
   Modal
 } from '../../components';
 import { Default as DashboardFormDefaultStory } from '../../components/Form/Dashboard/DashboardForm.stories';
-import { PageLayout } from '../../components/Layout/PageLayout';
+import {
+  TiledListingActions,
+  TiledListingContent,
+  TiledListingList,
+  TiledListingPage
+} from '../../layout/TiledListingPage';
 
 const meta: Meta = {
   args: {
@@ -59,9 +64,6 @@ const meta: Meta = {
     },
     title: 'Dashboards overview'
   },
-  parameters: {
-    layout: 'fullscreen'
-  },
   title: 'screens/Dashboards'
 };
 
@@ -132,12 +134,10 @@ const DefaultView = (args): JSX.Element => {
   };
 
   return (
-    <PageLayout>
-      <PageLayout.Header>
-        <Header title={title} />
-      </PageLayout.Header>
-      <PageLayout.Body>
-        <PageLayout.Actions>
+    <TiledListingPage>
+      <Header title={title} />
+      <TiledListingList>
+        <TiledListingActions>
           {dataDashboards.length !== 0 && (
             <Button
               aria-label="add"
@@ -150,105 +150,101 @@ const DefaultView = (args): JSX.Element => {
               {actions.create.label}
             </Button>
           )}
-        </PageLayout.Actions>
-
-        <DataTable isEmpty={dataDashboards.length === 0}>
-          {dataDashboards.length === 0 ? (
-            <DataTable.EmptyState
-              labels={list.emptyState.labels}
-              onCreate={() =>
+        </TiledListingActions>
+        <TiledListingContent>
+          <DataTable isEmpty={dataDashboards.length === 0}>
+            {dataDashboards.length === 0 ? (
+              <DataTable.EmptyState
+                labels={list.emptyState.labels}
+                onCreate={() =>
+                  setDialogState({ item: null, open: true, variant: 'create' })
+                }
+              />
+            ) : (
+              dataDashboards.map((dashboard) => (
+                <DataTable.Item
+                  hasActions
+                  hasCardAction
+                  description={dashboard.description}
+                  key={dashboard.id}
+                  title={dashboard.name}
+                  onDelete={() =>
+                    setDeleteDialogState({ item: dashboard, open: true })
+                  }
+                  onEdit={() =>
+                    setDialogState({
+                      item: dashboard,
+                      open: true,
+                      variant: 'update'
+                    })
+                  }
+                />
+              ))
+            )}
+          </DataTable>
+        </TiledListingContent>
+        <Modal
+          open={dialogState.open}
+          onClose={() =>
+            setDialogState({
+              item: null,
+              open: false,
+              variant: dialogState.variant
+            })
+          }
+        >
+          <Modal.Header>
+            {form.labels.title[dialogState.variant ?? 'create']}
+          </Modal.Header>
+          <Modal.Body>
+            <DashboardForm
+              labels={DashboardFormDefaultStory!.args!.labels!}
+              resource={dialogState.item || undefined}
+              variant={dialogState.variant}
+              onCancel={() =>
                 setDialogState({
                   item: null,
-                  open: true,
-                  variant: 'create'
+                  open: false,
+                  variant: dialogState.variant
                 })
               }
+              onSubmit={(values) =>
+                dialogState.variant === 'create'
+                  ? createDashboard(values)
+                  : updateDashboard(values)
+              }
             />
-          ) : (
-            dataDashboards.map((dashboard) => (
-              <DataTable.Item
-                hasActions
-                hasCardAction
-                description={dashboard.description}
-                key={dashboard.id}
-                title={dashboard.name}
-                onDelete={() =>
-                  setDeleteDialogState({ item: dashboard, open: true })
-                }
-                onEdit={() =>
-                  setDialogState({
-                    item: dashboard,
-                    open: true,
-                    variant: 'update'
-                  })
-                }
-              />
-            ))
-          )}
-        </DataTable>
-      </PageLayout.Body>
-
-      <Modal
-        open={dialogState.open}
-        onClose={() =>
-          setDialogState({
-            item: null,
-            open: false,
-            variant: dialogState.variant
-          })
-        }
-      >
-        <Modal.Header>
-          {form.labels.title[dialogState.variant ?? 'create']}
-        </Modal.Header>
-        <Modal.Body>
-          <DashboardForm
-            labels={DashboardFormDefaultStory!.args!.labels!}
-            resource={dialogState.item || undefined}
-            variant={dialogState.variant}
-            onCancel={() =>
-              setDialogState({
-                item: null,
-                open: false,
-                variant: dialogState.variant
-              })
-            }
-            onSubmit={(values) =>
-              dialogState.variant === 'create'
-                ? createDashboard(values)
-                : updateDashboard(values)
-            }
+          </Modal.Body>
+        </Modal>
+        <Modal
+          open={deleteDialogState.open}
+          onClose={() =>
+            setDeleteDialogState({
+              ...deleteDialogState,
+              open: false
+            })
+          }
+        >
+          <Modal.Header>{deleteConfirmation.labels.title}</Modal.Header>
+          <Modal.Body>
+            <p>
+              {deleteConfirmation.labels.description(
+                deleteDialogState.item?.name
+              )}
+            </p>
+          </Modal.Body>
+          <Modal.Actions
+            isDanger
+            labels={deleteConfirmation.labels.actions}
+            onCancel={() => setDeleteDialogState({ item: null, open: false })}
+            onConfirm={() => {
+              deleteDashboard(deleteDialogState.item?.id);
+              setDeleteDialogState({ item: null, open: false });
+            }}
           />
-        </Modal.Body>
-      </Modal>
-      <Modal
-        open={deleteDialogState.open}
-        onClose={() =>
-          setDeleteDialogState({
-            ...deleteDialogState,
-            open: false
-          })
-        }
-      >
-        <Modal.Header>{deleteConfirmation.labels.title}</Modal.Header>
-        <Modal.Body>
-          <p>
-            {deleteConfirmation.labels.description(
-              deleteDialogState.item?.name
-            )}
-          </p>
-        </Modal.Body>
-        <Modal.Actions
-          isDanger
-          labels={deleteConfirmation.labels.actions}
-          onCancel={() => setDeleteDialogState({ item: null, open: false })}
-          onConfirm={() => {
-            deleteDashboard(deleteDialogState.item?.id);
-            setDeleteDialogState({ item: null, open: false });
-          }}
-        />
-      </Modal>
-    </PageLayout>
+        </Modal>
+      </TiledListingList>
+    </TiledListingPage>
   );
 };
 

package/src/components/Layout/AreaIndicator.styles.ts

@@ -1,31 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()((theme) => ({
-  areaIndicator: {
-    '& .areaIndicator': {
-      left: theme.spacing(10)
-    },
-    '& label:first-of-type': {
-      fontSize: '0.75rem',
-      fontWeight: 500,
-      left: theme.spacing(1),
-      position: 'absolute',
-      top: theme.spacing(0.75)
-    },
-    '&[data-depth="1"]': {
-      '& label:first-of-type': {
-        '&:before': {
-          content: '"+ "'
-        },
-        left: theme.spacing(10)
-      }
-    },
-
-    backgroundColor: '#9747FF19',
-    borderRadius: '4px',
-    color: '#9747FFFF',
-    minHeight: theme.spacing(4),
-
-    position: 'relative'
-  }
-}));

package/src/components/Layout/AreaIndicator.tsx

@@ -1,35 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './AreaIndicator.styles';
-
-type AreaIndicatorProps = {
-  children?: ReactNode | Array<ReactNode>;
-  depth?: number;
-  height?: number | string;
-  name: string;
-  width?: number | string;
-};
-
-const AreaIndicator = ({
-  children,
-  name = 'area',
-  width = '100%',
-  height = '100%',
-  depth = 0
-}: AreaIndicatorProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <div
-      className={classes.areaIndicator}
-      data-depth={depth}
-      style={{ height, width }}
-    >
-      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-      <label>{name}</label>
-      {children}
-    </div>
-  );
-};
-
-export { AreaIndicator };

package/src/components/Layout/PageLayout/PageLayout.stories.tsx

@@ -1,62 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { AreaIndicator } from '../AreaIndicator';
-
-import { PageLayout } from './index';
-
-const meta: Meta<typeof PageLayout> = {
-  argTypes: {
-    variant: {
-      control: {
-        options: ['default', 'fixed-header']
-      }
-    }
-  },
-  component: PageLayout,
-  parameters: {
-    layout: 'fullscreen'
-  }
-};
-
-export default meta;
-type Story = StoryObj<typeof PageLayout>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <PageLayout.Header>
-          <AreaIndicator name="header" />
-        </PageLayout.Header>
-        <PageLayout.Body>
-          <AreaIndicator height="100vh" name="body">
-            <PageLayout.Actions>
-              <AreaIndicator depth={1} name="actions" />
-            </PageLayout.Actions>
-          </AreaIndicator>
-        </PageLayout.Body>
-      </>
-    ),
-    variant: 'default'
-  }
-};
-
-export const FixedHeader: Story = {
-  args: {
-    children: (
-      <>
-        <PageLayout.Header>
-          <AreaIndicator name="header" />
-        </PageLayout.Header>
-        <PageLayout.Body hasBackground>
-          <AreaIndicator height="100vh" name="body">
-            <PageLayout.Actions>
-              <AreaIndicator depth={1} name="actions" />
-            </PageLayout.Actions>
-          </AreaIndicator>
-        </PageLayout.Body>
-      </>
-    ),
-    variant: 'fixed-header'
-  }
-};

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -1,30 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()((theme) => ({
-  pageLayout: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%'
-  },
-  pageLayoutActions: {
-    paddingBottom: theme.spacing(2.5)
-  },
-  pageLayoutBody: {
-    '&[data-has-background="true"]': {
-      backgroundColor: theme.palette.layout.body.background
-    },
-    padding: theme.spacing(3, 4, 5)
-  },
-  pageLayoutHeader: {
-    '[data-variant="fixed-header"] &': {
-      backgroundColor: theme.palette.layout.header.background,
-      borderBottom: `1px solid ${theme.palette.layout.header.border}`,
-      padding: theme.spacing(5, 4, 2),
-      position: 'sticky',
-      top: 0,
-      zIndex: `calc(${theme.zIndex.mobileStepper} - 100)`
-    },
-
-    padding: theme.spacing(5, 4, 0)
-  }
-}));

package/src/components/Layout/PageLayout/PageLayout.tsx

@@ -1,21 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './PageLayout.styles';
-
-type PageLayoutProps = {
-  children: Array<ReactNode> | ReactNode;
-  variant?: 'default' | 'fixed-header';
-};
-
-export const PageLayout = ({
-  children,
-  variant = 'default'
-}: PageLayoutProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <section className={classes.pageLayout} data-variant={variant}>
-      {children}
-    </section>
-  );
-};

package/src/components/Layout/PageLayout/PageLayoutActions.tsx

@@ -1,15 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './PageLayout.styles';
-
-type PageLayoutActionsProps = {
-  children: Array<ReactNode> | ReactNode;
-};
-
-export const PageLayoutActions = ({
-  children
-}: PageLayoutActionsProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return <section className={classes.pageLayoutActions}>{children}</section>;
-};

package/src/components/Layout/PageLayout/PageLayoutBody.tsx

@@ -1,24 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './PageLayout.styles';
-
-type PageLayoutBodyProps = {
-  children: Array<ReactNode> | ReactNode;
-  hasBackground?: boolean;
-};
-
-export const PageLayoutBody = ({
-  children,
-  hasBackground = false
-}: PageLayoutBodyProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <section
-      className={classes.pageLayoutBody}
-      data-has-background={hasBackground}
-    >
-      {children}
-    </section>
-  );
-};

package/src/components/Layout/PageLayout/PageLayoutHeader.tsx

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-
-import { useStyles } from './PageLayout.styles';
-
-type PageLayoutHeaderProps = {
-  children: Array<ReactNode> | ReactNode;
-};
-
-export const PageLayoutHeader = ({
-  children
-}: PageLayoutHeaderProps): JSX.Element => {
-  const { classes } = useStyles();
-
-  return <header className={classes.pageLayoutHeader}>{children}</header>;
-};

package/src/components/Layout/PageLayout/index.ts

@@ -1,10 +0,0 @@
-import { PageLayout as PageLayoutRoot } from './PageLayout';
-import { PageLayoutHeader } from './PageLayoutHeader';
-import { PageLayoutBody } from './PageLayoutBody';
-import { PageLayoutActions } from './PageLayoutActions';
-
-export const PageLayout = Object.assign(PageLayoutRoot, {
-  Actions: PageLayoutActions,
-  Body: PageLayoutBody,
-  Header: PageLayoutHeader
-});

package/src/components/Layout/index.ts

@@ -1 +0,0 @@
-export * from './PageLayout';