GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-11-14 17:35:35 +01:00
Code Issues Releases Activity

Replace RebootButton with ActionButtonWithModal component and update documentation

Browse Source
This commit is contained in:
Aleksandr Gumroian 2024-11-12 17:39:01 +01:00
parent 087ecfa670
commit c9f2b24095
No known key found for this signature in database
GPG Key ID: 9E77849C64F0A733
9 changed files with 301 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
src/common/ActionButtonWithModal/ActionButtonWithModal.js Normal file
View File

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

39
src/common/ActionButtonWithModal/ActionButtonWithModal.md Normal file
View File

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

90
src/common/RebootButton.js
View File

@ -1,90 +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";
import { ForisURLs } from "../utils/forisUrls";
RebootButton.propTypes = {
/** Additional props to be passed to the button */
props: PropTypes.object,
};
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
className="btn-secondary"
onClick={() => setShown(false)}
>
{_("Cancel")}
</Button>
<Button className="btn-danger" onClick={onReboot}>
{_("Confirm reboot")}
</Button>
</ModalFooter>
</Modal>
);
}
export default RebootButton;

24
src/common/RebootButton.md
View File

@ -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 />;
```

92
src/common/__tests__/ActionButtonWithModal.test.js Normal file
View File

@ -0,0 +1,92 @@
/*
* 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
View File

@ -1,63 +0,0 @@
/*
* 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.")
);
});
});

48
src/common/__tests__/__snapshots__/RebootButton.test.js.snap → src/common/__tests__/__snapshots__/ActionButtonWithModal.test.js.snap
View File

@ -1,6 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<RebootButton/> Render modal. 1`] = `
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`] = `
<div>
<div
id="modal-container"
@ -35,8 +54,10 @@ exports[`<RebootButton/> Render modal. 1`] = `
<div
class="modal-body"
>
<p>
Are you sure you want to restart the router?
<p
class="mb-0"
>
Are you sure you want to perform this action?
</p>
</div>
<div
@ -55,7 +76,7 @@ exports[`<RebootButton/> Render modal. 1`] = `
type="button"
>
<span>
Confirm reboot
Confirm action
</span>
</button>
</div>
@ -63,28 +84,15 @@ exports[`<RebootButton/> Render modal. 1`] = `
</div>
</div>
</div>
<button
class="btn btn-danger d-inline-flex justify-content-center align-items-center"
type="button"
>
<span>
Reboot
</span>
</button>
</div>
`;
exports[`<RebootButton/> Render. 1`] = `
<div>
<div
id="modal-container"
id="alert-container"
/>
<button
class="btn btn-danger 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>
Reboot
Action
</span>
</button>
</div>

2
src/index.js
View File

@ -40,7 +40,7 @@ export { Spinner, SpinnerElement } from "./bootstrap/Spinner";
export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";
// Common
export { default as RebootButton } from "./common/RebootButton";
export { default as ActionButtonWithModal } from "./common/ActionButtonWithModal/ActionButtonWithModal";
export { default as WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
export { default as ResetWiFiSettings } from "./common/WiFiSettings/ResetWiFiSettings";
export { default as RichTable } from "./common/RichTable/RichTable";

10
styleguide.config.js
View File

@ -32,7 +32,7 @@ module.exports = {
description: "Set of main components.",
sections: [
{
name: "Foris Form",
name: "ForisForm",
components: [
"src/form/components/ForisForm.js",
"src/form/components/alerts.js",
@ -42,14 +42,16 @@ module.exports = {
usageMode: "expand",
},
{
name: "Rich Table",
name: "RichTable",
components: ["src/common/RichTable/RichTable.js"],
exampleMode: "expand",
usageMode: "expand",
},
{
name: "Reboot Button",
components: ["src/common/RebootButton.js"],
name: "ActionButtonWithModal",
components: [
"src/common/ActionButtonWithModal/ActionButtonWithModal.js",
],
exampleMode: "expand",
usageMode: "expand",
},