minor fixes

packages/core-api/src/apis/implementations/auth/google/GoogleAuth.ts

@@ -24,7 +24,6 @@ import {
   AccessTokenOptions,
   ProfileInfoApi,
   ProfileInfoOptions,
-  ProfileInfo,
 } from '../../../definitions/auth';
 import { OAuthRequestApi, AuthProvider } from '../../../definitions';
 import { SessionManager } from '../../../../lib/AuthSessionManager/types';

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

@@ -28,11 +28,12 @@ import {
   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';
+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';
@@ -90,7 +91,6 @@ const SessionListItem: FC<{
           <Skeleton variant="circle" width={40} height={40} />
         </ListItemIcon>
         <ListItemText
-          className={classes.listItemText}
           primary={<Skeleton component="span" width={120} />}
           secondary={<Skeleton component="span" width={60} />}
         />
@@ -103,16 +103,12 @@ const SessionListItem: FC<{
     );
   }
 
-  //TODO: Not functional yet to sign in from the sidebar
+  // TODO: Not functional yet to sign in from the sidebar
   if (!user) {
     return (
       <ListItem {...props}>
         <ListItemIcon style={{ marginRight: 0 }}>{icon}</ListItemIcon>
-        <ListItemText
-          className={classes.listItemText}
-          primary="Sign In"
-          secondary={title}
-        />
+        <ListItemText primary="Sign In" secondary={title} />
         <ListItemSecondaryAction>
           <Tooltip
             title={`Sign in with ${title}`}
@@ -139,7 +135,11 @@ const SessionListItem: FC<{
       </ListItemAvatar>
       <ListItemText
         className={classes.listItemText}
-        primary={id}
+        primary={
+          <Typography className={classes.listItemText} variant="body2">
+            {id}
+          </Typography>
+        }
         secondary={title}
       />
       <ListItemSecondaryAction style={{ marginLeft: '30px' }}>
@@ -163,25 +163,21 @@ const useGoogleLoginState = (open: boolean) => {
   const [profile, setProfile] = useState<ProfileInfo>();
 
   useEffect(() => {
-    if (!open) {
-      return;
-    }
-
     let didCancel = false;
 
-    googleAuth.getProfile().then(profile => {
-      if (didCancel) {
-        return;
-      }
-
-      setProfile(profile);
-      setLoading(false);
-    });
+    if (open) {
+      googleAuth.getProfile().then(_profile => {
+        if (!didCancel) {
+          setProfile(_profile);
+          setLoading(false);
+        }
+      });
+    }
 
     return () => {
       didCancel = true;
     };
-  }, [open]);
+  }, [open, googleAuth]);
 
   if (loading) {
     return { loading: true };
@@ -261,8 +257,11 @@ export const LoggedUserBadge: FC<Props> = ({
           </ListItemAvatar>
           {!collapsedMode && (
             <ListItemText
-              primary={displayName}
-              className={classes.listItemText}
+              primary={
+                <Typography className={classes.listItemText} variant="body2">
+                  {displayName}
+                </Typography>
+              }
             />
           )}
         </ListItem>

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

@@ -16,14 +16,14 @@
 
 import React, { FC, useContext, useEffect, useState } from 'react';
 import { makeStyles } from '@material-ui/core';
-import People from '@material-ui/icons/People';
+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 { BackstageTheme } from '@backstage/theme';
 import { SidebarPinStateContext } from './Page';
-import { useApi, googleAuthApiRef, ProfileInfo } from '@backstage/core';
+import { useApi, googleAuthApiRef, ProfileInfo } from '@backstage/core-api';
 
 const ARROW_BUTTON_SIZE = 20;
 const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(theme => {
@@ -63,8 +63,8 @@ export const SidebarUserBadge: FC<{}> = () => {
   const [profile, setProfile] = useState<ProfileInfo>();
 
   useEffect(() => {
-    //TODO(soapraj): How to observe if the user is logged in
-    //TODO(soapraj): Enumerate 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
+    // 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);
     });
@@ -82,7 +82,7 @@ export const SidebarUserBadge: FC<{}> = () => {
           />
         </>
       ) : (
-        <SidebarItem icon={People} text="" disableSelected />
+        <SidebarItem icon={AccountCircleIcon} text="" disableSelected />
       )}
       {isOpen && (
         <button

packages/storybook/.storybook/apis.js

@@ -2,9 +2,13 @@ import {
   ApiRegistry,
   alertApiRef,
   errorApiRef,
+  oauthRequestApiRef,
+  OAuthRequestManager,
+  googleAuthApiRef,
   AlertApiForwarder,
   ErrorApiForwarder,
   ErrorAlerter,
+  GoogleAuth,
 } from '@backstage/core';
 
 const builder = ApiRegistry.builder();
@@ -13,4 +17,18 @@ const alertApi = builder.add(alertApiRef, new AlertApiForwarder());
 
 builder.add(errorApiRef, new ErrorAlerter(alertApi, new ErrorApiForwarder()));
 
+const oauthRequestApi = builder.add(
+  oauthRequestApiRef,
+  new OAuthRequestManager(),
+);
+
+builder.add(
+  googleAuthApiRef,
+  GoogleAuth.create({
+    apiOrigin: 'http://localhost:7000',
+    basePath: '/auth/',
+    oauthRequestApi,
+  }),
+);
+
 export const apis = builder.build();