Skip to content

Improve artifact registry image URI display

Why?

Pending UX improvements listed in UX improvements to Google Artifact Registry pages (#442151 - closed)

  • The image URI should be shown in full, instead of being truncated. (see comment)
  • On smaller viewports, the image path at the top should wrap to another line (screenshot) (see comment)

What?

Improve artifact registry image URI display

Show URI in full instead of truncating

Add min-width: 0; for title-area component

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before After
Screenshot_2024-03-26_at_12.09.14_PM Screenshot_2024-03-26_at_12.04.51_PM
Screenshot_2024-03-26_at_12.09.01_PM Screenshot_2024-03-26_at_12.05.21_PM

How to set up and validate locally

  1. Simulate a SAAS instance in local GDK

  2. In rails console enable the experiment

    Feature.enable(:google_cloud_support_feature_flag)
  3. Now the tricky part. This integration depends on:

    1. An auth layer service (https://gitlab.com/gitlab-org/architecture/gitlab-gcp-integration/glgo)
    2. GCP resources (which in turn point to the auth service)

    To facilitate the setup, you can use the shared dev-gcp-s3c-integrati-9abafed1 GCP project, where the resources for (2) are already created.

    For (1), we need to temporarily point Rails to a dummy auth service (also hosted in dev-gcp-s3c-integrati-9abafed1) instead of the production one (which will refuse requests from your Rails instance because it's unknown/unauthorized). To do this, follow these steps (adapted from here):

    1. Apply this diff. This will point your Rails app to the dummy auth service. Make sure to replace yourusername with your GitLab username:
      diff --git a/ee/lib/google_cloud_platform.rb b/ee/lib/google_cloud_platform.rb
      index 3aaf984b0504..ef52880d44de 100644
      --- a/ee/lib/google_cloud_platform.rb
      +++ b/ee/lib/google_cloud_platform.rb
      @@ -1,11 +1,7 @@
      # frozen_string_literal: true
      
      module GoogleCloudPlatform
      -  GLGO_BASE_URL = if Gitlab.staging?
      -                    'https://glgo.staging.runway.gitlab.net'
      -                  else
      -                    'https://auth.gcp.gitlab.com'
      -                  end
      +  GLGO_BASE_URL = 'https://glgo-abo6lqot3a-uc.a.run.app'
      
         GLGO_TOKEN_ENDPOINT_URL = "#{GLGO_BASE_URL}/token".freeze
      
      diff --git a/ee/lib/google_cloud_platform/jwt.rb b/ee/lib/google_cloud_platform/jwt.rb
      index b12a9bba6ca3..7c767a3120e1 100644
      --- a/ee/lib/google_cloud_platform/jwt.rb
      +++ b/ee/lib/google_cloud_platform/jwt.rb
      @@ -74,7 +74,7 @@ def user_access_level
      
         override :issuer
         def issuer
      -      Gitlab.config.gitlab.url
      +      'http://yourusername.gdk.test:3000'
         end
      
         override :audience
    2. In your browser, query the /oauth/discovery/keys endpoint of your GDK instance (e.g. visit http://gdk.test:3000/oauth/discovery/keys) and copy the result JSON payload.
    3. Create a public GitLab.com snippet with the JSON payload from the previous step. Get the raw form of the snipper and copy its URL (sample).
    4. In the dummy auth service deployment in GCP, click edit & deploy a new review at the top. In the variables and secrets tab, there is an env var called GLGO_KNOWN_ISSUERS. Append the following to the existing value: ,<issuer URL>;<raw snippet URL>. Scroll down and click deploy.

    With that done, your Rails instance can now communicate with the dummy auth service, which is now properly configured to recognize it.

  4. Visit Project > Settings > Integrations > Google Cloud IAM and fill the fields. Please use the same test project under gitlab-org for all the remaining instructions:

    • Project ID: dev-gcp-s3c-integrati-9abafed1
    • Project number: 604150606412
    • Pool ID: rchanila-testing
    • Provider ID: prod
  5. Visit Project > Settings > Integrations > Google Cloud Artifact registry and fill the fields:

    • Project ID: dev-gcp-s3c-integrati-9abafed1
    • Repository name: demo
    • Repository location: us-east1
  6. Visit Project > Deploy > Google Artifact registry

  7. Click on any image & confirm the above on the details page.

Related to #442151 (closed)

Edited by João Pereira

Merge request reports