fix: various DataTable list (#2908)

packages/app-page-builder/src/admin/components/Table/Empty.tsx → packages/app-page-builder/src/admin/components/Table/Empty/index.tsx

@@ -1,24 +1,12 @@
 import React, { ReactElement } from "react";
 
-import styled from "@emotion/styled";
-import { ReactComponent as Add } from "@material-design-icons/svg/filled/add.svg";
 import { i18n } from "@webiny/app/i18n";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
 import { ButtonDefault } from "@webiny/ui/Button";
 
-const t = i18n.ns("app-page-builder/admin/views/pages/table/empty");
-
-const Buttons = styled("div")`
-    > button {
-        margin: 0 8px;
-    }
-`;
+import { Buttons, Icon } from "./styled";
 
-const Icon = styled(Add)`
-    fill: var(--mdc-theme-primary);
-    width: 18px;
-    margin-right: 8px;
-`;
+const t = i18n.ns("app-page-builder/admin/views/pages/table/empty");
 
 interface Props {
     onCreatePage: (event?: React.SyntheticEvent) => void;

packages/app-page-builder/src/admin/components/Table/Empty/styled.tsx

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import { ReactComponent as Add } from "@material-design-icons/svg/filled/add.svg";
+
+export const Buttons = styled("div")`
+    > button {
+        margin: 0 8px;
+    }
+`;
+
+export const Icon = styled(Add)`
+    fill: var(--mdc-theme-primary);
+    width: 18px;
+    margin-right: 8px;
+`;

packages/app-page-builder/src/admin/components/Table/Header/ButtonsCreate/index.tsx

@@ -0,0 +1,34 @@
+import React, { ReactElement } from "react";
+
+import { i18n } from "@webiny/app/i18n";
+import { ButtonIcon, ButtonPrimary, ButtonSecondary } from "@webiny/ui/Button";
+import { ReactComponent as Add } from "@material-design-icons/svg/filled/add.svg";
+
+import { Container } from "./styled";
+
+const t = i18n.ns("app-page-builder/admin/views/pages/table/header/buttons/create");
+
+interface Props {
+    onCreatePage: (event?: React.SyntheticEvent) => void;
+    onCreateFolder: (event?: React.SyntheticEvent) => void;
+}
+
+export const ButtonsCreate = ({ onCreateFolder, onCreatePage }: Props): ReactElement => {
+    return (
+        <Container>
+            <ButtonSecondary data-testid="new-folder-button" onClick={onCreateFolder} small={true}>
+                <ButtonIcon icon={<Add />} />
+                {t`New Folder`}
+            </ButtonSecondary>
+            <ButtonPrimary
+                data-testid="new-page-button"
+                onClick={onCreatePage}
+                flat={true}
+                small={true}
+            >
+                <ButtonIcon icon={<Add />} />
+                {t`New Page`}
+            </ButtonPrimary>
+        </Container>
+    );
+};

packages/app-page-builder/src/admin/components/Table/Header/ButtonsCreate/styled.tsx

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+
+export const Container = styled("div")`
+    display: flex;
+    justify-content: flex-end;
+
+    > button {
+        margin-right: 8px;
+    }
+`;

packages/app-page-builder/src/admin/components/Table/Header/Title/index.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement } from "react";
+import { Name } from "~/admin/components/Table/Header/Title/styled";
+import { Skeleton } from "@webiny/ui/Skeleton";
+
+interface Props {
+    title?: string;
+}
+
+export const Title = ({ title }: Props): ReactElement => {
+    return (
+        <Name use={"headline6"} tag={"h1"}>
+            {title || <Skeleton />}
+        </Name>
+    );
+};

packages/app-page-builder/src/admin/components/Table/Header/Title/styled.tsx

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { Typography, TypographyProps } from "@webiny/ui/Typography";
+
+export const Name = styled(Typography)<TypographyProps>`
+    padding-left: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+`;

packages/app-page-builder/src/admin/components/Table/Header/index.tsx

@@ -0,0 +1,34 @@
+import React, { ReactElement } from "react";
+import { Grid, Cell } from "@webiny/ui/Grid";
+
+import { ButtonsCreate } from "~/admin/components/Table/Header/ButtonsCreate";
+import { Title } from "~/admin/components/Table/Header/Title";
+
+import { Container } from "./styled";
+
+interface Props {
+    title?: string;
+    canCreate: boolean;
+    onCreatePage: (event?: React.SyntheticEvent) => void;
+    onCreateFolder: (event?: React.SyntheticEvent) => void;
+}
+
+export const Header = ({ canCreate, onCreatePage, onCreateFolder, title }: Props): ReactElement => {
+    return (
+        <Container>
+            <Grid align={"right"} style={{ padding: 0 }}>
+                <Cell span={4}>
+                    <Title title={title} />
+                </Cell>
+                {canCreate && (
+                    <Cell span={8}>
+                        <ButtonsCreate
+                            onCreateFolder={onCreateFolder}
+                            onCreatePage={onCreatePage}
+                        />
+                    </Cell>
+                )}
+            </Grid>
+        </Container>
+    );
+};

packages/app-page-builder/src/admin/components/Table/Header/styled.tsx

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+
+export const Container = styled("div")`
+    padding: 8px 0;
+    width: 100%;
+    background: var(--mdc-theme-surface);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 3;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+`;

packages/app-page-builder/src/admin/components/Table/LoadingMore/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { i18n } from "@webiny/app/i18n";
+import { Typography } from "@webiny/ui/Typography";
+
+import { Container } from "./styled";
+
+const t = i18n.ns("app-headless-cms/app-page-builder/pages-table/loading-more");
+
+export const LoadingMore = () => {
+    return (
+        <Container>
+            <Typography use={"body2"}>{t`Loading more pages...`}</Typography>
+        </Container>
+    );
+};

packages/app-page-builder/src/admin/components/Table/LoadingMore/styled.tsx

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+
+export const Container = styled("div")`
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    background-color: var(--mdc-theme-background);
+`;

packages/app-page-builder/src/admin/components/Table/Preview.tsx → packages/app-page-builder/src/admin/components/Table/Preview/index.tsx

@@ -1,7 +1,8 @@
 import React, { ReactElement } from "react";
-import { Drawer, DrawerContent } from "@webiny/ui/Drawer";
+import { DrawerContent } from "@webiny/ui/Drawer";
 import PageDetails from "~/admin/views/Pages/PageDetails";
-import styled from "@emotion/styled";
+
+import { Content } from "./styled";
 
 interface PreviewProps {
     open: boolean;
@@ -10,13 +11,9 @@ interface PreviewProps {
     onCreatePage: () => void;
 }
 
-const Content = styled(Drawer)`
-    width: 60vw;
-`;
-
 export const Preview = ({ open, onClose, canCreate, onCreatePage }: PreviewProps): ReactElement => {
     return (
-        <Content modal={true} open={open} dir="rtl" onClose={onClose}>
+        <Content modal={true} open={open} onClose={onClose} dir="rtl">
             <DrawerContent dir="ltr">
                 <PageDetails canCreate={canCreate} onCreatePage={onCreatePage} onDelete={onClose} />
             </DrawerContent>

packages/app-page-builder/src/admin/components/Table/Preview/styled.tsx

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { Drawer } from "@webiny/ui/Drawer";
+
+export const Content = styled(Drawer)`
+    width: 60vw;
+
+    /**
+     * Fixing list items display inside the drawer with dir="rtl"
+     */
+    .mdc-list-item__graphic {
+        margin-left: 0 !important;
+        margin-right: 32px !important;
+    }
+
+    .mdc-list-item__meta {
+        margin-left: auto !important;
+        margin-right: 0 !important;
+    }
+`;

packages/app-page-builder/src/admin/components/Table/Row/Name.tsx → packages/app-page-builder/src/admin/components/Table/Table/Row/Name.tsx

@@ -18,6 +18,13 @@ const Icon = styled("div")`
     margin-right: 8px;
     height: 24px;
 `;
+
+const Text = styled(Typography)`
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+`;
+
 interface Props {
     name: string;
     id: string;
@@ -35,7 +42,7 @@ export const FolderName = ({ name, id }: Props): ReactElement => {
             <Icon>
                 <Folder />
             </Icon>
-            <Typography use={"subtitle2"}>{name}</Typography>
+            <Text use={"subtitle2"}>{name}</Text>
         </Title>
     );
 };
@@ -55,7 +62,7 @@ export const PageName = ({ name, id, onClick }: PageProps): ReactElement => {
             <Icon>
                 <File />
             </Icon>
-            <Typography use={"subtitle2"}>{name}</Typography>
+            <Text use={"subtitle2"}>{name}</Text>
         </Title>
     );
 };