Public Dashboards: Can toggle annotations in modal (#57312)

adds toggle for pubdash annotations

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

@@ -11,14 +11,18 @@ import { useIsDesktop } from 'app/features/dashboard/utils/screen';
 import { getTimeRange } from 'app/features/dashboard/utils/timeRange';
 
 export const Configuration = ({
+  isAnnotationsEnabled,
   disabled,
   isPubDashEnabled,
   onToggleEnabled,
+  onToggleAnnotations,
   dashboard,
 }: {
+  isAnnotationsEnabled: boolean;
   disabled: boolean;
   isPubDashEnabled?: boolean;
   onToggleEnabled: () => void;
+  onToggleAnnotations: () => void;
   dashboard: DashboardModel;
 }) => {
   const selectors = e2eSelectors.pages.ShareDashboardModal.PublicDashboard;
@@ -36,6 +40,19 @@ export const Configuration = ({
             <Label description="The public dashboard uses the default time settings of the dashboard">Time range</Label>
             <TimeRangeInput value={timeRange} disabled onChange={() => {}} />
           </Layout>
+          <Layout orientation={isDesktop ? 0 : 1} spacing="xs" justify="space-between">
+            <Label description="Show annotations on public dashboard">Show annotations</Label>
+            <Switch
+              data-testid={selectors.EnableAnnotationsSwitch}
+              value={isAnnotationsEnabled}
+              onChange={() => {
+                reportInteraction('grafana_dashboards_annotations_clicked', {
+                  action: isAnnotationsEnabled ? 'disable' : 'enable',
+                });
+                onToggleAnnotations();
+              }}
+            />
+          </Layout>
           <Layout orientation={isDesktop ? 0 : 1} spacing="xs" justify="space-between">
             <Label description="Configures whether current dashboard can be available publicly">Enabled</Label>
             <Switch

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

@@ -23,6 +23,7 @@ const server = setupServer(
       ctx.status(200),
       ctx.json({
         isEnabled: false,
+        annotationsEnabled: false,
         uid: undefined,
         dashboardUid: undefined,
         accessToken: 'an-access-token',
@@ -170,6 +171,7 @@ describe('SharePublic', () => {
     expect(screen.getByTestId(selectors.LimitedDSCheckbox)).toBeDisabled();
     expect(screen.getByTestId(selectors.CostIncreaseCheckbox)).toBeDisabled();
     expect(screen.getByTestId(selectors.EnableSwitch)).toBeDisabled();
+    expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeDisabled();
     expect(screen.getByTestId(selectors.SaveConfigButton)).toBeDisabled();
   });
   // test checking if current version of dashboard in state is persisted to db
@@ -188,6 +190,7 @@ describe('SharePublic - New config setup', () => {
     expect(screen.getByTestId(selectors.LimitedDSCheckbox)).toBeEnabled();
     expect(screen.getByTestId(selectors.CostIncreaseCheckbox)).toBeEnabled();
     expect(screen.getByTestId(selectors.EnableSwitch)).toBeEnabled();
+    expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeEnabled();
 
     expect(screen.getByTestId(selectors.SaveConfigButton)).toBeDisabled();
   });
@@ -222,6 +225,7 @@ describe('SharePublic - Already persisted', () => {
           ctx.status(200),
           ctx.json({
             isEnabled: true,
+            annotationsEnabled: true,
             uid: 'a-uid',
             dashboardUid: req.params.uId,
             accessToken: 'an-access-token',
@@ -237,6 +241,13 @@ describe('SharePublic - Already persisted', () => {
 
     expect(screen.getByTestId(selectors.SaveConfigButton)).toBeEnabled();
   });
+  it('when modal is opened, then annotations toggle is enabled and checked when its enabled in the db', async () => {
+    await renderSharePublicDashboard({ panel: mockPanel, dashboard: mockDashboard, onDismiss: () => {} });
+    await waitForElementToBeRemoved(screen.getByTestId('Spinner'));
+
+    expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeEnabled();
+    expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeChecked();
+  });
   it('when fetch is done, then loader spinner is gone, inputs are disabled and save button is enabled', async () => {
     await renderSharePublicDashboard({ panel: mockPanel, dashboard: mockDashboard, onDismiss: () => {} });
     await waitForElementToBeRemoved(screen.getByTestId('Spinner'));
@@ -253,13 +264,14 @@ describe('SharePublic - Already persisted', () => {
     await waitForElementToBeRemoved(screen.getByTestId('Spinner'));
     expect(screen.getByTestId(selectors.CopyUrlInput)).toBeInTheDocument();
   });
-  it('when pubdash is disabled in the db, then link url is not available', async () => {
+  it('when pubdash is disabled in the db, then link url is not available and annotations toggle is disabled', async () => {
     server.use(
       rest.get('/api/dashboards/uid/:uId/public-config', (req, res, ctx) => {
         return res(
           ctx.status(200),
           ctx.json({
             isEnabled: false,
+            annotationsEnabled: false,
             uid: 'a-uid',
             dashboardUid: req.params.uId,
             accessToken: 'an-access-token',
@@ -272,6 +284,7 @@ describe('SharePublic - Already persisted', () => {
     await waitForElementToBeRemoved(screen.getByTestId('Spinner'));
 
     expect(screen.queryByTestId(selectors.CopyUrlInput)).not.toBeInTheDocument();
+    expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).not.toBeChecked();
   });
   it('when pubdash is disabled by the user, then link url is not available', async () => {
     await renderSharePublicDashboard({ panel: mockPanel, dashboard: mockDashboard, onDismiss: () => {} });

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

@@ -44,6 +44,7 @@ export const SharePublicDashboard = (props: Props) => {
     isEnabled: false,
     wasTouched: false,
   });
+  const [annotationsEnabled, setAnnotationsEnabled] = useState(false);
 
   useEffect(() => {
     reportInteraction('grafana_dashboards_public_share_viewed');
@@ -56,6 +57,7 @@ export const SharePublicDashboard = (props: Props) => {
         datasources: true,
         usage: true,
       });
+      setAnnotationsEnabled(!!publicDashboard?.annotationsEnabled);
     }
 
     setEnabledSwitch((prevState) => ({ ...prevState, isEnabled: !!publicDashboard?.isEnabled }));
@@ -80,7 +82,7 @@ export const SharePublicDashboard = (props: Props) => {
 
     saveConfig({
       dashboard: props.dashboard,
-      payload: { ...publicDashboard!, isEnabled: enabledSwitch.isEnabled },
+      payload: { ...publicDashboard!, isEnabled: enabledSwitch.isEnabled, annotationsEnabled },
     });
   };
 
@@ -124,12 +126,14 @@ export const SharePublicDashboard = (props: Props) => {
             </div>
             <hr />
             <Configuration
+              isAnnotationsEnabled={annotationsEnabled}
               dashboard={props.dashboard}
               disabled={!hasWritePermissions || isLoading || isFetchingError}
               isPubDashEnabled={enabledSwitch.isEnabled}
               onToggleEnabled={() =>
                 setEnabledSwitch((prevState) => ({ isEnabled: !prevState.isEnabled, wasTouched: true }))
               }
+              onToggleAnnotations={() => setAnnotationsEnabled((prevState) => !prevState)}
             />
             {publicDashboardPersisted(publicDashboard) && enabledSwitch.isEnabled && (
               <Field label="Link URL" className={styles.publicUrl}>

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboardUtils.ts

@@ -4,6 +4,7 @@ import { DashboardDataDTO, DashboardMeta } from 'app/types/dashboard';
 
 export interface PublicDashboard {
   accessToken?: string;
+  annotationsEnabled: boolean;
   isEnabled: boolean;
   uid: string;
   dashboardUid: string;