@gitlab/ui 38.4.0 → 38.5.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [38.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.4.0...v38.5.0) (2022-04-05)
+
+
+### Features
+
+* **GlFilteredSearch:** Allow to pass token dynamically ([7c85ea1](https://gitlab.com/gitlab-org/gitlab-ui/commit/7c85ea19c3ffb821fdb4f5f6409e4db816de304e))
+* **GlFilteredSearch:** Allow to pass token dynamically ([38f67eb](https://gitlab.com/gitlab-org/gitlab-ui/commit/38f67eb3df2369f39e1323c1a5c90ab2f7b13847))
+
 # [38.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.3.0...v38.4.0) (2022-04-04)
 
 

package/dist/components/base/filtered_search/filtered_search.js

@@ -1,3 +1,4 @@
+import _isEqual from 'lodash/isEqual';
 import _cloneDeep from 'lodash/cloneDeep';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
@@ -184,15 +185,17 @@ var script = {
 
       deep: true,
       immediate: true
-    }
-  },
+    },
+    value: {
+      handler(newValue, oldValue) {
+        if (newValue.length && !_isEqual(newValue, oldValue)) {
+          this.applyNewValue(_cloneDeep(newValue));
+        }
+      },
 
-  mounted() {
-    if (this.value.length) {
-      this.applyNewValue(_cloneDeep(this.value));
+      immediate: true
     }
   },
-
   methods: {
     applyNewValue(newValue) {
       this.tokens = needDenormalization(newValue) ? denormalizeTokens(newValue) : newValue;

package/dist/components/base/search_box_by_click/search_box_by_click.js

@@ -166,6 +166,7 @@ var script = {
     },
 
     currentValue(newValue) {
+      if (newValue === this.value) return;
       this.$emit('input', newValue);
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.4.0",
+  "version": "38.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/filtered_search/filtered_search.spec.js

@@ -730,4 +730,23 @@ describe('Filtered search integration tests', () => {
       wrapper.findAllComponents(GlFilteredSearchToken).wrappers.map((cmp) => cmp.props('active'))
     ).toEqual([false, false]);
   });
+
+  it('updates tokens list when value is passed dynamically', async () => {
+    mountComponent({ value: ['one'] });
+    await nextTick();
+
+    expect(wrapper.findAllComponents(GlFilteredSearchTerm)).toHaveLength(2);
+
+    await wrapper.setProps({
+      value: ['one two'],
+    });
+
+    const termComponents = wrapper.findAllComponents(GlFilteredSearchTerm).wrappers;
+    expect(termComponents).toHaveLength(3);
+    expect(termComponents.map((termComponent) => termComponent.props('value'))).toEqual([
+      { data: 'one' },
+      { data: 'two' },
+      { data: '' },
+    ]);
+  });
 });

package/src/components/base/filtered_search/filtered_search.vue

@@ -1,5 +1,5 @@
 <script>
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEqual } from 'lodash';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
@@ -174,11 +174,14 @@ export default {
       deep: true,
       immediate: true,
     },
-  },
-  mounted() {
-    if (this.value.length) {
-      this.applyNewValue(cloneDeep(this.value));
-    }
+    value: {
+      handler(newValue, oldValue) {
+        if (newValue.length && !isEqual(newValue, oldValue)) {
+          this.applyNewValue(cloneDeep(newValue));
+        }
+      },
+      immediate: true,
+    },
   },
 
   methods: {

package/src/components/base/search_box_by_click/search_box_by_click.spec.js

@@ -36,6 +36,14 @@ describe('search box by click component', () => {
     expect(wrapper.emitted().input).toEqual([['new value']]);
   });
 
+  it('does not emit an input event when input is updated to the same value', async () => {
+    createComponent({ value: 'somevalue' });
+
+    await wrapper.setProps({ value: 'another value' });
+
+    expect(wrapper.emitted().input).toBe(undefined);
+  });
+
   it('does not displays history dropdown by default', () => {
     createComponent();
     expect(wrapper.findComponent({ ref: 'historyDropdown' }).exists()).toBe(false);

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -152,6 +152,7 @@ export default {
       immediate: true,
     },
     currentValue(newValue) {
+      if (newValue === this.value) return;
       this.$emit('input', newValue);
     },
   },