Make widget title clickable (#1006)

Author: janfaracik

src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.scss

@@ -53,6 +53,25 @@
     line-height: 2rem;
     font-weight: var(--font-bold-weight);
     font-size: var(--font-size-sm);
+    gap: 0.375rem;
+    color: var(--text-color-secondary);
+    text-decoration: none !important;
+
+    &[href] {
+      color: var(--text-color) !important;
+    }
+
+    svg {
+      width: 0.875rem;
+      height: 0.875rem;
+      color: var(--text-color-secondary);
+      transition: color var(--standard-transition);
+      margin-right: -0.25rem;
+    }
+
+    &:hover svg {
+      color: var(--text-color);
+    }
   }
 }
 
@@ -68,11 +87,10 @@
 
 .pgv-stages-graph__controls {
   position: absolute;
-  inset: 0.1rem;
+  inset: 0.1875rem;
   display: flex;
   z-index: 1;
   backdrop-filter: blur(10px);
-  background: red;
   border-radius: 0.45rem;
   align-items: center;
   color: var(--text-color-secondary);

src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.tsx

@@ -19,6 +19,7 @@ export default function Stages({
   selectedStage,
   stageViewPosition,
   onStageSelect,
+  onRunPage,
 }: StagesProps) {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -29,9 +30,29 @@ export default function Stages({
         "pgv-stages-graph--dialog": isExpanded,
       })}
     >
-      <div className={"pgv-stages-graph__controls pgv-stages-graph__heading"}>
-        Graph
-      </div>
+      {!onRunPage && (
+        <div className={"pgv-stages-graph__controls pgv-stages-graph__heading"}>
+          Graph
+        </div>
+      )}
+      {onRunPage && (
+        <a
+          className={"pgv-stages-graph__controls pgv-stages-graph__heading"}
+          href="pipeline-overview"
+        >
+          Stages
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="48"
+              d="M184 112l144 144-144 144"
+            />
+          </svg>
+        </a>
+      )}
       <div className={"pgv-stages-graph__controls pgw-fullscreen-controls"}>
         <Tooltip content={isExpanded ? "Close" : "Expand"}>
           <button
@@ -98,6 +119,7 @@ interface StagesProps {
   selectedStage?: StageInfo;
   stageViewPosition: StageViewPosition;
   onStageSelect?: (nodeId: string) => void;
+  onRunPage?: boolean;
 }
 
 function ZoomControls() {

src/main/frontend/pipeline-graph-view/app.scss

@@ -23,18 +23,14 @@
     svg {
       width: 1rem;
       height: 1rem;
+      transition: color var(--standard-transition);
     }
 
     &:not(:disabled) {
-      &:hover {
-        svg {
-          opacity: 0.75;
-        }
-      }
-
+      &:hover,
       &:active {
         svg {
-          opacity: 0.5;
+          color: var(--text-color);
         }
       }
     }

src/main/frontend/pipeline-graph-view/app.tsx

@@ -18,7 +18,11 @@ export default function App() {
   return (
     <div>
       <UserPreferencesProvider>
-        <Stages stages={run.stages} stageViewPosition={StageViewPosition.TOP} />
+        <Stages
+          stages={run.stages}
+          stageViewPosition={StageViewPosition.TOP}
+          onRunPage
+        />
       </UserPreferencesProvider>
     </div>
   );