Merge pull request #9 from microsoft/users/esmishra/profile

User profile, log out, history redirection bug fix

Author: emishra

source/reactjs/src/App.tsx

@@ -46,6 +46,7 @@ import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import { UserSettingsPanel } from './Components/UserSettingsPanel/UserSettingsPanel';
 import { helpPanelReducer, helpPanelReducerName } from './Components/HelpPanel/HelpPanel.reducer';
 import { helpPanelSagas } from './Components/HelpPanel/HelpPanel.sagas';
+import { ProfilePanel } from './Components/ProfilePanel';
 
 export function App(): React.ReactElement {
     useLoginOnStartup(true, { scopes: ['https://graph.microsoft.com/.default'] });
@@ -187,8 +188,9 @@ export function App(): React.ReactElement {
             <HelpPanel />
             <UserSettingsPanel />
             <NotificationPanelCustom />
+            <ProfilePanel />
             <BrowserRouter>
-                <TopHeader />
+                <TopHeader upn={user?.email} displayName={user?.name} />
                 <SideNav links={navConfig} />
                 <div>
                     <Stack horizontal className={isPanelOpen ? 'ms-hiddenSm' : ''}>

source/reactjs/src/Components/ProfilePanel.tsx

@@ -0,0 +1,47 @@
+import { Panel, PersonaSize, Separator } from '@fluentui/react';
+import * as React from 'react';
+import { useDynamicReducer } from '@micro-frontend-react/employee-experience/lib/useDynamicReducer';
+import { Context, withContext } from '@micro-frontend-react/employee-experience/lib/Context';
+import { IEmployeeExperienceContext } from '@micro-frontend-react/employee-experience/lib/IEmployeeExperienceContext';
+import { getIsProfilePanelOpen, getProfile } from './Shared/SharedComponents.selectors';
+import { ActionButton } from '@fluentui/react/lib/Button';
+import { toggleProfilePanel } from './Shared/SharedComponents.actions';
+import { Persona } from './Shared/Components/Persona';
+
+export function ProfilePanel(): React.ReactElement {
+    const { useSelector, dispatch, authClient } = React.useContext(
+        Context as React.Context<IEmployeeExperienceContext>
+    );
+    const isProfilePanelOpen = useSelector(getIsProfilePanelOpen);
+    const profile = useSelector(getProfile);
+
+    const handleProfileDismiss = (): void => {
+        dispatch(toggleProfilePanel(false));
+    };
+
+    const handleLogout = (): void => {
+        authClient.logOut();
+    };
+
+    return (
+        <Panel
+            isLightDismiss
+            isOpen={isProfilePanelOpen}
+            onDismiss={handleProfileDismiss}
+            closeButtonAriaLabel="Close profile panel"
+            headerText="Profile"
+        >
+            <Persona
+                emailAlias={profile?.userPrincipalName}
+                size={PersonaSize.size56}
+                text={profile?.displayName}
+                secondaryText={profile?.userPrincipalName}
+                styles={{ root: { paddingTop: '20px' } }}
+            />
+            <Separator />
+            <ActionButton styles={{ label: { color: '#0078d4' }, root: { marginLeft: '-5px' } }} onClick={handleLogout}>
+                Sign out
+            </ActionButton>
+        </Panel>
+    );
+}