Revert "feat: fluent v9 upgrades feature branch (#3428)" (#3757)

This reverts commit 31f8fab.

Author: Mnickii

.vscode/settings.json

@@ -23,7 +23,6 @@
     "package.json": "package-lock.json, .npmrc"
   },
   "cSpell.words": [
-    "fluentui",
-    "noreferrer"
+    "fluentui"
   ],
 }

package-lock.json

@@ -8,13 +8,13 @@
                 "@azure/msal-browser": "4.5.1",
                 "@babel/core": "7.26.10",
                 "@babel/runtime": "7.26.10",
-                "@fluentui-contrib/react-resize-handle": "0.6.1",
+                "@fluentui/react": "8.122.9",
                 "@fluentui/react-components": "9.60.0",
                 "@fluentui/react-icons": "2.0.274",
+                "@fluentui/react-icons-mdl2": "1.3.83",
                 "@microsoft/applicationinsights-react-js": "17.3.4",
                 "@microsoft/applicationinsights-web": "3.3.6",
                 "@microsoft/microsoft-graph-client": "3.0.7",
-                "@microsoft/microsoft-graph-types": "2.40.0",
                 "@monaco-editor/react": "4.7.0",
                 "@ms-ofb/officebrowserfeedbacknpm": "file:packages/officebrowserfeedbacknpm-1.6.6.tgz",
                 "@reduxjs/toolkit": "2.6.0",
@@ -48,6 +48,7 @@
                 "postcss-flexbugs-fixes": "5.0.2",
                 "postcss-loader": "8.1.1",
                 "postcss-preset-env": "10.1.1",
+                "re-resizable": "6.11.2",
                 "react": "18.3.0",
                 "react-app-polyfill": "3.0.0",
                 "react-dom": "18.3.0",
@@ -68,8 +69,7 @@
                 "start": "node scripts/start.js",
                 "build": "node scripts/build.js && node versioned-build.js",
                 "test": "node scripts/test.js --no-watch --testPathIgnorePatterns=src/tests/ui src/tests/accessibility /scripts/ --max-old-space-size=8192",
-                "lint": "eslint . \"**/*.{js,ts,tsx}\" --quiet",
-                "lint-fix": "eslint . \"**/*.{js,ts,tsx}\" --quiet --fix",
+                "lint": "eslint . \"**/*.{js,ts,tsx}\"",
                 "prebuild:prod": "standard-version",
                 "build:prod": "npm run build",
                 "bump": "standard-version --skip.tag --skip.changelog",

package.json

@@ -6,7 +6,6 @@ import { ApplicationState, store } from '../../../../src/store/index';
 import { fetchAutoCompleteOptions } from '../../../app/services/slices/autocomplete.slice';
 import { suggestions } from '../../../modules/suggestions/suggestions';
 import { Mode } from '../../../types/enums';
-import { SnippetError } from '../../../types/snippets';
 import { AUTOCOMPLETE_FETCH_ERROR, AUTOCOMPLETE_FETCH_PENDING, AUTOCOMPLETE_FETCH_SUCCESS } from '../redux-constants';
 import { mockThunkMiddleware } from './mockThunkMiddleware';
 
@@ -62,13 +61,13 @@ const mockState: ApplicationState = {
     isLoadingData: false,
     response: {
       body: undefined,
-      headers: {}
+      headers: undefined
     }
   },
   snippets: {
     pending: false,
-    data: {},
-    error: {} as SnippetError
+    data: [],
+    error: null
   },
   responseAreaExpanded: false,
   dimensions: {

src/app/services/actions/autocomplete-action-creators.spec.ts

@@ -11,7 +11,6 @@ import {
 import { authenticationWrapper } from '../../../modules/authentication';
 import { ApplicationState, store } from '../../../store/index';
 import { Mode } from '../../../types/enums';
-import { SnippetError } from '../../../types/snippets';
 import { getPermissionsScopeType } from '../../utils/getPermissionsScopeType';
 import { translateMessage } from '../../utils/translate-messages';
 import { ACCOUNT_TYPE } from '../graph-constants';
@@ -83,13 +82,13 @@ const mockState: ApplicationState = {
     isLoadingData: false,
     response: {
       body: undefined,
-      headers: {}
+      headers: undefined
     }
   },
   snippets: {
     pending: false,
-    data: {},
-    error: {} as SnippetError
+    data: [],
+    error: null
   },
   responseAreaExpanded: false,
   dimensions: {
@@ -302,7 +301,7 @@ describe('Permissions action creators', () => {
             statusText: translateMessage('Revoking'),
             status: translateMessage('Please wait while we revoke this permission'),
             ok: false,
-            messageBarType: 'info'
+            messageType: 0
           }
         }
       ]
@@ -358,7 +357,7 @@ describe('Permissions action creators', () => {
             statusText: translateMessage('Revoking '),
             status: translateMessage('Please wait while we revoke this permission'),
             ok: false,
-            messageBarType: 'info'
+            messageType: 0
           }
         }
       ]
@@ -417,7 +416,7 @@ describe('Permissions action creators', () => {
             statusText: translateMessage('Revoking'),
             status: translateMessage('Please wait while we revoke this permission'),
             ok: false,
-            messageBarType: 'info'
+            messageType: 0
           }
         }
       ]

src/app/services/actions/permissions-action-creator.spec.ts

@@ -1,13 +1,11 @@
-import { User } from '@microsoft/microsoft-graph-types';
 import { componentNames, eventTypes, telemetry } from '../../../telemetry';
 import { IOAuthGrantPayload, IPermissionGrant } from '../../../types/permissions';
 import { IUser } from '../../../types/profile';
-import { CustomBody, ResponseValue } from '../../../types/query-response';
 import { IQuery } from '../../../types/query-runner';
 import { RevokeScopesError } from '../../utils/error-utils/RevokeScopesError';
 import { exponentialFetchRetry } from '../../utils/fetch-retry-handler';
 import { GRAPH_URL } from '../graph-constants';
-import { parseResponse, makeGraphRequest as queryMakeGraphRequest } from './query-action-creator-util';
+import { makeGraphRequest, parseResponse } from './query-action-creator-util';
 
 interface IPreliminaryChecksObject {
   defaultUserScopes: string[];
@@ -109,9 +107,7 @@ export class RevokePermissionsUtil {
     const tenantAdminQuery = { ...genericQuery };
     tenantAdminQuery.sampleUrl = `${GRAPH_URL}/v1.0/me/memberOf`;
     const response = await RevokePermissionsUtil.makeExponentialFetch([], tenantAdminQuery);
-    const value = (response as CustomBody).value
-    const isAdmin = value ? value.some((v: Partial<User>)=>v?.displayName === 'Global Administrator') : false
-    return isAdmin
+    return response ? response.value.some((value: any) => value.displayName === 'Global Administrator') : false
   }
 
   public async getUserPermissionChecks(preliminaryObject: PartialCheckObject): Promise<{
@@ -195,7 +191,7 @@ export class RevokePermissionsUtil {
     genericQuery.sampleUrl = `${GRAPH_URL}/v1.0/oauth2PermissionGrants?$filter=clientId eq '${servicePrincipalAppId}'`;
     genericQuery.sampleHeaders = [{ name: 'ConsistencyLevel', value: 'eventual' }];
     const oAuthGrant = await RevokePermissionsUtil.makeExponentialFetch(scopes, genericQuery);
-    return oAuthGrant as IOAuthGrantPayload;
+    return oAuthGrant;
   }
 
   public permissionToRevokeInGrant(permissionsGrant: IPermissionGrant, allPrincipalGrant: IPermissionGrant,
@@ -211,8 +207,7 @@ export class RevokePermissionsUtil {
     const currentAppId = process.env.REACT_APP_CLIENT_ID;
     genericQuery.sampleUrl = `${GRAPH_URL}/v1.0/servicePrincipals?$filter=appId eq '${currentAppId}'`;
     const response = await this.makeGraphRequest(scopes, genericQuery);
-    const value = (response as CustomBody)?.value
-    return value ? value[0]?.id ?? '' : ''
+    return response ? response.value[0].id : '';
   }
 
   private async revokePermission(permissionGrantId: string, newScopes: string): Promise<boolean> {
@@ -224,24 +219,32 @@ export class RevokePermissionsUtil {
     patchQuery.sampleUrl = `${GRAPH_URL}/v1.0/oauth2PermissionGrants/${permissionGrantId}`;
     genericQuery.sampleHeaders = [{ name: 'ConsistencyLevel', value: 'eventual' }];
     patchQuery.selectedVerb = 'PATCH';
-
-    const response = await RevokePermissionsUtil.makeGraphRequest([], patchQuery);
-    const error  = (response as CustomBody).error;
-    if (error) {
-      return false;
+    // eslint-disable-next-line no-useless-catch
+    try {
+      const response = await RevokePermissionsUtil.makeGraphRequest([], patchQuery);
+      const { error } = response;
+      if (error) {
+        return false;
+      }
+      return true;
+    }
+    catch (error: any) {
+      throw error;
     }
-    return true;
   }
 
-  private static async makeExponentialFetch(
-    scopes: string[], query: IQuery, condition?: (args?: unknown) => Promise<boolean>) {
-    const response = await exponentialFetchRetry(() => queryMakeGraphRequest(scopes)(query), 8, 100, condition);
-    return parseResponse(response as Response);
+  private static async makeExponentialFetch(scopes: string[], query: IQuery, condition?:
+  (args?: any) => Promise<boolean>) {
+    const respHeaders: any = {};
+    const response = await exponentialFetchRetry(() => makeGraphRequest(scopes)(query),
+      8, 100, condition);
+    return parseResponse(response, respHeaders);
   }
 
   private static async makeGraphRequest(scopes: string[], query: IQuery) {
-    const response = await queryMakeGraphRequest(scopes)(query);
-    return parseResponse(response as Response);
+    const respHeaders: any = {};
+    const response = await makeGraphRequest(scopes)(query);
+    return parseResponse(response, respHeaders);
   }
 
   private trackRevokeConsentEvent = (status: string, permissionObject: any) => {

src/app/services/actions/permissions-action-creator.util.ts

@@ -103,9 +103,10 @@ export async function getProfileImage(): Promise<string> {
 
 export async function getProfileResponse(): Promise<IProfileResponse> {
   const scopes = DEFAULT_USER_SCOPES.split(' ');
+  const respHeaders: Record<string, string> = {};
 
   const response = await makeGraphRequest(scopes)(query);
-  const userInfo = await parseResponse(response as Response);
+  const userInfo = await parseResponse(response, respHeaders);
   return {
     userInfo,
     response

src/app/services/actions/profile-actions.ts

@@ -10,12 +10,11 @@ import {
 
 import { authenticationWrapper } from '../../../modules/authentication';
 import { ApplicationState } from '../../../store';
-import { ResponseBody } from '../../../types/query-response';
+import { ContentType } from '../../../types/enums';
 import { IQuery } from '../../../types/query-runner';
 import { IRequestOptions } from '../../../types/request';
 import { IStatus } from '../../../types/status';
 import { ClientError } from '../../utils/error-utils/ClientError';
-import { getHeaders } from '../../utils/http-methods.utils';
 import { encodeHashCharacters } from '../../utils/query-url-sanitization';
 import { translateMessage } from '../../utils/translate-messages';
 import { authProvider, GraphClient } from '../graph-client';
@@ -37,7 +36,7 @@ export async function anonymousRequest(
 export function createAnonymousRequest(query: IQuery, proxyUrl: string, queryRunnerStatus: IStatus) {
   const escapedUrl = encodeURIComponent(query.sampleUrl);
   const graphUrl = `${proxyUrl}?url=${escapedUrl}`;
-  const sampleHeaders: Record<string, string> = {};
+  const sampleHeaders: any = {};
 
   if (query.sampleHeaders && query.sampleHeaders.length > 0) {
     query.sampleHeaders.forEach((header) => {
@@ -107,30 +106,30 @@ function createAuthenticatedRequest(
 
 export function makeGraphRequest(scopes: string[]) {
   return async (query: IQuery) => {
-    let response: ResponseBody;
+    let response;
 
     const graphRequest: GraphRequest = createAuthenticatedRequest(scopes, query);
 
     switch (query.selectedVerb) {
     case 'GET':
-      response = await graphRequest.get() as ResponseBody;
+      response = await graphRequest.get();
       break;
     case 'POST':
-      response = await graphRequest.post(query.sampleBody) as ResponseBody;
+      response = await graphRequest.post(query.sampleBody);
       break;
     case 'PUT':
-      response = await graphRequest.put(query.sampleBody) as ResponseBody;
+      response = await graphRequest.put(query.sampleBody);
       break;
     case 'PATCH':
-      response = await graphRequest.patch(query.sampleBody) as ResponseBody;
+      response = await graphRequest.patch(query.sampleBody);
       break;
     case 'DELETE':
-      response = await graphRequest.delete() as ResponseBody;
+      response = await graphRequest.delete();
       break;
     default:
       return;
     }
-    return Promise.resolve(response) as ResponseBody;
+    return Promise.resolve(response);
   };
 }
 
@@ -147,26 +146,32 @@ export function isBetaURLResponse(json: any) {
   return !!json?.account?.[0]?.source?.type?.[0];
 }
 
-export function getContentType(headers: Record<string, string>): string {
-  const contentTypeHeader = Object.keys(headers).find(header => header.toLowerCase() === 'content-type');
-  let contentType = contentTypeHeader ? headers[contentTypeHeader] : '';
-  /* Example: application/json;odata.metadata=minimal;odata.streaming=true;IEEE754Compatible=false;charset=utf-8
-   * Take the first option after splitting since it is the only value useful in the description of the content
-  */
-  if (contentType) {
-    const splitContentTypes = contentType.split(';');
-    contentType = (splitContentTypes.length > 0) ? splitContentTypes[0].toLowerCase() : contentType;
+export function getContentType(headers: any) {
+  let contentType = null;
+
+  if (headers) {
+    let contentTypes = headers['content-type'];
+    if (headers instanceof Headers) {
+      contentTypes = headers.get('content-type');
+    }
+    if (contentTypes) {
+      /* Example: application/json;odata.metadata=minimal;odata.streaming=true;IEEE754Compatible=false;charset=utf-8
+       * Take the first option after splitting since it is the only value useful in the description of the content
+       */
+      const splitContentTypes = contentTypes.split(';');
+      if (splitContentTypes.length > 0) {
+        contentType = splitContentTypes[0].toLowerCase();
+      }
+    }
   }
-  return contentType.toLowerCase();
+  return contentType;
 }
 
-export function isFileResponse(headers: Record<string, string>) {
-  const contentDisposition: string |  null = (headers instanceof Headers) ?
-    headers.get('content-disposition') : headers['content-disposition'];
-
+export function isFileResponse(headers: any) {
+  const contentDisposition = headers['content-disposition'];
   if (contentDisposition) {
     const directives = contentDisposition.split(';');
-    if (directives.includes('attachment')) {
+    if (directives.contains('attachment')) {
       return true;
     }
   }
@@ -186,40 +191,48 @@ export function isFileResponse(headers: Record<string, string>) {
   return false;
 }
 
-export async function generateResponseDownloadUrl(response: Response) {
-  const headers = getHeaders(response)
+export async function generateResponseDownloadUrl(
+  response: Response,
+  respHeaders: any
+) {
   try {
-    const fileContents = await parseResponse(response);
-    const contentType = getContentType(headers);
+    const fileContents = await parseResponse(response, respHeaders);
+    const contentType = getContentType(respHeaders);
     if (fileContents) {
       const buffer = await response.arrayBuffer();
       const blob = new Blob([buffer], { type: contentType });
       return URL.createObjectURL(blob);
     }
-  } catch {
+  } catch (error) {
     return null;
   }
 }
 
 async function tryParseJson(textValue: string) {
   try {
     return JSON.parse(textValue);
-  } catch {
+  } catch (error) {
     return textValue;
   }
 }
 
-export const parseResponse = (response: ResponseBody): Promise<ResponseBody> => {
-  if (response instanceof Response && response.headers) {
-    const headers = getHeaders(response)
-    const contentType = getContentType(headers);
+export function parseResponse(
+  response: Response,
+  respHeaders: { [key: string]: string } = {}
+): Promise<any> {
+  if (response && response.headers) {
+    response.headers.forEach((val: string, key: string) => {
+      respHeaders[key] = val;
+    });
+
+    const contentType = getContentType(response.headers);
     switch (contentType) {
-    case 'application/json':
+    case ContentType.Json:
       return response.text().then(tryParseJson);
-    case 'application/xml':
-    case 'text/html':
-    case 'text/csv':
-    case 'text/plain':
+    case ContentType.XML:
+    case ContentType.HTML:
+    case ContentType.TextCsv:
+    case ContentType.TextPlain:
       return response.text();
 
     default: