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
)}