mirror of
https://gitlab.nic.cz/turris/reforis/foris-js.git
synced 2025-07-05 16:22:26 +02:00
Compare commits
3 Commits
4df4c6e91f
...
v6.4.0
| Author | SHA1 | Date | |
|---|---|---|---|
| 14b90bbbd4 | |||
| c0fd0adbc9 | |||
| a7a4e76cd1 |
51
package-lock.json
generated
51
package-lock.json
generated
@ -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"
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -1,135 +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 = {
|
||||
/** Component that triggers the action. */
|
||||
actionTrigger: PropTypes.elementType.isRequired,
|
||||
/** URL to send the action to. */
|
||||
actionUrl: PropTypes.string.isRequired,
|
||||
/** Title of the modal. */
|
||||
modalTitle: PropTypes.string.isRequired,
|
||||
/** Message of the modal. */
|
||||
modalMessage: PropTypes.string.isRequired,
|
||||
/** Text of the action button in the modal. */
|
||||
modalActionText: PropTypes.string,
|
||||
/** Props for the action button in the modal. */
|
||||
modalActionProps: PropTypes.object,
|
||||
/** Message to display on successful action. */
|
||||
successMessage: PropTypes.string,
|
||||
/** Message to display on failed action. */
|
||||
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,
|
||||
actionProps: PropTypes.object,
|
||||
};
|
||||
|
||||
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;
|
||||
@ -1,39 +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 Button from "../../bootstrap/Button";
|
||||
import { AlertContextProvider } from "../../context/alertContext/AlertContext";
|
||||
import ActionButtonWithModal from "./ActionButtonWithModal";
|
||||
|
||||
window.AlertContext = React.createContext();
|
||||
|
||||
const RebootButtonExample = () => {
|
||||
const ActionButton = (props) => {
|
||||
return <Button {...props}>Action</Button>;
|
||||
};
|
||||
|
||||
return (
|
||||
<AlertContextProvider>
|
||||
<div id="modal-container" />
|
||||
<div id="alert-container" />
|
||||
<ActionButtonWithModal
|
||||
actionTrigger={ActionButton}
|
||||
actionUrl="/reforis/api/action"
|
||||
modalTitle="Warning!"
|
||||
modalMessage="Are you sure you want to perform this action?"
|
||||
modalActionText="Confirm action"
|
||||
modalActionProps={{ className: "btn-danger" }}
|
||||
successMessage="Action request succeeded."
|
||||
errorMessage="Action request failed."
|
||||
/>
|
||||
</AlertContextProvider>
|
||||
);
|
||||
};
|
||||
|
||||
<RebootButtonExample />;
|
||||
```
|
||||
80
src/common/RebootButton.js
Normal file
80
src/common/RebootButton.js
Normal file
@ -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;
|
||||
@ -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;
|
||||
@ -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 />;
|
||||
```
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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")}
|
||||
<span className="fw-bold">
|
||||
{pagination.pageIndex + 1}
|
||||
{_("of")}
|
||||
{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;
|
||||
@ -1,92 +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 Button from "bootstrap/Button";
|
||||
|
||||
import {
|
||||
fireEvent,
|
||||
getByText,
|
||||
queryByText,
|
||||
render,
|
||||
wait,
|
||||
} from "customTestRender";
|
||||
import mockAxios from "jest-mock-axios";
|
||||
import { mockJSONError } from "testUtils/network";
|
||||
import { mockSetAlert } from "testUtils/alertContextMock";
|
||||
|
||||
import ActionButtonWithModal from "../ActionButtonWithModal/ActionButtonWithModal";
|
||||
|
||||
describe("<ActionButtonWithModal/>", () => {
|
||||
let componentContainer;
|
||||
const ActionButton = (props) => (
|
||||
<Button type="button" {...props}>
|
||||
Action
|
||||
</Button>
|
||||
);
|
||||
|
||||
beforeEach(() => {
|
||||
const { container } = render(
|
||||
<>
|
||||
<div id="modal-container" />
|
||||
<div id="alert-container" />
|
||||
<ActionButtonWithModal
|
||||
actionTrigger={ActionButton}
|
||||
actionUrl="/reforis/api/action"
|
||||
modalTitle="Warning!"
|
||||
modalMessage="Are you sure you want to perform this action?"
|
||||
modalActionText="Confirm action"
|
||||
modalActionProps={{ className: "btn-danger" }}
|
||||
successMessage="Action request succeeded."
|
||||
errorMessage="Action request failed."
|
||||
/>
|
||||
</>
|
||||
);
|
||||
componentContainer = container;
|
||||
});
|
||||
|
||||
it("Render button.", () => {
|
||||
expect(componentContainer).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("Render modal.", () => {
|
||||
fireEvent.click(getByText(componentContainer, "Action"));
|
||||
expect(componentContainer).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("Confirm action.", () => {
|
||||
fireEvent.click(getByText(componentContainer, "Action"));
|
||||
fireEvent.click(getByText(componentContainer, "Confirm action"));
|
||||
expect(mockAxios.post).toHaveBeenCalledWith(
|
||||
"/reforis/api/action",
|
||||
undefined,
|
||||
expect.anything()
|
||||
);
|
||||
});
|
||||
|
||||
it("Hold error.", async () => {
|
||||
fireEvent.click(getByText(componentContainer, "Action"));
|
||||
fireEvent.click(getByText(componentContainer, "Confirm action"));
|
||||
mockJSONError();
|
||||
await wait(() =>
|
||||
expect(mockSetAlert).toBeCalledWith("Action request failed.")
|
||||
);
|
||||
});
|
||||
|
||||
it("Show success alert on successful action.", async () => {
|
||||
fireEvent.click(getByText(componentContainer, "Action"));
|
||||
fireEvent.click(getByText(componentContainer, "Confirm action"));
|
||||
mockAxios.mockResponse({ status: 200 });
|
||||
await wait(() =>
|
||||
expect(mockSetAlert).toBeCalledWith(
|
||||
"Action request succeeded.",
|
||||
"success"
|
||||
)
|
||||
);
|
||||
});
|
||||
});
|
||||
63
src/common/__tests__/RebootButton.test.js
Normal file
63
src/common/__tests__/RebootButton.test.js
Normal file
@ -0,0 +1,63 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
|
||||
import {
|
||||
fireEvent,
|
||||
getByText,
|
||||
queryByText,
|
||||
render,
|
||||
wait,
|
||||
} from "customTestRender";
|
||||
import mockAxios from "jest-mock-axios";
|
||||
import { mockJSONError } from "testUtils/network";
|
||||
import { mockSetAlert } from "testUtils/alertContextMock";
|
||||
|
||||
import RebootButton from "../RebootButton";
|
||||
|
||||
describe("<RebootButton/>", () => {
|
||||
let componentContainer;
|
||||
beforeEach(() => {
|
||||
const { container } = render(
|
||||
<>
|
||||
<div id="modal-container" />
|
||||
<RebootButton />
|
||||
</>
|
||||
);
|
||||
componentContainer = container;
|
||||
});
|
||||
|
||||
it("Render.", () => {
|
||||
expect(componentContainer).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("Render modal.", () => {
|
||||
expect(queryByText(componentContainer, "Confirm reboot")).toBeNull();
|
||||
fireEvent.click(getByText(componentContainer, "Reboot"));
|
||||
expect(componentContainer).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("Confirm reboot.", () => {
|
||||
fireEvent.click(getByText(componentContainer, "Reboot"));
|
||||
fireEvent.click(getByText(componentContainer, "Confirm reboot"));
|
||||
expect(mockAxios.post).toHaveBeenCalledWith(
|
||||
"/reforis/api/reboot",
|
||||
undefined,
|
||||
expect.anything()
|
||||
);
|
||||
});
|
||||
|
||||
it("Hold error.", async () => {
|
||||
fireEvent.click(getByText(componentContainer, "Reboot"));
|
||||
fireEvent.click(getByText(componentContainer, "Confirm reboot"));
|
||||
mockJSONError();
|
||||
await wait(() =>
|
||||
expect(mockSetAlert).toBeCalledWith("Reboot request failed.")
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -1,25 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<ActionButtonWithModal/> Render button. 1`] = `
|
||||
<div>
|
||||
<div
|
||||
id="modal-container"
|
||||
/>
|
||||
<div
|
||||
id="alert-container"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-primary d-inline-flex justify-content-center align-items-center"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Action
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<ActionButtonWithModal/> Render modal. 1`] = `
|
||||
exports[`<RebootButton/> Render modal. 1`] = `
|
||||
<div>
|
||||
<div
|
||||
id="modal-container"
|
||||
@ -54,17 +35,15 @@ exports[`<ActionButtonWithModal/> Render modal. 1`] = `
|
||||
<div
|
||||
class="modal-body"
|
||||
>
|
||||
<p
|
||||
class="mb-0"
|
||||
>
|
||||
Are you sure you want to perform this action?
|
||||
<p>
|
||||
Are you sure you want to restart the router?
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
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>
|
||||
@ -76,7 +55,7 @@ exports[`<ActionButtonWithModal/> Render modal. 1`] = `
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Confirm action
|
||||
Confirm reboot
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -84,15 +63,28 @@ exports[`<ActionButtonWithModal/> Render modal. 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="alert-container"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-primary d-inline-flex justify-content-center align-items-center"
|
||||
class="btn btn-danger d-inline-flex justify-content-center align-items-center"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Action
|
||||
Reboot
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<RebootButton/> Render. 1`] = `
|
||||
<div>
|
||||
<div
|
||||
id="modal-container"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-danger d-inline-flex justify-content-center align-items-center"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Reboot
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -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 {
|
||||
|
||||
@ -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([
|
||||
|
||||
@ -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"
|
||||
|
||||
Reference in New Issue
Block a user