Merge branch 'dev' into 'master'

Dev

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

CHANGELOG.md

@@ -8,13 +8,6 @@ and this project adheres to
 
 ## [Unreleased]
 
-## [6.6.2] - 2025-02-20
-
-### Changed
-
-- Enhanced SubmitButton component to accept a custom label prop
-- Refactored RichTable component to remove forwardRef and simplify data handling
-
 ## [6.6.1] - 2025-02-17
 
 ### Changed
@@ -448,8 +441,7 @@ and this project adheres to
 ## [0.0.7] - 2019-09-02
 
 [unreleased]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.2...dev
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.1...dev
-[6.6.2]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.1...v6.6.2
 [6.6.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.0...v6.6.1
 [6.6.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.5.0...v6.6.0
 [6.5.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.4.0...v6.5.0

jest.config.js

@@ -21,7 +21,10 @@ module.exports = {
     testPathIgnorePatterns: ["/node_modules/", "/__fixtures__/", "/dist/"],
     testEnvironment: "jsdom",
     verbose: false,
-    setupFilesAfterEnv: ["<rootDir>/src/testUtils/setup"],
+    setupFilesAfterEnv: [
+        "@testing-library/react/cleanup-after-each",
+        "<rootDir>/src/testUtils/setup",
+    ],
     globals: {
         TZ: "utc",
     },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "6.6.2",
+    "version": "6.6.1",
     "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
@@ -14,17 +14,17 @@
     "license": "GPL-3.0",
     "main": "./src/index.js",
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/fontawesome-svg-core": "^6.6.0",
-        "@fortawesome/free-regular-svg-icons": "^6.7.2",
+        "@fortawesome/free-regular-svg-icons": "^6.6.0",
-        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
         "@fortawesome/react-fontawesome": "^0.2.2",
-        "@tanstack/react-table": "^8.21.2",
+        "@tanstack/react-table": "^8.20.5",
-        "axios": "^1.7.9",
+        "axios": "^1.7.2",
         "immutability-helper": "^3.1.1",
         "moment": "^2.30.1",
-        "qrcode.react": "^4.2.0",
+        "qrcode.react": "^3.1.0",
-        "react-datetime": "^3.3.1",
+        "react-datetime": "^3.2.0",
-        "react-uid": "^2.4.0"
+        "react-uid": "^2.3.3"
     },
     "peerDependencies": {
         "bootstrap": "^5.3.3",
@@ -34,32 +34,32 @@
         "react-router-dom": "^5.1.2"
     },
     "devDependencies": {
-        "@babel/cli": "^7.26.4",
+        "@babel/cli": "^7.24.7",
-        "@babel/core": "^7.26.9",
+        "@babel/core": "^7.24.7",
-        "@babel/plugin-transform-runtime": "^7.26.9",
+        "@babel/plugin-transform-runtime": "^7.24.7",
-        "@babel/preset-env": "^7.26.9",
+        "@babel/preset-env": "^7.24.7",
-        "@babel/preset-react": "^7.26.3",
+        "@babel/preset-react": "^7.24.7",
-        "@testing-library/react": "^12.1.5",
+        "@testing-library/react": "^8.0.9",
-        "babel-loader": "^9.2.1",
+        "babel-loader": "^8.1.0",
         "babel-polyfill": "^6.26.0",
         "bootstrap": "^5.3.3",
-        "css-loader": "^7.1.2",
+        "css-loader": "^5.2.4",
         "eslint": "^8.57.0",
         "eslint-config-reforis": "^2.1.1",
         "file-loader": "^6.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "jest-mock-axios": "^4.8.0",
+        "jest-mock-axios": "^4.7.3",
-        "moment-timezone": "^0.5.47",
+        "moment-timezone": "^0.5.45",
-        "prettier": "^3.5.2",
+        "prettier": "^3.3.2",
         "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
         "react-router-dom": "^5.1.2",
         "react-styleguidist": "^12.0.1",
         "snapshot-diff": "^0.10.0",
-        "style-loader": "^4.0.0",
+        "style-loader": "^1.2.1",
-        "webpack": "^5.98.0"
+        "webpack": "^5.92.1"
     },
     "scripts": {
         "lint": "eslint src",

src/bootstrap/__tests__/NumberInput.test.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
@@ -7,7 +7,7 @@
 
 import React from "react";
 
-import { render, fireEvent, getByLabelText, waitFor } from "customTestRender";
+import { render, fireEvent, getByLabelText, wait } from "customTestRender";
 
 import NumberInput from "../NumberInput";
 
@@ -34,7 +34,7 @@ describe("<NumberInput/>", () => {
     it("Increase number with button", async () => {
         const increaseButton = getByLabelText(componentContainer, /Increase/);
         fireEvent.mouseDown(increaseButton);
-        await waitFor(() =>
+        await wait(() =>
             expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } })
         );
     });
@@ -42,7 +42,7 @@ describe("<NumberInput/>", () => {
     it("Decrease number with button", async () => {
         const decreaseButton = getByLabelText(componentContainer, /Decrease/);
         fireEvent.mouseDown(decreaseButton);
-        await waitFor(() =>
+        await wait(() =>
             expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 0 } })
         );
     });

src/common/RichTable/RichTable.js

@@ -1,11 +1,16 @@
 /*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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 React, {
+    useMemo,
+    useState,
+    useImperativeHandle,
+    forwardRef,
+} from "react";
 
 import {
     flexRender,
@@ -20,35 +25,24 @@ import RichTableBody from "./RichTableBody";
 import RichTableHeader from "./RichTableHeader";
 import RichTablePagination from "./RichTablePagination";
 
-RichTable.propTypes = {
+const fallbackData = [];
-    /** Columns to be displayed in the table */
-    columns: PropTypes.array.isRequired,
-    /** Data to be displayed in the table, must be passed as a stable reference, for example, useState */
-    data: PropTypes.array.isRequired,
-    /** Whether to display pagination */
-    withPagination: PropTypes.bool,
-    /** Number of rows per page, the default is 5 */
-    pageSize: PropTypes.number,
-    /** Index of the current page */
-    pageIndex: PropTypes.number,
-};
 
-export default function RichTable({
+const RichTable = forwardRef(
-    columns,
+    ({ columns, data, withPagination, pageSize = 5, pageIndex = 0 }, ref) => {
-    data,
-    withPagination,
-    pageSize = 5,
-    pageIndex = 0,
-}) {
         const tableColumns = useMemo(() => columns, [columns]);
+        const [tableData, setTableData] = useState(data ?? fallbackData);
         const [sorting, setSorting] = useState([]);
         const [pagination, setPagination] = useState({
             pageIndex,
             pageSize,
         });
 
+        useImperativeHandle(ref, () => ({
+            setTableData,
+        }));
+
         const table = useReactTable({
-        data,
+            data: tableData,
             columns: tableColumns,
             getCoreRowModel: getCoreRowModel(),
             getSortedRowModel: getSortedRowModel(),
@@ -61,7 +55,8 @@ export default function RichTable({
             },
         });
 
-    const paginationIsNeeded = data.length > pageSize && withPagination;
+        const paginationIsNeeded =
+            tableData.length > pageSize && withPagination;
 
         return (
             <div className="table-responsive">
@@ -73,9 +68,27 @@ export default function RichTable({
                     <RichTablePagination
                         table={table}
                         tablePageSize={pageSize}
-                    allRows={data.length}
+                        allRows={tableData.length}
                     />
                 )}
             </div>
         );
-}
+    }
+);
+
+RichTable.propTypes = {
+    /** Columns to be displayed in the table */
+    columns: PropTypes.array.isRequired,
+    /** Data to be displayed in the table */
+    data: PropTypes.array.isRequired,
+    /** Whether to display pagination */
+    withPagination: PropTypes.bool,
+    /** Number of rows per page */
+    pageSize: PropTypes.number,
+    /** Index of the current page */
+    pageIndex: PropTypes.number,
+};
+
+RichTable.displayName = "RichTable";
+
+export default RichTable;

src/common/RichTable/RichTableHeader.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
@@ -32,7 +32,7 @@ function RichTableHeader({ table, flexRender }) {
     };
 
     return (
-        <thead className="table-light">
+        <thead className="thead-light">
             {table.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id} role="row">
                     {headerGroup.headers.map((header) => (

src/common/WiFiSettings/__tests__/ResetWiFiSettings.test.js

@@ -1,12 +1,12 @@
 /*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://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 { render, fireEvent, waitFor } from "customTestRender";
+import { render, fireEvent, wait } from "customTestRender";
 
 import mockAxios from "jest-mock-axios";
 import WebSockets from "webSockets/WebSockets";
@@ -35,7 +35,7 @@ describe("<ResetWiFiSettings/>", () => {
             expect.anything()
         );
         mockAxios.mockResponse({ data: { foo: "bar" } });
-        await waitFor(() =>
+        await wait(() =>
             expect(mockSetAlert).toBeCalledWith(
                 "Wi-Fi settings are set to defaults.",
                 ALERT_TYPES.SUCCESS
@@ -46,7 +46,7 @@ describe("<ResetWiFiSettings/>", () => {
     it("should display alert on open ports - failure", async () => {
         fireEvent.click(getAllByText("Reset Wi-Fi Settings")[1]);
         mockJSONError();
-        await waitFor(() =>
+        await wait(() =>
             expect(mockSetAlert).toBeCalledWith(
                 "An error occurred during resetting Wi-Fi settings."
             )

src/common/WiFiSettings/__tests__/WiFiSettings.test.js

@@ -1,16 +1,15 @@
 /*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://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 diffSnapshot from "snapshot-diff";
 import mockAxios from "jest-mock-axios";
 
-import { fireEvent, render, waitFor } from "customTestRender";
+import { fireEvent, render, wait } from "customTestRender";
 import WebSockets from "webSockets/WebSockets";
 import { mockJSONError } from "testUtils/network";
 
@@ -46,7 +45,7 @@ describe("<WiFiSettings/>", () => {
         getByLabelText = renderRes.getByLabelText;
         getByText = renderRes.getByText;
         mockAxios.mockResponse({ data: wifiSettingsFixture() });
-        await waitFor(() => renderRes.getByText("Wi-Fi 1"));
+        await wait(() => renderRes.getByText("Wi-Fi 1"));
         firstRender = renderRes.asFragment();
     });
 
@@ -61,7 +60,7 @@ describe("<WiFiSettings/>", () => {
         );
         const errorMessage = "An API error occurred.";
         mockJSONError(errorMessage);
-        await waitFor(() => {
+        await wait(() => {
             expect(getByText(errorMessage)).toBeTruthy();
         });
     });
@@ -182,7 +181,6 @@ describe("<WiFiSettings/>", () => {
                     guest_wifi: {
                         SSID: "TestGuestSSID",
                         enabled: true,
-                        encryption: "WPA2",
                         password: "test_password",
                     },
                     hidden: false,

src/common/WiFiSettings/__tests__/__fixtures__/wifiSettings.js

@@ -223,7 +223,6 @@ export function wifiSettingsFixture() {
                 guest_wifi: {
                     SSID: "TestGuestSSID",
                     enabled: false,
-                    encryption: "WPA2",
                     password: "",
                 },
                 hidden: false,

src/common/__tests__/ActionButtonWithModal.test.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
@@ -9,7 +9,13 @@ import React from "react";
 
 import Button from "bootstrap/Button";
 
-import { fireEvent, getByText, render, waitFor } from "customTestRender";
+import {
+    fireEvent,
+    getByText,
+    queryByText,
+    render,
+    wait,
+} from "customTestRender";
 import mockAxios from "jest-mock-axios";
 import { mockJSONError } from "testUtils/network";
 import { mockSetAlert } from "testUtils/alertContextMock";
@@ -67,7 +73,7 @@ describe("<ActionButtonWithModal/>", () => {
         fireEvent.click(getByText(componentContainer, "Action"));
         fireEvent.click(getByText(componentContainer, "Confirm action"));
         mockJSONError();
-        await waitFor(() =>
+        await wait(() =>
             expect(mockSetAlert).toBeCalledWith("Action request failed.")
         );
     });
@@ -76,7 +82,7 @@ describe("<ActionButtonWithModal/>", () => {
         fireEvent.click(getByText(componentContainer, "Action"));
         fireEvent.click(getByText(componentContainer, "Confirm action"));
         mockAxios.mockResponse({ status: 200 });
-        await waitFor(() =>
+        await wait(() =>
             expect(mockSetAlert).toBeCalledWith(
                 "Action request succeeded.",
                 "success"

src/context/customizationContext/__tests__/CustomizationContext.test.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2022 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.
@@ -7,7 +7,7 @@
 
 import React from "react";
 
-import { render, waitFor, getByText } from "customTestRender";
+import { render, wait, getByText } from "customTestRender";
 import mockAxios from "jest-mock-axios";
 
 import {
@@ -38,7 +38,7 @@ describe("CustomizationContext", () => {
     it("should render component without customization", async () => {
         mockAxios.mockResponse({ data: {} });
 
-        await waitFor(() => getByText(componentContainer, ORIGINAL));
+        await wait(() => getByText(componentContainer, ORIGINAL));
 
         expect(componentContainer).toMatchSnapshot();
     });
@@ -46,7 +46,7 @@ describe("CustomizationContext", () => {
     it("should render customized component", async () => {
         mockAxios.mockResponse({ data: { customization: "shield" } });
 
-        await waitFor(() => getByText(componentContainer, CUSTOM));
+        await wait(() => getByText(componentContainer, CUSTOM));
 
         expect(componentContainer).toMatchSnapshot();
     });

src/form/__tests__/hooks.test.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -7,7 +7,7 @@
 
 import React from "react";
 
-import { act, fireEvent, render, waitFor } from "customTestRender";
+import { act, fireEvent, render, waitForElement } from "customTestRender";
 import mockAxios from "jest-mock-axios";
 import WebSockets from "webSockets/WebSockets";
 import ForisForm from "../components/ForisForm";
@@ -59,7 +59,7 @@ describe("useForm hook.", () => {
         );
         mockAxios.mockResponse({ field: "fetchedData" });
 
-        input = await waitFor(() => getByTestId("test-input"));
+        input = await waitForElement(() => getByTestId("test-input"));
         form = container.firstChild.firstChild;
     });
 

src/form/components/SubmitButton.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -20,15 +20,13 @@ export const STATES = {
 SubmitButton.propTypes = {
     disabled: PropTypes.bool,
     state: PropTypes.oneOf(Object.keys(STATES).map((key) => STATES[key])),
-    label: PropTypes.string,
 };
 
-export function SubmitButton({ disabled, state, label, ...props }) {
+export function SubmitButton({ disabled, state, ...props }) {
     const disableSubmitButton = disabled || state !== STATES.READY;
     const loadingSubmitButton = state !== STATES.READY;
 
-    let labelSubmitButton = label;
+    let labelSubmitButton;
-    if (!labelSubmitButton) {
     switch (state) {
         case STATES.SAVING:
             labelSubmitButton = _("Updating");
@@ -39,7 +37,6 @@ export function SubmitButton({ disabled, state, label, ...props }) {
         default:
             labelSubmitButton = _("Save");
     }
-    }
 
     return (
         <Button