Add WIP expand

Author: janfaracik

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

@@ -14,14 +14,27 @@
   &--left {
     --additional-height: 0px;
     position: sticky;
-    margin-bottom: 0;
     top: calc(var(--header-height) + var(--section-padding));
     height: calc(
       (100vh + min(var(--additional-height), var(--section-padding))) -
         (var(--header-height) + 60px + var(--section-padding))
     );
   }
 
+  &--dialog {
+    position: fixed;
+    inset: 0 !important;
+    z-index: 30000;
+    border-radius: 0;
+    border: none;
+    height: unset;
+
+    .test-floaty-material {
+      margin: 1rem;
+      color: var(--text-color);
+    }
+  }
+
   &__heading {
     padding: 0 0.55rem;
     bottom: unset !important;

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

@@ -19,6 +19,7 @@ export default function Stages({
   stageViewPosition,
   onStageSelect,
 }: StagesProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
   const [sidebarHeight, setSidebarHeight] = useState(0);
 
   useEffect(() => {
@@ -41,6 +42,7 @@ export default function Stages({
       className={classNames("pgv-graph-view-thing", {
         "pgv-graph-view-thing--left":
           stageViewPosition === StageViewPosition.LEFT,
+        "pgv-graph-view-thing--dialog": isExpanded
       })}
       style={{ "--additional-height": sidebarHeight + "px" } as CSSProperties}
     >
@@ -51,22 +53,40 @@ export default function Stages({
         <Tooltip content={"Expand"}>
           <button
             className={"jenkins-button jenkins-button--tertiary"}
-            onClick={() => alert("This will expand")}
+            onClick={() => setIsExpanded(!isExpanded)}
           >
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M10 4H15C15.5523 4 16 4.44772 16 5V10M10 16H5C4.44772 16 4 15.5523 4 15V10"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-              />
-            </svg>
+            {isExpanded && (
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10 4H15C15.5523 4 16 4.44772 16 5V10M10 16H5C4.44772 16 4 15.5523 4 15V10"
+                  stroke="red"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                />
+              </svg>
+            )}
+            {!isExpanded && (
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10 4H15C15.5523 4 16 4.44772 16 5V10M10 16H5C4.44772 16 4 15.5523 4 15V10"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                />
+              </svg>
+            )}
           </button>
         </Tooltip>
       </div>

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

@@ -15,6 +15,7 @@
     width: 2rem;
     min-height: 2rem;
     border-radius: 0.35rem;
+    color: inherit !important;
 
     &::before {
       border: none;
@@ -23,7 +24,6 @@
     svg {
       width: 1rem;
       height: 1rem;
-      color: var(--text-color-secondary);
     }
 
     &:not(:disabled) {

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

@@ -164,7 +164,6 @@ export function PipelineGraph(props: Props) {
 interface Props {
   stages: Array<StageInfo>;
   layout?: Partial<LayoutInfo>;
-  setStages?: (stages: Array<StageInfo>) => void;
   selectedStage?: StageInfo;
   collapsed?: boolean;
   onStageSelect: (nodeId: string) => void;