fix pivot items

Author: Mnickii

src/app/views/App.tsx

@@ -262,7 +262,10 @@ class App extends Component<IAppProps, IAppState> {
     return (
       <FluentProvider theme={fluentV9Themes[this.props.appTheme]}>
         <ThemeContext.Provider value={this.props.appTheme}>
-          <Layout handleSelectVerb={this.handleSelectVerb} />
+          <Layout
+            handleSelectVerb={this.handleSelectVerb}
+            graphExplorerMode={this.props.graphExplorerMode}
+            authenticated={this.props.authenticated} />
         </ThemeContext.Provider>
       </FluentProvider>
     );

src/app/views/layout/Layout.tsx

@@ -20,9 +20,13 @@ import { useResizeHandle } from '@fluentui-contrib/react-resize-handle';
 import { useLayoutResizeStyles, useLayoutStyles, SIDEBAR_SIZE_CSS_VAR } from './LayoutStyles';
 import { useDetectMobileScreen } from '../../utils/useDetectMobileScreen';
 import { Mode } from '../../../types/enums';
+import { createShareLink } from '../common/share';
+import { headerMessaging } from '../app-sections/HeaderMessaging';
 
 interface LayoutProps {
   handleSelectVerb: (verb: string) => void;
+  graphExplorerMode: Mode;
+  authenticated: boolean;
 }
 
 export const Layout = (props: LayoutProps) => {
@@ -35,6 +39,7 @@ export const Layout = (props: LayoutProps) => {
   const [initialSidebarWidth, setInitialSidebarWidth] = useState(456);
   const [sidebarElement, setSidebarElement] = useState<HTMLElement | null>(null);
   const mode = useAppSelector((state) => state.graphExplorerMode);
+  const query = createShareLink(sampleQuery, props.authenticated);
 
   const {
     handleRef: sidebarHandleRef,
@@ -123,6 +128,7 @@ export const Layout = (props: LayoutProps) => {
     <PopupsProvider>
       <div className={layoutStyles.container}>
         <MainHeader />
+        {props.graphExplorerMode === Mode.TryIt && headerMessaging(query)}
         <div id='content-ref' className={mergeClasses(layoutStyles.content, resizeStyles)} ref={sidebarWrapperRef}>
           {(showSidebar && mode !== Mode.TryIt) && (
             <div id='sidebar-ref' className={layoutStyles.sidebar} ref={storeSidebarElement}>

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

@@ -120,7 +120,7 @@ export const GetPivotItems = () => {
     setSelectedValue(data.value);
   };
 
-  const tabs = [
+  let tabs = [
     {
       id: translateMessage('Response Preview'),
       name: translateMessage('Response Preview'),
@@ -130,8 +130,10 @@ export const GetPivotItems = () => {
       id: translateMessage('Response Headers'),
       name: translateMessage('Response Headers'),
       icon: <DocumentChevronDoubleRegular />
-    },
-    {
+    }]
+
+  if (mode === Mode.Complete) {
+    const newTabs = [{
       id: translateMessage('Snippets'),
       name: translateMessage('Snippets'),
       icon: <ClipboardCodeRegular />
@@ -145,8 +147,9 @@ export const GetPivotItems = () => {
       id: translateMessage('Adaptive Cards'),
       name: translateMessage('Adaptive Cards'),
       icon: <CardUiRegular />
-    }
-  ];
+    }];
+    tabs = [...tabs, ...newTabs];
+  }
 
   return (
     <div className={styles.container}>
@@ -178,23 +181,19 @@ export const GetPivotItems = () => {
       <div className={styles.tabContent}>
         {selectedValue === translateMessage('Response Preview') && <Response />}
         {selectedValue === translateMessage('Response Headers') && <ResponseHeaders />}
-        {mode === Mode.Complete && (
-          <>
-            {selectedValue === translateMessage('Snippets') && <Snippets />}
-            {selectedValue === translateMessage('Graph toolkit') && <GraphToolkit />}
-            {selectedValue === translateMessage('Adaptive Cards') && (
-              <ThemeContext.Consumer>
-                {(theme) => (
-                  <div id={'adaptive-cards-tab'} tabIndex={0}>
-                    <AdaptiveCards
-                      body={body as string}
-                      hostConfig={theme === 'light' ? lightThemeHostConfig : darkThemeHostConfig}
-                    />
-                  </div>
-                )}
-              </ThemeContext.Consumer>
+        {selectedValue === translateMessage('Snippets') && <Snippets />}
+        {selectedValue === translateMessage('Graph toolkit') && <GraphToolkit />}
+        {selectedValue === translateMessage('Adaptive Cards') && (
+          <ThemeContext.Consumer>
+            {(theme) => (
+              <div id={'adaptive-cards-tab'} tabIndex={0}>
+                <AdaptiveCards
+                  body={body as string}
+                  hostConfig={theme === 'light' ? lightThemeHostConfig : darkThemeHostConfig}
+                />
+              </div>
             )}
-          </>
+          </ThemeContext.Consumer>
         )}
       </div>
     </div>