PinButton wip

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>

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

packages/core/src/layout/Sidebar/Page.tsx

@@ -57,7 +57,7 @@ export const SidebarPage: FC<{}> = props => {
   return (
     <SidebarPinStateContext.Provider
       value={{
-        isPinned,
+        isPinned: true,
         toggleSidebarPinState,
       }}
     >

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}

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,