all: partially sync with master; upd chlog

client/src/components/Settings/Clients/ClientsTable/ClientsTable.js

@@ -4,6 +4,7 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import ReactTable from 'react-table';
 
 import { getAllBlockedServices, getBlockedServices } from '../../../../actions/services';
@@ -39,8 +40,12 @@ const ClientsTable = ({
 }) => {
     const [t] = useTranslation();
     const dispatch = useDispatch();
+    const location = useLocation();
+    const history = useHistory();
     const services = useSelector((store) => store?.services);
     const globalSettings = useSelector((store) => store?.settings.settingsList) || {};
+    const params = new URLSearchParams(location.search);
+    const clientId = params.get('clientId');
 
     const { safesearch } = globalSettings;
 
@@ -48,6 +53,12 @@ const ClientsTable = ({
         dispatch(getAllBlockedServices());
         dispatch(getBlockedServices());
         dispatch(initSettings());
+
+        if (clientId) {
+            toggleClientModal({
+                type: MODAL_TYPE.ADD_CLIENT,
+            });
+        }
     }, []);
 
     const handleFormAdd = (values) => {
@@ -85,11 +96,15 @@ const ClientsTable = ({
             }
         }
 
-        if (modalType === MODAL_TYPE.EDIT_FILTERS) {
+        if (modalType === MODAL_TYPE.EDIT_CLIENT) {
             handleFormUpdate(config, modalClientName);
         } else {
             handleFormAdd(config);
         }
+
+        if (clientId) {
+            history.push('/#clients');
+        }
     };
 
     const getOptionsWithLabels = (options) => (
@@ -133,6 +148,14 @@ const ClientsTable = ({
         }
     };
 
+    const handleClose = () => {
+        toggleClientModal();
+
+        if (clientId) {
+            history.push('/#clients');
+        }
+    };
+
     const columns = [
         {
             Header: t('table_client'),
@@ -298,7 +321,7 @@ const ClientsTable = ({
                             type="button"
                             className="btn btn-icon btn-outline-primary btn-sm mr-2"
                             onClick={() => toggleClientModal({
-                                type: MODAL_TYPE.EDIT_FILTERS,
+                                type: MODAL_TYPE.EDIT_CLIENT,
                                 name: clientName,
                             })
                             }
@@ -371,12 +394,13 @@ const ClientsTable = ({
                 <Modal
                     isModalOpen={isModalOpen}
                     modalType={modalType}
-                    toggleClientModal={toggleClientModal}
+                    handleClose={handleClose}
                     currentClientData={currentClientData}
                     handleSubmit={handleSubmit}
                     processingAdding={processingAdding}
                     processingUpdating={processingUpdating}
                     tagsOptions={tagsOptions}
+                    clientId={clientId}
                 />
             </>
         </Card>

client/src/components/Settings/Clients/Form.js

@@ -147,7 +147,7 @@ let Form = (props) => {
         useGlobalSettings,
         useGlobalServices,
         blockedServicesSchedule,
-        toggleClientModal,
+        handleClose,
         processingAdding,
         processingUpdating,
         invalid,
@@ -427,7 +427,7 @@ let Form = (props) => {
                         disabled={submitting}
                         onClick={() => {
                             reset();
-                            toggleClientModal();
+                            handleClose();
                         }}
                     >
                         <Trans>cancel_btn</Trans>
@@ -456,7 +456,7 @@ Form.propTypes = {
     reset: PropTypes.func.isRequired,
     change: PropTypes.func.isRequired,
     submitting: PropTypes.bool.isRequired,
-    toggleClientModal: PropTypes.func.isRequired,
+    handleClose: PropTypes.func.isRequired,
     useGlobalSettings: PropTypes.bool,
     useGlobalServices: PropTypes.bool,
     blockedServicesSchedule: PropTypes.object,

client/src/components/Settings/Clients/Modal.js

@@ -6,7 +6,9 @@ import ReactModal from 'react-modal';
 import { MODAL_TYPE } from '../../../helpers/constants';
 import Form from './Form';
 
-const getInitialData = (initial) => {
+const getInitialData = ({
+    initial, modalType, clientId, clientName,
+}) => {
     if (initial && initial.blocked_services) {
         const { blocked_services } = initial;
         const blocked = {};
@@ -21,46 +23,60 @@ const getInitialData = (initial) => {
         };
     }
 
+    if (modalType !== MODAL_TYPE.EDIT_CLIENT && clientId) {
+        return {
+            ...initial,
+            name: clientName,
+            ids: [clientId],
+        };
+    }
+
     return initial;
 };
 
-const Modal = (props) => {
-    const {
-        isModalOpen,
+const Modal = ({
+    isModalOpen,
+    modalType,
+    currentClientData,
+    handleSubmit,
+    handleClose,
+    processingAdding,
+    processingUpdating,
+    tagsOptions,
+    clientId,
+    t,
+}) => {
+    const initialData = getInitialData({
+        initial: currentClientData,
         modalType,
-        currentClientData,
-        handleSubmit,
-        toggleClientModal,
-        processingAdding,
-        processingUpdating,
-        tagsOptions,
-    } = props;
-    const initialData = getInitialData(currentClientData);
+        clientId,
+        clientName: t('client_name', { id: clientId }),
+    });
 
     return (
         <ReactModal
             className="Modal__Bootstrap modal-dialog modal-dialog-centered modal-dialog--clients"
             closeTimeoutMS={0}
             isOpen={isModalOpen}
-            onRequestClose={() => toggleClientModal()}
+            onRequestClose={handleClose}
         >
             <div className="modal-content">
                 <div className="modal-header">
                     <h4 className="modal-title">
-                        {modalType === MODAL_TYPE.EDIT_FILTERS ? (
+                        {modalType === MODAL_TYPE.EDIT_CLIENT ? (
                             <Trans>client_edit</Trans>
                         ) : (
                             <Trans>client_new</Trans>
                         )}
                     </h4>
-                    <button type="button" className="close" onClick={() => toggleClientModal()}>
+                    <button type="button" className="close" onClick={handleClose}>
                         <span className="sr-only">Close</span>
                     </button>
                 </div>
                 <Form
                     initialValues={{ ...initialData }}
                     onSubmit={handleSubmit}
-                    toggleClientModal={toggleClientModal}
+                    handleClose={handleClose}
                     processingAdding={processingAdding}
                     processingUpdating={processingUpdating}
                     tagsOptions={tagsOptions}
@@ -75,10 +91,12 @@ Modal.propTypes = {
     modalType: PropTypes.string.isRequired,
     currentClientData: PropTypes.object.isRequired,
     handleSubmit: PropTypes.func.isRequired,
-    toggleClientModal: PropTypes.func.isRequired,
+    handleClose: PropTypes.func.isRequired,
     processingAdding: PropTypes.bool.isRequired,
     processingUpdating: PropTypes.bool.isRequired,
     tagsOptions: PropTypes.array.isRequired,
+    t: PropTypes.func.isRequired,
+    clientId: PropTypes.string,
 };
 
 export default withTranslation()(Modal);

client/src/components/Settings/LogsConfig/index.js

@@ -62,7 +62,7 @@ class LogsConfig extends Component {
                             interval,
                             customInterval,
                             anonymize_client_ip,
-                            ignored: ignored.join('\n'),
+                            ignored: ignored?.join('\n'),
                         }}
                         onSubmit={this.handleFormSubmit}
                         processing={processing}