Fix: Persist snippet tabs

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

@@ -106,13 +106,11 @@ function createAuthenticatedRequest(
     authProvider,
     msalAuthOptions
   )
-  const graphRequest = GraphClient.getInstance()
+  return GraphClient.getInstance()
     .api(encodeHashCharacters(query))
     .middlewareOptions([middlewareOptions])
     .headers(sampleHeaders)
     .responseType(ResponseType.RAW);
-
-  return graphRequest;
 }
 
 export function makeGraphRequest(scopes: string[]): Function {
@@ -212,8 +210,7 @@ export async function generateResponseDownloadUrl(
     if (fileContents) {
       const buffer = await response.arrayBuffer();
       const blob = new Blob([buffer], { type: contentType });
-      const downloadUrl = URL.createObjectURL(blob);
-      return downloadUrl;
+      return URL.createObjectURL(blob);
     }
   } catch (error) {
     return null;

src/app/services/actions/snippet-action-creator.ts

@@ -5,7 +5,8 @@ import { parseSampleUrl } from '../../utils/sample-url-generation';
 import {
   GET_SNIPPET_ERROR,
   GET_SNIPPET_PENDING,
-  GET_SNIPPET_SUCCESS
+  GET_SNIPPET_SUCCESS,
+  SET_SNIPPET_TAB_SUCCESS
 } from '../redux-constants';
 
 export function getSnippetSuccess(response: string): IAction {
@@ -28,6 +29,13 @@ export function getSnippetPending(): any {
   };
 }
 
+export function setSnippetTabSuccess(response: string): any {
+  return {
+    type: SET_SNIPPET_TAB_SUCCESS,
+    response
+  }
+}
+
 export function getSnippet(language: string): Function {
   return async (dispatch: Function, getState: Function) => {
     const { devxApi, sampleQuery } = getState();

src/app/services/reducers/snippet-reducer.ts

@@ -1,33 +1,45 @@
 import { IAction } from '../../../types/action';
-import { GET_SNIPPET_ERROR, GET_SNIPPET_PENDING, GET_SNIPPET_SUCCESS } from '../redux-constants';
+import {
+  GET_SNIPPET_ERROR, GET_SNIPPET_PENDING, GET_SNIPPET_SUCCESS,
+  SET_SNIPPET_TAB_SUCCESS
+} from '../redux-constants';
 import { ISnippet } from '../../../types/snippets';
 
 const initialState: ISnippet = {
   pending: false,
   data: {},
-  error: null
+  error: null,
+  snippetTab: 'csharp'
 };
 
 export function snippets(state = initialState, action: IAction): any {
   switch (action.type) {
     case GET_SNIPPET_SUCCESS:
       return {
+        ...state,
         pending: false,
         data: action.response as object,
         error: null
       };
     case GET_SNIPPET_ERROR:
       return {
+        ...state,
         pending: false,
         data: null,
         error: action.response as object
       };
     case GET_SNIPPET_PENDING:
       return {
+        ...state,
         pending: true,
         data: null,
         error: null
       };
+    case SET_SNIPPET_TAB_SUCCESS:
+      return {
+        ...state,
+        snippetTab: action.response
+      }
     default:
       return state;
   }

src/app/services/redux-constants.ts

@@ -52,4 +52,5 @@ export const GET_POLICY_ERROR = 'GET_POLICY_ERROR';
 export const GET_POLICY_PENDING = 'GET_POLICY_PENDING';
 export const RESOURCEPATHS_ADD_SUCCESS = 'RESOURCEPATHS_ADD_SUCCESS';
 export const RESOURCEPATHS_DELETE_SUCCESS = 'RESOURCEPATHS_DELETE_SUCCESS';
-export const BULK_ADD_HISTORY_ITEMS_SUCCESS = 'BULK_ADD_HISTORY_ITEMS_SUCCESS'
+export const BULK_ADD_HISTORY_ITEMS_SUCCESS = 'BULK_ADD_HISTORY_ITEMS_SUCCESS';
+export const SET_SNIPPET_TAB_SUCCESS = 'SET_SNIPPET_TAB_SUCCESS';

src/app/views/query-response/QueryResponse.tsx

@@ -16,7 +16,7 @@ import { sanitizeQueryUrl } from '../../utils/query-url-sanitization';
 import { expandResponseArea } from '../../services/actions/response-expanded-action-creator';
 import { translateMessage } from '../../utils/translate-messages';
 import { copy } from '../common/copy';
-import { getPivotItems, onPivotItemClick } from './pivot-items/pivot-items';
+import { GetPivotItems, onPivotItemClick } from './pivot-items/pivot-items';
 import './query-response.scss';
 import { IRootState } from '../../../types/root';
 import { CopyButton } from '../common/copy/CopyButton';
@@ -124,7 +124,7 @@ const QueryResponse = (props: IQueryResponseProps) => {
             className={'pivot-response'}
             selectedKey={currentTab}
           >
-            {getPivotItems()}
+            {GetPivotItems()}
             <PivotItem
               headerText='Expand'
               key='expand'
@@ -158,7 +158,7 @@ const QueryResponse = (props: IQueryResponseProps) => {
           <Pivot className='pivot-response'
             onLinkClick={(pivotItem) => onModalPivotItemClicked(pivotItem)}
             selectedKey={currentTab}>
-            {getPivotItems()}
+            {GetPivotItems()}
           </Pivot>
         </Modal>
       }

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

@@ -19,7 +19,7 @@ import { queryResponseStyles } from '../queryResponse.styles';
 import { Response } from '../response';
 import { Snippets } from '../snippets';
 
-export const getPivotItems = () => {
+export const GetPivotItems = () => {
 
   const { graphExplorerMode: mode, sampleQuery, graphResponse: { body } } = useSelector((state: IRootState) => state);
 
@@ -90,7 +90,6 @@ export const getPivotItems = () => {
       <div id={'response-headers-tab'}><ResponseHeaders/></div>
     </PivotItem>
   ];
-
   if (mode === Mode.Complete) {
     pivotItems.push(
       <PivotItem

src/app/views/query-response/snippets/Snippets.tsx

@@ -1,10 +1,15 @@
-import { Pivot } from '@fluentui/react';
+import { Pivot, PivotItem } from '@fluentui/react';
 import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { componentNames, telemetry } from '../../../../telemetry';
+import { IRootState } from '../../../../types/root';
+import { setSnippetTabSuccess } from '../../../services/actions/snippet-action-creator';
 import { renderSnippets } from './snippets-helper';
 
 function GetSnippets() {
+  const dispatch = useDispatch();
+  const { snippets } =  useSelector((state: IRootState) => state);
   const supportedLanguages = {
     'CSharp': {
       sdkDownloadLink: 'https://aka.ms/csharpsdk',
@@ -28,7 +33,20 @@ function GetSnippets() {
     }
   };
 
-  return <Pivot>{renderSnippets(supportedLanguages)}</Pivot>;
+  const handlePivotItemClick = (pivotItem?: PivotItem) => {
+    if (!pivotItem) {
+      return;
+    }
+    dispatch(setSnippetTabSuccess(pivotItem.props.itemKey!))
+  }
+
+  return <Pivot
+    className={'pivot-response'}
+    selectedKey={snippets.snippetTab}
+    onLinkClick={handlePivotItemClick}
+  >
+    {renderSnippets(supportedLanguages)}
+  </Pivot>;
 }
 export const Snippets = telemetry.trackReactComponent(
   GetSnippets,

src/app/views/query-response/snippets/snippets-helper.tsx

@@ -34,6 +34,7 @@ export function renderSnippets(supportedLanguages: ISupportedLanguages) {
       headerButtonProps={{
         'aria-controls': `${language}-tab`
       }}
+      itemKey={language}
     >
       <Snippet language={language} snippetInfo={supportedLanguages} />
     </PivotItem>

src/types/snippets.ts

@@ -4,4 +4,5 @@ export interface ISnippet extends IApiResponse {
   pending: boolean;
   data: any;
   error: any | null;
+  snippetTab?: string;
 }