✨ Hide DNS-Hole control buttons option (#1384)

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"
+      }
+    }
   }
 }

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">
+    <Stack h={'100%'} spacing="0.25rem">
-      <SimpleGrid ref={ref} cols={width > 275 ? 2 : 1} spacing="0.25rem">
+      {widget.properties.showToggleAllButtons && (
-        <Button
+        <SimpleGrid ref={ref} cols={width > 275 ? 2 : 1} spacing="0.25rem">
-          onClick={async () => {
+          <Button
-            await mutateAsync({
+            onClick={async () => {
-              action: 'enable',
+              await mutateAsync(
-              configName,
+                {
-              appsToChange: getDnsStatus()?.disabled,
+                  action: 'enable',
-            },{
+                  configName,
-              onSettled: () => {
+                  appsToChange: getDnsStatus()?.disabled,
-                reFetchSummaryDns();
+                },
-              }
+                {
-            });
+                  onSettled: () => {
-          }}
+                    reFetchSummaryDns();
-          disabled={getDnsStatus()?.disabled.length === 0 || fetchingDnsSummary || changingStatus}
+                  },
-          leftIcon={<IconPlayerPlay size={20} />}
+                }
-          variant="light"
+              );
-          color="green"
+            }}
-          h="2rem"
+            disabled={getDnsStatus()?.disabled.length === 0 || fetchingDnsSummary || changingStatus}
-        >
+            leftIcon={<IconPlayerPlay size={20} />}
-          {t('enableAll')}
+            variant="light"
-        </Button>
+            color="green"
-        <Button
+            h="2rem"
-          onClick={async () => {
+          >
-            await mutateAsync({
+            {t('enableAll')}
-              action: 'disable',
+          </Button>
-              configName,
+          <Button
-              appsToChange: getDnsStatus()?.enabled,
+            onClick={async () => {
-            },{
+              await mutateAsync(
-              onSettled: () => {
+                {
-                reFetchSummaryDns();
+                  action: 'disable',
-              }
+                  configName,
-            });
+                  appsToChange: getDnsStatus()?.enabled,
-          }}
+                },
-          disabled={getDnsStatus()?.enabled.length === 0 || fetchingDnsSummary || changingStatus}
+                {
-          leftIcon={<IconPlayerStop size={20} />}
+                  onSettled: () => {
-          variant="light"
+                    reFetchSummaryDns();
-          color="red"
+                  },
-          h="2rem"
+                }
-        >
+              );
-          {t('disableAll')}
+            }}
-        </Button>
+            disabled={getDnsStatus()?.enabled.length === 0 || fetchingDnsSummary || changingStatus}
-      </SimpleGrid>
+            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({
+                      await mutateAsync(
-                        action: dnsHole.status === 'enabled' ? 'disable' : 'enable',
+                        {
-                        configName,
+                          action: dnsHole.status === 'enabled' ? 'disable' : 'enable',
-                        appsToChange: [app.id],
+                          configName,
-                      },{
+                          appsToChange: [app.id],
-                        onSettled: () => {
+                        },
-                          reFetchSummaryDns();
+                        {
+                          onSettled: () => {
+                            reFetchSummaryDns();
+                          },
                         }
-                      });
+                      );
                     }}
                     disabled={fetchingDnsSummary || changingStatus}
                   >