Merge branch 'dev' into 'master'

Release 2.1.1

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

README.md

@@ -1,4 +1,5 @@
 # foris-js
+Set of utils and common React elements for reForis.
 
 ## Publishing package
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "1.4.0",
+  "version": "2.1.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,11 +1,11 @@
 {
   "name": "foris",
-  "version": "1.4.0",
+  "version": "2.1.1",
   "description": "Set of components and utils for Foris and its plugins.",
   "author": "CZ.NIC, z.s.p.o.",
   "repository": {
     "type": "git",
-    "url": "https://gitlab.labs.nic.cz/turris/reforis/forisjs.git"
+    "url": "https://gitlab.labs.nic.cz/turris/reforis/foris-js.git"
   },
   "keywords": [
     "foris",

scripts/collect_files.sh

@@ -2,7 +2,7 @@
 
 # Collect files
 npm run build
-cp package.json dist
+cp package.json README.md dist
 cp -rf translations dist
 # Remove unwanted files
 rm -rf dist/**/__tests__

src/api/hooks.js

@@ -17,13 +17,13 @@ import {
 const DATA_METHODS = ["POST", "PATCH", "PUT"];
 
 function createAPIHook(method) {
-    return (url, contentType) => {
+    return (urlRoot, contentType) => {
         const [state, dispatch] = useReducer(APIReducer, {
             state: API_STATE.INIT,
             data: null,
         });
 
-        const sendRequest = useCallback(async (data) => {
+        const sendRequest = useCallback(async ({ data, suffix } = {}) => {
             const headers = { ...HEADERS };
             if (contentType) {
                 headers["Content-Type"] = contentType;
@@ -31,17 +31,23 @@ function createAPIHook(method) {
 
             dispatch({ type: API_ACTIONS.INIT });
             try {
+                // Prepare request
                 const request = API_METHODS[method];
                 const config = {
                     timeout: TIMEOUT,
                     headers,
                 };
+                const url = suffix ? `${urlRoot}/${suffix}` : urlRoot;
+
+                // Make request
                 let result;
                 if (DATA_METHODS.includes(method)) {
                     result = await request(url, data, config);
                 } else {
                     result = await request(url, config);
                 }
+
+                // Process request result
                 dispatch({
                     type: API_ACTIONS.SUCCESS,
                     payload: result.data,
@@ -53,7 +59,7 @@ function createAPIHook(method) {
                     payload: getErrorPayload(error),
                 });
             }
-        }, [url, contentType]);
+        }, [urlRoot, contentType]);
         return [state, sendRequest];
     };
 }

src/bootstrap/DataTimeInput.css

@@ -0,0 +1,4 @@
+/* Override defaults from "react-datetime" - display picker above input */
+.rdtPicker {
+    bottom: 0;
+}

src/bootstrap/DataTimeInput.js

@@ -10,6 +10,7 @@ import PropTypes from "prop-types";
 import Datetime from "react-datetime/DateTime";
 import moment from "moment/moment";
 import "react-datetime/css/react-datetime.css";
+import "./DataTimeInput.css";
 
 import { Input } from "./Input";
 

src/bootstrap/DownloadButton.js

@@ -10,12 +10,25 @@ import PropTypes from "prop-types";
 
 DownloadButton.propTypes = {
     href: PropTypes.string.isRequired,
+    className: PropTypes.string,
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node,
     ]),
 };
 
-export function DownloadButton({ href, children }) {
-    return <a href={href} className="btn btn-primary" download>{children}</a>;
+DownloadButton.defaultProps = {
+    className: "btn-primary",
+};
+
+export function DownloadButton({ href, className, children }) {
+    return (
+        <a
+            href={href}
+            className={`btn ${className}`.trim()}
+            download
+        >
+            {children}
+        </a>
+    );
 }

src/bootstrap/Modal.js

@@ -5,10 +5,11 @@
  * See /LICENSE for more information.
  */
 
-import React, { useEffect, useRef } from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
 
 import { Portal } from "utils/Portal";
+import { useClickOutside } from "utils/hooks";
 
 Modal.propTypes = {
     /** Is modal shown value */
@@ -26,16 +27,7 @@ Modal.propTypes = {
 export function Modal({ shown, setShown, children }) {
     const dialogRef = useRef();
 
-    useEffect(() => {
-        function handleClickOutsideDialog(e) {
-            if (!dialogRef.current.contains(e.target)) setShown(false);
-        }
-
-        document.addEventListener("mousedown", handleClickOutsideDialog);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutsideDialog);
-        };
-    }, [setShown]);
+    useClickOutside(dialogRef, () => setShown(false));
 
     return (
         <Portal containerId="modal-container">

src/bootstrap/RadioSet.js

@@ -65,7 +65,7 @@ Radio.propTypes = {
     helpText: PropTypes.string,
 };
 
-function Radio({
+export function Radio({
     label, id, helpText, ...props
 }) {
     return (

src/bootstrap/Spinner.js

@@ -46,6 +46,8 @@ export function Spinner({
 SpinnerElement.propTypes = {
     /** Spinner's size */
     small: PropTypes.bool,
+    /** Additional className */
+    className: PropTypes.string,
     /** Children components */
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
@@ -53,13 +55,16 @@ SpinnerElement.propTypes = {
     ]),
 };
 
-export function SpinnerElement({ small, children }) {
+export function SpinnerElement({ small, className, children }) {
     return (
         <>
-            <div className={`spinner-border ${small ? "spinner-border-sm" : ""}`} role="status">
+            <div
+                className={`spinner-border ${small ? "spinner-border-sm" : ""} ${className || ""}`.trim()}
+                role="status"
+            >
                 <span className="sr-only" />
             </div>
-            <div className="spinner-text">{children}</div>
+            {children && <div className="spinner-text">{children}</div>}
         </>
     );
 }

src/form/__tests__/hooks.test.js

@@ -10,6 +10,7 @@ import React from 'react';
 import { act, fireEvent, render, waitForElement } from 'customTestRender';
 import mockAxios from 'jest-mock-axios';
 import { ForisForm } from "../components/ForisForm";
+import { WebSockets } from "webSockets/WebSockets";
 
 
 // It's possible to unittest each hooks via react-hooks-testing-library.
@@ -30,7 +31,6 @@ describe('useForm hook.', () => {
     let mockValidator;
     let mockPrepData;
     let mockPrepDataToSubmit;
-    let mockWebSockets;
     let input;
     let form;
     const Child = jest.fn(props => <TestForm {...props}/>);
@@ -41,7 +41,7 @@ describe('useForm hook.', () => {
         mockValidator = jest.fn(data => data.field === 'invalidValue' ? {field: 'Error'} : {});
         const {getByTestId, container} = render(
             <ForisForm
-                ws={mockWebSockets}
+                ws={new WebSockets()}
                 // Just some module which exists...
                 forisConfig={{
                     endpoint: 'testEndpoint',

src/form/components/ForisForm.js

@@ -20,14 +20,16 @@ import { useForisModule, useForm } from "../hooks";
 import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
 
 ForisForm.propTypes = {
-    /** WebSocket object see `scr/common/WebSockets.js`. */
+    /** Optional WebSocket object. See `scr/common/WebSockets.js`.
+     * `forisConfig.wsModule` should be specified when it's passed.
+     *  */
     ws: PropTypes.object,
     /** Foris configuration object. See usage in main components. */
     forisConfig: PropTypes.shape({
         /** reForis Flask aplication API endpoint from `src/common/API.js`. */
         endpoint: PropTypes.string.isRequired,
         /** `foris-controller` module name to be used via WebSockets.
-         *  If it's not passed then WebSockets aren't used
+         *  It can be use only with `ws` prop.
          * */
         wsModule: PropTypes.string,
         /** `foris-controller` action name to be used via WebSockets.
@@ -49,6 +51,17 @@ ForisForm.propTypes = {
     children: PropTypes.node.isRequired,
     /** Optional override of form submit callback */
     onSubmitOverridden: PropTypes.func,
+
+    // eslint-disable-next-line react/no-unused-prop-types
+    customWSProp(props) {
+        const wsModuleIsSpecified = !!(props.forisConfig && props.forisConfig.wsModule);
+        if (props.ws && !wsModuleIsSpecified) {
+            return new Error("forisConfig.wsModule should be specified when ws object is passed.");
+        }
+        if (!props.ws && wsModuleIsSpecified) {
+            return new Error("forisConfig.wsModule is specified without passing ws object.");
+        }
+    },
 };
 
 ForisForm.defaultProps = {
@@ -103,7 +116,7 @@ export function ForisForm({
         resetFormData();
         const copiedFormData = JSON.parse(JSON.stringify(formState.data));
         const preparedData = prepDataToSubmit(copiedFormData);
-        post(preparedData);
+        post({ data: preparedData });
     }
 
     function getSubmitButtonState() {

src/index.js

@@ -27,7 +27,7 @@ export { FileInput } from "bootstrap/FileInput";
 export { Input } from "bootstrap/Input";
 export { NumberInput } from "bootstrap/NumberInput";
 export { PasswordInput } from "bootstrap/PasswordInput";
-export { RadioSet } from "bootstrap/RadioSet";
+export { Radio, RadioSet } from "bootstrap/RadioSet";
 export { Select } from "bootstrap/Select";
 export { TextInput } from "bootstrap/TextInput";
 export { formFieldsSize } from "bootstrap/constants";
@@ -62,6 +62,7 @@ export {
     withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
 } from "utils/conditionalHOCs";
 export { ErrorMessage } from "utils/ErrorMessage";
+export { useClickOutside } from "utils/hooks";
 
 // Foris URL
 export { ForisURLs, REFORIS_URL_PREFIX } from "forisUrls";

src/utils/__tests__/__snapshots__/conditionalHOCs.test.js.snap

@@ -26,16 +26,13 @@ exports[`conditional HOCs withSpinner should render spinner 1`] = `
     class="spinner-wrapper my-3 text-center"
   >
     <div
-      class="spinner-border "
+      class="spinner-border"
       role="status"
     >
       <span
         class="sr-only"
       />
     </div>
-    <div
-      class="spinner-text"
-    />
   </div>
 </div>
 `;
@@ -46,16 +43,13 @@ exports[`conditional HOCs withSpinnerOnSending should render spinner 1`] = `
     class="spinner-wrapper my-3 text-center"
   >
     <div
-      class="spinner-border "
+      class="spinner-border"
       role="status"
     >
       <span
         class="sr-only"
       />
     </div>
-    <div
-      class="spinner-text"
-    />
   </div>
 </div>
 `;

src/utils/hooks.js

@@ -18,3 +18,19 @@ export function useConditionalTimeout({ callback, timeout = 125 }, ...callbackAr
     }, [condition, callback, timeout, callbackArgs]);
     return setCondition;
 }
+
+/** Execute callback when user clicks outside specified element. */
+export function useClickOutside(element, callback) {
+    function handleClickOutside(event) {
+        if (element.current && !element.current.contains(event.target)) {
+            callback(event);
+        }
+    }
+
+    useEffect(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    });
+}

src/webSockets/WebSockets.js

@@ -25,18 +25,18 @@ export class WebSockets {
                 console.error("WS: Error observed, you aren't logged probably.");
                 window.location.replace(ForisURLs.login);
             }
-            console.log(`WS: Error: ${e}`);
+            console.error(`WS: Error: ${e}`);
         };
         this.ws.onmessage = (e) => {
-            console.log(`WS: Received Message: ${e.data}`);
+            console.debug(`WS: Received Message: ${e.data}`);
             const data = JSON.parse(e.data);
             this.dispatch(data);
         };
         this.ws.onopen = () => {
-            console.log("WS: Connection open.");
+            console.debug("WS: Connection open.");
         };
         this.ws.onclose = () => {
-            console.log("WS: Connection closed.");
+            console.debug("WS: Connection closed.");
         };
 
         // callbacks[module][action]
@@ -61,9 +61,36 @@ export class WebSockets {
         return this;
     }
 
-    subscribe(params) {
+    subscribe(module) {
         this.waitForConnection(() => {
-            this.send("subscribe", params);
+            this.send("subscribe", module);
+        });
+        return this;
+    }
+
+    unbind(module, action, callback) {
+        const callbacks = this.callbacks[module][action];
+
+        const index = callbacks.indexOf(callback);
+        if (index !== -1) {
+            callbacks.splice(index, 1);
+        }
+
+        if (callbacks.length === 0) {
+            delete this.callbacks[module][action];
+        }
+
+        if (Object.keys(this.callbacks[module]).length === 0) {
+            this.unsubscribe(module);
+        }
+
+        return this;
+    }
+
+    unsubscribe(module) {
+        this.waitForConnection(() => {
+            this.send("unsubscribe", module);
+            delete this.callbacks[module];
         });
         return this;
     }
@@ -82,15 +109,15 @@ export class WebSockets {
         let chain;
         try {
             chain = this.callbacks[json.module][json.action];
-        } catch (e) {
-            if (e instanceof TypeError) {
-                console.log(`Callback for this message wasn't found:${e.data}`);
-            } else throw e;
+        } catch (error) {
+            if (error instanceof TypeError) {
+                console.warn(`Callback for this message wasn't found:${error.data}`);
+            } else throw error;
         }
 
         if (typeof chain === "undefined") return;
 
-        for (let i = 0; i < chain.length; i++) chain[i](json);
+        chain.forEach((callback) => callback(json));
     }
 
     close() {

src/webSockets/hooks.js

@@ -11,12 +11,21 @@ export function useWSForisModule(ws, module, action = "update_settings") {
     const [data, setData] = useState(null);
 
     useEffect(() => {
-        if (ws && module) {
-            ws.subscribe(module)
-                .bind(module, action, (msg) => {
-                    setData(msg.data);
-                });
+        // Sometimes we want to disable this hook if WS is not passed. We can't make conditional
+        // hooks, but we can disable it here. It's used especially in ForisForm when a module
+        // doesn't present any WS endpoint.
+        if (!ws) return;
+
+        function callback(msg) {
+            setData(msg.data);
         }
+
+        ws.subscribe(module)
+            .bind(module, action, callback);
+
+        return () => {
+            ws.unbind(module, action, callback);
+        };
     }, [action, module, ws]);
 
     return [data];