frontend-plugin-api: accept IconElement in AuthProviderInfo

Update the `icon` field on `AuthProviderInfo` to accept `IconElement`
in addition to `IconComponent`, and update consumers in core-components
and user-settings to handle both types at runtime.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor

packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx

@@ -20,10 +20,11 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
-import { useState } from 'react';
+import { createElement, isValidElement, useState } from 'react';
 import { isError } from '@backstage/errors';
 import {
   configApiRef,
+  IconComponent,
   PendingOAuthRequest,
   useApi,
 } from '@backstage/core-plugin-api';
@@ -68,7 +69,7 @@ const LoginRequestListItem = ({ request, busy, setBusy }: RowProps) => {
     }
   };
 
-  const IconComponent = request.provider.icon;
+  const providerIcon = request.provider.icon;
   const message =
     request.provider.message ??
     t('oauthRequestDialog.message', {
@@ -76,11 +77,14 @@ const LoginRequestListItem = ({ request, busy, setBusy }: RowProps) => {
       provider: request.provider.title,
     });
 
+  const iconElement =
+    providerIcon === null || isValidElement(providerIcon)
+      ? providerIcon
+      : createElement(providerIcon as IconComponent, { fontSize: 'large' });
+
   return (
     <ListItem disabled={busy} classes={{ root: classes.root }}>
-      <ListItemAvatar>
-        <IconComponent fontSize="large" />
-      </ListItemAvatar>
+      <ListItemAvatar>{iconElement ?? <></>}</ListItemAvatar>
       <Box display="flex" alignItems="center" flex={1}>
         <Box flex={1}>
           <ListItemText

packages/frontend-plugin-api/report.api.md

@@ -316,7 +316,7 @@ export const atlassianAuthApiRef: ApiRef<
 export type AuthProviderInfo = {
   id: string;
   title: string;
-  icon: IconComponent;
+  icon: IconComponent | IconElement;
   message?: string;
 };
 

packages/frontend-plugin-api/src/apis/definitions/auth.ts

@@ -17,7 +17,7 @@
 /* eslint-disable @typescript-eslint/no-redeclare */
 
 import { ApiRef, createApiRef } from '../system';
-import { IconComponent } from '../../icons/types';
+import { IconComponent, IconElement } from '../../icons/types';
 import { Observable } from '@backstage/types';
 
 /**
@@ -54,8 +54,13 @@ export type AuthProviderInfo = {
 
   /**
    * Icon for the auth provider.
+   *
+   * @remarks
+   *
+   * Accepts either an `IconElement` (e.g. `<MyIcon />`) or an `IconComponent`
+   * (e.g. `MyIcon`). Prefer passing `IconElement`.
    */
-  icon: IconComponent;
+  icon: IconComponent | IconElement;
 
   /**
    * Optional user friendly messaage to display for the auth provider.