GitLab UI GlBadge integration
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):
-
app/assets/javascripts/monitoring/components/alert_widget.vue -
app/assets/javascripts/groups/components/group_item.vue -
app/assets/javascripts/groups/components/item_stats.vue -
app/assets/javascripts/error_tracking/components/error_details.vue -
app/assets/javascripts/releases/components/release_block_header.vue -
app/assets/javascripts/releases/components/release_block_milestone_info.vue -
app/assets/javascripts/repository/components/table/row.vue -
ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue -
ee/app/assets/javascripts/packages/shared/components/package_tags.vue
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 | ![]() |
![]() |
Release Block Milestone Issue Count | ![]() |
![]() |
Error tracking (error details) | - |
![]() |
Package tags (list page) | - |
![]() |
Package tags (detail page) | - |
![]() |
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
-
Changelog entry - [-] Documentation (if required)
-
Code review guidelines - [-] Merge request performance guidelines
-
Style guides - [-] Database guides
-
Separation of EE specific content