refactor(core): change SidebarUserSettings to accept a list of providerSettings

This allows to configure custom provider settings without the need to modify the core package.

packages/app/src/components/Root/Root.tsx

@@ -39,6 +39,7 @@ import {
   SidebarUserSettings,
   SidebarThemeToggle,
   SidebarPinButton,
+  DefaultProviderSettings,
 } from '@backstage/core';
 import { NavLink } from 'react-router-dom';
 import { graphiQLRouteRef } from '@backstage/plugin-graphiql';
@@ -107,7 +108,7 @@ const Root: FC<{}> = ({ children }) => (
       <SidebarSpace />
       <SidebarDivider />
       <SidebarThemeToggle />
-      <SidebarUserSettings />
+      <SidebarUserSettings providerSettings={<DefaultProviderSettings />} />
       <SidebarPinButton />
     </Sidebar>
     {children}

packages/core/src/layout/Sidebar/DefaultProviderSettings.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+  configApiRef,
+  githubAuthApiRef,
+  gitlabAuthApiRef,
+  googleAuthApiRef,
+  oauth2ApiRef,
+  oktaAuthApiRef,
+  microsoftAuthApiRef,
+  useApi,
+} from '@backstage/core-api';
+import Star from '@material-ui/icons/Star';
+import React from 'react';
+import { OAuthProviderSettings, OIDCProviderSettings } from './Settings';
+
+export const DefaultProviderSettings = () => {
+  const configApi = useApi(configApiRef);
+  const providersConfig = configApi.getOptionalConfig('auth.providers');
+  const providers = providersConfig?.keys() ?? [];
+
+  return (
+    <>
+      {providers.includes('google') && (
+        <OIDCProviderSettings
+          title="Google"
+          apiRef={googleAuthApiRef}
+          icon={Star}
+        />
+      )}
+      {providers.includes('microsoft') && (
+        <OIDCProviderSettings
+          title="Microsoft"
+          apiRef={microsoftAuthApiRef}
+          icon={Star}
+        />
+      )}
+      {providers.includes('github') && (
+        <OAuthProviderSettings
+          title="Github"
+          apiRef={githubAuthApiRef}
+          icon={Star}
+        />
+      )}
+      {providers.includes('gitlab') && (
+        <OAuthProviderSettings
+          title="Gitlab"
+          apiRef={gitlabAuthApiRef}
+          icon={Star}
+        />
+      )}
+      {providers.includes('okta') && (
+        <OIDCProviderSettings
+          title="Okta"
+          apiRef={oktaAuthApiRef}
+          icon={Star}
+        />
+      )}
+      {providers.includes('oauth2') && (
+        <OIDCProviderSettings
+          title="YourOrg"
+          apiRef={oauth2ApiRef}
+          icon={Star}
+        />
+      )}
+    </>
+  );
+};

packages/core/src/layout/Sidebar/Sidebar.stories.tsx

@@ -23,10 +23,15 @@ import {
   SidebarSearchField,
   SidebarSpace,
   SidebarUserSettings,
+  OAuthProviderSettings,
 } from '.';
 import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
 import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
+import Star from '@material-ui/icons/Star';
 import { MemoryRouter } from 'react-router-dom';
+import {
+  githubAuthApiRef,
+} from '@backstage/core-api';
 
 export default {
   title: 'Sidebar',
@@ -55,6 +60,12 @@ export const SampleSidebar = () => (
     <SidebarIntro />
     <SidebarSpace />
     <SidebarDivider />
-    <SidebarUserSettings />
+    <SidebarUserSettings providerSettings={
+      <OAuthProviderSettings
+        title="Github"
+        apiRef={githubAuthApiRef}
+        icon={Star}
+      />
+    } />
   </Sidebar>
 );

packages/core/src/layout/Sidebar/UserSettings.tsx

@@ -14,36 +14,22 @@
  * limitations under the License.
  */
 
-import {
-  githubAuthApiRef,
-  gitlabAuthApiRef,
-  googleAuthApiRef,
-  identityApiRef,
-  oauth2ApiRef,
-  oktaAuthApiRef,
-  microsoftAuthApiRef,
-  useApi,
-  configApiRef,
-} from '@backstage/core-api';
+import { identityApiRef, useApi } from '@backstage/core-api';
 import Collapse from '@material-ui/core/Collapse';
 import SignOutIcon from '@material-ui/icons/MeetingRoom';
-import Star from '@material-ui/icons/Star';
 import React, { useContext, useEffect } from 'react';
 import { SidebarContext } from './config';
 import { SidebarItem } from './Items';
-import {
-  OAuthProviderSettings,
-  OIDCProviderSettings,
-  UserProfile as SidebarUserProfile,
-} from './Settings';
+import { UserProfile as SidebarUserProfile } from './Settings';
 
-export function SidebarUserSettings() {
+type SidebarUserSettingsProps = { providerSettings?: React.ReactNode };
+
+export function SidebarUserSettings({
+  providerSettings,
+}: SidebarUserSettingsProps) {
   const { isOpen: sidebarOpen } = useContext(SidebarContext);
   const [open, setOpen] = React.useState(false);
   const identityApi = useApi(identityApiRef);
-  const configApi = useApi(configApiRef);
-  const providersConfig = configApi.getOptionalConfig('auth.providers');
-  const providers = providersConfig?.keys() ?? [];
 
   // Close the provider list when sidebar collapse
   useEffect(() => {
@@ -54,48 +40,8 @@ export function SidebarUserSettings() {
     <>
       <SidebarUserProfile open={open} setOpen={setOpen} />
       <Collapse in={open} timeout="auto">
-        {providers.includes('google') && (
-          <OIDCProviderSettings
-            title="Google"
-            apiRef={googleAuthApiRef}
-            icon={Star}
-          />
-        )}
-        {providers.includes('microsoft') && (
-          <OIDCProviderSettings
-            title="Microsoft"
-            apiRef={microsoftAuthApiRef}
-            icon={Star}
-          />
-        )}
-        {providers.includes('github') && (
-          <OAuthProviderSettings
-            title="GitHub"
-            apiRef={githubAuthApiRef}
-            icon={Star}
-          />
-        )}
-        {providers.includes('gitlab') && (
-          <OAuthProviderSettings
-            title="GitLab"
-            apiRef={gitlabAuthApiRef}
-            icon={Star}
-          />
-        )}
-        {providers.includes('okta') && (
-          <OIDCProviderSettings
-            title="Okta"
-            apiRef={oktaAuthApiRef}
-            icon={Star}
-          />
-        )}
-        {providers.includes('oauth2') && (
-          <OIDCProviderSettings
-            title="YourOrg"
-            apiRef={oauth2ApiRef}
-            icon={Star}
-          />
-        )}
+        {providerSettings}
+
         <SidebarItem
           icon={SignOutIcon}
           text="Sign Out"

packages/core/src/layout/Sidebar/index.ts

@@ -34,4 +34,5 @@ export {
 export type { SidebarContextType } from './config';
 export { SidebarThemeToggle } from './SidebarThemeToggle';
 export { SidebarUserSettings } from './UserSettings';
+export { DefaultProviderSettings } from './DefaultProviderSettings';
 export * from './Settings';

packages/create-app/templates/default-app/packages/app/src/sidebar.tsx

@@ -9,6 +9,7 @@ import {
   SidebarUserSettings,
   SidebarThemeToggle,
   SidebarPinButton,
+  DefaultProviderSettings,
 } from '@backstage/core';
 
 export const AppSidebar = () => (
@@ -22,7 +23,7 @@ export const AppSidebar = () => (
     <SidebarSpace />
     <SidebarDivider />
     <SidebarThemeToggle />
-    <SidebarUserSettings />
+    <SidebarUserSettings providerSettings={<DefaultProviderSettings />} />
     <SidebarPinButton />
   </Sidebar>
 );