Merge branch 'add-action-btn-with-modal' into 'dev'

Add ActionButtonWithModal component and remove RebootButton

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

src/common/ActionButtonWithModal/ActionButtonWithModal.js

@@ -6,9 +6,7 @@
  */
 
 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";
@@ -21,21 +19,13 @@ import {
 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,
 };
 
@@ -99,7 +89,6 @@ ActionModal.propTypes = {
     title: PropTypes.string.isRequired,
     message: PropTypes.string.isRequired,
     actionText: PropTypes.string,
-    actionProps: PropTypes.object,
 };
 
 function ActionModal({

src/common/ActionButtonWithModal/ActionButtonWithModal.md

@@ -5,32 +5,17 @@ reboot of the device.
 
 ```jsx
 import React, { useEffect, createContext } from "react";
-
+import RebootButton from "./RebootButton";
-import Button from "../../bootstrap/Button";
+import { AlertContextProvider } from "../context/alertContext/AlertContext";
-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
+            <RebootButton />
-                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>
     );
 };

src/common/__tests__/ActionButtonWithModal.test.js

@@ -7,8 +7,6 @@
 
 import React from "react";
 
-import Button from "bootstrap/Button";
-
 import {
     fireEvent,
     getByText,
@@ -24,43 +22,29 @@ import ActionButtonWithModal from "../ActionButtonWithModal/ActionButtonWithModa
 
 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
+                <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.", () => {
+    it("Render.", () => {
         expect(componentContainer).toMatchSnapshot();
     });
 
     it("Render modal.", () => {
+        expect(queryByText(componentContainer, "Confirm action")).toBeNull();
         fireEvent.click(getByText(componentContainer, "Action"));
         expect(componentContainer).toMatchSnapshot();
     });
 
     it("Confirm action.", () => {
-        fireEvent.click(getByText(componentContainer, "Action"));
+        fireEvent.click(getByText(componentContainer, "action"));
         fireEvent.click(getByText(componentContainer, "Confirm action"));
         expect(mockAxios.post).toHaveBeenCalledWith(
             "/reforis/api/action",
@@ -77,16 +61,4 @@ describe("<ActionButtonWithModal/>", () => {
             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"
-            )
-        );
-    });
 });

src/common/__tests__/__snapshots__/RebootButton.test.js.snap

@@ -1,25 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ActionButtonWithModal/> Render button. 1`] = `
+exports[`<RebootButton/> Render modal. 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"
@@ -54,10 +35,8 @@ exports[`<ActionButtonWithModal/> Render modal. 1`] = `
           <div
             class="modal-body"
           >
-            <p
+            <p>
-              class="mb-0"
+              Are you sure you want to restart the router?
-            >
-              Are you sure you want to perform this action?
             </p>
           </div>
           <div
@@ -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>