PublicDashboards: Time range setting added (#60487)

Time range added for public dashboard: 

- Enable/Disable switch added in public dashboard configuration.
- Time range picker shown in public dashboard for viewer user

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

@@ -34,9 +34,15 @@ export const Configuration = ({
       <FieldSet disabled={disabled} className={styles.dashboardConfig}>
         <VerticalGroup spacing="md">
           <Layout orientation={isDesktop ? 0 : 1} spacing="xs" justify="space-between">
-            <Label description="The public dashboard uses the default time settings of the dashboard">Time range</Label>
+            <Label description="The public dashboard uses the default time settings of the dashboard">
+              Default time range
+            </Label>
             <TimeRangeInput value={timeRange} disabled onChange={() => {}} />
           </Layout>
+          <Layout orientation={isDesktop ? 0 : 1} spacing="xs" justify="space-between">
+            <Label description="Allow viewers to change time range">Time range picker enabled</Label>
+            <Switch {...register('isTimeRangeEnabled')} data-testid={selectors.EnableTimeRangeSwitch} />
+          </Layout>
           <Layout orientation={isDesktop ? 0 : 1} spacing="xs" justify="space-between">
             <Label description="Show annotations on public dashboard">Show annotations</Label>
             <Switch

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

@@ -17,6 +17,8 @@ import { configureStore } from 'app/store/configureStore';
 
 import { ShareModal } from '../ShareModal';
 
+import { PublicDashboard } from './SharePublicDashboardUtils';
+
 const server = setupServer();
 
 jest.mock('@grafana/runtime', () => ({
@@ -158,6 +160,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.EnableTimeRangeSwitch)).toBeDisabled();
     expect(screen.getByTestId(selectors.SaveConfigButton)).toBeDisabled();
     expect(screen.queryByTestId(selectors.DeleteButton)).not.toBeInTheDocument();
   });
@@ -176,6 +179,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.EnableTimeRangeSwitch)).toBeDisabled();
     expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeDisabled();
     expect(screen.getByText('Save public dashboard')).toBeInTheDocument();
     expect(screen.getByTestId(selectors.SaveConfigButton)).toBeDisabled();
@@ -218,6 +222,7 @@ describe('SharePublic - New config setup', () => {
     expect(screen.getByTestId(selectors.CostIncreaseCheckbox)).toBeEnabled();
     expect(screen.getByTestId(selectors.EnableSwitch)).toBeEnabled();
     expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeEnabled();
+    expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeEnabled();
     expect(screen.queryByTestId(selectors.DeleteButton)).not.toBeInTheDocument();
 
     expect(screen.getByText('Create public dashboard')).toBeInTheDocument();
@@ -252,6 +257,15 @@ describe('SharePublic - New config setup', () => {
 });
 
 describe('SharePublic - Already persisted', () => {
+  const pubdashResponse: PublicDashboard = {
+    isEnabled: true,
+    annotationsEnabled: true,
+    timeSelectionEnabled: true,
+    uid: 'a-uid',
+    dashboardUid: '',
+    accessToken: 'an-access-token',
+  };
+
   beforeEach(() => {
     mockDashboard.meta.hasPublicDashboard = true;
     server.use(
@@ -259,11 +273,8 @@ describe('SharePublic - Already persisted', () => {
         return res(
           ctx.status(200),
           ctx.json({
-            isEnabled: true,
-            annotationsEnabled: true,
-            uid: 'a-uid',
+            ...pubdashResponse,
             dashboardUid: req.params.dashboardUid,
-            accessToken: 'an-access-token',
           })
         );
       })
@@ -292,6 +303,33 @@ describe('SharePublic - Already persisted', () => {
     expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeEnabled();
     expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeChecked();
   });
+  it('when modal is opened, then time range switch is enabled and checked when its checked in the db', async () => {
+    await renderSharePublicDashboard({ panel: mockPanel, dashboard: mockDashboard, onDismiss: () => {} });
+    await waitForElementToBeRemoved(screen.getAllByTestId('Spinner'));
+
+    expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeEnabled();
+    expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeChecked();
+  });
+
+  it('when modal is opened, then time range switch is enabled and not checked when its not checked in the db', async () => {
+    server.use(
+      rest.get('/api/dashboards/uid/:dashboardUid/public-dashboards', (req, res, ctx) => {
+        return res(
+          ctx.status(200),
+          ctx.json({
+            ...pubdashResponse,
+            timeSelectionEnabled: false,
+          })
+        );
+      })
+    );
+
+    await renderSharePublicDashboard({ panel: mockPanel, dashboard: mockDashboard, onDismiss: () => {} });
+    await waitForElementToBeRemoved(screen.getAllByTestId('Spinner'));
+
+    expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeEnabled();
+    expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).not.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.getAllByTestId('Spinner'));
@@ -301,6 +339,7 @@ describe('SharePublic - Already persisted', () => {
     expect(screen.getByTestId(selectors.CostIncreaseCheckbox)).toBeDisabled();
 
     expect(screen.getByTestId(selectors.EnableSwitch)).toBeEnabled();
+    expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeEnabled();
     expect(screen.getByText('Save public dashboard')).toBeInTheDocument();
     expect(screen.getByTestId(selectors.SaveConfigButton)).toBeEnabled();
     expect(screen.getByTestId(selectors.DeleteButton)).toBeEnabled();

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

@@ -53,6 +53,7 @@ type SharePublicDashboardAcknowledgmentInputs = {
 
 export type SharePublicDashboardInputs = {
   isAnnotationsEnabled: boolean;
+  isTimeRangeEnabled: boolean;
   enabledSwitch: boolean;
 } & SharePublicDashboardAcknowledgmentInputs;
 
@@ -88,6 +89,7 @@ export const SharePublicDashboard = (props: Props) => {
       dataSourcesAcknowledgment: false,
       usageAcknowledgment: false,
       isAnnotationsEnabled: false,
+      isTimeRangeEnabled: false,
       enabledSwitch: false,
     },
   });
@@ -110,6 +112,7 @@ export const SharePublicDashboard = (props: Props) => {
       dataSourcesAcknowledgment: isPublicDashboardPersisted,
       usageAcknowledgment: isPublicDashboardPersisted,
       isAnnotationsEnabled: publicDashboard?.annotationsEnabled,
+      isTimeRangeEnabled: publicDashboard?.timeSelectionEnabled,
       enabledSwitch: publicDashboard?.isEnabled,
     });
   }, [publicDashboard, reset]);
@@ -151,6 +154,7 @@ export const SharePublicDashboard = (props: Props) => {
         ...publicDashboard!,
         isEnabled: values.enabledSwitch,
         annotationsEnabled: values.isAnnotationsEnabled,
+        timeSelectionEnabled: values.isTimeRangeEnabled,
       },
     };
 

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

@@ -13,6 +13,7 @@ export interface PublicDashboard {
   uid: string;
   dashboardUid: string;
   timeSettings?: object;
+  timeSelectionEnabled: boolean;
 }
 
 export interface DashboardResponse {