Merge branch 'dev' into 'master'

Dev See merge request turris/reforis/foris-js!251
2025-07-06 16:32:26 +02:00 · 2024-10-02 14:35:17 +02:00 · 2024-09-27 15:48:49 +02:00 · 2024-09-25 16:22:09 +02:00
16 changed files with 115 additions and 728 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -13,7 +13,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",
@ -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"
--- a/package.json
+++ b/package.json
@ -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",
--- a/src/common/ActionButtonWithModal/ActionButtonWithModal.js
+++ b/src/common/ActionButtonWithModal/ActionButtonWithModal.js
@ -1,124 +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, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import { useAPIPost } from "../../api/hooks";
-import { API_STATE } from "../../api/utils";
-import Button from "../../bootstrap/Button";
-import {
-    Modal,
-    ModalHeader,
-    ModalBody,
-    ModalFooter,
-} from "../../bootstrap/Modal";
-import { useAlert } from "../../context/alertContext/AlertContext";
-
-ActionButtonWithModal.propTypes = {
-    actionTrigger: PropTypes.elementType.isRequired,
-    actionUrl: PropTypes.string.isRequired,
-    modalTitle: PropTypes.string.isRequired,
-    modalMessage: PropTypes.string.isRequired,
-    modalActionText: PropTypes.string,
-    modalActionProps: PropTypes.object,
-    successMessage: PropTypes.string,
-    errorMessage: PropTypes.string,
-};
-
-function ActionButtonWithModal({
-    actionTrigger: ActionTriggerComponent,
-    actionUrl,
-    modalTitle,
-    modalMessage,
-    modalActionText,
-    modalActionProps,
-    successMessage,
-    errorMessage,
-}) {
-    const [triggered, setTriggered] = useState(false);
-    const [modalShown, setModalShown] = useState(false);
-    const [triggerActionStatus, triggerAction] = useAPIPost(actionUrl);
-
-    const [setAlert] = useAlert();
-    useEffect(() => {
-        if (triggerActionStatus.state === API_STATE.SUCCESS) {
-            setAlert(
-                successMessage || _("Action successful."),
-                API_STATE.SUCCESS
-            );
-        }
-        if (triggerActionStatus.state === API_STATE.ERROR) {
-            setAlert(errorMessage || _("Action failed."));
-        }
-    }, [triggerActionStatus, setAlert, successMessage, errorMessage]);
-
-    const actionHandler = () => {
-        setTriggered(true);
-        triggerAction();
-        setModalShown(false);
-    };
-
-    return (
-        <>
-            <ActionModal
-                shown={modalShown}
-                setShown={setModalShown}
-                onAction={actionHandler}
-                title={modalTitle}
-                message={modalMessage}
-                actionText={modalActionText}
-                actionProps={modalActionProps}
-            />
-            <ActionTriggerComponent
-                loading={triggered}
-                disabled={triggered}
-                onClick={() => setModalShown(true)}
-            />
-        </>
-    );
-}
-
-ActionModal.propTypes = {
-    shown: PropTypes.bool.isRequired,
-    setShown: PropTypes.func.isRequired,
-    onAction: PropTypes.func.isRequired,
-    title: PropTypes.string.isRequired,
-    message: PropTypes.string.isRequired,
-    actionText: PropTypes.string,
-};
-
-function ActionModal({
-    shown,
-    setShown,
-    onAction,
-    title,
-    message,
-    actionText,
-    actionProps,
-}) {
-    return (
-        <Modal shown={shown} setShown={setShown}>
-            <ModalHeader setShown={setShown} title={title} />
-            <ModalBody>
-                <p className="mb-0">{message}</p>
-            </ModalBody>
-            <ModalFooter>
-                <Button
-                    className="btn-secondary"
-                    onClick={() => setShown(false)}
-                >
-                    {_("Cancel")}
-                </Button>
-                <Button onClick={onAction} {...actionProps}>
-                    {actionText || _("Confirm")}
-                </Button>
-            </ModalFooter>
-        </Modal>
-    );
-}
-
-export default ActionButtonWithModal;
--- a/src/common/ActionButtonWithModal/ActionButtonWithModal.md
+++ b/src/common/ActionButtonWithModal/ActionButtonWithModal.md
@ -1,24 +0,0 @@
-RebootButton component is a button that opens a modal dialog to confirm the
-reboot of the device.
-
-## Usage
-
-```jsx
-import React, { useEffect, createContext } from "react";
-import RebootButton from "./RebootButton";
-import { AlertContextProvider } from "../context/alertContext/AlertContext";
-
-window.AlertContext = React.createContext();
-
-const RebootButtonExample = () => {
-    return (
-        <AlertContextProvider>
-            <div id="modal-container" />
-            <div id="alert-container" />
-            <RebootButton />
-        </AlertContextProvider>
-    );
-};
-
-<RebootButtonExample />;
-```
--- a/src/common/RebootButton.js
+++ b/src/common/RebootButton.js
@ -0,0 +1,80 @@
+/*
+ * 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, { useState, useEffect } from "react";
+
+import PropTypes from "prop-types";
+
+import { useAPIPost } from "../api/hooks";
+import { API_STATE } from "../api/utils";
+import Button from "../bootstrap/Button";
+import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal";
+import { useAlert } from "../context/alertContext/AlertContext";
+import { ForisURLs } from "../utils/forisUrls";
+
+function RebootButton(props) {
+    const [triggered, setTriggered] = useState(false);
+    const [modalShown, setModalShown] = useState(false);
+    const [triggerRebootStatus, triggerReboot] = useAPIPost(ForisURLs.reboot);
+
+    const [setAlert] = useAlert();
+    useEffect(() => {
+        if (triggerRebootStatus.state === API_STATE.ERROR) {
+            setAlert(_("Reboot request failed."));
+        }
+    });
+
+    const rebootHandler = () => {
+        setTriggered(true);
+        triggerReboot();
+        setModalShown(false);
+    };
+
+    return (
+        <>
+            <RebootModal
+                shown={modalShown}
+                setShown={setModalShown}
+                onReboot={rebootHandler}
+            />
+            <Button
+                className="btn-danger"
+                loading={triggered}
+                disabled={triggered}
+                onClick={() => setModalShown(true)}
+                {...props}
+            >
+                {_("Reboot")}
+            </Button>
+        </>
+    );
+}
+
+RebootModal.propTypes = {
+    shown: PropTypes.bool.isRequired,
+    setShown: PropTypes.func.isRequired,
+    onReboot: PropTypes.func.isRequired,
+};
+
+function RebootModal({ shown, setShown, onReboot }) {
+    return (
+        <Modal shown={shown} setShown={setShown}>
+            <ModalHeader setShown={setShown} title={_("Warning!")} />
+            <ModalBody>
+                <p>{_("Are you sure you want to restart the router?")}</p>
+            </ModalBody>
+            <ModalFooter>
+                <Button onClick={() => setShown(false)}>{_("Cancel")}</Button>
+                <Button className="btn-danger" onClick={onReboot}>
+                    {_("Confirm reboot")}
+                </Button>
+            </ModalFooter>
+        </Modal>
+    );
+}
+
+export default RebootButton;
--- a/src/common/RichTable/RichTable.js
+++ b/src/common/RichTable/RichTable.js
@ -1,84 +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 PropTypes from "prop-types";
-
-import RichTableBody from "./RichTableBody";
-import RichTableHeader from "./RichTableHeader";
-import RichTablePagination from "./RichTablePagination";
-
-const fallbackData = [];
-
-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,
-};
-
-function RichTable({
-    columns,
-    data,
-    withPagination,
-    pageSize = 5,
-    pageIndex = 0,
-}) {
-    const tableColumns = useMemo(() => columns, [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;
--- a/src/common/RichTable/RichTable.md
+++ b/src/common/RichTable/RichTable.md
@ -1,135 +0,0 @@
-### Description
-
-Rich Table is a table component based on
-[Tanstack React Table](https://tanstack.com/table/). It adds some features to
-the table component, such as:
-
-   **Pagination**: The table can be paginated.
-   **Sorting**: The table can be sorted by columns.
-   **Row Expansion**: The table rows can be expanded. (To be implemented)
-
-### Example
-
-```js
-import RichTable from "./RichTable";
-
-const columns = [
-    {
-        header: "Name",
-        accessorKey: "name",
-    },
-    {
-        header: "Surname",
-        accessorKey: "surname",
-    },
-    {
-        header: "Age",
-        accessorKey: "age",
-    },
-    {
-        header: "Phone",
-        accessorKey: "phone",
-    },
-];
-
-const data = [
-    {
-        name: "John",
-        surname: "Coltrane",
-        age: 30,
-        phone: "123456789",
-    },
-    {
-        name: "Jane",
-        surname: "Doe",
-        age: 25,
-        phone: "987654321",
-    },
-    {
-        name: "Alice",
-        surname: "Smith",
-        age: 35,
-        phone: "123456789",
-    },
-    {
-        name: "Bob",
-        surname: "Smith",
-        age: 40,
-        phone: "987654321",
-    },
-    {
-        name: "Charlie",
-        surname: "Brown",
-        age: 45,
-        phone: "123456789",
-    },
-    {
-        name: "Daisy",
-        surname: "Brown",
-        age: 50,
-        phone: "987654321",
-    },
-    {
-        name: "Eve",
-        surname: "Johnson",
-        age: 55,
-        phone: "123456789",
-    },
-    {
-        name: "Frank",
-        surname: "Johnson",
-        age: 60,
-        phone: "987654321",
-    },
-    {
-        name: "Grace",
-        surname: "Williams",
-        age: 65,
-        phone: "123456789",
-    },
-    {
-        name: "Henry",
-        surname: "Williams",
-        age: 70,
-        phone: "987654321",
-    },
-    {
-        name: "Ivy",
-        surname: "Brown",
-        age: 75,
-        phone: "123456789",
-    },
-    {
-        name: "Jack",
-        surname: "Brown",
-        age: 80,
-        phone: "987654321",
-    },
-    {
-        name: "Kelly",
-        surname: "Johnson",
-        age: 85,
-        phone: "123456789",
-    },
-    {
-        name: "Liam",
-        surname: "Johnson",
-        age: 90,
-        phone: "987654321",
-    },
-    {
-        name: "Mia",
-        surname: "Williams",
-        age: 95,
-        phone: "123456789",
-    },
-    {
-        name: "Nathan",
-        surname: "Williams",
-        age: 100,
-        phone: "987654321",
-    },
-];
-
-<RichTable columns={columns} data={data} withPagination />;
-```
--- a/src/common/RichTable/RichTableBody.js
+++ b/src/common/RichTable/RichTableBody.js
@ -1,48 +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 propTypes from "prop-types";
-
-RichTableBody.propTypes = {
-    table: propTypes.shape({
-        getRowModel: propTypes.func.isRequired,
-    }).isRequired,
-    flexRender: propTypes.func.isRequired,
-};
-
-function 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;
--- a/src/common/RichTable/RichTableHeader.js
+++ b/src/common/RichTable/RichTableHeader.js
@ -1,96 +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 {
-    faSquareCaretUp,
-    faSquareCaretDown,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import propTypes from "prop-types";
-
-RichTableHeader.propTypes = {
-    table: propTypes.shape({
-        getHeaderGroups: propTypes.func.isRequired,
-    }).isRequired,
-    flexRender: propTypes.func.isRequired,
-};
-
-function RichTableHeader({ table, flexRender }) {
-    const getThTitle = (header) => {
-        if (!header.column.getCanSort()) return undefined;
-
-        const nextSortingOrder = header.column.getNextSortingOrder();
-        if (nextSortingOrder === "asc") return _("Sort ascending");
-        if (nextSortingOrder === "desc") return _("Sort descending");
-        return _("Clear sort");
-    };
-
-    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
-                                    type="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;
--- a/src/common/RichTable/RichTablePagination.js
+++ b/src/common/RichTable/RichTablePagination.js
@ -1,128 +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 {
-    faAngleLeft,
-    faAnglesLeft,
-    faAngleRight,
-    faAnglesRight,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import propTypes from "prop-types";
-
-RichTablePagination.propTypes = {
-    table: propTypes.shape({
-        getState: propTypes.func.isRequired,
-        getCanPreviousPage: propTypes.func.isRequired,
-        getCanNextPage: propTypes.func.isRequired,
-        firstPage: propTypes.func.isRequired,
-        previousPage: propTypes.func.isRequired,
-        nextPage: propTypes.func.isRequired,
-        lastPage: propTypes.func.isRequired,
-        setPageSize: propTypes.func.isRequired,
-        getPageCount: propTypes.func.isRequired,
-    }).isRequired,
-    tablePageSize: propTypes.number,
-    allRows: propTypes.number,
-};
-
-function 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
-                type="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;
--- a/src/common/tests/ActionButtonWithModal.test.js
+++ b/src/common/tests/ActionButtonWithModal.test.js
@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2024 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.
@ -18,16 +18,15 @@ import mockAxios from "jest-mock-axios";
 import { mockJSONError } from "testUtils/network";
 import { mockSetAlert } from "testUtils/alertContextMock";

-import ActionButtonWithModal from "../ActionButtonWithModal/ActionButtonWithModal";
+import RebootButton from "../RebootButton";

-describe("<ActionButtonWithModal/>", () => {
+describe("<RebootButton/>", () => {
    let componentContainer;
    beforeEach(() => {
        const { container } = render(
            <>
                <div id="modal-container" />
-                <div id="alert-container" />
-                <ActionButtonWithModal />
+                <RebootButton />
            </>
        );
        componentContainer = container;
@ -38,27 +37,27 @@ describe("<ActionButtonWithModal/>", () => {
    });

    it("Render modal.", () => {
-        expect(queryByText(componentContainer, "Confirm action")).toBeNull();
-        fireEvent.click(getByText(componentContainer, "Action"));
+        expect(queryByText(componentContainer, "Confirm reboot")).toBeNull();
+        fireEvent.click(getByText(componentContainer, "Reboot"));
        expect(componentContainer).toMatchSnapshot();
    });

-    it("Confirm action.", () => {
-        fireEvent.click(getByText(componentContainer, "action"));
-        fireEvent.click(getByText(componentContainer, "Confirm action"));
+    it("Confirm reboot.", () => {
+        fireEvent.click(getByText(componentContainer, "Reboot"));
+        fireEvent.click(getByText(componentContainer, "Confirm reboot"));
        expect(mockAxios.post).toHaveBeenCalledWith(
-            "/reforis/api/action",
+            "/reforis/api/reboot",
            undefined,
            expect.anything()
        );
    });

    it("Hold error.", async () => {
-        fireEvent.click(getByText(componentContainer, "Action"));
-        fireEvent.click(getByText(componentContainer, "Confirm action"));
+        fireEvent.click(getByText(componentContainer, "Reboot"));
+        fireEvent.click(getByText(componentContainer, "Confirm reboot"));
        mockJSONError();
        await wait(() =>
-            expect(mockSetAlert).toBeCalledWith("Action request failed.")
+            expect(mockSetAlert).toBeCalledWith("Reboot request failed.")
        );
    });
 });
--- a/src/common/tests/snapshots/RebootButton.test.js.snap
+++ b/src/common/tests/snapshots/RebootButton.test.js.snap
@ -43,7 +43,7 @@ exports[`<RebootButton/> Render modal. 1`] = `
            class="modal-footer"
          >
            <button
-              class="btn btn-secondary d-inline-flex justify-content-center align-items-center"
+              class="btn btn-primary d-inline-flex justify-content-center align-items-center"
              type="button"
            >
              <span>
--- a/src/index.js
+++ b/src/index.js
@ -40,10 +40,9 @@ export { Spinner, SpinnerElement } from "./bootstrap/Spinner";
 export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";

 // Common
-export { default as ActionButtonWithModal } from "./common/ActionButtonWithModal/ActionButtonWithModal";
+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 {
--- a/src/testUtils/customTestRender.js
+++ b/src/testUtils/customTestRender.js
@ -14,7 +14,7 @@ import { render } from "@testing-library/react";
 import PropTypes from "prop-types";

 import { AlertContextMock } from "./alertContextMock";
-import { CustomizationContextMock } from "./customizationContextMock";
+import { CustomizationContextMock } from "./cutomizationContextMock";

 Wrapper.propTypes = {
    children: PropTypes.oneOfType([
--- a/src/testUtils/customizationContextMock.js
+++ b/src/testUtils/customizationContextMock.js
--- a/styleguide.config.js
+++ b/styleguide.config.js
@ -28,11 +28,11 @@ module.exports = {
            content: "docs/development.md",
        },
        {
-            name: "Common Components",
+            name: "Components",
            description: "Set of main components.",
            sections: [
                {
-                    name: "ForisForm",
+                    name: "Foris forms",
                    components: [
                        "src/form/components/ForisForm.js",
                        "src/form/components/alerts.js",
@ -42,24 +42,25 @@ module.exports = {
                    usageMode: "expand",
                },
                {
-                    name: "RichTable",
-                    components: ["src/common/RichTable/RichTable.js"],
-                    exampleMode: "expand",
-                    usageMode: "expand",
-                },
-                {
-                    name: "ActionButtonWithModal",
-                    components: [
-                        "src/common/ActionButtonWithModal/ActionButtonWithModal.js",
-                    ],
+                    name: "Alert Context",
+                    components: ["src/context/alertContext/AlertContext.js"],
                    exampleMode: "expand",
                    usageMode: "expand",
                },
            ],
            sectionDepth: 1,
        },
+
        {
-            name: "Bootstrap Components",
+            name: "Customization Context",
+            components: [
+                "src/context/customizationContext/CustomizationContext.js",
+            ],
+            exampleMode: "expand",
+            usageMode: "expand",
+        },
+        {
+            name: "Bootstrap components",
            description: "Set of bootstrap components.",
            components: "src/bootstrap/*.js",
            exampleMode: "expand",
@ -67,22 +68,13 @@ module.exports = {
            ignore: ["src/bootstrap/constants.js", "src/bootstrap/Radio.js"],
            sectionDepth: 0,
        },
-        {
-            name: "Contexts",
-            components: [
-                "src/context/alertContext/AlertContext.js",
-                "src/context/customizationContext/CustomizationContext.js",
-            ],
-            exampleMode: "expand",
-            usageMode: "expand",
-        },
    ],
    template: {
        favicon: "/docs/components/logo.svg",
    },
    require: [
        "babel-polyfill",
-        path.join(__dirname, "src/testUtils/mockGlobals.js"),
+        path.join(__dirname, "src/testUtils/mockGlobals"),
        path.join(
            __dirname,
            "node_modules/bootstrap/dist/css/bootstrap.min.css"
Author	SHA1	Message	Date
Aleksandr Gumroian	14b90bbbd4	Merge branch 'dev' into 'master' Dev See merge request turris/reforis/foris-js!251	2024-10-02 14:35:17 +02:00
Aleksandr Gumroian	c0fd0adbc9	Merge branch 'dev' into 'master' Dev See merge request turris/reforis/foris-js!248	2024-09-27 15:48:49 +02:00
Aleksandr Gumroian	a7a4e76cd1	Merge branch 'dev' into 'master' Dev See merge request turris/reforis/foris-js!245	2024-09-25 16:22:09 +02:00