POC/Provisioning: Add dashboard preview banner (#99663)

.betterer.results

@@ -3405,6 +3405,11 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "4"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "5"]
     ],
+    "public/app/features/dashboard-scene/saving/provisioned/DashboardPreviewBanner.tsx:5381": [
+      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
+    ],
     "public/app/features/dashboard-scene/saving/provisioned/SaveProvisionedDashboard.tsx:5381": [
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"],
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "1"],
@@ -3418,16 +3423,13 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "9"],
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "10"],
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "11"],
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "12"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "12"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "13"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "14"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "15"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "16"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "17"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "18"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "19"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "20"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "21"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "18"]
     ],
     "public/app/features/dashboard-scene/saving/shared.tsx:5381": [
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"],

public/app/features/dashboard-scene/pages/DashboardScenePage.tsx

@@ -15,6 +15,7 @@ import { DashboardPageRouteParams, DashboardPageRouteSearchParams } from 'app/fe
 import { DashboardRoutes } from 'app/types';
 
 import { DashboardPrompt } from '../saving/DashboardPrompt';
+import { DashboardPreviewBanner } from '../saving/provisioned/DashboardPreviewBanner';
 
 import { getDashboardScenePageStateManager } from './DashboardScenePageStateManager';
 
@@ -77,6 +78,7 @@ export function DashboardScenePage({ route, queryParams, location }: Props) {
 
   return (
     <UrlSyncContextProvider scene={dashboard} updateUrlOnInit={true} createBrowserHistorySteps={true}>
+      <DashboardPreviewBanner queryParams={queryParams} />
       <dashboard.Component model={dashboard} key={dashboard.state.key} />
       <DashboardPrompt dashboard={dashboard} />
     </UrlSyncContextProvider>

public/app/features/dashboard-scene/saving/provisioned/DashboardPreviewBanner.tsx

@@ -0,0 +1,37 @@
+import { Alert, Icon, Stack } from '@grafana/ui';
+import { DashboardPageRouteSearchParams } from 'app/features/dashboard/containers/types';
+
+interface DashboardPreviewBannerProps {
+  queryParams: DashboardPageRouteSearchParams;
+}
+export function DashboardPreviewBanner({ queryParams }: DashboardPreviewBannerProps) {
+  if (!queryParams.isPreview) {
+    return null;
+  }
+
+  const hasPrLink = Boolean(queryParams.prLink);
+  return (
+    <Alert
+      title={'Dashboard preview'}
+      severity={'success'}
+      style={{ flex: 0 }}
+      buttonContent={
+        hasPrLink && (
+          <Stack alignItems={'center'}>
+            <span>Open pull request in GitHub</span>
+            <Icon name="external-link-alt" />
+          </Stack>
+        )
+      }
+      onRemove={
+        hasPrLink
+          ? () => {
+              window.open(queryParams.prLink, '_blank');
+            }
+          : undefined
+      }
+    >
+      {queryParams.prLink && <>Branch successfully created.</>}
+    </Alert>
+  );
+}

public/app/features/dashboard-scene/saving/provisioned/SaveProvisionedDashboard.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
 import { AppEvents } from '@grafana/data';
-import { getAppEvents } from '@grafana/runtime';
-import { Alert, Button, Field, Icon, Input, RadioButtonGroup, Stack, TextArea, TextLink } from '@grafana/ui';
+import { getAppEvents, locationService } from '@grafana/runtime';
+import { Alert, Button, Field, Input, RadioButtonGroup, Stack, TextArea, TextLink } from '@grafana/ui';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import { AnnoKeyRepoName } from 'app/features/apiserver/types';
 import { validationSrv } from 'app/features/manage-dashboards/services/ValidationSrv';
@@ -44,7 +44,7 @@ export function SaveProvisionedDashboard({ drawer, changeInfo, dashboard }: Prop
   const { saveProvisioned } = drawer.useState();
   const { meta, title: defaultTitle, description: defaultDescription } = dashboard.useState();
   const prURL = usePullRequestParam();
-  const [prOpened, setPrOpened] = useState(false);
+
   const {
     values: defaultValues,
     isNew,
@@ -68,23 +68,22 @@ export function SaveProvisionedDashboard({ drawer, changeInfo, dashboard }: Prop
   useEffect(() => {
     const appEvents = getAppEvents();
     if (request.isSuccess) {
-      appEvents.publish({
-        type: AppEvents.alertSuccess.name,
-        payload: ['Dashboard saved'],
-      });
       dashboard.setState({ isDirty: false });
-      if (workflow === WorkflowOption.Direct) {
-        dashboard.closeModal();
-      } else {
-        setPrOpened(true);
-      }
+      const prLink = workflow === WorkflowOption.Direct ? undefined : href;
+      dashboard.closeModal();
+      locationService.partial({
+        viewPanel: null,
+        editPanel: null,
+        isPreview: true,
+        prLink,
+      });
     } else if (request.isError) {
       appEvents.publish({
         type: AppEvents.alertError.name,
         payload: ['Error saving dashboard', request.error],
       });
     }
-  }, [request.isSuccess, request.isError, request.error, dashboard, workflow]);
+  }, [request.isSuccess, request.isError, request.error, dashboard, workflow, href]);
 
   useEffect(() => {
     setValue('workflow', getDefaultWorkflow(repositoryConfig));
@@ -112,24 +111,6 @@ export function SaveProvisionedDashboard({ drawer, changeInfo, dashboard }: Prop
   return (
     <form onSubmit={handleSubmit(doSave)}>
       <Stack direction="column" gap={2}>
-        {prOpened && href && (
-          <Alert
-            severity="success"
-            title="Branch successfully created"
-            buttonContent={
-              <Stack alignItems={'center'}>
-                <span>Open pull request in GitHub</span>
-                <Icon name="external-link-alt" />
-              </Stack>
-            }
-            onRemove={() => {
-              window.open(href, '_blank');
-              dashboard.closeModal();
-            }}
-          >
-            You can now open a pull request in Github.
-          </Alert>
-        )}
         {isNew && (
           <>
             <Field label={'Title'} invalid={!!errors.title} error={errors.title?.message}>

public/app/features/dashboard/containers/types.ts

@@ -20,6 +20,8 @@ export type DashboardPageRouteSearchParams = {
   kiosk?: string | true;
   scenes?: boolean;
   shareView?: string;
+  isPreview?: boolean;
+  prLink?: string;
 };
 
 export type PublicDashboardPageRouteParams = {