Skip to content

Fix page navigation alignment on dependencies / licenses pages

Brian Williams requested to merge bwill/fix-pagination-alignment into master

What does this MR do and why?

Describe in detail what your merge request does and why.

The page navigation elements on the dependency list and license compliance pages were left-aligned instead of centered. This is because they were missing gl-display-flex, which causes them to default to display: block in Chrome. This MR fixes the alignment by using align="center" instead.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
Screenshot_2023-02-23_at_1.14.16_PM Screenshot_2023-02-23_at_1.11.25_PM
Screenshot_2023-02-23_at_1.14.25_PM Screenshot_2023-02-23_at_1.11.08_PM

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Ensure that your GDK is Ultimate licensed and has gitlab runner setup

  2. Create a copy of https://gitlab.com/gitlab-org/security-products/tests/js-yarn in your GDK

  3. Remove the QA jobs from .gitlab-ci.yml:

    diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
    index 722c670..7b9bffa 100644
    --- a/.gitlab-ci.yml
    +++ b/.gitlab-ci.yml
    @@ -1,16 +1,8 @@
    stages:
      - test
    -  - qa
    
    include:
      # Security Products features
      - template: Dependency-Scanning.gitlab-ci.yml
      - template: License-Scanning.gitlab-ci.yml
    
    -  # Security Products features QA
    -  - https://gitlab.com/gitlab-org/security-products/ci-templates/raw/master/includes-dev/qa-dependency_scanning.yml
    -  - https://gitlab.com/gitlab-org/security-products/ci-templates/raw/master/includes-dev/qa-license_scanning.yml
    -
    -qa-gemnasium-dependency_scanning:
    -  variables:
    -    DS_REPORT_URL: "https://gitlab.com/gitlab-org/security-products/analyzers/gemnasium/-/raw/master/qa/expect/$CI_PROJECT_NAME/default/gl-dependency-scanning-report.json"
  4. Run a pipeline on master if it hasn't run already

  5. Go to $project_url/-/licenses and $project_url/-/dependencies. The page navigation at the bottom should be centered.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Brian Williams

Merge request reports