From 2aa16281c6ba6bc86cb5a32be95cc8d9e321e7be Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Thu, 28 Nov 2024 17:50:24 +0300
Subject: [PATCH 01/20] feat: add new components for Monaco and response
 display in v9

---
 src/app/views/common/monaco/MonacoV9.tsx                     | 5 +++++
 src/app/views/query-response/response/ResponseDisplayV9.tsx  | 5 +++++
 src/app/views/query-response/response/ResponseMessagesV9.tsx | 5 +++++
 src/app/views/query-response/response/ResponseV9.tsx         | 5 +++++
 4 files changed, 20 insertions(+)
 create mode 100644 src/app/views/common/monaco/MonacoV9.tsx
 create mode 100644 src/app/views/query-response/response/ResponseDisplayV9.tsx
 create mode 100644 src/app/views/query-response/response/ResponseMessagesV9.tsx
 create mode 100644 src/app/views/query-response/response/ResponseV9.tsx

diff --git a/src/app/views/common/monaco/MonacoV9.tsx b/src/app/views/common/monaco/MonacoV9.tsx
new file mode 100644
index 000000000..45871d083
--- /dev/null
+++ b/src/app/views/common/monaco/MonacoV9.tsx
@@ -0,0 +1,5 @@
+const MonacoV9 = ()=>{
+  return <p>Monaco v9</p>
+}
+
+export { MonacoV9 }
diff --git a/src/app/views/query-response/response/ResponseDisplayV9.tsx b/src/app/views/query-response/response/ResponseDisplayV9.tsx
new file mode 100644
index 000000000..454ccdf4c
--- /dev/null
+++ b/src/app/views/query-response/response/ResponseDisplayV9.tsx
@@ -0,0 +1,5 @@
+const ResponseDisplayV9 = ()=>{
+  return <p>Response display</p>
+}
+
+export { ResponseDisplayV9 }
diff --git a/src/app/views/query-response/response/ResponseMessagesV9.tsx b/src/app/views/query-response/response/ResponseMessagesV9.tsx
new file mode 100644
index 000000000..a2e076168
--- /dev/null
+++ b/src/app/views/query-response/response/ResponseMessagesV9.tsx
@@ -0,0 +1,5 @@
+const ResponseMessagesV9 = ()=>{
+  return <p>Response Messages</p>
+}
+
+export { ResponseMessagesV9 }
diff --git a/src/app/views/query-response/response/ResponseV9.tsx b/src/app/views/query-response/response/ResponseV9.tsx
new file mode 100644
index 000000000..2ca62aca1
--- /dev/null
+++ b/src/app/views/query-response/response/ResponseV9.tsx
@@ -0,0 +1,5 @@
+const ResponseV9 = ()=>{
+  return <p>Response</p>
+}
+
+export { ResponseV9 }

From 2ec1728c833a4e6dc32f08da956af774626a6b4e Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Fri, 29 Nov 2024 14:24:04 +0300
Subject: [PATCH 02/20] feat: implement Monaco v9 editor and enhance response
 display functionality

---
 .../dimensions/dimensions-adjustment.ts       |  2 +-
 src/app/views/common/index.ts                 |  5 +-
 src/app/views/common/monaco/MonacoV9.tsx      | 51 +++++++++++++++++--
 .../views/common/monaco/util/format-xml.ts    |  4 +-
 .../response/ResponseDisplayV9.tsx            | 34 +++++++++++--
 .../query-response/response/ResponseV9.tsx    | 42 +++++++++++++--
 6 files changed, 123 insertions(+), 15 deletions(-)

diff --git a/src/app/views/common/dimensions/dimensions-adjustment.ts b/src/app/views/common/dimensions/dimensions-adjustment.ts
index a8d8ef894..97960bb16 100644
--- a/src/app/views/common/dimensions/dimensions-adjustment.ts
+++ b/src/app/views/common/dimensions/dimensions-adjustment.ts
@@ -10,7 +10,7 @@ export function convertPxToVh(px: number){
   return convertedHeight+ 'vh';
 }
 
-export function getResponseHeight(height: any, responseAreaExpanded: any) {
+export function getResponseHeight(height: string, responseAreaExpanded: boolean) {
   let responseHeight = height;
   if (responseAreaExpanded) {
     responseHeight = '90vh';
diff --git a/src/app/views/common/index.ts b/src/app/views/common/index.ts
index a9439b0bf..bbeec95f7 100644
--- a/src/app/views/common/index.ts
+++ b/src/app/views/common/index.ts
@@ -1,7 +1,8 @@
 import { Image } from './image/Image';
 import { Monaco } from './monaco/Monaco';
+import { MonacoV9 } from './monaco/MonacoV9';
 
 export {
-  Monaco,
-  Image
+  Image, Monaco, MonacoV9
 };
+
diff --git a/src/app/views/common/monaco/MonacoV9.tsx b/src/app/views/common/monaco/MonacoV9.tsx
index 45871d083..4b060d7b4 100644
--- a/src/app/views/common/monaco/MonacoV9.tsx
+++ b/src/app/views/common/monaco/MonacoV9.tsx
@@ -1,5 +1,50 @@
-const MonacoV9 = ()=>{
-  return <p>Monaco v9</p>
+import { Editor, OnChange } from '@monaco-editor/react';
+import { editor } from 'monaco-editor';
+import { formatJsonStringForAllBrowsers } from './util/format-json';
+
+interface MonacoProps {
+  body: object | string | undefined;
+  onChange?: OnChange;
+  verb?: string;
+  language?: string;
+  readOnly?: boolean;
+  height?: string;
+  extraInfoElement?: JSX.Element;
 }
 
-export { MonacoV9 }
+
+const MonacoV9 = (props: MonacoProps)=>{
+  const { onChange, language, readOnly, height} = props;
+  const editorOptions: editor.IStandaloneEditorConstructionOptions={
+    lineNumbers: 'off' as 'off',
+    automaticLayout: true,
+    minimap: { enabled: false },
+    readOnly,
+    wordWrap: 'on' as 'on',
+    folding: true,
+    foldingStrategy: 'indentation',
+    showFoldingControls: 'always',
+    renderLineHighlight: 'none',
+    scrollBeyondLastLine: true,
+    overviewRulerBorder: false,
+    wordSeparators: '"'
+  }
+  let body = props.body;
+  const editorHeight = height ? height : '300px';
+  if (body && typeof body !== 'string') {
+    body = formatJsonStringForAllBrowsers(body);
+  }
+
+
+  return <div className='monaco-editor'><Editor
+    language={language?language:'json'}
+    width='800 !important'
+    height={editorHeight}
+    value={body}
+    options={editorOptions}
+    onChange={onChange}>
+  </Editor></div>
+}
+
+export { MonacoV9 };
+
diff --git a/src/app/views/common/monaco/util/format-xml.ts b/src/app/views/common/monaco/util/format-xml.ts
index a3623accc..41d15563f 100644
--- a/src/app/views/common/monaco/util/format-xml.ts
+++ b/src/app/views/common/monaco/util/format-xml.ts
@@ -3,14 +3,14 @@
  * Formats the xml content so that it can be readable. Monaco does not have an inbuilt xml formatter
  * @returns string
  */
-export function formatXml(xml: any) {
+export function formatXml(xml: string) {
   const PADDING = ' '.repeat(2);
   const reg = /(>)(<)(\/*)/g;
   let pad = 0;
 
   xml = xml.replace(reg, '$1\r\n$2$3');
 
-  return xml.split('\r\n').map((node: any) => {
+  return xml.split('\r\n').map((node: string) => {
     let indent = 0;
     if (node.match(/.+<\/\w[^>]*>$/)) {
       indent = 0;
diff --git a/src/app/views/query-response/response/ResponseDisplayV9.tsx b/src/app/views/query-response/response/ResponseDisplayV9.tsx
index 454ccdf4c..60d46691d 100644
--- a/src/app/views/query-response/response/ResponseDisplayV9.tsx
+++ b/src/app/views/query-response/response/ResponseDisplayV9.tsx
@@ -1,5 +1,33 @@
-const ResponseDisplayV9 = ()=>{
-  return <p>Response display</p>
+import { ContentType } from '../../../../types/enums';
+import { isImageResponse } from '../../../services/actions/query-action-creator-util';
+import { Image, MonacoV9 } from '../../common';
+import { formatXml } from '../../common/monaco/util/format-xml';
+
+interface ResponseDisplayProps {
+  contentType: ContentType;
+  body: string;
+  height: number;
+}
+
+const ResponseDisplayV9 = (props: ResponseDisplayProps) => {
+  const { contentType, body, height } = props;
+
+  switch (contentType) {
+  case ContentType.XML:
+    return <MonacoV9 body={formatXml(body)} language={ContentType.HTML} readOnly={true} height={height.toString()} />;
+
+  case ContentType.HTML:
+    return <MonacoV9 body={body} language={ContentType.HTML} readOnly={true} height={height.toString()} />;
+
+  default:
+    if (isImageResponse(contentType)) {
+      return <Image
+        styles={{ padding: '10px' }}
+        body={body}
+        alt='profile image' />;
+    }
+    return <MonacoV9 body={body} readOnly={true} language={ContentType.Json} height={height.toString()} />;
+  }
 }
 
-export { ResponseDisplayV9 }
+export default ResponseDisplayV9;
diff --git a/src/app/views/query-response/response/ResponseV9.tsx b/src/app/views/query-response/response/ResponseV9.tsx
index 2ca62aca1..ff2cb58b4 100644
--- a/src/app/views/query-response/response/ResponseV9.tsx
+++ b/src/app/views/query-response/response/ResponseV9.tsx
@@ -1,5 +1,39 @@
-const ResponseV9 = ()=>{
-  return <p>Response</p>
-}
 
-export { ResponseV9 }
+
+import { useAppSelector } from '../../../../store';
+import { getContentType } from '../../../services/actions/query-action-creator-util';
+import {
+  convertVhToPx, getResponseEditorHeight,
+  getResponseHeight
+} from '../../common/dimensions/dimensions-adjustment';
+import ResponseDisplay from './ResponseDisplay';
+import { ResponseMessages } from './ResponseMessages';
+
+const Response = () => {
+  const response = useAppSelector((state) => state.dimensions.response);
+  const body = useAppSelector<string|object>((state) => state.graphResponse.response.body);
+  const headers = useAppSelector((state) => state.graphResponse.response.headers);
+  const responseAreaExpanded = useAppSelector((state) => state.responseAreaExpanded);
+
+  const defaultHeight = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 220);
+  const monacoHeight = getResponseEditorHeight(150);
+
+  const contentDownloadUrl = body?.contentDownloadUrl;
+  const throwsCorsError = body?.throwsCorsError;
+  const contentType = getContentType(headers);
+
+  return (
+    <div style={{ display: 'block' }}>
+      <ResponseMessages />
+      {!contentDownloadUrl && !throwsCorsError && headers &&
+        <ResponseDisplay
+          contentType={contentType}
+          body={body}
+          height={responseAreaExpanded ? defaultHeight : monacoHeight}
+        />}
+    </div>
+  );
+
+};
+
+export default Response;
\ No newline at end of file

From 8e40ecb1aecc007eefdeea1bb80fa43093e743a5 Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Fri, 29 Nov 2024 14:56:33 +0300
Subject: [PATCH 03/20] feat: implement ResponseV9 component and update pivot
 items to use it

---
 .../pivot-items/pivot-items.tsx               |   9 +-
 .../response/ResponseMessagesV9.tsx           | 127 +++++++++++++++++-
 .../query-response/response/ResponseV9.tsx    |  10 +-
 .../views/query-response/response/index.ts    |   4 +-
 4 files changed, 137 insertions(+), 13 deletions(-)

diff --git a/src/app/views/query-response/pivot-items/pivot-items.tsx b/src/app/views/query-response/pivot-items/pivot-items.tsx
index 2ad2208a8..022439467 100644
--- a/src/app/views/query-response/pivot-items/pivot-items.tsx
+++ b/src/app/views/query-response/pivot-items/pivot-items.tsx
@@ -8,13 +8,13 @@ import { lookupTemplate } from '../../../utils/adaptive-cards-lookup';
 import { validateExternalLink } from '../../../utils/external-link-validation';
 import { lookupToolkitUrl } from '../../../utils/graph-toolkit-lookup';
 import { translateMessage } from '../../../utils/translate-messages';
-import { darkThemeHostConfig, lightThemeHostConfig } from '../adaptive-cards/AdaptiveHostConfig';
-import { queryResponseStyles } from '../queryResponse.styles';
-import { Response } from '../response';
 import {
   AdaptiveCards, GraphToolkit, ResponseHeaders,
   Snippets
 } from '../../common/lazy-loader/component-registry';
+import { darkThemeHostConfig, lightThemeHostConfig } from '../adaptive-cards/AdaptiveHostConfig';
+import { queryResponseStyles } from '../queryResponse.styles';
+import { Response, ResponseV9 } from '../response';
 
 export const GetPivotItems = () => {
   const mode = useAppSelector((state)=> state.graphExplorerMode);
@@ -73,7 +73,8 @@ export const GetPivotItems = () => {
         'aria-controls': 'response-tab'
       }}
     >
-      <div id={'response-tab'} tabIndex={0}><Response /></div>
+      {/* <div id={'response-tab'} tabIndex={0}><Response /></div> */}
+      <div id={'response-tab'} tabIndex={0}><ResponseV9 /></div>
     </PivotItem>,
     <PivotItem
       key='response-headers'
diff --git a/src/app/views/query-response/response/ResponseMessagesV9.tsx b/src/app/views/query-response/response/ResponseMessagesV9.tsx
index a2e076168..c3bc08d51 100644
--- a/src/app/views/query-response/response/ResponseMessagesV9.tsx
+++ b/src/app/views/query-response/response/ResponseMessagesV9.tsx
@@ -1,5 +1,126 @@
-const ResponseMessagesV9 = ()=>{
-  return <p>Response Messages</p>
+import { Link, MessageBar, MessageBarType } from '@fluentui/react';
+import { useState } from 'react';
+
+import { useAppDispatch, useAppSelector } from '../../../../store';
+import { Mode } from '../../../../types/enums';
+import { IQuery } from '../../../../types/query-runner';
+import { getContentType } from '../../../services/actions/query-action-creator-util';
+import { MOZILLA_CORS_DOCUMENTATION_LINK } from '../../../services/graph-constants';
+import { runQuery } from '../../../services/slices/graph-response.slice';
+import { setSampleQuery } from '../../../services/slices/sample-query.slice';
+import { translateMessage } from '../../../utils/translate-messages';
+
+interface ODataLink {
+  link: string;
+  name: string;
+}
+
+function getOdataLinkFromResponseBody(responseBody: any): ODataLink | null {
+  const odataLinks = ['nextLink', 'deltaLink'];
+  let data = null;
+  if (responseBody) {
+    odataLinks.forEach(link => {
+      if (responseBody[`@odata.${link}`]) {
+        data = {
+          link: responseBody[`@odata.${link}`],
+          name: link
+        };
+      }
+    });
+  }
+  return data;
 }
 
-export { ResponseMessagesV9 }
+export const ResponseMessagesV9 = () => {
+  const dispatch = useAppDispatch();
+  const messageBars = [];
+  const body = useAppSelector((state)=> state.graphResponse.response.body);
+  const headers = useAppSelector((state)=> state.graphResponse.response.headers);
+  const sampleQuery = useAppSelector((state)=> state.sampleQuery);
+  const authToken= useAppSelector((state)=> state.auth.authToken);
+  const graphExplorerMode = useAppSelector((state)=> state.graphExplorerMode);
+  const [displayMessage, setDisplayMessage] = useState(true);
+
+  const tokenPresent = !!authToken.token;
+  const contentType = getContentType(headers);
+  const odataLink = getOdataLinkFromResponseBody(body);
+
+  const setQuery = () => {
+    const query: IQuery = { ...sampleQuery };
+    query.sampleUrl = odataLink!.link;
+    dispatch(setSampleQuery(query));
+    dispatch(runQuery(query));
+  }
+
+  // Display link to step to next result
+  if (odataLink) {
+    messageBars.push(
+      <MessageBar messageBarType={MessageBarType.info} key={'odataLink'}>
+        {translateMessage('This response contains an @odata property.')}: @odata.{odataLink.name}
+        <Link onClick={() => setQuery()} underline>
+          &nbsp;{translateMessage('Click here to follow the link')}
+        </Link>
+      </MessageBar>
+    );
+  }
+
+  // Display link to download file response
+  if (body?.contentDownloadUrl) {
+    messageBars.push(
+      <div key={'contentDownloadUrl'}>
+        <MessageBar messageBarType={MessageBarType.warning}>
+          {translateMessage('This response contains unviewable content')}
+          <Link href={body?.contentDownloadUrl} download underline>
+            {translateMessage('Click to download file')}
+          </Link>&nbsp;
+        </MessageBar>
+      </div>
+    );
+  }
+
+  // Show CORS compliance message
+  if (body?.throwsCorsError) {
+    messageBars.push(
+      <div key={'throwsCorsError'}>
+        <MessageBar messageBarType={MessageBarType.warning}>
+          {translateMessage('Response content not available due to CORS policy')}
+          <Link target='_blank' href={MOZILLA_CORS_DOCUMENTATION_LINK} underline>
+            {translateMessage('here')}
+          </Link>.
+        </MessageBar>
+      </div>
+    );
+  }
+
+  if (body && !tokenPresent && displayMessage && graphExplorerMode === Mode.Complete) {
+    messageBars.push(
+      <div key={'displayMessage'}>
+        <MessageBar
+          messageBarType={MessageBarType.warning}
+          isMultiline={true}
+          onDismiss={() => setDisplayMessage(false)}
+          dismissButtonAriaLabel={translateMessage('Close')}
+        >
+          {translateMessage('Using demo tenant')}{' '}
+          {translateMessage('To access your own data:')}
+        </MessageBar>
+      </div>
+    );
+  }
+
+  if (contentType === 'application/json' && typeof body === 'string') {
+    messageBars.push(
+      <div key={'application/json'}>
+        <MessageBar
+          messageBarType={MessageBarType.info}
+          onDismiss={() => setDisplayMessage(false)}
+          dismissButtonAriaLabel={translateMessage('Close')}
+        >
+          {translateMessage('Malformed JSON body')}
+        </MessageBar>
+      </div>
+    );
+  }
+
+  return messageBars;
+}
\ No newline at end of file
diff --git a/src/app/views/query-response/response/ResponseV9.tsx b/src/app/views/query-response/response/ResponseV9.tsx
index ff2cb58b4..454f18aa0 100644
--- a/src/app/views/query-response/response/ResponseV9.tsx
+++ b/src/app/views/query-response/response/ResponseV9.tsx
@@ -7,11 +7,11 @@ import {
   getResponseHeight
 } from '../../common/dimensions/dimensions-adjustment';
 import ResponseDisplay from './ResponseDisplay';
-import { ResponseMessages } from './ResponseMessages';
+import { ResponseMessagesV9 } from './ResponseMessagesV9';
 
-const Response = () => {
+const ResponseV9 = () => {
   const response = useAppSelector((state) => state.dimensions.response);
-  const body = useAppSelector<string|object>((state) => state.graphResponse.response.body);
+  const body = useAppSelector((state) => state.graphResponse.response.body);
   const headers = useAppSelector((state) => state.graphResponse.response.headers);
   const responseAreaExpanded = useAppSelector((state) => state.responseAreaExpanded);
 
@@ -24,7 +24,7 @@ const Response = () => {
 
   return (
     <div style={{ display: 'block' }}>
-      <ResponseMessages />
+      <ResponseMessagesV9 />
       {!contentDownloadUrl && !throwsCorsError && headers &&
         <ResponseDisplay
           contentType={contentType}
@@ -36,4 +36,4 @@ const Response = () => {
 
 };
 
-export default Response;
\ No newline at end of file
+export default ResponseV9;
\ No newline at end of file
diff --git a/src/app/views/query-response/response/index.ts b/src/app/views/query-response/response/index.ts
index 95ba6078c..d4b0f7765 100644
--- a/src/app/views/query-response/response/index.ts
+++ b/src/app/views/query-response/response/index.ts
@@ -1,2 +1,4 @@
 import Response from './Response';
-export { Response };
+import ResponseV9 from './ResponseV9';
+export { Response, ResponseV9 };
+

From c5a8cea737974aea3c8d672b24880e5ae4329b45 Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Fri, 29 Nov 2024 16:33:55 +0300
Subject: [PATCH 04/20] feat: add OneNote and PDF content types, update
 response headers handling, and enhance response display components

---
 .../autocomplete-action-creators.spec.ts      |   2 +-
 .../permissions-action-creator.spec.ts        |   2 +-
 .../permissions-action-creator.util.ts        |   6 +-
 src/app/services/actions/profile-actions.ts   |   3 +-
 .../actions/query-action-creator-util.ts      |  44 ++--
 .../actions/query-action-creators.spec.ts     |   6 +-
 .../resource-explorer-action-creators.spec.ts |   2 +-
 .../services/slices/graph-response.slice.ts   |  54 +++--
 .../pivot-items/pivot-items.tsx               |   2 +-
 .../query-response/response/Response.tsx      |  74 +++---
 .../response/ResponseDisplay.tsx              |  44 ++--
 .../response/ResponseDisplayV9.tsx            |   8 +-
 .../response/ResponseMessages.tsx             | 228 +++++++++---------
 .../response/ResponseMessagesV9.tsx           |   9 +-
 .../query-response/response/ResponseV9.tsx    |  15 +-
 .../views/query-response/response/index.ts    |   4 +-
 src/app/views/sidebar/history/har-utils.ts    |   4 +-
 src/types/enums.ts                            |   2 +
 src/types/history.ts                          |   3 +-
 src/types/query-response.ts                   |  13 +-
 20 files changed, 267 insertions(+), 258 deletions(-)

diff --git a/src/app/services/actions/autocomplete-action-creators.spec.ts b/src/app/services/actions/autocomplete-action-creators.spec.ts
index e9b932faf..306fa1ffc 100644
--- a/src/app/services/actions/autocomplete-action-creators.spec.ts
+++ b/src/app/services/actions/autocomplete-action-creators.spec.ts
@@ -61,7 +61,7 @@ const mockState: ApplicationState = {
     isLoadingData: false,
     response: {
       body: undefined,
-      headers: undefined
+      headers: {}
     }
   },
   snippets: {
diff --git a/src/app/services/actions/permissions-action-creator.spec.ts b/src/app/services/actions/permissions-action-creator.spec.ts
index 999336a6b..65df26a3e 100644
--- a/src/app/services/actions/permissions-action-creator.spec.ts
+++ b/src/app/services/actions/permissions-action-creator.spec.ts
@@ -82,7 +82,7 @@ const mockState: ApplicationState = {
     isLoadingData: false,
     response: {
       body: undefined,
-      headers: undefined
+      headers: {}
     }
   },
   snippets: {
diff --git a/src/app/services/actions/permissions-action-creator.util.ts b/src/app/services/actions/permissions-action-creator.util.ts
index 5dc808d92..cf80dc28d 100644
--- a/src/app/services/actions/permissions-action-creator.util.ts
+++ b/src/app/services/actions/permissions-action-creator.util.ts
@@ -235,16 +235,14 @@ export class RevokePermissionsUtil {
 
   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);
+    return parseResponse(response);
   }
 
   private static async makeGraphRequest(scopes: string[], query: IQuery) {
-    const respHeaders: any = {};
     const response = await makeGraphRequest(scopes)(query);
-    return parseResponse(response, respHeaders);
+    return parseResponse(response);
   }
 
   private trackRevokeConsentEvent = (status: string, permissionObject: any) => {
diff --git a/src/app/services/actions/profile-actions.ts b/src/app/services/actions/profile-actions.ts
index 573f6730e..f17f7508b 100644
--- a/src/app/services/actions/profile-actions.ts
+++ b/src/app/services/actions/profile-actions.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);
   return {
     userInfo,
     response
diff --git a/src/app/services/actions/query-action-creator-util.ts b/src/app/services/actions/query-action-creator-util.ts
index 4042dc9e8..45b37fbad 100644
--- a/src/app/services/actions/query-action-creator-util.ts
+++ b/src/app/services/actions/query-action-creator-util.ts
@@ -11,6 +11,7 @@ import {
 import { authenticationWrapper } from '../../../modules/authentication';
 import { ApplicationState } from '../../../store';
 import { ContentType } from '../../../types/enums';
+import { ResponseBody } from '../../../types/query-response';
 import { IQuery } from '../../../types/query-runner';
 import { IRequestOptions } from '../../../types/request';
 import { IStatus } from '../../../types/status';
@@ -146,32 +147,35 @@ export function isBetaURLResponse(json: any) {
   return !!json?.account?.[0]?.source?.type?.[0];
 }
 
-export function getContentType(headers: any) {
-  let contentType = null;
+export function getContentType(headers: Headers | Record<string, ContentType>): ContentType {
+  let contentType: ContentType = '' as unknown as ContentType;
 
   if (headers) {
-    let contentTypes = headers['content-type'];
+    let contentTypes: string | null = null;
     if (headers instanceof Headers) {
       contentTypes = headers.get('content-type');
+    } else {
+      contentTypes = headers['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();
-      }
+      contentType = (splitContentTypes.length > 0) ?
+        splitContentTypes[0].toLowerCase() as ContentType : contentTypes as ContentType;
     }
   }
   return contentType;
 }
 
-export function isFileResponse(headers: any) {
-  const contentDisposition = headers['content-disposition'];
+export function isFileResponse(headers: Headers | Record<string, ContentType>) {
+  const contentDisposition: string |  null = (headers instanceof Headers) ?
+    headers.get('content-disposition') : headers['content-disposition'];
+
   if (contentDisposition) {
     const directives = contentDisposition.split(';');
-    if (directives.contains('attachment')) {
+    if (directives.includes('attachment')) {
       return true;
     }
   }
@@ -191,19 +195,16 @@ export function isFileResponse(headers: any) {
   return false;
 }
 
-export async function generateResponseDownloadUrl(
-  response: Response,
-  respHeaders: any
-) {
+export async function generateResponseDownloadUrl(response: Response) {
   try {
-    const fileContents = await parseResponse(response, respHeaders);
-    const contentType = getContentType(respHeaders);
+    const fileContents = await parseResponse(response);
+    const contentType = getContentType(response.headers);
     if (fileContents) {
       const buffer = await response.arrayBuffer();
       const blob = new Blob([buffer], { type: contentType });
       return URL.createObjectURL(blob);
     }
-  } catch (error) {
+  } catch {
     return null;
   }
 }
@@ -211,20 +212,13 @@ export async function generateResponseDownloadUrl(
 async function tryParseJson(textValue: string) {
   try {
     return JSON.parse(textValue);
-  } catch (error) {
+  } catch {
     return textValue;
   }
 }
 
-export function parseResponse(
-  response: Response,
-  respHeaders: { [key: string]: string } = {}
-): Promise<any> {
+export const parseResponse = (response: Response): Promise<ResponseBody> => {
   if (response && response.headers) {
-    response.headers.forEach((val: string, key: string) => {
-      respHeaders[key] = val;
-    });
-
     const contentType = getContentType(response.headers);
     switch (contentType) {
     case ContentType.Json:
diff --git a/src/app/services/actions/query-action-creators.spec.ts b/src/app/services/actions/query-action-creators.spec.ts
index 1641476cd..d24215858 100644
--- a/src/app/services/actions/query-action-creators.spec.ts
+++ b/src/app/services/actions/query-action-creators.spec.ts
@@ -1,11 +1,11 @@
 /* eslint-disable max-len */
 import configureMockStore from 'redux-mock-store';
 
+import { AnyAction } from '@reduxjs/toolkit';
+import { IQuery } from '../../../types/query-runner';
 import { ADD_HISTORY_ITEM_SUCCESS, QUERY_GRAPH_RUNNING, QUERY_GRAPH_STATUS, QUERY_GRAPH_SUCCESS } from '../redux-constants';
 import { runQuery } from '../slices/graph-response.slice';
 import { mockThunkMiddleware } from './mockThunkMiddleware';
-import { AnyAction } from '@reduxjs/toolkit';
-import { IQuery } from '../../../types/query-runner';
 
 const mockStore = configureMockStore([mockThunkMiddleware]);
 
@@ -34,7 +34,7 @@ describe('Query action creators', () => {
           body: undefined,
           createdAt,
           duration: undefined,
-          headers: undefined,
+          headers: {},
           method: undefined,
           responseHeaders:
           {
diff --git a/src/app/services/actions/resource-explorer-action-creators.spec.ts b/src/app/services/actions/resource-explorer-action-creators.spec.ts
index edba19e18..0cac92d6c 100644
--- a/src/app/services/actions/resource-explorer-action-creators.spec.ts
+++ b/src/app/services/actions/resource-explorer-action-creators.spec.ts
@@ -62,7 +62,7 @@ const mockState: ApplicationState = {
     isLoadingData: false,
     response: {
       body: undefined,
-      headers: undefined
+      headers: {}
     }
   },
   snippets: {
diff --git a/src/app/services/slices/graph-response.slice.ts b/src/app/services/slices/graph-response.slice.ts
index 5c81b1caa..c7b5c98ab 100644
--- a/src/app/services/slices/graph-response.slice.ts
+++ b/src/app/services/slices/graph-response.slice.ts
@@ -8,7 +8,7 @@ import { historyCache } from '../../../modules/cache/history-utils';
 import { ApplicationState } from '../../../store';
 import { ContentType } from '../../../types/enums';
 import { IHistoryItem } from '../../../types/history';
-import { IGraphResponse } from '../../../types/query-response';
+import { IGraphResponse, ResponseBody } from '../../../types/query-response';
 import { IQuery } from '../../../types/query-runner';
 import { IStatus } from '../../../types/status';
 import { ClientError } from '../../utils/error-utils/ClientError';
@@ -31,15 +31,15 @@ const MAX_NUMBER_OF_RETRIES = 3;
 let CURRENT_RETRIES = 0;
 
 interface Result {
-  body: any;
-  headers: { [key: string]: string };
+  body: ResponseBody;
+  headers: Headers | Record<string, ContentType>;
 }
 
 const initialState: IGraphResponse = {
   isLoadingData: false,
   response: {
     body: undefined,
-    headers: undefined
+    headers: {}
   }
 };
 
@@ -48,7 +48,7 @@ export const runQuery = createAsyncThunk(
   async (query: IQuery, { dispatch, getState, rejectWithValue }) => {
     const state = getState() as ApplicationState;
     const tokenPresent = !!state?.auth?.authToken?.token;
-    const respHeaders: { [key: string]: string } = {};
+    const respHeaders = {};
     const createdAt = new Date().toISOString();
 
     try {
@@ -56,12 +56,13 @@ export const runQuery = createAsyncThunk(
         ? await authenticatedRequest(query)
         : await anonymousRequest(query, getState);
 
-      const result: Result = await processResponse(response, respHeaders, dispatch, query);
+      const result: Result = await processResponse(response, dispatch, query);
 
       const duration = new Date().getTime() - new Date(createdAt).getTime();
       const status = generateStatus({ duration, response });
       dispatch(setQueryResponseStatus(status));
 
+      // TODO: fix this api args
       const historyItem = generateHistoryItem(status, respHeaders,
         query, createdAt, result, duration);
       dispatch(addHistoryItem(historyItem));
@@ -96,7 +97,7 @@ const querySlice = createSlice({
         state.isLoadingData = true;
         state.response = {
           body: undefined,
-          headers: undefined
+          headers: {}
         };
       })
       .addCase(runQuery.rejected, (state, action) => {
@@ -111,7 +112,7 @@ const querySlice = createSlice({
         state.isLoadingData = false;
         state.response = {
           body: undefined,
-          headers: undefined
+          headers: {}
         };
       })
       .addCase(runQuery.fulfilled, (state, action) => {
@@ -130,13 +131,12 @@ const querySlice = createSlice({
 export const { setQueryResponse } = querySlice.actions;
 export default querySlice.reducer;
 
-async function processResponse(response: Response, respHeaders: { [key: string]: string },
-  dispatch: Function, query: IQuery): Promise<Result> {
-  let result = await parseResponse(response, respHeaders);
+async function processResponse(response: Response, dispatch: Function, query: IQuery): Promise<Result> {
+  let result = await parseResponse(response);
   if (response && response.ok) {
     CURRENT_RETRIES = 0;
-    if (isFileResponse(respHeaders)) {
-      const contentDownloadUrl = await generateResponseDownloadUrl(response, respHeaders);
+    if (isFileResponse(response.headers)) {
+      const contentDownloadUrl = await generateResponseDownloadUrl(response);
       if (contentDownloadUrl) {
         result = { contentDownloadUrl };
       }
@@ -151,7 +151,7 @@ async function processResponse(response: Response, respHeaders: { [key: string]:
     }
   }
 
-  return { body: result, headers: respHeaders };
+  return { body: result, headers: response.headers };
 }
 
 const generateStatus = ({ duration, response }: { duration: number; response: Response }): IStatus => {
@@ -192,23 +192,27 @@ async function runReAuthenticatedRequest(response: Response, query: IQuery): Pro
 
 function generateHistoryItem(
   status: IStatus,
-  respHeaders: { [key: string]: string },
+  respHeaders: Headers | Record<string, ContentType>,
   query: IQuery,
   createdAt: string,
   result: Result,
   duration: number
 ): IHistoryItem {
-  let response = { ...result };
-  const responseHeaders = { ...respHeaders };
-  const contentType = respHeaders['content-type'];
+  let response: Result = {body: {}, headers: {}};
+  let contentType_: ContentType = '' as ContentType;
+  if (respHeaders instanceof Headers) {
+    contentType_ = respHeaders.get('content-type') as ContentType;
+  } else {
+    contentType_ = respHeaders['content-type']
+  }
 
-  if (isImageResponse(contentType)) {
-    response = { ...response, body: 'Run the query to view the image' };
-    responseHeaders['content-type'] = ContentType.Json;
+  if (isImageResponse(contentType_)) {
+    response = { ...result, body: 'Run the query to view the image' };
+    Object.assign(respHeaders, {'content-type': ContentType.Json})
   }
 
   if (isFileResponse(respHeaders)) {
-    response = { ...response, body: 'Run the query to generate file download URL' };
+    response = { ...result, body: 'Run the query to generate file download URL' };
   }
 
   const historyItem: IHistoryItem = {
@@ -217,12 +221,12 @@ function generateHistoryItem(
     method: query.selectedVerb,
     headers: query.sampleHeaders,
     body: query.sampleBody,
-    responseHeaders,
+    responseHeaders: respHeaders,
     createdAt,
     status: status.status as number,
     statusText: status.statusText,
     duration,
-    result: response.body
+    result: response.body as object
   };
 
   historyCache.writeHistoryData(historyItem);
@@ -230,7 +234,7 @@ function generateHistoryItem(
 }
 
 async function handleError(error: Error, query: IQuery) {
-  let body = null;
+  let body: ResponseBody = {};
   const status: IStatus = {
     messageType: MessageBarType.error,
     ok: false,
diff --git a/src/app/views/query-response/pivot-items/pivot-items.tsx b/src/app/views/query-response/pivot-items/pivot-items.tsx
index 022439467..e57a155b7 100644
--- a/src/app/views/query-response/pivot-items/pivot-items.tsx
+++ b/src/app/views/query-response/pivot-items/pivot-items.tsx
@@ -14,7 +14,7 @@ import {
 } from '../../common/lazy-loader/component-registry';
 import { darkThemeHostConfig, lightThemeHostConfig } from '../adaptive-cards/AdaptiveHostConfig';
 import { queryResponseStyles } from '../queryResponse.styles';
-import { Response, ResponseV9 } from '../response';
+import { ResponseV9 } from '../response';
 
 export const GetPivotItems = () => {
   const mode = useAppSelector((state)=> state.graphExplorerMode);
diff --git a/src/app/views/query-response/response/Response.tsx b/src/app/views/query-response/response/Response.tsx
index c758604cd..598c43ba3 100644
--- a/src/app/views/query-response/response/Response.tsx
+++ b/src/app/views/query-response/response/Response.tsx
@@ -1,39 +1,39 @@
 
 
-import { useAppSelector } from '../../../../store';
-import { getContentType } from '../../../services/actions/query-action-creator-util';
-import {
-  convertVhToPx, getResponseEditorHeight,
-  getResponseHeight
-} from '../../common/dimensions/dimensions-adjustment';
-import ResponseDisplay from './ResponseDisplay';
-import { ResponseMessages } from './ResponseMessages';
-
-const Response = () => {
-  const response = useAppSelector((state) => state.dimensions.response);
-  const body = useAppSelector((state) => state.graphResponse.response.body);
-  const headers = useAppSelector((state) => state.graphResponse.response.headers);
-  const responseAreaExpanded = useAppSelector((state) => state.responseAreaExpanded);
-
-  const defaultHeight = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 220);
-  const monacoHeight = getResponseEditorHeight(150);
-
-  const contentDownloadUrl = body?.contentDownloadUrl;
-  const throwsCorsError = body?.throwsCorsError;
-  const contentType = getContentType(headers);
-
-  return (
-    <div style={{ display: 'block' }}>
-      <ResponseMessages />
-      {!contentDownloadUrl && !throwsCorsError && headers &&
-        <ResponseDisplay
-          contentType={contentType}
-          body={body}
-          height={responseAreaExpanded ? defaultHeight : monacoHeight}
-        />}
-    </div>
-  );
-
-};
-
-export default Response;
\ No newline at end of file
+// import { useAppSelector } from '../../../../store';
+// import { getContentType } from '../../../services/actions/query-action-creator-util';
+// import {
+//   convertVhToPx, getResponseEditorHeight,
+//   getResponseHeight
+// } from '../../common/dimensions/dimensions-adjustment';
+// import ResponseDisplay from './ResponseDisplay';
+// import { ResponseMessages } from './ResponseMessages';
+
+// const Response = () => {
+//   const response = useAppSelector((state) => state.dimensions.response);
+//   const body = useAppSelector((state) => state.graphResponse.response.body);
+//   const headers = useAppSelector((state) => state.graphResponse.response.headers);
+//   const responseAreaExpanded = useAppSelector((state) => state.responseAreaExpanded);
+
+//   const defaultHeight = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 220);
+//   const monacoHeight = getResponseEditorHeight(150);
+
+//   const contentDownloadUrl = body?.contentDownloadUrl;
+//   const throwsCorsError = body?.throwsCorsError;
+//   const contentType = getContentType(headers);
+
+//   return (
+//     <div style={{ display: 'block' }}>
+//       <ResponseMessages />
+//       {!contentDownloadUrl && !throwsCorsError && headers &&
+//         <ResponseDisplay
+//           contentType={contentType}
+//           body={body}
+//           height={responseAreaExpanded ? defaultHeight : monacoHeight}
+//         />}
+//     </div>
+//   );
+
+// };
+
+// export default Response;
\ No newline at end of file
diff --git a/src/app/views/query-response/response/ResponseDisplay.tsx b/src/app/views/query-response/response/ResponseDisplay.tsx
index e85218bff..2eb8b5de1 100644
--- a/src/app/views/query-response/response/ResponseDisplay.tsx
+++ b/src/app/views/query-response/response/ResponseDisplay.tsx
@@ -1,27 +1,27 @@
-import { ContentType } from '../../../../types/enums';
-import { isImageResponse } from '../../../services/actions/query-action-creator-util';
-import { Image, Monaco } from '../../common';
-import { formatXml } from '../../common/monaco/util/format-xml';
+// import { ContentType } from '../../../../types/enums';
+// import { isImageResponse } from '../../../services/actions/query-action-creator-util';
+// import { Image, Monaco } from '../../common';
+// import { formatXml } from '../../common/monaco/util/format-xml';
 
-const ResponseDisplay = (properties: any) => {
-  const { contentType, body, height } = properties;
+// const ResponseDisplay = (properties: any) => {
+//   const { contentType, body, height } = properties;
 
-  switch (contentType) {
-  case ContentType.XML:
-    return <Monaco body={formatXml(body)} language={ContentType.HTML} readOnly={true} height={height} />;
+//   switch (contentType) {
+//   case ContentType.XML:
+//     return <Monaco body={formatXml(body)} language={ContentType.HTML} readOnly={true} height={height} />;
 
-  case ContentType.HTML:
-    return <Monaco body={body} language={ContentType.HTML} readOnly={true} height={height} />;
+//   case ContentType.HTML:
+//     return <Monaco body={body} language={ContentType.HTML} readOnly={true} height={height} />;
 
-  default:
-    if (isImageResponse(contentType)) {
-      return <Image
-        styles={{ padding: '10px' }}
-        body={body}
-        alt='profile image' />;
-    }
-    return <Monaco body={body} readOnly={true} language={ContentType.Json} height={height} />;
-  }
-}
+//   default:
+//     if (isImageResponse(contentType)) {
+//       return <Image
+//         styles={{ padding: '10px' }}
+//         body={body}
+//         alt='profile image' />;
+//     }
+//     return <Monaco body={body} readOnly={true} language={ContentType.Json} height={height} />;
+//   }
+// }
 
-export default ResponseDisplay;
+// export default ResponseDisplay;
diff --git a/src/app/views/query-response/response/ResponseDisplayV9.tsx b/src/app/views/query-response/response/ResponseDisplayV9.tsx
index 60d46691d..23f59fd63 100644
--- a/src/app/views/query-response/response/ResponseDisplayV9.tsx
+++ b/src/app/views/query-response/response/ResponseDisplayV9.tsx
@@ -6,7 +6,7 @@ import { formatXml } from '../../common/monaco/util/format-xml';
 interface ResponseDisplayProps {
   contentType: ContentType;
   body: string;
-  height: number;
+  height: string;
 }
 
 const ResponseDisplayV9 = (props: ResponseDisplayProps) => {
@@ -14,10 +14,10 @@ const ResponseDisplayV9 = (props: ResponseDisplayProps) => {
 
   switch (contentType) {
   case ContentType.XML:
-    return <MonacoV9 body={formatXml(body)} language={ContentType.HTML} readOnly={true} height={height.toString()} />;
+    return <MonacoV9 body={formatXml(body)} language={ContentType.HTML} readOnly={true} height={height} />;
 
   case ContentType.HTML:
-    return <MonacoV9 body={body} language={ContentType.HTML} readOnly={true} height={height.toString()} />;
+    return <MonacoV9 body={body} language={ContentType.HTML} readOnly={true} height={height} />;
 
   default:
     if (isImageResponse(contentType)) {
@@ -26,7 +26,7 @@ const ResponseDisplayV9 = (props: ResponseDisplayProps) => {
         body={body}
         alt='profile image' />;
     }
-    return <MonacoV9 body={body} readOnly={true} language={ContentType.Json} height={height.toString()} />;
+    return <MonacoV9 body={body} readOnly={true} language={ContentType.Json} height={height} />;
   }
 }
 
diff --git a/src/app/views/query-response/response/ResponseMessages.tsx b/src/app/views/query-response/response/ResponseMessages.tsx
index 0f6dddc3a..4fe51ebae 100644
--- a/src/app/views/query-response/response/ResponseMessages.tsx
+++ b/src/app/views/query-response/response/ResponseMessages.tsx
@@ -1,126 +1,126 @@
-import { Link, MessageBar, MessageBarType } from '@fluentui/react';
-import { useState } from 'react';
+// import { Link, MessageBar, MessageBarType } from '@fluentui/react';
+// import { useState } from 'react';
 
-import { useAppDispatch, useAppSelector } from '../../../../store';
-import { Mode } from '../../../../types/enums';
-import { IQuery } from '../../../../types/query-runner';
-import { getContentType } from '../../../services/actions/query-action-creator-util';
-import { MOZILLA_CORS_DOCUMENTATION_LINK } from '../../../services/graph-constants';
-import { runQuery } from '../../../services/slices/graph-response.slice';
-import { setSampleQuery } from '../../../services/slices/sample-query.slice';
-import { translateMessage } from '../../../utils/translate-messages';
+// import { useAppDispatch, useAppSelector } from '../../../../store';
+// import { Mode } from '../../../../types/enums';
+// import { IQuery } from '../../../../types/query-runner';
+// import { getContentType } from '../../../services/actions/query-action-creator-util';
+// import { MOZILLA_CORS_DOCUMENTATION_LINK } from '../../../services/graph-constants';
+// import { runQuery } from '../../../services/slices/graph-response.slice';
+// import { setSampleQuery } from '../../../services/slices/sample-query.slice';
+// import { translateMessage } from '../../../utils/translate-messages';
 
-interface ODataLink {
-  link: string;
-  name: string;
-}
+// interface ODataLink {
+//   link: string;
+//   name: string;
+// }
 
-function getOdataLinkFromResponseBody(responseBody: any): ODataLink | null {
-  const odataLinks = ['nextLink', 'deltaLink'];
-  let data = null;
-  if (responseBody) {
-    odataLinks.forEach(link => {
-      if (responseBody[`@odata.${link}`]) {
-        data = {
-          link: responseBody[`@odata.${link}`],
-          name: link
-        };
-      }
-    });
-  }
-  return data;
-}
+// function getOdataLinkFromResponseBody(responseBody: any): ODataLink | null {
+//   const odataLinks = ['nextLink', 'deltaLink'];
+//   let data = null;
+//   if (responseBody) {
+//     odataLinks.forEach(link => {
+//       if (responseBody[`@odata.${link}`]) {
+//         data = {
+//           link: responseBody[`@odata.${link}`],
+//           name: link
+//         };
+//       }
+//     });
+//   }
+//   return data;
+// }
 
-export const ResponseMessages = () => {
-  const dispatch = useAppDispatch();
-  const messageBars = [];
-  const body = useAppSelector((state)=> state.graphResponse.response.body);
-  const headers = useAppSelector((state)=> state.graphResponse.response.headers);
-  const sampleQuery = useAppSelector((state)=> state.sampleQuery);
-  const authToken= useAppSelector((state)=> state.auth.authToken);
-  const graphExplorerMode = useAppSelector((state)=> state.graphExplorerMode);
-  const [displayMessage, setDisplayMessage] = useState(true);
+// export const ResponseMessages = () => {
+//   const dispatch = useAppDispatch();
+//   const messageBars = [];
+//   const body = useAppSelector((state)=> state.graphResponse.response.body);
+//   const headers = useAppSelector((state)=> state.graphResponse.response.headers);
+//   const sampleQuery = useAppSelector((state)=> state.sampleQuery);
+//   const authToken= useAppSelector((state)=> state.auth.authToken);
+//   const graphExplorerMode = useAppSelector((state)=> state.graphExplorerMode);
+//   const [displayMessage, setDisplayMessage] = useState(true);
 
-  const tokenPresent = !!authToken.token;
-  const contentType = getContentType(headers);
-  const odataLink = getOdataLinkFromResponseBody(body);
+//   const tokenPresent = !!authToken.token;
+//   const contentType = getContentType(headers);
+//   const odataLink = getOdataLinkFromResponseBody(body);
 
-  const setQuery = () => {
-    const query: IQuery = { ...sampleQuery };
-    query.sampleUrl = odataLink!.link;
-    dispatch(setSampleQuery(query));
-    dispatch(runQuery(query));
-  }
+//   const setQuery = () => {
+//     const query: IQuery = { ...sampleQuery };
+//     query.sampleUrl = odataLink!.link;
+//     dispatch(setSampleQuery(query));
+//     dispatch(runQuery(query));
+//   }
 
-  // Display link to step to next result
-  if (odataLink) {
-    messageBars.push(
-      <MessageBar messageBarType={MessageBarType.info} key={'odataLink'}>
-        {translateMessage('This response contains an @odata property.')}: @odata.{odataLink.name}
-        <Link onClick={() => setQuery()} underline>
-          &nbsp;{translateMessage('Click here to follow the link')}
-        </Link>
-      </MessageBar>
-    );
-  }
+//   // Display link to step to next result
+//   if (odataLink) {
+//     messageBars.push(
+//       <MessageBar messageBarType={MessageBarType.info} key={'odataLink'}>
+//         {translateMessage('This response contains an @odata property.')}: @odata.{odataLink.name}
+//         <Link onClick={() => setQuery()} underline>
+//           &nbsp;{translateMessage('Click here to follow the link')}
+//         </Link>
+//       </MessageBar>
+//     );
+//   }
 
-  // Display link to download file response
-  if (body?.contentDownloadUrl) {
-    messageBars.push(
-      <div key={'contentDownloadUrl'}>
-        <MessageBar messageBarType={MessageBarType.warning}>
-          {translateMessage('This response contains unviewable content')}
-          <Link href={body?.contentDownloadUrl} download underline>
-            {translateMessage('Click to download file')}
-          </Link>&nbsp;
-        </MessageBar>
-      </div>
-    );
-  }
+//   // Display link to download file response
+//   if (body?.contentDownloadUrl) {
+//     messageBars.push(
+//       <div key={'contentDownloadUrl'}>
+//         <MessageBar messageBarType={MessageBarType.warning}>
+//           {translateMessage('This response contains unviewable content')}
+//           <Link href={body?.contentDownloadUrl} download underline>
+//             {translateMessage('Click to download file')}
+//           </Link>&nbsp;
+//         </MessageBar>
+//       </div>
+//     );
+//   }
 
-  // Show CORS compliance message
-  if (body?.throwsCorsError) {
-    messageBars.push(
-      <div key={'throwsCorsError'}>
-        <MessageBar messageBarType={MessageBarType.warning}>
-          {translateMessage('Response content not available due to CORS policy')}
-          <Link target='_blank' href={MOZILLA_CORS_DOCUMENTATION_LINK} underline>
-            {translateMessage('here')}
-          </Link>.
-        </MessageBar>
-      </div>
-    );
-  }
+//   // Show CORS compliance message
+//   if (body?.throwsCorsError) {
+//     messageBars.push(
+//       <div key={'throwsCorsError'}>
+//         <MessageBar messageBarType={MessageBarType.warning}>
+//           {translateMessage('Response content not available due to CORS policy')}
+//           <Link target='_blank' href={MOZILLA_CORS_DOCUMENTATION_LINK} underline>
+//             {translateMessage('here')}
+//           </Link>.
+//         </MessageBar>
+//       </div>
+//     );
+//   }
 
-  if (body && !tokenPresent && displayMessage && graphExplorerMode === Mode.Complete) {
-    messageBars.push(
-      <div key={'displayMessage'}>
-        <MessageBar
-          messageBarType={MessageBarType.warning}
-          isMultiline={true}
-          onDismiss={() => setDisplayMessage(false)}
-          dismissButtonAriaLabel={translateMessage('Close')}
-        >
-          {translateMessage('Using demo tenant')}{' '}
-          {translateMessage('To access your own data:')}
-        </MessageBar>
-      </div>
-    );
-  }
+//   if (body && !tokenPresent && displayMessage && graphExplorerMode === Mode.Complete) {
+//     messageBars.push(
+//       <div key={'displayMessage'}>
+//         <MessageBar
+//           messageBarType={MessageBarType.warning}
+//           isMultiline={true}
+//           onDismiss={() => setDisplayMessage(false)}
+//           dismissButtonAriaLabel={translateMessage('Close')}
+//         >
+//           {translateMessage('Using demo tenant')}{' '}
+//           {translateMessage('To access your own data:')}
+//         </MessageBar>
+//       </div>
+//     );
+//   }
 
-  if (contentType === 'application/json' && typeof body === 'string') {
-    messageBars.push(
-      <div key={'application/json'}>
-        <MessageBar
-          messageBarType={MessageBarType.info}
-          onDismiss={() => setDisplayMessage(false)}
-          dismissButtonAriaLabel={translateMessage('Close')}
-        >
-          {translateMessage('Malformed JSON body')}
-        </MessageBar>
-      </div>
-    );
-  }
+//   if (contentType === 'application/json' && typeof body === 'string') {
+//     messageBars.push(
+//       <div key={'application/json'}>
+//         <MessageBar
+//           messageBarType={MessageBarType.info}
+//           onDismiss={() => setDisplayMessage(false)}
+//           dismissButtonAriaLabel={translateMessage('Close')}
+//         >
+//           {translateMessage('Malformed JSON body')}
+//         </MessageBar>
+//       </div>
+//     );
+//   }
 
-  return messageBars;
-}
\ No newline at end of file
+//   return messageBars;
+// }
\ No newline at end of file
diff --git a/src/app/views/query-response/response/ResponseMessagesV9.tsx b/src/app/views/query-response/response/ResponseMessagesV9.tsx
index c3bc08d51..b731422a1 100644
--- a/src/app/views/query-response/response/ResponseMessagesV9.tsx
+++ b/src/app/views/query-response/response/ResponseMessagesV9.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react';
 
 import { useAppDispatch, useAppSelector } from '../../../../store';
 import { Mode } from '../../../../types/enums';
+import { CustomBody } from '../../../../types/query-response';
 import { IQuery } from '../../../../types/query-runner';
 import { getContentType } from '../../../services/actions/query-action-creator-util';
 import { MOZILLA_CORS_DOCUMENTATION_LINK } from '../../../services/graph-constants';
@@ -65,12 +66,13 @@ export const ResponseMessagesV9 = () => {
   }
 
   // Display link to download file response
-  if (body?.contentDownloadUrl) {
+  const contentDownloadUrl = (body as CustomBody)?.contentDownloadUrl
+  if (contentDownloadUrl) {
     messageBars.push(
       <div key={'contentDownloadUrl'}>
         <MessageBar messageBarType={MessageBarType.warning}>
           {translateMessage('This response contains unviewable content')}
-          <Link href={body?.contentDownloadUrl} download underline>
+          <Link href={contentDownloadUrl} download underline>
             {translateMessage('Click to download file')}
           </Link>&nbsp;
         </MessageBar>
@@ -79,7 +81,8 @@ export const ResponseMessagesV9 = () => {
   }
 
   // Show CORS compliance message
-  if (body?.throwsCorsError) {
+  const throwsCorsError = (body as CustomBody)?.throwsCorsError
+  if (throwsCorsError) {
     messageBars.push(
       <div key={'throwsCorsError'}>
         <MessageBar messageBarType={MessageBarType.warning}>
diff --git a/src/app/views/query-response/response/ResponseV9.tsx b/src/app/views/query-response/response/ResponseV9.tsx
index 454f18aa0..ce8df983b 100644
--- a/src/app/views/query-response/response/ResponseV9.tsx
+++ b/src/app/views/query-response/response/ResponseV9.tsx
@@ -1,34 +1,35 @@
 
 
 import { useAppSelector } from '../../../../store';
+import { CustomBody, ResponseBody } from '../../../../types/query-response';
 import { getContentType } from '../../../services/actions/query-action-creator-util';
 import {
   convertVhToPx, getResponseEditorHeight,
   getResponseHeight
 } from '../../common/dimensions/dimensions-adjustment';
-import ResponseDisplay from './ResponseDisplay';
+import ResponseDisplayV9 from './ResponseDisplayV9';
 import { ResponseMessagesV9 } from './ResponseMessagesV9';
 
 const ResponseV9 = () => {
   const response = useAppSelector((state) => state.dimensions.response);
-  const body = useAppSelector((state) => state.graphResponse.response.body);
+  const body = useAppSelector<ResponseBody>((state) => state.graphResponse.response.body);
   const headers = useAppSelector((state) => state.graphResponse.response.headers);
   const responseAreaExpanded = useAppSelector((state) => state.responseAreaExpanded);
 
   const defaultHeight = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 220);
   const monacoHeight = getResponseEditorHeight(150);
 
-  const contentDownloadUrl = body?.contentDownloadUrl;
-  const throwsCorsError = body?.throwsCorsError;
+  const contentDownloadUrl = (body as CustomBody)?.contentDownloadUrl;
+  const throwsCorsError = (body as CustomBody)?.throwsCorsError;
   const contentType = getContentType(headers);
 
   return (
-    <div style={{ display: 'block' }}>
+    <div>
       <ResponseMessagesV9 />
       {!contentDownloadUrl && !throwsCorsError && headers &&
-        <ResponseDisplay
+        <ResponseDisplayV9
           contentType={contentType}
-          body={body}
+          body={body as string}
           height={responseAreaExpanded ? defaultHeight : monacoHeight}
         />}
     </div>
diff --git a/src/app/views/query-response/response/index.ts b/src/app/views/query-response/response/index.ts
index d4b0f7765..5b45d5e27 100644
--- a/src/app/views/query-response/response/index.ts
+++ b/src/app/views/query-response/response/index.ts
@@ -1,4 +1,4 @@
-import Response from './Response';
+// import Response from './Response';
 import ResponseV9 from './ResponseV9';
-export { Response, ResponseV9 };
+export { ResponseV9 };
 
diff --git a/src/app/views/sidebar/history/har-utils.ts b/src/app/views/sidebar/history/har-utils.ts
index 365bbfa6d..2afd86120 100644
--- a/src/app/views/sidebar/history/har-utils.ts
+++ b/src/app/views/sidebar/history/har-utils.ts
@@ -17,10 +17,10 @@ export function createHarEntry(query: IHistoryItem): Entry {
     });
   }
   const responseHeaders: HarHeader[] = [];
-  Object.keys(query.responseHeaders).forEach((key) => {
+  Object.keys(query.responseHeaders as Record<string, string>).forEach((key) => {
     const head: HarHeader = {
       name: key,
-      value: query.responseHeaders[key]
+      value: (query.responseHeaders as Record<string, string>)[key]
     };
     responseHeaders.push(head);
   });
diff --git a/src/types/enums.ts b/src/types/enums.ts
index 2b6d03a18..e9287019f 100644
--- a/src/types/enums.ts
+++ b/src/types/enums.ts
@@ -16,6 +16,8 @@ export enum ContentType {
   HTML = 'text/html',
   BinaryResponse = 'application/octet-stream',
   TextCsv = 'text/csv',
+  OneNote = 'application/onenote',
+  Pdf = 'application/pdf'
 }
 
 export enum AppTheme {
diff --git a/src/types/history.ts b/src/types/history.ts
index b57e59531..567b3d4d2 100644
--- a/src/types/history.ts
+++ b/src/types/history.ts
@@ -1,4 +1,5 @@
 import { ITheme } from '@fluentui/react';
+import { ContentType } from './enums';
 import { Header } from './query-runner';
 
 export interface IHistoryItem extends IHistory {
@@ -17,7 +18,7 @@ interface IHistory {
   duration: number;
   body?: string;
   category?: string;
-  responseHeaders: { [key: string]: string };
+  responseHeaders: Headers | Record<string, ContentType>;
 }
 
 export interface IHistoryProps {
diff --git a/src/types/query-response.ts b/src/types/query-response.ts
index 5d569395e..7060d9474 100644
--- a/src/types/query-response.ts
+++ b/src/types/query-response.ts
@@ -1,4 +1,4 @@
-import { Mode } from './enums';
+import { ContentType, Mode } from './enums';
 import { IQuery } from './query-runner';
 
 export interface IQueryResponseProps {
@@ -18,7 +18,14 @@ export interface IQueryResponseProps {
 export interface IGraphResponse {
   isLoadingData: boolean;
   response: {
-    body: any | undefined;
-    headers: { [key: string]: string } | undefined;
+    body: ResponseBody;
+    headers: Headers | Record<string, ContentType>;
   }
 }
+
+
+export interface CustomBody {
+  throwsCorsError: boolean,
+  contentDownloadUrl: string
+}
+export type ResponseBody = Partial<CustomBody> | Response | string | object | null | undefined;

From 4934e83855246cb71956c598361ae45fc14ef7b4 Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Fri, 29 Nov 2024 17:20:17 +0300
Subject: [PATCH 05/20] feat: add @microsoft/microsoft-graph-types dependency,
 update response handling, and improve type safety in graph request functions

---
 package-lock.json                             |  7 +++
 package.json                                  |  3 +-
 .../permissions-action-creator.util.ts        | 43 +++++++++----------
 src/app/services/actions/profile-actions.ts   |  2 +-
 .../actions/query-action-creator-util.ts      | 14 +++---
 .../services/slices/graph-response.slice.ts   | 13 +++---
 src/app/utils/fetch-retry-handler.ts          |  6 +--
 src/types/query-response.ts                   |  9 +++-
 8 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 40ee443a1..23a68e3a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
                                 "@microsoft/applicationinsights-react-js": "17.3.4",
                                 "@microsoft/applicationinsights-web": "3.3.3",
                                 "@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.2.7",
@@ -5989,6 +5990,12 @@
                                 }
                         }
                 },
+                "node_modules/@microsoft/microsoft-graph-types": {
+                        "version": "2.40.0",
+                        "resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-types/-/microsoft-graph-types-2.40.0.tgz",
+                        "integrity": "sha512-1fcPVrB/NkbNcGNfCy+Cgnvwxt6/sbIEEFgZHFBJ670zYLegENYJF8qMo7x3LqBjWX2/Eneq5BVVRCLTmlJN+g==",
+                        "license": "MIT"
+                },
                 "node_modules/@microsoft/recognizers-text-data-types-timex-expression": {
                         "version": "1.3.0",
                         "resolved": "https://registry.npmjs.org/@microsoft/recognizers-text-data-types-timex-expression/-/recognizers-text-data-types-timex-expression-1.3.0.tgz",
diff --git a/package.json b/package.json
index 4d087c5a0..d7a4c1959 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,6 @@
         "dependencies": {
                 "@augloop/types-core": "file:packages/types-core-2.16.189.tgz",
                 "@axe-core/webdriverjs": "4.10.0",
-                "@fluentui/react-components": "9.55.1",
-                "@fluentui/react-icons": "2.0.264",
                 "@azure/msal-browser": "3.26.1",
                 "@babel/core": "7.26.0",
                 "@babel/runtime": "7.26.0",
@@ -17,6 +15,7 @@
                 "@microsoft/applicationinsights-react-js": "17.3.4",
                 "@microsoft/applicationinsights-web": "3.3.3",
                 "@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.2.7",
diff --git a/src/app/services/actions/permissions-action-creator.util.ts b/src/app/services/actions/permissions-action-creator.util.ts
index cf80dc28d..ef933117d 100644
--- a/src/app/services/actions/permissions-action-creator.util.ts
+++ b/src/app/services/actions/permissions-action-creator.util.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,30 +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 response = await exponentialFetchRetry(() => makeGraphRequest(scopes)(query),
-      8, 100, condition);
-    return parseResponse(response);
+  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 response = await makeGraphRequest(scopes)(query);
-    return parseResponse(response);
+    const response = await queryMakeGraphRequest(scopes)(query);
+    return parseResponse(response as Response);
   }
 
   private trackRevokeConsentEvent = (status: string, permissionObject: any) => {
diff --git a/src/app/services/actions/profile-actions.ts b/src/app/services/actions/profile-actions.ts
index f17f7508b..01bc5ccd4 100644
--- a/src/app/services/actions/profile-actions.ts
+++ b/src/app/services/actions/profile-actions.ts
@@ -105,7 +105,7 @@ export async function getProfileResponse(): Promise<IProfileResponse> {
   const scopes = DEFAULT_USER_SCOPES.split(' ');
 
   const response = await makeGraphRequest(scopes)(query);
-  const userInfo = await parseResponse(response);
+  const userInfo = await parseResponse(response as Response);
   return {
     userInfo,
     response
diff --git a/src/app/services/actions/query-action-creator-util.ts b/src/app/services/actions/query-action-creator-util.ts
index 45b37fbad..d6ba29668 100644
--- a/src/app/services/actions/query-action-creator-util.ts
+++ b/src/app/services/actions/query-action-creator-util.ts
@@ -107,30 +107,30 @@ function createAuthenticatedRequest(
 
 export function makeGraphRequest(scopes: string[]) {
   return async (query: IQuery) => {
-    let response;
+    let response: ResponseBody;
 
     const graphRequest: GraphRequest = createAuthenticatedRequest(scopes, query);
 
     switch (query.selectedVerb) {
     case 'GET':
-      response = await graphRequest.get();
+      response = await graphRequest.get() as ResponseBody;
       break;
     case 'POST':
-      response = await graphRequest.post(query.sampleBody);
+      response = await graphRequest.post(query.sampleBody) as ResponseBody;
       break;
     case 'PUT':
-      response = await graphRequest.put(query.sampleBody);
+      response = await graphRequest.put(query.sampleBody) as ResponseBody;
       break;
     case 'PATCH':
-      response = await graphRequest.patch(query.sampleBody);
+      response = await graphRequest.patch(query.sampleBody) as ResponseBody;
       break;
     case 'DELETE':
-      response = await graphRequest.delete();
+      response = await graphRequest.delete() as ResponseBody;
       break;
     default:
       return;
     }
-    return Promise.resolve(response);
+    return Promise.resolve(response) as ResponseBody;
   };
 }
 
diff --git a/src/app/services/slices/graph-response.slice.ts b/src/app/services/slices/graph-response.slice.ts
index c7b5c98ab..78da5fd32 100644
--- a/src/app/services/slices/graph-response.slice.ts
+++ b/src/app/services/slices/graph-response.slice.ts
@@ -48,23 +48,22 @@ export const runQuery = createAsyncThunk(
   async (query: IQuery, { dispatch, getState, rejectWithValue }) => {
     const state = getState() as ApplicationState;
     const tokenPresent = !!state?.auth?.authToken?.token;
-    const respHeaders = {};
     const createdAt = new Date().toISOString();
 
     try {
-      const response: Response = tokenPresent
+      const response: ResponseBody = tokenPresent
         ? await authenticatedRequest(query)
         : await anonymousRequest(query, getState);
+      const resp = response as Response;
+      const respHeaders = (resp).headers;
 
-      const result: Result = await processResponse(response, dispatch, query);
+      const result: Result = await processResponse(resp, dispatch, query);
 
       const duration = new Date().getTime() - new Date(createdAt).getTime();
-      const status = generateStatus({ duration, response });
+      const status = generateStatus({ duration, response: resp });
       dispatch(setQueryResponseStatus(status));
 
-      // TODO: fix this api args
-      const historyItem = generateHistoryItem(status, respHeaders,
-        query, createdAt, result, duration);
+      const historyItem = generateHistoryItem(status, respHeaders, query, createdAt, result, duration);
       dispatch(addHistoryItem(historyItem));
 
       return result;
diff --git a/src/app/utils/fetch-retry-handler.ts b/src/app/utils/fetch-retry-handler.ts
index 2c1ccdd92..e8f850f03 100644
--- a/src/app/utils/fetch-retry-handler.ts
+++ b/src/app/utils/fetch-retry-handler.ts
@@ -1,4 +1,4 @@
-export async function exponentialFetchRetry<T>( fn: () => Promise<any>, retriesLeft: number,
+export async function exponentialFetchRetry<T>( fn: () => Promise<T>, retriesLeft: number,
   interval: number, condition?: (result: T, retriesLeft?: number) => Promise<boolean>
 ): Promise<T> {
   try {
@@ -6,10 +6,10 @@ export async function exponentialFetchRetry<T>( fn: () => Promise<any>, retriesL
     if (condition) {
       const isConditionSatisfied = await condition(result, retriesLeft);
       if(isConditionSatisfied){
-        throw new Error('An error occured during the execution of the request');
+        throw new Error('An error occurred during the execution of the request');
       }
     }
-    if (result && result.status && result.status >= 500){
+    if (result && result instanceof Response && result.status && result.status >= 500){
       throw new Error('Encountered a server error during execution of the request');
     }
     return result;
diff --git a/src/types/query-response.ts b/src/types/query-response.ts
index 7060d9474..5ad15f12c 100644
--- a/src/types/query-response.ts
+++ b/src/types/query-response.ts
@@ -1,3 +1,4 @@
+import { Person, ResponseType, User } from '@microsoft/microsoft-graph-types';
 import { ContentType, Mode } from './enums';
 import { IQuery } from './query-runner';
 
@@ -23,9 +24,15 @@ export interface IGraphResponse {
   }
 }
 
+export interface ResponseValue {
+  id: string
+}
 
 export interface CustomBody {
   throwsCorsError: boolean,
-  contentDownloadUrl: string
+  contentDownloadUrl: string,
+  error: Error,
+  value: Partial<User & Person>[] | undefined
+
 }
 export type ResponseBody = Partial<CustomBody> | Response | string | object | null | undefined;

From f2d4bbe19726dd291890cf727ea399ed858f4c41 Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Mon, 2 Dec 2024 12:37:04 +0300
Subject: [PATCH 06/20] feat: update graph response handling to initialize
 headers and remove unused response headers in history item

---
 src/app/services/slices/graph-response.slice.ts | 4 ++--
 src/app/views/query-runner/QueryRunner.tsx      | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/services/slices/graph-response.slice.ts b/src/app/services/slices/graph-response.slice.ts
index 78da5fd32..76ffd51cf 100644
--- a/src/app/services/slices/graph-response.slice.ts
+++ b/src/app/services/slices/graph-response.slice.ts
@@ -39,6 +39,7 @@ const initialState: IGraphResponse = {
   isLoadingData: false,
   response: {
     body: undefined,
+    
     headers: {}
   }
 };
@@ -55,7 +56,6 @@ export const runQuery = createAsyncThunk(
         ? await authenticatedRequest(query)
         : await anonymousRequest(query, getState);
       const resp = response as Response;
-      const respHeaders = (resp).headers;
 
       const result: Result = await processResponse(resp, dispatch, query);
 
@@ -63,7 +63,7 @@ export const runQuery = createAsyncThunk(
       const status = generateStatus({ duration, response: resp });
       dispatch(setQueryResponseStatus(status));
 
-      const historyItem = generateHistoryItem(status, respHeaders, query, createdAt, result, duration);
+      const historyItem = generateHistoryItem(status, {}, query, createdAt, result, duration);
       dispatch(addHistoryItem(historyItem));
 
       return result;
diff --git a/src/app/views/query-runner/QueryRunner.tsx b/src/app/views/query-runner/QueryRunner.tsx
index 13acff72f..6c4b76714 100644
--- a/src/app/views/query-runner/QueryRunner.tsx
+++ b/src/app/views/query-runner/QueryRunner.tsx
@@ -45,6 +45,7 @@ const QueryRunner = (props: any) => {
   };
 
   const handleOnRunQuery = (query?: IQuery) => {
+    console.log('query stuff', query)
     let sample = { ...sampleQuery };
     if (sampleBody && sample.selectedVerb !== 'GET') {
       const headers = sample.sampleHeaders;
@@ -75,6 +76,7 @@ const QueryRunner = (props: any) => {
       }
     }
 
+    console.log('sample before dispatch', sample)
     dispatch(runQuery(sample));
     const sanitizedUrl = sanitizeQueryUrl(sample.sampleUrl);
     const deviceCharacteristics = telemetry.getDeviceCharacteristicsData();

From dd7ffa6191237ac91368aa062fc7205ef5d22767 Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Mon, 9 Dec 2024 13:50:50 +0300
Subject: [PATCH 07/20] Use a Record to allow serialization of headers

---
 .../actions/query-action-creator-util.ts       | 11 +++++++----
 .../services/slices/graph-response.slice.ts    | 18 +++++++-----------
 src/app/utils/http-methods.utils.ts            | 11 +++++++++++
 src/types/history.ts                           |  2 +-
 src/types/query-response.ts                    |  2 +-
 5 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/app/services/actions/query-action-creator-util.ts b/src/app/services/actions/query-action-creator-util.ts
index d6ba29668..0370394a8 100644
--- a/src/app/services/actions/query-action-creator-util.ts
+++ b/src/app/services/actions/query-action-creator-util.ts
@@ -16,6 +16,7 @@ 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';
@@ -147,7 +148,7 @@ export function isBetaURLResponse(json: any) {
   return !!json?.account?.[0]?.source?.type?.[0];
 }
 
-export function getContentType(headers: Headers | Record<string, ContentType>): ContentType {
+export function getContentType(headers: Record<string, string>): ContentType {
   let contentType: ContentType = '' as unknown as ContentType;
 
   if (headers) {
@@ -169,7 +170,7 @@ export function getContentType(headers: Headers | Record<string, ContentType>):
   return contentType;
 }
 
-export function isFileResponse(headers: Headers | Record<string, ContentType>) {
+export function isFileResponse(headers: Record<string, string>) {
   const contentDisposition: string |  null = (headers instanceof Headers) ?
     headers.get('content-disposition') : headers['content-disposition'];
 
@@ -196,9 +197,10 @@ export function isFileResponse(headers: Headers | Record<string, ContentType>) {
 }
 
 export async function generateResponseDownloadUrl(response: Response) {
+  const headers = getHeaders(response)
   try {
     const fileContents = await parseResponse(response);
-    const contentType = getContentType(response.headers);
+    const contentType = getContentType(headers);
     if (fileContents) {
       const buffer = await response.arrayBuffer();
       const blob = new Blob([buffer], { type: contentType });
@@ -219,7 +221,8 @@ async function tryParseJson(textValue: string) {
 
 export const parseResponse = (response: Response): Promise<ResponseBody> => {
   if (response && response.headers) {
-    const contentType = getContentType(response.headers);
+    const headers = getHeaders(response)
+    const contentType = getContentType(headers);
     switch (contentType) {
     case ContentType.Json:
       return response.text().then(tryParseJson);
diff --git a/src/app/services/slices/graph-response.slice.ts b/src/app/services/slices/graph-response.slice.ts
index 76ffd51cf..f968b25c5 100644
--- a/src/app/services/slices/graph-response.slice.ts
+++ b/src/app/services/slices/graph-response.slice.ts
@@ -12,6 +12,7 @@ import { IGraphResponse, ResponseBody } from '../../../types/query-response';
 import { IQuery } from '../../../types/query-runner';
 import { IStatus } from '../../../types/status';
 import { ClientError } from '../../utils/error-utils/ClientError';
+import { getHeaders } from '../../utils/http-methods.utils';
 import { setStatusMessage } from '../../utils/status-message';
 import { translateMessage } from '../../utils/translate-messages';
 import {
@@ -32,14 +33,13 @@ let CURRENT_RETRIES = 0;
 
 interface Result {
   body: ResponseBody;
-  headers: Headers | Record<string, ContentType>;
+  headers: Record<string, string>;
 }
 
 const initialState: IGraphResponse = {
   isLoadingData: false,
   response: {
     body: undefined,
-    
     headers: {}
   }
 };
@@ -132,9 +132,10 @@ export default querySlice.reducer;
 
 async function processResponse(response: Response, dispatch: Function, query: IQuery): Promise<Result> {
   let result = await parseResponse(response);
+  const headers: Record<string, string> = getHeaders(response);
   if (response && response.ok) {
     CURRENT_RETRIES = 0;
-    if (isFileResponse(response.headers)) {
+    if (isFileResponse(headers)) {
       const contentDownloadUrl = await generateResponseDownloadUrl(response);
       if (contentDownloadUrl) {
         result = { contentDownloadUrl };
@@ -150,7 +151,7 @@ async function processResponse(response: Response, dispatch: Function, query: IQ
     }
   }
 
-  return { body: result, headers: response.headers };
+  return { body: result, headers };
 }
 
 const generateStatus = ({ duration, response }: { duration: number; response: Response }): IStatus => {
@@ -191,19 +192,14 @@ async function runReAuthenticatedRequest(response: Response, query: IQuery): Pro
 
 function generateHistoryItem(
   status: IStatus,
-  respHeaders: Headers | Record<string, ContentType>,
+  respHeaders: Record<string, string>,
   query: IQuery,
   createdAt: string,
   result: Result,
   duration: number
 ): IHistoryItem {
   let response: Result = {body: {}, headers: {}};
-  let contentType_: ContentType = '' as ContentType;
-  if (respHeaders instanceof Headers) {
-    contentType_ = respHeaders.get('content-type') as ContentType;
-  } else {
-    contentType_ = respHeaders['content-type']
-  }
+  const contentType_ = respHeaders['content-type'];
 
   if (isImageResponse(contentType_)) {
     response = { ...result, body: 'Run the query to view the image' };
diff --git a/src/app/utils/http-methods.utils.ts b/src/app/utils/http-methods.utils.ts
index 8439c6651..3d071deec 100644
--- a/src/app/utils/http-methods.utils.ts
+++ b/src/app/utils/http-methods.utils.ts
@@ -24,3 +24,14 @@ export function getStyleFor(method: string) {
     return currentTheme.palette.orangeLight;
   }
 }
+
+export function getHeaders(response: Response) {
+  const headers: Record<string, string> = {};
+  for (const entry of response.headers.entries()) {
+    if (Object.prototype.hasOwnProperty.call(response.headers, entry[0])) {
+      headers[entry[0]] = entry[1];
+    }
+  }
+  return headers;
+}
+
diff --git a/src/types/history.ts b/src/types/history.ts
index 567b3d4d2..efcb36c54 100644
--- a/src/types/history.ts
+++ b/src/types/history.ts
@@ -18,7 +18,7 @@ interface IHistory {
   duration: number;
   body?: string;
   category?: string;
-  responseHeaders: Headers | Record<string, ContentType>;
+  responseHeaders: Record<string, string>;
 }
 
 export interface IHistoryProps {
diff --git a/src/types/query-response.ts b/src/types/query-response.ts
index 5ad15f12c..e591364a5 100644
--- a/src/types/query-response.ts
+++ b/src/types/query-response.ts
@@ -20,7 +20,7 @@ export interface IGraphResponse {
   isLoadingData: boolean;
   response: {
     body: ResponseBody;
-    headers: Headers | Record<string, ContentType>;
+    headers: Record<string, string>;
   }
 }
 

From 06c61330866d085ae9064fd0a70abdbde4f44cde Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Mon, 9 Dec 2024 15:10:07 +0300
Subject: [PATCH 08/20] refactor: update response handling to use ResponseBody
 type and improve header processing

---
 .../actions/query-action-creator-util.ts      | 50 ++++++++-----------
 .../services/slices/graph-response.slice.ts   | 44 +++++++++-------
 src/app/utils/http-methods.utils.ts           |  7 +--
 .../response/ResponseDisplayV9.tsx            | 10 ++--
 src/types/history.ts                          |  1 -
 src/types/query-response.ts                   |  2 +-
 6 files changed, 57 insertions(+), 57 deletions(-)

diff --git a/src/app/services/actions/query-action-creator-util.ts b/src/app/services/actions/query-action-creator-util.ts
index 0370394a8..c2e6d274a 100644
--- a/src/app/services/actions/query-action-creator-util.ts
+++ b/src/app/services/actions/query-action-creator-util.ts
@@ -10,7 +10,6 @@ import {
 
 import { authenticationWrapper } from '../../../modules/authentication';
 import { ApplicationState } from '../../../store';
-import { ContentType } from '../../../types/enums';
 import { ResponseBody } from '../../../types/query-response';
 import { IQuery } from '../../../types/query-runner';
 import { IRequestOptions } from '../../../types/request';
@@ -38,7 +37,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: any = {};
+  const sampleHeaders: Record<string, string> = {};
 
   if (query.sampleHeaders && query.sampleHeaders.length > 0) {
     query.sampleHeaders.forEach((header) => {
@@ -148,26 +147,17 @@ export function isBetaURLResponse(json: any) {
   return !!json?.account?.[0]?.source?.type?.[0];
 }
 
-export function getContentType(headers: Record<string, string>): ContentType {
-  let contentType: ContentType = '' as unknown as ContentType;
-
-  if (headers) {
-    let contentTypes: string | null = null;
-    if (headers instanceof Headers) {
-      contentTypes = headers.get('content-type');
-    } else {
-      contentTypes = headers['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(';');
-      contentType = (splitContentTypes.length > 0) ?
-        splitContentTypes[0].toLowerCase() as ContentType : contentTypes as ContentType;
-    }
+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;
   }
-  return contentType;
+  return contentType.toLowerCase();
 }
 
 export function isFileResponse(headers: Record<string, string>) {
@@ -219,23 +209,27 @@ async function tryParseJson(textValue: string) {
   }
 }
 
-export const parseResponse = (response: Response): Promise<ResponseBody> => {
-  if (response && response.headers) {
+export const parseResponse = (response: ResponseBody): Promise<ResponseBody> => {
+  if (response instanceof Response && response.headers) {
     const headers = getHeaders(response)
     const contentType = getContentType(headers);
     switch (contentType) {
-    case ContentType.Json:
+    case 'application/json':
       return response.text().then(tryParseJson);
-    case ContentType.XML:
-    case ContentType.HTML:
-    case ContentType.TextCsv:
-    case ContentType.TextPlain:
+    case 'application/xml':
+    case 'text/html':
+    case 'text/csv':
+    case 'text/plain':
       return response.text();
 
     default:
+      console.log('what default response', contentType, response.headers.get('Content-Type'), response.headers.entries())
+      console.log(response)
       return Promise.resolve(response);
     }
   }
+  console.log('what response')
+  console.log(response)
   return Promise.resolve(response);
 }
 
diff --git a/src/app/services/slices/graph-response.slice.ts b/src/app/services/slices/graph-response.slice.ts
index f968b25c5..99b08f214 100644
--- a/src/app/services/slices/graph-response.slice.ts
+++ b/src/app/services/slices/graph-response.slice.ts
@@ -1,6 +1,6 @@
 import { BrowserAuthError } from '@azure/msal-browser';
 import { MessageBarType } from '@fluentui/react';
-import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createAsyncThunk, createSlice, PayloadAction, ThunkDispatch, UnknownAction } from '@reduxjs/toolkit';
 
 import { authenticationWrapper } from '../../../modules/authentication';
 import { ClaimsChallenge } from '../../../modules/authentication/ClaimsChallenge';
@@ -55,12 +55,11 @@ export const runQuery = createAsyncThunk(
       const response: ResponseBody = tokenPresent
         ? await authenticatedRequest(query)
         : await anonymousRequest(query, getState);
-      const resp = response as Response;
 
-      const result: Result = await processResponse(resp, dispatch, query);
+      const result: Result = await processResponse(response, dispatch, query);
 
       const duration = new Date().getTime() - new Date(createdAt).getTime();
-      const status = generateStatus({ duration, response: resp });
+      const status = generateStatus({ duration, response });
       dispatch(setQueryResponseStatus(status));
 
       const historyItem = generateHistoryItem(status, {}, query, createdAt, result, duration);
@@ -130,10 +129,11 @@ const querySlice = createSlice({
 export const { setQueryResponse } = querySlice.actions;
 export default querySlice.reducer;
 
-async function processResponse(response: Response, dispatch: Function, query: IQuery): Promise<Result> {
+async function processResponse(
+  response: ResponseBody, dispatch: ThunkDispatch<unknown, unknown, UnknownAction>, query: IQuery): Promise<Result> {
   let result = await parseResponse(response);
   const headers: Record<string, string> = getHeaders(response);
-  if (response && response.ok) {
+  if (response instanceof Response && response.ok) {
     CURRENT_RETRIES = 0;
     if (isFileResponse(headers)) {
       const contentDownloadUrl = await generateResponseDownloadUrl(response);
@@ -143,7 +143,7 @@ async function processResponse(response: Response, dispatch: Function, query: IQ
     }
   }
 
-  if (response && response.status === 401 && CURRENT_RETRIES < MAX_NUMBER_OF_RETRIES) {
+  if (response instanceof Response  && response.status === 401 && CURRENT_RETRIES < MAX_NUMBER_OF_RETRIES) {
     const successful = await runReAuthenticatedRequest(response, query);
     if (successful) {
       dispatch(runQuery(query));
@@ -154,25 +154,31 @@ async function processResponse(response: Response, dispatch: Function, query: IQ
   return { body: result, headers };
 }
 
-const generateStatus = ({ duration, response }: { duration: number; response: Response }): IStatus => {
+interface Status {
+  duration: number
+  response: ResponseBody
+}
+
+const generateStatus = (statusValues: Status): IStatus => {
+  const {duration, response} = statusValues;
   const status: IStatus = {
     messageType: MessageBarType.error,
     ok: false,
     duration,
-    status: response.status || 400,
+    status: 400,
     statusText: ''
-  };
-
-  if (response) {
-    status.status = response.status;
-    status.statusText = response.statusText === '' ? setStatusMessage(response.status) : response.statusText;
   }
+  if(response instanceof Response) {
+    if (response) {
+      status.status = response.status;
+      status.statusText = response.statusText === '' ? setStatusMessage(response.status) : response.statusText;
+    }
 
-  if (response && response.ok) {
-    CURRENT_RETRIES = 0;
-    status.ok = true;
-    status.messageType = MessageBarType.success;
-  }
+    if (response && response.ok) {
+      CURRENT_RETRIES = 0;
+      status.ok = true;
+      status.messageType = MessageBarType.success;
+    }}
   return status;
 }
 
diff --git a/src/app/utils/http-methods.utils.ts b/src/app/utils/http-methods.utils.ts
index 3d071deec..23e566b59 100644
--- a/src/app/utils/http-methods.utils.ts
+++ b/src/app/utils/http-methods.utils.ts
@@ -1,4 +1,5 @@
 import { getTheme } from '@fluentui/react';
+import { ResponseBody } from '../../types/query-response';
 
 export function getStyleFor(method: string) {
   const currentTheme = getTheme();
@@ -25,10 +26,10 @@ export function getStyleFor(method: string) {
   }
 }
 
-export function getHeaders(response: Response) {
+export function getHeaders(response: ResponseBody) {
   const headers: Record<string, string> = {};
-  for (const entry of response.headers.entries()) {
-    if (Object.prototype.hasOwnProperty.call(response.headers, entry[0])) {
+  if(response instanceof Response){
+    for (const entry of response.headers.entries()) {
       headers[entry[0]] = entry[1];
     }
   }
diff --git a/src/app/views/query-response/response/ResponseDisplayV9.tsx b/src/app/views/query-response/response/ResponseDisplayV9.tsx
index 23f59fd63..94485e5de 100644
--- a/src/app/views/query-response/response/ResponseDisplayV9.tsx
+++ b/src/app/views/query-response/response/ResponseDisplayV9.tsx
@@ -4,7 +4,7 @@ import { Image, MonacoV9 } from '../../common';
 import { formatXml } from '../../common/monaco/util/format-xml';
 
 interface ResponseDisplayProps {
-  contentType: ContentType;
+  contentType: string;
   body: string;
   height: string;
 }
@@ -13,11 +13,11 @@ const ResponseDisplayV9 = (props: ResponseDisplayProps) => {
   const { contentType, body, height } = props;
 
   switch (contentType) {
-  case ContentType.XML:
-    return <MonacoV9 body={formatXml(body)} language={ContentType.HTML} readOnly={true} height={height} />;
+  case 'application/xml':
+    return <MonacoV9 body={formatXml(body)} language="text/html" readOnly={true} height={height} />;
 
-  case ContentType.HTML:
-    return <MonacoV9 body={body} language={ContentType.HTML} readOnly={true} height={height} />;
+  case 'text/html':
+    return <MonacoV9 body={body} language="text/html" readOnly={true} height={height} />;
 
   default:
     if (isImageResponse(contentType)) {
diff --git a/src/types/history.ts b/src/types/history.ts
index efcb36c54..3d108189b 100644
--- a/src/types/history.ts
+++ b/src/types/history.ts
@@ -1,5 +1,4 @@
 import { ITheme } from '@fluentui/react';
-import { ContentType } from './enums';
 import { Header } from './query-runner';
 
 export interface IHistoryItem extends IHistory {
diff --git a/src/types/query-response.ts b/src/types/query-response.ts
index e591364a5..407737d65 100644
--- a/src/types/query-response.ts
+++ b/src/types/query-response.ts
@@ -35,4 +35,4 @@ export interface CustomBody {
   value: Partial<User & Person>[] | undefined
 
 }
-export type ResponseBody = Partial<CustomBody> | Response | string | object | null | undefined;
+export type ResponseBody = Partial<CustomBody> | string | object | null | undefined;

From ee934831631c4833142598fc067f3c4cf59d82bc Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Mon, 9 Dec 2024 15:48:59 +0300
Subject: [PATCH 09/20] feat: add CopyButtonV9 and ResponseHeadersV9
 components, update component registry

---
 .../views/common/copy-button/CopyButtonV9.tsx | 37 +++++++++++++++++
 .../lazy-loader/component-registry/index.tsx  | 36 ++++++++++++-----
 .../headers/ResponseHeadersV9.tsx             | 40 +++++++++++++++++++
 .../pivot-items/pivot-items.tsx               |  5 +--
 4 files changed, 104 insertions(+), 14 deletions(-)
 create mode 100644 src/app/views/common/copy-button/CopyButtonV9.tsx
 create mode 100644 src/app/views/query-response/headers/ResponseHeadersV9.tsx

diff --git a/src/app/views/common/copy-button/CopyButtonV9.tsx b/src/app/views/common/copy-button/CopyButtonV9.tsx
new file mode 100644
index 000000000..b2a9d40b6
--- /dev/null
+++ b/src/app/views/common/copy-button/CopyButtonV9.tsx
@@ -0,0 +1,37 @@
+import { Button } from '@fluentui/react-components';
+import { CheckmarkRegular, CopyRegular } from '@fluentui/react-icons';
+import { useState } from 'react';
+import { translateMessage } from '../../../utils/translate-messages';
+
+interface ICopyButtonProps {
+  handleOnClick: () => void;
+  isIconButton: boolean;
+}
+
+export default function CopyButton(props:ICopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const CopyIcon = !copied ? CopyRegular : CheckmarkRegular;
+  const copyLabel: string = !copied ? translateMessage('Copy') : translateMessage('Copied');
+
+
+  const handleCopyClick = async () => {
+    props.handleOnClick();
+    setCopied(true);
+    handleTimeout();
+  };
+
+  const handleTimeout = () => {
+    const timer = setTimeout(() => { setCopied(false) }, 3000); // 3 seconds
+    return () => clearTimeout(timer);
+  }
+
+  return (
+    <>
+      {props.isIconButton ?
+        <Button appearance='transparent' onClick={handleCopyClick} icon={<CopyIcon/>}/>:
+        <Button appearance='transparent' onClick={handleCopyClick}>{copyLabel}</Button>
+      }
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/app/views/common/lazy-loader/component-registry/index.tsx b/src/app/views/common/lazy-loader/component-registry/index.tsx
index 08218c510..79f882383 100644
--- a/src/app/views/common/lazy-loader/component-registry/index.tsx
+++ b/src/app/views/common/lazy-loader/component-registry/index.tsx
@@ -1,16 +1,18 @@
 import { IPermissionProps } from '../../../../../types/permissions';
 
-import LazySpecificPermissions from  '../../../query-runner/request/permissions';
-import LazyStatusMessages from  '../../../app-sections/StatusMessages';
-import LazyResponseHeaders from  '../../../query-response/headers/ResponseHeaders';
-import LazyAdaptiveCard from  '../../../query-response/adaptive-cards/AdaptiveCard';
-import LazyGraphToolkit from  '../../../query-response/graph-toolkit/GraphToolkit';
-import LazySnippets from  '../../../query-response/snippets/Snippets';
-import LazyCopyButton from  '../../copy-button/CopyButton';
-import LazyAuth from  '../../../query-runner/request/auth/Auth';
-import LazyRequestHeaders from  '../../../query-runner/request/headers/RequestHeaders';
-import LazyHistory from  '../../../sidebar/history/History';
-import LazyResourceExplorer from  '../../../sidebar/resource-explorer/ResourceExplorer';
+import LazyStatusMessages from '../../../app-sections/StatusMessages';
+import LazyAdaptiveCard from '../../../query-response/adaptive-cards/AdaptiveCard';
+import LazyGraphToolkit from '../../../query-response/graph-toolkit/GraphToolkit';
+import LazyResponseHeaders from '../../../query-response/headers/ResponseHeaders';
+import LazyResponseHeadersV9 from '../../../query-response/headers/ResponseHeadersV9';
+import LazySnippets from '../../../query-response/snippets/Snippets';
+import LazyAuth from '../../../query-runner/request/auth/Auth';
+import LazyRequestHeaders from '../../../query-runner/request/headers/RequestHeaders';
+import LazySpecificPermissions from '../../../query-runner/request/permissions';
+import LazyHistory from '../../../sidebar/history/History';
+import LazyResourceExplorer from '../../../sidebar/resource-explorer/ResourceExplorer';
+import LazyCopyButton from '../../copy-button/CopyButton';
+import LazyCopyButtonV9 from '../../copy-button/CopyButtonV9';
 
 export const Permissions = (props?: IPermissionProps) => {
   return (
@@ -42,6 +44,12 @@ export const ResponseHeaders = (props?: any) => {
   )
 }
 
+export const ResponseHeadersV9 = (props?: any) => {
+  return (
+    <LazyResponseHeadersV9 {...props} />
+  )
+}
+
 export const Snippets = (props?: any) => {
   return (
     <LazySnippets {...props} />
@@ -54,6 +62,12 @@ export const CopyButton = (props?: any) => {
   )
 }
 
+export const CopyButtonV9 = (props?: any) => {
+  return (
+    <LazyCopyButtonV9 {...props} />
+  )
+}
+
 export const Auth = (props?: any) => {
   return (
     <LazyAuth {...props} />
diff --git a/src/app/views/query-response/headers/ResponseHeadersV9.tsx b/src/app/views/query-response/headers/ResponseHeadersV9.tsx
new file mode 100644
index 000000000..9895cf966
--- /dev/null
+++ b/src/app/views/query-response/headers/ResponseHeadersV9.tsx
@@ -0,0 +1,40 @@
+
+import { RESPONSE_HEADERS_COPY_BUTTON } from '../../../../telemetry/component-names';
+
+import { useAppSelector } from '../../../../store';
+import { MonacoV9 } from '../../common';
+import { trackedGenericCopy } from '../../common/copy';
+import {
+  convertVhToPx, getResponseEditorHeight,
+  getResponseHeight
+} from '../../common/dimensions/dimensions-adjustment';
+import { CopyButtonV9 } from '../../common/lazy-loader/component-registry';
+
+const ResponseHeaders = () => {
+  const response = useAppSelector(state => state.dimensions.response)
+  const graphResponse = useAppSelector(state => state.graphResponse)
+  const responseAreaExpanded = useAppSelector(state => state.responseAreaExpanded)
+  const sampleQuery = useAppSelector(state => state.sampleQuery)
+  const { headers } = graphResponse.response;
+
+  const defaultHeight = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 220);
+  const monacoHeight = getResponseEditorHeight(120);
+
+
+  const handleCopy = async () => trackedGenericCopy(JSON.stringify(headers), RESPONSE_HEADERS_COPY_BUTTON, sampleQuery)
+
+  if (headers) {
+    return (
+      <>
+        <CopyButtonV9 handleOnClick={handleCopy} isIconButton={true}/>
+        <MonacoV9 body={headers} height={responseAreaExpanded ? defaultHeight : monacoHeight} />
+      </>
+    );
+  }
+
+  return (
+    <div />
+  );
+};
+
+export default ResponseHeaders;
diff --git a/src/app/views/query-response/pivot-items/pivot-items.tsx b/src/app/views/query-response/pivot-items/pivot-items.tsx
index e57a155b7..fd92ac2a4 100644
--- a/src/app/views/query-response/pivot-items/pivot-items.tsx
+++ b/src/app/views/query-response/pivot-items/pivot-items.tsx
@@ -9,8 +9,7 @@ import { validateExternalLink } from '../../../utils/external-link-validation';
 import { lookupToolkitUrl } from '../../../utils/graph-toolkit-lookup';
 import { translateMessage } from '../../../utils/translate-messages';
 import {
-  AdaptiveCards, GraphToolkit, ResponseHeaders,
-  Snippets
+  AdaptiveCards, GraphToolkit, ResponseHeadersV9, Snippets
 } from '../../common/lazy-loader/component-registry';
 import { darkThemeHostConfig, lightThemeHostConfig } from '../adaptive-cards/AdaptiveHostConfig';
 import { queryResponseStyles } from '../queryResponse.styles';
@@ -87,7 +86,7 @@ export const GetPivotItems = () => {
         'aria-controls': 'response-headers-tab'
       }}
     >
-      <div id={'response-headers-tab'} tabIndex={0}><ResponseHeaders /></div>
+      <div id={'response-headers-tab'} tabIndex={0}><ResponseHeadersV9 /></div>
     </PivotItem>
   ];
   if (mode === Mode.Complete) {

From 093d8ea44bb05c7cc8b1c1a18e94f90aa6ef874f Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Tue, 10 Dec 2024 16:47:31 +0300
Subject: [PATCH 10/20] feat: introduce SnippetV9 and CopyButtonV9 components,
 update related imports and types

---
 .vscode/settings.json                         |   3 +-
 .../autocomplete-action-creators.spec.ts      |   5 +-
 .../permissions-action-creator.spec.ts        |   5 +-
 .../resource-explorer-action-creators.spec.ts |   5 +-
 src/app/services/slices/snippet.slice.ts      |  14 +-
 src/app/views/common/copy-button/index.ts     |   3 +-
 src/app/views/common/copy.ts                  |  10 +
 .../lazy-loader/component-registry/index.tsx  |   6 +-
 .../pivot-items/pivot-items.tsx               |   5 +-
 .../query-response/snippets/Snippets.tsx      | 142 +++----
 .../query-response/snippets/SnippetsV9.tsx    | 187 ++++++++
 .../views/query-response/snippets/index.tsx   |   6 +-
 .../snippets/snippets-helper.tsx              | 400 +++++++++---------
 .../snippets/snippets-helper.v9.tsx           | 287 +++++++++++++
 src/telemetry/component-names.ts              |   2 +-
 src/types/snippets.ts                         |  13 +-
 16 files changed, 797 insertions(+), 296 deletions(-)
 create mode 100644 src/app/views/query-response/snippets/SnippetsV9.tsx
 create mode 100644 src/app/views/query-response/snippets/snippets-helper.v9.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8045f6e7b..85f7bf41c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -23,6 +23,7 @@
     "package.json": "package-lock.json, .npmrc"
   },
   "cSpell.words": [
-    "fluentui"
+    "fluentui",
+    "norefferer"
   ],
 }
diff --git a/src/app/services/actions/autocomplete-action-creators.spec.ts b/src/app/services/actions/autocomplete-action-creators.spec.ts
index 95d89d5fd..8ed3b1ac6 100644
--- a/src/app/services/actions/autocomplete-action-creators.spec.ts
+++ b/src/app/services/actions/autocomplete-action-creators.spec.ts
@@ -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';
 
@@ -66,8 +67,8 @@ const mockState: ApplicationState = {
   },
   snippets: {
     pending: false,
-    data: [],
-    error: null
+    data: {},
+    error: {} as SnippetError
   },
   responseAreaExpanded: false,
   dimensions: {
diff --git a/src/app/services/actions/permissions-action-creator.spec.ts b/src/app/services/actions/permissions-action-creator.spec.ts
index 852aff15a..34b668cfe 100644
--- a/src/app/services/actions/permissions-action-creator.spec.ts
+++ b/src/app/services/actions/permissions-action-creator.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';
@@ -87,8 +88,8 @@ const mockState: ApplicationState = {
   },
   snippets: {
     pending: false,
-    data: [],
-    error: null
+    data: {},
+    error: {} as SnippetError
   },
   responseAreaExpanded: false,
   dimensions: {
diff --git a/src/app/services/actions/resource-explorer-action-creators.spec.ts b/src/app/services/actions/resource-explorer-action-creators.spec.ts
index fdddf5bc6..d3ce233c1 100644
--- a/src/app/services/actions/resource-explorer-action-creators.spec.ts
+++ b/src/app/services/actions/resource-explorer-action-creators.spec.ts
@@ -6,6 +6,7 @@ import {
 } from '../../../app/services/redux-constants';
 import { ApplicationState } from '../../../store';
 import { Mode } from '../../../types/enums';
+import { SnippetError } from '../../../types/snippets';
 import { fetchResources } from '../slices/resources.slice';
 import { mockThunkMiddleware } from './mockThunkMiddleware';
 
@@ -67,8 +68,8 @@ const mockState: ApplicationState = {
   },
   snippets: {
     pending: false,
-    data: [],
-    error: null
+    data: {},
+    error: {} as SnippetError
   },
   responseAreaExpanded: false,
   dimensions: {
diff --git a/src/app/services/slices/snippet.slice.ts b/src/app/services/slices/snippet.slice.ts
index 2cdf50d07..4a7493fe2 100644
--- a/src/app/services/slices/snippet.slice.ts
+++ b/src/app/services/slices/snippet.slice.ts
@@ -2,14 +2,14 @@ import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 import { ApplicationState } from '../../../store';
 import { IRequestOptions } from '../../../types/request';
-import { ISnippet } from '../../../types/snippets';
+import { ISnippet, Snippet, SnippetError } from '../../../types/snippets';
 import { parseSampleUrl } from '../../utils/sample-url-generation';
 import { constructHeaderString } from '../../utils/snippet.utils';
 
 const initialState: ISnippet = {
   pending: false,
-  data: {},
-  error: null,
+  data: {} as Snippet,
+  error: {} as SnippetError,
   snippetTab: 'csharp'
 };
 
@@ -84,17 +84,17 @@ const snippetSlice = createSlice({
     builder
       .addCase(getSnippet.pending, (state) => {
         state.pending = true;
-        state.error = null;
+        state.error = {} as SnippetError;
         state.data = {};
       })
       .addCase(getSnippet.fulfilled, (state, action) => {
         state.pending = false;
-        state.data = action.payload;
-        state.error = null;
+        state.data = action.payload as Snippet;
+        state.error = {} as SnippetError;
       })
       .addCase(getSnippet.rejected, (state, action) => {
         state.pending = false;
-        state.error = action.payload as object;
+        state.error = action.payload as SnippetError;
         state.data = {};
       });
   }
diff --git a/src/app/views/common/copy-button/index.ts b/src/app/views/common/copy-button/index.ts
index b7452c10f..9e082d281 100644
--- a/src/app/views/common/copy-button/index.ts
+++ b/src/app/views/common/copy-button/index.ts
@@ -1,2 +1,3 @@
 import CopyButton from './CopyButton';
-export default CopyButton;
\ No newline at end of file
+import CopyButtonV9 from './CopyButtonV9';
+export { CopyButton, CopyButtonV9 };
diff --git a/src/app/views/common/copy.ts b/src/app/views/common/copy.ts
index f56d96b58..621640f03 100644
--- a/src/app/views/common/copy.ts
+++ b/src/app/views/common/copy.ts
@@ -1,3 +1,4 @@
+import { key } from 'localforage';
 import { telemetry } from '../../../telemetry';
 import { IQuery } from '../../../types/query-runner';
 
@@ -35,3 +36,12 @@ export function trackedGenericCopy(
   genericCopy(text);
   telemetry.trackCopyButtonClickEvent(componentName, sampleQuery, properties);
 }
+
+export function copyAndTrackText(
+  text: string,
+  componentName: string,
+  properties?: { [key: string]: string }
+) {
+  genericCopy(text);
+  telemetry.trackCopyButtonClickEvent(componentName, undefined, properties);
+}
diff --git a/src/app/views/common/lazy-loader/component-registry/index.tsx b/src/app/views/common/lazy-loader/component-registry/index.tsx
index 79f882383..45063fc03 100644
--- a/src/app/views/common/lazy-loader/component-registry/index.tsx
+++ b/src/app/views/common/lazy-loader/component-registry/index.tsx
@@ -5,7 +5,7 @@ import LazyAdaptiveCard from '../../../query-response/adaptive-cards/AdaptiveCar
 import LazyGraphToolkit from '../../../query-response/graph-toolkit/GraphToolkit';
 import LazyResponseHeaders from '../../../query-response/headers/ResponseHeaders';
 import LazyResponseHeadersV9 from '../../../query-response/headers/ResponseHeadersV9';
-import LazySnippets from '../../../query-response/snippets/Snippets';
+import LazySnippetsV9 from '../../../query-response/snippets/SnippetsV9';
 import LazyAuth from '../../../query-runner/request/auth/Auth';
 import LazyRequestHeaders from '../../../query-runner/request/headers/RequestHeaders';
 import LazySpecificPermissions from '../../../query-runner/request/permissions';
@@ -50,9 +50,9 @@ export const ResponseHeadersV9 = (props?: any) => {
   )
 }
 
-export const Snippets = (props?: any) => {
+export const SnippetsV9 = (props?: any) => {
   return (
-    <LazySnippets {...props} />
+    <LazySnippetsV9 {...props} />
   )
 }
 
diff --git a/src/app/views/query-response/pivot-items/pivot-items.tsx b/src/app/views/query-response/pivot-items/pivot-items.tsx
index fd92ac2a4..da251acea 100644
--- a/src/app/views/query-response/pivot-items/pivot-items.tsx
+++ b/src/app/views/query-response/pivot-items/pivot-items.tsx
@@ -9,7 +9,7 @@ import { validateExternalLink } from '../../../utils/external-link-validation';
 import { lookupToolkitUrl } from '../../../utils/graph-toolkit-lookup';
 import { translateMessage } from '../../../utils/translate-messages';
 import {
-  AdaptiveCards, GraphToolkit, ResponseHeadersV9, Snippets
+  AdaptiveCards, GraphToolkit, ResponseHeadersV9, SnippetsV9
 } from '../../common/lazy-loader/component-registry';
 import { darkThemeHostConfig, lightThemeHostConfig } from '../adaptive-cards/AdaptiveHostConfig';
 import { queryResponseStyles } from '../queryResponse.styles';
@@ -102,7 +102,8 @@ export const GetPivotItems = () => {
           'aria-controls': 'code-snippets-tab'
         }}
       >
-        <div id={'code-snippets-tab'} tabIndex={0}><Snippets /></div>
+        {/* <div id={'code-snippets-tab'} tabIndex={0}><Snippets /></div> */}
+        <div id={'code-snippets-tab'} tabIndex={0}><SnippetsV9 /></div>
       </PivotItem>,
       <PivotItem
         key='graph-toolkit'
diff --git a/src/app/views/query-response/snippets/Snippets.tsx b/src/app/views/query-response/snippets/Snippets.tsx
index 0a037d151..a55bb8b2a 100644
--- a/src/app/views/query-response/snippets/Snippets.tsx
+++ b/src/app/views/query-response/snippets/Snippets.tsx
@@ -1,77 +1,77 @@
-import { FontSizes, Label, Pivot, PivotItem } from '@fluentui/react';
-import { useContext } from 'react';
+// import { FontSizes, Label, Pivot, PivotItem } from '@fluentui/react';
+// import { useContext } from 'react';
 
-import { useAppDispatch, useAppSelector } from '../../../../store';
-import { componentNames, telemetry } from '../../../../telemetry';
-import { ValidationContext } from '../../../services/context/validation-context/ValidationContext';
-import { setSnippetTabSuccess } from '../../../services/slices/snippet.slice';
-import { translateMessage } from '../../../utils/translate-messages';
-import { renderSnippets } from './snippets-helper';
+// import { useAppDispatch, useAppSelector } from '../../../../store';
+// import { componentNames, telemetry } from '../../../../telemetry';
+// import { ValidationContext } from '../../../services/context/validation-context/ValidationContext';
+// import { setSnippetTabSuccess } from '../../../services/slices/snippet.slice';
+// import { translateMessage } from '../../../utils/translate-messages';
+// import { renderSnippets } from './snippets-helper';
 
-function GetSnippets() {
-  const dispatch = useAppDispatch();
-  const validation = useContext(ValidationContext);
+// function GetSnippets() {
+//   const dispatch = useAppDispatch();
+//   const validation = useContext(ValidationContext);
 
-  const { snippets, sampleQuery } = useAppSelector((state) => state);
-  const supportedLanguages = {
-    'CSharp': {
-      sdkDownloadLink: 'https://aka.ms/csharpsdk',
-      sdkDocLink: 'https://aka.ms/sdk-doc'
-    },
-    'PowerShell': {
-      sdkDownloadLink: 'https://aka.ms/pshellsdk',
-      sdkDocLink: 'https://aka.ms/pshellsdkdocs'
-    },
-    'Go': {
-      sdkDownloadLink: 'https://aka.ms/graphgosdk',
-      sdkDocLink: 'https://aka.ms/sdk-doc'
-    },
-    'Java': {
-      sdkDownloadLink: 'https://aka.ms/graphjavasdk',
-      sdkDocLink: 'https://aka.ms/sdk-doc'
-    },
-    'JavaScript': {
-      sdkDownloadLink: 'https://aka.ms/graphjssdk',
-      sdkDocLink: 'https://aka.ms/sdk-doc'
-    },
-    'PHP': {
-      sdkDownloadLink: 'https://aka.ms/graphphpsdk',
-      sdkDocLink: 'https://aka.ms/sdk-doc'
-    },
-    'Python': {
-      sdkDownloadLink: 'https://aka.ms/msgraphpythonsdk',
-      sdkDocLink: 'https://aka.ms/sdk-doc'
-    },
-    'CLI': {
-      sdkDownloadLink: 'https://aka.ms/msgraphclisdk',
-      sdkDocLink: 'https://aka.ms/sdk-doc'
-    }
-  };
+//   const { snippets, sampleQuery } = useAppSelector((state) => state);
+//   const supportedLanguages = {
+//     'CSharp': {
+//       sdkDownloadLink: 'https://aka.ms/csharpsdk',
+//       sdkDocLink: 'https://aka.ms/sdk-doc'
+//     },
+//     'PowerShell': {
+//       sdkDownloadLink: 'https://aka.ms/pshellsdk',
+//       sdkDocLink: 'https://aka.ms/pshellsdkdocs'
+//     },
+//     'Go': {
+//       sdkDownloadLink: 'https://aka.ms/graphgosdk',
+//       sdkDocLink: 'https://aka.ms/sdk-doc'
+//     },
+//     'Java': {
+//       sdkDownloadLink: 'https://aka.ms/graphjavasdk',
+//       sdkDocLink: 'https://aka.ms/sdk-doc'
+//     },
+//     'JavaScript': {
+//       sdkDownloadLink: 'https://aka.ms/graphjssdk',
+//       sdkDocLink: 'https://aka.ms/sdk-doc'
+//     },
+//     'PHP': {
+//       sdkDownloadLink: 'https://aka.ms/graphphpsdk',
+//       sdkDocLink: 'https://aka.ms/sdk-doc'
+//     },
+//     'Python': {
+//       sdkDownloadLink: 'https://aka.ms/msgraphpythonsdk',
+//       sdkDocLink: 'https://aka.ms/sdk-doc'
+//     },
+//     'CLI': {
+//       sdkDownloadLink: 'https://aka.ms/msgraphclisdk',
+//       sdkDocLink: 'https://aka.ms/sdk-doc'
+//     }
+//   };
 
-  const handlePivotItemClick = (pivotItem?: PivotItem) => {
-    if (!pivotItem) {
-      return;
-    }
-    telemetry.trackTabClickEvent(pivotItem.props.itemKey!, sampleQuery);
-    dispatch(setSnippetTabSuccess(pivotItem.props.itemKey!));
-  }
+//   const handlePivotItemClick = (pivotItem?: PivotItem) => {
+//     if (!pivotItem) {
+//       return;
+//     }
+//     telemetry.trackTabClickEvent(pivotItem.props.itemKey!, sampleQuery);
+//     dispatch(setSnippetTabSuccess(pivotItem.props.itemKey!));
+//   }
 
-  return validation.isValid ? <Pivot
-    className={'unstyled-pivot'}
-    selectedKey={snippets.snippetTab}
-    onLinkClick={handlePivotItemClick}
-    styles={{ text: { fontSize: FontSizes.size14 } }}
-    overflowBehavior='menu'
-    overflowAriaLabel={translateMessage('More items')}
-  >
-    {renderSnippets(supportedLanguages)}
-  </Pivot> : <Label style={{ marginLeft: '12px' }}>
-    {translateMessage('Invalid URL')}!
-  </Label>
-}
+//   return validation.isValid ? <Pivot
+//     className={'unstyled-pivot'}
+//     selectedKey={snippets.snippetTab}
+//     onLinkClick={handlePivotItemClick}
+//     styles={{ text: { fontSize: FontSizes.size14 } }}
+//     overflowBehavior='menu'
+//     overflowAriaLabel={translateMessage('More items')}
+//   >
+//     {renderSnippets(supportedLanguages)}
+//   </Pivot> : <Label style={{ marginLeft: '12px' }}>
+//     {translateMessage('Invalid URL')}!
+//   </Label>
+// }
 
-const Snippets = telemetry.trackReactComponent(
-  GetSnippets,
-  componentNames.CODE_SNIPPETS_TAB
-);
-export default Snippets;
\ No newline at end of file
+// const Snippets = telemetry.trackReactComponent(
+//   GetSnippets,
+//   componentNames.CODE_SNIPPETS_TAB
+// );
+// export default Snippets;
\ No newline at end of file
diff --git a/src/app/views/query-response/snippets/SnippetsV9.tsx b/src/app/views/query-response/snippets/SnippetsV9.tsx
new file mode 100644
index 000000000..ee098bbeb
--- /dev/null
+++ b/src/app/views/query-response/snippets/SnippetsV9.tsx
@@ -0,0 +1,187 @@
+import {
+  Label, Link, makeStyles, SelectTabData, SelectTabEvent, Spinner, Tab, TabList, TabValue
+} from '@fluentui/react-components';
+import { useContext, useEffect, useState } from 'react';
+import { useAppDispatch, useAppSelector } from '../../../../store';
+import { componentNames, telemetry } from '../../../../telemetry';
+import { CODE_SNIPPETS_COPY_BUTTON } from '../../../../telemetry/component-names';
+import { SnippetError } from '../../../../types/snippets';
+import { ValidationContext } from '../../../services/context/validation-context/ValidationContext';
+import { getSnippet } from '../../../services/slices/snippet.slice';
+import { translateMessage } from '../../../utils/translate-messages';
+import { MonacoV9 } from '../../common';
+import { copyAndTrackText } from '../../common/copy';
+import { getResponseEditorHeight } from '../../common/dimensions/dimensions-adjustment';
+import { CopyButtonV9 } from '../../common/lazy-loader/component-registry';
+
+interface LanguageSnippet {
+  [language:string]: {
+    sdkDocLink: string,
+    sdkDownloadLink: string,
+  }
+}
+
+const supportedLanguages: LanguageSnippet= {
+  'CSharp': {
+    sdkDownloadLink: 'https://aka.ms/csharpsdk',
+    sdkDocLink: 'https://aka.ms/sdk-doc'
+  },
+  'PowerShell': {
+    sdkDownloadLink: 'https://aka.ms/pshellsdk',
+    sdkDocLink: 'https://aka.ms/pshellsdkdocs'
+  },
+  'Go': {
+    sdkDownloadLink: 'https://aka.ms/graphgosdk',
+    sdkDocLink: 'https://aka.ms/sdk-doc'
+  },
+  'Java': {
+    sdkDownloadLink: 'https://aka.ms/graphjavasdk',
+    sdkDocLink: 'https://aka.ms/sdk-doc'
+  },
+  'JavaScript': {
+    sdkDownloadLink: 'https://aka.ms/graphjssdk',
+    sdkDocLink: 'https://aka.ms/sdk-doc'
+  },
+  'PHP': {
+    sdkDownloadLink: 'https://aka.ms/graphphpsdk',
+    sdkDocLink: 'https://aka.ms/sdk-doc'
+  },
+  'Python': {
+    sdkDownloadLink: 'https://aka.ms/msgraphpythonsdk',
+    sdkDocLink: 'https://aka.ms/sdk-doc'
+  },
+  'CLI': {
+    sdkDownloadLink: 'https://aka.ms/msgraphclisdk',
+    sdkDocLink: 'https://aka.ms/sdk-doc'
+  }
+};
+
+const useSnippetStyles = makeStyles({
+  container: {
+    margin: '0 40px'
+  }
+})
+
+const setCommentSymbol = (language: string): string => {
+  const lang = language.trim().toLowerCase()
+  return (lang=== 'powershell' || lang === 'python') ? '#' : '//';
+}
+
+const getLanguageComponentName = (
+  language: string, isDocumentationLink: boolean,
+  snippetComponentNames: {[language: string]: {sdk: string, doc: string}}) : string => {
+  const snippetComponentEntries = Object.entries(snippetComponentNames);
+  const snippetLanguageEntry = snippetComponentEntries.find(
+    ([key]) => language.toLocaleLowerCase() === key.toLocaleLowerCase()
+  );
+  const componentName = isDocumentationLink ? snippetLanguageEntry?.[1].doc : snippetLanguageEntry?.[1].sdk;
+  return componentName || '' ;
+}
+
+
+const trackLinkClickedEvent = (
+  link: string, language: string, e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+  const isDocumentationLink : boolean = link.includes('doc')
+  const componentName = getLanguageComponentName(language, isDocumentationLink, componentNames.CODE_SNIPPET_LANGUAGES);
+  telemetry.trackLinkClickEvent(e.currentTarget.href, componentName);
+}
+
+const addExtraSnippetInformation = (language: string) : JSX.Element => {
+  const { sdkDownloadLink, sdkDocLink } = supportedLanguages[language];
+  const paragraph = sdkDownloadLink + setCommentSymbol(language) +
+    translateMessage('Leverage libraries') + language + translateMessage('Client library')
+  const sdkParagraph = setCommentSymbol(language) + translateMessage('SDKs documentation')
+  return (
+    <div>
+      <p>{paragraph}</p>
+      <Link
+        onClick={(e) => trackLinkClickedEvent(language, sdkDownloadLink, e)}
+        href={sdkDownloadLink} inline rel='norefferer noopener' target='_blank'>{sdkDownloadLink}</Link>
+      <p>{sdkParagraph}</p>
+      <Link
+        onClick={(e) => trackLinkClickedEvent(language, sdkDownloadLink, e)}
+        href={sdkDocLink} inline rel='norefferer noopener' target='_blank'>{sdkDocLink}</Link>
+    </div>
+  )
+}
+
+const GetSnippets = ()=> {
+  const validation = useContext(ValidationContext);
+  return <div>
+    {validation.isValid && <RenderSnippets />}
+    {!validation.isValid && <Label weight="semibold">{translateMessage('Invalid URL')}!</Label>}
+  </div>
+}
+
+const RenderSnippets = ()=>{
+  const styles = useSnippetStyles()
+  const [selectedLanguage, setSelectedLanguage] = useState<TabValue>('CSharp');
+
+  const onTabSelect = (_event: SelectTabEvent, data: SelectTabData) => {
+    setSelectedLanguage(data.value);
+  };
+  return <div id="snippets-tablist" className={styles.container}>
+    <TabList selectedValue={selectedLanguage} onTabSelect={onTabSelect}>
+      {Object.keys(supportedLanguages).map((language: string) => (
+        <Tab key={language} value={language}>
+          {language === 'CSharp' ? 'C#' : language}
+        </Tab>
+      ))}
+    </TabList>
+    <div id="snippet-content"><SnippetContent language={selectedLanguage as string}/></div>
+  </div>
+
+}
+
+interface SnippetContentProps {
+  language: string
+}
+
+const SnippetContent = (props: SnippetContentProps)=>{
+  const dispatch = useAppDispatch()
+  const language = props.language.toLowerCase();
+  const snippets = useAppSelector(state => state.snippets)
+  const { data, pending: loadingState, error } = snippets;
+  const [snippetError, setSnippetError] = useState<SnippetError>(error as SnippetError)
+  const hasSnippetError= (snippetError?.status && snippetError.status === 404) ||
+  (snippetError?.status && snippetError.status === 400)
+
+  const snippet = (!loadingState && data) ? data[language] : '';
+
+  const monacoHeight = getResponseEditorHeight(235);
+
+  const handleCopy = async () => {
+    copyAndTrackText(snippet, CODE_SNIPPETS_COPY_BUTTON, {Language: language})
+  }
+
+  useEffect(() => {
+    dispatch(getSnippet(language));
+  }, [language]);
+
+  useEffect(()=>{
+    setSnippetError(error)
+  }, [error])
+
+  return <div>
+    {loadingState && !hasSnippetError &&
+      <Spinner labelPosition="below" label={translateMessage('Fetching code snippet' )} />}
+    {!loadingState && hasSnippetError &&
+      <Label weight="semibold">{translateMessage('Snippet not available' )}</Label>}
+    <div>
+      <CopyButtonV9 isIconButton={true} handleOnClick={handleCopy}></CopyButtonV9>
+      <MonacoV9
+        body={snippet}
+        language={language}
+        readOnly={true}
+        height={monacoHeight}
+        extraInfoElement={addExtraSnippetInformation(props.language)}
+      />
+    </div>
+  </div>
+}
+
+const Snippets = telemetry.trackReactComponent(
+  GetSnippets,
+  componentNames.CODE_SNIPPETS_TAB
+);
+export default Snippets;
\ No newline at end of file
diff --git a/src/app/views/query-response/snippets/index.tsx b/src/app/views/query-response/snippets/index.tsx
index 7829ae60c..5a762c069 100644
--- a/src/app/views/query-response/snippets/index.tsx
+++ b/src/app/views/query-response/snippets/index.tsx
@@ -1,2 +1,4 @@
-import Snippets  from './Snippets';
-export default Snippets;
+// import Snippets from './Snippets';
+import SnippetsV9 from './SnippetsV9';
+export { SnippetsV9 };
+
diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx
index a06386000..789bcac15 100644
--- a/src/app/views/query-response/snippets/snippets-helper.tsx
+++ b/src/app/views/query-response/snippets/snippets-helper.tsx
@@ -1,200 +1,200 @@
-/* eslint-disable max-len */
-import { ITheme, Label, Link, PivotItem, getTheme } from '@fluentui/react';
-import { useEffect, useState } from 'react';
-
-import { useAppDispatch, useAppSelector } from '../../../../store';
-import { componentNames, telemetry } from '../../../../telemetry';
-import { CODE_SNIPPETS_COPY_BUTTON } from '../../../../telemetry/component-names';
-import { getSnippet } from '../../../services/slices/snippet.slice';
-import { translateMessage } from '../../../utils/translate-messages';
-import { Monaco } from '../../common';
-import { trackedGenericCopy } from '../../common/copy';
-import {
-  convertVhToPx, getResponseEditorHeight,
-  getResponseHeight
-} from '../../common/dimensions/dimensions-adjustment';
-import { CopyButton } from '../../common/lazy-loader/component-registry';
-import { getSnippetStyles } from './Snippets.styles';
-
-interface ISnippetProps {
-  language: string;
-  snippetInfo: ISupportedLanguages;
-}
-
-interface ISupportedLanguages {
-  [language: string]: {
-    sdkDownloadLink: string;
-    sdkDocLink: string;
-  };
-}
-
-export function renderSnippets(supportedLanguages: ISupportedLanguages) {
-  const sortedSupportedLanguages: ISupportedLanguages = {};
-  const sortedKeys = Object.keys(supportedLanguages).sort((lang1, lang2) => {
-    if (lang1 === 'CSharp') {
-      return -1;
-    }
-    if (lang2 === 'CSharp') {
-      return 1;
-    }
-    if (lang1 < lang2) {
-      return -1;
-    } else if (lang1 > lang2) {
-      return 1;
-    }
-    return 0;
-  });
-
-  sortedKeys.forEach(key => {
-    sortedSupportedLanguages[key] = supportedLanguages[key];
-  });
-
-
-  return Object.keys(sortedSupportedLanguages).
-    map((language: string) => (
-      <PivotItem
-        key={language}
-        headerText={language === 'CSharp' ? 'C#' : language}
-        headerButtonProps={{
-          'aria-controls': `${language}-tab`
-        }}
-        itemKey={language}
-        tabIndex={0}
-        id={`${language}-tab`}
-      >
-        <Snippet language={language} snippetInfo={supportedLanguages} />
-      </PivotItem>
-    ));
-}
-
-function Snippet(props: ISnippetProps) {
-  let { language } = props;
-  const { sdkDownloadLink, sdkDocLink } = props.snippetInfo[language];
-  const unformattedLanguage = language;
-
-  /**
-   * Converting language lowercase so that we won't have to call toLowerCase() in multiple places.
-   *
-   * Ie the monaco component expects a lowercase string for the language prop and the graphexplorerapi expects
-   * a lowercase string for the param value.
-   */
-
-  language = language.toLowerCase();
-
-  const { dimensions: { response }, snippets,
-    responseAreaExpanded, sampleQuery } = useAppSelector((state) => state);
-  const { data, pending: loadingState, error } = snippets;
-  const snippet = (!loadingState && data) ? data[language] : null;
-  const responseHeight = getResponseHeight(response.height, responseAreaExpanded);
-  const defaultHeight = convertVhToPx(responseHeight, 220);
-  const [snippetError, setSnippetError] = useState(error);
-
-  const monacoHeight = getResponseEditorHeight(235);
-
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    setSnippetError(error?.error ? error.error : error);
-  }, [error])
-
-  const handleCopy = async () => {
-    trackedGenericCopy(snippet, CODE_SNIPPETS_COPY_BUTTON, sampleQuery, { Language: language });
-  }
-
-  useEffect(() => {
-    dispatch(getSnippet(language));
-  }, [sampleQuery.sampleUrl]);
-
-  const setCommentSymbol = (): string => {
-    return (language.trim() === 'powershell' || language.trim() === 'python') ? '#' : '//';
-  }
-
-  const trackLinkClickedEvent = (link: string, e:any) => {
-    const isDocumentationLink : boolean = link.includes('doc')
-    const componentName = getLanguageComponentName(isDocumentationLink, componentNames.CODE_SNIPPET_LANGUAGES);
-    telemetry.trackLinkClickEvent(e.currentTarget.href, componentName);
-  }
-  const getLanguageComponentName = (isDocumentationLink: boolean, snippetComponentNames: object) : string => {
-    const snippetComponentEntries = Object.entries(snippetComponentNames);
-    const snippetLanguageEntry = snippetComponentEntries.find(
-      ([key]) => language.toLocaleLowerCase() === key.toLocaleLowerCase()
-    );
-    const componentName = isDocumentationLink ? snippetLanguageEntry?.[1].doc : snippetLanguageEntry?.[1].sdk;
-    return componentName || '' ;
-  }
-
-  const addExtraSnippetInformation = () : JSX.Element => {
-    const currentTheme: ITheme = getTheme();
-    const snippetLinkStyles = getSnippetStyles(currentTheme);
-    const snippetCommentStyles = getSnippetStyles(currentTheme).snippetComments;
-    return (
-      <div style={snippetCommentStyles}>
-
-        {setCommentSymbol()} {translateMessage('Leverage libraries')} {unformattedLanguage} {translateMessage('Client library')}
-
-        <Link href={sdkDownloadLink} underline styles={snippetLinkStyles}
-          onClick={(e) => trackLinkClickedEvent(sdkDownloadLink, e)} target={'_blank'} rel='noreferrer noopener'>
-          {sdkDownloadLink}
-        </Link>
-        <br />
-
-        {setCommentSymbol()} {translateMessage('SDKs documentation')}
-
-        <Link href={sdkDocLink} underline styles={snippetLinkStyles}
-          onClick={(e) => trackLinkClickedEvent(sdkDocLink, e)} target={'_blank'} rel='noreferrer noopener'>
-          {sdkDocLink}
-        </Link>
-      </div>
-    );
-  }
-
-  const displayError = (): JSX.Element | null => {
-    if((!loadingState && snippet) || (!loadingState && !snippetError)){
-      return null;
-    }
-    if(
-      (snippetError?.status && snippetError.status === 404) ||
-      (snippetError?.status && snippetError.status === 400)
-    ){
-      return(
-        <Label style={{ padding: 10 }}>
-          {translateMessage('Snippet not available' )}
-        </Label>
-      )
-    }
-    else{
-      return (
-        <>
-          {!loadingState &&
-            <Label style={{ padding: 10 }}>
-              {translateMessage('Fetching code snippet failing' )}
-            </Label>
-          }
-        </>
-      )
-    }
-  }
-
-  return (
-    <div style={{ display: 'block' }} id={`${language}-tab`}>
-      {loadingState &&
-        <Label style={{ padding: 10 }}>
-          {translateMessage('Fetching code snippet' )}...
-        </Label>
-      }
-      {!loadingState && snippet &&
-        <>
-          <CopyButton isIconButton={true} style={{ float: 'right', zIndex: 1 }} handleOnClick={handleCopy} />
-          <Monaco
-            body={snippet}
-            language={language}
-            readOnly={true}
-            height={responseAreaExpanded ? defaultHeight : monacoHeight}
-            extraInfoElement={addExtraSnippetInformation()}
-          />
-        </>
-      }
-      {displayError()}
-    </div>
-  );
-}
\ No newline at end of file
+// /* eslint-disable max-len */
+// import { ITheme, Label, Link, PivotItem, getTheme } from '@fluentui/react';
+// import { useEffect, useState } from 'react';
+
+// import { useAppDispatch, useAppSelector } from '../../../../store';
+// import { componentNames, telemetry } from '../../../../telemetry';
+// import { CODE_SNIPPETS_COPY_BUTTON } from '../../../../telemetry/component-names';
+// import { getSnippet } from '../../../services/slices/snippet.slice';
+// import { translateMessage } from '../../../utils/translate-messages';
+// import { Monaco } from '../../common';
+// import { trackedGenericCopy } from '../../common/copy';
+// import {
+//   convertVhToPx, getResponseEditorHeight,
+//   getResponseHeight
+// } from '../../common/dimensions/dimensions-adjustment';
+// import { CopyButton } from '../../common/lazy-loader/component-registry';
+// import { getSnippetStyles } from './Snippets.styles';
+
+// interface ISnippetProps {
+//   language: string;
+//   snippetInfo: ISupportedLanguages;
+// }
+
+// interface ISupportedLanguages {
+//   [language: string]: {
+//     sdkDownloadLink: string;
+//     sdkDocLink: string;
+//   };
+// }
+
+// export function renderSnippets(supportedLanguages: ISupportedLanguages) {
+//   const sortedSupportedLanguages: ISupportedLanguages = {};
+//   const sortedKeys = Object.keys(supportedLanguages).sort((lang1, lang2) => {
+//     if (lang1 === 'CSharp') {
+//       return -1;
+//     }
+//     if (lang2 === 'CSharp') {
+//       return 1;
+//     }
+//     if (lang1 < lang2) {
+//       return -1;
+//     } else if (lang1 > lang2) {
+//       return 1;
+//     }
+//     return 0;
+//   });
+
+//   sortedKeys.forEach(key => {
+//     sortedSupportedLanguages[key] = supportedLanguages[key];
+//   });
+
+
+//   return Object.keys(sortedSupportedLanguages).
+//     map((language: string) => (
+//       <PivotItem
+//         key={language}
+//         headerText={language === 'CSharp' ? 'C#' : language}
+//         headerButtonProps={{
+//           'aria-controls': `${language}-tab`
+//         }}
+//         itemKey={language}
+//         tabIndex={0}
+//         id={`${language}-tab`}
+//       >
+//         <Snippet language={language} snippetInfo={supportedLanguages} />
+//       </PivotItem>
+//     ));
+// }
+
+// function Snippet(props: ISnippetProps) {
+//   let { language } = props;
+//   const { sdkDownloadLink, sdkDocLink } = props.snippetInfo[language];
+//   const unformattedLanguage = language;
+
+//   /**
+//    * Converting language lowercase so that we won't have to call toLowerCase() in multiple places.
+//    *
+//    * Ie the monaco component expects a lowercase string for the language prop and the graphexplorerapi expects
+//    * a lowercase string for the param value.
+//    */
+
+//   language = language.toLowerCase();
+
+//   const { dimensions: { response }, snippets,
+//     responseAreaExpanded, sampleQuery } = useAppSelector((state) => state);
+//   const { data, pending: loadingState, error } = snippets;
+//   const snippet = (!loadingState && data) ? data[language] : null;
+//   const responseHeight = getResponseHeight(response.height, responseAreaExpanded);
+//   const defaultHeight = convertVhToPx(responseHeight, 220);
+//   const [snippetError, setSnippetError] = useState(error);
+
+//   const monacoHeight = getResponseEditorHeight(235);
+
+//   const dispatch = useAppDispatch();
+
+//   useEffect(() => {
+//     setSnippetError(error?.error ? error.error : error);
+//   }, [error])
+
+//   const handleCopy = async () => {
+//     trackedGenericCopy(snippet, CODE_SNIPPETS_COPY_BUTTON, sampleQuery, { Language: language });
+//   }
+
+//   useEffect(() => {
+//     dispatch(getSnippet(language));
+//   }, [sampleQuery.sampleUrl]);
+
+//   const setCommentSymbol = (): string => {
+//     return (language.trim() === 'powershell' || language.trim() === 'python') ? '#' : '//';
+//   }
+
+//   const trackLinkClickedEvent = (link: string, e:any) => {
+//     const isDocumentationLink : boolean = link.includes('doc')
+//     const componentName = getLanguageComponentName(isDocumentationLink, componentNames.CODE_SNIPPET_LANGUAGES);
+//     telemetry.trackLinkClickEvent(e.currentTarget.href, componentName);
+//   }
+//   const getLanguageComponentName = (isDocumentationLink: boolean, snippetComponentNames: object) : string => {
+//     const snippetComponentEntries = Object.entries(snippetComponentNames);
+//     const snippetLanguageEntry = snippetComponentEntries.find(
+//       ([key]) => language.toLocaleLowerCase() === key.toLocaleLowerCase()
+//     );
+//     const componentName = isDocumentationLink ? snippetLanguageEntry?.[1].doc : snippetLanguageEntry?.[1].sdk;
+//     return componentName || '' ;
+//   }
+
+//   const addExtraSnippetInformation = () : JSX.Element => {
+//     const currentTheme: ITheme = getTheme();
+//     const snippetLinkStyles = getSnippetStyles(currentTheme);
+//     const snippetCommentStyles = getSnippetStyles(currentTheme).snippetComments;
+//     return (
+//       <div style={snippetCommentStyles}>
+
+//         {setCommentSymbol()} {translateMessage('Leverage libraries')} {unformattedLanguage} {translateMessage('Client library')}
+
+//         <Link href={sdkDownloadLink} underline styles={snippetLinkStyles}
+//           onClick={(e) => trackLinkClickedEvent(sdkDownloadLink, e)} target={'_blank'} rel='noreferrer noopener'>
+//           {sdkDownloadLink}
+//         </Link>
+//         <br />
+
+//         {setCommentSymbol()} {translateMessage('SDKs documentation')}
+
+//         <Link href={sdkDocLink} underline styles={snippetLinkStyles}
+//           onClick={(e) => trackLinkClickedEvent(sdkDocLink, e)} target={'_blank'} rel='noreferrer noopener'>
+//           {sdkDocLink}
+//         </Link>
+//       </div>
+//     );
+//   }
+
+//   const displayError = (): JSX.Element | null => {
+//     if((!loadingState && snippet) || (!loadingState && !snippetError)){
+//       return null;
+//     }
+//     if(
+//       (snippetError?.status && snippetError.status === 404) ||
+//       (snippetError?.status && snippetError.status === 400)
+//     ){
+//       return(
+//         <Label style={{ padding: 10 }}>
+//           {translateMessage('Snippet not available' )}
+//         </Label>
+//       )
+//     }
+//     else{
+//       return (
+//         <>
+//           {!loadingState &&
+//             <Label style={{ padding: 10 }}>
+//               {translateMessage('Fetching code snippet failing' )}
+//             </Label>
+//           }
+//         </>
+//       )
+//     }
+//   }
+
+//   return (
+//     <div style={{ display: 'block' }} id={`${language}-tab`}>
+//       {loadingState &&
+//         <Label style={{ padding: 10 }}>
+//           {translateMessage('Fetching code snippet' )}...
+//         </Label>
+//       }
+//       {!loadingState && snippet &&
+//         <>
+//           <CopyButton isIconButton={true} style={{ float: 'right', zIndex: 1 }} handleOnClick={handleCopy} />
+//           <Monaco
+//             body={snippet}
+//             language={language}
+//             readOnly={true}
+//             height={responseAreaExpanded ? defaultHeight : monacoHeight}
+//             extraInfoElement={addExtraSnippetInformation()}
+//           />
+//         </>
+//       }
+//       {displayError()}
+//     </div>
+//   );
+// }
\ No newline at end of file
diff --git a/src/app/views/query-response/snippets/snippets-helper.v9.tsx b/src/app/views/query-response/snippets/snippets-helper.v9.tsx
new file mode 100644
index 000000000..753d85d27
--- /dev/null
+++ b/src/app/views/query-response/snippets/snippets-helper.v9.tsx
@@ -0,0 +1,287 @@
+import { getTheme, ITheme, Label, Link, PivotItem } from '@fluentui/react';
+import { useEffect, useState } from 'react';
+
+import { makeStyles, SelectTabData, SelectTabEvent, Tab, TabList, TabValue } from '@fluentui/react-components';
+import { useAppDispatch, useAppSelector } from '../../../../store';
+import { componentNames, telemetry } from '../../../../telemetry';
+import { CODE_SNIPPETS_COPY_BUTTON } from '../../../../telemetry/component-names';
+import { SnippetError } from '../../../../types/snippets';
+import { getSnippet } from '../../../services/slices/snippet.slice';
+import { translateMessage } from '../../../utils/translate-messages';
+import { Monaco, MonacoV9 } from '../../common';
+import { copyAndTrackText, trackedGenericCopy } from '../../common/copy';
+import {
+  convertVhToPx, getResponseEditorHeight, getResponseHeight
+} from '../../common/dimensions/dimensions-adjustment';
+import { CopyButton, CopyButtonV9 } from '../../common/lazy-loader/component-registry';
+import { getSnippetStyles } from './Snippets.styles';
+
+interface ISnippetProps {
+  language: string;
+  snippetInfo: ISupportedLanguages;
+}
+
+interface ISupportedLanguages {
+  [language: string]: {
+    sdkDownloadLink: string;
+    sdkDocLink: string;
+  };
+}
+
+export function renderSnippets(supportedLanguages: ISupportedLanguages) {
+  const sortedSupportedLanguages: ISupportedLanguages = {};
+  const sortedKeys = Object.keys(supportedLanguages).sort((lang1, lang2) => {
+    if (lang1 === 'CSharp') {
+      return -1;
+    }
+    if (lang2 === 'CSharp') {
+      return 1;
+    }
+    if (lang1 < lang2) {
+      return -1;
+    } else if (lang1 > lang2) {
+      return 1;
+    }
+    return 0;
+  });
+
+  sortedKeys.forEach(key => {
+    sortedSupportedLanguages[key] = supportedLanguages[key];
+  });
+
+
+  return Object.keys(sortedSupportedLanguages).
+    map((language: string) => (
+      <PivotItem
+        key={language}
+        headerText={language === 'CSharp' ? 'C#' : language}
+        headerButtonProps={{
+          'aria-controls': `${language}-tab`
+        }}
+        itemKey={language}
+        tabIndex={0}
+        id={`${language}-tab`}
+      >
+        <Snippet language={language} snippetInfo={supportedLanguages} />
+      </PivotItem>
+    ));
+}
+
+function Snippet(props: ISnippetProps) {
+
+  /**
+   * Converting language lowercase so that we won't have to call toLowerCase() in multiple places.
+  *
+  * Ie the monaco component expects a lowercase string for the language prop and the graphexplorerapi expects
+  * a lowercase string for the param value.
+  */
+  let { language } = props;
+  const { sdkDownloadLink, sdkDocLink } = props.snippetInfo[language];
+
+  const unformattedLanguage = language;
+  language = language.toLowerCase();
+
+  const response = useAppSelector(state => state.dimensions.response)
+  const responseAreaExpanded = useAppSelector(state => state.responseAreaExpanded)
+  const snippets = useAppSelector(state => state.snippets)
+  const sampleQuery = useAppSelector(state => state.sampleQuery)
+
+
+  const { data, pending: loadingState, error } = snippets;
+  const snippet = (!loadingState && data) ? data[language] : '';
+  const responseHeight = getResponseHeight(response.height, responseAreaExpanded);
+  const defaultHeight = convertVhToPx(responseHeight, 220);
+  const [snippetError, setSnippetError] = useState<SnippetError>(error);
+
+  const monacoHeight = getResponseEditorHeight(235);
+
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    setSnippetError(error?.error ? { ...error, error: error.error } : error);
+  }, [error])
+
+  const handleCopy = async () => {
+    trackedGenericCopy(snippet, CODE_SNIPPETS_COPY_BUTTON, sampleQuery, { Language: language });
+  }
+
+  useEffect(() => {
+    dispatch(getSnippet(language));
+  }, [sampleQuery.sampleUrl]);
+
+  const setCommentSymbol = (): string => {
+    return (language.trim() === 'powershell' || language.trim() === 'python') ? '#' : '//';
+  }
+
+  const trackLinkClickedEvent = (link: string, e: any) => {
+    const isDocumentationLink : boolean = link.includes('doc')
+    const componentName = getLanguageComponentName(isDocumentationLink, componentNames.CODE_SNIPPET_LANGUAGES);
+    telemetry.trackLinkClickEvent(e.currentTarget.href, componentName);
+  }
+  const getLanguageComponentName = (isDocumentationLink: boolean, snippetComponentNames: object) : string => {
+    const snippetComponentEntries = Object.entries(snippetComponentNames);
+    const snippetLanguageEntry = snippetComponentEntries.find(
+      ([key]) => language.toLocaleLowerCase() === key.toLocaleLowerCase()
+    );
+    const componentName = isDocumentationLink ? snippetLanguageEntry?.[1].doc : snippetLanguageEntry?.[1].sdk;
+    return componentName || '' ;
+  }
+
+  const addExtraSnippetInformation = () : JSX.Element => {
+    const currentTheme: ITheme = getTheme();
+    const snippetLinkStyles = getSnippetStyles(currentTheme);
+    const snippetCommentStyles = getSnippetStyles(currentTheme).snippetComments;
+    return (
+      <div style={snippetCommentStyles}>
+
+        {setCommentSymbol()} {translateMessage('Leverage libraries')} {unformattedLanguage} {translateMessage('Client library')}
+
+        <Link href={sdkDownloadLink} underline styles={snippetLinkStyles}
+          onClick={(e) => trackLinkClickedEvent(sdkDownloadLink, e)} target={'_blank'} rel='noreferrer noopener'>
+          {sdkDownloadLink}
+        </Link>
+        <br />
+
+        {setCommentSymbol()} {translateMessage('SDKs documentation')}
+
+        <Link href={sdkDocLink} underline styles={snippetLinkStyles}
+          onClick={(e) => trackLinkClickedEvent(sdkDocLink, e)} target={'_blank'} rel='noreferrer noopener'>
+          {sdkDocLink}
+        </Link>
+      </div>
+    );
+  }
+
+  const displayError = (): JSX.Element | null => {
+    if((!loadingState && snippet) || (!loadingState && !snippetError)){
+      return null;
+    }
+    if(
+      (snippetError?.status && snippetError.status === 404) ||
+      (snippetError?.status && snippetError.status === 400)
+    ){
+      return(
+        <Label style={{ padding: 10 }}>
+          {translateMessage('Snippet not available' )}
+        </Label>
+      )
+    }
+    else{
+      return (
+        <>
+          {!loadingState &&
+            <Label style={{ padding: 10 }}>
+              {translateMessage('Fetching code snippet failing' )}
+            </Label>
+          }
+        </>
+      )
+    }
+  }
+
+  return (
+    <div style={{ display: 'block' }} id={`${language}-tab`}>
+      {loadingState &&
+        <Label style={{ padding: 10 }}>
+          {translateMessage('Fetching code snippet' )}...
+        </Label>
+      }
+      {!loadingState && snippet &&
+        <>
+          <CopyButton isIconButton={true} style={{ float: 'right', zIndex: 1 }} handleOnClick={handleCopy} />
+          <Monaco
+            body={snippet}
+            language={language}
+            readOnly={true}
+            height={responseAreaExpanded ? defaultHeight : monacoHeight}
+            extraInfoElement={addExtraSnippetInformation()}
+          />
+        </>
+      }
+      {displayError()}
+    </div>
+  );
+}
+
+export const SnippetV9 = (props: ISnippetProps) => {
+  const dispatch = useAppDispatch();
+  let { language } = props;
+  // const { sdkDownloadLink, sdkDocLink } = props.snippetInfo[language];
+
+  // const unformattedLanguage = language;
+  language = language.toLowerCase();
+
+  // const response = useAppSelector(state => state.dimensions.response)
+  // const responseAreaExpanded = useAppSelector(state => state.responseAreaExpanded)
+  // const sampleQuery = useAppSelector(state => state.sampleQuery)
+  // console.log('sample query')
+  // console.log(sampleQuery)
+  const snippets = useAppSelector(state => state.snippets)
+  const { data, pending: loadingState, error } = snippets;
+  const [snippetsError, setSnippetError] = useState<SnippetError>(error as SnippetError)
+
+
+  const snippet = (!loadingState && data) ? data[language] : '';
+
+  const monacoHeight = getResponseEditorHeight(235);
+
+  const handleCopy = async () => {
+    copyAndTrackText(snippet, CODE_SNIPPETS_COPY_BUTTON, {Language: language})
+  }
+
+  useEffect(() => {
+    dispatch(getSnippet(language));
+  }, [language]);
+
+  useEffect(()=>{
+    setSnippetError(error)
+  }, [error])
+
+  // Handle the snippetsError
+
+  return <>
+    <CopyButtonV9 isIconButton={true} handleOnClick={handleCopy}></CopyButtonV9>
+    <MonacoV9
+      body={snippet}
+      language={language}
+      readOnly={true}
+      height={monacoHeight}
+      // height={responseAreaExpanded ? defaultHeight : monacoHeight}
+      // extraInfoElement={addExtraSnippetInformation()}
+    />
+  </>
+}
+
+const useSnippetStyles = makeStyles({
+  container: {
+    alignItems: 'flex-start',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    rowGap: '20px'
+  }
+})
+
+export function renderSnippetsV9(languages: ISupportedLanguages) {
+  const styles = useSnippetStyles()
+  const [selectedValue, setSelectedValue] = useState<TabValue>('CSharp');
+
+  const onTabSelect = (_event: SelectTabEvent, data: SelectTabData) => {
+    const value = data.value as string;
+    setSelectedValue(value);
+  };
+  return (
+    <div className={styles.container}>
+      <TabList selectedValue={selectedValue} onTabSelect={onTabSelect}>
+        {Object.keys(languages).map((language: string) => (
+          <Tab key={language} value={language}>
+            {language === 'CSharp' ? 'C#' : language}
+          </Tab>
+        ))}
+      </TabList>
+      <div>
+        {<SnippetV9 language={selectedValue as string} snippetInfo={languages} />}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/telemetry/component-names.ts b/src/telemetry/component-names.ts
index 371d2ea02..a798b8e6f 100644
--- a/src/telemetry/component-names.ts
+++ b/src/telemetry/component-names.ts
@@ -77,7 +77,7 @@ export const MICROSOFT_APIS_TERMS_OF_USE_LINK = 'Microsoft APIs terms of use lin
 export const MICROSOFT_PRIVACY_STATEMENT_LINK = 'Microsoft privacy statement link';
 export const MICROSOFT_GRAPH_API_REFERENCE_DOCS_LINK = 'Microsoft graph API reference docs link';
 export const GRAPH_EXPLORER_TUTORIAL_LINK = 'Graph Explorer Tutorial Link';
-export const CODE_SNIPPET_LANGUAGES = {
+export const CODE_SNIPPET_LANGUAGES: {[language: string]: {sdk: string, doc: string}} = {
   CSharp: {
     sdk: 'C# SDK link', doc: 'C# snippet docs link'
   },
diff --git a/src/types/snippets.ts b/src/types/snippets.ts
index e8b5f6b07..ce4ac0739 100644
--- a/src/types/snippets.ts
+++ b/src/types/snippets.ts
@@ -2,7 +2,16 @@ import { IApiResponse } from './action';
 
 export interface ISnippet extends IApiResponse {
   pending: boolean;
-  data: any;
-  error: any | null;
+  data: Snippet;
+  error: SnippetError;
   snippetTab?: string;
 }
+
+export interface Snippet {
+  [language: string]: string
+}
+
+export interface SnippetError {
+  status: number,
+  error: string
+}

From ada6582893a553f48994a381087c2df9d0e19d17 Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Tue, 10 Dec 2024 18:06:09 +0300
Subject: [PATCH 11/20] feat: enhance MonacoV9 and SnippetsV9 components with
 extra information display and improved styling

---
 src/app/views/common/monaco/MonacoV9.tsx      | 18 ++--
 .../query-response/snippets/SnippetsV9.tsx    | 96 +++++++++++--------
 src/messages/GE.json                          |  2 +-
 3 files changed, 65 insertions(+), 51 deletions(-)

diff --git a/src/app/views/common/monaco/MonacoV9.tsx b/src/app/views/common/monaco/MonacoV9.tsx
index 4b060d7b4..d76ad4d2f 100644
--- a/src/app/views/common/monaco/MonacoV9.tsx
+++ b/src/app/views/common/monaco/MonacoV9.tsx
@@ -36,14 +36,16 @@ const MonacoV9 = (props: MonacoProps)=>{
   }
 
 
-  return <div className='monaco-editor'><Editor
-    language={language?language:'json'}
-    width='800 !important'
-    height={editorHeight}
-    value={body}
-    options={editorOptions}
-    onChange={onChange}>
-  </Editor></div>
+  return <div className='monaco-editor'>
+    {props.extraInfoElement}
+    <Editor
+      language={language?language:'json'}
+      width='800 !important'
+      height={editorHeight}
+      value={body}
+      options={editorOptions}
+      onChange={onChange}>
+    </Editor></div>
 }
 
 export { MonacoV9 };
diff --git a/src/app/views/query-response/snippets/SnippetsV9.tsx b/src/app/views/query-response/snippets/SnippetsV9.tsx
index ee098bbeb..47b421b69 100644
--- a/src/app/views/query-response/snippets/SnippetsV9.tsx
+++ b/src/app/views/query-response/snippets/SnippetsV9.tsx
@@ -1,5 +1,6 @@
 import {
-  Label, Link, makeStyles, SelectTabData, SelectTabEvent, Spinner, Tab, TabList, TabValue
+  Label, Link, makeStyles, SelectTabData, SelectTabEvent, Spinner, Tab, TabList, TabValue,
+  Text
 } from '@fluentui/react-components';
 import { useContext, useEffect, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../../../../store';
@@ -9,7 +10,7 @@ import { SnippetError } from '../../../../types/snippets';
 import { ValidationContext } from '../../../services/context/validation-context/ValidationContext';
 import { getSnippet } from '../../../services/slices/snippet.slice';
 import { translateMessage } from '../../../utils/translate-messages';
-import { MonacoV9 } from '../../common';
+import { Monaco, MonacoV9 } from '../../common';
 import { copyAndTrackText } from '../../common/copy';
 import { getResponseEditorHeight } from '../../common/dimensions/dimensions-adjustment';
 import { CopyButtonV9 } from '../../common/lazy-loader/component-registry';
@@ -59,12 +60,17 @@ const supportedLanguages: LanguageSnippet= {
 const useSnippetStyles = makeStyles({
   container: {
     margin: '0 40px'
+  },
+  extraInformation: {
+    color: 'rgb(0, 128, 0)',
+    marginLeft: '28px',
+    lineHeight: '1.5'
   }
 })
 
 const setCommentSymbol = (language: string): string => {
   const lang = language.trim().toLowerCase()
-  return (lang=== 'powershell' || lang === 'python') ? '#' : '//';
+  return (lang=== 'powershell' || lang === 'python') ? '# ' : '// ';
 }
 
 const getLanguageComponentName = (
@@ -87,20 +93,27 @@ const trackLinkClickedEvent = (
 }
 
 const addExtraSnippetInformation = (language: string) : JSX.Element => {
+  const styles = useSnippetStyles()
   const { sdkDownloadLink, sdkDocLink } = supportedLanguages[language];
-  const paragraph = sdkDownloadLink + setCommentSymbol(language) +
-    translateMessage('Leverage libraries') + language + translateMessage('Client library')
-  const sdkParagraph = setCommentSymbol(language) + translateMessage('SDKs documentation')
+  const libParagraph = setCommentSymbol(language) + translateMessage('Leverage libraries') +
+    translateMessage('Client library') + ' '
+  const sdkParagraph = setCommentSymbol(language) + translateMessage('SDKs documentation') + ' '
   return (
-    <div>
-      <p>{paragraph}</p>
-      <Link
-        onClick={(e) => trackLinkClickedEvent(language, sdkDownloadLink, e)}
-        href={sdkDownloadLink} inline rel='norefferer noopener' target='_blank'>{sdkDownloadLink}</Link>
-      <p>{sdkParagraph}</p>
-      <Link
-        onClick={(e) => trackLinkClickedEvent(language, sdkDownloadLink, e)}
-        href={sdkDocLink} inline rel='norefferer noopener' target='_blank'>{sdkDocLink}</Link>
+    <div id="extra-info" className={styles.extraInformation}>
+      <Text font='monospace' weight='medium'>
+        {libParagraph}
+        <Link
+          onClick={(e) => trackLinkClickedEvent(language, sdkDownloadLink, e)}
+          href={sdkDownloadLink} inline rel='norefferer noopener' target='_blank'>
+          {sdkDownloadLink}</Link>
+      </Text>
+      <br/>
+      <Text font='monospace' weight='medium'>
+        {sdkParagraph}
+        <Link
+          onClick={(e) => trackLinkClickedEvent(language, sdkDocLink, e)}
+          href={sdkDocLink} inline rel='norefferer noopener' target='_blank'>{sdkDocLink}</Link>
+      </Text>
     </div>
   )
 }
@@ -137,48 +150,47 @@ interface SnippetContentProps {
   language: string
 }
 
-const SnippetContent = (props: SnippetContentProps)=>{
-  const dispatch = useAppDispatch()
+const SnippetContent: React.FC<SnippetContentProps> = (props: SnippetContentProps) => {
+  const dispatch = useAppDispatch();
   const language = props.language.toLowerCase();
-  const snippets = useAppSelector(state => state.snippets)
+  const snippets = useAppSelector(state => state.snippets);
   const { data, pending: loadingState, error } = snippets;
-  const [snippetError, setSnippetError] = useState<SnippetError>(error as SnippetError)
-  const hasSnippetError= (snippetError?.status && snippetError.status === 404) ||
-  (snippetError?.status && snippetError.status === 400)
+  const hasSnippetError = (error?.status && error.status === 404) ||
+    (error?.status && error.status === 400);
 
   const snippet = (!loadingState && data) ? data[language] : '';
 
   const monacoHeight = getResponseEditorHeight(235);
 
   const handleCopy = async () => {
-    copyAndTrackText(snippet, CODE_SNIPPETS_COPY_BUTTON, {Language: language})
-  }
+    copyAndTrackText(snippet, CODE_SNIPPETS_COPY_BUTTON, { Language: language });
+  };
 
   useEffect(() => {
     dispatch(getSnippet(language));
-  }, [language]);
+  }, [language, dispatch]);
 
-  useEffect(()=>{
-    setSnippetError(error)
-  }, [error])
+  const showSpinner = loadingState && !hasSnippetError;
+  const notAvailable = !loadingState && hasSnippetError;
 
-  return <div>
-    {loadingState && !hasSnippetError &&
-      <Spinner labelPosition="below" label={translateMessage('Fetching code snippet' )} />}
-    {!loadingState && hasSnippetError &&
-      <Label weight="semibold">{translateMessage('Snippet not available' )}</Label>}
+  return (
     <div>
-      <CopyButtonV9 isIconButton={true} handleOnClick={handleCopy}></CopyButtonV9>
-      <MonacoV9
-        body={snippet}
-        language={language}
-        readOnly={true}
-        height={monacoHeight}
-        extraInfoElement={addExtraSnippetInformation(props.language)}
-      />
+      {showSpinner && <Spinner labelPosition="below" label={translateMessage('Fetching code snippet')} />}
+      {notAvailable && <Label weight="semibold">{translateMessage('Snippet not available')}!</Label>}
+      <>
+        <CopyButtonV9 isIconButton={true} handleOnClick={handleCopy} />
+        <MonacoV9
+          body={snippet}
+          language={language}
+          readOnly={true}
+          height={monacoHeight}
+          extraInfoElement={addExtraSnippetInformation(props.language)}
+        />
+      </>
     </div>
-  </div>
-}
+  );
+};
+
 
 const Snippets = telemetry.trackReactComponent(
   GetSnippets,
diff --git a/src/messages/GE.json b/src/messages/GE.json
index b8cab4904..5b899c70c 100644
--- a/src/messages/GE.json
+++ b/src/messages/GE.json
@@ -434,7 +434,7 @@
   "Failed to get profile information": "Failed to get profile information",
   "Do you want to remove all the items you have added to the collection?": "Do you want to remove all the items you have added to the collection?",
   "Delete collection": "Delete collection",
-  "Leverage libraries": "Leverage the power of our client libraries. Download the",
+  "Leverage libraries": "Leverage the power of our client libraries. Download the ",
   "Client library": "client library here ",
   "SDKs documentation": "To read more about our SDKs, go to the documentation page at ",
   "Add to collection": "Add to collection",

From 719a95ea88051821a166a3d0dddcbec19877ed9b Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Tue, 10 Dec 2024 19:14:21 +0300
Subject: [PATCH 12/20] feat: add GraphToolkitV9 component and integrate it
 into pivot items

---
 .../graph-toolkit/GraphToolkitV9.tsx          | 54 +++++++++++++++++++
 .../pivot-items/pivot-items.tsx               |  4 +-
 2 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 src/app/views/query-response/graph-toolkit/GraphToolkitV9.tsx

diff --git a/src/app/views/query-response/graph-toolkit/GraphToolkitV9.tsx b/src/app/views/query-response/graph-toolkit/GraphToolkitV9.tsx
new file mode 100644
index 000000000..683b7dca1
--- /dev/null
+++ b/src/app/views/query-response/graph-toolkit/GraphToolkitV9.tsx
@@ -0,0 +1,54 @@
+import { Label, Link, makeStyles, MessageBar, MessageBarBody, MessageBarTitle } from '@fluentui/react-components';
+import { useAppSelector } from '../../../../store';
+import { componentNames, telemetry } from '../../../../telemetry';
+import { lookupToolkitUrl } from '../../../utils/graph-toolkit-lookup';
+import { translateMessage } from '../../../utils/translate-messages';
+import {
+  convertVhToPx, getResponseEditorHeight,
+  getResponseHeight
+} from '../../common/dimensions/dimensions-adjustment';
+
+const useMGTStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column'
+  }
+})
+const GraphToolkitV9 = () => {
+  const styles = useMGTStyles()
+  const { sampleQuery, dimensions: { response }, responseAreaExpanded } = useAppSelector((state) => state);
+  const { toolkitUrl, exampleUrl } = lookupToolkitUrl(sampleQuery);
+
+  const defaultHeight = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 220);
+  const monacoHeight = getResponseEditorHeight(115);
+
+  if (toolkitUrl && exampleUrl) {
+    return <div className={styles.container}>
+      <MessageBar intent='info'>
+        <MessageBarBody>
+          <MessageBarTitle>Microsoft Graph Toolkit</MessageBarTitle>
+          {translateMessage('Open this example in')}{' '}
+          <Link tabIndex={0} href={exampleUrl} target='_blank' rel='noopener noreferrer'
+            onClick={(e) =>
+              telemetry.trackLinkClickEvent((e.currentTarget as HTMLAnchorElement).href,
+                componentNames.GRAPH_TOOLKIT_PLAYGROUND_LINK)}>
+            {translateMessage('graph toolkit playground')}</Link>
+        </MessageBarBody>
+      </MessageBar>
+      <iframe width='100%' height={responseAreaExpanded ? defaultHeight : monacoHeight}
+        src={toolkitUrl} title={translateMessage('Graph toolkit')} />
+    </div>
+  }
+
+  return (
+    <Label weight="semibold">
+      {translateMessage('We did not find a Graph toolkit for this query')} &nbsp;
+      <Link tabIndex={0} href='https://aka.ms/mgt' rel='noopener norefferer' target='_blank' inline>
+        {translateMessage('Learn more about the Microsoft Graph Toolkit')}
+      </Link>
+    </Label>
+  );
+}
+
+// const styledGraphToolkit = styled(GraphToolkitV9, queryResponseStyles as any);
+export default GraphToolkitV9;
\ No newline at end of file
diff --git a/src/app/views/query-response/pivot-items/pivot-items.tsx b/src/app/views/query-response/pivot-items/pivot-items.tsx
index da251acea..ea22843b4 100644
--- a/src/app/views/query-response/pivot-items/pivot-items.tsx
+++ b/src/app/views/query-response/pivot-items/pivot-items.tsx
@@ -12,6 +12,7 @@ import {
   AdaptiveCards, GraphToolkit, ResponseHeadersV9, SnippetsV9
 } from '../../common/lazy-loader/component-registry';
 import { darkThemeHostConfig, lightThemeHostConfig } from '../adaptive-cards/AdaptiveHostConfig';
+import GraphToolkitV9 from '../graph-toolkit/GraphToolkitV9';
 import { queryResponseStyles } from '../queryResponse.styles';
 import { ResponseV9 } from '../response';
 
@@ -117,7 +118,8 @@ export const GetPivotItems = () => {
           'aria-controls': 'toolkit-tab'
         }}
       >
-        <div id={'toolkit-tab'} tabIndex={0}><GraphToolkit /></div>
+        {/* <div id={'toolkit-tab'} tabIndex={0}><GraphToolkit /></div> */}
+        <div id={'toolkit-tab'} tabIndex={0}><GraphToolkitV9 /></div>
       </PivotItem>,
       <PivotItem
         key='adaptive-cards'

From 48651dc272909a65af2e290c17552dc713336639 Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Tue, 10 Dec 2024 19:14:40 +0300
Subject: [PATCH 13/20] refactor: remove unused styledGraphToolkit definition
 from GraphToolkitV9 component

---
 src/app/views/query-response/graph-toolkit/GraphToolkitV9.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/views/query-response/graph-toolkit/GraphToolkitV9.tsx b/src/app/views/query-response/graph-toolkit/GraphToolkitV9.tsx
index 683b7dca1..dab5e8ce6 100644
--- a/src/app/views/query-response/graph-toolkit/GraphToolkitV9.tsx
+++ b/src/app/views/query-response/graph-toolkit/GraphToolkitV9.tsx
@@ -50,5 +50,4 @@ const GraphToolkitV9 = () => {
   );
 }
 
-// const styledGraphToolkit = styled(GraphToolkitV9, queryResponseStyles as any);
 export default GraphToolkitV9;
\ No newline at end of file

From 3e24781f8a4bbdfbe348578afb28e6da46ab5304 Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Tue, 10 Dec 2024 22:06:15 +0300
Subject: [PATCH 14/20] refactor: update adaptive cards lookup and improve
 error handling in adaptive card utilities

---
 src/app/utils/adaptive-cards-lookup.ts        |   8 +-
 .../lazy-loader/component-registry/index.tsx  |  12 +-
 .../adaptive-cards/AdaptiveCard.tsx           | 440 +++++++++---------
 .../adaptive-cards/AdaptiveCardV9.tsx         | 238 ++++++++++
 .../adaptive-cards/adaptive-cards.util.ts     |  10 +-
 .../pivot-items/pivot-items.tsx               |  10 +-
 6 files changed, 477 insertions(+), 241 deletions(-)
 create mode 100644 src/app/views/query-response/adaptive-cards/AdaptiveCardV9.tsx

diff --git a/src/app/utils/adaptive-cards-lookup.ts b/src/app/utils/adaptive-cards-lookup.ts
index 1f376471a..fbb5ab325 100644
--- a/src/app/utils/adaptive-cards-lookup.ts
+++ b/src/app/utils/adaptive-cards-lookup.ts
@@ -1,8 +1,8 @@
+import { Files, Groups, Messages, Profile, Site, Sites, Users } from '../../adaptivecards-templates';
 import { IQuery } from '../../types/query-runner';
 import { parseSampleUrl } from './sample-url-generation';
-import { Groups, Profile, Users, Files, Messages, Site, Sites} from '../../adaptivecards-templates';
 
-export function lookupTemplate(sampleQuery: IQuery): string {
+export function lookupTemplate(sampleQuery: IQuery): object {
   if (sampleQuery) {
     const { requestUrl, search } = parseSampleUrl(sampleQuery.sampleUrl);
     const query = requestUrl + search;
@@ -17,10 +17,10 @@ export function lookupTemplate(sampleQuery: IQuery): string {
       }
     }
   }
-  return '';
+  return {};
 }
 
-const templateMap: any = {
+const templateMap: Record<string, object> = {
   '/groups': Groups,
   '/me': Profile,
   '/me/directReports': Users,
diff --git a/src/app/views/common/lazy-loader/component-registry/index.tsx b/src/app/views/common/lazy-loader/component-registry/index.tsx
index 45063fc03..eb30d529e 100644
--- a/src/app/views/common/lazy-loader/component-registry/index.tsx
+++ b/src/app/views/common/lazy-loader/component-registry/index.tsx
@@ -1,7 +1,7 @@
 import { IPermissionProps } from '../../../../../types/permissions';
 
 import LazyStatusMessages from '../../../app-sections/StatusMessages';
-import LazyAdaptiveCard from '../../../query-response/adaptive-cards/AdaptiveCard';
+// import LazyAdaptiveCard from '../../../query-response/adaptive-cards/AdaptiveCard';
 import LazyGraphToolkit from '../../../query-response/graph-toolkit/GraphToolkit';
 import LazyResponseHeaders from '../../../query-response/headers/ResponseHeaders';
 import LazyResponseHeadersV9 from '../../../query-response/headers/ResponseHeadersV9';
@@ -26,11 +26,11 @@ export const StatusMessages = () => {
   )
 }
 
-export const AdaptiveCards = (props?: any) => {
-  return (
-    <LazyAdaptiveCard {...props} />
-  )
-}
+// export const AdaptiveCards = (props?: any) => {
+//   return (
+//     <LazyAdaptiveCard {...props} />
+//   )
+// }
 
 export const GraphToolkit = (props?: any) => {
   return (
diff --git a/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx b/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx
index b635fa932..3e38a083f 100644
--- a/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx
+++ b/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx
@@ -1,220 +1,220 @@
-import {
-  FontSizes, getTheme, IStyle, ITheme, Label, Link,
-  MessageBar, MessageBarType, Pivot, PivotItem, styled
-} from '@fluentui/react';
-import * as AdaptiveCardsAPI from 'adaptivecards';
-import { useEffect, useState } from 'react';
-
-import { useAppSelector } from '../../../../store';
-import { componentNames, telemetry } from '../../../../telemetry';
-import { IAdaptiveCardContent } from '../../../../types/adaptivecard';
-import { IQuery } from '../../../../types/query-runner';
-import { translateMessage } from '../../../utils/translate-messages';
-import { classNames } from '../../classnames';
-import { Monaco } from '../../common';
-import { trackedGenericCopy } from '../../common/copy';
-import {
-  convertVhToPx, getResponseEditorHeight,
-  getResponseHeight
-} from '../../common/dimensions/dimensions-adjustment';
-import { CopyButton } from '../../common/lazy-loader/component-registry';
-import { queryResponseStyles } from './../queryResponse.styles';
-import { getAdaptiveCard } from './adaptive-cards.util';
-import MarkdownIt from 'markdown-it';
-
-export interface AdaptiveCardResponse {
-  data?: IAdaptiveCardContent;
-  error?: string;
-}
-
-const AdaptiveCard = (props: any) => {
-  let adaptiveCard: AdaptiveCardsAPI.AdaptiveCard | null = new AdaptiveCardsAPI.AdaptiveCard();
-  const [cardContent, setCardContent] = useState<AdaptiveCardResponse | undefined>(undefined);
-
-  const { body, hostConfig } = props;
-  const { dimensions: { response }, responseAreaExpanded,
-    sampleQuery, queryRunnerStatus: queryStatus, theme } = useAppSelector((state) => state);
-
-  const classes = classNames(props);
-  const currentTheme: ITheme = getTheme();
-  const textStyle = queryResponseStyles(currentTheme).queryResponseText.root as IStyle;
-
-  const defaultHeight = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 220);
-  const monacoHeight = getResponseEditorHeight(190);
-
-  useEffect(() => {
-    try {
-      const content = getAdaptiveCard(body, sampleQuery);
-      setCardContent({
-        data: content
-      })
-    } catch (err: unknown) {
-      const error = err as Error;
-      setCardContent({
-        error: error.message
-      })
-    }
-
-    if (!adaptiveCard) {
-      adaptiveCard = new AdaptiveCardsAPI.AdaptiveCard();
-    }
-
-    if (hostConfig) {
-      adaptiveCard.hostConfig = new AdaptiveCardsAPI.HostConfig(
-        hostConfig
-      );
-    }
-
-    return () => {
-      adaptiveCard = null;
-    }
-  }, [body])
-
-  const onPivotItemClick = (query: IQuery | undefined, item?: PivotItem) => {
-    if (!item) { return; }
-    const key = item.props.itemKey;
-    if (key) {
-      telemetry.trackTabClickEvent(key, query);
-    }
-  }
-
-  if (!body) {
-    return <div />;
-  }
-
-  if (body) {
-    if (!cardContent?.data || (queryStatus && !queryStatus.ok)) {
-      return (
-        <Label styles={{ root: textStyle }}>
-          {translateMessage('The Adaptive Card for this response is not available')}
-          &nbsp;
-          <Link
-            href={'https://adaptivecards.io/designer/'}
-            tabIndex={0}
-            target='_blank'
-            rel='noopener noreferrer'
-            underline
-          >
-            {translateMessage('Adaptive Cards designer')}
-          </Link>
-        </Label>
-      );
-    }
-
-    try {
-      // markdown support
-      AdaptiveCardsAPI.AdaptiveCard.onProcessMarkdown =
-        (text: string, result: AdaptiveCardsAPI.IMarkdownProcessingResult) => {
-          const md = new MarkdownIt();
-          result.outputHtml = md.render(text);
-          result.didProcess = true;
-        };
-      adaptiveCard.parse(cardContent!.data.card);
-      const renderedCard = adaptiveCard.render();
-
-      if (renderedCard) {
-        renderedCard.style.backgroundColor = currentTheme.palette.neutralLighter;
-
-        const applyTheme = (child: HTMLElement) => {
-          if (!child) { return; }
-          if (child && child.tagName === 'BUTTON') { return; }
-
-          child.style.color = currentTheme.palette.black;
-          if (child.children.length > 0) {
-            // eslint-disable-next-line @typescript-eslint/prefer-for-of
-            for (let i = 0; i < child.children.length; i++) {
-              applyTheme(child.children[i] as HTMLElement);
-            }
-          }
-        }
-
-        if (theme !== 'light') {
-          applyTheme(renderedCard);
-        }
-      }
-
-      const handleCopy = async () => {
-        trackedGenericCopy(JSON.stringify(cardContent!.data?.template, null, 4),
-          componentNames.JSON_SCHEMA_COPY_BUTTON, sampleQuery);
-      }
-
-      return (
-        <Pivot className='adaptive-pivot'
-          onLinkClick={(pivotItem: PivotItem | undefined) => onPivotItemClick(sampleQuery, pivotItem)}
-          styles={{ text: { fontSize: FontSizes.size14 } }}>
-          <PivotItem
-            itemKey='card'
-            ariaLabel={translateMessage('card')}
-            headerText={translateMessage('card')}
-            className={classes.card}
-            headerButtonProps={{
-              'aria-controls': 'card-tab'
-            }}
-          >
-            <div id={'card-tab'}
-              ref={(n) => {
-                if (n && !n.firstChild) {
-                  n.appendChild(renderedCard as HTMLElement as HTMLElement);
-                } else {
-                  if (n && n.firstChild) {
-                    n.replaceChild(renderedCard as HTMLElement as HTMLElement, n.firstChild);
-                  }
-                }
-              }}
-            />
-          </PivotItem>
-          <PivotItem
-            itemKey='JSON-schema'
-            ariaLabel={translateMessage('JSON Schema')}
-            headerText={translateMessage('JSON Schema')}
-            headerButtonProps={{
-              'aria-controls': 'json-schema-tab'
-            }}
-          >
-            <div id={'JSON-schema-tab'} tabIndex={0}>
-              <MessageBar messageBarType={MessageBarType.info}>
-                {translateMessage('Get started with adaptive cards on')}
-                <Link href={'https://learn.microsoft.com/en-us/adaptive-cards/templating/sdk'}
-                  target='_blank'
-                  rel='noopener noreferrer'
-                  tabIndex={0}
-                  underline
-                >
-                  {translateMessage('Adaptive Cards Templating SDK')}
-                </Link>
-                {translateMessage('and experiment on')}
-                <Link href={'https://adaptivecards.io/designer/'}
-                  target='_blank'
-                  rel='noopener noreferrer'
-                  tabIndex={0}
-                  underline
-                >
-                  {translateMessage('Adaptive Cards designer')}
-                </Link>
-              </MessageBar>
-              <CopyButton
-                className={classes.copyIcon}
-                handleOnClick={handleCopy}
-                isIconButton={true}
-                style={{ float: 'right', zIndex: 1 }}
-              />
-              <Monaco
-                language='json'
-                body={cardContent!.data?.template}
-                height={responseAreaExpanded ? defaultHeight : monacoHeight}
-              />
-            </div>
-          </PivotItem>
-        </Pivot>
-      );
-    } catch (err: unknown) {
-      const error = err as Error;
-      return <div style={{ color: 'red' }}>{error.message}</div>;
-    }
-  }
-}
-
-// @ts-ignore
-const styledAdaptiveCard = styled(AdaptiveCard, queryResponseStyles);
-const trackedComponent = telemetry.trackReactComponent(styledAdaptiveCard, componentNames.ADAPTIVE_CARDS_TAB);
-export default trackedComponent;
+// import {
+//   FontSizes, getTheme, IStyle, ITheme, Label, Link,
+//   MessageBar, MessageBarType, Pivot, PivotItem, styled
+// } from '@fluentui/react';
+// import * as AdaptiveCardsAPI from 'adaptivecards';
+// import { useEffect, useState } from 'react';
+
+// import { useAppSelector } from '../../../../store';
+// import { componentNames, telemetry } from '../../../../telemetry';
+// import { IAdaptiveCardContent } from '../../../../types/adaptivecard';
+// import { IQuery } from '../../../../types/query-runner';
+// import { translateMessage } from '../../../utils/translate-messages';
+// import { classNames } from '../../classnames';
+// import { Monaco } from '../../common';
+// import { trackedGenericCopy } from '../../common/copy';
+// import {
+//   convertVhToPx, getResponseEditorHeight,
+//   getResponseHeight
+// } from '../../common/dimensions/dimensions-adjustment';
+// import { CopyButton } from '../../common/lazy-loader/component-registry';
+// import { queryResponseStyles } from './../queryResponse.styles';
+// import { getAdaptiveCard } from './adaptive-cards.util';
+// import MarkdownIt from 'markdown-it';
+
+// export interface AdaptiveCardResponse {
+//   data?: IAdaptiveCardContent;
+//   error?: string;
+// }
+
+// const AdaptiveCard = (props: any) => {
+//   let adaptiveCard: AdaptiveCardsAPI.AdaptiveCard | null = new AdaptiveCardsAPI.AdaptiveCard();
+//   const [cardContent, setCardContent] = useState<AdaptiveCardResponse | undefined>(undefined);
+
+//   const { body, hostConfig } = props;
+//   const { dimensions: { response }, responseAreaExpanded,
+//     sampleQuery, queryRunnerStatus: queryStatus, theme } = useAppSelector((state) => state);
+
+//   const classes = classNames(props);
+//   const currentTheme: ITheme = getTheme();
+//   const textStyle = queryResponseStyles(currentTheme).queryResponseText.root as IStyle;
+
+//   const defaultHeight = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 220);
+//   const monacoHeight = getResponseEditorHeight(190);
+
+//   useEffect(() => {
+//     try {
+//       const content = getAdaptiveCard(body, sampleQuery);
+//       setCardContent({
+//         data: content
+//       })
+//     } catch (err: unknown) {
+//       const error = err as Error;
+//       setCardContent({
+//         error: error.message
+//       })
+//     }
+
+//     if (!adaptiveCard) {
+//       adaptiveCard = new AdaptiveCardsAPI.AdaptiveCard();
+//     }
+
+//     if (hostConfig) {
+//       adaptiveCard.hostConfig = new AdaptiveCardsAPI.HostConfig(
+//         hostConfig
+//       );
+//     }
+
+//     return () => {
+//       adaptiveCard = null;
+//     }
+//   }, [body])
+
+//   const onPivotItemClick = (query: IQuery | undefined, item?: PivotItem) => {
+//     if (!item) { return; }
+//     const key = item.props.itemKey;
+//     if (key) {
+//       telemetry.trackTabClickEvent(key, query);
+//     }
+//   }
+
+//   if (!body) {
+//     return <div />;
+//   }
+
+//   if (body) {
+//     if (!cardContent?.data || (queryStatus && !queryStatus.ok)) {
+//       return (
+//         <Label styles={{ root: textStyle }}>
+//           {translateMessage('The Adaptive Card for this response is not available')}
+//           &nbsp;
+//           <Link
+//             href={'https://adaptivecards.io/designer/'}
+//             tabIndex={0}
+//             target='_blank'
+//             rel='noopener noreferrer'
+//             underline
+//           >
+//             {translateMessage('Adaptive Cards designer')}
+//           </Link>
+//         </Label>
+//       );
+//     }
+
+//     try {
+//       // markdown support
+//       AdaptiveCardsAPI.AdaptiveCard.onProcessMarkdown =
+//         (text: string, result: AdaptiveCardsAPI.IMarkdownProcessingResult) => {
+//           const md = new MarkdownIt();
+//           result.outputHtml = md.render(text);
+//           result.didProcess = true;
+//         };
+//       adaptiveCard.parse(cardContent!.data.card);
+//       const renderedCard = adaptiveCard.render();
+
+//       if (renderedCard) {
+//         renderedCard.style.backgroundColor = currentTheme.palette.neutralLighter;
+
+//         const applyTheme = (child: HTMLElement) => {
+//           if (!child) { return; }
+//           if (child && child.tagName === 'BUTTON') { return; }
+
+//           child.style.color = currentTheme.palette.black;
+//           if (child.children.length > 0) {
+//             // eslint-disable-next-line @typescript-eslint/prefer-for-of
+//             for (let i = 0; i < child.children.length; i++) {
+//               applyTheme(child.children[i] as HTMLElement);
+//             }
+//           }
+//         }
+
+//         if (theme !== 'light') {
+//           applyTheme(renderedCard);
+//         }
+//       }
+
+//       const handleCopy = async () => {
+//         trackedGenericCopy(JSON.stringify(cardContent!.data?.template, null, 4),
+//           componentNames.JSON_SCHEMA_COPY_BUTTON, sampleQuery);
+//       }
+
+//       return (
+//         <Pivot className='adaptive-pivot'
+//           onLinkClick={(pivotItem: PivotItem | undefined) => onPivotItemClick(sampleQuery, pivotItem)}
+//           styles={{ text: { fontSize: FontSizes.size14 } }}>
+//           <PivotItem
+//             itemKey='card'
+//             ariaLabel={translateMessage('card')}
+//             headerText={translateMessage('card')}
+//             className={classes.card}
+//             headerButtonProps={{
+//               'aria-controls': 'card-tab'
+//             }}
+//           >
+//             <div id={'card-tab'}
+//               ref={(n) => {
+//                 if (n && !n.firstChild) {
+//                   n.appendChild(renderedCard as HTMLElement as HTMLElement);
+//                 } else {
+//                   if (n && n.firstChild) {
+//                     n.replaceChild(renderedCard as HTMLElement as HTMLElement, n.firstChild);
+//                   }
+//                 }
+//               }}
+//             />
+//           </PivotItem>
+//           <PivotItem
+//             itemKey='JSON-schema'
+//             ariaLabel={translateMessage('JSON Schema')}
+//             headerText={translateMessage('JSON Schema')}
+//             headerButtonProps={{
+//               'aria-controls': 'json-schema-tab'
+//             }}
+//           >
+//             <div id={'JSON-schema-tab'} tabIndex={0}>
+//               <MessageBar messageBarType={MessageBarType.info}>
+//                 {translateMessage('Get started with adaptive cards on')}
+//                 <Link href={'https://learn.microsoft.com/en-us/adaptive-cards/templating/sdk'}
+//                   target='_blank'
+//                   rel='noopener noreferrer'
+//                   tabIndex={0}
+//                   underline
+//                 >
+//                   {translateMessage('Adaptive Cards Templating SDK')}
+//                 </Link>
+//                 {translateMessage('and experiment on')}
+//                 <Link href={'https://adaptivecards.io/designer/'}
+//                   target='_blank'
+//                   rel='noopener noreferrer'
+//                   tabIndex={0}
+//                   underline
+//                 >
+//                   {translateMessage('Adaptive Cards designer')}
+//                 </Link>
+//               </MessageBar>
+//               <CopyButton
+//                 className={classes.copyIcon}
+//                 handleOnClick={handleCopy}
+//                 isIconButton={true}
+//                 style={{ float: 'right', zIndex: 1 }}
+//               />
+//               <Monaco
+//                 language='json'
+//                 body={cardContent!.data?.template}
+//                 height={responseAreaExpanded ? defaultHeight : monacoHeight}
+//               />
+//             </div>
+//           </PivotItem>
+//         </Pivot>
+//       );
+//     } catch (err: unknown) {
+//       const error = err as Error;
+//       return <div style={{ color: 'red' }}>{error.message}</div>;
+//     }
+//   }
+// }
+
+// // @ts-ignore
+// const styledAdaptiveCard = styled(AdaptiveCard, queryResponseStyles);
+// const trackedComponent = telemetry.trackReactComponent(styledAdaptiveCard, componentNames.ADAPTIVE_CARDS_TAB);
+// export default trackedComponent;
diff --git a/src/app/views/query-response/adaptive-cards/AdaptiveCardV9.tsx b/src/app/views/query-response/adaptive-cards/AdaptiveCardV9.tsx
new file mode 100644
index 000000000..3a158986b
--- /dev/null
+++ b/src/app/views/query-response/adaptive-cards/AdaptiveCardV9.tsx
@@ -0,0 +1,238 @@
+import { getTheme, ITheme } from '@fluentui/react';
+import {
+  Label, Link, makeStyles, MessageBar, MessageBarBody, MessageBarTitle,
+  SelectTabData, SelectTabEvent, Tab, TabList, TabValue
+} from '@fluentui/react-components';
+import * as AdaptiveCardsAPI from 'adaptivecards';
+import { useEffect, useState } from 'react';
+
+import MarkdownIt from 'markdown-it';
+import { useAppSelector } from '../../../../store';
+import { componentNames, telemetry } from '../../../../telemetry';
+import { IAdaptiveCardContent } from '../../../../types/adaptivecard';
+import { IQuery, IQuery } from '../../../../types/query-runner';
+import { translateMessage } from '../../../utils/translate-messages';
+import { MonacoV9 } from '../../common';
+import { trackedGenericCopy } from '../../common/copy';
+import { CopyButtonV9 } from '../../common/copy-button';
+import { getAdaptiveCard } from './adaptive-cards.util';
+
+export interface AdaptiveCardResponse {
+  data?: IAdaptiveCardContent;
+  error?: string;
+}
+
+interface AdaptiveCardProps {
+  body: string,
+  hostConfig: object
+}
+
+interface RenderCardJSONProps {
+  handleCopy: ()=> void
+  template: string
+  renderedCard: HTMLElement
+  sampleQuery: IQuery
+}
+
+
+const adaptiveCardStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px'
+  }
+})
+
+const AdaptiveCardV9 = (props: AdaptiveCardProps) => {
+  let adaptiveCard: AdaptiveCardsAPI.AdaptiveCard | null = new AdaptiveCardsAPI.AdaptiveCard();
+  const [cardContent, setCardContent] = useState<AdaptiveCardResponse | undefined>(undefined);
+
+  const { body, hostConfig } = props;
+  const { queryRunnerStatus: queryStatus, theme } = useAppSelector((state) => state);
+  const sampleQuery = useAppSelector(state => state.sampleQuery)
+
+  const currentTheme: ITheme = getTheme();
+
+  useEffect(() => {
+    try {
+      const content = getAdaptiveCard(body, sampleQuery);
+      setCardContent({
+        data: content
+      })
+    } catch (err: unknown) {
+      const error = err as Error;
+      setCardContent({
+        error: error.message
+      })
+    }
+
+    if (!adaptiveCard) {
+      adaptiveCard = new AdaptiveCardsAPI.AdaptiveCard();
+    }
+
+    if (hostConfig) {
+      adaptiveCard.hostConfig = new AdaptiveCardsAPI.HostConfig(
+        hostConfig
+      );
+    }
+
+    return () => {
+      adaptiveCard = null;
+    }
+  }, [body])
+
+  if (!body) {
+    return <div />;
+  }
+
+  if (body) {
+    if (!cardContent?.data || (queryStatus && !queryStatus.ok)) {
+      return (
+        <Label weight="semibold">
+          {translateMessage('The Adaptive Card for this response is not available')}&nbsp;
+          <Link
+            href={'https://adaptivecards.io/designer/'} tabIndex={0} target='_blank'
+            rel='noopener noreferrer' inline></Link>
+          {translateMessage('Adaptive Cards designer')}
+        </Label>
+      );
+    }
+
+    try {
+      // markdown support
+      AdaptiveCardsAPI.AdaptiveCard.onProcessMarkdown =
+        (text: string, result: AdaptiveCardsAPI.IMarkdownProcessingResult) => {
+          const md = new MarkdownIt();
+          result.outputHtml = md.render(text);
+          result.didProcess = true;
+        };
+      adaptiveCard.parse(cardContent!.data.card);
+      const renderedCard = adaptiveCard.render();
+
+      if (renderedCard) {
+        // TODO: find out what tokens to use here
+        renderedCard.style.backgroundColor = currentTheme.palette.neutralLighter;
+
+        const applyTheme = (child: HTMLElement) => {
+          if (!child) { return; }
+          if (child && child.tagName === 'BUTTON') { return; }
+
+          child.style.color = currentTheme.palette.black;
+          if (child.children.length > 0) {
+            // eslint-disable-next-line @typescript-eslint/prefer-for-of
+            for (let i = 0; i < child.children.length; i++) {
+              applyTheme(child.children[i] as HTMLElement);
+            }
+          }
+        }
+
+        if (theme !== 'light') {
+          applyTheme(renderedCard);
+        }
+      }
+
+      const handleCopy = async () => {
+        trackedGenericCopy(JSON.stringify(cardContent!.data?.template, null, 4),
+          componentNames.JSON_SCHEMA_COPY_BUTTON, sampleQuery);
+      }
+
+      return (
+        <RenderCardAndJson
+          handleCopy={handleCopy}
+          renderedCard={renderedCard as HTMLElement}
+          template={cardContent!.data?.template as string}
+          sampleQuery={sampleQuery}/>
+      );
+    } catch (err: unknown) {
+      const error = err as Error;
+      return (
+        <MessageBar intent='error'>
+          <MessageBarBody>
+            <MessageBarTitle>Adaptive card rendering error</MessageBarTitle>
+            {error.message}
+          </MessageBarBody>
+        </MessageBar>
+      )
+    }
+  }
+}
+
+const RenderCardAndJson = (props: RenderCardJSONProps)=>{
+  const styles= adaptiveCardStyles()
+  const {handleCopy, template, renderedCard, sampleQuery} = props
+  const  [tabSelected, setTabSelected] = useState<TabValue>('card')
+  const handleTabSelect = (_event: SelectTabEvent, data: SelectTabData) => {
+    const value = data.value as string;
+    setTabSelected(value);
+    telemetry.trackTabClickEvent(value, sampleQuery);
+  };
+  return (<div className={styles.container}>
+    <TabList selectedValue={tabSelected} onTabSelect={handleTabSelect}>
+      <Tab value='card'>{translateMessage('card')}</Tab>
+      <Tab value='JSON-schema'>{translateMessage('JSON Schema')}</Tab>
+    </TabList>
+    <div>
+      {tabSelected === 'card' &&
+        <RenderCard sampleQuery={sampleQuery} handleCopy={handleCopy}
+          template={template} renderedCard={renderedCard}/>}
+      {tabSelected === 'JSON-schema' &&
+        <RenderJSONSchema sampleQuery={sampleQuery} renderedCard={renderedCard}
+          template={template} handleCopy={handleCopy}/>}
+    </div>
+  </div>
+  )
+}
+
+const RenderCard = (props: RenderCardJSONProps) => {
+  const {renderedCard} = props
+  return(
+    <div id={'card-tab'}
+      ref={(n) => {
+        if (n && !n.firstChild) {
+          n.appendChild(renderedCard);
+        } else {
+          if (n && n.firstChild) {
+            n.replaceChild(renderedCard, n.firstChild);
+          }
+        }
+      }}
+    />
+  )
+}
+
+const RenderJSONSchema = (props: RenderCardJSONProps)=>{
+  const {handleCopy, template} = props
+
+  return (
+    <div>
+      <MessageBar intent='info'>
+        <MessageBarBody>
+          <MessageBarTitle>{translateMessage('Adaptive Cards Templating SDK')}</MessageBarTitle>
+          {translateMessage('Get started with adaptive cards on')}
+          <Link href={'https://learn.microsoft.com/en-us/adaptive-cards/templating/sdk'}
+            target='_blank'
+            rel='noopener noreferrer'
+            tabIndex={0}
+            inline>{translateMessage('Adaptive Cards Templating SDK')}</Link>&nbsp;
+          {translateMessage('and experiment on')}&nbsp;
+          <Link href={'https://adaptivecards.io/designer/'}
+            target='_blank'
+            rel='noopener noreferrer'
+            tabIndex={0}
+            inline>{translateMessage('Adaptive Cards designer')}</Link>
+        </MessageBarBody>
+      </MessageBar>
+      <div>
+        <CopyButtonV9 handleOnClick={handleCopy} isIconButton={true}/>
+        <MonacoV9
+          body={template}
+          language='json'
+          readOnly={true}
+        />
+      </div>
+    </div>
+  )
+}
+
+const trackedComponent = telemetry.trackReactComponent(AdaptiveCardV9, componentNames.ADAPTIVE_CARDS_TAB);
+export default trackedComponent;
diff --git a/src/app/views/query-response/adaptive-cards/adaptive-cards.util.ts b/src/app/views/query-response/adaptive-cards/adaptive-cards.util.ts
index 7266fa630..f76810e29 100644
--- a/src/app/views/query-response/adaptive-cards/adaptive-cards.util.ts
+++ b/src/app/views/query-response/adaptive-cards/adaptive-cards.util.ts
@@ -7,18 +7,18 @@ import { lookupTemplate } from '../../../utils/adaptive-cards-lookup';
 export function getAdaptiveCard(payload: string, sampleQuery: IQuery): IAdaptiveCardContent {
   if (!payload) {
     // no payload so return empty result
-    throw new Error('No payload available');
+    throw new Error('No adaptive card payload available');
   }
 
   if (Object.keys(payload).length === 0) {
     // check if the payload is something else that we cannot use
-    throw new Error('Invalid payload for card');
+    throw new Error('Invalid adaptive card payload');
   }
 
   const templateFileName = lookupTemplate(sampleQuery);
   if (!templateFileName) {
-    // we dont support this card yet
-    throw new Error('No template available');
+    // we don't support this card yet
+    throw new Error('Adaptive card is not supported yet');
   }
 
   try {
@@ -35,7 +35,7 @@ export function getAdaptiveCard(payload: string, sampleQuery: IQuery): IAdaptive
   }
 }
 
-function createCardFromTemplate(templatePayload: string, payload: string): AdaptiveCardsTemplateAPI.Template {
+function createCardFromTemplate(templatePayload: object, payload: string): AdaptiveCardsTemplateAPI.Template {
   const template = new AdaptiveCardsTemplateAPI.Template(templatePayload);
   const context: AdaptiveCardsTemplateAPI.IEvaluationContext = {
     $root: payload
diff --git a/src/app/views/query-response/pivot-items/pivot-items.tsx b/src/app/views/query-response/pivot-items/pivot-items.tsx
index ea22843b4..23fd304ba 100644
--- a/src/app/views/query-response/pivot-items/pivot-items.tsx
+++ b/src/app/views/query-response/pivot-items/pivot-items.tsx
@@ -8,9 +8,8 @@ import { lookupTemplate } from '../../../utils/adaptive-cards-lookup';
 import { validateExternalLink } from '../../../utils/external-link-validation';
 import { lookupToolkitUrl } from '../../../utils/graph-toolkit-lookup';
 import { translateMessage } from '../../../utils/translate-messages';
-import {
-  AdaptiveCards, GraphToolkit, ResponseHeadersV9, SnippetsV9
-} from '../../common/lazy-loader/component-registry';
+import { ResponseHeadersV9, SnippetsV9 } from '../../common/lazy-loader/component-registry';
+import AdaptiveCardsV9 from '../adaptive-cards/AdaptiveCardV9';
 import { darkThemeHostConfig, lightThemeHostConfig } from '../adaptive-cards/AdaptiveHostConfig';
 import GraphToolkitV9 from '../graph-toolkit/GraphToolkitV9';
 import { queryResponseStyles } from '../queryResponse.styles';
@@ -137,9 +136,8 @@ export const GetPivotItems = () => {
           {(theme) => (
             // @ts-ignore
             <div id={'adaptive-cards-tab'} tabIndex={0}>
-              <AdaptiveCards
-                body={body}
-                hostConfig={theme === 'light' ? lightThemeHostConfig : darkThemeHostConfig}
+              <AdaptiveCardsV9
+                body={body as string} hostConfig={theme === 'light' ? lightThemeHostConfig : darkThemeHostConfig}
               />
             </div>
           )}

From f8e4032f43e1098673ef8f414df14c27a4652d98 Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Tue, 10 Dec 2024 22:13:00 +0300
Subject: [PATCH 15/20] refactor: clean up imports and reorganize state
 selection in AdaptiveCardV9 component

---
 .../views/query-response/adaptive-cards/AdaptiveCardV9.tsx   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/views/query-response/adaptive-cards/AdaptiveCardV9.tsx b/src/app/views/query-response/adaptive-cards/AdaptiveCardV9.tsx
index 3a158986b..00f6704a5 100644
--- a/src/app/views/query-response/adaptive-cards/AdaptiveCardV9.tsx
+++ b/src/app/views/query-response/adaptive-cards/AdaptiveCardV9.tsx
@@ -10,7 +10,7 @@ import MarkdownIt from 'markdown-it';
 import { useAppSelector } from '../../../../store';
 import { componentNames, telemetry } from '../../../../telemetry';
 import { IAdaptiveCardContent } from '../../../../types/adaptivecard';
-import { IQuery, IQuery } from '../../../../types/query-runner';
+import { IQuery } from '../../../../types/query-runner';
 import { translateMessage } from '../../../utils/translate-messages';
 import { MonacoV9 } from '../../common';
 import { trackedGenericCopy } from '../../common/copy';
@@ -48,8 +48,9 @@ const AdaptiveCardV9 = (props: AdaptiveCardProps) => {
   const [cardContent, setCardContent] = useState<AdaptiveCardResponse | undefined>(undefined);
 
   const { body, hostConfig } = props;
-  const { queryRunnerStatus: queryStatus, theme } = useAppSelector((state) => state);
   const sampleQuery = useAppSelector(state => state.sampleQuery)
+  const theme = useAppSelector(state => state.theme)
+  const queryStatus = useAppSelector(state => state.queryRunnerStatus)
 
   const currentTheme: ITheme = getTheme();
 

From a1609c54d3635902da11ed441c58f7a74f9f40e2 Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Thu, 2 Jan 2025 16:17:35 +0300
Subject: [PATCH 16/20] WIP: back from leave

---
 main.go                                       |  19 ++
 package-lock.json                             |  18 ++
 package.json                                  |   1 +
 src/app/views/App.tsx                         | 264 +++++++++++-------
 src/app/views/Handle.tsx                      |  64 +++++
 .../pivot-items/pivot-item-v9.tsx             | 150 ++++++++++
 6 files changed, 415 insertions(+), 101 deletions(-)
 create mode 100644 main.go
 create mode 100644 src/app/views/Handle.tsx
 create mode 100644 src/app/views/query-response/pivot-items/pivot-item-v9.tsx

diff --git a/main.go b/main.go
new file mode 100644
index 000000000..c0e6e6e1d
--- /dev/null
+++ b/main.go
@@ -0,0 +1,19 @@
+package main
+
+import (
+	"fmt"
+	"net/http"
+)
+
+func handler(w http.ResponseWriter, r *http.Request) {
+	fmt.Fprintf(w, "Hello, World!")
+}
+
+func main() {
+	http.HandleFunc("/", handler)
+	fmt.Println("Starting server on :8080")
+	fmt.Println("also good to go")
+	if err := http.ListenAndServe(":8080", nil); err != nil {
+		fmt.Println("Error starting server:", err)
+	}
+}
diff --git a/package-lock.json b/package-lock.json
index 712e23bdc..403ae491d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
                                 "@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": "8.121.1",
                                 "@fluentui/react-components": "9.56.1",
                                 "@fluentui/react-icons": "2.0.265",
@@ -3188,6 +3189,23 @@
                         "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
                         "license": "MIT"
                 },
+                "node_modules/@fluentui-contrib/react-resize-handle": {
+                        "version": "0.6.1",
+                        "resolved": "https://registry.npmjs.org/@fluentui-contrib/react-resize-handle/-/react-resize-handle-0.6.1.tgz",
+                        "integrity": "sha512-xiF9spM4d4fTRe9ucpK74vpZNWCyyBrY7D7IHX5yBJ4BEhZQbeu8Il1wwU6vqKO3spOuw/w75Gtr8VTYz/HVkw==",
+                        "license": "MIT",
+                        "dependencies": {
+                                "@fluentui/react-utilities": ">=9.16.0 < 10.0.0",
+                                "@swc/helpers": "~0.5.1"
+                        },
+                        "peerDependencies": {
+                                "@fluentui/react-components": ">=9.35.1 <10.0.0",
+                                "@types/react": ">=16.8.0 <19.0.0",
+                                "@types/react-dom": ">=16.8.0 <19.0.0",
+                                "react": ">=16.8.0 <19.0.0",
+                                "react-dom": ">=16.8.0 <19.0.0"
+                        }
+                },
                 "node_modules/@fluentui/date-time-utilities": {
                         "version": "8.6.9",
                         "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-8.6.9.tgz",
diff --git a/package.json b/package.json
index d57640c7b..6fae79d81 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
                 "@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": "8.121.1",
                 "@fluentui/react-components": "9.56.1",
                 "@fluentui/react-icons": "2.0.265",
diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
index 816161f6b..c504d3e45 100644
--- a/src/app/views/App.tsx
+++ b/src/app/views/App.tsx
@@ -1,5 +1,8 @@
 import { getTheme, ITheme, styled } from '@fluentui/react';
-import { FluentProvider, teamsHighContrastTheme, Theme, webDarkTheme, webLightTheme } from '@fluentui/react-components';
+import {
+  FluentProvider, makeStyles,
+  teamsHighContrastTheme, Theme, webDarkTheme, webLightTheme
+} from '@fluentui/react-components';
 import { bindActionCreators, Dispatch } from '@reduxjs/toolkit';
 import { Resizable } from 're-resizable';
 import { Component } from 'react';
@@ -42,6 +45,7 @@ import { QueryResponse } from './query-response';
 import { QueryRunner } from './query-runner';
 import { parse } from './query-runner/util/iframe-message-parser';
 // import { Sidebar } from './sidebar/Sidebar';
+import { useResizeHandle } from '@fluentui-contrib/react-resize-handle';
 import { SidebarV9 } from './sidebar/SidebarV9';
 export interface IAppProps {
   theme?: ITheme;
@@ -70,7 +74,38 @@ interface IAppState {
   sidebarTabSelection: string;
 }
 
-class App extends Component<IAppProps, IAppState> {
+interface ComponentProps {
+  maxWidth: number;
+  onDragStart: (value: number, eventType: string) => void;
+  onDragEnd: (value: number, eventType: string) => void;
+  onChange: (value: number, eventType: string) => void;
+}
+
+const useAppStyles = makeStyles({
+  mainHeader: {
+    gridArea:'main-header'
+  },
+  nav: {
+    gridArea: 'nav'
+  },
+  notification: {
+    gridArea: 'notification'
+  },
+  query: {
+    gridArea: 'query'
+  },
+  requestArea: {
+    gridArea: 'request-area'
+  },
+  responseArea: {
+    gridArea: 'response-area'
+  },
+  footer: {
+    gridArea: 'footer'
+  }
+})
+
+class App extends Component<IAppProps, IAppState, ComponentProps> {
   private mediaQueryList = window.matchMedia('(max-width: 992px)');
   private currentTheme: ITheme = getTheme();
   private statusAreaMobileStyle = appStyles(this.currentTheme).statusAreaMobileScreen;
@@ -414,109 +449,136 @@ class App extends Component<IAppProps, IAppState> {
       'dark': webDarkTheme,
       'high-contrast': teamsHighContrastTheme
     }
+    const {
+      handleRef: navHandleRef,
+      wrapperRef: navWrapperRef,
+      elementRef: navElementRef,
+      setValue: setLeftColumnSize
+    } = useResizeHandle({
+      variableName: NAV_SIZE_CSS_VAR,
+      growDirection: 'end',
+      relative: true,
+      onChange: (_, { value, type }) => {
+        props.onChange(value, String(type));
+      },
+      onDragStart: (_, { value, type }) => {
+        props.onDragStart(value, String(type));
+      },
+      onDragEnd: (_, { value, type }) => {
+        props.onDragEnd(value, String(type));
+      }
+    });
+
     return (
-      // @ts-ignore
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    // <FluentProvider theme={fluentV9Themes[this.props.appTheme]}>
+    //   <ThemeContext.Provider value={this.props.appTheme}>
+    //     <PopupsProvider>
+    //       <div className={`ms-Grid ${classes.app}`} style={{ paddingLeft: mobileScreen && '15px' }}>
+    //         {/* <MainHeader
+    //           toggleSidebar={this.toggleSidebar}
+    //         />
+    //         <Announced
+    //           message={
+    //             !showSidebar
+    //               ? translateMessage('Sidebar minimized')
+    //               : translateMessage('Sidebar maximized')
+    //           }
+    //         /> */}
+
+    //         <MainHeaderV9 />
+    //         <div className={`ms-Grid-row ${classes.appRow}`} style={{
+    //           flexWrap: mobileScreen && 'wrap',
+    //           marginRight: showSidebar || (graphExplorerMode === Mode.TryIt) && '-20px',
+    //           flexDirection: (graphExplorerMode === Mode.TryIt) ? 'column' : 'row'
+    //         }}>
+    //           {graphExplorerMode === Mode.Complete && (
+    //             <Resizable
+    //               onResize={(e: any, direction: any, ref: any) => {
+    //                 if (ref?.style?.width) {
+    //                   this.resizeSideBar(ref.style.width);
+    //                 }
+    //               }}
+    //               className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${sidebarWidth} resizable-sidebar`}
+    //               minWidth={'71'}
+    //               maxWidth={maxWidth}
+    //               enable={{
+    //                 right: true
+    //               }}
+    //               handleClasses={{
+    //                 right: classes.vResizeHandle
+    //               }}
+    //               bounds={'parent'}
+    //               size={{
+    //                 width: sideWidth,
+    //                 height: ''
+    //               }}
+    //             >
+    //               {/* <Sidebar currentTab={this.state.sidebarTabSelection}
+    //                 setSidebarTabSelection={this.setSidebarTabSelection} showSidebar={showSidebar}
+    //                 toggleSidebar={this.toggleSidebar}
+    //                 mobileScreen={mobileScreen} /> */}
+    //               <SidebarV9/>
+    //             </Resizable>
+    //           )}
+    //           {graphExplorerMode === Mode.TryIt &&
+    //           headerMessaging(query)}
+
+      //           {displayContent && (
+      //             <Resizable
+      //               bounds={'window'}
+      //               className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${layout}`}
+      //               enable={{
+      //                 right: false
+      //               }}
+      //               size={{
+      //                 width: graphExplorerMode === Mode.TryIt ? '100%' : contentWidth,
+      //                 height: ''
+      //               }}
+      //               style={!sidebarProperties.showSidebar && !mobileScreen ? {
+      //                 marginLeft: '8px', display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
+      //               } : {
+      //                 display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
+      //               }}
+      //             >
+      //               <div className='ms-Grid-row'>
+      //                 <Notification
+      //                   header={translateMessage('Banner notification 1 header')}
+      //                   content={translateMessage('Banner notification 1 content')}
+      //                   link={translateMessage('Banner notification 1 link')}
+      //                   linkText={translateMessage('Banner notification 1 link text')}/>
+      //               </div>
+      //               <ValidationProvider>
+      //                 <div style={{ marginBottom: 2 }} >
+      //                   <QueryRunner onSelectVerb={this.handleSelectVerb} />
+      //                 </div>
+      //                 <div style={{
+      //                   display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
+      //                 }}>
+      //                   <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
+      //                     <StatusMessages />
+      //                   </div>
+      //                   <QueryResponse />
+      //                 </div>
+      //               </ValidationProvider>
+      //             </Resizable>
+      //           )}
+      //         </div>
+      //         <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
+      //           <TermsOfUseMessage />
+      //         </div>
+      //       </div>
+      //       <CollectionPermissionsProvider>
+      //         <PopupsWrapper />
+      //       </CollectionPermissionsProvider>
+      //     </PopupsProvider>
+      //   </ThemeContext.Provider>
+      // </FluentProvider>
       <FluentProvider theme={fluentV9Themes[this.props.appTheme]}>
         <ThemeContext.Provider value={this.props.appTheme}>
           <PopupsProvider>
-            <div className={`ms-Grid ${classes.app}`} style={{ paddingLeft: mobileScreen && '15px' }}>
-              {/* <MainHeader
-                toggleSidebar={this.toggleSidebar}
-              />
-              <Announced
-                message={
-                  !showSidebar
-                    ? translateMessage('Sidebar minimized')
-                    : translateMessage('Sidebar maximized')
-                }
-              /> */}
-
-              <MainHeaderV9 />
-              <div className={`ms-Grid-row ${classes.appRow}`} style={{
-                flexWrap: mobileScreen && 'wrap',
-                marginRight: showSidebar || (graphExplorerMode === Mode.TryIt) && '-20px',
-                flexDirection: (graphExplorerMode === Mode.TryIt) ? 'column' : 'row'
-              }}>
-                {graphExplorerMode === Mode.Complete && (
-                  <Resizable
-                    onResize={(e: any, direction: any, ref: any) => {
-                      if (ref?.style?.width) {
-                        this.resizeSideBar(ref.style.width);
-                      }
-                    }}
-                    className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${sidebarWidth} resizable-sidebar`}
-                    minWidth={'71'}
-                    maxWidth={maxWidth}
-                    enable={{
-                      right: true
-                    }}
-                    handleClasses={{
-                      right: classes.vResizeHandle
-                    }}
-                    bounds={'parent'}
-                    size={{
-                      width: sideWidth,
-                      height: ''
-                    }}
-                  >
-                    {/* <Sidebar currentTab={this.state.sidebarTabSelection}
-                      setSidebarTabSelection={this.setSidebarTabSelection} showSidebar={showSidebar}
-                      toggleSidebar={this.toggleSidebar}
-                      mobileScreen={mobileScreen} /> */}
-                    <SidebarV9/>
-                  </Resizable>
-                )}
-                {graphExplorerMode === Mode.TryIt &&
-                headerMessaging(query)}
-
-                {displayContent && (
-                  <Resizable
-                    bounds={'window'}
-                    className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${layout}`}
-                    enable={{
-                      right: false
-                    }}
-                    size={{
-                      width: graphExplorerMode === Mode.TryIt ? '100%' : contentWidth,
-                      height: ''
-                    }}
-                    style={!sidebarProperties.showSidebar && !mobileScreen ? {
-                      marginLeft: '8px', display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
-                    } : {
-                      display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
-                    }}
-                  >
-                    <div className='ms-Grid-row'>
-                      <Notification
-                        header={translateMessage('Banner notification 1 header')}
-                        content={translateMessage('Banner notification 1 content')}
-                        link={translateMessage('Banner notification 1 link')}
-                        linkText={translateMessage('Banner notification 1 link text')}/>
-                    </div>
-                    <ValidationProvider>
-                      <div style={{ marginBottom: 2 }} >
-                        <QueryRunner onSelectVerb={this.handleSelectVerb} />
-                      </div>
-                      <div style={{
-                        display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
-                      }}>
-                        <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
-                          <StatusMessages />
-                        </div>
-                        <QueryResponse />
-                      </div>
-                    </ValidationProvider>
-                  </Resizable>
-                )}
-              </div>
-              <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
-                <TermsOfUseMessage />
-              </div>
-            </div>
-            <CollectionPermissionsProvider>
-              <PopupsWrapper />
-            </CollectionPermissionsProvider>
+            <p>Something</p>
           </PopupsProvider>
         </ThemeContext.Provider>
       </FluentProvider>
diff --git a/src/app/views/Handle.tsx b/src/app/views/Handle.tsx
new file mode 100644
index 000000000..465b7e070
--- /dev/null
+++ b/src/app/views/Handle.tsx
@@ -0,0 +1,64 @@
+import { useFluent } from '@fluentui/react-components';
+import * as React from 'react';
+
+interface HandleProps {
+  position: 'start' | 'end' | 'top' | 'bottom';
+  onDoubleClick?: () => void;
+}
+
+export const Handle = React.forwardRef<HTMLDivElement, HandleProps>(
+  (props, ref) => {
+    const { position, ...rest } = props;
+    const { dir } = useFluent();
+
+    const handleClick = (event: React.MouseEvent) => {
+      if (event.detail === 2) {
+        props.onDoubleClick?.();
+      }
+    };
+
+    const positioningAttr =
+      dir === 'ltr'
+        ? position === 'start'
+          ? 'left'
+          : 'right'
+        : position === 'start'
+          ? 'right'
+          : 'left';
+
+    const positioningProps =
+      position === 'start' || position === 'end'
+        ? {
+          [positioningAttr]: '-12px',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          width: '8px',
+          height: '100px',
+          cursor: 'ew-resize'
+        }
+        : {
+          ...(position === 'top' ? { top: '-12px' } : { bottom: '-12px' }),
+          left: '50%',
+          transform: 'translateX(-50%)',
+          width: '100px',
+          height: '8px',
+          cursor: 'ns-resize'
+        };
+
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        onClick={handleClick}
+        tabIndex={0}
+        style={{
+          position: 'absolute',
+          borderRadius: '4px',
+          backgroundColor: 'gray',
+          ...positioningProps
+        }}
+      />
+    );
+  }
+);
+Handle.displayName = 'Handle';
\ No newline at end of file
diff --git a/src/app/views/query-response/pivot-items/pivot-item-v9.tsx b/src/app/views/query-response/pivot-items/pivot-item-v9.tsx
new file mode 100644
index 000000000..23fd304ba
--- /dev/null
+++ b/src/app/views/query-response/pivot-items/pivot-item-v9.tsx
@@ -0,0 +1,150 @@
+import { getTheme, IPivotItemProps, ITheme, PivotItem } from '@fluentui/react';
+import { useAppSelector } from '../../../../store';
+
+import { componentNames } from '../../../../telemetry';
+import { ThemeContext } from '../../../../themes/theme-context';
+import { Mode } from '../../../../types/enums';
+import { lookupTemplate } from '../../../utils/adaptive-cards-lookup';
+import { validateExternalLink } from '../../../utils/external-link-validation';
+import { lookupToolkitUrl } from '../../../utils/graph-toolkit-lookup';
+import { translateMessage } from '../../../utils/translate-messages';
+import { ResponseHeadersV9, SnippetsV9 } from '../../common/lazy-loader/component-registry';
+import AdaptiveCardsV9 from '../adaptive-cards/AdaptiveCardV9';
+import { darkThemeHostConfig, lightThemeHostConfig } from '../adaptive-cards/AdaptiveHostConfig';
+import GraphToolkitV9 from '../graph-toolkit/GraphToolkitV9';
+import { queryResponseStyles } from '../queryResponse.styles';
+import { ResponseV9 } from '../response';
+
+export const GetPivotItems = () => {
+  const mode = useAppSelector((state)=> state.graphExplorerMode);
+  const sampleQuery= useAppSelector((state)=> state.sampleQuery);
+  const body = useAppSelector((state)=> state.graphResponse.response.body);
+
+  const currentTheme: ITheme = getTheme();
+  const dotStyle = queryResponseStyles(currentTheme).dot;
+
+  function showDotIfAdaptiveCardPresent() {
+    if (!!body) {
+      const template = lookupTemplate(sampleQuery);
+      if (template) {
+        return <span style={dotStyle} />;
+      }
+    }
+    return null;
+  }
+
+  function showDotIfGraphToolkitPresent() {
+    if (!!body) {
+      const { toolkitUrl, exampleUrl } = lookupToolkitUrl(sampleQuery);
+      if (toolkitUrl && exampleUrl) {
+        validateExternalLink(toolkitUrl, componentNames.GRAPH_TOOLKIT_PLAYGROUND_LINK, null, sampleQuery);
+        return <span style={dotStyle} />;
+      }
+    }
+    return null;
+  }
+  function renderItemLink(
+    link?: IPivotItemProps,
+    defaultRenderer?: (link?: IPivotItemProps) => JSX.Element | null,
+  ): JSX.Element | null {
+    if (!link || !defaultRenderer) {
+      return null;
+    }
+
+    return (
+      <span>
+        {defaultRenderer({ ...link, itemKey: 'adaptive-cards' })}
+        {link.itemKey === 'adaptive-cards' && showDotIfAdaptiveCardPresent()}
+        {link.itemKey === 'toolkit-component' && showDotIfGraphToolkitPresent()}
+      </span>
+    );
+  }
+
+  const pivotItems = [
+    <PivotItem
+      key='response-preview'
+      ariaLabel={translateMessage('Response Preview')}
+      itemIcon='Reply'
+      itemKey='response-preview' // To be used to construct component name for telemetry data
+      headerText={translateMessage('Response Preview')}
+      title={translateMessage('Response Preview')}
+      headerButtonProps={{
+        'aria-controls': 'response-tab'
+      }}
+    >
+      {/* <div id={'response-tab'} tabIndex={0}><Response /></div> */}
+      <div id={'response-tab'} tabIndex={0}><ResponseV9 /></div>
+    </PivotItem>,
+    <PivotItem
+      key='response-headers'
+      ariaLabel={translateMessage('Response Headers')}
+      headerText={translateMessage('Response Headers')}
+      itemIcon='FileComment'
+      itemKey='response-headers'
+      title={translateMessage('Response Headers')}
+      headerButtonProps={{
+        'aria-controls': 'response-headers-tab'
+      }}
+    >
+      <div id={'response-headers-tab'} tabIndex={0}><ResponseHeadersV9 /></div>
+    </PivotItem>
+  ];
+  if (mode === Mode.Complete) {
+    pivotItems.push(
+      <PivotItem
+        key='code-snippets'
+        ariaLabel={translateMessage('Snippets')}
+        title={translateMessage('Snippets')}
+        headerText={translateMessage('Snippets')}
+        itemIcon='PasteAsCode'
+        itemKey='code-snippets'
+        headerButtonProps={{
+          'aria-controls': 'code-snippets-tab'
+        }}
+      >
+        {/* <div id={'code-snippets-tab'} tabIndex={0}><Snippets /></div> */}
+        <div id={'code-snippets-tab'} tabIndex={0}><SnippetsV9 /></div>
+      </PivotItem>,
+      <PivotItem
+        key='graph-toolkit'
+        ariaLabel={translateMessage('Graph toolkit')}
+        itemIcon='CustomizeToolbar'
+        itemKey='toolkit-component'
+        headerText={translateMessage('Graph toolkit')}
+        title={translateMessage('Graph toolkit')}
+        onRenderItemLink={renderItemLink}
+        headerButtonProps={{
+          'aria-controls': 'toolkit-tab'
+        }}
+      >
+        {/* <div id={'toolkit-tab'} tabIndex={0}><GraphToolkit /></div> */}
+        <div id={'toolkit-tab'} tabIndex={0}><GraphToolkitV9 /></div>
+      </PivotItem>,
+      <PivotItem
+        key='adaptive-cards'
+        ariaLabel={translateMessage('Adaptive Cards')}
+        headerText={translateMessage('Adaptive Cards')}
+        title={translateMessage('Adaptive Cards')}
+        itemIcon='ContactCard'
+        itemKey='adaptive-cards'
+        onRenderItemLink={renderItemLink}
+        headerButtonProps={{
+          'aria-controls': 'adaptive-cards-tab'
+        }}
+      >
+        <ThemeContext.Consumer >
+          {(theme) => (
+            // @ts-ignore
+            <div id={'adaptive-cards-tab'} tabIndex={0}>
+              <AdaptiveCardsV9
+                body={body as string} hostConfig={theme === 'light' ? lightThemeHostConfig : darkThemeHostConfig}
+              />
+            </div>
+          )}
+        </ThemeContext.Consumer>
+      </PivotItem>
+    );
+  }
+
+  return pivotItems;
+};

From 4fa32dae1de3262f0bd355618e1c2523cd3e6eb3 Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Tue, 7 Jan 2025 15:28:50 +0300
Subject: [PATCH 17/20] refactor: Update imports and clean up code formatting
 in QueryResponse and App components

---
 .../services/slices/graph-response.slice.ts   | 228 ++++++++++--------
 src/app/views/App.tsx                         | 125 ----------
 .../views/query-response/QueryResponse.tsx    |  68 ++++--
 3 files changed, 175 insertions(+), 246 deletions(-)

diff --git a/src/app/services/slices/graph-response.slice.ts b/src/app/services/slices/graph-response.slice.ts
index 65fc8281d..da6911e9a 100644
--- a/src/app/services/slices/graph-response.slice.ts
+++ b/src/app/services/slices/graph-response.slice.ts
@@ -1,5 +1,11 @@
 import { BrowserAuthError } from '@azure/msal-browser';
-import { createAsyncThunk, createSlice, PayloadAction, ThunkDispatch, UnknownAction } from '@reduxjs/toolkit';
+import {
+  createAsyncThunk,
+  createSlice,
+  PayloadAction,
+  ThunkDispatch,
+  UnknownAction
+} from '@reduxjs/toolkit';
 
 import { authenticationWrapper } from '../../../modules/authentication';
 import { ClaimsChallenge } from '../../../modules/authentication/ClaimsChallenge';
@@ -61,7 +67,14 @@ export const runQuery = createAsyncThunk(
       const status = generateStatus({ duration, response });
       dispatch(setQueryResponseStatus(status));
 
-      const historyItem = generateHistoryItem(status, {}, query, createdAt, result, duration);
+      const historyItem = generateHistoryItem(
+        status,
+        {},
+        query,
+        createdAt,
+        result,
+        duration
+      );
       dispatch(addHistoryItem(historyItem));
 
       return result;
@@ -76,6 +89,97 @@ export const runQuery = createAsyncThunk(
   }
 );
 
+async function runReAuthenticatedRequest(
+  response: Response,
+  query: IQuery
+): Promise<boolean> {
+  if (response.headers.get('www-authenticate')) {
+    const account = authenticationWrapper.getAccount();
+    if (!account) {
+      return false;
+    }
+    new ClaimsChallenge(query, account).handle(response.headers);
+    const authResult = await authenticationWrapper.logIn('', query);
+    if (authResult.accessToken) {
+      CURRENT_RETRIES += 1;
+      return true;
+    }
+  }
+  return false;
+}
+
+function generateHistoryItem(
+  status: IStatus,
+  respHeaders: Record<string, string>,
+  query: IQuery,
+  createdAt: string,
+  result: Result,
+  duration: number
+): IHistoryItem {
+  let response: Result = { body: {}, headers: {} };
+  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 (isFileResponse(respHeaders)) {
+    response = {
+      ...result,
+      body: 'Run the query to generate file download URL'
+    };
+  }
+
+  const historyItem: IHistoryItem = {
+    index: -1,
+    url: query.sampleUrl,
+    method: query.selectedVerb,
+    headers: query.sampleHeaders,
+    body: query.sampleBody,
+    responseHeaders: respHeaders,
+    createdAt,
+    status: status.status as number,
+    statusText: status.statusText,
+    duration,
+    result: response.body as object
+  };
+
+  historyCache.writeHistoryData(historyItem);
+  return historyItem;
+}
+
+async function handleError(error: Error, query: IQuery) {
+  let body: ResponseBody = {};
+  const status: IStatus = {
+    messageBarType: 'error',
+    ok: false,
+    status: 400,
+    statusText: 'Bad Request'
+  };
+
+  if (error instanceof ClientError) {
+    status.status = error.message;
+    status.statusText = error.name;
+  }
+
+  if (queryResultsInCorsError(query.sampleUrl)) {
+    status.status = 0;
+    status.statusText = 'CORS error';
+    body = { throwsCorsError: true };
+  }
+
+  if (error instanceof BrowserAuthError) {
+    if (error.errorCode === 'user_cancelled') {
+      status.hint = translateMessage('user_cancelled');
+    } else {
+      status.statusText = `${error.name}: ${error.message}`;
+    }
+  }
+
+  return { status, body };
+}
+
 const querySlice = createSlice({
   name: 'query',
   initialState,
@@ -129,7 +233,10 @@ export const { setQueryResponse } = querySlice.actions;
 export default querySlice.reducer;
 
 async function processResponse(
-  response: ResponseBody, dispatch: ThunkDispatch<unknown, unknown, UnknownAction>, query: IQuery): Promise<Result> {
+  response: ResponseBody,
+  dispatch: ThunkDispatch<unknown, unknown, UnknownAction>,
+  query: IQuery
+): Promise<Result> {
   let result = await parseResponse(response);
   const headers: Record<string, string> = getHeaders(response);
   if (response instanceof Response && response.ok) {
@@ -142,7 +249,11 @@ async function processResponse(
     }
   }
 
-  if (response instanceof Response  && response.status === 401 && CURRENT_RETRIES < MAX_NUMBER_OF_RETRIES) {
+  if (
+    response instanceof Response &&
+    response.status === 401 &&
+    CURRENT_RETRIES < MAX_NUMBER_OF_RETRIES
+  ) {
     const successful = await runReAuthenticatedRequest(response, query);
     if (successful) {
       dispatch(runQuery(query));
@@ -154,112 +265,33 @@ async function processResponse(
 }
 
 interface Status {
-  duration: number
-  response: ResponseBody
+  duration: number;
+  response: ResponseBody;
 }
 
 const generateStatus = (statusValues: Status): IStatus => {
-  const {duration, response} = statusValues;
+  const { duration, response } = statusValues;
   const status: IStatus = {
     messageBarType: 'error',
     ok: false,
     duration,
     status: 400,
     statusText: ''
-  }
-  if(response instanceof Response) {
+  };
+  if (response instanceof Response) {
     if (response) {
       status.status = response.status;
-      status.statusText = response.statusText === '' ? setStatusMessage(response.status) : response.statusText;
+      status.statusText =
+        response.statusText === ''
+          ? setStatusMessage(response.status)
+          : response.statusText;
     }
 
-  if (response && response.ok) {
-    CURRENT_RETRIES = 0;
-    status.ok = true;
-    status.messageBarType = 'success';
-  }
-  return status;
-}
-
-async function runReAuthenticatedRequest(response: Response, query: IQuery): Promise<boolean> {
-  if (response.headers.get('www-authenticate')) {
-    const account = authenticationWrapper.getAccount();
-    if (!account) { return false; }
-    new ClaimsChallenge(query, account).handle(response.headers);
-    const authResult = await authenticationWrapper.logIn('', query);
-    if (authResult.accessToken) {
-      CURRENT_RETRIES += 1;
-      return true;
-    }
-  }
-  return false;
-}
-
-function generateHistoryItem(
-  status: IStatus,
-  respHeaders: Record<string, string>,
-  query: IQuery,
-  createdAt: string,
-  result: Result,
-  duration: number
-): IHistoryItem {
-  let response: Result = {body: {}, headers: {}};
-  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 (isFileResponse(respHeaders)) {
-    response = { ...result, body: 'Run the query to generate file download URL' };
-  }
-
-  const historyItem: IHistoryItem = {
-    index: -1,
-    url: query.sampleUrl,
-    method: query.selectedVerb,
-    headers: query.sampleHeaders,
-    body: query.sampleBody,
-    responseHeaders: respHeaders,
-    createdAt,
-    status: status.status as number,
-    statusText: status.statusText,
-    duration,
-    result: response.body as object
-  };
-
-  historyCache.writeHistoryData(historyItem);
-  return historyItem;
-}
-
-async function handleError(error: Error, query: IQuery) {
-  let body: ResponseBody = {};
-  const status: IStatus = {
-    messageBarType: 'error',
-    ok: false,
-    status: 400,
-    statusText: 'Bad Request'
-  };
-
-  if (error instanceof ClientError) {
-    status.status = error.message;
-    status.statusText = error.name;
-  }
-
-  if (queryResultsInCorsError(query.sampleUrl)) {
-    status.status = 0;
-    status.statusText = 'CORS error';
-    body = { throwsCorsError: true };
-  }
-
-  if (error instanceof BrowserAuthError) {
-    if (error.errorCode === 'user_cancelled') {
-      status.hint = translateMessage('user_cancelled');
-    } else {
-      status.statusText = `${error.name}: ${error.message}`;
+    if (response && response.ok) {
+      CURRENT_RETRIES = 0;
+      status.ok = true;
+      status.messageBarType = 'success';
     }
   }
-
-  return { status, body };
-}
+  return status;
+};
diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
index 0cdfc8ac5..c9b13c539 100644
--- a/src/app/views/App.tsx
+++ b/src/app/views/App.tsx
@@ -1,7 +1,6 @@
 import { getTheme, ITheme, styled } from '@fluentui/react';
 import {
   FluentProvider,
-  makeStyles,
   teamsHighContrastTheme,
   Theme,
   webDarkTheme,
@@ -53,7 +52,6 @@ import { QueryResponse } from './query-response';
 import { QueryRunner } from './query-runner';
 import { parse } from './query-runner/util/iframe-message-parser';
 // import { Sidebar } from './sidebar/Sidebar';
-import { useResizeHandle } from '@fluentui-contrib/react-resize-handle';
 import { SidebarV9 } from './sidebar/SidebarV9';
 export interface IAppProps {
   theme?: ITheme;
@@ -455,132 +453,9 @@ class App extends Component<IAppProps, IAppState> {
       dark: webDarkTheme,
       'high-contrast': teamsHighContrastTheme
     };
-    const {
-      handleRef: navHandleRef,
-      wrapperRef: navWrapperRef,
-      elementRef: navElementRef,
-      setValue: setLeftColumnSize
-    } = useResizeHandle({
-      variableName: NAV_SIZE_CSS_VAR,
-      growDirection: 'end',
-      relative: true,
-      onChange: (_, { value, type }) => {
-        props.onChange(value, String(type));
-      },
-      onDragStart: (_, { value, type }) => {
-        props.onDragStart(value, String(type));
-      },
-      onDragEnd: (_, { value, type }) => {
-        props.onDragEnd(value, String(type));
-      }
-    });
-
     return (
       // @ts-ignore
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      // <FluentProvider theme={fluentV9Themes[this.props.appTheme]}>
-      //   <ThemeContext.Provider value={this.props.appTheme}>
-      //     <PopupsProvider>
-      //       <div className={`ms-Grid ${classes.app}`} style={{ paddingLeft: mobileScreen && '15px' }}>
-      //         {/* <MainHeader
-      //           toggleSidebar={this.toggleSidebar}
-      //         />
-      //         <Announced
-      //           message={
-      //             !showSidebar
-      //               ? translateMessage('Sidebar minimized')
-      //               : translateMessage('Sidebar maximized')
-      //           }
-      //         /> */}
-
-      //         <MainHeaderV9 />
-      //         <div className={`ms-Grid-row ${classes.appRow}`} style={{
-      //           flexWrap: mobileScreen && 'wrap',
-      //           marginRight: showSidebar || (graphExplorerMode === Mode.TryIt) && '-20px',
-      //           flexDirection: (graphExplorerMode === Mode.TryIt) ? 'column' : 'row'
-      //         }}>
-      //           {graphExplorerMode === Mode.Complete && (
-      //             <Resizable
-      //               onResize={(e: any, direction: any, ref: any) => {
-      //                 if (ref?.style?.width) {
-      //                   this.resizeSideBar(ref.style.width);
-      //                 }
-      //               }}
-      //               className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${sidebarWidth} resizable-sidebar`}
-      //               minWidth={'71'}
-      //               maxWidth={maxWidth}
-      //               enable={{
-      //                 right: true
-      //               }}
-      //               handleClasses={{
-      //                 right: classes.vResizeHandle
-      //               }}
-      //               bounds={'parent'}
-      //               size={{
-      //                 width: sideWidth,
-      //                 height: ''
-      //               }}
-      //             >
-      //               {/* <Sidebar currentTab={this.state.sidebarTabSelection}
-      //                 setSidebarTabSelection={this.setSidebarTabSelection} showSidebar={showSidebar}
-      //                 toggleSidebar={this.toggleSidebar}
-      //                 mobileScreen={mobileScreen} /> */}
-      //               <SidebarV9/>
-      //             </Resizable>
-      //           )}
-      //           {graphExplorerMode === Mode.TryIt &&
-      //           headerMessaging(query)}
-
-      //           {displayContent && (
-      //             <Resizable
-      //               bounds={'window'}
-      //               className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${layout}`}
-      //               enable={{
-      //                 right: false
-      //               }}
-      //               size={{
-      //                 width: graphExplorerMode === Mode.TryIt ? '100%' : contentWidth,
-      //                 height: ''
-      //               }}
-      //               style={!sidebarProperties.showSidebar && !mobileScreen ? {
-      //                 marginLeft: '8px', display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
-      //               } : {
-      //                 display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
-      //               }}
-      //             >
-      //               <div className='ms-Grid-row'>
-      //                 <Notification
-      //                   header={translateMessage('Banner notification 1 header')}
-      //                   content={translateMessage('Banner notification 1 content')}
-      //                   link={translateMessage('Banner notification 1 link')}
-      //                   linkText={translateMessage('Banner notification 1 link text')}/>
-      //               </div>
-      //               <ValidationProvider>
-      //                 <div style={{ marginBottom: 2 }} >
-      //                   <QueryRunner onSelectVerb={this.handleSelectVerb} />
-      //                 </div>
-      //                 <div style={{
-      //                   display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
-      //                 }}>
-      //                   <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
-      //                     <StatusMessages />
-      //                   </div>
-      //                   <QueryResponse />
-      //                 </div>
-      //               </ValidationProvider>
-      //             </Resizable>
-      //           )}
-      //         </div>
-      //         <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
-      //           <TermsOfUseMessage />
-      //         </div>
-      //       </div>
-      //       <CollectionPermissionsProvider>
-      //         <PopupsWrapper />
-      //       </CollectionPermissionsProvider>
-      //     </PopupsProvider>
-      //   </ThemeContext.Provider>
-      // </FluentProvider>
       <FluentProvider theme={fluentV9Themes[this.props.appTheme]}>
         <ThemeContext.Provider value={this.props.appTheme}>
           <PopupsProvider>
diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx
index 447e3e57d..df717edea 100644
--- a/src/app/views/query-response/QueryResponse.tsx
+++ b/src/app/views/query-response/QueryResponse.tsx
@@ -1,5 +1,12 @@
 import {
-  Announced, FontSizes, getTheme, IconButton, ITheme, Modal, Pivot, PivotItem
+  Announced,
+  FontSizes,
+  getTheme,
+  IconButton,
+  ITheme,
+  Modal,
+  Pivot,
+  PivotItem
 } from '@fluentui/react';
 import { Resizable } from 're-resizable';
 import { CSSProperties, useEffect, useState } from 'react';
@@ -10,7 +17,8 @@ import { IQuery } from '../../../types/query-runner';
 import { expandResponseArea } from '../../services/slices/response-area-expanded.slice';
 import { translateMessage } from '../../utils/translate-messages';
 import { convertVhToPx } from '../common/dimensions/dimensions-adjustment';
-import { GetPivotItems } from './pivot-items/pivot-items';
+// import { GetPivotItems } from './pivot-items/pivot-items';
+import { GetPivotItems } from './pivot-items/pivot-item-v9';
 import './query-response.scss';
 import { queryResponseStyles } from './queryResponse.styles';
 
@@ -18,9 +26,9 @@ const QueryResponse = () => {
   const dispatch = useAppDispatch();
   const [showModal, setShowModal] = useState(false);
   const [responseHeight, setResponseHeight] = useState('610px');
-  const sampleQuery = useAppSelector((state)=> state.sampleQuery);
-  const dimensions = useAppSelector((state)=> state.dimensions);
-  const snippets = useAppSelector((state)=> state.snippets);
+  const sampleQuery = useAppSelector((state) => state.sampleQuery);
+  const dimensions = useAppSelector((state) => state.dimensions);
+  const snippets = useAppSelector((state) => state.snippets);
   const [currentTab, setCurrentTab] = useState<string>('response-preview');
   const currentTheme: ITheme = getTheme();
   const { modalStyles, modalPivotStyles } = queryResponseStyles(currentTheme);
@@ -35,7 +43,7 @@ const QueryResponse = () => {
     alignItems: 'stretch',
     flex: 1,
     marginTop: -13
-  }
+  };
 
   const toggleExpandResponse = () => {
     setShowModal(!showModal);
@@ -61,31 +69,36 @@ const QueryResponse = () => {
   };
 
   const onModalPivotItemClicked = (pivotItem?: PivotItem) => {
-    if (!pivotItem) { return; }
+    if (!pivotItem) {
+      return;
+    }
     setCurrentTab(pivotItem.props.itemKey!);
     onPivotItemClick(sampleQuery, pivotItem);
   };
 
   const onScroll = () => {
-    const queryResponseElements = document.getElementsByClassName('query-response');
+    const queryResponseElements =
+      document.getElementsByClassName('query-response');
     if (queryResponseElements && queryResponseElements.length > 0) {
       queryResponseElements[0].scrollTop = 0;
     }
-  }
+  };
 
   const onPivotItemClick = (query: IQuery, item?: PivotItem) => {
-    if (!item) { return; }
+    if (!item) {
+      return;
+    }
     const tabKey = item.props.itemKey;
     if (tabKey) {
       telemetry.trackTabClickEvent(tabKey, query);
-      if(snippets.snippetTab){
-        telemetry.trackTabClickEvent(snippets.snippetTab, query)
+      if (snippets.snippetTab) {
+        telemetry.trackTabClickEvent(snippets.snippetTab, query);
       }
     }
   };
 
   return (
-    <div style={flexQueryElement} >
+    <div style={flexQueryElement}>
       <Resizable
         style={{
           marginBottom: 20,
@@ -102,12 +115,17 @@ const QueryResponse = () => {
           bottom: false
         }}
       >
-        <div className='query-response' style={{
-          minHeight: 350,
-          height: '100%',
-          flex: 1
-        }} onScroll={onScroll}>
-          <Pivot overflowBehavior='menu'
+        <div
+          className='query-response'
+          style={{
+            minHeight: 350,
+            height: '100%',
+            flex: 1
+          }}
+          onScroll={onScroll}
+        >
+          <Pivot
+            overflowBehavior='menu'
             overflowAriaLabel={translateMessage('More response items')}
             onLinkClick={handlePivotItemClick}
             className={'pivot-response'}
@@ -126,7 +144,9 @@ const QueryResponse = () => {
           </Pivot>
         </div>
       </Resizable>
-      <Announced message={showModal ? translateMessage('Response area expanded') : ''} />
+      <Announced
+        message={showModal ? translateMessage('Response area expanded') : ''}
+      />
       {
         // @ts-ignore
         <Modal
@@ -146,12 +166,14 @@ const QueryResponse = () => {
             ariaLabel={translateMessage('Close expanded response area')}
             onClick={toggleExpandResponse}
           />
-          <Pivot className='pivot-response'
+          <Pivot
+            className='pivot-response'
             onLinkClick={(pivotItem) => onModalPivotItemClicked(pivotItem)}
             overflowBehavior='menu'
             overflowAriaLabel={translateMessage('More items')}
             selectedKey={currentTab}
-            styles={modalPivotStyles}>
+            styles={modalPivotStyles}
+          >
             {GetPivotItems()}
           </Pivot>
         </Modal>
@@ -160,4 +182,4 @@ const QueryResponse = () => {
   );
 };
 
-export default QueryResponse;
\ No newline at end of file
+export default QueryResponse;

From 64a44244fb69a7650140b1496c9de7d9f10ec8bf Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Tue, 7 Jan 2025 15:29:18 +0300
Subject: [PATCH 18/20] refactor: Simplify QueryResponse component by returning
 GetPivotItems directly

---
 .../views/query-response/QueryResponse.tsx    | 167 ++++----
 .../pivot-items/pivot-item-v9.tsx             | 357 +++++++++++-------
 2 files changed, 312 insertions(+), 212 deletions(-)

diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx
index df717edea..eccebe89d 100644
--- a/src/app/views/query-response/QueryResponse.tsx
+++ b/src/app/views/query-response/QueryResponse.tsx
@@ -97,89 +97,90 @@ const QueryResponse = () => {
     }
   };
 
-  return (
-    <div style={flexQueryElement}>
-      <Resizable
-        style={{
-          marginBottom: 20,
-          marginTop: 10,
-          flex: 1
-        }}
-        bounds={'window'}
-        minHeight={350}
-        size={{
-          height: responseHeight,
-          width: '100%'
-        }}
-        enable={{
-          bottom: false
-        }}
-      >
-        <div
-          className='query-response'
-          style={{
-            minHeight: 350,
-            height: '100%',
-            flex: 1
-          }}
-          onScroll={onScroll}
-        >
-          <Pivot
-            overflowBehavior='menu'
-            overflowAriaLabel={translateMessage('More response items')}
-            onLinkClick={handlePivotItemClick}
-            className={'pivot-response'}
-            selectedKey={currentTab}
-            styles={{ text: { fontSize: FontSizes.size14 } }}
-          >
-            {GetPivotItems()}
-            <PivotItem
-              headerText={translateMessage('Expand')}
-              key='expand'
-              itemIcon='MiniExpandMirrored'
-              itemKey='expand-response'
-              ariaLabel={translateMessage('Expand response')}
-              title={translateMessage('Expand response')}
-            />
-          </Pivot>
-        </div>
-      </Resizable>
-      <Announced
-        message={showModal ? translateMessage('Response area expanded') : ''}
-      />
-      {
-        // @ts-ignore
-        <Modal
-          isOpen={showModal}
-          onDismiss={toggleExpandResponse}
-          styles={modalStyles}
-          layerProps={{ eventBubblingEnabled: true }}
-        >
-          <IconButton
-            styles={{
-              root: {
-                float: 'right',
-                zIndex: 1
-              }
-            }}
-            iconProps={{ iconName: 'Cancel' }}
-            ariaLabel={translateMessage('Close expanded response area')}
-            onClick={toggleExpandResponse}
-          />
-          <Pivot
-            className='pivot-response'
-            onLinkClick={(pivotItem) => onModalPivotItemClicked(pivotItem)}
-            overflowBehavior='menu'
-            overflowAriaLabel={translateMessage('More items')}
-            selectedKey={currentTab}
-            styles={modalPivotStyles}
-          >
-            {GetPivotItems()}
-          </Pivot>
-        </Modal>
-      }
-    </div>
-  );
+  // return (
+  //   <div style={flexQueryElement}>
+  //     <Resizable
+  //       style={{
+  //         marginBottom: 20,
+  //         marginTop: 10,
+  //         flex: 1
+  //       }}
+  //       bounds={'window'}
+  //       minHeight={350}
+  //       size={{
+  //         height: responseHeight,
+  //         width: '100%'
+  //       }}
+  //       enable={{
+  //         bottom: false
+  //       }}
+  //     >
+  //       <div
+  //         className='query-response'
+  //         style={{
+  //           minHeight: 350,
+  //           height: '100%',
+  //           flex: 1
+  //         }}
+  //         onScroll={onScroll}
+  //       >
+  //         <Pivot
+  //           overflowBehavior='menu'
+  //           overflowAriaLabel={translateMessage('More response items')}
+  //           onLinkClick={handlePivotItemClick}
+  //           className={'pivot-response'}
+  //           selectedKey={currentTab}
+  //           styles={{ text: { fontSize: FontSizes.size14 } }}
+  //         >
+  //           <GetPivotItems />
+  //           <PivotItem
+  //             headerText={translateMessage('Expand')}
+  //             key='expand'
+  //             itemIcon='MiniExpandMirrored'
+  //             itemKey='expand-response'
+  //             ariaLabel={translateMessage('Expand response')}
+  //             title={translateMessage('Expand response')}
+  //           />
+  //         </Pivot>
+  //       </div>
+  //     </Resizable>
+  //     <Announced
+  //       message={showModal ? translateMessage('Response area expanded') : ''}
+  //     />
+  //     {
+  //       // @ts-ignore
+  //       <Modal
+  //         isOpen={showModal}
+  //         onDismiss={toggleExpandResponse}
+  //         styles={modalStyles}
+  //         layerProps={{ eventBubblingEnabled: true }}
+  //       >
+  //         <IconButton
+  //           styles={{
+  //             root: {
+  //               float: 'right',
+  //               zIndex: 1
+  //             }
+  //           }}
+  //           iconProps={{ iconName: 'Cancel' }}
+  //           ariaLabel={translateMessage('Close expanded response area')}
+  //           onClick={toggleExpandResponse}
+  //         />
+  //         <Pivot
+  //           className='pivot-response'
+  //           onLinkClick={(pivotItem) => onModalPivotItemClicked(pivotItem)}
+  //           overflowBehavior='menu'
+  //           overflowAriaLabel={translateMessage('More items')}
+  //           selectedKey={currentTab}
+  //           styles={modalPivotStyles}
+  //         >
+  //           {GetPivotItems()}
+  //         </Pivot>
+  //       </Modal>
+  //     }
+  //   </div>
+  // );
+  return <GetPivotItems />;
 };
 
 export default QueryResponse;
diff --git a/src/app/views/query-response/pivot-items/pivot-item-v9.tsx b/src/app/views/query-response/pivot-items/pivot-item-v9.tsx
index 23fd304ba..c696f3750 100644
--- a/src/app/views/query-response/pivot-items/pivot-item-v9.tsx
+++ b/src/app/views/query-response/pivot-items/pivot-item-v9.tsx
@@ -1,6 +1,22 @@
-import { getTheme, IPivotItemProps, ITheme, PivotItem } from '@fluentui/react';
+import {
+  getTheme,
+  IPivotItemProps,
+  ITheme,
+  makeStyles,
+  PivotItem
+} from '@fluentui/react';
 import { useAppSelector } from '../../../../store';
 
+import {
+  Button,
+  SelectTabData,
+  SelectTabEvent,
+  Tab,
+  TabList,
+  TabListProps,
+  TabValue
+} from '@fluentui/react-components';
+import React, { useState } from 'react';
 import { componentNames } from '../../../../telemetry';
 import { ThemeContext } from '../../../../themes/theme-context';
 import { Mode } from '../../../../types/enums';
@@ -8,143 +24,226 @@ import { lookupTemplate } from '../../../utils/adaptive-cards-lookup';
 import { validateExternalLink } from '../../../utils/external-link-validation';
 import { lookupToolkitUrl } from '../../../utils/graph-toolkit-lookup';
 import { translateMessage } from '../../../utils/translate-messages';
-import { ResponseHeadersV9, SnippetsV9 } from '../../common/lazy-loader/component-registry';
+import {
+  ResponseHeadersV9,
+  SnippetsV9
+} from '../../common/lazy-loader/component-registry';
 import AdaptiveCardsV9 from '../adaptive-cards/AdaptiveCardV9';
-import { darkThemeHostConfig, lightThemeHostConfig } from '../adaptive-cards/AdaptiveHostConfig';
-import GraphToolkitV9 from '../graph-toolkit/GraphToolkitV9';
+import {
+  darkThemeHostConfig,
+  lightThemeHostConfig
+} from '../adaptive-cards/AdaptiveHostConfig';
+import { default as GraphToolkitV9 } from '../graph-toolkit/GraphToolkitV9';
 import { queryResponseStyles } from '../queryResponse.styles';
 import { ResponseV9 } from '../response';
 
-export const GetPivotItems = () => {
-  const mode = useAppSelector((state)=> state.graphExplorerMode);
-  const sampleQuery= useAppSelector((state)=> state.sampleQuery);
-  const body = useAppSelector((state)=> state.graphResponse.response.body);
+// export const GetPivotItems = () => {
+//   const mode = useAppSelector((state)=> state.graphExplorerMode);
+//   const sampleQuery= useAppSelector((state)=> state.sampleQuery);
+//   const body = useAppSelector((state)=> state.graphResponse.response.body);
 
-  const currentTheme: ITheme = getTheme();
-  const dotStyle = queryResponseStyles(currentTheme).dot;
+//   const currentTheme: ITheme = getTheme();
+//   const dotStyle = queryResponseStyles(currentTheme).dot;
 
-  function showDotIfAdaptiveCardPresent() {
-    if (!!body) {
-      const template = lookupTemplate(sampleQuery);
-      if (template) {
-        return <span style={dotStyle} />;
-      }
-    }
-    return null;
-  }
+//   function showDotIfAdaptiveCardPresent() {
+//     if (!!body) {
+//       const template = lookupTemplate(sampleQuery);
+//       if (template) {
+//         return <span style={dotStyle} />;
+//       }
+//     }
+//     return null;
+//   }
 
-  function showDotIfGraphToolkitPresent() {
-    if (!!body) {
-      const { toolkitUrl, exampleUrl } = lookupToolkitUrl(sampleQuery);
-      if (toolkitUrl && exampleUrl) {
-        validateExternalLink(toolkitUrl, componentNames.GRAPH_TOOLKIT_PLAYGROUND_LINK, null, sampleQuery);
-        return <span style={dotStyle} />;
-      }
-    }
-    return null;
-  }
-  function renderItemLink(
-    link?: IPivotItemProps,
-    defaultRenderer?: (link?: IPivotItemProps) => JSX.Element | null,
-  ): JSX.Element | null {
-    if (!link || !defaultRenderer) {
-      return null;
-    }
+//   function showDotIfGraphToolkitPresent() {
+//     if (!!body) {
+//       const { toolkitUrl, exampleUrl } = lookupToolkitUrl(sampleQuery);
+//       if (toolkitUrl && exampleUrl) {
+//         validateExternalLink(toolkitUrl, componentNames.GRAPH_TOOLKIT_PLAYGROUND_LINK, null, sampleQuery);
+//         return <span style={dotStyle} />;
+//       }
+//     }
+//     return null;
+//   }
+//   function renderItemLink(
+//     link?: IPivotItemProps,
+//     defaultRenderer?: (link?: IPivotItemProps) => JSX.Element | null,
+//   ): JSX.Element | null {
+//     if (!link || !defaultRenderer) {
+//       return null;
+//     }
 
-    return (
-      <span>
-        {defaultRenderer({ ...link, itemKey: 'adaptive-cards' })}
-        {link.itemKey === 'adaptive-cards' && showDotIfAdaptiveCardPresent()}
-        {link.itemKey === 'toolkit-component' && showDotIfGraphToolkitPresent()}
-      </span>
-    );
-  }
+//     return (
+//       <span>
+//         {defaultRenderer({ ...link, itemKey: 'adaptive-cards' })}
+//         {link.itemKey === 'adaptive-cards' && showDotIfAdaptiveCardPresent()}
+//         {link.itemKey === 'toolkit-component' && showDotIfGraphToolkitPresent()}
+//       </span>
+//     );
+//   }
+
+//   const pivotItems = [
+//     <PivotItem
+//       key='response-preview'
+//       ariaLabel={translateMessage('Response Preview')}
+//       itemIcon='Reply'
+//       itemKey='response-preview' // To be used to construct component name for telemetry data
+//       headerText={translateMessage('Response Preview')}
+//       title={translateMessage('Response Preview')}
+//       headerButtonProps={{
+//         'aria-controls': 'response-tab'
+//       }}
+//     >
+//       {/* <div id={'response-tab'} tabIndex={0}><Response /></div> */}
+//       <div id={'response-tab'} tabIndex={0}><ResponseV9 /></div>
+//     </PivotItem>,
+//     <PivotItem
+//       key='response-headers'
+//       ariaLabel={translateMessage('Response Headers')}
+//       headerText={translateMessage('Response Headers')}
+//       itemIcon='FileComment'
+//       itemKey='response-headers'
+//       title={translateMessage('Response Headers')}
+//       headerButtonProps={{
+//         'aria-controls': 'response-headers-tab'
+//       }}
+//     >
+//       <div id={'response-headers-tab'} tabIndex={0}><ResponseHeadersV9 /></div>
+//     </PivotItem>
+//   ];
+//   if (mode === Mode.Complete) {
+//     pivotItems.push(
+//       <PivotItem
+//         key='code-snippets'
+//         ariaLabel={translateMessage('Snippets')}
+//         title={translateMessage('Snippets')}
+//         headerText={translateMessage('Snippets')}
+//         itemIcon='PasteAsCode'
+//         itemKey='code-snippets'
+//         headerButtonProps={{
+//           'aria-controls': 'code-snippets-tab'
+//         }}
+//       >
+//         {/* <div id={'code-snippets-tab'} tabIndex={0}><Snippets /></div> */}
+//         <div id={'code-snippets-tab'} tabIndex={0}><SnippetsV9 /></div>
+//       </PivotItem>,
+//       <PivotItem
+//         key='graph-toolkit'
+//         ariaLabel={translateMessage('Graph toolkit')}
+//         itemIcon='CustomizeToolbar'
+//         itemKey='toolkit-component'
+//         headerText={translateMessage('Graph toolkit')}
+//         title={translateMessage('Graph toolkit')}
+//         onRenderItemLink={renderItemLink}
+//         headerButtonProps={{
+//           'aria-controls': 'toolkit-tab'
+//         }}
+//       >
+//         {/* <div id={'toolkit-tab'} tabIndex={0}><GraphToolkit /></div> */}
+//         <div id={'toolkit-tab'} tabIndex={0}><GraphToolkitV9 /></div>
+//       </PivotItem>,
+//       <PivotItem
+//         key='adaptive-cards'
+//         ariaLabel={translateMessage('Adaptive Cards')}
+//         headerText={translateMessage('Adaptive Cards')}
+//         title={translateMessage('Adaptive Cards')}
+//         itemIcon='ContactCard'
+//         itemKey='adaptive-cards'
+//         onRenderItemLink={renderItemLink}
+//         headerButtonProps={{
+//           'aria-controls': 'adaptive-cards-tab'
+//         }}
+//       >
+//         <ThemeContext.Consumer >
+//           {(theme) => (
+//             // @ts-ignore
+//             <div id={'adaptive-cards-tab'} tabIndex={0}>
+//               <AdaptiveCardsV9
+//                 body={body as string} hostConfig={theme === 'light' ? lightThemeHostConfig : darkThemeHostConfig}
+//               />
+//             </div>
+//           )}
+//         </ThemeContext.Consumer>
+//       </PivotItem>
+//     );
+//   }
 
-  const pivotItems = [
-    <PivotItem
-      key='response-preview'
-      ariaLabel={translateMessage('Response Preview')}
-      itemIcon='Reply'
-      itemKey='response-preview' // To be used to construct component name for telemetry data
-      headerText={translateMessage('Response Preview')}
-      title={translateMessage('Response Preview')}
-      headerButtonProps={{
-        'aria-controls': 'response-tab'
-      }}
-    >
-      {/* <div id={'response-tab'} tabIndex={0}><Response /></div> */}
-      <div id={'response-tab'} tabIndex={0}><ResponseV9 /></div>
-    </PivotItem>,
-    <PivotItem
-      key='response-headers'
-      ariaLabel={translateMessage('Response Headers')}
-      headerText={translateMessage('Response Headers')}
-      itemIcon='FileComment'
-      itemKey='response-headers'
-      title={translateMessage('Response Headers')}
-      headerButtonProps={{
-        'aria-controls': 'response-headers-tab'
-      }}
-    >
-      <div id={'response-headers-tab'} tabIndex={0}><ResponseHeadersV9 /></div>
-    </PivotItem>
-  ];
-  if (mode === Mode.Complete) {
-    pivotItems.push(
-      <PivotItem
-        key='code-snippets'
-        ariaLabel={translateMessage('Snippets')}
-        title={translateMessage('Snippets')}
-        headerText={translateMessage('Snippets')}
-        itemIcon='PasteAsCode'
-        itemKey='code-snippets'
-        headerButtonProps={{
-          'aria-controls': 'code-snippets-tab'
-        }}
-      >
-        {/* <div id={'code-snippets-tab'} tabIndex={0}><Snippets /></div> */}
-        <div id={'code-snippets-tab'} tabIndex={0}><SnippetsV9 /></div>
-      </PivotItem>,
-      <PivotItem
-        key='graph-toolkit'
-        ariaLabel={translateMessage('Graph toolkit')}
-        itemIcon='CustomizeToolbar'
-        itemKey='toolkit-component'
-        headerText={translateMessage('Graph toolkit')}
-        title={translateMessage('Graph toolkit')}
-        onRenderItemLink={renderItemLink}
-        headerButtonProps={{
-          'aria-controls': 'toolkit-tab'
-        }}
-      >
-        {/* <div id={'toolkit-tab'} tabIndex={0}><GraphToolkit /></div> */}
-        <div id={'toolkit-tab'} tabIndex={0}><GraphToolkitV9 /></div>
-      </PivotItem>,
-      <PivotItem
-        key='adaptive-cards'
-        ariaLabel={translateMessage('Adaptive Cards')}
-        headerText={translateMessage('Adaptive Cards')}
-        title={translateMessage('Adaptive Cards')}
-        itemIcon='ContactCard'
-        itemKey='adaptive-cards'
-        onRenderItemLink={renderItemLink}
-        headerButtonProps={{
-          'aria-controls': 'adaptive-cards-tab'
-        }}
-      >
-        <ThemeContext.Consumer >
-          {(theme) => (
-            // @ts-ignore
-            <div id={'adaptive-cards-tab'} tabIndex={0}>
-              <AdaptiveCardsV9
-                body={body as string} hostConfig={theme === 'light' ? lightThemeHostConfig : darkThemeHostConfig}
-              />
-            </div>
-          )}
-        </ThemeContext.Consumer>
-      </PivotItem>
-    );
+//   return pivotItems;
+// };
+
+const useStyles = makeStyles({
+  root: {
+    alignItems: 'flex-start',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    padding: '50px 20px',
+    rowGap: '20px'
   }
+});
+
+export const GetPivotItems = () => {
+  const mode = useAppSelector((state) => state.graphExplorerMode);
+  const sampleQuery = useAppSelector((state) => state.sampleQuery);
+  const body = useAppSelector((state) => state.graphResponse.response.body);
+  const styles = useStyles();
+  const selected = translateMessage('Response Preview');
+
+  const [selectedValue, setSelectedValue] = useState<TabValue>(selected);
+
+  const onTabSelect = (event: SelectTabEvent, data: SelectTabData) => {
+    setSelectedValue(data.value);
+  };
 
-  return pivotItems;
+  return (
+    <div>
+      <TabList selectedValue={selectedValue} onTabSelect={onTabSelect}>
+        <Tab value={translateMessage('Response Preview')}>
+          {translateMessage('Response Preview')}
+        </Tab>
+        <Tab value={translateMessage('Response Headers')}>
+          {translateMessage('Response Headers')}
+        </Tab>
+        <Tab value={translateMessage('Response Snippets')}>
+          {translateMessage('Snippets')}
+        </Tab>
+        <Tab value={translateMessage('Graph Toolkit')}>
+          {translateMessage('Graph Toolkit')}
+        </Tab>
+        <Tab value={translateMessage('Adaptive Cards')}>
+          {translateMessage('Adaptive Cards')}
+        </Tab>
+        <Button>Expand</Button>
+      </TabList>
+      <div>
+        {selectedValue === translateMessage('Response Preview') && (
+          <ResponseV9 />
+        )}
+        {selectedValue === translateMessage('Response Headers') && (
+          <ResponseHeadersV9 />
+        )}
+        {selectedValue === translateMessage('Snippets') && <SnippetsV9 />}
+        {selectedValue === translateMessage('Graph Toolkit') && (
+          <GraphToolkitV9 />
+        )}
+        {selectedValue === translateMessage('Adaptive Cards') && (
+          <ThemeContext.Consumer>
+            {(theme) => (
+              // @ts-ignore
+              <div id={'adaptive-cards-tab'} tabIndex={0}>
+                <AdaptiveCardsV9
+                  body={body as string}
+                  hostConfig={
+                    theme === 'light'
+                      ? lightThemeHostConfig
+                      : darkThemeHostConfig
+                  }
+                />
+              </div>
+            )}
+          </ThemeContext.Consumer>
+        )}
+      </div>
+    </div>
+  );
 };

From 163aa758519dcc4252bad5ca9628fa530eb105ba Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Tue, 7 Jan 2025 16:47:02 +0300
Subject: [PATCH 19/20] refactor: Restore GetPivotItems usage and reintroduce
 QueryResponse layout

---
 .../views/query-response/QueryResponse.tsx    | 170 +++++++++---------
 1 file changed, 84 insertions(+), 86 deletions(-)

diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx
index eccebe89d..a96538fb7 100644
--- a/src/app/views/query-response/QueryResponse.tsx
+++ b/src/app/views/query-response/QueryResponse.tsx
@@ -17,8 +17,7 @@ import { IQuery } from '../../../types/query-runner';
 import { expandResponseArea } from '../../services/slices/response-area-expanded.slice';
 import { translateMessage } from '../../utils/translate-messages';
 import { convertVhToPx } from '../common/dimensions/dimensions-adjustment';
-// import { GetPivotItems } from './pivot-items/pivot-items';
-import { GetPivotItems } from './pivot-items/pivot-item-v9';
+import { GetPivotItems } from './pivot-items/pivot-items';
 import './query-response.scss';
 import { queryResponseStyles } from './queryResponse.styles';
 
@@ -97,90 +96,89 @@ const QueryResponse = () => {
     }
   };
 
-  // return (
-  //   <div style={flexQueryElement}>
-  //     <Resizable
-  //       style={{
-  //         marginBottom: 20,
-  //         marginTop: 10,
-  //         flex: 1
-  //       }}
-  //       bounds={'window'}
-  //       minHeight={350}
-  //       size={{
-  //         height: responseHeight,
-  //         width: '100%'
-  //       }}
-  //       enable={{
-  //         bottom: false
-  //       }}
-  //     >
-  //       <div
-  //         className='query-response'
-  //         style={{
-  //           minHeight: 350,
-  //           height: '100%',
-  //           flex: 1
-  //         }}
-  //         onScroll={onScroll}
-  //       >
-  //         <Pivot
-  //           overflowBehavior='menu'
-  //           overflowAriaLabel={translateMessage('More response items')}
-  //           onLinkClick={handlePivotItemClick}
-  //           className={'pivot-response'}
-  //           selectedKey={currentTab}
-  //           styles={{ text: { fontSize: FontSizes.size14 } }}
-  //         >
-  //           <GetPivotItems />
-  //           <PivotItem
-  //             headerText={translateMessage('Expand')}
-  //             key='expand'
-  //             itemIcon='MiniExpandMirrored'
-  //             itemKey='expand-response'
-  //             ariaLabel={translateMessage('Expand response')}
-  //             title={translateMessage('Expand response')}
-  //           />
-  //         </Pivot>
-  //       </div>
-  //     </Resizable>
-  //     <Announced
-  //       message={showModal ? translateMessage('Response area expanded') : ''}
-  //     />
-  //     {
-  //       // @ts-ignore
-  //       <Modal
-  //         isOpen={showModal}
-  //         onDismiss={toggleExpandResponse}
-  //         styles={modalStyles}
-  //         layerProps={{ eventBubblingEnabled: true }}
-  //       >
-  //         <IconButton
-  //           styles={{
-  //             root: {
-  //               float: 'right',
-  //               zIndex: 1
-  //             }
-  //           }}
-  //           iconProps={{ iconName: 'Cancel' }}
-  //           ariaLabel={translateMessage('Close expanded response area')}
-  //           onClick={toggleExpandResponse}
-  //         />
-  //         <Pivot
-  //           className='pivot-response'
-  //           onLinkClick={(pivotItem) => onModalPivotItemClicked(pivotItem)}
-  //           overflowBehavior='menu'
-  //           overflowAriaLabel={translateMessage('More items')}
-  //           selectedKey={currentTab}
-  //           styles={modalPivotStyles}
-  //         >
-  //           {GetPivotItems()}
-  //         </Pivot>
-  //       </Modal>
-  //     }
-  //   </div>
-  // );
-  return <GetPivotItems />;
+  return (
+    <div style={flexQueryElement}>
+      <Resizable
+        style={{
+          marginBottom: 20,
+          marginTop: 10,
+          flex: 1
+        }}
+        bounds={'window'}
+        minHeight={350}
+        size={{
+          height: responseHeight,
+          width: '100%'
+        }}
+        enable={{
+          bottom: false
+        }}
+      >
+        <div
+          className='query-response'
+          style={{
+            minHeight: 350,
+            height: '100%',
+            flex: 1
+          }}
+          onScroll={onScroll}
+        >
+          <Pivot
+            overflowBehavior='menu'
+            overflowAriaLabel={translateMessage('More response items')}
+            onLinkClick={handlePivotItemClick}
+            className={'pivot-response'}
+            selectedKey={currentTab}
+            styles={{ text: { fontSize: FontSizes.size14 } }}
+          >
+            {GetPivotItems()}
+            <PivotItem
+              headerText={translateMessage('Expand')}
+              key='expand'
+              itemIcon='MiniExpandMirrored'
+              itemKey='expand-response'
+              ariaLabel={translateMessage('Expand response')}
+              title={translateMessage('Expand response')}
+            />
+          </Pivot>
+        </div>
+      </Resizable>
+      <Announced
+        message={showModal ? translateMessage('Response area expanded') : ''}
+      />
+      {
+        // @ts-ignore
+        <Modal
+          isOpen={showModal}
+          onDismiss={toggleExpandResponse}
+          styles={modalStyles}
+          layerProps={{ eventBubblingEnabled: true }}
+        >
+          <IconButton
+            styles={{
+              root: {
+                float: 'right',
+                zIndex: 1
+              }
+            }}
+            iconProps={{ iconName: 'Cancel' }}
+            ariaLabel={translateMessage('Close expanded response area')}
+            onClick={toggleExpandResponse}
+          />
+          <Pivot
+            className='pivot-response'
+            onLinkClick={(pivotItem) => onModalPivotItemClicked(pivotItem)}
+            overflowBehavior='menu'
+            overflowAriaLabel={translateMessage('More items')}
+            selectedKey={currentTab}
+            styles={modalPivotStyles}
+          >
+            {GetPivotItems()}
+          </Pivot>
+        </Modal>
+      }
+    </div>
+  );
 };
 
 export default QueryResponse;

From 6665ff1ada655ad55b35dd1a8467b1c177a6510b Mon Sep 17 00:00:00 2001
From: Musale Martin <martinmusale@microsoft.com>
Date: Tue, 7 Jan 2025 17:59:49 +0300
Subject: [PATCH 20/20] refactor: Introduce QueryResponseV9 component and
 update App to use it

---
 src/app/views/App.tsx                         |  6 +-
 .../views/query-response/QueryResponseV9.tsx  | 62 +++++++++++++++++++
 src/app/views/query-response/index.ts         |  5 +-
 .../pivot-items/pivot-item-v9.tsx             |  3 +-
 4 files changed, 69 insertions(+), 7 deletions(-)
 create mode 100644 src/app/views/query-response/QueryResponseV9.tsx

diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
index c9b13c539..44968ef79 100644
--- a/src/app/views/App.tsx
+++ b/src/app/views/App.tsx
@@ -48,10 +48,12 @@ import PopupsWrapper from './common/popups/PopupsWrapper';
 import { createShareLink } from './common/share';
 // import { MainHeader } from './main-header/MainHeader';
 import { MainHeaderV9 } from './main-header/MainHeaderV9';
-import { QueryResponse } from './query-response';
+// import { QueryResponse } from './query-response';
+import { QueryResponseV9 } from './query-response';
 import { QueryRunner } from './query-runner';
 import { parse } from './query-runner/util/iframe-message-parser';
 // import { Sidebar } from './sidebar/Sidebar';
+// import { QueryResponse } from './query-response';
 import { SidebarV9 } from './sidebar/SidebarV9';
 export interface IAppProps {
   theme?: ITheme;
@@ -583,7 +585,7 @@ class App extends Component<IAppProps, IAppState> {
                         >
                           <StatusMessagesV9 />
                         </div>
-                        <QueryResponse />
+                        <QueryResponseV9 />
                       </div>
                     </ValidationProvider>
                   </Resizable>
diff --git a/src/app/views/query-response/QueryResponseV9.tsx b/src/app/views/query-response/QueryResponseV9.tsx
new file mode 100644
index 000000000..608d62afb
--- /dev/null
+++ b/src/app/views/query-response/QueryResponseV9.tsx
@@ -0,0 +1,62 @@
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTrigger,
+  makeStyles
+} from '@fluentui/react-components';
+import { useState } from 'react';
+import { GetPivotItems } from './pivot-items/pivot-item-v9';
+
+const useStyles = makeStyles({
+  container: {
+    // display: 'flex', // TODO: draws expand button to the right. Fix
+    width: '100%', // Ensure the container has a defined width
+    overflow: 'hidden'
+  },
+  dialog: {
+    maxWidth: '70%',
+    minHeight: '60%'
+  },
+  dialogClose: {
+    // soid
+  }
+});
+
+const PivotItemsDialog = () => {
+  const [open, setOpen] = useState(false);
+  const styles = useStyles();
+
+  return (
+    <Dialog open={open} onOpenChange={(_event, data) => setOpen(data.open)}>
+      <DialogTrigger disableButtonEnhancement>
+        <Button>Expand</Button>
+      </DialogTrigger>
+      <DialogSurface className={styles.dialog}>
+        <DialogBody>
+          <DialogContent>
+            <GetPivotItems />
+          </DialogContent>
+          <Button className={styles.dialogClose} onClick={() => setOpen(false)}>
+            Close
+          </Button>
+        </DialogBody>
+      </DialogSurface>
+    </Dialog>
+  );
+};
+
+const QueryResponseV9 = () => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.container}>
+      <GetPivotItems />
+      <PivotItemsDialog />
+    </div>
+  );
+};
+
+export default QueryResponseV9;
diff --git a/src/app/views/query-response/index.ts b/src/app/views/query-response/index.ts
index dd9294ed1..1feb55341 100644
--- a/src/app/views/query-response/index.ts
+++ b/src/app/views/query-response/index.ts
@@ -1,5 +1,4 @@
 import QueryResponse from './QueryResponse';
+import { default as QueryResponseV9 } from './QueryResponseV9';
 
-export {
-  QueryResponse
-};
+export { QueryResponse, QueryResponseV9 };
diff --git a/src/app/views/query-response/pivot-items/pivot-item-v9.tsx b/src/app/views/query-response/pivot-items/pivot-item-v9.tsx
index c696f3750..c812afebc 100644
--- a/src/app/views/query-response/pivot-items/pivot-item-v9.tsx
+++ b/src/app/views/query-response/pivot-items/pivot-item-v9.tsx
@@ -204,7 +204,7 @@ export const GetPivotItems = () => {
         <Tab value={translateMessage('Response Headers')}>
           {translateMessage('Response Headers')}
         </Tab>
-        <Tab value={translateMessage('Response Snippets')}>
+        <Tab value={translateMessage('Snippets')}>
           {translateMessage('Snippets')}
         </Tab>
         <Tab value={translateMessage('Graph Toolkit')}>
@@ -213,7 +213,6 @@ export const GetPivotItems = () => {
         <Tab value={translateMessage('Adaptive Cards')}>
           {translateMessage('Adaptive Cards')}
         </Tab>
-        <Button>Expand</Button>
       </TabList>
       <div>
         {selectedValue === translateMessage('Response Preview') && (