Skip to content

GitLab UI GlBadge integration

Mark Florian requested to merge gitlab-ui-badge-integration-2 into master

What does this MR do?

This is an integration branch for fixing breakages in gitlab due to the eventual upgrade to @gitlab/ui that includes gitlab-ui!1248 (merged).

Addresses gitlab-ui#481 (closed).

Most uses of GlBadge have been changed to GlDeprecatedBadge, preserving the API and appearance of the previous design. These can be migrated in future iterations to GlBadge.

Some uses have been ported to the new GlBadge (these were signed off in !28356 (closed), which was eventually closed in favour of this MR):

Script

This is a script I wrote to help create this MR from the ashes of !28356 (closed), and to keep it up-to-date.

After running it, run git range-diff origin/master @{U} HEAD to see how the new version of the branch differs from the old version.

Script to help keep this MR up-to-date 
#!/usr/bin/env bash

set -euo pipefail

GITLAB_UI_PACKAGE_VERSION=16.0

stage-files() {
    git add ee spec app
}

try-commit() {
    git commit -m "$1" || true
}

FILES_TO_RECOVER_FROM_OLD_MR=(
    app/assets/javascripts/monitoring/components/alert_widget.vue
    spec/frontend/monitoring/alert_widget_spec.js
    spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap
    app/assets/javascripts/groups/components/group_item.vue
    spec/frontend/groups/components/group_item_spec.js
    app/assets/javascripts/groups/components/item_stats.vue
    spec/frontend/groups/components/item_stats_spec.js
    app/assets/javascripts/error_tracking/components/error_details.vue
    app/assets/javascripts/error_tracking/components/constants.js
    spec/frontend/error_tracking/components/error_details_spec.js
    app/assets/javascripts/releases/components/release_block_header.vue
    spec/frontend/releases/components/release_block_header_spec.js
    app/assets/javascripts/releases/components/release_block_milestone_info.vue
    spec/frontend/releases/components/release_block_milestone_info_spec.js
    app/assets/javascripts/repository/components/table/row.vue
    spec/frontend/repository/components/table/row_spec.js
    ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue
    ee/spec/frontend/analytics/code_review_analytics/components/app_spec.js
    ee/app/assets/javascripts/packages/shared/components/package_tags.vue
    ee/spec/frontend/packages/shared/components/package_tags_spec.js
    app/assets/stylesheets/bootstrap_migration.scss
    app/assets/stylesheets/framework/badges.scss
)

# Throw everything away, but first make a temporary branch
git checkout gitlab-ui-badge-integration-2
git branch tmp/gitlab-ui-badge-integration-$(date +%Y-%m-%d_%H-%M-%S)
git fetch origin master
git reset origin/master --hard

# Add changelog
cat <<- EOF > changelogs/unreleased/gitlab-ui-badge-integration-2.yml
---
title: Update the visual design of badges in some areas
merge_request: 31646
author:
type: other
EOF
git add changelogs

# Install GitLab UI version with badges
yarn add @gitlab/ui@$GITLAB_UI_PACKAGE_VERSION
git add package.json yarn.lock
git commit -F - <<- EOF
Upgrade to @gitlab/ui 15.0

Part of the [Style text badges issue][1].

This moves most uses of \`GlBadge\` to \`GlDeprecatedBadge\`. Some have been
moved to the new \`GlBadge\`, as they've received UX review.

[1]: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/481
EOF

# Alias one-line import statements
repren \
    --from '((?<!GlDeprecatedBadge as )GlBadge(?=.*@gitlab/ui))' \
    --to 'GlDeprecatedBadge as GlBadge' \
    --word-breaks \
    spec ee/spec app/assets/javascripts ee/app/assets/javascripts;

# Alias multi-line import statements
repren \
    --from '^  (?<!GlDeprecatedBadge as )GlBadge,$' \
    --to '  GlDeprecatedBadge as GlBadge,' \
    spec ee/spec app/assets/javascripts ee/app/assets/javascripts;

# Remove backups produced by repren
fd orig$ -x rm {}

# Stage all files with aliases applied
stage-files

# Run prettier against staged files
yarn run prettier-staged-save

try-commit "Alias GlDeprecatedBadge to GlBadge"

# Stage and commit prettified files
stage-files
try-commit "Prettify touched files"

# Undo changes to files we want to migrate to new badge
git checkout origin/master \
    -- "${FILES_TO_RECOVER_FROM_OLD_MR[@]}"

stage-files
try-commit "Undo changes to files we want to migrate to new badge"

# Recover signed-off changes from original MR
# https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28356
git diff origin/master...origin/gitlab-ui-badge-integration -- \
    "${FILES_TO_RECOVER_FROM_OLD_MR[@]}" | \
    git apply --3way

# Stage and commit
stage-files
try-commit "Recover signed-off changes from original MR"

# Additional fixes
git apply << EOF
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index 507408b063b0..d53630163359 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -147,8 +147,11 @@ export default {
           class="mr-1 position-relative text-secondary"
         /><span class="position-relative">{{ fullPath }}</span>
       </component>
-      <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
-      <gl-badge v-if="lfsOid" variant="muted" size="sm" class="ml-1">LFS</gl-badge>
+      <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
+      <gl-badge v-if="lfsOid" variant="muted" size="sm" class="ml-1" data-qa-selector="label-lfs"
+        >LFS</gl-badge
+      >
+      <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
       <template v-if="isSubmodule">
         @ <gl-link :href="submoduleTreeUrl" class="commit-sha">{{ shortSha }}</gl-link>
       </template>
diff --git a/spec/features/projects/tree/tree_show_spec.rb b/spec/features/projects/tree/tree_show_spec.rb
index 2407a9e6ea3c..5305936a12f6 100644
--- a/spec/features/projects/tree/tree_show_spec.rb
+++ b/spec/features/projects/tree/tree_show_spec.rb
@@ -24,7 +24,7 @@ describe 'Projects tree', :js do
     expect(page).to have_selector('.tree-item')
     expect(page).to have_content('add tests for .gitattributes custom highlighting')
     expect(page).not_to have_selector('.flash-alert')
-    expect(page).not_to have_selector('.label-lfs', text: 'LFS')
+    expect(page).not_to have_selector('[data-qa-selector="label-lfs"]', text: 'LFS')
   end
 
   it 'renders tree table for a subtree without errors' do
@@ -33,7 +33,7 @@ describe 'Projects tree', :js do
 
     expect(page).to have_selector('.tree-item')
     expect(page).to have_content('add spaces in whitespace file')
-    expect(page).not_to have_selector('.label-lfs', text: 'LFS')
+    expect(page).not_to have_selector('[data-qa-selector="label-lfs"]', text: 'LFS')
     expect(page).not_to have_selector('.flash-alert')
   end
 
@@ -86,7 +86,7 @@ describe 'Projects tree', :js do
     it 'renders LFS badge on blob item' do
       visit project_tree_path(project, File.join('master', 'files/lfs'))
 
-      expect(page).to have_selector('.label-lfs', text: 'LFS')
+      expect(page).to have_selector('[data-qa-selector="label-lfs"]', text: 'LFS')
     end
   end
 
EOF

stage-files
try-commit "Fix feature spec"

Screenshots

These screenshots have been copied over from !28356 (closed) for some of the components migrated to the new GlBadge, which were signed-off in that closed MR by UX.

Before After
Release Block Header image image
Release Block Milestone Issue Count image image
Error tracking (error details) - Screen_Shot_2020-05-06_at_11.23.14_AM
Package tags (list page) - Screenshot_2020-05-07_at_10.13.09
Package tags (detail page) - Screenshot_2020-05-07_at_10.13.03

WIP

This is marked as WIP, since it is blocked by gitlab-ui!1248 (merged).

As soon as the above is merged, this MR should update the GitLab UI version to the new major version triggered by the above MR. Then this can be MWPS.

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Edited by Yorick Peterse

Merge request reports