Merge branch 'renovate/major-gitlab-uisvg' into 'master'

Update dependency @gitlab/ui to v21

See merge request gitlab-org/gitlab!42137

app/assets/javascripts/milestones/project_milestone_combobox.vue

@@ -2,7 +2,7 @@
 import {
   GlDropdown,
   GlDropdownDivider,
-  GlNewDropdownHeader,
+  GlDropdownSectionHeader,
   GlDropdownItem,
   GlLoadingIcon,
   GlSearchBoxByType,
@@ -19,7 +19,7 @@ export default {
   components: {
     GlDropdown,
     GlDropdownDivider,
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownItem,
     GlLoadingIcon,
     GlSearchBoxByType,
@@ -196,9 +196,9 @@ export default {
       <gl-icon name="chevron-down" />
     </template>
 
-    <gl-new-dropdown-header>
+    <gl-dropdown-section-header>
       <span class="text-center d-block">{{ $options.translations.selectMilestone }}</span>
-    </gl-new-dropdown-header>
+    </gl-dropdown-section-header>
 
     <gl-dropdown-divider />
 

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

@@ -6,7 +6,7 @@ import {
   GlDropdown,
   GlLoadingIcon,
   GlDropdownItem,
-  GlNewDropdownHeader,
+  GlDropdownSectionHeader,
   GlSearchBoxByType,
   GlModalDirective,
   GlTooltipDirective,
@@ -31,7 +31,7 @@ export default {
     GlDropdown,
     GlLoadingIcon,
     GlDropdownItem,
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
 
     GlSearchBoxByType,
 
@@ -191,7 +191,7 @@ export default {
         :text="environmentDropdownText"
       >
         <div class="d-flex flex-column overflow-hidden">
-          <gl-new-dropdown-header>{{ __('Environment') }}</gl-new-dropdown-header>
+          <gl-dropdown-section-header>{{ __('Environment') }}</gl-dropdown-section-header>
           <gl-search-box-by-type class="gl-m-3" @input="debouncedEnvironmentsSearch" />
 
           <gl-loading-icon v-if="environmentsLoading" :inline="true" />

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

@@ -4,7 +4,7 @@ import {
   GlIcon,
   GlDropdown,
   GlDropdownItem,
-  GlNewDropdownHeader,
+  GlDropdownSectionHeader,
   GlDropdownDivider,
   GlSearchBoxByType,
   GlModalDirective,
@@ -19,7 +19,7 @@ export default {
     GlIcon,
     GlDropdown,
     GlDropdownItem,
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownDivider,
     GlSearchBoxByType,
   },
@@ -79,7 +79,7 @@ export default {
     :text="selectedDashboardText"
   >
     <div class="d-flex flex-column overflow-hidden">
-      <gl-new-dropdown-header>{{ __('Dashboard') }}</gl-new-dropdown-header>
+      <gl-dropdown-section-header>{{ __('Dashboard') }}</gl-dropdown-section-header>
       <gl-search-box-by-type
         ref="monitorDashboardsDropdownSearch"
         v-model="searchTerm"

app/assets/javascripts/projects/commits/components/author_select.vue

@@ -3,7 +3,7 @@ import { debounce } from 'lodash';
 import { mapState, mapActions } from 'vuex';
 import {
   GlDropdown,
-  GlNewDropdownHeader,
+  GlDropdownSectionHeader,
   GlDropdownItem,
   GlSearchBoxByType,
   GlDropdownDivider,
@@ -19,7 +19,7 @@ export default {
   name: 'AuthorSelect',
   components: {
     GlDropdown,
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownItem,
     GlSearchBoxByType,
     GlDropdownDivider,
@@ -113,9 +113,9 @@ export default {
       toggle-class="gl-py-3 gl-border-0"
       class="w-100 mt-2 mt-sm-0"
     >
-      <gl-new-dropdown-header>
+      <gl-dropdown-section-header>
         {{ __('Search by author') }}
-      </gl-new-dropdown-header>
+      </gl-dropdown-section-header>
       <gl-dropdown-divider />
       <gl-search-box-by-type
         v-model.trim="authorInput"

app/assets/javascripts/ref/components/ref_results_section.vue

 <script>
-import { GlNewDropdownHeader, GlDropdownItem, GlBadge, GlIcon } from '@gitlab/ui';
+import { GlDropdownSectionHeader, GlDropdownItem, GlBadge, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 export default {
   name: 'RefResultsSection',
   components: {
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownItem,
     GlBadge,
     GlIcon,
@@ -84,12 +84,12 @@ export default {
 
 <template>
   <div>
-    <gl-new-dropdown-header>
+    <gl-dropdown-section-header>
       <div class="gl-display-flex align-items-center" data-testid="section-header">
         <span class="gl-mr-2 gl-mb-1">{{ sectionTitle }}</span>
         <gl-badge variant="neutral">{{ totalCountText }}</gl-badge>
       </div>
-    </gl-new-dropdown-header>
+    </gl-dropdown-section-header>
     <template v-if="error">
       <div class="gl-display-flex align-items-start text-danger gl-ml-4 gl-mr-4 gl-mb-3">
         <gl-icon name="error" class="gl-mr-2 gl-mt-2 gl-flex-shrink-0" />

app/assets/javascripts/ref/components/ref_selector.vue

@@ -3,7 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import {
   GlDropdown,
   GlDropdownDivider,
-  GlNewDropdownHeader,
+  GlDropdownSectionHeader,
   GlSearchBoxByType,
   GlSprintf,
   GlIcon,
@@ -20,7 +20,7 @@ export default {
   components: {
     GlDropdown,
     GlDropdownDivider,
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
     GlSearchBoxByType,
     GlSprintf,
     GlIcon,
@@ -130,9 +130,9 @@ export default {
     </template>
 
     <div class="gl-display-flex gl-flex-direction-column ref-selector-dropdown-content">
-      <gl-new-dropdown-header>
+      <gl-dropdown-section-header>
         <span class="gl-text-center gl-display-block">{{ i18n.dropdownHeader }}</span>
-      </gl-new-dropdown-header>
+      </gl-dropdown-section-header>
 
       <gl-dropdown-divider />
 

app/assets/javascripts/snippets/components/embed_dropdown.vue

@@ -3,7 +3,7 @@ import { escape as esc } from 'lodash';
 import {
   GlButton,
   GlDropdown,
-  GlDropdownHeader,
+  GlDropdownSectionHeader,
   GlDropdownText,
   GlFormInputGroup,
   GlTooltipDirective,
@@ -18,7 +18,7 @@ export default {
   components: {
     GlButton,
     GlDropdown,
-    GlDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownText,
     GlFormInputGroup,
   },
@@ -51,9 +51,9 @@ export default {
     menu-class="gl-px-1! gl-pb-5! gl-dropdown-menu-wide"
   >
     <template v-for="{ name, value } in sections">
-      <gl-dropdown-header :key="`header_${name}`" data-testid="header">{{
+      <gl-dropdown-section-header :key="`header_${name}`" data-testid="header">{{
         name
-      }}</gl-dropdown-header>
+      }}</gl-dropdown-section-header>
       <gl-dropdown-text
         :key="`input_${name}`"
         tag="div"

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

@@ -5,7 +5,7 @@ import { escape } from 'lodash';
 import {
   GlButton,
   GlDropdown,
-  GlNewDropdownHeader as GlDropdownHeader,
+  GlDropdownSectionHeader,
   GlDropdownItem,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -23,7 +23,7 @@ export default {
     MrWidgetIcon,
     GlButton,
     GlDropdown,
-    GlDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownItem,
   },
   directives: {
@@ -168,7 +168,7 @@ export default {
           right
           data-qa-selector="download_dropdown"
         >
-          <gl-dropdown-header>{{ s__('Download as') }}</gl-dropdown-header>
+          <gl-dropdown-section-header>{{ s__('Download as') }}</gl-dropdown-section-header>
           <gl-dropdown-item
             :href="mr.emailPatchesPath"
             class="js-download-email-patches"

app/assets/javascripts/vue_shared/components/clone_dropdown.vue

 <script>
 import {
   GlDropdown,
-  GlNewDropdownHeader,
+  GlDropdownSectionHeader,
   GlFormInputGroup,
   GlButton,
   GlTooltipDirective,
@@ -12,7 +12,7 @@ import { getHTTPProtocol } from '~/lib/utils/url_utility';
 export default {
   components: {
     GlDropdown,
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
     GlFormInputGroup,
     GlButton,
   },
@@ -48,7 +48,7 @@ export default {
   <gl-dropdown right :text="$options.labels.defaultLabel" category="primary" variant="info">
     <div class="pb-2 mx-1">
       <template v-if="sshLink">
-        <gl-new-dropdown-header>{{ $options.labels.ssh }}</gl-new-dropdown-header>
+        <gl-dropdown-section-header>{{ $options.labels.ssh }}</gl-dropdown-section-header>
 
         <div class="mx-3">
           <gl-form-input-group :value="sshLink" readonly select-on-click>
@@ -67,7 +67,7 @@ export default {
       </template>
 
       <template v-if="httpLink">
-        <gl-new-dropdown-header>{{ httpLabel }}</gl-new-dropdown-header>
+        <gl-dropdown-section-header>{{ httpLabel }}</gl-dropdown-section-header>
 
         <div class="mx-3">
           <gl-form-input-group :value="httpLink" readonly select-on-click>

ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_dropdown_filter.vue

 <script>
-import { GlDropdown, GlNewDropdownHeader as GlDropdownHeader, GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownSectionHeader, GlDropdownItem } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 
 export default {
   name: 'StageDropdownFilter',
   components: {
     GlDropdown,
-    GlDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownItem,
   },
   props: {
@@ -66,7 +66,7 @@ export default {
     :text="selectedStagesLabel"
     right
   >
-    <gl-dropdown-header>{{ s__('CycleAnalytics|Stages') }}</gl-dropdown-header>
+    <gl-dropdown-section-header>{{ s__('CycleAnalytics|Stages') }}</gl-dropdown-section-header>
     <gl-dropdown-item
       v-for="stage in stages"
       :key="stage.id"

ee/app/assets/javascripts/analytics/shared/components/groups_dropdown_filter.vue

@@ -5,7 +5,7 @@ import {
   GlLoadingIcon,
   GlAvatar,
   GlDropdown,
-  GlNewDropdownHeader as GlDropdownHeader,
+  GlDropdownSectionHeader,
   GlDropdownItem,
   GlSearchBoxByType,
   GlSafeHtmlDirective as SafeHtml,
@@ -22,7 +22,7 @@ export default {
     GlLoadingIcon,
     GlAvatar,
     GlDropdown,
-    GlDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownItem,
     GlSearchBoxByType,
   },
@@ -133,7 +133,7 @@ export default {
       </div>
       <gl-icon class="gl-ml-2" name="chevron-down" />
     </template>
-    <gl-dropdown-header>{{ __('Groups') }}</gl-dropdown-header>
+    <gl-dropdown-section-header>{{ __('Groups') }}</gl-dropdown-section-header>
     <gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />
     <gl-dropdown-item
       v-for="group in availableGroups"

ee/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue

@@ -5,7 +5,7 @@ import {
   GlLoadingIcon,
   GlAvatar,
   GlDropdown,
-  GlNewDropdownHeader as GlDropdownHeader,
+  GlDropdownSectionHeader,
   GlDropdownItem,
   GlSearchBoxByType,
 } from '@gitlab/ui';
@@ -21,7 +21,7 @@ export default {
     GlLoadingIcon,
     GlAvatar,
     GlDropdown,
-    GlDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownItem,
     GlSearchBoxByType,
   },
@@ -155,7 +155,7 @@ export default {
       </div>
       <gl-icon class="gl-ml-2" name="chevron-down" />
     </template>
-    <gl-dropdown-header>{{ __('Projects') }}</gl-dropdown-header>
+    <gl-dropdown-section-header>{{ __('Projects') }}</gl-dropdown-section-header>
     <gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />
 
     <gl-dropdown-item

ee/app/assets/javascripts/audit_events/components/sorting_field.vue

 <script>
-import { GlDropdown, GlNewDropdownHeader, GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownSectionHeader, GlDropdownItem } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 const SORTING_TITLE = s__('SortOptions|Sort by:');
@@ -17,7 +17,7 @@ const SORTING_OPTIONS = [
 export default {
   components: {
     GlDropdown,
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownItem,
   },
   props: {
@@ -48,7 +48,7 @@ export default {
 <template>
   <div>
     <gl-dropdown :text="selectedOption.text" class="w-100 flex-column flex-lg-row form-group">
-      <gl-new-dropdown-header> {{ $options.SORTING_TITLE }}</gl-new-dropdown-header>
+      <gl-dropdown-section-header> {{ $options.SORTING_TITLE }}</gl-dropdown-section-header>
       <gl-dropdown-item
         v-for="option in $options.SORTING_OPTIONS"
         :key="option.key"

ee/app/assets/javascripts/sidebar/components/iteration_select.vue

@@ -5,7 +5,7 @@ import {
   GlDropdown,
   GlDropdownItem,
   GlSearchBoxByType,
-  GlNewDropdownHeader,
+  GlDropdownSectionHeader,
   GlIcon,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -27,7 +27,7 @@ export default {
     GlDropdown,
     GlDropdownItem,
     GlSearchBoxByType,
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
     GlIcon,
   },
   props: {
@@ -195,9 +195,9 @@ export default {
       class="dropdown gl-w-full"
       :class="{ show: editing }"
     >
-      <gl-new-dropdown-header class="d-flex justify-content-center">{{
+      <gl-dropdown-section-header class="d-flex justify-content-center">{{
         __('Assign Iteration')
-      }}</gl-new-dropdown-header>
+      }}</gl-dropdown-section-header>
       <gl-search-box-by-type ref="search" v-model="searchTerm" class="gl-m-3" />
       <gl-dropdown-item
         v-for="iterationItem in iterations"

package.json

@@ -43,7 +43,7 @@
     "@babel/preset-env": "^7.10.1",
     "@gitlab/at.js": "1.5.5",
     "@gitlab/svgs": "1.164.0",
-    "@gitlab/ui": "20.20.0",
+    "@gitlab/ui": "21.0.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3-1",
     "@sentry/browser": "^5.22.3",

spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap

@@ -47,9 +47,9 @@ exports[`Dashboard template matches the default snapshot 1`] = `
         <div
           class="d-flex flex-column overflow-hidden"
         >
-          <gl-new-dropdown-header-stub>
+          <gl-dropdown-section-header-stub>
             Environment
-          </gl-new-dropdown-header-stub>
+          </gl-dropdown-section-header-stub>
            
           <gl-search-box-by-type-stub
             class="gl-m-3"

spec/frontend/projects/commits/components/author_select_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlDropdown, GlNewDropdownHeader, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownSectionHeader, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
 import * as urlUtility from '~/lib/utils/url_utility';
 import AuthorSelect from '~/projects/commits/components/author_select.vue';
 import { createStore } from '~/projects/commits/store';
@@ -59,7 +59,7 @@ describe('Author Select', () => {
 
   const findDropdownContainer = () => wrapper.find({ ref: 'dropdownContainer' });
   const findDropdown = () => wrapper.find(GlDropdown);
-  const findDropdownHeader = () => wrapper.find(GlNewDropdownHeader);
+  const findDropdownHeader = () => wrapper.find(GlDropdownSectionHeader);
   const findSearchBox = () => wrapper.find(GlSearchBoxByType);
   const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
 

spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap

@@ -12,9 +12,9 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
   <div
     class="pb-2 mx-1"
   >
-    <gl-new-dropdown-header-stub>
+    <gl-dropdown-section-header-stub>
       Clone with SSH
-    </gl-new-dropdown-header-stub>
+    </gl-dropdown-section-header-stub>
      
     <div
       class="mx-3"
@@ -53,9 +53,9 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
       </div>
     </div>
      
-    <gl-new-dropdown-header-stub>
+    <gl-dropdown-section-header-stub>
       Clone with HTTP
-    </gl-new-dropdown-header-stub>
+    </gl-dropdown-section-header-stub>
      
     <div
       class="mx-3"

spec/frontend/vue_shared/components/clone_dropdown_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlFormInputGroup, GlNewDropdownHeader } from '@gitlab/ui';
+import { GlFormInputGroup, GlDropdownSectionHeader } from '@gitlab/ui';
 import CloneDropdown from '~/vue_shared/components/clone_dropdown.vue';
 
 describe('Clone Dropdown Button', () => {
@@ -51,7 +51,7 @@ describe('Clone Dropdown Button', () => {
       createComponent({ [name]: value });
 
       expect(wrapper.find(GlFormInputGroup).props('value')).toBe(value);
-      expect(wrapper.findAll(GlNewDropdownHeader).length).toBe(1);
+      expect(wrapper.findAll(GlDropdownSectionHeader).length).toBe(1);
     });
   });
 
@@ -63,12 +63,12 @@ describe('Clone Dropdown Button', () => {
     `('allows null values for the props', ({ name, value }) => {
       createComponent({ ...defaultPropsData, [name]: value });
 
-      expect(wrapper.findAll(GlNewDropdownHeader).length).toBe(1);
+      expect(wrapper.findAll(GlDropdownSectionHeader).length).toBe(1);
     });
 
     it('correctly calculates httpLabel for HTTPS protocol', () => {
       createComponent({ httpLink: httpsLink });
-      expect(wrapper.find(GlNewDropdownHeader).text()).toContain('HTTPS');
+      expect(wrapper.find(GlDropdownSectionHeader).text()).toContain('HTTPS');
     });
   });
 });

yarn.lock

@@ -848,10 +848,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.164.0.tgz#6cefad871c45f945ef92b99015d0f510b1d2de4a"
   integrity sha512-a9e/cYUc1QQk7azjH4x/m6/p3icavwGEi5F9ipNlDqiJtUor5tqojxvMxPOhuVbN/mTwnC6lGsSZg4tqTsdJAQ==
 
-"@gitlab/ui@20.20.0":
-  version "20.20.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-20.20.0.tgz#3985ee6dac8acdfa292d1878d4a61f5daff0e69c"
-  integrity sha512-bNP0qHdQj486xyRDvlecOgrnt6XWpAbqyYS7wcECo3W23hfuldMu9sM3N+wP2c6o/tMzCSO8wvuL1bc6ec+XTg==
+"@gitlab/ui@21.0.0":
+  version "21.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-21.0.0.tgz#3e3b725fbce21dd9d2dc290c19111b49014d4700"
+  integrity sha512-3uiqhRXZurbZsGZ3YpuTGnEfZPNcatG13ynJNuHKTH6CjwlYsjxlxKnTcSHPFnrbfy+bmSfcFYs0nDQsA1xcTA==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"