Task: tenant name ellipsis

src/app/custom-hooks/ellipsis-detector/index.ts

@@ -0,0 +1 @@
+export { useEllipsisDetector } from './useEllipsisDetector';

src/app/custom-hooks/ellipsis-detector/useEllipsisDetector.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+export const useEllipsisDetector = (className: string): boolean => {
+  const [isEllipsisActive, setIsEllipsisActive] = useState<boolean>(false);
+  useEffect(() => {
+
+    const ellipsisCheck = (collection: any) => {
+      if (collection?.length === 0) {
+        return;
+      }
+      if (collection[0].offsetWidth < collection[0].scrollWidth) {
+        setIsEllipsisActive(true);
+      }
+    }
+
+    ellipsisCheck(document.getElementsByClassName(className));
+  });
+
+  return isEllipsisActive;
+}

src/app/views/authentication/auth-util-components/ProfileButton.styles.ts

@@ -9,6 +9,9 @@ export const profileButtonStyles = (theme: ITheme) => {
         ':hover': {
           background: `${theme.palette.neutralLight} !important`
         }
+      },
+      icon: {
+        flex: 1
       }
     }
   }

src/app/views/authentication/profile/Profile.styles.ts

@@ -1,4 +1,4 @@
-import { ITheme } from '@fluentui/react'
+import { FontSizes, ITheme } from '@fluentui/react'
 
 export const profileStyles = (theme: ITheme) => {
   return {
@@ -17,7 +17,12 @@ export const profileStyles = (theme: ITheme) => {
       secondaryText:
       {
         paddingBottom: 10,
-        textTransform: 'lowercase'
+        textTransform: 'lowercase',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap' as 'nowrap',
+        fontSize: FontSizes.small,
+        maxWidth: '165px'
       },
       root: {
         height: '100%',
@@ -71,6 +76,10 @@ export const profileStyles = (theme: ITheme) => {
     activeConsentStyles: {
       marginRight: 10,
       backgroundColor: theme.palette.themeDarker
+    },
+    tooltipContentStyle: {
+      dusplay: 'inline-block',
+      height: '15px'
     }
   }
 }

src/app/views/authentication/profile/Profile.tsx

@@ -3,10 +3,12 @@ import {
   Callout,
   DefaultButton,
   FontSizes,
+  getId,
   getTheme,
   IOverlayProps,
   IPersonaProps,
   IPersonaSharedProps,
+  ITooltipHostStyles,
   Label,
   mergeStyleSets,
   Panel,
@@ -17,7 +19,8 @@ import {
   Spinner,
   SpinnerSize,
   Stack,
-  styled
+  styled,
+  TooltipHost
 } from '@fluentui/react';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -34,6 +37,7 @@ import { classNames } from '../../classnames';
 import { Permission } from '../../query-runner/request/permissions';
 import { authenticationStyles } from '../Authentication.styles';
 import { profileStyles } from './Profile.styles';
+import { useEllipsisDetector } from '../../../custom-hooks/ellipsis-detector';
 
 const getInitials = (name: string) => {
   let initials = '';
@@ -66,15 +70,15 @@ const Profile = (props: any) => {
   const labelId = useId('callout-label');
   const descriptionId = useId('callout-description');
   const theme = getTheme();
-  const { personaStyleToken , profileSpinnerStyles, permissionsLabelStyles, inactiveConsentStyles,
+  const { personaStyleToken , profileSpinnerStyles, permissionsLabelStyles, inactiveConsentStyles, tooltipContentStyle,
     personaButtonStyles, profileContainerStyles, permissionPanelStyles, activeConsentStyles } = profileStyles(theme);
+  const showTooltipContent : boolean = useEllipsisDetector('ms-Persona-secondaryText');
 
   useEffect(() => {
     if (authenticated) {
       dispatch(getProfileInfo());
     }
-  }, [authenticated]);
-
+  }, [authenticated, isCalloutVisible]);
 
   if (!profile) {
     return (<Spinner size={SpinnerSize.medium} styles={profileSpinnerStyles} />);
@@ -154,14 +158,28 @@ const Profile = (props: any) => {
   const panelOverlayProps: IOverlayProps = {
     isDarkThemed: true
   }
+
   const onRenderSecondaryText = (prop: IPersonaProps): JSX.Element => {
     return (
-      <span style={{fontSize: FontSizes.small}}>
+      <TooltipHost
+        content={showTooltipContent ? prop.secondaryText : ''}
+        id= {getId()}
+        calloutProps={{ gapSpace: 0}}
+        tooltipProps={{onRenderContent: () => renderTooltipContent(prop.secondaryText!)}}
+      >
         {prop.secondaryText}
-      </span>
+      </TooltipHost>
     );
   }
 
+  const renderTooltipContent = (tooltipText: string) : JSX.Element => {
+    return (
+      <div style={tooltipContentStyle}>
+        {tooltipText}
+      </div>
+    )
+  }
+
   const showProfileComponent = (userPersona: any): React.ReactNode => {
 
     const smallPersona = <Persona
@@ -175,7 +193,8 @@ const Profile = (props: any) => {
       size={PersonaSize.size72}
       hidePersonaDetails={false}
       onRenderSecondaryText={onRenderSecondaryText}
-      styles={personaStyleToken} />
+      styles={personaStyleToken}
+      className='personaEmailLabel' />
 
     return (<>
       <ActionButton ariaLabel='profile'

src/app/views/main-header/MainHeader.styles.ts

@@ -11,8 +11,7 @@ export const mainHeaderStyles = (theme: ITheme, mobileScreen?: boolean) => {
     },
     rightItemsStyles: {
       root: {
-        alignItems: 'center',
-        flexBasis: mobileScreen ? '137px' : ''
+        alignItems: 'center'
       }
     },
     feedbackIconAdjustmentStyles: {
@@ -29,6 +28,12 @@ export const mainHeaderStyles = (theme: ITheme, mobileScreen?: boolean) => {
     tenantContainerStyle: {
       margin: '0px 10px'
     },
+    tenantNameStyle: {
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      maxWidth: '100px',
+      whiteSpace: 'nowrap' as 'nowrap'
+    },
     iconButton: {
       menuIcon: { fontSize: 15 },
       root: {

src/app/views/main-header/MainHeader.tsx

@@ -20,6 +20,7 @@ import { useSelector } from 'react-redux';
 import { IRootState } from '../../../types/root';
 import { mainHeaderStyles } from './MainHeader.styles';
 import TenantIcon from './tenantIcon';
+import { useEllipsisDetector } from '../../custom-hooks/ellipsis-detector';
 
 interface MainHeaderProps {
   minimised: boolean;
@@ -44,8 +45,11 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
   const minimised = props.minimised;
   const mobileScreen = props.mobileScreen;
   const currentTheme = getTheme();
+  const showTooltipContent : boolean = useEllipsisDetector('tenantLabel');
+
+
   const { rootStyles : itemAlignmentStackStyles, rightItemsStyles, graphExplorerLabelStyles,
-    feedbackIconAdjustmentStyles, tenantIconStyles, moreInformationStyles,
+    feedbackIconAdjustmentStyles, tenantIconStyles, moreInformationStyles, tenantNameStyle,
     tenantLabelStyle, tenantContainerStyle } = mainHeaderStyles(currentTheme, mobileScreen);
 
   return (
@@ -80,7 +84,7 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
         </Stack>
 
         <Stack horizontal styles={rightItemsStyles}
-          tokens={{childrenGap:mobileScreen? 0: 10}}
+          tokens={{childrenGap: mobileScreen ? 0: 10}}
         >
           {!mobileScreen && <FontIcon aria-label='tenant icon' iconName='tenantIcon' style={tenantIconStyles} />}
           {!profile && !mobileScreen &&
@@ -102,7 +106,13 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
           {profile && !mobileScreen &&
           <div style={tenantContainerStyle}>
             <Label style={tenantLabelStyle}>Tenant</Label>
-            <Label>{profile.tenant}</Label>
+            <TooltipHost
+              content={showTooltipContent ? profile.tenant : ''}
+              id= { getId() }
+              calloutProps={{ gapSpace: 0 }}
+            >
+              <Label className='tenantLabel' style={tenantNameStyle}> {profile.tenant} </Label>
+            </TooltipHost>
           </div>
           }
           <span style={ moreInformationStyles }> <Settings /> </span>