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

.changeset/auth-provider-icon-element-core-components.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+The login request dialog now handles auth provider icons passed as `IconElement` in addition to `IconComponent`.

.changeset/auth-provider-icon-element-user-settings.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+The `ProviderSettingsItem` `icon` prop now accepts `IconElement` in addition to `IconComponent`.

.changeset/auth-provider-icon-element.md

@@ -0,0 +1,5 @@
+---
+'@backstage/frontend-plugin-api': patch
+---
+
+The `icon` field on `AuthProviderInfo` now accepts `IconElement` in addition to `IconComponent`, letting you pass `<MyIcon />` instead of `MyIcon`.

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.

plugins/user-settings/report.api.md

@@ -11,6 +11,7 @@ import { ElementType } from 'react';
 import { ErrorApi } from '@backstage/core-plugin-api';
 import { FetchApi } from '@backstage/core-plugin-api';
 import { IconComponent } from '@backstage/core-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { IdentityApi } from '@backstage/core-plugin-api';
 import { JsonValue } from '@backstage/types';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
@@ -35,7 +36,7 @@ export const DefaultProviderSettings: (props: {
 export const ProviderSettingsItem: (props: {
   title: string;
   description: string;
-  icon: IconComponent;
+  icon: IconComponent | IconElement;
   apiRef: ApiRef<ProfileInfoApi & SessionApi>;
 }) => JSX_2.Element;
 

plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
+import { createElement, isValidElement, useEffect, useState } from 'react';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import ListItem from '@material-ui/core/ListItem';
@@ -33,6 +33,7 @@ import {
   errorApiRef,
   IconComponent,
 } from '@backstage/core-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { ProviderSettingsAvatar } from './ProviderSettingsAvatar';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { userSettingsTranslationRef } from '../../translation';
@@ -43,10 +44,10 @@ const emptyProfile: ProfileInfo = {};
 export const ProviderSettingsItem = (props: {
   title: string;
   description: string;
-  icon: IconComponent;
+  icon: IconComponent | IconElement;
   apiRef: ApiRef<ProfileInfoApi & SessionApi>;
 }) => {
-  const { title, description, icon: Icon, apiRef } = props;
+  const { title, description, icon, apiRef } = props;
 
   const api = useApi(apiRef);
   const errorApi = useApi(errorApiRef);
@@ -86,11 +87,14 @@ export const ProviderSettingsItem = (props: {
     };
   }, [api]);
 
+  const iconElement =
+    icon === null || isValidElement(icon)
+      ? icon
+      : createElement(icon as IconComponent);
+
   return (
     <ListItem>
-      <ListItemIcon>
-        <Icon />
-      </ListItemIcon>
+      <ListItemIcon>{iconElement}</ListItemIcon>
       <ListItemText
         primary={title}
         secondary={