From 7531aef58b36c60255ebed1c9273cc6646971ac7 Mon Sep 17 00:00:00 2001 From: Vladimir Masarik Date: Thu, 1 Sep 2022 10:21:05 +0200 Subject: [PATCH 1/9] Fix settings page not displaying sing in properly Signed-off-by: Vladimir Masarik --- .../AuthProviders/ProviderSettingsItem.tsx | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx index e170aa2daa..6de5f9ad73 100644 --- a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx +++ b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx @@ -26,9 +26,10 @@ import { import { ApiRef, SessionApi, + ProfileInfoApi, + ProfileInfo, useApi, IconComponent, - SessionState, } from '@backstage/core-plugin-api'; /** @public */ @@ -36,23 +37,27 @@ export const ProviderSettingsItem = (props: { title: string; description: string; icon: IconComponent; - apiRef: ApiRef; + apiRef: ApiRef; }) => { const { title, description, icon: Icon, apiRef } = props; const api = useApi(apiRef); const [signedIn, setSignedIn] = useState(false); + const [profileEmail, setProfileEmail] = useState(''); useEffect(() => { let didCancel = false; - const subscription = api - .sessionState$() - .subscribe((sessionState: SessionState) => { - if (!didCancel) { - setSignedIn(sessionState === SessionState.SignedIn); - } - }); + const subscription = api.sessionState$().subscribe(() => { + if (!didCancel) { + api + .getProfile({ optional: false }) + .then((profile: ProfileInfo | undefined) => { + setSignedIn(profile !== undefined); + setProfileEmail(profile?.email ?? ''); + }); + } + }); return () => { didCancel = true; @@ -69,7 +74,9 @@ export const ProviderSettingsItem = (props: { primary={title} secondary={ - {description} + + {description}. Signed in as {profileEmail} + } secondaryTypographyProps={{ noWrap: true, style: { width: '80%' } }} From 4ce0c846cccae75c682643e0ba3f5f71d514a8fa Mon Sep 17 00:00:00 2001 From: Vladimir Masarik Date: Fri, 2 Sep 2022 14:00:12 +0200 Subject: [PATCH 2/9] fix optional to true Signed-off-by: Vladimir Masarik --- .../src/components/AuthProviders/ProviderSettingsItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx index 6de5f9ad73..7ff13a11d4 100644 --- a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx +++ b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx @@ -51,7 +51,7 @@ export const ProviderSettingsItem = (props: { const subscription = api.sessionState$().subscribe(() => { if (!didCancel) { api - .getProfile({ optional: false }) + .getProfile({ optional: true }) .then((profile: ProfileInfo | undefined) => { setSignedIn(profile !== undefined); setProfileEmail(profile?.email ?? ''); From 5e00eb69c5b79f686f27a248136d6f52e80d61bd Mon Sep 17 00:00:00 2001 From: Vladimir Masarik Date: Fri, 2 Sep 2022 14:00:38 +0200 Subject: [PATCH 3/9] check sessions state as well Signed-off-by: Vladimir Masarik --- .../AuthProviders/ProviderSettingsItem.tsx | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx index 7ff13a11d4..4a3b28b335 100644 --- a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx +++ b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx @@ -26,6 +26,7 @@ import { import { ApiRef, SessionApi, + SessionState, ProfileInfoApi, ProfileInfo, useApi, @@ -48,16 +49,22 @@ export const ProviderSettingsItem = (props: { useEffect(() => { let didCancel = false; - const subscription = api.sessionState$().subscribe(() => { - if (!didCancel) { - api - .getProfile({ optional: true }) - .then((profile: ProfileInfo | undefined) => { - setSignedIn(profile !== undefined); - setProfileEmail(profile?.email ?? ''); - }); - } - }); + const subscription = api + .sessionState$() + .subscribe((sessionState: SessionState) => { + if (!didCancel) { + api + .getProfile({ optional: true }) + .then((profile: ProfileInfo | undefined) => { + if (sessionState === SessionState.SignedIn) { + setSignedIn(true); + } else { + setSignedIn(profile !== undefined); + } + setProfileEmail(profile?.email ?? ''); + }); + } + }); return () => { didCancel = true; From 0d25d297a33841b8e8e0c24c0d48c60a37fa784a Mon Sep 17 00:00:00 2001 From: Vladimir Masarik Date: Mon, 5 Sep 2022 16:46:08 +0200 Subject: [PATCH 4/9] add more info into providers Signed-off-by: Vladimir Masarik --- .../AuthProviders/ProviderSettingsAvatar.tsx | 38 +++++++++++++++++++ .../AuthProviders/ProviderSettingsItem.tsx | 37 +++++++++++++++--- 2 files changed, 70 insertions(+), 5 deletions(-) create mode 100644 plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx diff --git a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx new file mode 100644 index 0000000000..e92b0efe15 --- /dev/null +++ b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx @@ -0,0 +1,38 @@ +/* + * Copyright 2020 The Backstage Authors + * + * 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 React from 'react'; +import { BackstageTheme } from '@backstage/theme'; +import { makeStyles, Avatar } from '@material-ui/core'; +import { sidebarConfig } from '@backstage/core-components'; + +const useStyles = makeStyles(theme => ({ + avatar: { + width: ({ size }) => size, + height: ({ size }) => size, + fontSize: ({ size }) => size * 0.7, + border: `1px solid ${theme.palette.textSubtle}`, + }, +})); + +type Props = { size?: number; picture: string | undefined }; + +export const ProviderSettingsAvatar = ({ size, picture }: Props) => { + const { iconSize } = sidebarConfig; + const classes = useStyles(size ? { size } : { size: iconSize }); + + return ; +}; diff --git a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx index 4a3b28b335..ef31e70d81 100644 --- a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx +++ b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx @@ -17,11 +17,13 @@ import React, { useEffect, useState } from 'react'; import { Button, + Grid, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, Tooltip, + Typography, } from '@material-ui/core'; import { ApiRef, @@ -32,6 +34,7 @@ import { useApi, IconComponent, } from '@backstage/core-plugin-api'; +import { ProviderSettingsAvatar } from './ProviderSettingsAvatar'; /** @public */ export const ProviderSettingsItem = (props: { @@ -44,7 +47,8 @@ export const ProviderSettingsItem = (props: { const api = useApi(apiRef); const [signedIn, setSignedIn] = useState(false); - const [profileEmail, setProfileEmail] = useState(''); + const emptyProfile: ProfileInfo = {}; + const [profile, setProfile] = useState(emptyProfile); useEffect(() => { let didCancel = false; @@ -55,13 +59,13 @@ export const ProviderSettingsItem = (props: { if (!didCancel) { api .getProfile({ optional: true }) - .then((profile: ProfileInfo | undefined) => { + .then((profileResponse: ProfileInfo | undefined) => { if (sessionState === SessionState.SignedIn) { setSignedIn(true); } else { - setSignedIn(profile !== undefined); + setSignedIn(profileResponse !== undefined); } - setProfileEmail(profile?.email ?? ''); + setProfile(profileResponse ?? {}); }); } }); @@ -82,7 +86,30 @@ export const ProviderSettingsItem = (props: { secondary={ - {description}. Signed in as {profileEmail} + + + + + + + + + {profile.displayName} + + + {profile.email} + + + {description} + + + + + } From 5543e866602cd6fd67ee8cf04c2233b7b8d1a8e3 Mon Sep 17 00:00:00 2001 From: Vladimir Masarik Date: Tue, 6 Sep 2022 19:09:59 +0200 Subject: [PATCH 5/9] add change set Signed-off-by: Vladimir Masarik --- .changeset/soft-falcons-love.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/soft-falcons-love.md diff --git a/.changeset/soft-falcons-love.md b/.changeset/soft-falcons-love.md new file mode 100644 index 0000000000..5f2d282158 --- /dev/null +++ b/.changeset/soft-falcons-love.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-user-settings': patch +--- + +Fixed settings page showing providers as logged out when the user is using more than one provider, and displayed some additional login information. From 01e9214ab23cb64b1d62b9bee29b630a56f596b8 Mon Sep 17 00:00:00 2001 From: Vladimir Masarik Date: Sun, 11 Sep 2022 15:34:24 +0200 Subject: [PATCH 6/9] Chang changeset to minor Signed-off-by: Vladimir Masarik --- .changeset/soft-falcons-love.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/soft-falcons-love.md b/.changeset/soft-falcons-love.md index 5f2d282158..9fbc8f1419 100644 --- a/.changeset/soft-falcons-love.md +++ b/.changeset/soft-falcons-love.md @@ -1,5 +1,5 @@ --- -'@backstage/plugin-user-settings': patch +'@backstage/plugin-user-settings': minor --- -Fixed settings page showing providers as logged out when the user is using more than one provider, and displayed some additional login information. +**BREAKING** Fixed settings page showing providers as logged out when the user is using more than one provider, and displayed some additional login information. From 2282c9936ceed5b34efbd6a0993e1a8a38ca0b16 Mon Sep 17 00:00:00 2001 From: Vladimir Masarik Date: Sun, 11 Sep 2022 15:34:35 +0200 Subject: [PATCH 7/9] Generate API report Signed-off-by: Vladimir Masarik --- plugins/user-settings/api-report.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/plugins/user-settings/api-report.md b/plugins/user-settings/api-report.md index bc5c3a9c70..e2f3d46e24 100644 --- a/plugins/user-settings/api-report.md +++ b/plugins/user-settings/api-report.md @@ -10,6 +10,7 @@ import { BackstagePlugin } from '@backstage/core-plugin-api'; import { BackstageUserIdentity } from '@backstage/core-plugin-api'; import { IconComponent } from '@backstage/core-plugin-api'; import { ProfileInfo } from '@backstage/core-plugin-api'; +import { ProfileInfoApi } from '@backstage/core-plugin-api'; import { PropsWithChildren } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { SessionApi } from '@backstage/core-plugin-api'; @@ -24,7 +25,7 @@ export const ProviderSettingsItem: (props: { title: string; description: string; icon: IconComponent; - apiRef: ApiRef; + apiRef: ApiRef; }) => JSX.Element; // @public (undocumented) From cc538eccc20eca3102ad0332dda8ef97cafb117c Mon Sep 17 00:00:00 2001 From: Vladimir Masarik Date: Sun, 11 Sep 2022 15:34:56 +0200 Subject: [PATCH 8/9] Dont set to empty profile Signed-off-by: Vladimir Masarik --- .../src/components/AuthProviders/ProviderSettingsItem.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx index ef31e70d81..b5d056eed2 100644 --- a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx +++ b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx @@ -62,10 +62,10 @@ export const ProviderSettingsItem = (props: { .then((profileResponse: ProfileInfo | undefined) => { if (sessionState === SessionState.SignedIn) { setSignedIn(true); - } else { - setSignedIn(profileResponse !== undefined); } - setProfile(profileResponse ?? {}); + if (profileResponse) { + setProfile(profileResponse); + } }); } }); From bf79a1cb77929fe650b09c2286ab1ec61de3fb22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Wed, 21 Sep 2022 13:49:34 +0200 Subject: [PATCH 9/9] changeset tweak MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fredrik Adelöw --- .changeset/soft-falcons-love.md | 8 +++++++- .../AuthProviders/ProviderSettingsItem.tsx | 12 +++++++----- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/.changeset/soft-falcons-love.md b/.changeset/soft-falcons-love.md index 9fbc8f1419..56ed193501 100644 --- a/.changeset/soft-falcons-love.md +++ b/.changeset/soft-falcons-love.md @@ -2,4 +2,10 @@ '@backstage/plugin-user-settings': minor --- -**BREAKING** Fixed settings page showing providers as logged out when the user is using more than one provider, and displayed some additional login information. +**BREAKING**: The `apiRef` passed to `ProviderSettingsItem` now needs to +implement `ProfileInfoApi & SessionApi`, rather than just the latter. This is +unlikely to have an effect on most users though, since the builtin auth +providers generally implement both. + +Fixed settings page showing providers as logged out when the user is using more +than one provider, and displayed some additional login information. diff --git a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx index b5d056eed2..ab6ad8dff9 100644 --- a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx +++ b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx @@ -60,11 +60,13 @@ export const ProviderSettingsItem = (props: { api .getProfile({ optional: true }) .then((profileResponse: ProfileInfo | undefined) => { - if (sessionState === SessionState.SignedIn) { - setSignedIn(true); - } - if (profileResponse) { - setProfile(profileResponse); + if (!didCancel) { + if (sessionState === SessionState.SignedIn) { + setSignedIn(true); + } + if (profileResponse) { + setProfile(profileResponse); + } } }); }