feat: migrate response section to fluent UI v9 (#3473)

* feat: add new components for Monaco and response display in v9

* feat: implement Monaco v9 editor and enhance response display functionality

* feat: implement ResponseV9 component and update pivot items to use it

* feat: add OneNote and PDF content types, update response headers handling, and enhance response display components

* feat: add @microsoft/microsoft-graph-types dependency, update response handling, and improve type safety in graph request functions

* feat: update graph response handling to initialize headers and remove unused response headers in history item

* Use a Record to allow serialization of headers

* refactor: update response handling to use ResponseBody type and improve header processing

* feat: add CopyButtonV9 and ResponseHeadersV9 components, update component registry

* feat: introduce SnippetV9 and CopyButtonV9 components, update related imports and types

* feat: enhance MonacoV9 and SnippetsV9 components with extra information display and improved styling

* feat: add GraphToolkitV9 component and integrate it into pivot items

* refactor: remove unused styledGraphToolkit definition from GraphToolkitV9 component

* refactor: update adaptive cards lookup and improve error handling in adaptive card utilities

* refactor: clean up imports and reorganize state selection in AdaptiveCardV9 component

* WIP: back from leave

* refactor: Update imports and clean up code formatting in QueryResponse and App components

* refactor: Simplify QueryResponse component by returning GetPivotItems directly

* refactor: Restore GetPivotItems usage and reintroduce QueryResponse layout

* refactor: Introduce QueryResponseV9 component and update App to use it

* fix: update Permissions component props type to any

* refactor: improve layout and styling in QueryResponse and Monaco components

* feat: enhance PivotItemsDialog with new icons and improved styling

* refactor: enhance QueryResponseV9 styling with borders and padding

* refactor: clean up code formatting and improve layout in App and QueryResponse components

* add sidebar and main content resizing

* refactor: enhance layout styles in Layout component with improved spacing and sidebar styling

* refactor: improve layout and styling in Layout and QueryRunner components with enhanced responsiveness and state management

* refactor: update height styling in QueryResponseV9 and RequestV9 components for better layout consistency

* refactor: enhance layout and styling in Layout, QueryResponseV9, and RequestV9 components for improved structure and visual consistency

* refactor: update MonacoV9 component styling and remove unnecessary height prop in RequestBody for improved layout consistency

* refactor: improve layout and styling in response components for better visual consistency

* refactor: update MonacoV9 component to adjust editor height and improve code formatting

* refactor: reorganize imports and improve access token display in AuthV9 component

* refactor: adjust MonacoV9 component height handling and improve code readability in SnippetsV9

* refactor: enhance MonacoV9 component with theme support and clean up Layout component imports

* refactor: improve styling and structure in GraphToolkitV9 component for better readability and maintainability

* feat: update response layout and enhance message bar styling

* feat: implement layout resize handler and enhance sidebar functionality

* feat: enhance layout with sidebar resizing functionality and improved styles

* feat: refine sidebar behavior and layout styles for improved usability

* WIP: clean up App.tsx

* refactor: simplify App.tsx by removing unused ParsedMessageCode interface and commented-out code

* Provisional try-it view

* Handle mobile phone view

* Clean up App.tsx file

* Fix linting issues

* refactor: improve variable naming for clarity in ResourceExplorer component

* refactor: update ResourceExplorer styles and improve SidebarV9 component structure

* refactor: remove duplicate state declaration for showSidebarValue in SidebarV9 component

* refactor: adjust sidebar size to use percentage and improve responsiveness

* refactor: adjust sidebar size from 25% to 17% for improved layout responsiveness

* refactor: adjust dialog maxWidth to 40% and center content for improved layout

* refactor: set maxHeight to 50% in layout styles and adjust MonacoV9 height to 25rem for improved responsiveness

* refactor: set height of MonacoV9 to 25rem for improved layout

* refactor: remove unused height calculations and dispatch logic for cleaner code

* refactor: enhance snippet layout with styled containers and improved copy button positioning

* refactor: update AuthV9 styles for better text handling and remove unused height logic

* refactor: adjust layout heights and overflow properties for improved responsiveness

* refactor: replace section elements with divs in SidebarV9 and ResourceExplorer for consistency

* refactor: update sidebar flex basis for improved layout responsiveness

* refactor: update header format in iframe-message-parser tests for consistency

* refactor: remove unused main.go and Handle.tsx files to clean up the codebase

* refactor: extract layout styles into separate LayoutStyles.tsx file for better organization

* refactor: consolidate imports in LayoutStyles.tsx for improved clarity

* refactor: export SIDEBAR_SIZE_CSS_VAR from LayoutStyles.tsx for better accessibility

* feat: adjust layout heights and improve component structure

* fix: correct spelling of 'noreferrer' in rel attributes

* feat: enhance ResponseMessagesV9 component structure with MessageBarBody

* refactor: streamline QueryRunner and QueryInput components for improved readability and layout

* fix: update border colors in layout and snippet components for consistency

* feat: enhance QueryResponseV9 component with dismiss button and layout adjustments

* feat: restructure QueryResponseV9 component and adjust ResponseDisplayV9 height for improved layout

* add max-width to fill entire space

* Update typo

Author: musale

.vscode/settings.json

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

package-lock.json

@@ -8,13 +8,15 @@
                 "@azure/msal-browser": "3.26.1",
                 "@babel/core": "7.26.0",
                 "@babel/runtime": "7.26.0",
+                "@fluentui-contrib/react-resize-handle": "0.6.1",
                 "@fluentui/react-components": "9.56.8",
                 "@fluentui/react-icons": "2.0.270",
                 "@fluentui/react": "8.122.4",
                 "@fluentui/react-icons-mdl2": "1.3.80",
                 "@microsoft/applicationinsights-react-js": "17.3.4",
                 "@microsoft/applicationinsights-web": "3.3.4",
                 "@microsoft/microsoft-graph-client": "3.0.7",
+                "@microsoft/microsoft-graph-types": "2.40.0",
                 "@monaco-editor/react": "4.6.0",
                 "@ms-ofb/officebrowserfeedbacknpm": "file:packages/officebrowserfeedbacknpm-1.6.6.tgz",
                 "@reduxjs/toolkit": "2.4.0",
@@ -71,7 +73,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}\"",
+                "lint": "eslint . \"**/*.{js,ts,tsx}\" --quiet",
                 "prebuild:prod": "standard-version",
                 "build:prod": "npm run build",
                 "bump": "standard-version --skip.tag --skip.changelog",

package.json

@@ -66,6 +66,7 @@
       margin: 0;
       padding: 0;
       border: 0;
+      overflow: hidden;
     }
 
     @keyframes lds-ring {

public/index.html

@@ -6,6 +6,7 @@ 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';
 
@@ -61,13 +62,13 @@ const mockState: ApplicationState = {
     isLoadingData: false,
     response: {
       body: undefined,
-      headers: undefined
+      headers: {}
     }
   },
   snippets: {
     pending: false,
-    data: [],
-    error: null
+    data: {},
+    error: {} as SnippetError
   },
   responseAreaExpanded: false,
   dimensions: {

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

@@ -11,6 +11,7 @@ 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';
@@ -82,13 +83,13 @@ const mockState: ApplicationState = {
     isLoadingData: false,
     response: {
       body: undefined,
-      headers: undefined
+      headers: {}
     }
   },
   snippets: {
     pending: false,
-    data: [],
-    error: null
+    data: {},
+    error: {} as SnippetError
   },
   responseAreaExpanded: false,
   dimensions: {

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

@@ -1,11 +1,13 @@
+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 { makeGraphRequest, parseResponse } from './query-action-creator-util';
+import { parseResponse, makeGraphRequest as queryMakeGraphRequest } from './query-action-creator-util';
 
 interface IPreliminaryChecksObject {
   defaultUserScopes: string[];
@@ -107,7 +109,9 @@ export class RevokePermissionsUtil {
     const tenantAdminQuery = { ...genericQuery };
     tenantAdminQuery.sampleUrl = `${GRAPH_URL}/v1.0/me/memberOf`;
     const response = await RevokePermissionsUtil.makeExponentialFetch([], tenantAdminQuery);
-    return response ? response.value.some((value: any) => value.displayName === 'Global Administrator') : false
+    const value = (response as CustomBody).value
+    const isAdmin = value ? value.some((v: Partial<User>)=>v?.displayName === 'Global Administrator') : false
+    return isAdmin
   }
 
   public async getUserPermissionChecks(preliminaryObject: PartialCheckObject): Promise<{
@@ -191,7 +195,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;
+    return oAuthGrant as IOAuthGrantPayload;
   }
 
   public permissionToRevokeInGrant(permissionsGrant: IPermissionGrant, allPrincipalGrant: IPermissionGrant,
@@ -207,7 +211,8 @@ 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);
-    return response ? response.value[0].id : '';
+    const value = (response as CustomBody)?.value
+    return value ? value[0]?.id ?? '' : ''
   }
 
   private async revokePermission(permissionGrantId: string, newScopes: string): Promise<boolean> {
@@ -219,32 +224,24 @@ export class RevokePermissionsUtil {
     patchQuery.sampleUrl = `${GRAPH_URL}/v1.0/oauth2PermissionGrants/${permissionGrantId}`;
     genericQuery.sampleHeaders = [{ name: 'ConsistencyLevel', value: 'eventual' }];
     patchQuery.selectedVerb = 'PATCH';
-    // 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;
+
+    const response = await RevokePermissionsUtil.makeGraphRequest([], patchQuery);
+    const error  = (response as CustomBody).error;
+    if (error) {
+      return false;
     }
+    return true;
   }
 
-  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 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 makeGraphRequest(scopes: string[], query: IQuery) {
-    const respHeaders: any = {};
-    const response = await makeGraphRequest(scopes)(query);
-    return parseResponse(response, respHeaders);
+    const response = await queryMakeGraphRequest(scopes)(query);
+    return parseResponse(response as Response);
   }
 
   private trackRevokeConsentEvent = (status: string, permissionObject: any) => {

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

@@ -103,10 +103,9 @@ 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, respHeaders);
+  const userInfo = await parseResponse(response as Response);
   return {
     userInfo,
     response