Public Dashboards: disable saving button instead of hide before accepting checkboxes (#51744)

public/app/features/dashboard/components/ShareModal/SharePublicDashboard.tsx

@@ -2,18 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import { AppEvents } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime/src';
-import {
-  Alert,
-  Button,
-  Checkbox,
-  ClipboardButton,
-  Field,
-  FieldSet,
-  Icon,
-  Input,
-  LinkButton,
-  Switch,
-} from '@grafana/ui';
+import { Alert, Button, Checkbox, ClipboardButton, Field, FieldSet, Input, LinkButton, Switch } from '@grafana/ui';
 import { notifyApp } from 'app/core/actions';
 import { createErrorNotification } from 'app/core/copy/appNotification';
 import { appEvents } from 'app/core/core';
@@ -56,6 +45,16 @@ export const SharePublicDashboard = (props: Props) => {
     getPublicDashboardConfig(props.dashboard.uid, setPublicDashboardConfig).catch();
   }, [props.dashboard.uid]);
 
+  useEffect(() => {
+    if (publicDashboardPersisted(publicDashboard)) {
+      setAcknowledgements({
+        public: true,
+        datasources: true,
+        usage: true,
+      });
+    }
+  }, [publicDashboard]);
+
   const onSavePublicConfig = () => {
     reportInteraction('grafana_dashboards_public_create_clicked');
 
@@ -108,119 +107,119 @@ export const SharePublicDashboard = (props: Props) => {
             github discussion
           </a>
           <hr />
-          {!publicDashboardPersisted(publicDashboard) && (
-            <div>
-              Before you click Save, please acknowledge the following information: <br />
-              <FieldSet>
-                <br />
-                <div>
-                  <Checkbox
-                    label="Your entire dashboard will be public"
-                    value={acknowledgements.public}
-                    onChange={(e) => onAcknowledge('public', e.currentTarget.checked)}
-                  />
-                </div>
-                <br />
-                <div>
-                  <Checkbox
-                    label="Publishing currently only works with a subset of datasources"
-                    value={acknowledgements.datasources}
-                    onChange={(e) => onAcknowledge('datasources', e.currentTarget.checked)}
-                  />
-                  <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"
-                  />
-                </div>
-                <br />
+          <div>
+            Before you click Save, please acknowledge the following information: <br />
+            <FieldSet>
+              <br />
+              <div>
                 <Checkbox
-                  label="Making your dashboard public will cause queries to run each time the dashboard is viewed which may increase costs"
-                  value={acknowledgements.usage}
-                  onChange={(e) => onAcknowledge('usage', e.currentTarget.checked)}
+                  label="Your entire dashboard will be public"
+                  value={acknowledgements.public}
+                  disabled={publicDashboardPersisted(publicDashboard)}
+                  onChange={(e) => onAcknowledge('public', e.currentTarget.checked)}
+                />
+              </div>
+              <br />
+              <div>
+                <Checkbox
+                  label="Publishing currently only works with a subset of datasources"
+                  value={acknowledgements.datasources}
+                  disabled={publicDashboardPersisted(publicDashboard)}
+                  onChange={(e) => onAcknowledge('datasources', e.currentTarget.checked)}
                 />
                 <LinkButton
                   variant="primary"
-                  href="https://grafana.com/docs/grafana/latest/enterprise/query-caching/"
+                  href="https://grafana.com/docs/grafana/latest/datasources/"
                   target="_blank"
                   fill="text"
                   icon="info-circle"
                   rel="noopener noreferrer"
-                  tooltip="Learn more about query caching"
+                  tooltip="Learn more about public datasources"
                 />
-                <br />
-                <br />
-              </FieldSet>
-            </div>
-          )}
-          {(publicDashboardPersisted(publicDashboard) || acknowledged()) && (
-            <div>
-              <h4 className="share-modal-info-text">Public Dashboard Configuration</h4>
-              <FieldSet>
-                Time Range
-                <br />
-                <div style={{ padding: '5px' }}>
-                  <Input
-                    value={props.dashboard.getDefaultTime().from}
-                    disabled={true}
-                    addonBefore={
-                      <span style={{ width: '50px', display: 'flex', alignItems: 'center', padding: '5px' }}>
-                        From:
-                      </span>
-                    }
-                  />
-                  <Input
-                    value={props.dashboard.getDefaultTime().to}
-                    disabled={true}
-                    addonBefore={
-                      <span style={{ width: '50px', display: 'flex', alignItems: 'center', padding: '5px' }}>To:</span>
-                    }
-                  />
-                </div>
-                <br />
-                <Field label="Enabled" description="Configures whether current dashboard can be available publicly">
-                  <Switch
-                    disabled={dashboardHasTemplateVariables(dashboardVariables)}
-                    value={publicDashboard?.isEnabled}
-                    onChange={() => {
-                      reportInteraction('grafana_dashboards_public_enable_clicked', {
-                        action: publicDashboard?.isEnabled ? 'disable' : 'enable',
-                      });
+              </div>
+              <br />
+              <Checkbox
+                label="Making your dashboard public will cause queries to run each time the dashboard is viewed which may increase costs"
+                value={acknowledgements.usage}
+                disabled={publicDashboardPersisted(publicDashboard)}
+                onChange={(e) => onAcknowledge('usage', e.currentTarget.checked)}
+              />
+              <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"
+              />
+              <br />
+              <br />
+            </FieldSet>
+          </div>
+          <div>
+            <h4 className="share-modal-info-text">Public Dashboard Configuration</h4>
+            <FieldSet>
+              Time Range
+              <br />
+              <div style={{ padding: '5px' }}>
+                <Input
+                  value={props.dashboard.time.from}
+                  disabled={true}
+                  addonBefore={
+                    <span style={{ width: '50px', display: 'flex', alignItems: 'center', padding: '5px' }}>From:</span>
+                  }
+                />
+                <Input
+                  value={props.dashboard.time.to}
+                  disabled={true}
+                  addonBefore={
+                    <span style={{ width: '50px', display: 'flex', alignItems: 'center', padding: '5px' }}>To:</span>
+                  }
+                />
+              </div>
+              <br />
+              <Field label="Enabled" description="Configures whether current dashboard can be available publicly">
+                <Switch
+                  disabled={dashboardHasTemplateVariables(dashboardVariables)}
+                  value={publicDashboard?.isEnabled}
+                  onChange={() => {
+                    reportInteraction('grafana_dashboards_public_enable_clicked', {
+                      action: publicDashboard?.isEnabled ? 'disable' : 'enable',
+                    });
 
-                      setPublicDashboardConfig({
-                        ...publicDashboard,
-                        isEnabled: !publicDashboard.isEnabled,
-                      });
-                    }}
+                    setPublicDashboardConfig({
+                      ...publicDashboard,
+                      isEnabled: !publicDashboard.isEnabled,
+                    });
+                  }}
+                />
+              </Field>
+              {publicDashboardPersisted(publicDashboard) && publicDashboard.isEnabled && (
+                <Field label="Link URL">
+                  <Input
+                    value={generatePublicDashboardUrl(publicDashboard)}
+                    readOnly
+                    addonAfter={
+                      <ClipboardButton
+                        variant="primary"
+                        icon="copy"
+                        getText={() => {
+                          return generatePublicDashboardUrl(publicDashboard);
+                        }}
+                        onClipboardCopy={onShareUrlCopy}
+                      >
+                        Copy
+                      </ClipboardButton>
+                    }
                   />
                 </Field>
-                {publicDashboardPersisted(publicDashboard) && publicDashboard.isEnabled && (
-                  <Field label="Link URL">
-                    <Input
-                      value={generatePublicDashboardUrl(publicDashboard)}
-                      readOnly
-                      addonAfter={
-                        <ClipboardButton
-                          variant="primary"
-                          getText={() => {
-                            return generatePublicDashboardUrl(publicDashboard);
-                          }}
-                          onClipboardCopy={onShareUrlCopy}
-                        >
-                          <Icon name="copy" /> Copy
-                        </ClipboardButton>
-                      }
-                    />
-                  </Field>
-                )}
-              </FieldSet>
-              <Button onClick={onSavePublicConfig}>Save Sharing Configuration</Button>
-            </div>
-          )}
+              )}
+            </FieldSet>
+            <Button disabled={!acknowledged()} onClick={onSavePublicConfig}>
+              Save Sharing Configuration
+            </Button>
+          </div>
         </>
       )}
     </>