Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-44522

Top-level navigation does not show selected state

    • Blue Ocean 1.2-beta1, Blue Ocean 1.2-beta2

      The Blue Ocean interface does not display a selected state for the top-level navigation. This is especially problematic when plugins add additional top-level links to the interface. Because react renders so quickly it can create a usability problem where the user does not recognize that they have navigated to a new page because the links to do not transition to a "selected" state.

      The correct selected state is pictured in the attached screenshot (navigation-selected-state.png) and is already present in the CSS. In fact it's used for run result pages already. We just need to teach React about it for the top links.

       

       

          [JENKINS-44522] Top-level navigation does not show selected state

          John Long created issue -
          John Long made changes -
          Labels New: cloudbees-internal-steel
          John Long made changes -
          Labels Original: cloudbees-internal-steel New: blueocean cloudbees-internal-steel
          James Dumay made changes -
          Epic Link New: JENKINS-43955 [ 181487 ]
          John Long made changes -
          Description Original: The Blue Ocean interface does not display a selected state for the top-level navigation. This is especially problematic when plugins add additional top-level links to the interface. Because react renders so quickly it can create a usability problem where the user does not recognize that they have navigated to a new page because the links to do not transition to a different state.

          The correct selected state is pictured in the attached screenshot (navigation-selected-state.png) and is already present in the CSS. In fact it's used for [run result pages|https://ci.blueocean.io/blue/organizations/jenkins/admin%2Fdocker-gc/detail/docker-gc/10/pipeline] already. We just need to teach React about it for the top links.

           

           
          New: The Blue Ocean interface does not display a selected state for the top-level navigation. This is especially problematic when plugins add additional top-level links to the interface. Because react renders so quickly it can create a usability problem where the user does not recognize that they have navigated to a new page because the links to do not transition to a "selected" state.

          The correct selected state is pictured in the attached screenshot (navigation-selected-state.png) and is already present in the CSS. In fact it's used for [run result pages|https://ci.blueocean.io/blue/organizations/jenkins/admin%2Fdocker-gc/detail/docker-gc/10/pipeline] already. We just need to teach React about it for the top links.

           

           
          Michael Neale made changes -
          Epic Link Original: JENKINS-43955 [ 181487 ] New: JENKINS-35761 [ 171656 ]
          Michael Neale made changes -
          Assignee New: Cliff Meyers [ cliffmeyers ]

          Michael Neale added a comment -

          For cliff to investigate. I am not sure if this has aything to do with react, more just URI elements -> highlighted top element. 

          Michael Neale added a comment - For cliff to investigate. I am not sure if this has aything to do with react, more just URI elements -> highlighted top element. 

          Cliff Meyers added a comment - - edited

          cc sophistifunk on this one, maybe we can devise a solution here.

          Current mechanism for tab selection on Run Details is using TabLink, which internally uses router.isActive, and the route path matches exactly.

          route.isActive will also return true if the path matches a parent Route. For example, if current route path is '/organizations/jenkins/artifacts-150/activity':

          router.isActive('/') // returns true, as the this the top level route definition that matches everything
          router.isActive('/organizations/jenkins') // returns true, since we define a route with path="organizations/:organization"
          router.isActive('/organizations/jenkin') // returns false, since the organization path var doesn't match
          router.isActive('/organizations/jenkins/artifacts-150') // returns false, since that isn't actually a Route, but rather a Redirect that pushes the user to the /activity child route
          router.isActive('/organizations/jenkins/artifacts-150/activity') // returns true, exact match
          

          So technically this could be made to work if the top-level Link was a TabLink and its "to" prop pointed at a route path that was the parent for all other route. To make "Pipelines" do this would be harder (impossible?) since the route structure has a few different top-level routes (below "/" anyways) and using "/" would leave it active for all routes I think. sophistifunk does that sound right to you?

          If we can confirm the current pieces can't be made to work in a reasonable fashion, I may have an alternative idea or two.

          Cliff Meyers added a comment - - edited cc sophistifunk on this one, maybe we can devise a solution here. Current mechanism for tab selection on Run Details is using TabLink, which internally uses router.isActive, and the route path matches exactly. route.isActive will also return true if the path matches a parent Route. For example, if current route path is '/organizations/jenkins/artifacts-150/activity': router.isActive( '/' ) // returns true , as the this the top level route definition that matches everything router.isActive( '/organizations/jenkins' ) // returns true , since we define a route with path= "organizations/:organization" router.isActive( '/organizations/jenkin' ) // returns false , since the organization path var doesn't match router.isActive( '/organizations/jenkins/artifacts-150' ) // returns false , since that isn't actually a Route, but rather a Redirect that pushes the user to the /activity child route router.isActive( '/organizations/jenkins/artifacts-150/activity' ) // returns true , exact match So technically this could be made to work if the top-level Link was a TabLink and its "to" prop pointed at a route path that was the parent for all other route. To make "Pipelines" do this would be harder (impossible?) since the route structure has a few different top-level routes (below "/" anyways) and using "/" would leave it active for all routes I think. sophistifunk does that sound right to you? If we can confirm the current pieces can't be made to work in a reasonable fashion, I may have an alternative idea or two.

          Josh McDonald added a comment -

          Yes, that makes sense. There's probably a way to query the router and get the link that `/` would redirect to, though? Then we could use that for the "Pipelines" tab url maybe?

          Josh McDonald added a comment - Yes, that makes sense. There's probably a way to query the router and get the link that `/` would redirect to, though? Then we could use that for the "Pipelines" tab url maybe?

            cliffmeyers Cliff Meyers
            jlong John Long
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved: