Merge branch 'feat/fluent-v9-upgrade' of https://github.com/microsoftgraph/microsoft-graph-explorer-v4 into feat/fluent-v9-upgrade

Author: Mnickii

src/app/views/app-sections/StatusMessages.tsx

@@ -16,8 +16,8 @@ const intentMap: { [key: string]: MessageBarIntent } = {
 
 const StatusMessages = () => {
   const dispatch = useAppDispatch();
-  const queryRunnerStatus = useAppSelector((state)=> state.queryRunnerStatus);
-  const sampleQuery = useAppSelector((state)=> state.sampleQuery);
+  const queryRunnerStatus = useAppSelector((state) => state.queryRunnerStatus);
+  const sampleQuery = useAppSelector((state) => state.sampleQuery);
 
   function setQuery(link: string) {
     const query: IQuery = { ...sampleQuery };
@@ -27,26 +27,26 @@ const StatusMessages = () => {
     dispatch(setSampleQuery(query));
   }
 
-  if (queryRunnerStatus) {
-    const { messageBarType, statusText, status, duration, hint } = queryRunnerStatus;  return <MessageBar
-      intent={intentMap[messageBarType]}
-      politeness='assertive'
-    >
-      <MessageBarBody>
-        <MessageDisplay message={`**${statusText} - **${status.toString()}`} onSetQuery={setQuery} />
-
-        {duration && <>
-          {` - ${duration} ${translateMessage('milliseconds')}`}
-        </>}
+  if (
+    !queryRunnerStatus?.status ||
+    typeof queryRunnerStatus.status === 'string' && queryRunnerStatus.status.trim() === ''
+  ) {
+    return <div />;
+  }
 
+  const { messageBarType, statusText, status, duration, hint } = queryRunnerStatus;
+  return (
+    <MessageBar intent={intentMap[messageBarType]} politeness='assertive'>
+      <MessageBarBody>
+        <MessageDisplay message={`**${statusText} - **${status}`} onSetQuery={setQuery} />
+        {duration && <> - {duration} {translateMessage('milliseconds')}</>}
         {status === 403 && <>
           {translateMessage('consent to scopes')}
           <span style={{ fontWeight: 600 }}>
             {translateMessage('modify permissions')}
           </span>
           {translateMessage('tab')}
         </>}
-
         {hint && <div>{hint}</div>}
       </MessageBarBody>
       <MessageBarActions
@@ -59,9 +59,8 @@ const StatusMessages = () => {
           />
         }
       />
-    </MessageBar>;
-  }
-  return <div />;
-}
+    </MessageBar>
+  );
+};
 
-export default StatusMessages;
+export default StatusMessages;

src/app/views/authentication/auth-util-components/ProfileButton.tsx

@@ -6,14 +6,15 @@ import { ProfileV9 } from '../profile/Profile';
 export const PersonaSignIn = (props: Partial<PersonaProps>) => {
   return (
     <Persona
+      aria-hidden={true}
       presence={{ status: 'offline' }}
       {...props}
     />
   );
 };
 
 const SignInButton = ({signIn}: {signIn: ()=> void})=>{
-  const styles = useHeaderStyles()
+  const styles = useHeaderStyles();
   return (
     <Tooltip
       content={translateMessage('sign in')}

src/app/views/common/popups/DrawerWrapper.tsx

@@ -7,7 +7,8 @@ import {
   DrawerHeaderTitle,
   Button,
   Spinner,
-  makeStyles
+  makeStyles,
+  Tooltip
 } from '@fluentui/react-components';
 import { ArrowLeft24Regular, Dismiss24Regular } from '@fluentui/react-icons';
 
@@ -66,22 +67,28 @@ export function DrawerWrapper(props: WrapperProps) {
     >
       <DrawerHeader>
         <DrawerHeaderTitle action={
-          <Button
-            icon={<Dismiss24Regular />}
-            appearance='subtle'
-            onClick={() => dismissPopup()}
-            aria-label={translateMessage('Close')}
-          />
-
-        }>
-          {showBackButton && (
+          <Tooltip
+            content={translateMessage('Close')} relationship='label'>
             <Button
-              icon={<ArrowLeft24Regular />}
+              icon={<Dismiss24Regular />}
               appearance='subtle'
               onClick={() => dismissPopup()}
-              aria-label={translateMessage('Back')}
-              className={drawerStyles.button}
+              aria-label={translateMessage('Close')}
             />
+          </Tooltip>
+        }>
+          {showBackButton && (
+            <Tooltip
+              content={translateMessage('Back')}
+              relationship='label'>
+              <Button
+                icon={<ArrowLeft24Regular />}
+                appearance='subtle'
+                onClick={() => dismissPopup()}
+                aria-label={translateMessage('Back')}
+                className={drawerStyles.button}
+              />
+            </Tooltip>
           )}
           {title || ''}
         </DrawerHeaderTitle>

src/app/views/layout/LayoutResizeHandler.tsx

@@ -64,13 +64,14 @@ export const LayoutResizeHandler = React.forwardRef<HTMLDivElement, HandleProps>
         ref={ref}
         onClick={handleClick}
         onMouseDown={onMouseDown}
-        tabIndex={0}
+        tabIndex={-1}
         className={hoverStyles}
         style={{
           position: 'absolute',
           borderRadius: '2px',
           ...positioningProps
         }}
+        aria-hidden={true}
       />
     );
   }

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

@@ -31,6 +31,7 @@ const FeedbackButton = ()=>{
     <>
       <Tooltip content={translateMessage('Feedback')} relationship="description">
         <Button
+          aria-label={translateMessage('Feedback')}
           onClick={activateSurvey}
           className={styles.iconButton} appearance="subtle" icon={<PersonFeedback20Regular />} />
       </Tooltip>

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

@@ -35,6 +35,7 @@ const Help = ()=>{
       <Tooltip content={translateMessage('Help')} relationship="description">
         <MenuTrigger disableButtonEnhancement>
           <Button
+            aria-label={translateMessage('Help')}
             onClick={trackHelpButtonClickEvent}
             className={styles.iconButton} appearance="subtle" icon={<ChatHelp20Regular />} />
         </MenuTrigger>

src/app/views/main-header/settings/Settings.tsx

@@ -42,6 +42,7 @@ const Settings = ()=>{
       <Tooltip content={translateMessage('Settings')} relationship="description">
         <MenuTrigger disableButtonEnhancement>
           <Button
+            aria-label={translateMessage('Settings')}
             onClick={trackSettingsButtonClickEvent}
             className={styles.iconButton} appearance="subtle" icon={<Settings20Regular />} />
         </MenuTrigger>

src/app/views/query-response/QueryResponse.tsx

@@ -6,11 +6,13 @@ import {
   DialogSurface,
   DialogTrigger,
   makeStyles,
-  tokens
+  tokens,
+  Tooltip
 } from '@fluentui/react-components';
 import { DismissRegular, ExpandUpLeftRegular } from '@fluentui/react-icons';
 import { useState } from 'react';
 import { GetPivotItems } from './pivot-items/pivot-item';
+import { translateMessage } from '../../utils/translate-messages';
 
 const useStyles = makeStyles({
   container: {
@@ -45,13 +47,15 @@ const PivotItemsDialog = () => {
 
   return (
     <div>
-      <Button
-        appearance='transparent'
-        icon={<ExpandUpLeftRegular />}
-        aria-label='Expand'
-        className={styles.dialogBtn}
-        onClick={() => setOpen(true)}
-      />
+      <Tooltip content={translateMessage('Expand')} relationship='label'>
+        <Button
+          appearance='transparent'
+          icon={<ExpandUpLeftRegular />}
+          aria-label={translateMessage('Expand')}
+          className={styles.dialogBtn}
+          onClick={() => setOpen(true)}
+        />
+      </Tooltip>
       <Dialog open={open} onOpenChange={(_event, data) => setOpen(data.open)}>
         <DialogSurface className={styles.dialog}>
           <DialogBody>
@@ -60,13 +64,15 @@ const PivotItemsDialog = () => {
             </DialogContent>
           </DialogBody>
           <DialogTrigger disableButtonEnhancement>
-            <Button
-              appearance='transparent'
-              icon={<DismissRegular />}
-              aria-label='Collapse'
-              className={styles.dismissBtn}
-              onClick={() => setOpen(false)}
-            />
+            <Tooltip relationship='label' content={translateMessage('Close')}>
+              <Button
+                appearance='transparent'
+                icon={<DismissRegular />}
+                aria-label={translateMessage('Close')}
+                className={styles.dismissBtn}
+                onClick={() => setOpen(false)}
+              />
+            </Tooltip>
           </DialogTrigger>
         </DialogSurface>
       </Dialog>

src/app/views/query-response/pivot-items/pivot-item.tsx

@@ -50,6 +50,9 @@ const useStyles = makeStyles({
     height: '100%',
     overflow: 'hidden'
   },
+  tabList:{
+    padding: '5px 5px'
+  },
   tabContent: {
     flex: 1,
     display: 'flex',
@@ -137,7 +140,7 @@ export const GetPivotItems = () => {
           </TabList>
         </Overflow>
       ) : (
-        <TabList selectedValue={selectedValue} onTabSelect={onTabSelect} size='small'>
+        <TabList selectedValue={selectedValue} onTabSelect={onTabSelect} size='small' className={styles.tabList}>
           {tabs.map((tab) => (
             <Tab key={tab.id} value={tab.id} icon={tab.icon}>
               {tab.name}

src/app/views/query-response/response/ResponseDisplay.tsx

@@ -23,7 +23,7 @@ const ResponseDisplay = (props: ResponseDisplayProps) => {
   default:
     if (isImageResponse(contentType) && typeof body !== 'string') {
       return (
-        <Image styles={{ padding: '10px', height: '300px', width: '300px' }} body={body} alt='profile image' />
+        <Image styles={{ padding: '10px', height: '240px', width: '240px' }} body={body} alt='profile image' />
       );
     }
     return (