diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx
index 1d32b6e16e..d0a0171207 100644
--- a/packages/app/src/components/Root/Root.tsx
+++ b/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 }) => (
-
+ } />
{children}
diff --git a/packages/core/src/layout/Sidebar/DefaultProviderSettings.tsx b/packages/core/src/layout/Sidebar/DefaultProviderSettings.tsx
new file mode 100644
index 0000000000..293cefb19a
--- /dev/null
+++ b/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') && (
+
+ )}
+ {providers.includes('microsoft') && (
+
+ )}
+ {providers.includes('github') && (
+
+ )}
+ {providers.includes('gitlab') && (
+
+ )}
+ {providers.includes('okta') && (
+
+ )}
+ {providers.includes('oauth2') && (
+
+ )}
+ >
+ );
+};
diff --git a/packages/core/src/layout/Sidebar/Sidebar.stories.tsx b/packages/core/src/layout/Sidebar/Sidebar.stories.tsx
index 906317fe9c..b286071426 100644
--- a/packages/core/src/layout/Sidebar/Sidebar.stories.tsx
+++ b/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 = () => (
-
+
+ } />
);
diff --git a/packages/core/src/layout/Sidebar/UserSettings.tsx b/packages/core/src/layout/Sidebar/UserSettings.tsx
index 5ea7d2b359..f586f6d077 100644
--- a/packages/core/src/layout/Sidebar/UserSettings.tsx
+++ b/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() {
<>
- {providers.includes('google') && (
-
- )}
- {providers.includes('microsoft') && (
-
- )}
- {providers.includes('github') && (
-
- )}
- {providers.includes('gitlab') && (
-
- )}
- {providers.includes('okta') && (
-
- )}
- {providers.includes('oauth2') && (
-
- )}
+ {providerSettings}
+
(
@@ -22,7 +23,7 @@ export const AppSidebar = () => (
-
+ } />
);