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 = () => ( - + } /> );