From 4f67f92b550fdedecfd62617a2abbc925576e48a Mon Sep 17 00:00:00 2001
From: arai-a <arai_a@mac.com>
Date: Thu, 16 Dec 2021 21:14:06 +0900
Subject: [PATCH] Bug 1743545 - Make watched repo buttons links. (#7333)

* Change watched repo buttons to links using react-router-dom Link element
---
 tests/ui/job-view/SecondaryNavBar_test.jsx | 35 ++++++++++++----------
 ui/css/treeherder-navbar.css               |  6 ++++
 ui/job-view/headerbars/WatchedRepo.jsx     | 27 ++++++-----------
 3 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/tests/ui/job-view/SecondaryNavBar_test.jsx b/tests/ui/job-view/SecondaryNavBar_test.jsx
index ca23c2a21..390c725d7 100644
--- a/tests/ui/job-view/SecondaryNavBar_test.jsx
+++ b/tests/ui/job-view/SecondaryNavBar_test.jsx
@@ -5,6 +5,7 @@ import { render, waitFor, fireEvent } from '@testing-library/react';
 import thunk from 'redux-thunk';
 import configureMockStore from 'redux-mock-store';
 import { createBrowserHistory } from 'history';
+import { BrowserRouter } from 'react-router-dom';
 
 import FilterModel from '../../../ui/models/filter';
 import SecondaryNavBar from '../../../ui/job-view/headerbars/SecondaryNavBar';
@@ -36,22 +37,24 @@ describe('SecondaryNavBar', () => {
   const testSecondaryNavBar = (store, props) => {
     return (
       <Provider store={store}>
-        <SecondaryNavBar
-          updateButtonClick={() => {}}
-          serverChanged={false}
-          filterModel={
-            new FilterModel({
-              pushRoute: history.push,
-              router,
-            })
-          }
-          repos={repos}
-          setCurrentRepoTreeStatus={() => {}}
-          duplicateJobsVisible={false}
-          groupCountsExpanded={false}
-          toggleFieldFilterVisible={() => {}}
-          {...props}
-        />
+        <BrowserRouter>
+          <SecondaryNavBar
+            updateButtonClick={() => {}}
+            serverChanged={false}
+            filterModel={
+              new FilterModel({
+                pushRoute: history.push,
+                router,
+              })
+            }
+            repos={repos}
+            setCurrentRepoTreeStatus={() => {}}
+            duplicateJobsVisible={false}
+            groupCountsExpanded={false}
+            toggleFieldFilterVisible={() => {}}
+            {...props}
+          />
+        </BrowserRouter>
       </Provider>
     );
   };
diff --git a/ui/css/treeherder-navbar.css b/ui/css/treeherder-navbar.css
index 3c8d84172..58df2b645 100644
--- a/ui/css/treeherder-navbar.css
+++ b/ui/css/treeherder-navbar.css
@@ -452,3 +452,9 @@ fieldset[disabled] .btn-view-nav-closed.active {
 .navbar-link:visited {
   color: lightgray;
 }
+
+/* Watched repo */
+
+.btn-watched-repo {
+  padding: 0.375rem 0.5rem;
+}
diff --git a/ui/job-view/headerbars/WatchedRepo.jsx b/ui/job-view/headerbars/WatchedRepo.jsx
index ffec812f7..db938493c 100644
--- a/ui/job-view/headerbars/WatchedRepo.jsx
+++ b/ui/job-view/headerbars/WatchedRepo.jsx
@@ -11,15 +11,13 @@ import {
   faTimesCircle,
 } from '@fortawesome/free-solid-svg-icons';
 import {
-  ButtonGroup,
   Button,
   DropdownMenu,
   DropdownItem,
   DropdownToggle,
   UncontrolledDropdown,
 } from 'reactstrap';
-import { push as pushRoute } from 'connected-react-router';
-import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
 
 import TreeStatusModel from '../../models/treeStatus';
 import BugLinkify from '../../shared/BugLinkify';
@@ -59,7 +57,7 @@ const statusInfoMap = {
   },
 };
 
-class WatchedRepo extends React.Component {
+export default class WatchedRepo extends React.Component {
   constructor(props) {
     super(props);
 
@@ -127,7 +125,7 @@ class WatchedRepo extends React.Component {
   };
 
   render() {
-    const { repoName, unwatchRepo, repo, pushRoute } = this.props;
+    const { repoName, unwatchRepo, repo } = this.props;
     const { status, messageOfTheDay, reason, statusInfo } = this.state;
     const watchedRepo = repo.name;
     const activeClass = watchedRepo === repoName ? 'active' : '';
@@ -135,15 +133,11 @@ class WatchedRepo extends React.Component {
     const pulseIcon = statusInfo.pulseIcon || null;
 
     return (
-      <ButtonGroup>
-        <Button
-          onClick={() => {
-            pushRoute({ search: updateRepoParams(watchedRepo) });
-            this.updateTreeStatus(true);
-          }}
-          className={`btn-view-nav ${btnClass} ${activeClass}`}
+      <div className="btn-group" role="group">
+        <Link
+          to={updateRepoParams(watchedRepo)}
+          className={`btn btn-sm btn-view-nav ${btnClass} ${activeClass} btn-watched-repo`}
           title={status}
-          size="sm"
         >
           <FontAwesomeIcon
             icon={icon}
@@ -152,7 +146,7 @@ class WatchedRepo extends React.Component {
             pulse={pulseIcon}
           />{' '}
           {watchedRepo}
-        </Button>
+        </Link>
         <UncontrolledDropdown>
           <DropdownToggle className={`btn-view-nav ${activeClass}`}>
             <FontAwesomeIcon
@@ -221,7 +215,7 @@ class WatchedRepo extends React.Component {
             </DropdownItem>
           </DropdownMenu>
         </UncontrolledDropdown>
-      </ButtonGroup>
+      </div>
     );
   }
 }
@@ -235,7 +229,4 @@ WatchedRepo.propTypes = {
     pushLogUrl: PropTypes.string,
   }).isRequired,
   setCurrentRepoTreeStatus: PropTypes.func.isRequired,
-  pushRoute: PropTypes.func.isRequired,
 };
-
-export default connect(null, { pushRoute })(WatchedRepo);