Move Configure button to overflow dropdown (#777)

Author: stuartrowe

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

@@ -2,6 +2,8 @@ import "./pipeline-console.scss";
 import "../../../pipeline-graph-view/app.scss";
 import "../../../pipeline-graph-view/pipeline-graph/styles/main.scss";
 
+import { useEffect, useState } from "react";
+
 import Dropdown from "../../../common/components/dropdown.tsx";
 import DropdownPortal from "../../../common/components/dropdown-portal.tsx";
 import Skeleton from "./components/skeleton.tsx";
@@ -14,13 +16,28 @@ import { useLayoutPreferences } from "./providers/user-preference-provider.tsx";
 import ScrollToTopBottom from "./scroll-to-top-bottom.tsx";
 import SplitView from "./split-view.tsx";
 import StageView from "./StageView.tsx";
-import { CONSOLE, DOCUMENT } from "./symbols.tsx";
+import { CONSOLE, DOCUMENT, SETTINGS } from "./symbols.tsx";
 
 export default function PipelineConsole() {
   const rootElement = document.getElementById("console-pipeline-root");
   const currentRunPath = rootElement?.dataset.currentRunPath!;
   const previousRunPath = rootElement?.dataset.previousRunPath;
 
+  const [configurePermission, setConfigurePermission] = useState(false);
+
+  useEffect(() => {
+    const configureDataProxyName = document.getElementById(
+      "console-pipeline-overflow-root",
+    )?.dataset.proxyName;
+    if (configureDataProxyName) {
+      (window as any)[configureDataProxyName]?.hasConfigurePermission(function (
+        enabled: any,
+      ) {
+        setConfigurePermission(enabled?.responseJSON);
+      });
+    }
+  }, [configurePermission]);
+
   const { stageViewPosition, mainViewVisibility } = useLayoutPreferences();
   const {
     openStage,
@@ -58,6 +75,15 @@ export default function PipelineConsole() {
               icon: CONSOLE,
               href: `../console`,
             },
+            configurePermission ? (
+              {
+                text: "Configure",
+                icon: SETTINGS,
+                href: `../../configure`,
+              }
+            ) : (
+              <></>
+            ),
           ]}
         />
       </DropdownPortal>

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

@@ -42,3 +42,16 @@ export const CONSOLE = (
     />
   </svg>
 );
+
+export const SETTINGS = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="32"
+      d="M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4zM416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z"
+    />
+  </svg>
+);

src/main/java/io/jenkins/plugins/pipelinegraphview/utils/AbstractPipelineViewAction.java

@@ -4,6 +4,7 @@
 
 import com.fasterxml.jackson.core.JsonProcessingException;
 import com.fasterxml.jackson.databind.ObjectMapper;
+import hudson.Functions;
 import hudson.Plugin;
 import hudson.model.Action;
 import hudson.model.BallColor;
@@ -14,6 +15,7 @@
 import hudson.security.Permission;
 import hudson.util.HttpResponses;
 import io.jenkins.plugins.pipelinegraphview.Messages;
+import jakarta.servlet.ServletException;
 import java.io.IOException;
 import java.util.concurrent.ExecutionException;
 import java.util.concurrent.TimeoutException;
@@ -60,7 +62,15 @@ public Permission getCancelPermission() {
     }
 
     public Permission getConfigurePermission() {
-        return run.getParent().CONFIGURE;
+        return Item.CONFIGURE;
+    }
+
+    @JavaScriptMethod
+    public boolean hasConfigurePermission() throws IOException, ServletException {
+        if (run != null) {
+            return Functions.hasPermission(run.getParent(), Item.CONFIGURE);
+        }
+        return false;
     }
 
     public String getBuildDisplayName() {

src/main/resources/io/jenkins/plugins/pipelinegraphview/consoleview/PipelineConsoleViewAction/index.jelly

@@ -78,12 +78,9 @@
                         </div>
                     </l:hasPermission>
                 </j:if>
-                <l:hasPermission permission="${it.configurePermission}">
-                    <a href="../../configure" class="jenkins-button">
-                        ${%Configure}
-                    </a>
-                </l:hasPermission>
-                <div id="console-pipeline-overflow-root" />
+                <j:set var="proxyId" value="${h.generateId()}" />
+                <st:bind value="${it}" var="configureAction${proxyId}"/>
+                <div id="console-pipeline-overflow-root" data-proxy-name="configureAction${proxyId}"/>
             </j:set>
 
             <t:buildCaption controls="${controls}">

src/test/java/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewConfigureTest.java

@@ -0,0 +1,60 @@
+package io.jenkins.plugins.pipelinegraphview;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+
+import com.microsoft.playwright.Page;
+import com.microsoft.playwright.junit.UsePlaywright;
+import com.microsoft.playwright.options.AriaRole;
+import hudson.model.Result;
+import hudson.security.FullControlOnceLoggedInAuthorizationStrategy;
+import io.jenkins.plugins.casc.misc.ConfiguredWithCode;
+import io.jenkins.plugins.casc.misc.JenkinsConfiguredWithCodeRule;
+import io.jenkins.plugins.casc.misc.junit.jupiter.WithJenkinsConfiguredWithCode;
+import io.jenkins.plugins.pipelinegraphview.playwright.PipelineJobPage;
+import io.jenkins.plugins.pipelinegraphview.playwright.PlaywrightConfig;
+import io.jenkins.plugins.pipelinegraphview.utils.TestUtils;
+import org.jenkinsci.plugins.workflow.job.WorkflowRun;
+import org.junit.jupiter.api.Test;
+
+@WithJenkinsConfiguredWithCode
+@UsePlaywright(PlaywrightConfig.class)
+class PipelineGraphViewConfigureTest {
+
+    @Test
+    @ConfiguredWithCode("configure-appearance.yml")
+    void configureButtonRedirects(Page p, JenkinsConfiguredWithCodeRule j) throws Exception {
+        WorkflowRun run =
+                TestUtils.createAndRunJob(j, "hello_world", "helloWorldScriptedPipeline.jenkinsfile", Result.SUCCESS);
+        new PipelineJobPage(p, run.getParent())
+                .goTo()
+                .hasBuilds(1)
+                .nthBuild(0)
+                .goToBuild()
+                .goToPipelineOverview()
+                .configure();
+
+        String newUrl = p.url();
+        String targetUrl = j.getURL() + run.getParent().getUrl() + "configure";
+        assertEquals(targetUrl, newUrl);
+    }
+
+    @Test
+    @ConfiguredWithCode("configure-appearance.yml")
+    void noConfigurePermissions(Page p, JenkinsConfiguredWithCodeRule j) throws Exception {
+        // Set authorizations strategy to 'Logged-in users can do anything' so anonymous users only have read access
+        j.jenkins.setAuthorizationStrategy(new FullControlOnceLoggedInAuthorizationStrategy());
+        WorkflowRun run =
+                TestUtils.createAndRunJob(j, "hello_world", "helloWorldScriptedPipeline.jenkinsfile", Result.SUCCESS);
+        new PipelineJobPage(p, run.getParent())
+                .goTo()
+                .hasBuilds(1)
+                .nthBuild(0)
+                .goToBuild()
+                .goToPipelineOverview();
+
+        p.click("#console-pipeline-overflow-root");
+        assertTrue(p.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("Configure"))
+                .isHidden());
+    }
+}

src/test/java/io/jenkins/plugins/pipelinegraphview/playwright/PipelineOverviewPage.java

@@ -133,6 +133,13 @@ public PipelineOverviewPage stageIsVisibleInTree(String stage) {
         return this;
     }
 
+    public PipelineOverviewPage configure() {
+        page.click("#console-pipeline-overflow-root");
+        page.getByRole(AriaRole.LINK, new Page.GetByRoleOptions().setName("Configure"))
+                .click();
+        return this;
+    }
+
     public PipelineOverviewPage cancel() {
         page.click("#pgv-cancel");
         page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("Yes"))