mirror of
https://github.com/AdguardTeam/AdGuardHome.git
synced 2024-08-16 22:20:30 +03:00
Pull request: add persistent client from the query log context menu
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:
parent
56b98080ff
commit
02ea4a362c
@ -23,6 +23,12 @@ See also the [v0.107.45 GitHub milestone][ms-v0.107.45].
|
||||
NOTE: Add new changes BELOW THIS COMMENT.
|
||||
-->
|
||||
|
||||
### Added
|
||||
|
||||
- Context menu item in the Query Log to add a Client to the Persistent client list ([#6679]).
|
||||
|
||||
[#6679]: https://github.com/AdguardTeam/AdGuardHome/issues/6679
|
||||
|
||||
<!--
|
||||
NOTE: Add new changes ABOVE THIS COMMENT.
|
||||
-->
|
||||
|
@ -244,6 +244,7 @@
|
||||
"allow_this_client": "Allow this client",
|
||||
"block_for_this_client_only": "Block for this client only",
|
||||
"unblock_for_this_client_only": "Unblock for this client only",
|
||||
"add_persistent_client": "Add as persistent client",
|
||||
"time_table_header": "Time",
|
||||
"date": "Date",
|
||||
"domain_name_table_header": "Domain name",
|
||||
@ -466,6 +467,7 @@
|
||||
"form_add_id": "Add identifier",
|
||||
"form_client_name": "Enter client name",
|
||||
"name": "Name",
|
||||
"client_name": "Client {{id}}",
|
||||
"client_global_settings": "Use global settings",
|
||||
"client_deleted": "Client \"{{key}}\" successfully deleted",
|
||||
"client_added": "Client \"{{key}}\" successfully added",
|
||||
|
@ -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',
|
||||
};
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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,
|
||||
|
@ -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);
|
||||
|
@ -182,6 +182,8 @@ export const MODAL_TYPE = {
|
||||
EDIT_REWRITE: 'EDIT_REWRITE',
|
||||
EDIT_LEASE: 'EDIT_LEASE',
|
||||
ADD_LEASE: 'ADD_LEASE',
|
||||
ADD_CLIENT: 'ADD_CLIENT',
|
||||
EDIT_CLIENT: 'EDIT_CLIENT',
|
||||
};
|
||||
|
||||
export const CLIENT_ID = {
|
||||
|
Loading…
Reference in New Issue
Block a user