PreviewBannerViewPR: Display branch info in preview banner (#113195)

public/app/features/provisioning/components/Dashboards/DashboardPreviewBanner.tsx

@@ -6,7 +6,8 @@ import { DashboardPageRouteSearchParams } from 'app/features/dashboard/container
 import { usePullRequestParam } from 'app/features/provisioning/hooks/usePullRequestParam';
 import { DashboardRoutes } from 'app/types/dashboard';
 
-import { PreviewBannerViewPR } from '../Shared/PreviewBannerViewPR';
+import { useGetResourceRepositoryView } from '../../hooks/useGetResourceRepositoryView';
+import { PreviewBranchInfo, PreviewBannerViewPR } from '../Shared/PreviewBannerViewPR';
 
 export interface CommonBannerProps {
   queryParams: DashboardPageRouteSearchParams;
@@ -28,6 +29,15 @@ export const commonAlertProps = {
 function DashboardPreviewBannerContent({ queryParams, slug, path }: DashboardPreviewBannerContentProps) {
   const { prURL } = usePullRequestParam();
   const file = useGetRepositoryFilesWithPathQuery({ name: slug, path, ref: queryParams.ref });
+  const { repository } = useGetResourceRepositoryView({ name: slug });
+  const targetRef = file.data?.ref;
+  const repoBaseUrl = file.data?.urls?.repositoryURL;
+
+  const branchInfo: PreviewBranchInfo = {
+    targetBranch: targetRef,
+    configuredBranch: repository?.branch,
+    repoBaseUrl,
+  };
 
   if (file.data?.errors) {
     return (
@@ -45,13 +55,13 @@ function DashboardPreviewBannerContent({ queryParams, slug, path }: DashboardPre
 
   // This page was loaded with a `pull_request_url` in the URL
   if (prURL?.length) {
-    return <PreviewBannerViewPR prParam={prURL} isNewPr />;
+    return <PreviewBannerViewPR prParam={prURL} branchInfo={branchInfo} />;
   }
 
-  // Check if this is a repo link
-  const repoUrl = file.data?.urls?.newPullRequestURL ?? file.data?.urls?.compareURL;
-  if (repoUrl) {
-    return <PreviewBannerViewPR prParam={repoUrl} />;
+  // Check if pull request URLs are available from the repository file data
+  const prOrCompareUrl = file.data?.urls?.newPullRequestURL ?? file.data?.urls?.compareURL;
+  if (prOrCompareUrl) {
+    return <PreviewBannerViewPR prParam={prOrCompareUrl} isNewPr branchInfo={branchInfo} />;
   }
 
   return (

public/app/features/provisioning/components/Shared/PreviewBannerViewPR.tsx

@@ -1,25 +1,32 @@
 import { textUtil } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
-import { Alert, Icon, Stack } from '@grafana/ui';
+import { Alert, Box, Icon, Stack, TextLink } from '@grafana/ui';
 import { RepoTypeDisplay, RepoType } from 'app/features/provisioning/Wizard/types';
 import { usePullRequestParam } from 'app/features/provisioning/hooks/usePullRequestParam';
 
 import { commonAlertProps } from '../Dashboards/DashboardPreviewBanner';
-
-// TODO: We have this https://github.com/grafana/git-ui-sync-project/issues/166 to add more details about the PR.
+import { getBranchUrl } from '../utils/url';
 
 interface Props {
   prParam?: string;
   isNewPr?: boolean;
   behindBranch?: boolean;
   repoUrl?: string;
+  branchInfo?: PreviewBranchInfo;
 }
 
+export type PreviewBranchInfo = {
+  targetBranch?: string;
+  configuredBranch?: string;
+  repoBaseUrl?: string;
+};
+
 /**
  * @description This component is used to display a banner when a provisioned dashboard/folder is created or loaded from a new branch in repo.
  */
-export function PreviewBannerViewPR({ prParam, isNewPr, behindBranch, repoUrl }: Props) {
+export function PreviewBannerViewPR({ prParam, isNewPr, behindBranch, repoUrl, branchInfo }: Props) {
   const { repoType } = usePullRequestParam();
+  const { targetBranch, configuredBranch, repoBaseUrl } = branchInfo || {};
 
   const capitalizedRepoType = isValidRepoType(repoType) ? RepoTypeDisplay[repoType] : 'repository';
 
@@ -96,6 +103,15 @@ export function PreviewBannerViewPR({ prParam, isNewPr, behindBranch, repoUrl }:
         The rest of Grafana users in your organization will still see the current version saved to configured default
         branch until this branch is merged
       </Trans>
+
+      {/* when repo type is not local, we show branch information */}
+      {showBranchInfo(repoType, branchInfo) && (
+        <Box marginTop={1}>
+          <Trans i18nKey="provisioned-resource-preview-banner.preview-banner.branch-text">branch: </Trans>
+          <TextLink href={getBranchUrl(repoBaseUrl!, targetBranch!, repoType)}>{targetBranch}</TextLink> {'\u2192'}{' '}
+          <TextLink href={getBranchUrl(repoBaseUrl!, configuredBranch!, repoType)}>{configuredBranch}</TextLink>
+        </Box>
+      )}
     </Alert>
   );
 }
@@ -106,3 +122,8 @@ export function isValidRepoType(repoType: string | undefined): repoType is RepoT
   }
   return repoType in RepoTypeDisplay;
 }
+
+function showBranchInfo(repoType: string | undefined, branchInfo?: PreviewBranchInfo): boolean {
+  const { targetBranch, configuredBranch, repoBaseUrl } = branchInfo || {};
+  return repoType !== 'local' && !!targetBranch && !!configuredBranch && !!repoBaseUrl;
+}

public/app/features/provisioning/components/utils/url.ts

@@ -0,0 +1,17 @@
+// repoType = string because this repoType is coming from URL param
+export const getBranchUrl = (baseUrl: string, branch: string, repoType?: string): string => {
+  if (repoType === 'local') {
+    return '';
+  }
+
+  switch (repoType) {
+    case 'github':
+      return `${baseUrl}/tree/${branch}`;
+    case 'gitlab':
+      return `${baseUrl}/-/tree/${branch}`;
+    case 'bitbucket':
+      return `${baseUrl}/src/${branch}`;
+    default:
+      return '';
+  }
+};

public/locales/en-US/grafana.json

@@ -11370,6 +11370,7 @@
   "provisioned-resource-preview-banner": {
     "preview-banner": {
       "behind-branch-text": "This resource is behind the branch in {{repoType}}.",
+      "branch-text": "branch:",
       "not-saved": "The rest of Grafana users in your organization will still see the current version saved to configured default branch until this branch is merged",
       "open-in-repo-button": "Open in {{repoType}}",
       "open-pull-request-in-repo": "Open pull request in {{repoType}}",