Consolidate UI of toolbars for AllRunsList and ExperimentList (#124)

* Keep Experiments button in sidenav highlighted on non-pipeline pages

* Revert IDs in SideNav

frontend/src/components/SideNav.test.tsx

@@ -48,13 +48,13 @@ describe('SideNav', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders experiments as active page', () => {
-    const tree = shallow(<SideNav page={RoutePage.EXPERIMENTS} {...routerProps} />);
+  it('renders Pipelines as active when on PipelineDetails page', () => {
+    const tree = shallow(<SideNav page={RoutePage.PIPELINE_DETAILS} {...routerProps} />);
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders Pipelines as active when on PipelineDetails page', () => {
-    const tree = shallow(<SideNav page={RoutePage.PIPELINE_DETAILS} {...routerProps} />);
+  it('renders experiments as active page', () => {
+    const tree = shallow(<SideNav page={RoutePage.EXPERIMENTS} {...routerProps} />);
     expect(tree).toMatchSnapshot();
   });
 
@@ -63,11 +63,36 @@ describe('SideNav', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders nothing as active page', () => {
+  it('renders experiments as active page when on NewExperiment page', () => {
+    const tree = shallow(<SideNav page={RoutePage.NEW_EXPERIMENT} {...routerProps} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders experiments as active page when on Compare page', () => {
     const tree = shallow(<SideNav page={RoutePage.COMPARE} {...routerProps} />);
     expect(tree).toMatchSnapshot();
   });
 
+  it('renders experiments as active page when on AllRuns page', () => {
+    const tree = shallow(<SideNav page={RoutePage.RUNS} {...routerProps} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders experiments as active page when on RunDetails page', () => {
+    const tree = shallow(<SideNav page={RoutePage.RUN_DETAILS} {...routerProps} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders experiments as active page when on RecurringRunDetails page', () => {
+    const tree = shallow(<SideNav page={RoutePage.RECURRING_RUN} {...routerProps} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders experiments as active page when on NewRun page', () => {
+    const tree = shallow(<SideNav page={RoutePage.NEW_RUN} {...routerProps} />);
+    expect(tree).toMatchSnapshot();
+  });
+
   it('show jupyterhub link if accessible', () => {
     const tree = shallow(<SideNav page={RoutePage.COMPARE} {...routerProps} />);
     tree.setState({ jupyterHubAvailable: true });

frontend/src/components/SideNav.tsx

@@ -184,9 +184,9 @@ class SideNav extends React.Component<SideNavProps, SideNavState> {
           <Button className={
             classes(
               css.button,
-              page.startsWith(RoutePage.EXPERIMENTS) && css.active,
+              this._highlightExperimentsButton(page) && css.active,
               collapsed && css.collapsedButton)}>
-            <ExperimentsIcon color={page.startsWith(RoutePage.EXPERIMENTS) ? iconColor.active : iconColor.inactive} />
+            <ExperimentsIcon color={this._highlightExperimentsButton(page) ? iconColor.active : iconColor.inactive} />
             <span className={classes(collapsed && css.collapsedLabel, css.label)}>Experiments</span>
           </Button>
         </Link>
@@ -209,6 +209,15 @@ class SideNav extends React.Component<SideNavProps, SideNavState> {
     );
   }
 
+  private _highlightExperimentsButton(page: string): boolean {
+    return page.startsWith(RoutePage.EXPERIMENTS)
+      || page.startsWith(RoutePage.RUNS)
+      // TODO: Router should have a constant for this, but it doesn't follow the naming convention
+      // of the other pages
+      || page.startsWith('/recurringrun')
+      || page.startsWith(RoutePage.COMPARE);
+  }
+
   private _toggleNavClicked() {
     this.setState({
       collapsed: !this.state.collapsed,