From c777a774f72a3039ba64475b21874deae10691cd Mon Sep 17 00:00:00 2001
From: Tagaishi <Tagaishi@hotmail.ch>
Date: Fri, 15 Sep 2023 18:17:46 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Hide=20DNS-Hole=20control=20buttons?=
 =?UTF-8?q?=20option=20(#1384)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../locales/en/modules/dns-hole-controls.json |   8 +-
 src/widgets/dnshole/DnsHoleControls.tsx       | 131 ++++++++++--------
 2 files changed, 84 insertions(+), 55 deletions(-)

diff --git a/public/locales/en/modules/dns-hole-controls.json b/public/locales/en/modules/dns-hole-controls.json
index 1215356b0..279931f04 100644
--- a/public/locales/en/modules/dns-hole-controls.json
+++ b/public/locales/en/modules/dns-hole-controls.json
@@ -1,6 +1,12 @@
 {
   "descriptor": {
     "name": "DNS hole controls",
-    "description": "Control PiHole or AdGuard from your dashboard"
+    "description": "Control PiHole or AdGuard from your dashboard",
+    "settings": {
+      "title": "DNS hole controls settings",
+      "showToggleAllButtons": {
+        "label": "Show 'Enable/Disable All' Buttons"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/src/widgets/dnshole/DnsHoleControls.tsx b/src/widgets/dnshole/DnsHoleControls.tsx
index 7f2835035..748a55e39 100644
--- a/src/widgets/dnshole/DnsHoleControls.tsx
+++ b/src/widgets/dnshole/DnsHoleControls.tsx
@@ -24,7 +24,12 @@ import { useDnsHoleSummeryQuery } from './DnsHoleSummary';
 const definition = defineWidget({
   id: 'dns-hole-controls',
   icon: IconDeviceGamepad,
-  options: {},
+  options: {
+    showToggleAllButtons: {
+      type: 'switch',
+      defaultValue: true,
+    },
+  },
   gridstack: {
     minWidth: 2,
     minHeight: 1,
@@ -102,51 +107,66 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
   };
 
   return (
-    <Stack justify="space-between" h={'100%'} spacing="0.25rem">
-      <SimpleGrid ref={ref} cols={width > 275 ? 2 : 1} spacing="0.25rem">
-        <Button
-          onClick={async () => {
-            await mutateAsync({
-              action: 'enable',
-              configName,
-              appsToChange: getDnsStatus()?.disabled,
-            },{
-              onSettled: () => {
-                reFetchSummaryDns();
-              }
-            });
-          }}
-          disabled={getDnsStatus()?.disabled.length === 0 || fetchingDnsSummary || changingStatus}
-          leftIcon={<IconPlayerPlay size={20} />}
-          variant="light"
-          color="green"
-          h="2rem"
-        >
-          {t('enableAll')}
-        </Button>
-        <Button
-          onClick={async () => {
-            await mutateAsync({
-              action: 'disable',
-              configName,
-              appsToChange: getDnsStatus()?.enabled,
-            },{
-              onSettled: () => {
-                reFetchSummaryDns();
-              }
-            });
-          }}
-          disabled={getDnsStatus()?.enabled.length === 0 || fetchingDnsSummary || changingStatus}
-          leftIcon={<IconPlayerStop size={20} />}
-          variant="light"
-          color="red"
-          h="2rem"
-        >
-          {t('disableAll')}
-        </Button>
-      </SimpleGrid>
+    <Stack h={'100%'} spacing="0.25rem">
+      {widget.properties.showToggleAllButtons && (
+        <SimpleGrid ref={ref} cols={width > 275 ? 2 : 1} spacing="0.25rem">
+          <Button
+            onClick={async () => {
+              await mutateAsync(
+                {
+                  action: 'enable',
+                  configName,
+                  appsToChange: getDnsStatus()?.disabled,
+                },
+                {
+                  onSettled: () => {
+                    reFetchSummaryDns();
+                  },
+                }
+              );
+            }}
+            disabled={getDnsStatus()?.disabled.length === 0 || fetchingDnsSummary || changingStatus}
+            leftIcon={<IconPlayerPlay size={20} />}
+            variant="light"
+            color="green"
+            h="2rem"
+          >
+            {t('enableAll')}
+          </Button>
+          <Button
+            onClick={async () => {
+              await mutateAsync(
+                {
+                  action: 'disable',
+                  configName,
+                  appsToChange: getDnsStatus()?.enabled,
+                },
+                {
+                  onSettled: () => {
+                    reFetchSummaryDns();
+                  },
+                }
+              );
+            }}
+            disabled={getDnsStatus()?.enabled.length === 0 || fetchingDnsSummary || changingStatus}
+            leftIcon={<IconPlayerStop size={20} />}
+            variant="light"
+            color="red"
+            h="2rem"
+          >
+            {t('disableAll')}
+          </Button>
+        </SimpleGrid>
+      )}
 
-      <Stack spacing="0.25rem">
+      <Stack
+        spacing="0.25rem"
+        display="flex"
+        style={{
+          flex: '1',
+          justifyContent: widget.properties.showToggleAllButtons ? 'flex-end' : 'space-evenly',
+        }}
+      >
         {data.status.map((dnsHole, index) => {
           const app = config?.apps.find((x) => x.id === dnsHole.appId);
 
@@ -155,7 +175,7 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
           }
 
           return (
-            <Card withBorder={true} key={dnsHole.appId} p="xs">
+            <Card withBorder={true} key={dnsHole.appId} p="xs" radius="md">
               <Group>
                 <Box
                   sx={(theme) => ({
@@ -172,15 +192,18 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
                   <Text>{app.name}</Text>
                   <UnstyledButton
                     onClick={async () => {
-                      await mutateAsync({
-                        action: dnsHole.status === 'enabled' ? 'disable' : 'enable',
-                        configName,
-                        appsToChange: [app.id],
-                      },{
-                        onSettled: () => {
-                          reFetchSummaryDns();
+                      await mutateAsync(
+                        {
+                          action: dnsHole.status === 'enabled' ? 'disable' : 'enable',
+                          configName,
+                          appsToChange: [app.id],
+                        },
+                        {
+                          onSettled: () => {
+                            reFetchSummaryDns();
+                          },
                         }
-                      });
+                      );
                     }}
                     disabled={fetchingDnsSummary || changingStatus}
                   >