Task: Persist sidebar selection (#1664)

microsoftgraph · Apr 19, 2022 · 27d917e · 27d917e
1 parent 96d3112
commit 27d917e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git 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
@@ -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);
-  }
-}
+