Disable zoom in/zoom out/reset buttons

Author: janfaracik

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

@@ -23,22 +23,23 @@
   }
 
   &__heading {
+    padding: 0 0.55rem;
     bottom: unset !important;
     right: unset !important;
+    line-height: 2rem;
     font-weight: var(--font-bold-weight);
     font-size: var(--font-size-sm);
   }
 }
 
 .test-floaty-material {
   position: absolute;
-  inset: 0.4rem 0.3rem;
+  inset: 0.1rem;
   display: flex;
   z-index: 1;
   backdrop-filter: blur(10px);
   background: red;
   border-radius: 0.45rem;
-  padding: 0.2rem 0.4375rem;
   align-items: center;
   color: var(--text-color-secondary);
   background: color-mix(in srgb, var(--card-background) 80%, transparent);

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

@@ -47,19 +47,40 @@
 
 .pgw-fullscreen-controls,
 .pgw-zoom-controls {
-  padding: 0.2rem !important;
-
   .jenkins-button {
+    --button-background: transparent;
+    --button-background--hover: transparent;
+    --button-background--active: transparent;
+    --button-box-shadow--focus: transparent;
+
     padding: 0;
-    width: 1.75rem;
-    min-height: 1.75rem;
+    width: 2rem;
+    min-height: 2rem;
     border-radius: 0.35rem;
 
+    &::before {
+      border: none;
+    }
+
     svg {
       width: 1rem;
       height: 1rem;
       color: var(--text-color-secondary);
     }
+
+    &:not(:disabled) {
+      &:hover {
+        svg {
+          opacity: 0.75;
+        }
+      }
+
+      &:active {
+        svg {
+          opacity: 0.5;
+        }
+      }
+    }
   }
 }
 

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

@@ -21,6 +21,7 @@ import {
   TransformWrapper,
   TransformComponent,
   useControls,
+  useTransformEffect,
 } from "react-zoom-pan-pinch";
 import Tooltip from "../../../common/components/tooltip.tsx";
 
@@ -114,7 +115,7 @@ export function PipelineGraph(props: Props) {
   };
 
   return (
-    <TransformWrapper minScale={0.75}>
+    <TransformWrapper minScale={0.75} maxScale={3}>
       <ZoomControls />
 
       <TransformComponent wrapperStyle={{ width: "100%", height: "100%" }}>
@@ -178,13 +179,31 @@ export function PipelineGraph(props: Props) {
 
 function ZoomControls() {
   const { zoomIn, zoomOut, resetTransform } = useControls();
+  const [disabledButtons, setDisabledButtons] = useState({
+    zoomIn: false,
+    zoomOut: false,
+    reset: true,
+  });
+
+  useTransformEffect(({ state, instance }) => {
+    const cantZoomIn = state.scale >= instance.props.maxScale!;
+    const cantZoomOut = state.scale <= instance.props.minScale!;
+    const cantReset = state.scale === 1;
+
+    setDisabledButtons({
+      zoomIn: cantZoomIn,
+      zoomOut: cantZoomOut,
+      reset: cantReset,
+    });
+  });
 
   return (
     <div className="test-floaty-material pgw-zoom-controls">
       <Tooltip content={"Zoom in"}>
         <button
           className={"jenkins-button jenkins-button--tertiary"}
           onClick={() => zoomIn()}
+          disabled={disabledButtons.zoomIn}
         >
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             <path
@@ -202,6 +221,7 @@ function ZoomControls() {
         <button
           className={"jenkins-button jenkins-button--tertiary"}
           onClick={() => zoomOut()}
+          disabled={disabledButtons.zoomOut}
         >
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             <path
@@ -219,6 +239,7 @@ function ZoomControls() {
         <button
           className={"jenkins-button jenkins-button--tertiary"}
           onClick={() => resetTransform()}
+          disabled={disabledButtons.reset}
         >
           <svg className="ionicon" viewBox="0 0 512 512">
             <path