fix: use initials in profile icon when signed in (#3625)

* use user initials

* handle profile and header cleanup

Author: Mnickii

src/app/views/authentication/Authentication.styles.ts

@@ -1,4 +1,4 @@
-import { MessageBarType, Spinner, SpinnerSize, styled } from '@fluentui/react';
+import { Spinner } from '@fluentui/react-components';
 import { SeverityLevel } from '@microsoft/applicationinsights-web';
 import { useState } from 'react';
 
@@ -9,9 +9,18 @@ import { componentNames, errorTypes, eventTypes, telemetry } from '../../../tele
 import { getAuthTokenSuccess, getConsentedScopesSuccess } from '../../services/slices/auth.slice';
 import { setQueryResponseStatus } from '../../services/slices/query-status.slice';
 import { translateMessage } from '../../utils/translate-messages';
-import { classNames } from '../classnames';
-import { showSignInButtonOrProfile } from './auth-util-components/ProfileButtonV9';
-import { authenticationStyles } from './Authentication.styles';
+import { showSignInButtonOrProfile } from './auth-util-components/ProfileButton';
+
+const showProgressSpinner = (): React.ReactNode => {
+  return (
+    <Spinner/>
+  );
+};
+
+const removeUnderScore = (statusString: string): string => {
+  return statusString ? statusString.replace(/_/g, ' ') : statusString;
+}
+
 
 const Authentication = (props: any) => {
   const dispatch: AppDispatch = useAppDispatch();
@@ -20,8 +29,6 @@ const Authentication = (props: any) => {
   const tokenPresent = !!authToken.token;
   const logoutInProgress = !!authToken.pending;
 
-  const classes = classNames(props);
-
   const signIn = async (): Promise<void> => {
     setLoginInProgress(true);
     telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT, {
@@ -82,19 +89,6 @@ const Authentication = (props: any) => {
     }
   }
 
-
-  const removeUnderScore = (statusString: string): string => {
-    return statusString ? statusString.replace(/_/g, ' ') : statusString;
-  }
-
-  const showProgressSpinner = (): React.ReactNode => {
-    return (
-      <div className={classes.spinnerContainer}>
-        <Spinner className={classes.spinner} size={SpinnerSize.medium} />
-      </div>
-    );
-  };
-
   if (logoutInProgress) {
     return showProgressSpinner();
   }
@@ -116,6 +110,4 @@ const Authentication = (props: any) => {
   );
 };
 
-// @ts-ignore
-const StyledAuthentication = styled(Authentication, authenticationStyles);
-export default StyledAuthentication;
+export default Authentication;

src/app/views/authentication/Authentication.tsx

@@ -1,38 +1,43 @@
-import { ActionButton, getId, getTheme, TooltipHost } from '@fluentui/react';
+import { Button, Persona, PersonaProps, Tooltip } from '@fluentui/react-components';
 import { translateMessage } from '../../../utils/translate-messages';
-import Profile from '../profile/Profile';
-import { profileButtonStyles } from './ProfileButton.styles';
+import { useHeaderStyles } from '../../main-header/utils';
+import { ProfileV9 } from '../profile/Profile';
 
+export const PersonaSignIn = (props: Partial<PersonaProps>) => {
+  return (
+    <Persona
+      presence={{ status: 'offline' }}
+      {...props}
+    />
+  );
+};
+
+const SignInButton = ({signIn}: {signIn: ()=> void})=>{
+  const styles = useHeaderStyles()
+  return (
+    <Tooltip
+      content={translateMessage('sign in')}
+      relationship="description">
+      <Button
+        aria-label={translateMessage('sign in')}
+        role='button'
+        appearance='subtle'
+        className={styles.iconButton}
+        icon={<PersonaSignIn/>}
+        onClick={signIn}
+      />
+    </Tooltip>
+  )
+}
 export function showSignInButtonOrProfile(
   tokenPresent: boolean,
-  signIn: Function,
-  signInWithOther: Function
+  signIn: () => void,
+  signInWithOther: ()=>Promise<void>
 ) {
-
-  const currentTheme = getTheme();
-  const { actionButtonStyles } = profileButtonStyles(currentTheme);
-  const signInButton =
-  <TooltipHost
-    content={
-      <div style={{padding:'3px'}}>
-        {translateMessage('sign in')}
-      </div>}
-    id={getId()}
-    calloutProps={{ gapSpace: 0 }}
-  >
-    <ActionButton
-      ariaLabel={translateMessage('sign in')}
-      role='button'
-      iconProps={{ iconName: 'Contact' }}
-      onClick={() => signIn()}
-      styles={actionButtonStyles}
-    />
-  </TooltipHost>
-
   return (
     <>
-      {!tokenPresent && signInButton}
-      {tokenPresent && <Profile signInWithOther={signInWithOther}/>}
+      {!tokenPresent && <SignInButton signIn={signIn}/>}
+      {tokenPresent && <ProfileV9 signInWithOther={signInWithOther} />}
     </>
   );
 }