Merge pull request #7241 from p12tic/www-buildrequest-anchors

www: Add anchor links to pending build request table
buildbot · Dec 4, 2023 · 6a1b1d4 · 6a1b1d4
2 parents 305ed0e + 3030998
commit 6a1b1d4
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 5 deletions.
diff --git a/www/react-base/src/components/AnchorLink/AnchorLink.tsx b/www/react-base/src/components/AnchorLink/AnchorLink.tsx
@@ -0,0 +1,34 @@
+/*
+  This file is part of Buildbot.  Buildbot is free software: you can
+  redistribute it and/or modify it under the terms of the GNU General Public
+  License as published by the Free Software Foundation, version 2.
+
+  This program is distributed in the hope that it will be useful, but WITHOUT
+  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+  FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more
+  details.
+
+  You should have received a copy of the GNU General Public License along with
+  this program; if not, write to the Free Software Foundation, Inc., 51
+  Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+  Copyright Buildbot Team Members
+*/
+
+import {Link, useLocation} from "react-router-dom";
+
+type AnchorLinkProps = {
+  className: string;
+  anchor: string;
+  children: JSX.Element | JSX.Element[] | string;
+}
+export const AnchorLink = ({className, anchor, children}: AnchorLinkProps) => {
+  const location = useLocation();
+  return (
+    <Link className={className}
+          to={`${location.pathname}#${anchor}`}
+          onClick={e => e.stopPropagation()}>
+      {children}
+    </Link>
+  )
+}
diff --git a/www/react-base/src/components/BuildSummary/BuildSummary.tsx b/www/react-base/src/components/BuildSummary/BuildSummary.tsx
@@ -50,6 +50,7 @@ import {LogPreview} from "../LogPreview/LogPreview";
 import {BuildRequestSummary} from "../BuildRequestSummary/BuildRequestSummary";
 import {Card} from "react-bootstrap";
 import {useScrollToAnchor} from "../../util/AnchorLinks";
+import {AnchorLink} from "../AnchorLink/AnchorLink";
 
 enum DetailLevel {
   None = 0,
@@ -221,11 +222,10 @@ const BuildSummaryStepLine = observer(({build, step, logs, parentFullDisplay}: B
   return (
     <li key={step.id} className="bb-build-summary-step-line list-group-item" id={`bb-step-${step.number}`}>
       <div onClick={() => setFullDisplay(!fullDisplay)}>
-        <Link className="bb-build-summary-step-anchor-link"
-              to={`/builders/${build.builderid}/builds/${build.number}#bb-step-${step.number}`}
-              onClick={e => e.stopPropagation()}>
+        <AnchorLink className="bb-build-summary-step-anchor-link"
+                    anchor={`bb-step-${step.number}`}>
           #
-        </Link>
+        </AnchorLink>
         <BadgeRound className={results2class(step, 'pulse')}>{step.number.toString()}</BadgeRound>
         &nbsp;
         {maybeRenderArrowExpander()}

diff --git a/www/react-base/src/components/PendingBuildRequestsTable/PendingBuildRequestsTable.scss b/www/react-base/src/components/PendingBuildRequestsTable/PendingBuildRequestsTable.scss
@@ -0,0 +1,30 @@
+@import "bootstrap/scss/bootstrap";
+
+.bb-pending-build-request-table-line {
+
+  &.bb-anchor-target {
+    td {
+      border-top: 2px solid #ffff00;
+      border-bottom: 2px solid #ffff00;
+    }
+    td:first-child {
+      border-left: 2px solid #ffff00;
+    }
+    td:last-child {
+      border-right: 2px solid #ffff00;
+    }
+  }
+
+  .bb-pending-build-request-anchor-link {
+    display: inline-block;
+    color: transparent;
+    left: 1em;
+    width: 1em;
+  }
+}
+
+.bb-pending-build-request-table-line:hover {
+  .bb-pending-build-request-anchor-link {
+    color: $gray-500;
+  }
+}
diff --git a/www/react-base/src/components/PendingBuildRequestsTable/PendingBuildRequestsTable.tsx b/www/react-base/src/components/PendingBuildRequestsTable/PendingBuildRequestsTable.tsx
@@ -15,6 +15,7 @@
   Copyright Buildbot Team Members
 */
 
+import './PendingBuildRequestsTable.scss';
 import {observer} from "mobx-react";
 import {Table} from "react-bootstrap";
 import {Link} from "react-router-dom";
@@ -26,6 +27,8 @@ import {
   useDataApiQuery
 } from "buildbot-data-js";
 import {BadgeRound, dateFormat, durationFromNowFormat, useCurrentTime} from "buildbot-ui";
+import {useScrollToAnchor} from "../../util/AnchorLinks";
+import {AnchorLink} from "../AnchorLink/AnchorLink";
 
 export type PendingBuildRequestsTableProps = {
   buildRequestsQuery: DataCollection<Buildrequest>;
@@ -40,6 +43,8 @@ export const PendingBuildRequestsTable = observer(({buildRequestsQuery}: Pending
   const buildersQuery = useDataApiQuery(() =>
     buildRequestsQuery.getRelated(br => Builder.getAll(accessor, {id: br.builderid.toString()})));
 
+  useScrollToAnchor(buildRequestsQuery.array.map(buildRequest => buildRequest.id));
+
   const renderBuildRequests = () => {
     return buildRequestsQuery.array.map(buildRequest => {
       const builder = buildersQuery.getNthOfParentOrNull(buildRequest.id, 0);
@@ -52,8 +57,14 @@ export const PendingBuildRequestsTable = observer(({buildRequestsQuery}: Pending
       });
 
       return (
-        <tr key={buildRequest.id}>
+        <tr key={buildRequest.id}
+            className="bb-pending-build-request-table-line"
+            id={`bb-buildrequest-${buildRequest.id}`}>
           <td>
+            <AnchorLink className="bb-pending-build-request-anchor-link"
+                        anchor={`bb-buildrequest-${buildRequest.id}`}>
+              #
+            </AnchorLink>
             <Link to={`/buildrequests/${buildRequest.id}`}>
               <BadgeRound className=''>{buildRequest.id.toString()}</BadgeRound>
             </Link>