add rewrites toggle

client/src/actions/rewrites.ts

@@ -2,6 +2,7 @@ import { createAction } from 'redux-actions';
 import i18next from 'i18next';
 import apiClient from '../api/Api';
 import { addErrorToast, addSuccessToast } from './toasts';
+import type { RootState } from '../initialState';
 
 export const toggleRewritesModal = createAction('TOGGLE_REWRITES_MODAL');
 
@@ -47,12 +48,15 @@ export const updateRewriteSuccess = createAction('UPDATE_REWRITE_SUCCESS');
  * @param {string} config.target - current DNS rewrite value
  * @param {string} config.update - updated DNS rewrite value
  */
-export const updateRewrite = (config: any) => async (dispatch: any) => {
+export const updateRewrite = (config: any) => async (dispatch: any, getState: () => RootState) => {
     dispatch(updateRewriteRequest());
     try {
         await apiClient.updateRewrite(config);
         dispatch(updateRewriteSuccess());
-        dispatch(toggleRewritesModal());
+        const state = getState();
+        if (state?.rewrites?.isModalOpen) {
+            dispatch(toggleRewritesModal());
+        }
         dispatch(getRewritesList());
         dispatch(addSuccessToast(i18next.t('rewrite_updated', { key: config.domain })));
     } catch (error) {

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

@@ -17,6 +17,7 @@ interface TableProps {
     processingUpdate: boolean;
     handleDelete: (...args: unknown[]) => unknown;
     toggleRewritesModal: (...args: unknown[]) => unknown;
+    toggleRewrite: (...args: unknown[]) => unknown;
 }
 
 class Table extends Component<TableProps> {
@@ -28,7 +29,31 @@ class Table extends Component<TableProps> {
         </div>
     );
 
+    renderCheckbox = ({ original }: any) => {
+        const { processing, toggleRewrite } = this.props;
+        const { enabled } = original;
+
+        return (
+            <label className="checkbox">
+                <input
+                    type="checkbox"
+                    className="checkbox__input"
+                    onChange={() => toggleRewrite(original)}
+                    checked={enabled}
+                    disabled={processing}
+                />
+
+                <span className="checkbox__label" />
+            </label>
+        );
+    };
+
     columns = [
+        {
+            Header: 'enabled',
+            accessor: 'enabled',
+            Cell: this.renderCheckbox,
+        },
         {
             Header: this.props.t('domain'),
             accessor: 'domain',

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

@@ -46,6 +46,17 @@ class Rewrites extends Component<RewritesProps> {
         }
     };
 
+    toggleRewrite = (currentRewrite: any) => {
+        const { enabled } = currentRewrite;
+
+        currentRewrite.enabled = !enabled;
+
+        this.props.updateRewrite({
+            target: currentRewrite,
+            update: currentRewrite,
+        });
+    };
+
     render() {
         const {
             t,
@@ -80,6 +91,7 @@ class Rewrites extends Component<RewritesProps> {
                             processingUpdate={processingUpdate}
                             handleDelete={this.handleDelete}
                             toggleRewritesModal={toggleRewritesModal}
+                            toggleRewrite={this.toggleRewrite}
                         />
 
                         <button

client/src/initialState.ts

@@ -172,10 +172,12 @@ export type RewritesData = {
     currentRewrite?: {
         answer: string;
         domain: string;
+        enabled: boolean;
     };
     list: {
         answer: string;
         domain: string;
+        enabled: boolean;
     }[];
 };