From 27d917ea0cd63603cf1a1823b370eabfa04aa0af Mon Sep 17 00:00:00 2001
From: EvansA <evansonoka05.j@gmail.com>
Date: Tue, 19 Apr 2022 10:30:53 +0300
Subject: [PATCH] Task: Persist sidebar selection (#1664)

---
 src/app/views/App.tsx             | 13 +++++++++++--
 src/app/views/sidebar/Sidebar.tsx | 27 ++++++++++++++++++---------
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
index faf28ccd1b..8f7e599836 100644
--- a/src/app/views/App.tsx
+++ b/src/app/views/App.tsx
@@ -65,6 +65,7 @@ interface IAppState {
   selectedVerb: string;
   mobileScreen: boolean;
   hideDialog: boolean;
+  sidebarTabSelection: string;
 }
 
 class App extends Component<IAppProps, IAppState> {
@@ -78,10 +79,17 @@ class App extends Component<IAppProps, IAppState> {
     this.state = {
       selectedVerb: 'GET',
       mobileScreen: false,
-      hideDialog: true
+      hideDialog: true,
+      sidebarTabSelection: 'sample-queries'
     };
   }
 
+  private setSidebarTabSelection = (selectedTab : string) => {
+    this.setState({
+      sidebarTabSelection: selectedTab
+    });
+  }
+
   public componentDidMount = async () => {
     this.displayToggleButton(this.mediaQueryList);
     this.mediaQueryList.addListener(this.displayToggleButton);
@@ -476,7 +484,8 @@ class App extends Component<IAppProps, IAppState> {
                 {this.displayAuthenticationSection(minimised)}
                 <hr className={classes.separator} />
 
-                {showSidebar && (<Sidebar />)}
+                {showSidebar && ( <Sidebar currentTab = { this.state.sidebarTabSelection }
+                  setSidebarTabSelection = { this.setSidebarTabSelection } /> ) }
               </Resizable>
             )}
             {graphExplorerMode === Mode.TryIt &&
diff --git a/src/app/views/sidebar/Sidebar.tsx b/src/app/views/sidebar/Sidebar.tsx
index ae6ff25298..2820c26ac7 100644
--- a/src/app/views/sidebar/Sidebar.tsx
+++ b/src/app/views/sidebar/Sidebar.tsx
@@ -6,10 +6,25 @@ import { translateMessage } from '../../utils/translate-messages';
 import History from './history/History';
 import { ResourceExplorer } from './resource-explorer';
 import SampleQueries from './sample-queries/SampleQueries';
-export const Sidebar = () => {
+
+interface ISidebar {
+  currentTab: string;
+  setSidebarTabSelection: Function;
+}
+export const Sidebar = (props: ISidebar) => {
+
+  const onPivotItemClick = (item?: PivotItem) => {
+    if (!item) { return; }
+    const key = item.props.itemKey;
+    if (key) {
+      props.setSidebarTabSelection(key);
+      telemetry.trackTabClickEvent(key);
+    }
+  }
+
   return (
     <div>
-      <Pivot onLinkClick={onPivotItemClick} overflowBehavior='menu'>
+      <Pivot onLinkClick={onPivotItemClick} overflowBehavior='menu' defaultSelectedKey={props.currentTab}>
         <PivotItem
           headerText={translateMessage('Sample Queries')}
           itemIcon='Rocket'
@@ -45,10 +60,4 @@ export const Sidebar = () => {
   );
 };
 
-function onPivotItemClick(item?: PivotItem) {
-  if (!item) { return; }
-  const key = item.props.itemKey;
-  if (key) {
-    telemetry.trackTabClickEvent(key);
-  }
-}
+