From f2889c6cc4527303689c419bb3a98b3402adebcb Mon Sep 17 00:00:00 2001 From: Alex Khomenko Date: Wed, 23 Jul 2025 14:25:11 +0300 Subject: [PATCH] Provisioning: Add provider icons (#108510) * Provisioning: Add provider icons * Use color logos * format * Move img to feature folder --- packages/grafana-data/src/types/icon.ts | 2 ++ public/app/core/icons/cached.json | 4 +++- .../GettingStarted/GettingStarted.tsx | 3 ++- .../provisioning/Shared/RepositoryTypeCards.tsx | 16 ++++++++++++++-- .../app/features/provisioning/img/bitbucket.svg | 16 ++++++++++++++++ public/app/features/provisioning/img/git.svg | 11 +++++++++++ public/app/features/provisioning/img/gitlab.svg | 10 ++++++++++ .../features/provisioning/img}/provisioning.svg | 0 .../provisioning/utils/repositoryTypes.ts | 11 +++++++++-- public/img/icons/unicons/bitbucket.svg | 5 +++++ public/img/icons/unicons/git.svg | 6 ++++++ 11 files changed, 78 insertions(+), 6 deletions(-) create mode 100644 public/app/features/provisioning/img/bitbucket.svg create mode 100644 public/app/features/provisioning/img/git.svg create mode 100644 public/app/features/provisioning/img/gitlab.svg rename public/{img/provisioning => app/features/provisioning/img}/provisioning.svg (100%) create mode 100644 public/img/icons/unicons/bitbucket.svg create mode 100644 public/img/icons/unicons/git.svg diff --git a/packages/grafana-data/src/types/icon.ts b/packages/grafana-data/src/types/icon.ts index 79df07aae5a..0cb4a61a25b 100644 --- a/packages/grafana-data/src/types/icon.ts +++ b/packages/grafana-data/src/types/icon.ts @@ -274,6 +274,8 @@ export const availableIconsIndex = { attach: true, 'dollar-alt': true, 'ai-sparkle': true, + bitbucket: true, + git: true, }; export type IconName = keyof typeof availableIconsIndex; diff --git a/public/app/core/icons/cached.json b/public/app/core/icons/cached.json index 520a7c14941..ce86bef4eae 100644 --- a/public/app/core/icons/cached.json +++ b/public/app/core/icons/cached.json @@ -180,5 +180,7 @@ "unicons/ai-sparkle", "unicons/dollar-alt", "unicons/window-grid", - "unicons/ban" + "unicons/ban", + "unicons/git", + "unicons/bitbucket" ] diff --git a/public/app/features/provisioning/GettingStarted/GettingStarted.tsx b/public/app/features/provisioning/GettingStarted/GettingStarted.tsx index 40116d38276..de986fe4748 100644 --- a/public/app/features/provisioning/GettingStarted/GettingStarted.tsx +++ b/public/app/features/provisioning/GettingStarted/GettingStarted.tsx @@ -7,7 +7,8 @@ import { Trans, t } from '@grafana/i18n'; import { config } from '@grafana/runtime'; import { Alert, Stack, useStyles2 } from '@grafana/ui'; import { Repository, useGetFrontendSettingsQuery } from 'app/api/clients/provisioning/v0alpha1'; -import provisioningSvg from 'img/provisioning/provisioning.svg'; + +import provisioningSvg from '../img/provisioning.svg'; import { EnhancedFeatures } from './EnhancedFeatures'; import { FeaturesList } from './FeaturesList'; diff --git a/public/app/features/provisioning/Shared/RepositoryTypeCards.tsx b/public/app/features/provisioning/Shared/RepositoryTypeCards.tsx index 3f0fd176069..7eab2d894a3 100644 --- a/public/app/features/provisioning/Shared/RepositoryTypeCards.tsx +++ b/public/app/features/provisioning/Shared/RepositoryTypeCards.tsx @@ -26,7 +26,11 @@ export function RepositoryTypeCards() { {gitProviders.map((config) => ( - + {config.logo ? ( + {config.label} + ) : ( + + )} ( - + {config.logo ? ( + {config.label} + ) : ( + + )} {config.type === 'local' ? ( Configure file provisioning ) : ( @@ -76,5 +84,9 @@ function getStyles() { card: css({ width: 220, }), + logo: css({ + width: 36, + height: 36, + }), }; } diff --git a/public/app/features/provisioning/img/bitbucket.svg b/public/app/features/provisioning/img/bitbucket.svg new file mode 100644 index 00000000000..d809d73b53c --- /dev/null +++ b/public/app/features/provisioning/img/bitbucket.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + diff --git a/public/app/features/provisioning/img/git.svg b/public/app/features/provisioning/img/git.svg new file mode 100644 index 00000000000..a22043d6ef3 --- /dev/null +++ b/public/app/features/provisioning/img/git.svg @@ -0,0 +1,11 @@ + + + + + + + + + + diff --git a/public/app/features/provisioning/img/gitlab.svg b/public/app/features/provisioning/img/gitlab.svg new file mode 100644 index 00000000000..fac27c2c322 --- /dev/null +++ b/public/app/features/provisioning/img/gitlab.svg @@ -0,0 +1,10 @@ + + + + + + + + + diff --git a/public/img/provisioning/provisioning.svg b/public/app/features/provisioning/img/provisioning.svg similarity index 100% rename from public/img/provisioning/provisioning.svg rename to public/app/features/provisioning/img/provisioning.svg diff --git a/public/app/features/provisioning/utils/repositoryTypes.ts b/public/app/features/provisioning/utils/repositoryTypes.ts index 4ac255adc75..f8848044900 100644 --- a/public/app/features/provisioning/utils/repositoryTypes.ts +++ b/public/app/features/provisioning/utils/repositoryTypes.ts @@ -2,12 +2,16 @@ import { t } from '@grafana/i18n'; import { IconName } from '@grafana/ui'; import { RepoType } from '../Wizard/types'; +import bitbucketSvg from '../img/bitbucket.svg'; +import gitSvg from '../img/git.svg'; +import gitlabSvg from '../img/gitlab.svg'; export interface RepositoryTypeConfig { type: RepoType; label: string; description: string; icon: IconName; + logo?: string; } export const getRepositoryTypeConfigs = (): RepositoryTypeConfig[] => [ @@ -15,7 +19,8 @@ export const getRepositoryTypeConfigs = (): RepositoryTypeConfig[] => [ type: 'git', label: t('provisioning.repository-types.pure-git', 'Pure Git'), description: t('provisioning.repository-types.pure-git-description', 'Connect to any Git repository'), - icon: 'code-branch' as const, + icon: 'git' as const, + logo: gitSvg, }, { type: 'github', @@ -28,12 +33,14 @@ export const getRepositoryTypeConfigs = (): RepositoryTypeConfig[] => [ label: t('provisioning.repository-types.gitlab', 'GitLab'), description: t('provisioning.repository-types.gitlab-description', 'Connect to GitLab repositories'), icon: 'gitlab' as const, + logo: gitlabSvg, }, { type: 'bitbucket', label: t('provisioning.repository-types.bitbucket', 'Bitbucket'), description: t('provisioning.repository-types.bitbucket-description', 'Connect to Bitbucket repositories'), - icon: 'cloud' as const, + icon: 'bitbucket' as const, + logo: bitbucketSvg, }, { type: 'local', diff --git a/public/img/icons/unicons/bitbucket.svg b/public/img/icons/unicons/bitbucket.svg new file mode 100644 index 00000000000..c0995016e49 --- /dev/null +++ b/public/img/icons/unicons/bitbucket.svg @@ -0,0 +1,5 @@ + + + diff --git a/public/img/icons/unicons/git.svg b/public/img/icons/unicons/git.svg new file mode 100644 index 00000000000..44d7438c613 --- /dev/null +++ b/public/img/icons/unicons/git.svg @@ -0,0 +1,6 @@ + + + + +