NewDataSourcePage: Restore signature badge lost in merge (#23832)

public/app/core/components/Card/Card.tsx

@@ -5,13 +5,23 @@ export interface CardProps {
   logoUrl?: string;
   logoUrl?: string;
   title: string;
   title: string;
   description?: string;
   description?: string;
+  labels?: React.ReactNode;
   actions?: React.ReactNode;
   actions?: React.ReactNode;
   onClick?: () => void;
   onClick?: () => void;
   ariaLabel?: string;
   ariaLabel?: string;
   className?: string;
   className?: string;
 }
 }
 
 
-export const Card: React.FC<CardProps> = ({ logoUrl, title, description, actions, onClick, ariaLabel, className }) => {
+export const Card: React.FC<CardProps> = ({
+  logoUrl,
+  title,
+  description,
+  labels,
+  actions,
+  onClick,
+  ariaLabel,
+  className,
+}) => {
   const mainClassName = cx('add-data-source-item', className);
   const mainClassName = cx('add-data-source-item', className);
 
 
   return (
   return (
@@ -20,6 +30,7 @@ export const Card: React.FC<CardProps> = ({ logoUrl, title, description, actions
       <div className="add-data-source-item-text-wrapper">
       <div className="add-data-source-item-text-wrapper">
         <span className="add-data-source-item-text">{title}</span>
         <span className="add-data-source-item-text">{title}</span>
         {description && <span className="add-data-source-item-desc">{description}</span>}
         {description && <span className="add-data-source-item-desc">{description}</span>}
+        {labels && <div>{labels}</div>}
       </div>
       </div>
       {actions && <div className="add-data-source-item-actions">{actions}</div>}
       {actions && <div className="add-data-source-item-actions">{actions}</div>}
     </div>
     </div>

public/app/features/datasources/NewDataSourcePage.tsx

@@ -145,36 +145,17 @@ const DataSourceTypeCard: FC<DataSourceTypeCardProps> = props => {
           {!isPhantom && <Button>Select</Button>}
           {!isPhantom && <Button>Select</Button>}
         </>
         </>
       }
       }
-      className={isPhantom && 'add-data-source-item--phantom'}
-      onClick={onClick}
-      aria-label={e2e.pages.AddDataSource.selectors.dataSourcePlugins(plugin.name)}
-    >
-      <img className="add-data-source-item-logo" src={plugin.info.logos.small} />
-      <div className="add-data-source-item-text-wrapper">
-        <span className="add-data-source-item-text">{plugin.name}</span>
-        {plugin.info.description && <span className="add-data-source-item-desc">{plugin.info.description}</span>}
-        {!isPhantom && (
+      labels={
+        !isPhantom && (
           <div>
           <div>
             <PluginSignatureBadge status={plugin.signature} />
             <PluginSignatureBadge status={plugin.signature} />
           </div>
           </div>
-        )}
-      </div>
-      <div className="add-data-source-item-actions">
-        {learnMoreLink && (
-          <LinkButton
-            variant="secondary"
-            href={`${learnMoreLink.url}?utm_source=grafana_add_ds`}
-            target="_blank"
-            rel="noopener"
-            onClick={onLearnMoreClick}
-            icon="external-link-alt"
-          >
-            {learnMoreLink.name}
-          </LinkButton>
-        )}
-        {!isPhantom && <Button>Select</Button>}
-      </div>
-    </Card>
+        )
+      }
+      className={isPhantom && 'add-data-source-item--phantom'}
+      onClick={onClick}
+      aria-label={e2e.pages.AddDataSource.selectors.dataSourcePlugins(plugin.name)}
+    />
   );
   );
 };
 };