Pull request: client: add reset leases btn

Updates #1691.

Squashed commit of the following:

commit 2c48fb956aba28eae47071c9f7f4d579dde12955
Merge: 38f5191b 7547d3a4
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Thu Jun 17 14:28:23 2021 +0300

    Merge branch 'master' into 1691-dhcp-reset-form

commit 38f5191bcd62eb53e4663fccdfc2a60247881931
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Jun 17 13:14:59 2021 +0300

    client: handle dhcp leases reset

commit a97df17028ca640fd32b4d9762aa54fb381df7e5
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Wed Jun 16 17:12:10 2021 +0300

    client: add reset leases btn

client/src/__locales/en.json

@@ -68,6 +68,9 @@
     "dhcp_new_static_lease": "New static lease",
     "dhcp_static_leases_not_found": "No DHCP static leases found",
     "dhcp_add_static_lease": "Add static lease",
+    "dhcp_reset_leases": "Reset all leases",
+    "dhcp_reset_leases_confirm": "Are you sure you want to reset all leases?",
+    "dhcp_reset_leases_success": "DHCP leases successfully reset",
     "dhcp_reset": "Are you sure you want to reset the DHCP configuration?",
     "country": "Country",
     "city": "City",

client/src/actions/index.js

@@ -547,6 +547,22 @@ export const resetDhcp = () => async (dispatch) => {
     }
 };
 
+export const resetDhcpLeasesRequest = createAction('RESET_DHCP_LEASES_REQUEST');
+export const resetDhcpLeasesSuccess = createAction('RESET_DHCP_LEASES_SUCCESS');
+export const resetDhcpLeasesFailure = createAction('RESET_DHCP_LEASES_FAILURE');
+
+export const resetDhcpLeases = () => async (dispatch) => {
+    dispatch(resetDhcpLeasesRequest());
+    try {
+        const status = await apiClient.resetDhcpLeases();
+        dispatch(resetDhcpLeasesSuccess(status));
+        dispatch(addSuccessToast('dhcp_reset_leases_success'));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(resetDhcpLeasesFailure());
+    }
+};
+
 export const toggleLeaseModal = createAction('TOGGLE_LEASE_MODAL');
 
 export const addStaticLeaseRequest = createAction('ADD_STATIC_LEASE_REQUEST');

client/src/api/Api.js

@@ -264,6 +264,8 @@ class Api {
 
     DHCP_RESET = { path: 'dhcp/reset', method: 'POST' };
 
+    DHCP_LEASES_RESET = { path: 'dhcp/reset_leases', method: 'POST' };
+
     getDhcpStatus() {
         const { path, method } = this.DHCP_STATUS;
         return this.makeRequest(path, method);
@@ -315,6 +317,11 @@ class Api {
         return this.makeRequest(path, method);
     }
 
+    resetDhcpLeases() {
+        const { path, method } = this.DHCP_LEASES_RESET;
+        return this.makeRequest(path, method);
+    }
+
     // Installation
     INSTALL_GET_ADDRESSES = { path: 'install/get_addresses', method: 'GET' };
 

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

@@ -21,6 +21,7 @@ import {
     getDhcpStatus,
     resetDhcp,
     setDhcpConfig,
+    resetDhcpLeases,
     toggleDhcp,
     toggleLeaseModal,
 } from '../../../actions';
@@ -111,6 +112,12 @@ const Dhcp = () => {
         }));
     };
 
+    const handleReset = () => {
+        if (window.confirm(t('dhcp_reset_leases_confirm'))) {
+            dispatch(resetDhcpLeases());
+        }
+    };
+
     const enteredSomeV4Value = Object.values(v4)
         .some(Boolean);
     const enteredSomeV6Value = Object.values(v6)
@@ -188,18 +195,18 @@ const Dhcp = () => {
         <PageTitle title={t('dhcp_settings')} subtitle={t('dhcp_description')} containerClass="page-title--dhcp">
             {toggleDhcpButton}
             <button
-                    type="button"
-                    className={statusButtonClass}
-                    onClick={onClick}
-                    disabled={enabled || !interface_name || processingConfig}
+                type="button"
+                className={statusButtonClass}
+                onClick={onClick}
+                disabled={enabled || !interface_name || processingConfig}
             >
                 <Trans>check_dhcp_servers</Trans>
             </button>
             <button
-                    type="button"
-                    className='btn btn-sm btn-outline-secondary'
-                    disabled={!enteredSomeValue || processingConfig}
-                    onClick={clear}
+                type="button"
+                className='btn btn-sm btn-outline-secondary'
+                disabled={!enteredSomeValue || processingConfig}
+                onClick={clear}
             >
                 <Trans>reset_settings</Trans>
             </button>
@@ -269,16 +276,23 @@ const Dhcp = () => {
                             processingDeleting={processingDeleting}
                             cidr={cidr}
                         />
-                    </div>
-                    <div className="col-12">
-                        <button
-                            type="button"
-                            className="btn btn-success btn-standard mt-3"
-                            onClick={toggleModal}
-                            disabled={disabledLeasesButton}
-                        >
-                            <Trans>dhcp_add_static_lease</Trans>
-                        </button>
+                        <div className="btn-list mt-2">
+                            <button
+                                type="button"
+                                className="btn btn-success btn-standard mt-3"
+                                onClick={toggleModal}
+                                disabled={disabledLeasesButton}
+                            >
+                                <Trans>dhcp_add_static_lease</Trans>
+                            </button>
+                            <button
+                                type="button"
+                                className="btn btn-secondary btn-standard mt-3"
+                                onClick={handleReset}
+                            >
+                                <Trans>dhcp_reset_leases</Trans>
+                            </button>
+                        </div>
                     </div>
                 </div>
             </Card>

client/src/reducers/dhcp.js

@@ -118,6 +118,11 @@ const dhcp = handleActions(
             v6: {},
             interface_name: '',
         }),
+        [actions.resetDhcpLeasesSuccess]: (state) => ({
+            ...state,
+            leases: [],
+            staticLeases: [],
+        }),
 
         [actions.toggleLeaseModal]: (state) => {
             const newState = {