fix: improve editor experience with page information (total entries …

…count + current entries length) (#4397)
webiny · Nov 20, 2024 · a259e2a · a259e2a
1 parent 8d8a301
commit a259e2a
Show file tree

Hide file tree

Showing 19 changed files with 191 additions and 21 deletions.
diff --git a/packages/app-file-manager/src/components/BottomInfoBar/SupportedFileTypes.tsx b/packages/app-file-manager/src/components/BottomInfoBar/SupportedFileTypes.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { i18n } from "@webiny/app/i18n";
 import mime from "mime/lite";
 
@@ -23,22 +23,45 @@ const getUniqueFilePlugins = (accept: string[]): string[] => {
 
 export interface SupportedFileTypesProps {
     accept: string[];
+    loading: boolean;
+    totalCount: number;
+    currentCount: number;
 }
 
-const SupportedFileTypes = ({ accept }: SupportedFileTypesProps) => {
-    if (!accept) {
+const SupportedFileTypes = ({
+    accept,
+    loading,
+    totalCount,
+    currentCount
+}: SupportedFileTypesProps) => {
+    const getLabel = useCallback((count = 0): string => {
+        return `${count} ${count === 1 ? "file" : "files"}`;
+    }, []);
+
+    if (!accept || loading) {
         return null;
     }
 
     if (accept.length === 0) {
-        return <span>{t`Showing all file extensions.`}</span>;
+        return (
+            <span>
+                {t`Showing {currentCount} out of {totalCountLabel} from all file extensions.`({
+                    currentCount,
+                    totalCountLabel: getLabel(totalCount)
+                })}
+            </span>
+        );
     }
 
     return (
         <span>
-            {t`Showing the following file extensions: {files}.`({
-                files: getUniqueFilePlugins(accept).join(", ")
-            })}
+            {t`Showing {currentCount} out of {totalCountLabel} from the following file extensions: {files}.`(
+                {
+                    currentCount,
+                    totalCountLabel: getLabel(totalCount),
+                    files: getUniqueFilePlugins(accept).join(", ")
+                }
+            )}
         </span>
     );
 };

diff --git a/...ages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx b/...ages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx
@@ -401,6 +401,9 @@ const FileManagerView = () => {
                                         <BottomInfoBar
                                             accept={view.accept}
                                             listing={view.isListLoadingMore}
+                                            loading={view.isListLoading}
+                                            totalCount={view.meta?.totalCount ?? 0}
+                                            currentCount={view.files.length}
                                         />
                                         <UploadStatus
                                             numberOfFiles={filesBeingUploaded}

diff --git a/...p-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/BottomInfoBar.styled.tsx b/...p-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/BottomInfoBar.styled.tsx
@@ -0,0 +1,22 @@
+import styled from "@emotion/styled";
+
+export const BottomInfoBarWrapper = styled("div")`
+    font-size: 0.8rem;
+    position: sticky;
+    bottom: 0;
+    height: 30px;
+    color: var(--mdc-theme-text-secondary-on-background);
+    border-top: 1px solid var(--mdc-theme-on-background);
+    background: var(--mdc-theme-surface);
+    width: 100%;
+    transform: translateZ(0);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+`;
+
+export const BottomInfoBarInner = styled("div")`
+    padding: 0 10px;
+    width: 100%;
+`;
diff --git a/...ages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/BottomInfoBar.tsx b/...ages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/BottomInfoBar.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { ListMeta } from "./ListMeta";
+import { BottomInfoBarInner, BottomInfoBarWrapper } from "./BottomInfoBar.styled";
+
+interface BottomInfoBarProps {
+    loading: boolean;
+    totalCount: number;
+    currentCount: number;
+}
+
+export const BottomInfoBar = (props: BottomInfoBarProps) => {
+    return (
+        <BottomInfoBarWrapper>
+            <BottomInfoBarInner>
+                <ListMeta
+                    loading={props.loading}
+                    totalCount={props.totalCount}
+                    currentCount={props.currentCount}
+                />
+            </BottomInfoBarInner>
+        </BottomInfoBarWrapper>
+    );
+};
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/ListMeta.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/ListMeta.tsx
@@ -0,0 +1,19 @@
+import React, { useCallback } from "react";
+
+export interface ListMetaProps {
+    loading: boolean;
+    currentCount: number;
+    totalCount: number;
+}
+
+export const ListMeta = (props: ListMetaProps) => {
+    const getLabel = useCallback((count = 0): string => {
+        return `${count} ${count === 1 ? "entry" : "entries"}`;
+    }, []);
+
+    if (props.loading) {
+        return null;
+    }
+
+    return <span>{`Showing ${props.currentCount} out of ${getLabel(props.totalCount)}.`}</span>;
+};
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/index.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/index.tsx
@@ -0,0 +1 @@
+export * from "./BottomInfoBar";
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/LoadingMore/styled.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/LoadingMore/styled.tsx
@@ -4,6 +4,7 @@ export const Container = styled("div")`
     position: absolute;
     bottom: 0;
     left: 0;
+    z-index: 2;
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/index.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/index.tsx
@@ -2,6 +2,7 @@ import React, { ForwardRefRenderFunction, useMemo } from "react";
 import { Table as AcoTable } from "@webiny/app-aco";
 import { useContentEntriesList, useModel } from "~/admin/hooks";
 import { TableItem } from "~/types";
+import { TableContainer } from "./styled";
 
 const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
     const { model } = useModel();
@@ -12,7 +13,7 @@ const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
     }, [list.folders, list.records]);
 
     return (
-        <div ref={ref}>
+        <TableContainer ref={ref}>
             <AcoTable<TableItem>
                 data={data}
                 nameColumnId={model.titleFieldId || "id"}
@@ -23,7 +24,7 @@ const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
                 onSelectRow={list.onSelectRow}
                 selected={list.selected}
             />
-        </div>
+        </TableContainer>
     );
 };
 

diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/styled.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/styled.tsx
@@ -1,12 +1,5 @@
 import styled from "@emotion/styled";
-import { css } from "emotion";
 
-import { ListItemGraphic as ListItemGraphicBase } from "@webiny/ui/List";
-
-export const ListItemGraphic = styled(ListItemGraphicBase)`
-    margin-right: 25px;
+export const TableContainer = styled.div`
+    margin-bottom: 31px;
 `;
-
-export const menuStyles = css(`
-    width: 200px;
-`);
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/Table/Main.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/Table/Main.tsx
@@ -15,6 +15,7 @@ import { useRouter } from "@webiny/react-router";
 import { ROOT_FOLDER } from "~/admin/constants";
 import { BulkActions } from "~/admin/components/ContentEntries/BulkActions";
 import { SelectAll } from "~/admin/components/ContentEntries/SelectAll";
+import { BottomInfoBar } from "~/admin/components/ContentEntries/BottomInfoBar";
 
 interface MainProps {
     folderId?: string;
@@ -113,6 +114,11 @@ export const Main = ({ folderId: initialFolderId }: MainProps) => {
                                     onClick={list.listMoreRecords}
                                 />
                             </Scrollbar>
+                            <BottomInfoBar
+                                loading={list.isListLoading}
+                                totalCount={list.meta.totalCount}
+                                currentCount={list.records.length}
+                            />
                             <LoadingMore show={list.isListLoadingMore} />
                         </>
                     )}

diff --git a/packages/app-page-builder/src/admin/components/BottomInfoBar/BottomInfoBar.styled.tsx b/packages/app-page-builder/src/admin/components/BottomInfoBar/BottomInfoBar.styled.tsx
@@ -0,0 +1,22 @@
+import styled from "@emotion/styled";
+
+export const BottomInfoBarWrapper = styled("div")`
+    font-size: 0.8rem;
+    position: sticky;
+    bottom: 0;
+    height: 30px;
+    color: var(--mdc-theme-text-secondary-on-background);
+    border-top: 1px solid var(--mdc-theme-on-background);
+    background: var(--mdc-theme-surface);
+    width: 100%;
+    transform: translateZ(0);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+`;
+
+export const BottomInfoBarInner = styled("div")`
+    padding: 0 10px;
+    width: 100%;
+`;
diff --git a/packages/app-page-builder/src/admin/components/BottomInfoBar/BottomInfoBar.tsx b/packages/app-page-builder/src/admin/components/BottomInfoBar/BottomInfoBar.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { ListMeta } from "./ListMeta";
+import { BottomInfoBarInner, BottomInfoBarWrapper } from "./BottomInfoBar.styled";
+
+interface BottomInfoBarProps {
+    loading: boolean;
+    totalCount: number;
+    currentCount: number;
+}
+
+export const BottomInfoBar = (props: BottomInfoBarProps) => {
+    return (
+        <BottomInfoBarWrapper>
+            <BottomInfoBarInner>
+                <ListMeta
+                    loading={props.loading}
+                    totalCount={props.totalCount}
+                    currentCount={props.currentCount}
+                />
+            </BottomInfoBarInner>
+        </BottomInfoBarWrapper>
+    );
+};
diff --git a/packages/app-page-builder/src/admin/components/BottomInfoBar/ListMeta.tsx b/packages/app-page-builder/src/admin/components/BottomInfoBar/ListMeta.tsx
@@ -0,0 +1,19 @@
+import React, { useCallback } from "react";
+
+export interface ListMetaProps {
+    loading: boolean;
+    currentCount: number;
+    totalCount: number;
+}
+
+export const ListMeta = (props: ListMetaProps) => {
+    const getLabel = useCallback((count = 0): string => {
+        return `${count} ${count === 1 ? "page" : "pages"}`;
+    }, []);
+
+    if (props.loading) {
+        return null;
+    }
+
+    return <span>{`Showing ${props.currentCount} out of ${getLabel(props.totalCount)}.`}</span>;
+};
diff --git a/packages/app-page-builder/src/admin/components/BottomInfoBar/index.tsx b/packages/app-page-builder/src/admin/components/BottomInfoBar/index.tsx
@@ -0,0 +1 @@
+export * from "./BottomInfoBar";
diff --git a/packages/app-page-builder/src/admin/components/Table/LoadingMore/index.tsx b/packages/app-page-builder/src/admin/components/Table/LoadingMore/index.tsx
@@ -20,7 +20,7 @@ export const LoadingMore = ({ show }: LoadingMoreProps) => {
             <LoaderContainer>
                 <CircularProgress size={20} />
             </LoaderContainer>
-            <Typography use={"body2"}>{t`Loading more entries...`}</Typography>
+            <Typography use={"body2"}>{t`Loading more pages...`}</Typography>
         </Container>
     );
 };
diff --git a/packages/app-page-builder/src/admin/components/Table/LoadingMore/styled.tsx b/packages/app-page-builder/src/admin/components/Table/LoadingMore/styled.tsx
@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 
 export const Container = styled("div")`
     position: absolute;
+    z-index: 2;
     bottom: 0;
     left: 0;
     display: flex;

diff --git a/packages/app-page-builder/src/admin/components/Table/Table/Table.tsx b/packages/app-page-builder/src/admin/components/Table/Table/Table.tsx
@@ -3,6 +3,7 @@ import React, { ForwardRefRenderFunction, useMemo } from "react";
 import { createFoldersData, createRecordsData, Table as AcoTable } from "@webiny/app-aco";
 import { usePagesList } from "~/admin/views/Pages/hooks/usePagesList";
 
+import { TableContainer } from "./styled";
 import { TableItem } from "~/types";
 
 const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
@@ -13,7 +14,7 @@ const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
     }, [list.folders, list.records]);
 
     return (
-        <div ref={ref}>
+        <TableContainer ref={ref}>
             <AcoTable<TableItem>
                 data={data}
                 loading={list.isListLoading}
@@ -23,7 +24,7 @@ const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
                 selected={list.selected}
                 namespace={"pb.page"}
             />
-        </div>
+        </TableContainer>
     );
 };
 

diff --git a/packages/app-page-builder/src/admin/components/Table/Table/styled.tsx b/packages/app-page-builder/src/admin/components/Table/Table/styled.tsx
@@ -0,0 +1,5 @@
+import styled from "@emotion/styled";
+
+export const TableContainer = styled.div`
+    margin-bottom: 31px;
+`;
diff --git a/packages/app-page-builder/src/admin/views/Pages/Table/Main.tsx b/packages/app-page-builder/src/admin/views/Pages/Table/Main.tsx
@@ -19,6 +19,7 @@ import { Table } from "~/admin/components/Table/Table";
 import { MainContainer, Wrapper } from "./styled";
 import { usePagesPermissions } from "~/hooks/permissions";
 import { ROOT_FOLDER } from "~/admin/constants";
+import { BottomInfoBar } from "~/admin/components/BottomInfoBar";
 
 const t = i18n.ns("app-page-builder/admin/views/pages/table/main");
 
@@ -138,6 +139,11 @@ export const Main = ({ folderId: initialFolderId }: Props) => {
                                     onClick={list.listMoreRecords}
                                 />
                             </Scrollbar>
+                            <BottomInfoBar
+                                loading={list.isListLoading}
+                                totalCount={list.meta.totalCount}
+                                currentCount={list.records.length}
+                            />
                             <LoadingMore show={list.isListLoadingMore} />
                         </>
                     )}