Optimize interface for mobile (#709)

Author: janfaracik

src/main/frontend/pipeline-console-view/pipeline-console/main/PipelineConsole.tsx

@@ -39,7 +39,6 @@ export default function PipelineConsole() {
         <Dropdown
           items={[
             <StagesCustomization key="visibility-select" />,
-            "separator",
             {
               text: "View as plain text",
               icon: DOCUMENT,

src/main/frontend/pipeline-console-view/pipeline-console/main/StageNodeLink.tsx

@@ -14,7 +14,7 @@ export default function StageNodeLink({ agent }: StageNodeLinkProps) {
   }
 
   return (
-    <li>
+    <li className={"jenkins-mobile-hide"}>
       <a
         href={href}
         className={"jenkins-button jenkins-button--tertiary"}

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

@@ -14,8 +14,13 @@ export default function StagesCustomization() {
     setMainViewVisibility,
     stageViewPosition,
     setStageViewPosition,
+    isMobile,
   } = useLayoutPreferences();
 
+  if (isMobile) {
+    return null;
+  }
+
   const handleViewChange = (e: ChangeEvent<HTMLSelectElement>) => {
     setMainViewVisibility(e.target.value as MainViewVisibility);
   };
@@ -121,6 +126,7 @@ export default function StagesCustomization() {
           <option value={StageViewPosition.LEFT}>Left</option>
         </select>
       </label>
+      <div className="jenkins-dropdown__separator" />
     </>
   );
 }

src/main/frontend/pipeline-console-view/pipeline-console/main/providers/user-preference-provider.tsx

@@ -30,6 +30,11 @@ interface LayoutPreferences {
   setTreeViewWidth: (width: number) => void;
   setStageViewWidth: (width: number) => void;
   setStageViewHeight: (height: number) => void;
+  /**
+   * Returns true if the current window width is less than the mobile breakpoint.
+   * Used for disabling customization options in favor of a mobile-friendly layout.
+   */
+  isMobile: boolean;
 }
 
 // CONTEXT
@@ -65,20 +70,27 @@ const loadFromLocalStorage = <T,>(key: string, fallback: T): T => {
   return fallback;
 };
 
+const MOBILE_BREAKPOINT = 700;
+
 // PROVIDER
 export const LayoutPreferencesProvider = ({
   children,
 }: {
   children: ReactNode;
 }) => {
-  const [stageViewPosition, setStageViewPositionState] =
+  const [windowWidth, setWindowWidth] = useState<number>(
+    typeof window !== "undefined" ? window.innerWidth : 1000,
+  );
+
+  const [persistedStageViewPosition, setStageViewPositionState] =
     useState<StageViewPosition>(
       loadFromLocalStorage(LS_KEYS.stageViewPosition, StageViewPosition.TOP),
     );
-  const [mainViewVisibility, setMainViewVisibilityState] =
+  const [persistedMainViewVisibility, setMainViewVisibilityState] =
     useState<MainViewVisibility>(
       loadFromLocalStorage(LS_KEYS.mainViewVisibility, MainViewVisibility.BOTH),
     );
+
   const [treeViewWidth, setTreeViewWidthState] = useState<number>(
     loadFromLocalStorage(LS_KEYS.treeViewWidth, 300),
   );
@@ -89,14 +101,33 @@ export const LayoutPreferencesProvider = ({
     loadFromLocalStorage(LS_KEYS.stageViewHeight, 250),
   );
 
-  // Save to localStorage
+  // Handle responsive override
+  const isMobile = windowWidth < MOBILE_BREAKPOINT;
+  const stageViewPosition = isMobile
+    ? StageViewPosition.TOP
+    : persistedStageViewPosition;
+  const mainViewVisibility = isMobile
+    ? MainViewVisibility.GRAPH_ONLY
+    : persistedMainViewVisibility;
+
+  // Save to localStorage only when not in mobile mode
   useEffect(() => {
-    window.localStorage.setItem(LS_KEYS.stageViewPosition, stageViewPosition);
-  }, [stageViewPosition]);
+    if (!isMobile) {
+      window.localStorage.setItem(
+        LS_KEYS.stageViewPosition,
+        persistedStageViewPosition,
+      );
+    }
+  }, [persistedStageViewPosition, isMobile]);
 
   useEffect(() => {
-    window.localStorage.setItem(LS_KEYS.mainViewVisibility, mainViewVisibility);
-  }, [mainViewVisibility]);
+    if (!isMobile) {
+      window.localStorage.setItem(
+        LS_KEYS.mainViewVisibility,
+        persistedMainViewVisibility,
+      );
+    }
+  }, [persistedMainViewVisibility, isMobile]);
 
   useEffect(() => {
     window.localStorage.setItem(
@@ -119,7 +150,13 @@ export const LayoutPreferencesProvider = ({
     );
   }, [stageViewHeight]);
 
-  // Setter wrappers
+  // Update window width on resize
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   const setStageViewPosition = (position: StageViewPosition) =>
     setStageViewPositionState(position);
   const setMainViewVisibility = (visibility: MainViewVisibility) =>
@@ -142,6 +179,7 @@ export const LayoutPreferencesProvider = ({
         setTreeViewWidth,
         setStageViewWidth,
         setStageViewHeight,
+        isMobile,
       }}
     >
       {children}

src/main/frontend/pipeline-console-view/pipeline-console/main/split-view.scss

@@ -3,6 +3,7 @@
   display: grid;
   gap: var(--section-padding);
   animation: fade-in 0.1s ease-in-out both;
+  align-items: start;
 }
 
 @keyframes fade-in {
@@ -12,7 +13,7 @@
 }
 
 .pgv-split-view__side-panel {
-  position: relative;
+  display: contents;
 }
 
 .pgv-split-view__divider {

src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.tsx

@@ -80,7 +80,7 @@ export default function StageDetails({ stage }: StageDetailsProps) {
           </Tooltip>
         </li>
         {stage.pauseDurationMillis !== 0 && (
-          <li>
+          <li className={"jenkins-mobile-hide"}>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
               <path
                 d="M145.61 464h220.78c19.8 0 35.55-16.29 33.42-35.06C386.06 308 304 310 304 256s83.11-51 95.8-172.94c2-18.78-13.61-35.06-33.41-35.06H145.61c-19.8 0-35.37 16.28-33.41 35.06C124.89 205 208 201 208 256s-82.06 52-95.8 172.94c-2.14 18.77 13.61 35.06 33.41 35.06z"