diff --git a/packages/core/src/layout/Sidebar/Sidebar.stories.tsx b/packages/core/src/layout/Sidebar/Sidebar.stories.tsx index 1b646fab8a..14bf6e69ed 100644 --- a/packages/core/src/layout/Sidebar/Sidebar.stories.tsx +++ b/packages/core/src/layout/Sidebar/Sidebar.stories.tsx @@ -22,11 +22,6 @@ import { SidebarDivider, SidebarSearchField, SidebarSpace, -<<<<<<< HEAD - SidebarUserSettings, - ProviderSettingsItem, -======= ->>>>>>> a4e66bae0... Update storybook for Sidebar } from '.'; import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined'; import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline'; diff --git a/plugins/user-settings/package.json b/plugins/user-settings/package.json index a6bc784942..ad2c2b0dbd 100644 --- a/plugins/user-settings/package.json +++ b/plugins/user-settings/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-user-settings", - "version": "0.1.1-alpha.21", + "version": "0.1.1-alpha.23", "main": "src/index.ts", "types": "src/index.ts", "license": "Apache-2.0", diff --git a/plugins/user-settings/src/components/ConfiguredProviderSettings.test.tsx b/plugins/user-settings/src/components/DefaultProviderSettings.test.tsx similarity index 90% rename from plugins/user-settings/src/components/ConfiguredProviderSettings.test.tsx rename to plugins/user-settings/src/components/DefaultProviderSettings.test.tsx index d4d8c1cbc2..8f6e4b72dc 100644 --- a/plugins/user-settings/src/components/ConfiguredProviderSettings.test.tsx +++ b/plugins/user-settings/src/components/DefaultProviderSettings.test.tsx @@ -24,7 +24,7 @@ import { import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; import { fireEvent } from '@testing-library/react'; import * as React from 'react'; -import { ConfiguredProviderSettings } from './ConfiguredProviderSettings'; +import { DefaultProviderSettings } from './DefaultProviderSettings'; const mockSignInHandler = jest.fn().mockReturnValue(''); const mockGoogleAuth = { @@ -33,7 +33,7 @@ const mockGoogleAuth = { unsubscribe: () => null, }), }), - getIdToken: mockSignInHandler, + signIn: mockSignInHandler, }; const createConfig = () => @@ -62,7 +62,7 @@ describe('', () => { const rendered = await renderWithEffects( wrapInTestApp( - + , ), ); @@ -73,8 +73,7 @@ describe('', () => { ).toBeInTheDocument(); const button = rendered.getByTitle('Sign in to Google'); - expect(mockSignInHandler).toHaveBeenCalledTimes(1); fireEvent.click(button); - expect(mockSignInHandler).toHaveBeenCalledTimes(2); + expect(mockSignInHandler).toHaveBeenCalledTimes(1); }); }); diff --git a/plugins/user-settings/src/components/ConfiguredProviderSettings.tsx b/plugins/user-settings/src/components/DefaultProviderSettings.tsx similarity index 83% rename from plugins/user-settings/src/components/ConfiguredProviderSettings.tsx rename to plugins/user-settings/src/components/DefaultProviderSettings.tsx index 99351e2984..e6e5c21d86 100644 --- a/plugins/user-settings/src/components/ConfiguredProviderSettings.tsx +++ b/plugins/user-settings/src/components/DefaultProviderSettings.tsx @@ -21,15 +21,13 @@ import { oauth2ApiRef, oktaAuthApiRef, microsoftAuthApiRef, - samlAuthApiRef, useApi, } from '@backstage/core'; import Star from '@material-ui/icons/Star'; import React from 'react'; -import { OAuthProviderSettings } from './OAuthProviderSettings'; -import { OIDCProviderSettings } from './OIDCProviderSettings'; +import { ProviderSettingsItem } from './ProviderSettingsItem'; -export const ConfiguredProviderSettings = () => { +export const DefaultProviderSettings = () => { const configApi = useApi(configApiRef); const providersConfig = configApi.getOptionalConfig('auth.providers'); const providers = providersConfig?.keys() ?? []; @@ -39,6 +37,7 @@ export const ConfiguredProviderSettings = () => { {providers.includes('google') && ( @@ -46,6 +45,7 @@ export const ConfiguredProviderSettings = () => { {providers.includes('microsoft') && ( @@ -53,6 +53,7 @@ export const ConfiguredProviderSettings = () => { {providers.includes('github') && ( @@ -60,6 +61,7 @@ export const ConfiguredProviderSettings = () => { {providers.includes('gitlab') && ( @@ -67,20 +69,15 @@ export const ConfiguredProviderSettings = () => { {providers.includes('okta') && ( )} - {providers.includes('saml') && ( - - )} {providers.includes('oauth2') && ( diff --git a/plugins/user-settings/src/components/OAuthProviderSettings.tsx b/plugins/user-settings/src/components/OAuthProviderSettings.tsx deleted file mode 100644 index 669dd89822..0000000000 --- a/plugins/user-settings/src/components/OAuthProviderSettings.tsx +++ /dev/null @@ -1,81 +0,0 @@ -/* - * 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 { - ApiRef, - OAuthApi, - SessionStateApi, - useApi, - Subscription, - IconComponent, - SessionState, -} from '@backstage/core'; -import React, { FC, useState, useEffect } from 'react'; -import { ProviderSettingsItem } from './ProviderSettingsItem'; - -type OAuthProviderSidebarProps = { - title: string; - icon: IconComponent; - apiRef: ApiRef; -}; - -export const OAuthProviderSettings: FC = ({ - title, - icon, - apiRef, -}) => { - const api = useApi(apiRef); - const [signedIn, setSignedIn] = useState(false); - - useEffect(() => { - let didCancel = false; - - const checkSession = async () => { - const session = await api.getAccessToken('', { optional: true }); - if (!didCancel) { - setSignedIn(!!session); - } - }; - let subscription: Subscription; - const observeSession = () => { - subscription = api - .sessionState$() - .subscribe((sessionState: SessionState) => { - if (!didCancel) { - setSignedIn(sessionState === SessionState.SignedIn); - } - }); - }; - - checkSession(); - observeSession(); - return () => { - didCancel = true; - subscription.unsubscribe(); - }; - }, [api]); - - return ( - api.getAccessToken()} - /> - ); -}; diff --git a/plugins/user-settings/src/components/OIDCProviderSettings.tsx b/plugins/user-settings/src/components/OIDCProviderSettings.tsx deleted file mode 100644 index 1e6005cb82..0000000000 --- a/plugins/user-settings/src/components/OIDCProviderSettings.tsx +++ /dev/null @@ -1,82 +0,0 @@ -/* - * 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 { - ApiRef, - OpenIdConnectApi, - SessionStateApi, - useApi, - Subscription, - IconComponent, - SessionState, -} from '@backstage/core'; -import React, { FC, useState, useEffect } from 'react'; -import { ProviderSettingsItem } from './ProviderSettingsItem'; - -export type OIDCProviderSidebarProps = { - title: string; - icon: IconComponent; - apiRef: ApiRef; -}; - -export const OIDCProviderSettings: FC = ({ - title, - icon, - apiRef, -}) => { - const api = useApi(apiRef); - const [signedIn, setSignedIn] = useState(false); - - useEffect(() => { - let didCancel = false; - - const checkSession = async () => { - const session = await api.getIdToken({ optional: true }); - if (!didCancel) { - setSignedIn(!!session); - } - }; - - let subscription: Subscription; - const observeSession = () => { - subscription = api - .sessionState$() - .subscribe((sessionState: SessionState) => { - if (!didCancel) { - setSignedIn(sessionState === SessionState.SignedIn); - } - }); - }; - - checkSession(); - observeSession(); - return () => { - didCancel = true; - subscription.unsubscribe(); - }; - }, [api]); - - return ( - api.getIdToken()} - /> - ); -}; diff --git a/plugins/user-settings/src/components/ProviderSettingsItem.tsx b/plugins/user-settings/src/components/ProviderSettingsItem.tsx index 0fb3d3e97d..7213ee2b83 100644 --- a/plugins/user-settings/src/components/ProviderSettingsItem.tsx +++ b/plugins/user-settings/src/components/ProviderSettingsItem.tsx @@ -13,9 +13,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -import React from 'react'; -import { IconComponent, OAuthApi, OpenIdConnectApi } from '@backstage/core'; +import React, { useEffect, useState } from 'react'; +import { + ApiRef, + SessionApi, + useApi, + IconComponent, + SessionState, +} from '@backstage/core'; import { ListItem, ListItemIcon, @@ -25,57 +30,70 @@ import { } from '@material-ui/core'; import PowerButton from '@material-ui/icons/PowerSettingsNew'; import { ToggleButton } from '@material-ui/lab'; -import { - ApiRef, - SessionApi, - useApi, - IconComponent, - SessionState, -} from '@backstage/core-api'; -type OAuthProviderSidebarProps = { +type Props = { title: string; description: string; icon: IconComponent; apiRef: ApiRef; }; -export const ProviderSettingsItem: FC = ({ +export const ProviderSettingsItem = ({ title, description, icon: Icon, - signedIn, - api, - signInHandler, -}: Props) => ( - - - - - - {description} - - } - secondaryTypographyProps={{ noWrap: true, style: { width: '80%' } }} - /> - - - (signedIn ? api.logout() : signInHandler())} + apiRef, +}: Props) => { + const api = useApi(apiRef); + const [signedIn, setSignedIn] = useState(false); + + useEffect(() => { + let didCancel = false; + + const subscription = api + .sessionState$() + .subscribe((sessionState: SessionState) => { + if (!didCancel) { + setSignedIn(sessionState === SessionState.SignedIn); + } + }); + + return () => { + didCancel = true; + subscription.unsubscribe(); + }; + }, [api]); + + return ( + + + + + + {description} + + } + secondaryTypographyProps={{ noWrap: true, style: { width: '80%' } }} + /> + + - - - - - -); + (signedIn ? api.signOut() : api.signIn())} + > + + + + + + ); +}; diff --git a/plugins/user-settings/src/components/SettingsDialog.tsx b/plugins/user-settings/src/components/SettingsDialog.tsx index 5aa13d90e4..82e744bec1 100644 --- a/plugins/user-settings/src/components/SettingsDialog.tsx +++ b/plugins/user-settings/src/components/SettingsDialog.tsx @@ -35,7 +35,7 @@ import { CardTab, InfoCard, } from '@backstage/core'; -import { ConfiguredProviderSettings } from './ConfiguredProviderSettings'; +import { DefaultProviderSettings } from './DefaultProviderSettings'; import { ProviderSettings } from './UserSettings'; import { Alert } from '@material-ui/lab'; @@ -61,7 +61,7 @@ export const SettingsDialog = ({ const featureFlags = featureFlagsApi.getRegisteredFlags(); const [selectedTab, setSelectedTab] = useState('auth'); - const providers = providerSettings ?? ; + const providers = providerSettings ?? ; const handleChange = ( _ev: ChangeEvent<{}>, @@ -107,7 +107,7 @@ export const SettingsDialog = ({ {featureFlags.length > 0 ? ( ) : ( - // TODO(marcuseide): Replace with empty state component + // TODO(marcuseide): Replace with empty state component? No registered Feature Flags found )}