diff --git a/public/app/features/provisioning/components/Dashboards/DashboardPreviewBanner.tsx b/public/app/features/provisioning/components/Dashboards/DashboardPreviewBanner.tsx
index 77df93f0f8b..2f39623f29a 100644
--- a/public/app/features/provisioning/components/Dashboards/DashboardPreviewBanner.tsx
+++ b/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 ;
+ return ;
}
- // Check if this is a repo link
- const repoUrl = file.data?.urls?.newPullRequestURL ?? file.data?.urls?.compareURL;
- if (repoUrl) {
- return ;
+ // 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 ;
}
return (
diff --git a/public/app/features/provisioning/components/Shared/PreviewBannerViewPR.tsx b/public/app/features/provisioning/components/Shared/PreviewBannerViewPR.tsx
index e9cddc16231..8a796ee049c 100644
--- a/public/app/features/provisioning/components/Shared/PreviewBannerViewPR.tsx
+++ b/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
+
+ {/* when repo type is not local, we show branch information */}
+ {showBranchInfo(repoType, branchInfo) && (
+
+ branch:
+ {targetBranch} {'\u2192'}{' '}
+ {configuredBranch}
+
+ )}
);
}
@@ -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;
+}
diff --git a/public/app/features/provisioning/components/utils/url.ts b/public/app/features/provisioning/components/utils/url.ts
new file mode 100644
index 00000000000..286235db636
--- /dev/null
+++ b/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 '';
+ }
+};
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 3c0c17c7af2..4e435b87ed2 100644
--- a/public/locales/en-US/grafana.json
+++ b/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}}",