Display list of providers from config as default

plugins/user-settings/src/components/AuthProviderList.tsx

@@ -18,11 +18,11 @@ import React from 'react';
 import { List, ListSubheader } from '@material-ui/core';
 
 type Props = {
-  providerSettings: React.ReactNode;
+  providers: React.ReactNode;
 };
 
-export const AuthProvidersList = ({ providerSettings }: Props) => (
+export const AuthProvidersList = ({ providers }: Props) => (
   <List subheader={<ListSubheader>Available Auth Providers</ListSubheader>}>
-    {providerSettings}
+    {providers}
   </List>
 );

plugins/user-settings/src/components/ConfiguredProviderSettings.tsx

@@ -29,7 +29,7 @@ import React from 'react';
 import { OAuthProviderSettings } from './OAuthProviderSettings';
 import { OIDCProviderSettings } from './OIDCProviderSettings';
 
-export const DefaultProviderSettings = () => {
+export const ConfiguredProviderSettings = () => {
   const configApi = useApi(configApiRef);
   const providersConfig = configApi.getOptionalConfig('auth.providers');
   const providers = providersConfig?.keys() ?? [];

plugins/user-settings/src/components/SettingsDialog.tsx

@@ -29,6 +29,8 @@ import { SignInAvatar } from './SignInAvatar';
 import { UserSettingsMenu } from './UserSettingsMenu';
 import { useUserProfile } from './useUserProfileInfo';
 import { useApi, featureFlagsApiRef } from '@backstage/core';
+import { ConfiguredProviderSettings } from './ConfiguredProviderSettings';
+import { ProviderSettings } from './UserSettings';
 
 const useStyles = makeStyles({
   root: {
@@ -37,7 +39,7 @@ const useStyles = makeStyles({
 });
 
 type Props = {
-  providerSettings?: React.ReactNode;
+  providerSettings?: ProviderSettings;
 };
 
 export const SettingsDialog = ({ providerSettings }: Props) => {
@@ -46,6 +48,8 @@ export const SettingsDialog = ({ providerSettings }: Props) => {
   const featureFlagsApi = useApi(featureFlagsApiRef);
   const featureFlags = featureFlagsApi.getRegisteredFlags();
 
+  const providers = providerSettings ?? <ConfiguredProviderSettings />;
+
   return (
     <Card className={classes.root}>
       <CardHeader
@@ -56,12 +60,8 @@ export const SettingsDialog = ({ providerSettings }: Props) => {
       />
       <CardContent>
         <AppSettingsList />
-        {providerSettings && (
-          <>
-            <Divider />
-            <AuthProvidersList providerSettings={providerSettings} />
-          </>
-        )}
+        <Divider />
+        <AuthProvidersList providers={providers} />
         {featureFlags.length > 0 && (
           <>
             <Divider />

plugins/user-settings/src/components/UserSettings.tsx

@@ -21,8 +21,17 @@ import { SettingsDialog } from './SettingsDialog';
 import { SidebarItem, SidebarContext } from '@backstage/core';
 import { useUserProfile } from './useUserProfileInfo';
 
+export type ProviderSettings = JSX.Element;
+
 type Props = {
-  providerSettings?: React.ReactNode;
+  /**
+   * Available auth providers. Providers will be rendered as children
+   * of a MUI List.
+   *
+   * If undefined, providers that are configured in app-config.yaml
+   * will be displayed instead.
+   */
+  providerSettings?: ProviderSettings;
 };
 
 export const UserSettings = ({ providerSettings }: Props) => {