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}}",