Upgrade to @gitlab/ui@16.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

app/assets/javascripts/alert_management/components/alert_management_list.vue

@@ -10,7 +10,7 @@ import {
   GlDropdownItem,
   GlTabs,
   GlTab,
-  GlBadge,
+  GlDeprecatedBadge as GlBadge,
 } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';

app/assets/javascripts/clusters_list/components/clusters.vue

 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlBadge, GlLink, GlLoadingIcon, GlPagination, GlTable } from '@gitlab/ui';
+import {
+  GlDeprecatedBadge as GlBadge,
+  GlLink,
+  GlLoadingIcon,
+  GlPagination,
+  GlTable,
+} from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { CLUSTER_TYPES, STATUSES } from '../constants';
 import { __, sprintf } from '~/locale';

app/assets/javascripts/error_tracking/components/constants.js

@@ -8,10 +8,10 @@ export const severityLevel = {
 
 export const severityLevelVariant = {
   [severityLevel.FATAL]: 'danger',
-  [severityLevel.ERROR]: 'dark',
+  [severityLevel.ERROR]: 'neutral',
   [severityLevel.WARNING]: 'warning',
   [severityLevel.INFO]: 'info',
-  [severityLevel.DEBUG]: 'light',
+  [severityLevel.DEBUG]: 'muted',
 };
 
 export const errorStatus = {

app/assets/javascripts/error_tracking/components/error_details.vue

@@ -363,16 +363,10 @@ export default {
           <h2 class="text-truncate">{{ error.title }}</h2>
         </tooltip-on-truncate>
         <template v-if="error.tags">
-          <gl-badge
-            v-if="error.tags.level"
-            :variant="errorSeverityVariant"
-            class="rounded-pill mr-2"
-          >
+          <gl-badge v-if="error.tags.level" :variant="errorSeverityVariant" class="mr-2">
             {{ errorLevel }}
           </gl-badge>
-          <gl-badge v-if="error.tags.logger" variant="light" class="rounded-pill"
-            >{{ error.tags.logger }}
-          </gl-badge>
+          <gl-badge v-if="error.tags.logger" variant="muted">{{ error.tags.logger }} </gl-badge>
         </template>
         <ul>
           <li v-if="error.gitlabCommit">

app/assets/javascripts/monitoring/components/alert_widget.vue

@@ -234,11 +234,7 @@ export default {
       class="alert-current-setting cursor-pointer d-flex"
       @click="showModal"
     >
-      <gl-badge
-        :variant="isFiring ? 'danger' : 'secondary'"
-        pill
-        class="d-flex-center text-truncate"
-      >
+      <gl-badge :variant="isFiring ? 'danger' : 'neutral'" class="d-flex-center text-truncate">
         <gl-icon name="warning" :size="16" class="flex-shrink-0" />
         <span class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me">
           <gl-sprintf

app/assets/javascripts/releases/components/release_block_milestone_info.vue

@@ -144,7 +144,7 @@ export default {
     <div class="d-flex flex-column align-items-start flex-shrink-0 mr-4 mb-3 js-issues-container">
       <span class="mb-1">
         {{ __('Issues') }}
-        <gl-badge pill variant="light" class="font-weight-bold">{{ totalIssuesCount }}</gl-badge>
+        <gl-badge variant="muted" size="sm">{{ totalIssuesCount }}</gl-badge>
       </span>
       <div class="d-flex">
         <gl-link v-if="openIssuesPath" ref="openIssuesLink" :href="openIssuesPath">

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="default" class="label-lfs 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>

app/assets/stylesheets/bootstrap_migration.scss

@@ -187,7 +187,7 @@ h3.popover-header {
 
 // Add to .label so that old system notes that are saved to the db
 // will still receive the correct styling
-.badge,
+.badge:not(.gl-badge),
 .label {
   padding: 4px 5px;
   font-size: 12px;

app/assets/stylesheets/framework/badges.scss

-.badge.badge-pill {
+.badge.badge-pill:not(.gl-badge) {
   font-weight: $gl-font-weight-normal;
   background-color: $badge-bg;
   color: $gray-800;

changelogs/unreleased/gitlab-ui-badge-integration-2.yml

+---
+title: Update the visual design of badges in some areas
+merge_request: 31646
+author:
+type: other

ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue

@@ -105,7 +105,7 @@ export default {
         <template v-else>
           <div>
             <span class="font-weight-bold">{{ __('Merge Requests in Review') }}</span>
-            <gl-badge pill>{{ totalItems }}</gl-badge>
+            <gl-badge size="sm">{{ totalItems }}</gl-badge>
           </div>
           <merge-request-table />
           <gl-pagination

ee/app/assets/javascripts/dependencies/components/dependencies_table.vue

 <script>
 import { cloneDeep } from 'lodash';
-import { GlBadge, GlIcon, GlLink, GlButton, GlSkeletonLoading, GlTable } from '@gitlab/ui';
+import {
+  GlDeprecatedBadge as GlBadge,
+  GlIcon,
+  GlLink,
+  GlButton,
+  GlSkeletonLoading,
+  GlTable,
+} from '@gitlab/ui';
 import { s__ } from '~/locale';
 import DependencyLicenseLinks from './dependency_license_links.vue';
 import DependencyVulnerabilities from './dependency_vulnerabilities.vue';

ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue

 <script>
 import { escape, isEmpty } from 'lodash';
-import { GlTooltipDirective, GlLink, GlBadge } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import Alerts from 'ee/vue_shared/dashboards/components/alerts.vue';
 import TimeAgo from 'ee/vue_shared/dashboards/components/time_ago.vue';
 import { STATUS_FAILED } from 'ee/vue_shared/dashboards/constants';

ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue

 <script>
-import { GlLink, GlBadge, GlTooltipDirective } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge, GlTooltipDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';

ee/app/assets/javascripts/feature_flags/components/form.vue

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import { memoize, isString, cloneDeep, isNumber } from 'lodash';
 import {
   GlDeprecatedButton,
-  GlBadge,
+  GlDeprecatedBadge as GlBadge,
   GlTooltip,
   GlTooltipDirective,
   GlFormTextarea,

ee/app/assets/javascripts/geo_node_form/components/app.vue

 <script>
-import { GlBadge } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import { __ } from '~/locale';
 import GeoNodeForm from './geo_node_form.vue';
 

ee/app/assets/javascripts/license_compliance/components/app.vue

@@ -7,7 +7,7 @@ import {
   GlIcon,
   GlTab,
   GlTabs,
-  GlBadge,
+  GlDeprecatedBadge as GlBadge,
   GlAlert,
 } from '@gitlab/ui';
 import { LICENSE_LIST } from '../store/constants';

ee/app/assets/javascripts/license_compliance/components/licenses_table_row.vue

 <script>
-import { GlLink, GlSkeletonLoading, GlBadge, GlIcon, GlFriendlyWrap } from '@gitlab/ui';
+import {
+  GlLink,
+  GlSkeletonLoading,
+  GlDeprecatedBadge as GlBadge,
+  GlIcon,
+  GlFriendlyWrap,
+} from '@gitlab/ui';
 import LicenseComponentLinks from './license_component_links.vue';
 import { LICENSE_APPROVAL_CLASSIFICATION } from 'ee/vue_shared/license_compliance/constants';
 

ee/app/assets/javascripts/packages/shared/components/package_tags.vue

@@ -57,8 +57,8 @@ export default {
     tagBadgeClass(index) {
       return {
         'd-none': true,
-        'd-block': this.tagCount === 1,
-        'd-md-block': this.tagCount > 1,
+        'd-flex': this.tagCount === 1,
+        'd-md-flex': this.tagCount > 1,
         'append-right-4': index !== this.tagsToRender.length - 1,
         'prepend-left-8': !this.hideLabel && index === 0,
       };
@@ -87,9 +87,9 @@ export default {
       v-if="moreTagsDisplay"
       ref="moreBadge"
       v-gl-tooltip
-      variant="light"
+      variant="muted"
       :title="moreTagsTooltip"
-      class="d-none d-md-block prepend-left-4"
+      class="d-none d-md-flex prepend-left-4"
       ><gl-sprintf :message="__('+%{tags} more')">
         <template #tags>
           {{ moreTagsDisplay }}
@@ -100,7 +100,7 @@ export default {
     <gl-badge
       v-if="moreTagsDisplay && hideLabel"
       ref="moreBadge"
-      variant="light"
+      variant="muted"
       class="d-md-none prepend-left-4"
       >{{ tagsDisplay }}</gl-badge
     >

ee/app/assets/javascripts/requirements/components/requirements_tabs.vue

 <script>
-import { GlLink, GlBadge, GlButton } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge, GlButton } from '@gitlab/ui';
 
 import { FilterState } from '../constants';
 

ee/app/assets/javascripts/security_dashboard/components/project_list.vue

 <script>
-import { GlBadge, GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import {
+  GlDeprecatedBadge as GlBadge,
+  GlDeprecatedButton,
+  GlLoadingIcon,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 

ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue

 <script>
-import { GlBadge, GlTabs, GlTab, GlLink } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlTabs, GlTab, GlLink } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 
 import Icon from '~/vue_shared/components/icon.vue';

ee/app/assets/javascripts/vue_shared/metrics_reports/components/metrics_reports_issue_body.vue

 <script>
-import { GlBadge } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {

ee/app/assets/javascripts/vulnerabilities/components/remediated_badge.vue

 <script>
-import { GlBadge, GlPopover } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlPopover } from '@gitlab/ui';
 
 export default {
   name: 'RemediatedBadge',

ee/spec/frontend/dependencies/components/dependencies_table_spec.js

 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
-import { GlBadge, GlButton, GlLink, GlSkeletonLoading } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlButton, GlLink, GlSkeletonLoading } from '@gitlab/ui';
 import stubChildren from 'helpers/stub_children';
 import DependenciesTable from 'ee/dependencies/components/dependencies_table.vue';
 import DependencyLicenseLinks from 'ee/dependencies/components/dependency_license_links.vue';

ee/spec/frontend/environments_dashboard/components/environment_header_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
-import { GlLink, GlBadge } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import component from 'ee/environments_dashboard/components/dashboard/environment_header.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';

ee/spec/frontend/geo_node_form/components/app_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlBadge } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import GeoNodeFormApp from 'ee/geo_node_form/components/app.vue';
 import GeoNodeForm from 'ee/geo_node_form/components/geo_node_form.vue';
 import { MOCK_SELECTIVE_SYNC_TYPES, MOCK_SYNC_SHARDS } from '../mock_data';

ee/spec/frontend/license_compliance/components/app_spec.js

@@ -2,7 +2,14 @@ import { shallowMount, mount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 
-import { GlEmptyState, GlLoadingIcon, GlTab, GlTabs, GlAlert, GlBadge } from '@gitlab/ui';
+import {
+  GlEmptyState,
+  GlLoadingIcon,
+  GlTab,
+  GlTabs,
+  GlAlert,
+  GlDeprecatedBadge as GlBadge,
+} from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import setWindowLocation from 'helpers/set_window_location_helper';
 

ee/spec/frontend/license_compliance/components/licenses_table_row_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlLink, GlSkeletonLoading, GlBadge, GlFriendlyWrap } from '@gitlab/ui';
+import {
+  GlLink,
+  GlSkeletonLoading,
+  GlDeprecatedBadge as GlBadge,
+  GlFriendlyWrap,
+} from '@gitlab/ui';
 import LicenseComponentLinks from 'ee/license_compliance/components/license_component_links.vue';
 import LicensesTableRow from 'ee/license_compliance/components/licenses_table_row.vue';
 import { makeLicense } from './utils';

ee/spec/frontend/packages/shared/components/package_tags_spec.js

@@ -73,25 +73,25 @@ describe('PackageTags', () => {
     it('shows tag badge when there is only one', () => {
       createComponent([mockTags[0]]);
 
-      const expectedStyle = [...defaultStyle, 'd-block', 'prepend-left-8'];
+      const expectedStyle = [...defaultStyle, 'd-flex', 'prepend-left-8'];
 
       expect(
         tagBadges()
           .at(0)
           .classes(),
-      ).toEqual(expectedStyle);
+      ).toEqual(expect.arrayContaining(expectedStyle));
     });
 
     it('shows tag badge for medium or heigher resolutions', () => {
       createComponent(mockTags);
 
-      const expectedStyle = [...defaultStyle, 'd-md-block'];
+      const expectedStyle = [...defaultStyle, 'd-md-flex'];
 
       expect(
         tagBadges()
           .at(1)
           .classes(),
-      ).toEqual(expectedStyle);
+      ).toEqual(expect.arrayContaining(expectedStyle));
     });
 
     it('correctly prepends left and appends right when there is more than one tag', () => {
@@ -99,15 +99,17 @@ describe('PackageTags', () => {
         tagDisplayLimit: 4,
       });
 
-      const expectedStyleWithoutAppend = [...defaultStyle, 'd-md-block'];
+      const expectedStyleWithoutAppend = [...defaultStyle, 'd-md-flex'];
       const expectedStyleWithAppend = [...expectedStyleWithoutAppend, 'append-right-4'];
 
       const allBadges = tagBadges();
 
-      expect(allBadges.at(0).classes()).toEqual([...expectedStyleWithAppend, 'prepend-left-8']);
-      expect(allBadges.at(1).classes()).toEqual(expectedStyleWithAppend);
-      expect(allBadges.at(2).classes()).toEqual(expectedStyleWithAppend);
-      expect(allBadges.at(3).classes()).toEqual(expectedStyleWithoutAppend);
+      expect(allBadges.at(0).classes()).toEqual(
+        expect.arrayContaining([...expectedStyleWithAppend, 'prepend-left-8']),
+      );
+      expect(allBadges.at(1).classes()).toEqual(expect.arrayContaining(expectedStyleWithAppend));
+      expect(allBadges.at(2).classes()).toEqual(expect.arrayContaining(expectedStyleWithAppend));
+      expect(allBadges.at(3).classes()).toEqual(expect.arrayContaining(expectedStyleWithoutAppend));
     });
   });
 });

ee/spec/frontend/requirements/components/requirements_tabs_spec.js

 import { shallowMount } from '@vue/test-utils';
 
-import { GlLink, GlBadge, GlButton } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge, GlButton } from '@gitlab/ui';
 
 import RequirementsTabs from 'ee/requirements/components/requirements_tabs.vue';
 import { FilterState } from 'ee/requirements/constants';

ee/spec/frontend/security_dashboard/components/project_list_spec.js

 import { shallowMount } from '@vue/test-utils';
 
-import { GlBadge, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 import ProjectList from 'ee/security_dashboard/components/project_list.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 

ee/spec/frontend/vulnerabilities/remediated_badge_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlBadge, GlPopover } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlPopover } from '@gitlab/ui';
 import RemediatedBadge from 'ee/vulnerabilities/components/remediated_badge.vue';
 
 const POPOVER_TITLE = 'Vulnerability remediated. Review before resolving.';

package.json

@@ -41,7 +41,7 @@
     "@babel/preset-env": "^7.8.4",
     "@gitlab/at.js": "1.5.5",
     "@gitlab/svgs": "1.130.0",
-    "@gitlab/ui": "15.6.0",
+    "@gitlab/ui": "16.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3",
     "@sentry/browser": "^5.10.2",

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
 

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -8,7 +8,7 @@ import {
   GlDropdownItem,
   GlIcon,
   GlTab,
-  GlBadge,
+  GlDeprecatedBadge as GlBadge,
 } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';

spec/frontend/error_tracking/components/error_details_spec.js

@@ -248,7 +248,7 @@ describe('ErrorDetails', () => {
             },
           });
           return wrapper.vm.$nextTick().then(() => {
-            expect(wrapper.find(GlBadge).attributes('variant')).toEqual(
+            expect(wrapper.find(GlBadge).props('variant')).toEqual(
               severityLevelVariant[severityLevel[level]],
             );
           });
@@ -262,7 +262,7 @@ describe('ErrorDetails', () => {
           },
         });
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.find(GlBadge).attributes('variant')).toEqual(
+          expect(wrapper.find(GlBadge).props('variant')).toEqual(
             severityLevelVariant[severityLevel.ERROR],
           );
         });

spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap

@@ -3,7 +3,7 @@
 exports[`AlertWidget Alert firing displays a warning icon and matches snapshot 1`] = `
 <gl-badge-stub
   class="d-flex-center text-truncate"
-  pill=""
+  size="md"
   variant="danger"
 >
   <gl-icon-stub
@@ -25,8 +25,8 @@ exports[`AlertWidget Alert firing displays a warning icon and matches snapshot 1
 exports[`AlertWidget Alert not firing displays a warning icon and matches snapshot 1`] = `
 <gl-badge-stub
   class="d-flex-center text-truncate"
-  pill=""
-  variant="secondary"
+  size="md"
+  variant="neutral"
 >
   <gl-icon-stub
     class="flex-shrink-0"

yarn.lock

@@ -787,10 +787,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.130.0.tgz#0c2f3cdc0a4b0f54c47b2861c8fa31b2a58c570a"
   integrity sha512-azJ1E9PBk6fGOaP6816BSr8oYrQu3m3BbYZwWOCUp8AfbZuf0ZOZVYmlR9i/eAOhoqqqmwF8hYCK2VjAklbpPA==
 
-"@gitlab/ui@15.6.0":
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-15.6.0.tgz#0fc4ca7fd6ecc3c1be7e127dce3dde78fb4faa06"
-  integrity sha512-drb+f+xcAOtov2mAE3FX49845Fe4o41/jTKDxONDlsescKggZBXaSl1PQtL4EkspllIFb3JYdvL0sXbmp/dz3w==
+"@gitlab/ui@16.0":
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-16.0.0.tgz#0e2d19b85c47f45a052caf6cd0367613cbab8e8e"
+  integrity sha512-xSWXtFWWQzGtL35dGexc5LGqAJXYjLMEFQyPLzCBX3yY9tkI9s9rVMX053tnKYb9kgEmL+R/xGiW7D9nb58VmQ==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"