add clear cache confirm

client_v2/src/__locales/en.json

@@ -878,6 +878,8 @@
     "cache_config_clear": "Clear cache",
     "cache_enabled": "Enable cache",
     "cache_enabled_desc": "Store DNS responses locally",
+    "cache_confirm_clear_title": "Clear DNS cache",
+    "cache_confirm_clear_desc": "This will remove all cached DNS responses. Subsequent DNS queries may be slower until the cache is rebuilt",
     "access_settings_title": "Access settings",
     "access_settings_allowed_title": "Allowed clients, one per line",
     "access_settings_allowed_faq": "A list of CIDRs, IP addresses, or <a>ClientIDs</a>. If this field has entries, AdGuard Home will accept requests only from these clients",

client_v2/src/components/DnsSettings/Cache/Form.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -10,6 +10,7 @@ import { Checkbox } from 'panel/common/controls/Checkbox';
 import { Input } from 'panel/common/controls/Input';
 import { Button } from 'panel/common/ui/Button';
 import { FaqTooltip } from 'panel/common/ui/FaqTooltip';
+import { ConfirmDialog } from 'panel/common/ui/ConfirmDialog';
 import theme from 'panel/lib/theme';
 
 const INPUTS_FIELDS = [
@@ -48,6 +49,7 @@ type CacheFormProps = {
 
 export const Form = ({ initialValues, onSubmit }: CacheFormProps) => {
     const dispatch = useDispatch();
+    const [openConfirmClear, setOpenConfirmClear] = useState(false);
 
     const { processingSetConfig } = useSelector((state: RootState) => state.dnsConfig);
 
@@ -75,10 +77,17 @@ export const Form = ({ initialValues, onSubmit }: CacheFormProps) => {
     const minExceedsMax = cache_ttl_min > 0 && cache_ttl_max > 0 && cache_ttl_min > cache_ttl_max;
     const cacheSizeZeroWhenEnabled = cache_enabled && cache_size === 0;
 
-    const handleClearCache = () => {
-        if (window.confirm(intl.getMessage('confirm_dns_cache_clear'))) {
-            dispatch(clearDnsCache());
-        }
+    const handleClearCacheOpen = () => {
+        setOpenConfirmClear(true);
+    };
+
+    const handleClearCacheClose = () => {
+        setOpenConfirmClear(false);
+    };
+
+    const handleClearCacheConfirm = () => {
+        dispatch(clearDnsCache());
+        setOpenConfirmClear(false);
     };
 
     return (
@@ -184,11 +193,23 @@ export const Form = ({ initialValues, onSubmit }: CacheFormProps) => {
                     id="dns_clear"
                     variant="secondary-danger"
                     size="small"
-                    onClick={handleClearCache}
+                    onClick={handleClearCacheOpen}
                     className={theme.form.button}>
                     {intl.getMessage('cache_config_clear')}
                 </Button>
             </div>
+
+            {openConfirmClear && (
+                <ConfirmDialog
+                    onClose={handleClearCacheClose}
+                    onConfirm={handleClearCacheConfirm}
+                    buttonText={intl.getMessage('confirm')}
+                    cancelText={intl.getMessage('cancel')}
+                    title={intl.getMessage('cache_confirm_clear_title')}
+                    text={intl.getMessage('cache_confirm_clear_desc')}
+                    buttonVariant="danger"
+                />
+            )}
         </form>
     );
 };