@gitlab/ui 38.10.0 → 38.10.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [38.10.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.10.0...v38.10.1) (2022-04-14)
+
+
+### Bug Fixes
+
+* **GlToast:** Event listener memory leak ([b799657](https://gitlab.com/gitlab-org/gitlab-ui/commit/b7996570d3f675c4ee11cc0eb26f2aa0a6fda817))
+
 # [38.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.9.0...v38.10.0) (2022-04-13)
 
 

package/dist/components/base/toast/toast.js

@@ -46,11 +46,14 @@ function showToast(message) {
   };
 
   if (_isFunction(options.onComplete)) {
-    this.$root.$on('bv::toast:hidden', e => {
+    const toastHiddenCallback = e => {
       if (e.componentId === id) {
+        this.$root.$off('bv::toast:hidden', toastHiddenCallback);
         options.onComplete(e);
       }
-    });
+    };
+
+    this.$root.$on('bv::toast:hidden', toastHiddenCallback);
   }
 
   this.$bvToast.toast(message, { ...DEFAULT_OPTIONS,

package/package.json

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

package/src/components/base/pagination/pagination.stories.js

@@ -4,27 +4,51 @@ import GlPagination from './pagination.vue';
 
 const components = { GlPagination };
 
-const generateBaseProps = ({
-  prevText = 'Previous',
-  nextText = 'Next',
-  disabled = false,
+const defaultValue = (name) => GlPagination.props[name].default;
+
+const generateProps = ({
+  page = 3,
+  align = defaultValue('align'),
+  disabled = defaultValue('disabled'),
+  linkGen = defaultValue('linkGen'),
+  nextPage = defaultValue('nextPage'),
+  nextText = defaultValue('nextText'),
+  perPage = 10, // Existing stories/shots used this value instead of the default
+  prevPage = defaultValue('prevPage'),
+  prevText = defaultValue('prevText'),
+  totalItems = 200, // The component's default value of 0 is for compact pagination, which most stories here do not use.
 } = {}) => ({
-  prevText,
-  nextText,
+  page,
+  align,
   disabled,
-});
-
-const generateFullProps = ({ page = 3, perPage = 10, totalItems = 200 } = {}) => ({
-  initialPage: page,
+  linkGen,
+  nextPage,
+  nextText,
   perPage,
+  prevPage,
+  prevText,
   totalItems,
-  ...generateBaseProps(),
 });
 
-const defaults = {
+const template = `
+  <gl-pagination
+    v-model="page"
+    :align="align"
+    :disabled="disabled"
+    :link-gen="linkGen"
+    :next-page="nextPage"
+    :next-text="nextText"
+    :per-page="perPage"
+    :prev-page="prevPage"
+    :prev-text="prevText"
+    :total-items="totalItems"
+  />
+`;
+
+const defaults = (args) => ({
   data() {
     return {
-      page: 3,
+      currentPage: args.page,
       alignOptions,
     };
   },
@@ -33,33 +57,20 @@ const defaults = {
       this.page = page;
     },
   },
-};
+});
 
 export const Default = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),
-  ...defaults,
-  template: `<gl-pagination
-      v-model="page"
-      :per-page="perPage"
-      :total-items="totalItems"
-      :prev-text="prevText"
-      :next-text="nextText"
-      :disabled="disabled"
-      />`,
+  ...defaults(args),
+  template,
 });
-Default.args = generateFullProps();
+Default.args = generateProps();
 
-export const Compact = () => ({
+export const Compact = (args, { argTypes }) => ({
   components,
-  ...defaults,
-  props: generateFullProps(),
-  data() {
-    return {
-      page: 1,
-      alignOptions,
-    };
-  },
+  props: Object.keys(argTypes),
+  ...defaults(args),
   computed: {
     prevPage() {
       return Math.max(this.page - 1, 0);
@@ -70,72 +81,37 @@ export const Compact = () => ({
     },
   },
   template: `
-      <div class="text-center gl-font-base">
-        <gl-pagination
-          v-model="page"
-          :prev-page="prevPage"
-          :next-page="nextPage"
-          :prev-text="prevText"
-          :next-text="nextText"
-          :disabled="disabled"
-          :align="alignOptions.center"
-        />
-        Page {{ page }} of 3
-      </div>`,
+    <div class="text-center gl-font-base">
+      ${template}
+      Page {{ page }} of 3
+    </div>
+  `,
 });
+Compact.args = generateProps({ page: 1, totalItems: 0, align: alignOptions.center });
 
 export const LinkBased = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),
-  ...defaults,
-  methods: {
-    linkGen(page) {
-      return `/page/${page}`;
-    },
-  },
-  template: `<gl-pagination
-    v-model="page"
-    :per-page="perPage"
-    :total-items="totalItems"
-    :prev-text="prevText"
-    :next-text="nextText"
-    :disabled="disabled"
-    :link-gen="linkGen"
-    />`,
+  ...defaults(args),
+  template,
 });
-LinkBased.args = generateFullProps();
+LinkBased.args = generateProps({ linkGen: (page) => `/page/${page}` });
 
 export const AlignCenter = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),
-  ...defaults,
-  template: `<gl-pagination
-    v-model="page"
-    :per-page="perPage"
-    :total-items="totalItems"
-    :prev-text="prevText"
-    :next-text="nextText"
-    :disabled="disabled"
-    :align="alignOptions.center"
-    />`,
+  ...defaults(args),
+  template,
 });
-AlignCenter.args = generateFullProps();
+AlignCenter.args = generateProps({ align: alignOptions.center });
 
 export const AlignRight = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),
-  ...defaults,
-  template: `<gl-pagination
-    v-model="page"
-    :per-page="perPage"
-    :total-items="totalItems"
-    :prev-text="prevText"
-    :next-text="nextText"
-    :disabled="disabled"
-    :align="alignOptions.right"
-    />`,
+  ...defaults(args),
+  template,
 });
-AlignRight.args = generateFullProps();
+AlignRight.args = generateProps({ align: alignOptions.right });
 
 export default {
   title: 'base/pagination',
@@ -148,4 +124,10 @@ export default {
       },
     },
   },
+  argTypes: {
+    align: {
+      options: Object.values(alignOptions),
+      control: 'select',
+    },
+  },
 };

package/src/components/base/toast/toast.js

@@ -50,11 +50,14 @@ function showToast(message, options = {}) {
   const toast = { id, hide };
 
   if (isFunction(options.onComplete)) {
-    this.$root.$on('bv::toast:hidden', (e) => {
+    const toastHiddenCallback = (e) => {
       if (e.componentId === id) {
+        this.$root.$off('bv::toast:hidden', toastHiddenCallback);
         options.onComplete(e);
       }
-    });
+    };
+
+    this.$root.$on('bv::toast:hidden', toastHiddenCallback);
   }
 
   this.$bvToast.toast(message, {

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

@@ -27,4 +27,46 @@ describe('GlToast', () => {
       hide: expect.any(Function),
     });
   });
+
+  describe('onComplete callback', () => {
+    let onCompleteSpy;
+    let toast;
+
+    beforeEach(() => {
+      onCompleteSpy = jest.fn();
+
+      toast = wrapper.vm.$toast.show('foo', {
+        onComplete: onCompleteSpy,
+      });
+    });
+
+    it('calls onComplete callback only when matching toast hides', () => {
+      expect(onCompleteSpy).not.toHaveBeenCalled();
+
+      // Pretend some other toast was hidden.
+      wrapper.vm.$root.$emit('bv::toast:hidden', { componentId: 'some other toast' });
+      expect(onCompleteSpy).not.toHaveBeenCalled();
+
+      // Pretend our toast was hidden.
+      wrapper.vm.$root.$emit('bv::toast:hidden', { componentId: toast.id });
+      expect(onCompleteSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('unregisters global listener when toast is hidden', () => {
+      expect(onCompleteSpy).not.toHaveBeenCalled();
+
+      // Pretend the toast was hidden. Can't seem to do this directly in jsdom,
+      // so fake it by emitting the event we listen for.
+      const event = { componentId: toast.id };
+      wrapper.vm.$root.$emit('bv::toast:hidden', event);
+      expect(onCompleteSpy).toHaveBeenCalledTimes(1);
+
+      // This event won't fire more than once in practice, as once the toast is
+      // hidden it'll be destroyed and won't show again. This is here to
+      // indirectly test that the listener was removed when the toast is
+      // hidden the first time.
+      wrapper.vm.$root.$emit('bv::toast:hidden', event);
+      expect(onCompleteSpy).toHaveBeenCalledTimes(1);
+    });
+  });
 });