Pull request: 5190-clear-cache

Updates #4695.
Updates #5190.

Squashed commit of the following:

commit f4156f54ebd1b0c96318715441da1dc54cbbfb0f
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Dec 2 16:19:03 2022 +0300

    client: button styles

commit 42cd8ac8ac1abb5c43a42065e2374d11f2d9a62b
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Fri Dec 2 15:39:15 2022 +0300

    all: upd dnsproxy

commit 87b04391afeaed28523448aa12a317300e718b72
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Dec 2 15:19:07 2022 +0300

    client: add clear cache button

commit ee99548b3689ce47959d9bddc6a1e866e773dcc3
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Thu Dec 1 18:54:54 2022 +0300

    all: add cache clear

client/src/__locales/en.json

@@ -638,5 +638,8 @@
     "safe_browsing": "Safe Browsing",
     "served_from_cache": "{{value}} <i>(served from cache)</i>",
     "form_error_password_length": "Password must be at least {{value}} characters long",
-    "anonymizer_notification": "<0>Note:</0> IP anonymization is enabled. You can disable it in <1>General settings</1>."
+    "anonymizer_notification": "<0>Note:</0> IP anonymization is enabled. You can disable it in <1>General settings</1>.",
+    "confirm_dns_cache_clear": "Are you sure you want to clear DNS cache?",
+    "cache_cleared": "DNS cache successfully cleared",
+    "clear_cache": "Clear cache"
 }

client/src/actions/dnsConfig.js

@@ -1,4 +1,5 @@
 import { createAction } from 'redux-actions';
+import i18next from 'i18next';
 
 import apiClient from '../api/Api';
 import { splitByNewLine } from '../helpers/helpers';
@@ -19,6 +20,22 @@ export const getDnsConfig = () => async (dispatch) => {
     }
 };
 
+export const clearDnsCacheRequest = createAction('CLEAR_DNS_CACHE_REQUEST');
+export const clearDnsCacheFailure = createAction('CLEAR_DNS_CACHE_FAILURE');
+export const clearDnsCacheSuccess = createAction('CLEAR_DNS_CACHE_SUCCESS');
+
+export const clearDnsCache = () => async (dispatch) => {
+    dispatch(clearDnsCacheRequest());
+    try {
+        const data = await apiClient.clearCache();
+        dispatch(clearDnsCacheSuccess(data));
+        dispatch(addSuccessToast(i18next.t('cache_cleared')));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(clearDnsCacheFailure());
+    }
+};
+
 export const setDnsConfigRequest = createAction('SET_DNS_CONFIG_REQUEST');
 export const setDnsConfigFailure = createAction('SET_DNS_CONFIG_FAILURE');
 export const setDnsConfigSuccess = createAction('SET_DNS_CONFIG_SUCCESS');

client/src/api/Api.js

@@ -593,6 +593,14 @@ class Api {
         };
         return this.makeRequest(path, method, config);
     }
+
+    // Cache
+    CLEAR_CACHE = { path: 'cache_clear', method: 'POST' };
+
+    clearCache() {
+        const { path, method } = this.CLEAR_CACHE;
+        return this.makeRequest(path, method);
+    }
 }
 
 const apiClient = new Api();

client/src/components/Settings/Dns/Cache/Form.js

@@ -2,10 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
 import { Trans, useTranslation } from 'react-i18next';
-import { shallowEqual, useSelector } from 'react-redux';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+
 import { renderInputField, toNumber, CheckboxField } from '../../../../helpers/form';
 import { CACHE_CONFIG_FIELDS, FORM_NAME, UINT32_RANGE } from '../../../../helpers/constants';
 import { replaceZeroWithEmptyString } from '../../../../helpers/helpers';
+import { clearDnsCache } from '../../../../actions/dnsConfig';
 
 const INPUTS_FIELDS = [
     {
@@ -32,6 +34,7 @@ const Form = ({
     handleSubmit, submitting, invalid,
 }) => {
     const { t } = useTranslation();
+    const dispatch = useDispatch();
 
     const { processingSetConfig } = useSelector((state) => state.dnsConfig, shallowEqual);
     const {
@@ -40,6 +43,12 @@ const Form = ({
 
     const minExceedsMax = cache_ttl_min > cache_ttl_max;
 
+    const handleClearCache = () => {
+        if (window.confirm(t('confirm_dns_cache_clear'))) {
+            dispatch(clearDnsCache());
+        }
+    };
+
     return <form onSubmit={handleSubmit}>
         <div className="row">
             {INPUTS_FIELDS.map(({
@@ -97,6 +106,13 @@ const Form = ({
         >
             <Trans>save_btn</Trans>
         </button>
+        <button
+            type="button"
+            className="btn btn-outline-secondary btn-standard form__button"
+            onClick={handleClearCache}
+        >
+            <Trans>clear_cache</Trans>
+        </button>
     </form>;
 };