RepositoryCard: use RepoIcon to display repository icon (#109144)

* RepositoryCard: use RepoIcon to display repository icon

public/app/features/provisioning/Repository/RepositoryCard.tsx

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 
 import { Trans } from '@grafana/i18n';
-import { IconName, Stack, Text, TextLink, Icon, Card, LinkButton } from '@grafana/ui';
+import { Stack, Text, TextLink, Icon, Card, LinkButton } from '@grafana/ui';
 import { Repository, ResourceCount } from 'app/api/clients/provisioning/v0alpha1';
 
+import { RepoIcon } from '../Shared/RepoIcon';
 import { StatusBadge } from '../Shared/StatusBadge';
 import { PROVISIONING_URL } from '../constants';
 
@@ -53,14 +54,10 @@ export function RepositoryCard({ repository }: Props) {
     return meta;
   };
 
-  const getRepositoryIcon = (): IconName => {
-    return spec?.type === 'github' ? 'github' : 'database';
-  };
-
   return (
     <Card noMargin key={name}>
       <Card.Figure>
-        <Icon name={getRepositoryIcon()} size="xxl" />
+        <RepoIcon type={spec?.type} />
       </Card.Figure>
       <Card.Heading>
         <Stack gap={2} direction="row" alignItems="center">

public/app/features/provisioning/Shared/RepoIcon.tsx

@@ -0,0 +1,34 @@
+import { css } from '@emotion/css';
+
+import { Icon, useStyles2 } from '@grafana/ui';
+import { getSvgSize } from '@grafana/ui/internal';
+
+import { RepoType } from '../Wizard/types';
+import { getRepositoryTypeConfig } from '../utils/repositoryTypes';
+
+export function RepoIcon({ type }: { type: RepoType | undefined }) {
+  const styles = useStyles2(getStyles);
+  const config = type ? getRepositoryTypeConfig(type) : undefined;
+
+  if (!config) {
+    return <Icon name="database" size="xxl" />;
+  }
+  return (
+    <>
+      {config.logo ? (
+        <img src={config.logo} alt={config.label} className={styles.logo} />
+      ) : (
+        <Icon name={config.icon} size="xxl" />
+      )}
+    </>
+  );
+}
+
+function getStyles() {
+  return {
+    logo: css({
+      width: getSvgSize('xxl'),
+      height: getSvgSize('xxl'),
+    }),
+  };
+}

public/app/features/provisioning/Shared/RepositoryTypeCards.tsx

@@ -1,12 +1,14 @@
 import { css } from '@emotion/css';
 
 import { Trans } from '@grafana/i18n';
-import { Card, Icon, Stack, Text, useStyles2 } from '@grafana/ui';
+import { Card, Stack, Text, useStyles2 } from '@grafana/ui';
 import { useGetFrontendSettingsQuery } from 'app/api/clients/provisioning/v0alpha1/endpoints.gen';
 
 import { CONNECT_URL, DEFAULT_REPOSITORY_TYPES } from '../constants';
 import { getOrderedRepositoryConfigs } from '../utils/repositoryTypes';
 
+import { RepoIcon } from './RepoIcon';
+
 export function RepositoryTypeCards() {
   const styles = useStyles2(getStyles);
   const { data: frontendSettings } = useGetFrontendSettingsQuery();
@@ -26,11 +28,7 @@ export function RepositoryTypeCards() {
             {gitProviders.map((config) => (
               <Card key={config.type} href={`${CONNECT_URL}/${config.type}`} className={styles.card} noMargin>
                 <Stack gap={2} alignItems="center">
-                  {config.logo ? (
-                    <img src={config.logo} alt={config.label} className={styles.logo} />
-                  ) : (
-                    <Icon name={config.icon} size="xxl" />
-                  )}
+                  <RepoIcon type={config.type} />
                   <Trans
                     i18nKey="provisioning.repository-type-cards.configure-with-provider"
                     values={{ provider: config.label }}
@@ -55,11 +53,7 @@ export function RepositoryTypeCards() {
           {otherProviders.map((config) => (
             <Card key={config.type} href={`${CONNECT_URL}/${config.type}`} className={styles.card} noMargin>
               <Stack gap={2} alignItems="center">
-                {config.logo ? (
-                  <img src={config.logo} alt={config.label} className={styles.logo} />
-                ) : (
-                  <Icon name={config.icon} size="xxl" />
-                )}
+                <RepoIcon type={config.type} />
                 {config.type === 'local' ? (
                   <Trans i18nKey="provisioning.repository-type-cards.configure-file">Configure file provisioning</Trans>
                 ) : (
@@ -84,9 +78,5 @@ function getStyles() {
     card: css({
       width: 220,
     }),
-    logo: css({
-      width: 36,
-      height: 36,
-    }),
   };
 }