Add RichTable component with header, body, and pagination

Bump v6.4.0

See merge request turris/reforis/foris-js!250

CHANGELOG.md

@@ -8,6 +8,13 @@ and this project adheres to
 
 ## [Unreleased]
 
+## [6.4.0] - 2024-10-02
+
+### Changed
+
+-   Refactored Alert component to include dismiss animation and timeout
+-   Refactored ThreeDotsMenu component to include additional props
+
 ## [6.3.0] - 2024-09-27
 
 ### Added
@@ -398,7 +405,8 @@ and this project adheres to
 ## [0.0.7] - 2019-09-02
 
 [unreleased]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.3.0...dev
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.4.0...dev
+[6.4.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.3.0...v6.4.0
 [6.3.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.2.1...v6.3.0
 [6.2.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.2.0...v6.2.1
 [6.2.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.1.1...v6.2.0

package-lock.json

@@ -1,18 +1,19 @@
 {
     "name": "foris",
-    "version": "6.3.0",
+    "version": "6.4.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "foris",
-            "version": "6.3.0",
+            "version": "6.4.0",
             "license": "GPL-3.0",
             "dependencies": {
                 "@fortawesome/fontawesome-svg-core": "^6.6.0",
                 "@fortawesome/free-regular-svg-icons": "^6.6.0",
                 "@fortawesome/free-solid-svg-icons": "^6.6.0",
                 "@fortawesome/react-fontawesome": "^0.2.2",
+                "@tanstack/react-table": "^8.20.5",
                 "axios": "^1.7.2",
                 "immutability-helper": "^3.1.1",
                 "moment": "^2.30.1",
@@ -3583,6 +3584,39 @@
                 "@sinonjs/commons": "^3.0.0"
             }
         },
+        "node_modules/@tanstack/react-table": {
+            "version": "8.20.5",
+            "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.5.tgz",
+            "integrity": "sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==",
+            "license": "MIT",
+            "dependencies": {
+                "@tanstack/table-core": "8.20.5"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            },
+            "peerDependencies": {
+                "react": ">=16.8",
+                "react-dom": ">=16.8"
+            }
+        },
+        "node_modules/@tanstack/table-core": {
+            "version": "8.20.5",
+            "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz",
+            "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            }
+        },
         "node_modules/@testing-library/dom": {
             "version": "5.6.1",
             "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-5.6.1.tgz",
@@ -15493,7 +15527,6 @@
             "version": "16.9.0",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz",
             "integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==",
-            "dev": true,
             "dependencies": {
                 "loose-envify": "^1.1.0",
                 "object-assign": "^4.1.1",
@@ -16247,7 +16280,6 @@
             "version": "0.15.0",
             "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
             "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
-            "dev": true,
             "dependencies": {
                 "loose-envify": "^1.1.0",
                 "object-assign": "^4.1.1"
@@ -21102,6 +21134,19 @@
                 "@sinonjs/commons": "^3.0.0"
             }
         },
+        "@tanstack/react-table": {
+            "version": "8.20.5",
+            "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.5.tgz",
+            "integrity": "sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==",
+            "requires": {
+                "@tanstack/table-core": "8.20.5"
+            }
+        },
+        "@tanstack/table-core": {
+            "version": "8.20.5",
+            "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz",
+            "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg=="
+        },
         "@testing-library/dom": {
             "version": "5.6.1",
             "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-5.6.1.tgz",
@@ -30083,7 +30128,6 @@
             "version": "16.9.0",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz",
             "integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==",
-            "dev": true,
             "requires": {
                 "loose-envify": "^1.1.0",
                 "object-assign": "^4.1.1",
@@ -30648,7 +30692,6 @@
             "version": "0.15.0",
             "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
             "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
-            "dev": true,
             "requires": {
                 "loose-envify": "^1.1.0",
                 "object-assign": "^4.1.1"

package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "6.3.0",
+    "version": "6.4.0",
     "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
@@ -18,6 +18,7 @@
         "@fortawesome/free-regular-svg-icons": "^6.6.0",
         "@fortawesome/free-solid-svg-icons": "^6.6.0",
         "@fortawesome/react-fontawesome": "^0.2.2",
+        "@tanstack/react-table": "^8.20.5",
         "axios": "^1.7.2",
         "immutability-helper": "^3.1.1",
         "moment": "^2.30.1",

src/bootstrap/Alert.js

@@ -5,7 +5,7 @@
  * See /LICENSE for more information.
  */
 
-import React, { useRef } from "react";
+import React, { useRef, useEffect, useState } from "react";
 
 import PropTypes from "prop-types";
 
@@ -40,20 +40,36 @@ Alert.defaultProps = {
 
 function Alert({ type, onDismiss, children }) {
     const alertRef = useRef();
+    const [isVisible, setIsVisible] = useState(true);
     useFocusTrap(alertRef, !!onDismiss);
+
+    useEffect(() => {
+        if (onDismiss) {
+            const timeout = setTimeout(() => setIsVisible(false), 7000);
+            return () => clearTimeout(timeout);
+        }
+    }, [onDismiss]);
+
+    const handleAnimationEnd = () => {
+        if (!isVisible && onDismiss) {
+            onDismiss();
+        }
+    };
+
     return (
         <div
             ref={alertRef}
-            className={`alert alert-${type} ${
+            className={`alert alert-${type} ${isVisible ? "alert-fade-in" : "alert-slide-out-top"} ${
                 onDismiss ? "alert-dismissible" : ""
             }`.trim()}
             role="alert"
+            onAnimationEnd={handleAnimationEnd}
         >
             {onDismiss && (
                 <button
                     type="button"
                     className="btn-close"
-                    onClick={onDismiss}
+                    onClick={() => setIsVisible(false)}
                     aria-label={_("Close")}
                 />
             )}

src/bootstrap/ThreeDotsMenu.js

@@ -18,9 +18,9 @@ ThreeDotsMenu.propTypes = {
     children: PropTypes.arrayOf(PropTypes.node).isRequired,
 };
 
-function ThreeDotsMenu({ children }) {
+function ThreeDotsMenu({ children, ...props }) {
     return (
-        <div className="dropdown">
+        <div className="dropdown position-static" {...props}>
             <Button
                 className="btn-sm btn-link text-body"
                 data-bs-toggle="dropdown"

src/common/RichTable/RichTable.js

@@ -0,0 +1,70 @@
+/*
+ * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React, { useMemo, useState } from "react";
+
+import {
+    flexRender,
+    getCoreRowModel,
+    getSortedRowModel,
+    getPaginationRowModel,
+    useReactTable,
+} from "@tanstack/react-table";
+
+import RichTableBody from "./RichTableBody";
+import RichTableHeader from "./RichTableHeader";
+import RichTablePagination from "./RichTablePagination";
+
+const fallbackData = [];
+
+const RichTable = ({
+    columns,
+    data,
+    withPagination,
+    pageSize = 5,
+    pageIndex = 0,
+}) => {
+    const tableColumns = useMemo(() => columns, []);
+    const [tableData, _] = useState(data ?? fallbackData);
+    const [sorting, setSorting] = useState([]);
+    const [pagination, setPagination] = useState({
+        pageIndex,
+        pageSize,
+    });
+
+    const table = useReactTable({
+        data: tableData,
+        columns: tableColumns,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onPaginationChange: setPagination,
+        onSortingChange: setSorting,
+        state: {
+            sorting,
+            pagination,
+        },
+    });
+
+    return (
+        <div className="table-responsive">
+            <table className="table table-hover text-nowrap">
+                <RichTableHeader table={table} flexRender={flexRender} />
+                <RichTableBody table={table} flexRender={flexRender} />
+            </table>
+            {withPagination && (
+                <RichTablePagination
+                    table={table}
+                    tablePageSize={pageSize}
+                    allRows={tableData.length}
+                />
+            )}
+        </div>
+    );
+};
+
+export default RichTable;

src/common/RichTable/RichTableBody.js

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React from "react";
+
+const RichTableBody = ({ table, flexRender }) => {
+    return (
+        <tbody>
+            {table.getRowModel().rows.map((row) => {
+                return (
+                    <tr key={row.id} className="align-middle">
+                        {row.getVisibleCells().map((cell) => {
+                            return (
+                                <td
+                                    key={cell.id}
+                                    {...(cell.column.columnDef.className && {
+                                        className:
+                                            cell.column.columnDef.className,
+                                    })}
+                                >
+                                    {flexRender(
+                                        cell.column.columnDef.cell,
+                                        cell.getContext()
+                                    )}
+                                </td>
+                            );
+                        })}
+                    </tr>
+                );
+            })}
+        </tbody>
+    );
+};
+
+export default RichTableBody;

src/common/RichTable/RichTableHeader.js

@@ -0,0 +1,86 @@
+/*
+ * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+    faSquareCaretUp,
+    faSquareCaretDown,
+} from "@fortawesome/free-solid-svg-icons";
+
+const RichTableHeader = ({ table, flexRender }) => {
+    const getThTitle = (header) =>
+        header.column.getCanSort()
+            ? header.column.getNextSortingOrder() === "asc"
+                ? _("Sort ascending")
+                : header.column.getNextSortingOrder() === "desc"
+                  ? _("Sort descending")
+                  : _("Clear sort")
+            : undefined;
+
+    return (
+        <thead className="thead-light">
+            {table.getHeaderGroups().map((headerGroup) => (
+                <tr key={headerGroup.id} role="row">
+                    {headerGroup.headers.map((header) => (
+                        <th
+                            key={header.id}
+                            colSpan={header.colSpan}
+                            {...(header.column.columnDef.headerClassName && {
+                                className:
+                                    header.column.columnDef.headerClassName,
+                            })}
+                        >
+                            {header.isPlaceholder ||
+                            header.column.columnDef.headerIsHidden ? (
+                                <div className="d-none" aria-hidden="true">
+                                    {flexRender(
+                                        header.column.columnDef.header,
+                                        header.getContext()
+                                    )}
+                                </div>
+                            ) : (
+                                <button
+                                    className={`btn btn-link text-decoration-none text-reset fw-bold p-0 d-flex align-items-center
+                                                    ${
+                                                        header.column.getCanSort()
+                                                            ? "d-flex align-items-center"
+                                                            : ""
+                                                    }
+                                                `}
+                                    onClick={header.column.getToggleSortingHandler()}
+                                    title={getThTitle(header)}
+                                >
+                                    {flexRender(
+                                        header.column.columnDef.header,
+                                        header.getContext()
+                                    )}
+                                    {{
+                                        asc: (
+                                            <FontAwesomeIcon
+                                                icon={faSquareCaretUp}
+                                                className="ms-1 text-primary"
+                                            />
+                                        ),
+                                        desc: (
+                                            <FontAwesomeIcon
+                                                icon={faSquareCaretDown}
+                                                className="ms-1 text-primary"
+                                            />
+                                        ),
+                                    }[header.column.getIsSorted()] ?? null}
+                                </button>
+                            )}
+                        </th>
+                    ))}
+                </tr>
+            ))}
+        </thead>
+    );
+};
+
+export default RichTableHeader;

src/common/RichTable/RichTablePagination.js

@@ -0,0 +1,109 @@
+/*
+ * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React, { useMemo } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+    faAngleLeft,
+    faAnglesLeft,
+    faAngleRight,
+    faAnglesRight,
+} from "@fortawesome/free-solid-svg-icons";
+
+const RichTablePagination = ({ table, tablePageSize, allRows }) => {
+    const { pagination } = table.getState();
+    const prevPagBtnDisabled = !table.getCanPreviousPage();
+    const nextPagBtnDisabled = !table.getCanNextPage();
+
+    const pageSizes = useMemo(() => {
+        return [tablePageSize ?? 5, 10, 25].filter(
+            (value, index, self) => self.indexOf(value) === index
+        );
+    }, [tablePageSize]);
+
+    const renderPaginationButton = (icon, ariaLabel, onClick, disabled) => (
+        <li
+            className={`page-item ${disabled ? "disabled" : ""}`}
+            style={{ cursor: disabled ? "not-allowed" : "pointer" }}
+        >
+            <button
+                className="page-link"
+                aria-label={ariaLabel}
+                onClick={onClick}
+                disabled={disabled}
+            >
+                <FontAwesomeIcon icon={icon} />
+            </button>
+        </li>
+    );
+
+    return (
+        <nav
+            aria-label={_("Pagination navigation bar")}
+            className="d-flex gap-2 justify-content-start align-items-center mx-2 mb-1 text-nowrap"
+        >
+            <ul className="pagination pagination-sm mb-0">
+                {renderPaginationButton(
+                    faAnglesLeft,
+                    _("First page"),
+                    () => table.firstPage(),
+                    prevPagBtnDisabled
+                )}
+                {renderPaginationButton(
+                    faAngleLeft,
+                    _("Previous page"),
+                    () => table.previousPage(),
+                    prevPagBtnDisabled
+                )}
+                {renderPaginationButton(
+                    faAngleRight,
+                    _("Next page"),
+                    () => table.nextPage(),
+                    nextPagBtnDisabled
+                )}
+                {renderPaginationButton(
+                    faAnglesRight,
+                    _("Last page"),
+                    () => table.lastPage(),
+                    nextPagBtnDisabled
+                )}
+            </ul>
+            <span>
+                {_("Page")}&nbsp;
+                <span className="fw-bold">
+                    {pagination.pageIndex + 1}
+                    &nbsp;{_("of")}&nbsp;
+                    {table.getPageCount().toLocaleString()}
+                </span>
+            </span>
+            <div
+                className="vr mx-1 align-self-center"
+                style={{ height: "1.5rem" }}
+            />
+            <span>{_("Rows per page:")}</span>
+            <select
+                className="form-select form-select-sm w-auto"
+                aria-label={_("Select rows per page")}
+                value={pagination.pageSize}
+                onChange={(e) => {
+                    table.setPageSize(Number(e.target.value));
+                }}
+            >
+                {pageSizes.map((pageSize) => (
+                    <option key={pageSize} value={pageSize}>
+                        {pageSize}
+                    </option>
+                ))}
+                <option key={allRows} value={allRows}>
+                    {_("All")}
+                </option>
+            </select>
+        </nav>
+    );
+};
+
+export default RichTablePagination;

src/context/alertContext/__tests__/AlertContext.test.js

@@ -43,14 +43,17 @@ describe("AlertContext", () => {
         expect(componentContainer).toMatchSnapshot();
     });
 
-    it("should dismiss alert with alert button", () => {
+    it("should dismiss alert with alert button", async () => {
         fireEvent.click(getByText(componentContainer, "Set alert"));
         // Alert is present
         expect(getByText(componentContainer, "Alert content")).toBeDefined();
 
         fireEvent.click(componentContainer.querySelector(".btn-close"));
         // Alert is gone
-        expect(queryByText(componentContainer, "Alert content")).toBeNull();
+        await (() =>
+            expect(
+                queryByText(componentContainer, "Alert content")
+            ).toBeNull());
     });
 
     it("should dismiss alert with external button", () => {

src/context/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap

@@ -6,7 +6,7 @@ exports[`AlertContext should render alert 1`] = `
     id="alert-container"
   >
     <div
-      class="alert alert-danger alert-dismissible"
+      class="alert alert-danger alert-fade-in alert-dismissible"
       role="alert"
     >
       <button

src/index.js

@@ -43,6 +43,7 @@ export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";
 export { default as RebootButton } from "./common/RebootButton";
 export { default as WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
 export { default as ResetWiFiSettings } from "./common/WiFiSettings/ResetWiFiSettings";
+export { default as RichTable } from "./common/RichTable/RichTable";
 // Form
 export { default as ForisForm } from "./form/components/ForisForm";
 export {