update frontend

client/src/__locales/en.json

@@ -514,6 +514,7 @@
     "rewrite_added": "DNS rewrite for \"{{key}}\" successfully added",
     "rewrite_deleted": "DNS rewrite for \"{{key}}\" successfully deleted",
     "rewrite_updated": "DNS rewrite successfully updated",
+    "rewrite_settings_updated": "DNS rewrite settings successfully updated",
     "rewrite_add": "Add DNS rewrite",
     "rewrite_edit": "Edit DNS rewrite",
     "rewrite_not_found": "No DNS rewrites found",
@@ -754,4 +755,4 @@
     "upstream_dns_cache_configuration": "Upstream DNS cache configuration",
     "enable_upstream_dns_cache": "Enable DNS caching for this client's custom upstream configuration",
     "dns_cache_size": "DNS cache size, in bytes"
-}
+}

client/src/actions/rewrites.ts

@@ -81,3 +81,35 @@ export const deleteRewrite = (config: any) => async (dispatch: any) => {
         dispatch(deleteRewriteFailure());
     }
 };
+
+export const getRewriteSettingsRequest = createAction('GET_REWRITE_SETTINGS_REQUEST');
+export const getRewriteSettingsFailure = createAction('GET_REWRITE_SETTINGS_FAILURE');
+export const getRewriteSettingsSuccess = createAction('GET_REWRITE_SETTINGS_SUCCESS');
+
+export const getRewriteSettings = () => async (dispatch: any) => {
+    dispatch(getRewriteSettingsRequest());
+    try {
+        const data = await apiClient.getRewriteSettings();
+        dispatch(getRewriteSettingsSuccess(data));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(getRewriteSettingsFailure());
+    }
+};
+
+export const updateRewriteSettingsRequest = createAction('UPDATE_REWRITE_SETTINGS_REQUEST');
+export const updateRewriteSettingsFailure = createAction('UPDATE_REWRITE_SETTINGS_FAILURE');
+export const updateRewriteSettingsSuccess = createAction('UPDATE_REWRITE_SETTINGS_SUCCESS');
+
+export const updateRewriteSettings = (config: any) => async (dispatch: any) => {
+    dispatch(updateRewriteSettingsRequest());
+    try {
+        await apiClient.updateRewriteSettings(config);
+        dispatch(updateRewriteSettingsSuccess(config));
+        dispatch(getRewriteSettings());
+        dispatch(addSuccessToast(i18next.t('rewrite_settings_updated')));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(updateRewriteSettingsFailure());
+    }
+};

client/src/api/Api.ts

@@ -489,6 +489,10 @@ class Api {
 
     REWRITE_DELETE = { path: 'rewrite/delete', method: 'POST' };
 
+    REWRITE_SETTINGS = { path: 'rewrite/settings', method: 'GET' };
+
+    REWRITE_SETTINGS_UPDATE = { path: 'rewrite/settings/update', method: 'PUT' };
+
     getRewritesList() {
         const { path, method } = this.REWRITES_LIST;
 
@@ -511,6 +515,14 @@ class Api {
         return this.makeRequest(path, method, parameters);
     }
 
+    updateRewriteSettings(config: any) {
+        const { path, method } = this.REWRITE_SETTINGS_UPDATE;
+        const parameters = {
+            data: config,
+        };
+        return this.makeRequest(path, method, parameters);
+    }
+
     deleteRewrite(config: any) {
         const { path, method } = this.REWRITE_DELETE;
         const parameters = {
@@ -519,6 +531,12 @@ class Api {
         return this.makeRequest(path, method, parameters);
     }
 
+    getRewriteSettings() {
+        const { path, method } = this.REWRITE_SETTINGS;
+
+        return this.makeRequest(path, method);
+    }
+
     // Blocked services
     BLOCKED_SERVICES_GET = { path: 'blocked_services/get', method: 'GET' };
 

client/src/components/Filters/Rewrites/Table.tsx

@@ -15,9 +15,11 @@ interface TableProps {
     processingAdd: boolean;
     processingDelete: boolean;
     processingUpdate: boolean;
+    settings: Record<string, boolean>;
     handleDelete: (...args: unknown[]) => unknown;
     toggleRewritesModal: (...args: unknown[]) => unknown;
     toggleRewrite: (...args: unknown[]) => unknown;
+    toggleRewriteSettings: (...args: unknown[]) => unknown;
 }
 
 class Table extends Component<TableProps> {
@@ -50,8 +52,27 @@ class Table extends Component<TableProps> {
 
     columns = [
         {
-            Header: 'enabled',
+            Header: () => {
+                const { processing, settings, toggleRewriteSettings } = this.props;
+                const isEnabledSettings = Boolean(settings && settings.enabled);
+
+                return (
+                    <label className="checkbox">
+                        <input
+                            type="checkbox"
+                            className="checkbox__input"
+                            onChange={() => toggleRewriteSettings(!isEnabledSettings)}
+                            checked={isEnabledSettings}
+                            disabled={processing}
+                        />
+
+                        <span className="checkbox__label" />
+                    </label>
+                );
+            },
             accessor: 'enabled',
+            sortable: false,
+            resizable: false,
             Cell: this.renderCheckbox,
         },
         {

client/src/components/Filters/Rewrites/index.tsx

@@ -18,12 +18,15 @@ interface RewritesProps {
     addRewrite: (...args: unknown[]) => unknown;
     deleteRewrite: (...args: unknown[]) => unknown;
     updateRewrite: (...args: unknown[]) => unknown;
+    updateRewriteSettings: (...args: unknown[]) => unknown;
+    getRewriteSettings: () => (dispatch: any) => void;
     rewrites: RewritesData;
 }
 
 class Rewrites extends Component<RewritesProps> {
     componentDidMount() {
         this.props.getRewritesList();
+        this.props.getRewriteSettings();
     }
 
     handleDelete = (values: any) => {
@@ -57,6 +60,10 @@ class Rewrites extends Component<RewritesProps> {
         });
     };
 
+    toggleRewriteSettings = (isSettingsEnabled: boolean) => {
+        this.props.updateRewriteSettings({ enabled: isSettingsEnabled });
+    };
+
     render() {
         const {
             t,
@@ -92,6 +99,8 @@ class Rewrites extends Component<RewritesProps> {
                             handleDelete={this.handleDelete}
                             toggleRewritesModal={toggleRewritesModal}
                             toggleRewrite={this.toggleRewrite}
+                            toggleRewriteSettings={this.toggleRewriteSettings}
+                            settings={rewrites.settings}
                         />
 
                         <button

client/src/containers/DnsRewrites.ts

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { getRewritesList, addRewrite, deleteRewrite, updateRewrite, toggleRewritesModal } from '../actions/rewrites';
+import { getRewritesList, addRewrite, deleteRewrite, updateRewrite, toggleRewritesModal, updateRewriteSettings, getRewriteSettings } from '../actions/rewrites';
 
 import Rewrites from '../components/Filters/Rewrites';
 import { RootState } from '../initialState';
@@ -16,6 +16,8 @@ type DispatchProps = {
     addRewrite: (...args: unknown[]) => unknown;
     deleteRewrite: (...args: unknown[]) => unknown;
     updateRewrite: (...args: unknown[]) => unknown;
+    updateRewriteSettings: (...args: unknown[]) => unknown;
+    getRewriteSettings: () => (dispatch: any) => void;
 }
 
 const mapDispatchToProps: DispatchProps = {
@@ -24,6 +26,8 @@ const mapDispatchToProps: DispatchProps = {
     deleteRewrite,
     updateRewrite,
     toggleRewritesModal,
+    updateRewriteSettings,
+    getRewriteSettings,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Rewrites);

client/src/initialState.ts

@@ -179,6 +179,9 @@ export type RewritesData = {
         domain: string;
         enabled: boolean;
     }[];
+    settings: {
+        enabled: boolean;
+    };
 };
 
 export type NormalizedTopClients = {
@@ -579,6 +582,7 @@ export const initialState: RootState = {
         isModalOpen: false,
         modalType: '',
         list: [],
+        settings: { enabled: false },
     },
     services: {
         processing: true,

client/src/reducers/rewrites.ts

@@ -66,6 +66,39 @@ const rewrites = handleActions(
             };
             return newState;
         },
+        [actions.getRewriteSettingsRequest.toString()]: (state: any) => ({
+            ...state,
+            processing: true,
+        }),
+        [actions.getRewriteSettingsFailure.toString()]: (state: any) => ({
+            ...state,
+            processing: false,
+        }),
+        [actions.getRewriteSettingsSuccess.toString()]: (state: any, { payload }: any) => {
+            const newState = {
+                ...state,
+                settings: payload,
+                processing: false,
+            };
+            return newState;
+        },
+
+        [actions.updateRewriteSettingsRequest.toString()]: (state: any) => ({
+            ...state,
+            processingUpdate: true,
+        }),
+        [actions.updateRewriteSettingsFailure.toString()]: (state: any) => ({
+            ...state,
+            processingUpdate: false,
+        }),
+        [actions.updateRewriteSettingsSuccess.toString()]: (state: any, { payload }: any) => ({
+            ...state,
+            settings: {
+                ...state.settings,
+                ...payload,
+            },
+            processingUpdate: false,
+        }),
 
         [actions.toggleRewritesModal.toString()]: (state: any, { payload }: any) => {
             if (payload) {
@@ -94,6 +127,7 @@ const rewrites = handleActions(
         modalType: '',
         currentRewrite: {},
         list: [],
+        settings: { enabled: false },
     },
 );