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

Update GitLab UI/SVG

See merge request gitlab-org/gitlab!83745

app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue

@@ -163,33 +163,6 @@ export default {
       return undefined;
     },
   },
-  watch: {
-    /**
-     * GlFilteredSearch currently doesn't emit any event when
-     * tokens are manually removed from search field so we'd
-     * never know when user actually clears all the tokens.
-     * This watcher listens for updates to `filterValue` on
-     * such instances. :(
-     */
-    filterValue(newValue, oldValue) {
-      const [firstVal] = newValue;
-      if (
-        !this.initialRender &&
-        newValue.length === 1 &&
-        firstVal.type === 'filtered-search-term' &&
-        !firstVal.value.data
-      ) {
-        const filtersCleared =
-          oldValue[0].type !== 'filtered-search-term' || oldValue[0].value.data !== '';
-        this.$emit('onFilter', [], filtersCleared);
-      }
-
-      // Set initial render flag to false
-      // as we don't want to emit event
-      // on initial load when value is empty already.
-      this.initialRender = false;
-    },
-  },
   created() {
     if (this.recentSearchesStorageKey) this.setupRecentSearch();
   },
@@ -322,6 +295,10 @@ export default {
 
       return tokenOption.title;
     },
+    onClear() {
+      const cleared = true;
+      this.$emit('onFilter', [], cleared);
+    },
   },
 };
 </script>
@@ -345,6 +322,7 @@ export default {
       :suggestions-list-class="suggestionsListClass"
       class="flex-grow-1"
       @history-item-selected="handleHistoryItemSelected"
+      @clear="onClear"
       @clear-history="handleClearHistory"
       @submit="handleFilterSubmit"
     >

app/assets/stylesheets/startup/startup-dark.scss

@@ -452,9 +452,12 @@ a.gl-badge.badge-warning:active {
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
   background-color: #1f1f1f;
-  color: #868686;
   box-shadow: inset 0 0 0 1px #404040;
+}
+.gl-form-input:disabled,
+.gl-form-input.form-control:disabled {
   cursor: not-allowed;
+  color: #868686;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {

app/assets/stylesheets/startup/startup-general.scss

@@ -438,9 +438,12 @@ a.gl-badge.badge-warning:active {
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
   background-color: #fafafa;
-  color: #868686;
   box-shadow: inset 0 0 0 1px #dbdbdb;
+}
+.gl-form-input:disabled,
+.gl-form-input.form-control:disabled {
   cursor: not-allowed;
+  color: #868686;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {

app/assets/stylesheets/startup/startup-signin.scss

@@ -301,9 +301,12 @@ fieldset:disabled a.btn {
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
   background-color: #fafafa;
-  color: #868686;
   box-shadow: inset 0 0 0 1px #dbdbdb;
+}
+.gl-form-input:disabled,
+.gl-form-input.form-control:disabled {
   cursor: not-allowed;
+  color: #868686;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -452,9 +452,12 @@ a.gl-badge.badge-warning:active {
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
   background-color: #1f1f1f;
-  color: #868686;
   box-shadow: inset 0 0 0 1px #404040;
+}
+.gl-form-input:disabled,
+.gl-form-input.form-control:disabled {
   cursor: not-allowed;
+  color: #868686;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -438,9 +438,12 @@ a.gl-badge.badge-warning:active {
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
   background-color: #fafafa;
-  color: #868686;
   box-shadow: inset 0 0 0 1px #dbdbdb;
+}
+.gl-form-input:disabled,
+.gl-form-input.form-control:disabled {
   cursor: not-allowed;
+  color: #868686;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {

ee/app/assets/stylesheets/startup/startup-signin.scss

@@ -301,9 +301,12 @@ fieldset:disabled a.btn {
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
   background-color: #fafafa;
-  color: #868686;
   box-shadow: inset 0 0 0 1px #dbdbdb;
+}
+.gl-form-input:disabled,
+.gl-form-input.form-control:disabled {
   cursor: not-allowed;
+  color: #868686;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {

package.json

@@ -56,8 +56,8 @@
     "@babel/preset-env": "^7.10.1",
     "@gitlab/at.js": "1.5.7",
     "@gitlab/favicon-overlay": "2.0.0",
-    "@gitlab/svgs": "2.6.0",
-    "@gitlab/ui": "38.0.1",
+    "@gitlab/svgs": "2.8.0",
+    "@gitlab/ui": "38.8.1",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "6.1.4-7",
     "@rails/ujs": "6.1.4-7",

spec/frontend/access_tokens/components/__snapshots__/expires_at_field_spec.js.snap

@@ -8,7 +8,7 @@ exports[`~/access_tokens/components/expires_at_field should render datepicker wi
   optionaltext="(optional)"
 >
   <gl-datepicker-stub
-    ariallabel=""
+    arialabel=""
     autocomplete=""
     container=""
     displayfield="true"

spec/frontend/packages_and_registries/shared/components/__snapshots__/registry_breadcrumb_spec.js.snap

@@ -10,11 +10,10 @@ exports[`Registry Breadcrumb when is not rootRoute renders 1`] = `
     class="breadcrumb gl-breadcrumb-list"
   >
     <li
-      class="breadcrumb-item gl-breadcrumb-item"
+      class="gl-breadcrumb-item"
     >
       <a
         class=""
-        href="/"
         target="_self"
       >
         <span>
@@ -45,9 +44,10 @@ exports[`Registry Breadcrumb when is not rootRoute renders 1`] = `
      
     <!---->
     <li
-      class="breadcrumb-item gl-breadcrumb-item"
+      class="gl-breadcrumb-item"
     >
       <a
+        aria-current="page"
         class=""
         href="#"
         target="_self"
@@ -75,11 +75,11 @@ exports[`Registry Breadcrumb when is rootRoute renders 1`] = `
     class="breadcrumb gl-breadcrumb-list"
   >
     <li
-      class="breadcrumb-item gl-breadcrumb-item"
+      class="gl-breadcrumb-item"
     >
       <a
+        aria-current="page"
         class=""
-        href="/"
         target="_self"
       >
         <span>

spec/frontend/packages_and_registries/shared/components/registry_breadcrumb_spec.js

-import { mount } from '@vue/test-utils';
+import { mount, RouterLinkStub } from '@vue/test-utils';
 
 import component from '~/packages_and_registries/shared/components/registry_breadcrumb.vue';
 
@@ -21,6 +21,9 @@ describe('Registry Breadcrumb', () => {
           },
         },
       },
+      stubs: {
+        RouterLink: RouterLinkStub,
+      },
     });
   };
 
@@ -30,7 +33,6 @@ describe('Registry Breadcrumb', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('when is rootRoute', () => {
@@ -46,7 +48,6 @@ describe('Registry Breadcrumb', () => {
       const links = wrapper.findAll('a');
 
       expect(links).toHaveLength(1);
-      expect(links.at(0).attributes('href')).toBe('/');
     });
 
     it('the link text is calculated by nameGenerator', () => {
@@ -67,7 +68,6 @@ describe('Registry Breadcrumb', () => {
       const links = wrapper.findAll('a');
 
       expect(links).toHaveLength(2);
-      expect(links.at(0).attributes('href')).toBe('/');
       expect(links.at(1).attributes('href')).toBe('#');
     });
 

spec/frontend/pipelines/components/pipelines_filtered_search_spec.js

@@ -173,7 +173,7 @@ describe('Pipelines filtered search', () => {
         { type: 'filtered-search-term', value: { data: '' } },
       ];
 
-      expect(findFilteredSearch().props('value')).toEqual(expectedValueProp);
+      expect(findFilteredSearch().props('value')).toMatchObject(expectedValueProp);
       expect(findFilteredSearch().props('value')).toHaveLength(expectedValueProp.length);
     });
   });

spec/frontend/runner/components/runner_filtered_search_bar_spec.js

@@ -113,7 +113,7 @@ describe('RunnerList', () => {
     });
 
     it('filter values are shown', () => {
-      expect(findGlFilteredSearch().props('value')).toEqual(mockFilters);
+      expect(findGlFilteredSearch().props('value')).toMatchObject(mockFilters);
     });
 
     it('sort option is selected', () => {

spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js

@@ -26,7 +26,6 @@ import {
   tokenValueMilestone,
   tokenValueMembership,
   tokenValueConfidential,
-  tokenValueEmpty,
 } from './mock_data';
 
 jest.mock('~/vue_shared/components/filtered_search_bar/filtered_search_utils', () => ({
@@ -207,33 +206,14 @@ describe('FilteredSearchBarRoot', () => {
     });
   });
 
-  describe('watchers', () => {
-    describe('filterValue', () => {
-      it('emits component event `onFilter` with empty array and false when filter was never selected', async () => {
-        wrapper = createComponent({ initialFilterValue: [tokenValueEmpty] });
-        // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-        // eslint-disable-next-line no-restricted-syntax
-        wrapper.setData({
-          initialRender: false,
-          filterValue: [tokenValueEmpty],
-        });
-
-        await nextTick();
-        expect(wrapper.emitted('onFilter')[0]).toEqual([[], false]);
-      });
+  describe('events', () => {
+    it('emits component event `onFilter` with empty array and true when initially selected filter value was cleared', async () => {
+      wrapper = createComponent({ initialFilterValue: [tokenValueLabel] });
 
-      it('emits component event `onFilter` with empty array and true when initially selected filter value was cleared', async () => {
-        wrapper = createComponent({ initialFilterValue: [tokenValueLabel] });
-        // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-        // eslint-disable-next-line no-restricted-syntax
-        wrapper.setData({
-          initialRender: false,
-          filterValue: [tokenValueEmpty],
-        });
+      wrapper.find(GlFilteredSearch).vm.$emit('clear');
 
-        await nextTick();
-        expect(wrapper.emitted('onFilter')[0]).toEqual([[], true]);
-      });
+      await nextTick();
+      expect(wrapper.emitted('onFilter')[0]).toEqual([[], true]);
     });
   });
 

yarn.lock

@@ -1005,15 +1005,15 @@
     stylelint-declaration-strict-value "1.8.0"
     stylelint-scss "4.1.0"
 
-"@gitlab/svgs@2.6.0":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-2.6.0.tgz#49f020b0a732f5df01138bd21b610a0a940badd6"
-  integrity sha512-jI8CHlrriePtUsognRkpZQWVsZe7ZjytmKakeYyU1aKvsnJ4fAeySlVkCAiqKbbZm3T/eeH/6b3jxHn24U0k0Q==
+"@gitlab/svgs@2.8.0":
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-2.8.0.tgz#b32f3672d9cffa2d59f5edb6828ae931a36d220f"
+  integrity sha512-N1D6q5xKze3HwPMjLnsXMZOPQGX4CT+jEQgZYkB8akVx/rqT/YSZ9pZaxWoRdq1Tiwi9B2ArctopRgNiN8fqdw==
 
-"@gitlab/ui@38.0.1":
-  version "38.0.1"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-38.0.1.tgz#73767792f6e27791f84899dbe29b09547ecd8004"
-  integrity sha512-y83h2JsFypuvx1P3BFB7iEbusv/tc/jx3CkEEFY9N8/P25Fs3F3wcYChhlYZ2V1VX0wwEHzBV9cvPIGcmAGNMA==
+"@gitlab/ui@38.8.1":
+  version "38.8.1"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-38.8.1.tgz#f4892ffd51c4cacf30cb94ffca31487afdac2b0c"
+  integrity sha512-eTGt+LODmox1GZRkLfFH9/zl4dG9/6ewpYzXvIo1B4uzHz27lhEgVSM57nZRPXmk4o05LQMnm6eelHoBdMX13g==
   dependencies:
     "@babel/standalone" "^7.0.0"
     bootstrap-vue "2.20.1"
@@ -10781,12 +10781,12 @@ sade@^1.7.3:
   dependencies:
     mri "^1.1.0"
 
-safe-buffer@5.1.2, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@5.2.1:
+safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==