From 235007d2955f7d40e547c3333ba0c097eede8116 Mon Sep 17 00:00:00 2001
From: nikek <nikek@spotify.com>
Date: Mon, 8 Jun 2020 14:06:35 +0200
Subject: [PATCH 1/7] Collapsible sidebar item for auth providers

---
 packages/app/src/components/Root/Root.tsx     |  4 +-
 packages/core/src/layout/Sidebar/Items.tsx    |  1 -
 .../core/src/layout/Sidebar/UserSettings.tsx  | 83 +++++++++++++++++++
 packages/core/src/layout/Sidebar/index.ts     |  1 +
 4 files changed, 86 insertions(+), 3 deletions(-)
 create mode 100644 packages/core/src/layout/Sidebar/UserSettings.tsx

diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx
index 20eabbcac5..cdb8469ee2 100644
--- a/packages/app/src/components/Root/Root.tsx
+++ b/packages/app/src/components/Root/Root.tsx
@@ -31,7 +31,7 @@ import {
   SidebarDivider,
   SidebarSearchField,
   SidebarSpace,
-  SidebarUserBadge,
+  SidebarUserSettings,
   SidebarThemeToggle,
 } from '@backstage/core';
 
@@ -84,7 +84,7 @@ const Root: FC<{}> = ({ children }) => (
       <SidebarSpace />
       <SidebarDivider />
       <SidebarThemeToggle />
-      <SidebarUserBadge />
+      <SidebarUserSettings />
     </Sidebar>
     {children}
   </SidebarPage>
diff --git a/packages/core/src/layout/Sidebar/Items.tsx b/packages/core/src/layout/Sidebar/Items.tsx
index ddd71cc189..412800447a 100644
--- a/packages/core/src/layout/Sidebar/Items.tsx
+++ b/packages/core/src/layout/Sidebar/Items.tsx
@@ -148,7 +148,6 @@ export const SidebarItem: FC<SidebarItemProps> = ({
       </NavLink>
     );
   }
-
   return (
     <NavLink
       className={clsx(classes.root, classes.open)}
diff --git a/packages/core/src/layout/Sidebar/UserSettings.tsx b/packages/core/src/layout/Sidebar/UserSettings.tsx
new file mode 100644
index 0000000000..26cffa0c35
--- /dev/null
+++ b/packages/core/src/layout/Sidebar/UserSettings.tsx
@@ -0,0 +1,83 @@
+import React, { useState, useContext, useEffect, useRef } from 'react';
+import Collapse from '@material-ui/core/Collapse';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import StarBorder from '@material-ui/icons/StarBorder';
+import { SidebarContext } from './config';
+import { SidebarItem, SidebarDivider } from './Items';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import Divider from '@material-ui/core/Divider';
+import { useApi, googleAuthApiRef, ProfileInfo } from '@backstage/core-api';
+import { Avatar, IconButton } from '@material-ui/core';
+import PowerButton from '@material-ui/icons/PowerSettingsNew';
+import { SidebarThemeToggle } from './SidebarThemeToggle';
+
+export function SidebarUserSettings() {
+  const { isOpen: sidebarOpen } = useContext(SidebarContext);
+  const [open, setOpen] = React.useState(false);
+  const ref = useRef<Element>(); // for scrolling down when collapse item opens
+
+  const googleAuth = useApi(googleAuthApiRef);
+  const [profile, setProfile] = useState<ProfileInfo>();
+
+  // TODO(soapraj): List all the providers supported by the app and let user log in from here
+  // TODO(soapraj): How to observe if the user is logged in
+  useEffect(() => {
+    googleAuth.getProfile({ optional: true }).then(googleProfile => {
+      setProfile(googleProfile);
+    });
+  }, [googleAuth, open]);
+
+  const handleClick = () => {
+    setOpen(!open);
+    setTimeout(() => ref.current?.scrollIntoView({ behavior: 'smooth' }), 300);
+  };
+
+  // Close the provider list when sidebar collapse
+  useEffect(() => {
+    if (!sidebarOpen && open) setOpen(false);
+  }, [sidebarOpen]);
+
+  // Handle main auth info that is shown on the collapsible SidebarItem
+  let avatar;
+  let displayName;
+  if (profile) {
+    // const classes = useStyles();
+    const email = profile.email;
+    const name = profile.name;
+    const imageUrl = profile.picture;
+    const avatarFallback = email.charAt(0).toUpperCase() + email.slice(1);
+    const emailTrimmed = email.split('@')[0];
+    const displayEmail =
+      emailTrimmed.charAt(0).toUpperCase() + emailTrimmed.slice(1);
+    displayName = name ?? displayEmail;
+    avatar = imageUrl
+      ? () => <Avatar alt={name} src={imageUrl} />
+      : () => <Avatar alt={name}>{avatarFallback[0]}</Avatar>;
+  }
+
+  return (
+    <>
+      <Divider innerRef={ref} />
+      <SidebarItem
+        text={displayName || 'Sign In'}
+        onClick={handleClick}
+        icon={avatar || AccountCircleIcon}
+        disableSelected
+      >
+        {open ? <ExpandMore /> : <ExpandLess />}
+      </SidebarItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <SidebarItem text="Google" icon={StarBorder} disableSelected>
+          <IconButton
+            onClick={() =>
+              profile ? googleAuth.logout() : googleAuth.getAccessToken()
+            }
+          >
+            <PowerButton color={profile ? 'primary' : 'disabled'} />
+          </IconButton>
+        </SidebarItem>
+      </Collapse>
+    </>
+  );
+}
diff --git a/packages/core/src/layout/Sidebar/index.ts b/packages/core/src/layout/Sidebar/index.ts
index baefc3d0e8..2bd961e197 100644
--- a/packages/core/src/layout/Sidebar/index.ts
+++ b/packages/core/src/layout/Sidebar/index.ts
@@ -33,3 +33,4 @@ export {
 } from './config';
 export type { SidebarContextType } from './config';
 export { SidebarThemeToggle } from './SidebarThemeToggle';
+export { SidebarUserSettings } from './UserSettings';

From eea242f14fa3702b0a152cbdff80846984a35da0 Mon Sep 17 00:00:00 2001
From: Marcus Eide <eide@spotify.com>
Date: Mon, 8 Jun 2020 16:45:43 +0200
Subject: [PATCH 2/7] List auth providers in UserSettings

---
 .../core/src/layout/Sidebar/UserSettings.tsx  | 148 +++++++++++++++---
 1 file changed, 125 insertions(+), 23 deletions(-)

diff --git a/packages/core/src/layout/Sidebar/UserSettings.tsx b/packages/core/src/layout/Sidebar/UserSettings.tsx
index 26cffa0c35..f4f22dd151 100644
--- a/packages/core/src/layout/Sidebar/UserSettings.tsx
+++ b/packages/core/src/layout/Sidebar/UserSettings.tsx
@@ -1,32 +1,110 @@
+/*
+ * 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 React, { useState, useContext, useEffect, useRef } from 'react';
 import Collapse from '@material-ui/core/Collapse';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import StarBorder from '@material-ui/icons/StarBorder';
+import Star from '@material-ui/icons/Star';
 import { SidebarContext } from './config';
-import { SidebarItem, SidebarDivider } from './Items';
+import { SidebarItem } from './Items';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 import Divider from '@material-ui/core/Divider';
-import { useApi, googleAuthApiRef, ProfileInfo } from '@backstage/core-api';
-import { Avatar, IconButton } from '@material-ui/core';
+import {
+  useApi,
+  googleAuthApiRef,
+  githubAuthApiRef,
+  ProfileInfo,
+} from '@backstage/core-api';
+import { Avatar, IconButton, makeStyles, Tooltip } from '@material-ui/core';
 import PowerButton from '@material-ui/icons/PowerSettingsNew';
-import { SidebarThemeToggle } from './SidebarThemeToggle';
+// import { SidebarThemeToggle } from './SidebarThemeToggle';
+
+type Provider = {
+  title: string;
+  api: any;
+  identity?: boolean;
+  isSignedIn: boolean;
+  icon: any;
+};
+
+const useProviders = () => {
+  const googleAuth = useApi(googleAuthApiRef);
+  const githubAuth = useApi(githubAuthApiRef);
+  const [providers, setProviders] = useState<Provider[]>([
+    {
+      title: 'Google',
+      api: googleAuth,
+      identity: true,
+      isSignedIn: false,
+      icon: Star,
+    },
+    {
+      title: 'Github',
+      api: githubAuth,
+      isSignedIn: false,
+      icon: StarBorder,
+    },
+  ]);
+
+  Promise.all(
+    providers.map((provider: Provider) =>
+      provider.identity
+        ? provider.api.getIdToken({ optional: true })
+        : provider.api.getAccessToken('', { optional: true }),
+    ),
+  ).then(results => {
+    results.map((result, i) => {
+      providers[i].isSignedIn = !!result;
+    });
+
+    setProviders(providers);
+  });
+
+  return providers;
+};
+
+const useStyles = makeStyles({
+  avatar: {
+    width: 24,
+    height: 24,
+  },
+});
 
 export function SidebarUserSettings() {
   const { isOpen: sidebarOpen } = useContext(SidebarContext);
   const [open, setOpen] = React.useState(false);
   const ref = useRef<Element>(); // for scrolling down when collapse item opens
-
-  const googleAuth = useApi(googleAuthApiRef);
+  const providers = useProviders();
   const [profile, setProfile] = useState<ProfileInfo>();
+  const classes = useStyles();
 
   // TODO(soapraj): List all the providers supported by the app and let user log in from here
   // TODO(soapraj): How to observe if the user is logged in
   useEffect(() => {
-    googleAuth.getProfile({ optional: true }).then(googleProfile => {
-      setProfile(googleProfile);
-    });
-  }, [googleAuth, open]);
+    const identityProvider = providers.find(
+      (provider: Provider) => provider.identity,
+    );
+    identityProvider?.api
+      .getProfile({ optional: true })
+      .then((userProfile: ProfileInfo) => {
+        setProfile(userProfile);
+      });
+  }, [providers, open]);
 
   const handleClick = () => {
     setOpen(!open);
@@ -36,13 +114,12 @@ export function SidebarUserSettings() {
   // Close the provider list when sidebar collapse
   useEffect(() => {
     if (!sidebarOpen && open) setOpen(false);
-  }, [sidebarOpen]);
+  }, [open, sidebarOpen]);
 
   // Handle main auth info that is shown on the collapsible SidebarItem
   let avatar;
   let displayName;
   if (profile) {
-    // const classes = useStyles();
     const email = profile.email;
     const name = profile.name;
     const imageUrl = profile.picture;
@@ -52,8 +129,12 @@ export function SidebarUserSettings() {
       emailTrimmed.charAt(0).toUpperCase() + emailTrimmed.slice(1);
     displayName = name ?? displayEmail;
     avatar = imageUrl
-      ? () => <Avatar alt={name} src={imageUrl} />
-      : () => <Avatar alt={name}>{avatarFallback[0]}</Avatar>;
+      ? () => <Avatar alt={name} src={imageUrl} className={classes.avatar} />
+      : () => (
+          <Avatar alt={name} className={classes.avatar}>
+            {avatarFallback[0]}
+          </Avatar>
+        );
   }
 
   return (
@@ -65,18 +146,39 @@ export function SidebarUserSettings() {
         icon={avatar || AccountCircleIcon}
         disableSelected
       >
-        {open ? <ExpandMore /> : <ExpandLess />}
+        {open ? <ExpandLess /> : <ExpandMore />}
       </SidebarItem>
       <Collapse in={open} timeout="auto" unmountOnExit>
-        <SidebarItem text="Google" icon={StarBorder} disableSelected>
-          <IconButton
-            onClick={() =>
-              profile ? googleAuth.logout() : googleAuth.getAccessToken()
-            }
+        {providers.map((provider: Provider) => (
+          <SidebarItem
+            key={provider.title}
+            text={provider.title}
+            icon={provider.icon ?? StarBorder}
+            disableSelected
           >
-            <PowerButton color={profile ? 'primary' : 'disabled'} />
-          </IconButton>
-        </SidebarItem>
+            <IconButton
+              onClick={() =>
+                provider.isSignedIn
+                  ? provider.api.logout()
+                  : provider.api.getAccessToken()
+              }
+            >
+              <Tooltip
+                placement="top"
+                arrow
+                title={
+                  provider.isSignedIn
+                    ? `Logout from ${provider.title}`
+                    : `Sign in to ${provider.title}`
+                }
+              >
+                <PowerButton
+                  color={provider.isSignedIn ? 'secondary' : 'primary'}
+                />
+              </Tooltip>
+            </IconButton>
+          </SidebarItem>
+        ))}
       </Collapse>
     </>
   );

From 8cd640394d86070518fa8e97a8bfbc89d882dfd7 Mon Sep 17 00:00:00 2001
From: Marcus Eide <eide@spotify.com>
Date: Mon, 8 Jun 2020 16:46:56 +0200
Subject: [PATCH 3/7] PinButton wip

---
 packages/app/src/components/Root/Root.tsx     |  2 +
 packages/core/src/layout/Sidebar/Items.tsx    |  8 +++-
 packages/core/src/layout/Sidebar/Page.tsx     |  2 +-
 .../Sidebar/{UserBadge.tsx => PinButton.tsx}  | 37 +++----------------
 packages/core/src/layout/Sidebar/index.ts     |  2 +-
 5 files changed, 17 insertions(+), 34 deletions(-)
 rename packages/core/src/layout/Sidebar/{UserBadge.tsx => PinButton.tsx} (63%)

diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx
index cdb8469ee2..9c70191687 100644
--- a/packages/app/src/components/Root/Root.tsx
+++ b/packages/app/src/components/Root/Root.tsx
@@ -33,6 +33,7 @@ import {
   SidebarSpace,
   SidebarUserSettings,
   SidebarThemeToggle,
+  SidebarPinButton,
 } from '@backstage/core';
 
 const useSidebarLogoStyles = makeStyles({
@@ -85,6 +86,7 @@ const Root: FC<{}> = ({ children }) => (
       <SidebarDivider />
       <SidebarThemeToggle />
       <SidebarUserSettings />
+      <SidebarPinButton />
     </Sidebar>
     {children}
   </SidebarPage>
diff --git a/packages/core/src/layout/Sidebar/Items.tsx b/packages/core/src/layout/Sidebar/Items.tsx
index 412800447a..0a875c9035 100644
--- a/packages/core/src/layout/Sidebar/Items.tsx
+++ b/packages/core/src/layout/Sidebar/Items.tsx
@@ -59,6 +59,7 @@ const useStyles = makeStyles<Theme>(theme => {
       fontWeight: 'bold',
       whiteSpace: 'nowrap',
       lineHeight: 1.0,
+      flex: '3 1 auto',
     },
     iconContainer: {
       boxSizing: 'border-box',
@@ -84,6 +85,11 @@ const useStyles = makeStyles<Theme>(theme => {
     searchContainer: {
       width: drawerWidthOpen - iconContainerWidth,
     },
+    secondaryAction: {
+      width: theme.spacing(6),
+      textAlign: 'center',
+      marginRight: theme.spacing(1),
+    },
     selected: {
       '&$root': {
         borderLeft: `solid ${selectedIndicatorWidth}px #9BF0E1`,
@@ -165,7 +171,7 @@ export const SidebarItem: FC<SidebarItemProps> = ({
           {text}
         </Typography>
       )}
-      {children}
+      <div className={classes.secondaryAction}>{children}</div>
     </NavLink>
   );
 };
diff --git a/packages/core/src/layout/Sidebar/Page.tsx b/packages/core/src/layout/Sidebar/Page.tsx
index 2a4cf0fbb2..1e2537f167 100644
--- a/packages/core/src/layout/Sidebar/Page.tsx
+++ b/packages/core/src/layout/Sidebar/Page.tsx
@@ -57,7 +57,7 @@ export const SidebarPage: FC<{}> = props => {
   return (
     <SidebarPinStateContext.Provider
       value={{
-        isPinned,
+        isPinned: true,
         toggleSidebarPinState,
       }}
     >
diff --git a/packages/core/src/layout/Sidebar/UserBadge.tsx b/packages/core/src/layout/Sidebar/PinButton.tsx
similarity index 63%
rename from packages/core/src/layout/Sidebar/UserBadge.tsx
rename to packages/core/src/layout/Sidebar/PinButton.tsx
index d3e02d26cc..5d245dadf1 100644
--- a/packages/core/src/layout/Sidebar/UserBadge.tsx
+++ b/packages/core/src/layout/Sidebar/PinButton.tsx
@@ -14,16 +14,12 @@
  * limitations under the License.
  */
 
-import React, { FC, useContext, useEffect, useState } from 'react';
+import React, { FC, useContext } from 'react';
 import { makeStyles } from '@material-ui/core';
-import AccountCircleIcon from '@material-ui/icons/AccountCircle';
-import { SidebarContext } from './config';
-import { SidebarItem } from './Items';
-import { LoggedUserBadge } from './LoggedUserBadge';
 import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
+import { SidebarContext } from './config';
 import { BackstageTheme } from '@backstage/theme';
 import { SidebarPinStateContext } from './Page';
-import { useApi, googleAuthApiRef, ProfileInfo } from '@backstage/core-api';
 
 const ARROW_BUTTON_SIZE = 20;
 const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(theme => {
@@ -36,12 +32,12 @@ const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(theme => {
       right: 0,
       width: ARROW_BUTTON_SIZE,
       height: ARROW_BUTTON_SIZE,
-      top: `calc(50% - ${ARROW_BUTTON_SIZE / 2}px)`,
+      top: `calc(-50% - ${ARROW_BUTTON_SIZE / 2}px)`,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: '2px 0px 0px 2px',
-      background: theme.palette.pinSidebarButton.icon,
+      background: 'blue',
       color: theme.palette.pinSidebarButton.background,
       border: 'none',
       outline: 'none',
@@ -53,37 +49,16 @@ const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(theme => {
   };
 });
 
-export const SidebarUserBadge: FC<{}> = () => {
+export const SidebarPinButton: FC<{}> = () => {
+  console.log('hello');
   const { isOpen } = useContext(SidebarContext);
   const { isPinned, toggleSidebarPinState } = useContext(
     SidebarPinStateContext,
   );
   const classes = useStyles({ isPinned });
-  const googleAuth = useApi(googleAuthApiRef);
-  const [profile, setProfile] = useState<ProfileInfo>();
-
-  useEffect(() => {
-    // TODO(soapraj): How to observe if the user is logged in
-    // TODO(soapraj): List all the providers supported by the app and let user log in from here
-    googleAuth.getProfile({ optional: true }).then(googleProfile => {
-      setProfile(googleProfile);
-    });
-  }, [googleAuth]);
 
   return (
     <div className={classes.root}>
-      {profile ? (
-        <>
-          <LoggedUserBadge
-            email={profile.email}
-            imageUrl={profile.picture}
-            name={profile.name}
-            collapsedMode={!isOpen}
-          />
-        </>
-      ) : (
-        <SidebarItem icon={AccountCircleIcon} text="" disableSelected />
-      )}
       {isOpen && (
         <button
           className={classes.arrowButtonWrapper}
diff --git a/packages/core/src/layout/Sidebar/index.ts b/packages/core/src/layout/Sidebar/index.ts
index 2bd961e197..ec7e532333 100644
--- a/packages/core/src/layout/Sidebar/index.ts
+++ b/packages/core/src/layout/Sidebar/index.ts
@@ -25,7 +25,7 @@ export {
   SidebarSpacer,
 } from './Items';
 export { IntroCard, SidebarIntro } from './Intro';
-export { SidebarUserBadge } from './UserBadge';
+export { SidebarPinButton } from './PinButton';
 export {
   SIDEBAR_INTRO_LOCAL_STORAGE,
   SidebarContext,

From 14f104aa1ebd1601a05a46705d95314872f19656 Mon Sep 17 00:00:00 2001
From: Marcus Eide <eide@spotify.com>
Date: Tue, 9 Jun 2020 10:05:48 +0200
Subject: [PATCH 4/7] await promise.all when setting isSignedIn

---
 .../core/src/layout/Sidebar/UserSettings.tsx  | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/layout/Sidebar/UserSettings.tsx b/packages/core/src/layout/Sidebar/UserSettings.tsx
index f4f22dd151..5179356cb8 100644
--- a/packages/core/src/layout/Sidebar/UserSettings.tsx
+++ b/packages/core/src/layout/Sidebar/UserSettings.tsx
@@ -32,7 +32,6 @@ import {
 } from '@backstage/core-api';
 import { Avatar, IconButton, makeStyles, Tooltip } from '@material-ui/core';
 import PowerButton from '@material-ui/icons/PowerSettingsNew';
-// import { SidebarThemeToggle } from './SidebarThemeToggle';
 
 type Provider = {
   title: string;
@@ -61,19 +60,23 @@ const useProviders = () => {
     },
   ]);
 
-  Promise.all(
-    providers.map((provider: Provider) =>
-      provider.identity
-        ? provider.api.getIdToken({ optional: true })
-        : provider.api.getAccessToken('', { optional: true }),
-    ),
-  ).then(results => {
-    results.map((result, i) => {
+  const setIsSignedIn = async () => {
+    const signInChecks = await Promise.all(
+      providers.map(provider =>
+        provider.identity
+          ? provider.api.getIdToken({ optional: true })
+          : provider.api.getAccessToken('', { optional: true }),
+      ),
+    );
+
+    signInChecks.map((result, i) => {
       providers[i].isSignedIn = !!result;
     });
 
     setProviders(providers);
-  });
+  };
+
+  setIsSignedIn();
 
   return providers;
 };
@@ -141,7 +144,7 @@ export function SidebarUserSettings() {
     <>
       <Divider innerRef={ref} />
       <SidebarItem
-        text={displayName || 'Sign In'}
+        text={displayName || 'Guest'}
         onClick={handleClick}
         icon={avatar || AccountCircleIcon}
         disableSelected

From 8a3b1ec93e0d5a2184446f0d459a0923e28e966e Mon Sep 17 00:00:00 2001
From: nikek <nikek@spotify.com>
Date: Tue, 9 Jun 2020 15:32:34 +0200
Subject: [PATCH 5/7] make the sidebar pin button show up again

---
 packages/core/src/layout/Sidebar/Page.tsx      | 2 +-
 packages/core/src/layout/Sidebar/PinButton.tsx | 8 ++++----
 packages/theme/src/themes.ts                   | 6 +++---
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/layout/Sidebar/Page.tsx b/packages/core/src/layout/Sidebar/Page.tsx
index 1e2537f167..2a4cf0fbb2 100644
--- a/packages/core/src/layout/Sidebar/Page.tsx
+++ b/packages/core/src/layout/Sidebar/Page.tsx
@@ -57,7 +57,7 @@ export const SidebarPage: FC<{}> = props => {
   return (
     <SidebarPinStateContext.Provider
       value={{
-        isPinned: true,
+        isPinned,
         toggleSidebarPinState,
       }}
     >
diff --git a/packages/core/src/layout/Sidebar/PinButton.tsx b/packages/core/src/layout/Sidebar/PinButton.tsx
index 5d245dadf1..8c52eeb24d 100644
--- a/packages/core/src/layout/Sidebar/PinButton.tsx
+++ b/packages/core/src/layout/Sidebar/PinButton.tsx
@@ -26,19 +26,20 @@ const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(theme => {
   return {
     root: {
       position: 'relative',
+      alignSelf: 'stretch',
     },
     arrowButtonWrapper: {
       position: 'absolute',
       right: 0,
       width: ARROW_BUTTON_SIZE,
       height: ARROW_BUTTON_SIZE,
-      top: `calc(-50% - ${ARROW_BUTTON_SIZE / 2}px)`,
+      top: -(theme.spacing(6) + ARROW_BUTTON_SIZE) / 2,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: '2px 0px 0px 2px',
-      background: 'blue',
-      color: theme.palette.pinSidebarButton.background,
+      background: theme.palette.pinSidebarButton.background,
+      color: theme.palette.pinSidebarButton.icon,
       border: 'none',
       outline: 'none',
       cursor: 'pointer',
@@ -50,7 +51,6 @@ const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(theme => {
 });
 
 export const SidebarPinButton: FC<{}> = () => {
-  console.log('hello');
   const { isOpen } = useContext(SidebarContext);
   const { isPinned, toggleSidebarPinState } = useContext(
     SidebarPinStateContext,
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
index fe3c71a212..55aa5a2900 100644
--- a/packages/theme/src/themes.ts
+++ b/packages/theme/src/themes.ts
@@ -57,8 +57,8 @@ export const lightTheme = createTheme({
     gold: yellow.A700,
     sidebar: '#171717',
     pinSidebarButton: {
-      icon: '#BDBDBD',
-      background: '#404040',
+      icon: '#181818',
+      background: '#BDBDBD',
     },
   },
 });
@@ -103,7 +103,7 @@ export const darkTheme = createTheme({
     gold: yellow.A700,
     sidebar: '#424242',
     pinSidebarButton: {
-      icon: '#181818',
+      icon: '#404040',
       background: '#BDBDBD',
     },
   },

From 9e8cab219a7c4656ca3defec4f99b38fc6568727 Mon Sep 17 00:00:00 2001
From: nikek <nikek@spotify.com>
Date: Tue, 9 Jun 2020 15:36:24 +0200
Subject: [PATCH 6/7] remove LoggedUserBadge

---
 .../src/layout/Sidebar/LoggedUserBadge.tsx    | 298 ------------------
 1 file changed, 298 deletions(-)
 delete mode 100644 packages/core/src/layout/Sidebar/LoggedUserBadge.tsx

diff --git a/packages/core/src/layout/Sidebar/LoggedUserBadge.tsx b/packages/core/src/layout/Sidebar/LoggedUserBadge.tsx
deleted file mode 100644
index d0c3dc62c2..0000000000
--- a/packages/core/src/layout/Sidebar/LoggedUserBadge.tsx
+++ /dev/null
@@ -1,298 +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 React, { FC, useState, useEffect } from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-import { sidebarConfig } from './config';
-import {
-  Avatar,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  Popover,
-  List,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  IconButton,
-  Tooltip,
-  Typography,
-} from '@material-ui/core';
-import { blueGrey } from '@material-ui/core/colors';
-import { useSetState } from 'react-use';
-import { Skeleton } from '@material-ui/lab';
-import { useApi, googleAuthApiRef, ProfileInfo } from '@backstage/core-api';
-import LogoutIcon from '@material-ui/icons/PowerSettingsNew';
-import ControlPointIcon from '@material-ui/icons/ControlPoint';
-import AccountCircleIcon from '@material-ui/icons/AccountCircle';
-
-const useStyles = makeStyles<Theme>(theme => {
-  const { drawerWidthOpen, userBadgeDiameter } = sidebarConfig;
-  return {
-    root: {
-      width: drawerWidthOpen,
-      display: 'flex',
-      alignItems: 'center',
-      paddingLeft: 18,
-      paddingTop: 14,
-      paddingBottom: 14,
-      color: '#b5b5b5',
-    },
-    avatar: {
-      width: userBadgeDiameter,
-      height: userBadgeDiameter,
-      marginRight: 8,
-    },
-    purple: {
-      color: theme.palette.getContrastText(blueGrey[500]),
-      backgroundColor: blueGrey[500],
-    },
-    listItemText: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
-  };
-});
-
-const SessionListItem: FC<{
-  classes: any;
-  loading: boolean;
-  title: string;
-  icon: any;
-  user: any;
-  onSignIn: Function;
-  onSignOut: Function;
-}> = ({
-  classes,
-  loading,
-  title,
-  icon,
-  user,
-  onSignIn,
-  onSignOut,
-  ...props
-}) => {
-  if (loading) {
-    return (
-      <ListItem {...props}>
-        <ListItemIcon style={{ marginRight: 0 }}>
-          <Skeleton variant="circle" width={40} height={40} />
-        </ListItemIcon>
-        <ListItemText
-          primary={<Skeleton component="span" width={120} />}
-          secondary={<Skeleton component="span" width={60} />}
-        />
-        <ListItemSecondaryAction>
-          <IconButton>
-            <Skeleton variant="circle" width={24} height={24} />
-          </IconButton>
-        </ListItemSecondaryAction>
-      </ListItem>
-    );
-  }
-
-  // TODO: Not functional yet to sign in from the sidebar
-  if (!user) {
-    return (
-      <ListItem {...props}>
-        <ListItemIcon style={{ marginRight: 0 }}>{icon}</ListItemIcon>
-        <ListItemText primary="Sign In" secondary={title} />
-        <ListItemSecondaryAction>
-          <Tooltip
-            title={`Sign in with ${title}`}
-            placement="bottom-end"
-            PopperProps={{ style: { width: 120 } }}
-          >
-            <IconButton onClick={() => onSignIn()}>
-              <ControlPointIcon />
-            </IconButton>
-          </Tooltip>
-        </ListItemSecondaryAction>
-      </ListItem>
-    );
-  }
-
-  const { id, avatarUrl, avatarAlt } = user;
-
-  return (
-    <ListItem {...props}>
-      <ListItemAvatar>
-        <Avatar src={avatarUrl} alt={avatarAlt}>
-          {avatarAlt && avatarAlt[0].toUpperCase()}
-        </Avatar>
-      </ListItemAvatar>
-      <ListItemText
-        className={classes.listItemText}
-        primary={
-          <Typography className={classes.listItemText} variant="body2">
-            {id}
-          </Typography>
-        }
-        secondary={title}
-      />
-      <ListItemSecondaryAction style={{ marginLeft: '30px' }}>
-        <Tooltip
-          title={`Sign out from ${title}`}
-          placement="bottom-end"
-          PopperProps={{ style: { width: 120 } }}
-        >
-          <IconButton onClick={() => onSignOut()}>
-            <LogoutIcon />
-          </IconButton>
-        </Tooltip>
-      </ListItemSecondaryAction>
-    </ListItem>
-  );
-};
-
-const useGoogleLoginState = (open: boolean) => {
-  const googleAuth = useApi(googleAuthApiRef);
-  const [loading, setLoading] = useState(true);
-  const [profile, setProfile] = useState<ProfileInfo>();
-
-  useEffect(() => {
-    let didCancel = false;
-
-    if (open) {
-      googleAuth.getProfile().then(_profile => {
-        if (!didCancel) {
-          setProfile(_profile);
-          setLoading(false);
-        }
-      });
-    }
-
-    return () => {
-      didCancel = true;
-    };
-  }, [open, googleAuth]);
-
-  if (loading) {
-    return { loading: true };
-  }
-  return { loading: false, isLoggedIn: !!profile, profile };
-};
-
-type Props = {
-  email: string;
-  imageUrl?: string;
-  name?: string;
-  collapsedMode?: boolean;
-};
-
-export const LoggedUserBadge: FC<Props> = ({
-  imageUrl,
-  name,
-  email,
-  collapsedMode = false,
-}) => {
-  const [state, setState] = useSetState({
-    open: false,
-    anchorEl: null,
-  });
-  const googleAuth = useApi(googleAuthApiRef);
-  const googleLogin = useGoogleLoginState(state.open);
-
-  const handleOpen = (event: {
-    preventDefault: () => void;
-    currentTarget: any;
-  }) => {
-    // This prevents ghost click.
-    event.preventDefault();
-    setState({
-      open: true,
-      anchorEl: event.currentTarget,
-    });
-  };
-
-  const handleClose = () => {
-    setState({
-      open: false,
-    });
-  };
-
-  const handleGoogleSignIn = () => {
-    googleAuth.getIdToken();
-    handleClose();
-  };
-
-  const handleGoogleSignOut = () => {
-    googleAuth.logout();
-  };
-
-  const classes = useStyles();
-  const avatarFallback = email.charAt(0).toUpperCase() + email.slice(1);
-  const emailTrimmed = email.split('@')[0];
-  const displayEmail =
-    emailTrimmed.charAt(0).toUpperCase() + emailTrimmed.slice(1);
-  const displayName = name ?? displayEmail;
-
-  return (
-    <>
-      <List dense>
-        <ListItem className={classes.root} onClick={handleOpen}>
-          <ListItemAvatar>
-            {imageUrl ? (
-              <Avatar alt={name} src={imageUrl} className={classes.avatar} />
-            ) : (
-              <Avatar
-                alt={name}
-                className={`${classes.avatar} ${classes.purple}`}
-              >
-                {avatarFallback[0]}
-              </Avatar>
-            )}
-          </ListItemAvatar>
-          {!collapsedMode && (
-            <ListItemText
-              primary={
-                <Typography className={classes.listItemText} variant="body2">
-                  {displayName}
-                </Typography>
-              }
-            />
-          )}
-        </ListItem>
-      </List>
-      <Popover
-        transitionDuration={0}
-        open={state.open}
-        anchorEl={state.anchorEl}
-        anchorOrigin={{ horizontal: 'center', vertical: 'top' }}
-        transformOrigin={{ horizontal: 'center', vertical: 'bottom' }}
-        onClose={handleClose}
-      >
-        <List dense>
-          <SessionListItem
-            classes={classes}
-            loading={googleLogin.loading}
-            title="Google"
-            icon={AccountCircleIcon}
-            user={
-              googleLogin.isLoggedIn && {
-                id: googleLogin.profile?.email,
-                avatarUrl: googleLogin.profile?.picture ?? '',
-                avatarAlt:
-                  googleLogin.profile?.picture ?? googleLogin.profile?.email,
-              }
-            }
-            onSignIn={handleGoogleSignIn}
-            onSignOut={handleGoogleSignOut}
-          />
-        </List>
-      </Popover>
-    </>
-  );
-};

From 2b39be42f0d7ca033380c995131e0927cfce024d Mon Sep 17 00:00:00 2001
From: nikek <nikek@spotify.com>
Date: Tue, 9 Jun 2020 18:17:19 +0200
Subject: [PATCH 7/7] Remove deleted UserBadge component from Sidebar story

---
 packages/core/src/layout/Sidebar/Sidebar.stories.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/core/src/layout/Sidebar/Sidebar.stories.tsx b/packages/core/src/layout/Sidebar/Sidebar.stories.tsx
index 1b9ba5bbab..a450a09d88 100644
--- a/packages/core/src/layout/Sidebar/Sidebar.stories.tsx
+++ b/packages/core/src/layout/Sidebar/Sidebar.stories.tsx
@@ -22,7 +22,6 @@ import {
   SidebarDivider,
   SidebarSearchField,
   SidebarSpace,
-  SidebarUserBadge,
 } from '.';
 import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
 import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
@@ -55,6 +54,5 @@ export const SampleSidebar = () => (
     <SidebarIntro />
     <SidebarSpace />
     <SidebarDivider />
-    <SidebarUserBadge />
   </Sidebar>
 );