fix: regressions in component functionality (#3633)

* remove v8 IGroup

* fix query version, edit collections and cleanup

* fix history item

* fix history errors

* fix text when no image

Author: Mnickii

src/app/services/slices/graph-response.slice.ts

@@ -69,7 +69,7 @@ export const runQuery = createAsyncThunk(
 
       const historyItem = generateHistoryItem(
         status,
-        {},
+        result.headers,
         query,
         createdAt,
         result,
@@ -116,19 +116,17 @@ function generateHistoryItem(
   result: Result,
   duration: number
 ): IHistoryItem {
-  let response: Result = { body: {}, headers: {} };
-  const contentType_ = respHeaders['content-type'];
+  let response = { ...result };
+  const responseHeaders = { ...respHeaders };
+  const contentType = respHeaders['content-type'];
 
-  if (isImageResponse(contentType_)) {
-    response = { ...result, body: 'Run the query to view the image' };
-    Object.assign(respHeaders, { 'content-type': ContentType.Json });
+  if (isImageResponse(contentType)) {
+    response = { ...response, body: 'Run the query to view the image' };
+    responseHeaders['content-type'] = ContentType.Json;
   }
 
   if (isFileResponse(respHeaders)) {
-    response = {
-      ...result,
-      body: 'Run the query to generate file download URL'
-    };
+    response = { ...response, body: 'Run the query to generate file download URL' };
   }
 
   const historyItem: IHistoryItem = {
@@ -142,7 +140,7 @@ function generateHistoryItem(
     status: status.status as number,
     statusText: status.statusText,
     duration,
-    result: response.body as object
+    result: response.body as Object
   };
 
   historyCache.writeHistoryData(historyItem);

src/app/utils/generate-groups.ts

@@ -1,4 +1,11 @@
-import { IGroup } from '@fluentui/react';
+export interface IGroup {
+  key: string;
+  name: string;
+  startIndex: number;
+  count: number;
+  isCollapsed: boolean;
+  ariaLabel: string;
+}
 
 export function generateGroupsFromList(list: any[], property: string) : IGroup[] {
   const map = new Map();

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

@@ -1,36 +1,49 @@
-import { Link, MessageBar, MessageBarType } from '@fluentui/react';
+import { Link, MessageBar, MessageBarBody, makeStyles} from '@fluentui/react-components';
 
 import { getLoginType } from '../../../modules/authentication/authUtils';
 import { LoginType } from '../../../types/enums';
 import { translateMessage } from '../../utils/translate-messages';
 
-export function headerMessaging(query: string): React.ReactNode {
+const useHeaderStyles = makeStyles({
+  root: {
+    marginBottom: '8',
+    paddingLeft: '10'
+  }
+});
+
+export const headerMessaging = (query: string): React.ReactNode => {
   const loginType = getLoginType();
+  const headerStyles = useHeaderStyles();
 
   return (
-    <div style={{ marginBottom: 8, paddingLeft: 10 }}>
-      {loginType === LoginType.Popup && <>
-        <MessageBar messageBarType={MessageBarType.info} isMultiline={true}>
-          <p>
+    <div className={headerStyles.root}>
+      {loginType === LoginType.Popup &&
+        <MessageBar intent={'info'}>
+          <MessageBarBody>
             {translateMessage('To try the full features')},
-            <Link tabIndex={0} href={query} target='_blank' rel='noopener noreferrer' underline>
+            <Link
+              tabIndex={0}
+              inline
+              href={query}
+              target='_blank' rel='noopener noreferrer'>
               {translateMessage('full Graph Explorer')}.
             </Link>
-          </p>
-          <p>
             {translateMessage('running the query')}.
-          </p>
+          </MessageBarBody>
         </MessageBar>
-
-      </>}
-      {loginType === LoginType.Redirect && <MessageBar messageBarType={MessageBarType.warning} isMultiline={true}>
-        <p>
+      }
+      {loginType === LoginType.Redirect && <MessageBar intent={'warning'}>
+        <MessageBarBody>
           {translateMessage('To try operations other than GET')},
-
-          <Link tabIndex={0} href={query} target='_blank' rel='noopener noreferrer' underline>
+          <Link
+            tabIndex={0}
+            href={query}
+            target='_blank'
+            rel='noopener noreferrer'
+            inline>
             {translateMessage('sign in')}.
           </Link>
-        </p>
+        </MessageBarBody>
       </MessageBar>}
     </div>);
 }

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

@@ -1,12 +1,19 @@
-import { MessageBar, MessageBarType } from '@fluentui/react';
-
+import { MessageBar, MessageBarBody, MessageBarActions, MessageBarIntent, Button } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
 import { useAppDispatch, useAppSelector } from '../../../store';
 import { IQuery } from '../../../types/query-runner';
 import { clearQueryStatus } from '../../services/slices/query-status.slice';
 import { setSampleQuery } from '../../services/slices/sample-query.slice';
 import { translateMessage } from '../../utils/translate-messages';
 import MessageDisplay from '../common/message-display/MessageDisplay';
 
+const intentMap: { [key: string]: MessageBarIntent } = {
+  'info': 'info',
+  'error': 'error',
+  'warning': 'warning',
+  'success': 'success'
+};
+
 const StatusMessages = () => {
   const dispatch = useAppDispatch();
   const queryRunnerStatus = useAppSelector((state)=> state.queryRunnerStatus);
@@ -21,31 +28,37 @@ const StatusMessages = () => {
   }
 
   if (queryRunnerStatus) {
-    const { messageBarType, statusText, status, duration, hint } = queryRunnerStatus; // remove when cleaning up
-
-    const messageBarTypeKey = messageBarType as keyof typeof MessageBarType;
-
-    return <MessageBar messageBarType={MessageBarType[messageBarTypeKey]}
-      isMultiline={true}
-      onDismiss={() => dispatch(clearQueryStatus())}
-      dismissButtonAriaLabel='Close'
-      aria-live={'assertive'}>
-      <MessageDisplay message={`**${statusText} - **${status.toString()}`} onSetQuery={setQuery} />
-
-      {duration && <>
-        {` - ${duration} ${translateMessage('milliseconds')}`}
-      </>}
+    const { messageBarType, statusText, status, duration, hint } = queryRunnerStatus;  return <MessageBar
+      intent={intentMap[messageBarType]}
+      politeness='assertive'
+    >
+      <MessageBarBody>
+        <MessageDisplay message={`**${statusText} - **${status.toString()}`} onSetQuery={setQuery} />
 
-      {status === 403 && <>.
-        {translateMessage('consent to scopes')}
-        <span style={{ fontWeight: 600 }}>
-          {translateMessage('modify permissions')}
-        </span>
-        {translateMessage('tab')}
-      </>}
+        {duration && <>
+          {` - ${duration} ${translateMessage('milliseconds')}`}
+        </>}
 
-      {hint && <div>{hint}</div>}
+        {status === 403 && <>
+          {translateMessage('consent to scopes')}
+          <span style={{ fontWeight: 600 }}>
+            {translateMessage('modify permissions')}
+          </span>
+          {translateMessage('tab')}
+        </>}
 
+        {hint && <div>{hint}</div>}
+      </MessageBarBody>
+      <MessageBarActions
+        containerAction={
+          <Button
+            onClick={() => dispatch(clearQueryStatus())}
+            aria-label="dismiss"
+            appearance="transparent"
+            icon={<DismissRegular />}
+          />
+        }
+      />
     </MessageBar>;
   }
   return <div />;

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

@@ -11,7 +11,7 @@ const useTermsStyles = makeStyles({
   }
 });
 
-const TermsOfUseMessageV9 = () => {
+const TermsOfUseMessage = () => {
 
   const  termsOfUse = useAppSelector((state) => state.termsOfUse);
   const termsStyles = useTermsStyles();
@@ -58,4 +58,4 @@ const TermsOfUseMessageV9 = () => {
   return <div />;
 }
 
-export default TermsOfUseMessageV9;
+export default TermsOfUseMessage;

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

@@ -1,7 +1,7 @@
-import StatusMessagesV9 from './StatusMessagesV9';
-import TermsOfUseMessageV9 from './TermsOfUseMessageV9';
+import StatusMessages from './StatusMessages';
+import TermsOfUseMessage from './TermsOfUseMessage';
 
 export {
-  StatusMessagesV9,
-  TermsOfUseMessageV9
+  StatusMessages,
+  TermsOfUseMessage
 };

…ews/app-sections/TermsOfUseMessageV9.tsx …views/app-sections/TermsOfUseMessage.tsxsrc/app/views/app-sections/TermsOfUseMessageV9.tsx renamed to src/app/views/app-sections/TermsOfUseMessage.tsx src/app/views/app-sections/TermsOfUseMessageV9.tsx renamed to src/app/views/app-sections/TermsOfUseMessage.tsx

@@ -25,7 +25,7 @@ export const useNotificationStyles = makeStyles({
   body: {
     width: '100%',
     '@media (min-width: 720px)': {
-      width: '70%'
+      width: '100%'
     }
   }
 });

src/app/views/app-sections/index.ts

@@ -2,7 +2,7 @@ import LazyResponseHeadersV9 from '../../../query-response/headers/ResponseHeade
 import LazySnippetsV9 from '../../../query-response/snippets/SnippetsV9';
 import { default as LazyCopyButtonV9 } from '../../copy-button/CopyButtonV9';
 import LazySpecificPermissions from  '../../../query-runner/request/permissions';
-import LazyStatusMessages from  '../../../app-sections/StatusMessagesV9';
+import LazyStatusMessages from  '../../../app-sections/StatusMessages';
 import LazyResponseHeaders from  '../../../query-response/headers/ResponseHeaders';
 import LazyGraphToolkit from  '../../../query-response/graph-toolkit/GraphToolkit';
 import LazyCopyButton from  '../../copy-button/CopyButtonV9';