daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pull request: add persistent client from the query log context menu

Browse Source 
Updates #6679

Squashed commit of the following:

commit 2e051c9528085182a22ec40a1df11780012a5001
Merge: a001f52ab 56b98080f
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Feb 8 15:02:22 2024 +0300

    Merge branch 'master' into ADG-8179

commit a001f52ab5dadcfc1116ac46da01c0344e51b656
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Feb 5 18:59:13 2024 +0300

    fix changelog

commit 5bac6a2446413b157da6bb404e0e21bb35ac6a10
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Feb 5 16:01:01 2024 +0300

    fix

commit 14a7190ebb18fbed99a897723c27b80144d56825
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Feb 5 15:59:35 2024 +0300

    ADG-8179 add persistent client from query log context menu
This commit is contained in:
Ildar Kamalov
2024-02-08 15:10:12 +03:00
parent 56b98080ff
commit 02ea4a362c
8 changed files with 91 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/Filters/Modal.js
View File

@@ -13,6 +13,8 @@ ReactModal.setAppElement('#root');
const MODAL_TYPE_TO_TITLE_TYPE_MAP = {
[MODAL_TYPE.EDIT_FILTERS]: 'edit',
[MODAL_TYPE.ADD_FILTERS]: 'new',
[MODAL_TYPE.EDIT_CLIENT]: 'edit',
[MODAL_TYPE.ADD_CLIENT]: 'new',
[MODAL_TYPE.SELECT_MODAL_TYPE]: 'new',
[MODAL_TYPE.CHOOSE_FILTERING_LIST]: 'choose',
};

16
client/src/components/Logs/Cells/ClientCell.js
View File

@@ -3,7 +3,7 @@ import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { nanoid } from 'nanoid';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { Link, useHistory } from 'react-router-dom';
import propTypes from 'prop-types';
import { checkFiltered, getBlockingClientName } from '../../../helpers/helpers';
@@ -25,12 +25,14 @@ const ClientCell = ({
}) => {
const { t } = useTranslation();
const dispatch = useDispatch();
const history = useHistory();
const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
const [isOptionsOpened, setOptionsOpened] = useState(false);
const autoClient = autoClients.find((autoClient) => autoClient.name === client);
const clients = useSelector((state) => state.dashboard.clients);
const source = autoClient?.source;
const whoisAvailable = client_info && Object.keys(client_info.whois).length > 0;
const clientName = client_info?.name || client_id;
@@ -55,6 +57,8 @@ const ClientCell = ({
const isFiltered = checkFiltered(reason);
const clientIds = clients.map((c) => c.ids).flat();
const nameClass = classNames('w-90 o-hidden d-flex flex-column', {
'mt-2': isDetailed && !client_info?.name && !whoisAvailable,
'white-space--nowrap': isDetailed,
@@ -66,7 +70,6 @@ const ClientCell = ({
const renderBlockingButton = (isFiltered, domain) => {
const buttonType = isFiltered ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
const clients = useSelector((state) => state.dashboard.clients);
const {
confirmMessage,
@@ -118,6 +121,15 @@ const ClientCell = ({
},
];
if (!clientIds.includes(client)) {
BUTTON_OPTIONS.push({
name: 'add_persistent_client',
onClick: () => {
history.push(`/#clients?clientId=${client}`);
},
});
}
const getOptions = (options) => {
if (options.length === 0) {
return null;

30
client/src/components/Settings/Clients/ClientsTable/ClientsTable.js
View File

@@ -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>

6
client/src/components/Settings/Clients/Form.js
View File

@@ -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,

52
client/src/components/Settings/Clients/Modal.js
View File

@@ -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);