From 9b5e396be287e7a2cc87966d0556910d614336a7 Mon Sep 17 00:00:00 2001
From: juanicabanas <juan.cabanas@grafana.com>
Date: Mon, 23 Jan 2023 17:23:23 -0300
Subject: [PATCH] PublicDashboards: Checkboxes list refactor (#61947)

---
 .../AcknowledgeCheckboxes.tsx                 | 112 +++++++++---------
 .../SharePublicDashboard.tsx                  |   2 +-
 2 files changed, 60 insertions(+), 54 deletions(-)

diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/AcknowledgeCheckboxes.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/AcknowledgeCheckboxes.tsx
index 21c178b987c..3d010865c96 100644
--- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/AcknowledgeCheckboxes.tsx
+++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/AcknowledgeCheckboxes.tsx
@@ -4,7 +4,48 @@ import { UseFormRegister } from 'react-hook-form';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
 import { Checkbox, FieldSet, HorizontalGroup, LinkButton, VerticalGroup } from '@grafana/ui/src';
 
-import { SharePublicDashboardInputs } from './SharePublicDashboard';
+import { SharePublicDashboardAcknowledgmentInputs, SharePublicDashboardInputs } from './SharePublicDashboard';
+
+type Acknowledge = {
+  type: keyof SharePublicDashboardAcknowledgmentInputs;
+  description: string;
+  testId: string;
+  info: {
+    href: string;
+    tooltip: string;
+  };
+};
+const selectors = e2eSelectors.pages.ShareDashboardModal.PublicDashboard;
+
+const ACKNOWLEDGES: Acknowledge[] = [
+  {
+    type: 'publicAcknowledgment',
+    description: 'Your entire dashboard will be public',
+    testId: selectors.WillBePublicCheckbox,
+    info: {
+      href: 'https://grafana.com/docs/grafana/latest/dashboards/dashboard-public/',
+      tooltip: 'Learn more about public dashboards',
+    },
+  },
+  {
+    type: 'dataSourcesAcknowledgment',
+    description: 'Publishing currently only works with a subset of datasources',
+    testId: selectors.LimitedDSCheckbox,
+    info: {
+      href: 'https://grafana.com/docs/grafana/latest/datasources/',
+      tooltip: 'Learn more about public datasources',
+    },
+  },
+  {
+    type: 'usageAcknowledgment',
+    description: 'Making a dashboard public causes queries to run each time it is viewed, which may increase costs',
+    testId: selectors.CostIncreaseCheckbox,
+    info: {
+      href: 'https://grafana.com/docs/grafana/latest/enterprise/query-caching/',
+      tooltip: 'Learn more about query caching',
+    },
+  },
+];
 
 export const AcknowledgeCheckboxes = ({
   disabled,
@@ -12,65 +53,30 @@ export const AcknowledgeCheckboxes = ({
 }: {
   disabled: boolean;
   register: UseFormRegister<SharePublicDashboardInputs>;
-}) => {
-  const selectors = e2eSelectors.pages.ShareDashboardModal.PublicDashboard;
-
-  return (
-    <>
-      <p>Before you click Save, please acknowledge the following information:</p>
-      <FieldSet disabled={disabled}>
-        <VerticalGroup spacing="md">
-          <HorizontalGroup spacing="none">
+}) => (
+  <>
+    <p>Before you click Save, please acknowledge the following information:</p>
+    <FieldSet disabled={disabled}>
+      <VerticalGroup spacing="md">
+        {ACKNOWLEDGES.map((acknowledge) => (
+          <HorizontalGroup key={acknowledge.type} spacing="none" align="center">
             <Checkbox
-              {...register('publicAcknowledgment')}
-              label="Your entire dashboard will be public"
-              data-testid={selectors.WillBePublicCheckbox}
+              {...register(acknowledge.type)}
+              label={acknowledge.description}
+              data-testid={acknowledge.testId}
             />
-
             <LinkButton
               variant="primary"
-              href="https://grafana.com/docs/grafana/latest/dashboards/dashboard-public/"
+              href={acknowledge.info.href}
               target="_blank"
               fill="text"
               icon="info-circle"
               rel="noopener noreferrer"
-              tooltip="Learn more about public dashboards"
+              tooltip={acknowledge.info.tooltip}
             />
           </HorizontalGroup>
-          <HorizontalGroup spacing="none">
-            <Checkbox
-              {...register('dataSourcesAcknowledgment')}
-              label="Publishing currently only works with a subset of datasources"
-              data-testid={selectors.LimitedDSCheckbox}
-            />
-            <LinkButton
-              variant="primary"
-              href="https://grafana.com/docs/grafana/latest/datasources/"
-              target="_blank"
-              fill="text"
-              icon="info-circle"
-              rel="noopener noreferrer"
-              tooltip="Learn more about public datasources"
-            />
-          </HorizontalGroup>
-          <HorizontalGroup spacing="none">
-            <Checkbox
-              {...register('usageAcknowledgment')}
-              label="Making your dashboard public will cause queries to run each time the dashboard is viewed which may increase costs"
-              data-testid={selectors.CostIncreaseCheckbox}
-            />
-            <LinkButton
-              variant="primary"
-              href="https://grafana.com/docs/grafana/latest/enterprise/query-caching/"
-              target="_blank"
-              fill="text"
-              icon="info-circle"
-              rel="noopener noreferrer"
-              tooltip="Learn more about query caching"
-            />
-          </HorizontalGroup>
-        </VerticalGroup>
-      </FieldSet>
-    </>
-  );
-};
+        ))}
+      </VerticalGroup>
+    </FieldSet>
+  </>
+);
diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.tsx
index 30ce9afe4e7..270671fe812 100644
--- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.tsx
+++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.tsx
@@ -45,7 +45,7 @@ import { ShareModal } from '../ShareModal';
 
 interface Props extends ShareModalTabProps {}
 
-type SharePublicDashboardAcknowledgmentInputs = {
+export type SharePublicDashboardAcknowledgmentInputs = {
   publicAcknowledgment: boolean;
   dataSourcesAcknowledgment: boolean;
   usageAcknowledgment: boolean;