Merge branch 'dev' into 'master'

Dev

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

CHANGELOG.md

@@ -8,13 +8,6 @@ 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
@@ -405,8 +398,7 @@ and this project adheres to
 ## [0.0.7] - 2019-09-02
 
 [unreleased]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.4.0...dev
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.3.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,19 +1,18 @@
 {
     "name": "foris",
-    "version": "6.4.0",
+    "version": "6.3.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "foris",
-            "version": "6.4.0",
+            "version": "6.3.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",
@@ -3584,39 +3583,6 @@
                 "@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",
@@ -15527,6 +15493,7 @@
             "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",
@@ -16280,6 +16247,7 @@
             "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"
@@ -21134,19 +21102,6 @@
                 "@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",
@@ -30128,6 +30083,7 @@
             "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",
@@ -30692,6 +30648,7 @@
             "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.4.0",
+    "version": "6.3.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,7 +18,6 @@
         "@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, useEffect, useState } from "react";
+import React, { useRef } from "react";
 
 import PropTypes from "prop-types";
 
@@ -40,36 +40,20 @@ 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} ${isVisible ? "alert-fade-in" : "alert-slide-out-top"} ${
+            className={`alert alert-${type} ${
                 onDismiss ? "alert-dismissible" : ""
             }`.trim()}
             role="alert"
-            onAnimationEnd={handleAnimationEnd}
         >
             {onDismiss && (
                 <button
                     type="button"
                     className="btn-close"
-                    onClick={() => setIsVisible(false)}
+                    onClick={onDismiss}
                     aria-label={_("Close")}
                 />
             )}

src/bootstrap/ThreeDotsMenu.js

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

src/common/RichTable/RichTable.js

@@ -1,70 +0,0 @@
-/*
- * 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

@@ -1,39 +0,0 @@
-/*
- * 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

@@ -1,86 +0,0 @@
-/*
- * 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

@@ -1,109 +0,0 @@
-/*
- * 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,17 +43,14 @@ describe("AlertContext", () => {
         expect(componentContainer).toMatchSnapshot();
     });
 
-    it("should dismiss alert with alert button", async () => {
+    it("should dismiss alert with alert button", () => {
         fireEvent.click(getByText(componentContainer, "Set alert"));
         // Alert is present
         expect(getByText(componentContainer, "Alert content")).toBeDefined();
 
         fireEvent.click(componentContainer.querySelector(".btn-close"));
         // Alert is gone
-        await (() =>
+        expect(queryByText(componentContainer, "Alert content")).toBeNull();
-            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-fade-in alert-dismissible"
+      class="alert alert-danger alert-dismissible"
       role="alert"
     >
       <button

src/index.js

@@ -43,7 +43,6 @@ 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 {