@gitlab/ui 32.37.0 → 32.38.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [32.38.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.37.0...v32.38.0) (2021-11-17)
+
+
+### Features
+
+* **GlFilteredSearchTokenSegment:** Colon support ([abf3856](https://gitlab.com/gitlab-org/gitlab-ui/commit/abf3856396080e6699ddfbcd526991dcea2dc5f3))
+
 # [32.37.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.36.0...v32.37.0) (2021-11-10)
 
 

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

@@ -222,6 +222,11 @@ var script = {
             this.$emit('submit');
           }
         },
+        ':': () => {
+          if (suggestedValue != null) {
+            this.applySuggestion(suggestedValue);
+          }
+        },
         Escape: () => {
           this.$emit('complete');
         }

package/dist/components/base/table/constants.js

@@ -0,0 +1,5 @@
+const tableFullSlots = ['bottom-row', 'empty', 'emptyfiltered', 'table-busy', 'thead-top', 'top-row'];
+const tableFullProps = ['api-url', 'busy', 'current-page', 'empty-filtered-html', 'empty-filtered-text', 'empty-html', 'empty-text', 'filter', 'filter-debounce', 'filter-function', 'filter-ignored-fields', 'filter-included-fields', 'label-sort-asc', 'label-sort-clear', 'label-sort-desc', 'no-footer-sorting', 'no-local-sorting', 'no-provider-filtering', 'no-provider-paging', 'no-provider-sorting', 'no-select-on-click', 'no-sort-reset', 'per-page', 'select-mode', 'selectable', 'selected-variant', 'show-empty', 'sort-by', 'sort-compare', 'sort-compare-locale', 'sort-compare-options', 'sort-desc', 'sort-direction', 'sort-icon-left', 'sort-null-last'];
+const glTableLiteWarning = 'This GlTable could be a GlTableLite component, please consider using GlTableLite instead of GlTable to reduce the page bundlesize more about this here: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-table-table-lite--default';
+
+export { glTableLiteWarning, tableFullProps, tableFullSlots };

package/dist/components/base/table/table.js

@@ -1,11 +1,29 @@
 import { BTable } from 'bootstrap-vue/esm/index.js';
+import { isDev, logWarning } from '../../../utils/utils';
+import { tableFullProps, tableFullSlots, glTableLiteWarning } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+const shouldUseFullTable = ({
+  $attrs,
+  $scopedSlots
+}) => {
+  return tableFullProps.some(prop => $attrs[prop] !== undefined) || tableFullSlots.some(slot => $scopedSlots[slot] !== undefined);
+};
+
 var script = {
   components: {
     BTable
   },
-  inheritAttrs: false
+  inheritAttrs: false,
+
+  mounted() {
+    // logWarning will call isDev before logging any message
+    // this additional call to isDev is being made to exit the condition early when run in production
+    if (isDev() && !shouldUseFullTable(this)) {
+      logWarning(glTableLiteWarning);
+    }
+  }
+
 };
 
 /* script */

package/dist/utils/utils.js

@@ -88,15 +88,25 @@ function focusFirstFocusableElement(elts) {
   const focusableElt = elts.find(el => isElementFocusable(el));
   if (focusableElt) focusableElt.focus();
 }
+/**
+ * Returns true if the current environment is considered a development environment (it's not
+ * production or test).
+ *
+ * @returns {boolean}
+ */
+
+function isDev() {
+  return !['test', 'production'].includes(process.env.NODE_ENV);
+}
 /**
  * Prints a warning message to the console in non-test and non-production environments.
  * @param {string} message message to print to the console
  */
 
 function logWarning(message = '') {
-  if (message.length && !['test', 'production'].includes(process.env.NODE_ENV)) {
+  if (message.length && isDev()) {
     console.warn(message); // eslint-disable-line no-console
   }
 }
 
-export { colorFromBackground, debounceByAnimationFrame, focusFirstFocusableElement, hexToRgba, isElementFocusable, logWarning, rgbFromHex, rgbFromString, throttle, uid };
+export { colorFromBackground, debounceByAnimationFrame, focusFirstFocusableElement, hexToRgba, isDev, isElementFocusable, logWarning, rgbFromHex, rgbFromString, throttle, uid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.37.0",
+  "version": "32.38.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -129,7 +129,7 @@
     "postcss-scss": "^2.1.1",
     "prettier": "2.2.1",
     "pug": "^2.0.3",
-    "puppeteer": "^5.2.1",
+    "puppeteer": "^10.4.0",
     "raw-loader": "^0.5.1",
     "rollup": "^2.53.1",
     "rollup-plugin-babel": "^4.4.0",

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

@@ -27,7 +27,7 @@ describe('Filtered search token segment', () => {
       methods: {
         nextItem: jest.fn(),
         prevItem: jest.fn(),
-        getValue: jest.fn(),
+        getValue: () => 'notnull',
       },
       template: `<div class="ololosha"><slot></slot></div>`,
     };
@@ -195,6 +195,22 @@ describe('Filtered search token segment', () => {
       expect(wrapper.emitted().select[0][0]).toBe(formattedToken);
       expect(wrapper.emitted().complete[0][0]).toBe(formattedToken);
     });
+
+    it('selects suggestion on press Enter', () => {
+      createComponent({ active: true, options: OPTIONS, value: false });
+      wrapper.find('input').trigger('keydown', { key: 'ArrowDown' });
+
+      wrapper.find('input').trigger('keydown', { key: 'Enter' });
+      expect(wrapper.emitted('select')).toHaveLength(1);
+    });
+
+    it('selects suggestion on press Colon', () => {
+      createComponent({ active: true, options: OPTIONS, value: false });
+      wrapper.find('input').trigger('keydown', { key: 'ArrowDown' });
+
+      wrapper.find('input').trigger('keydown', { key: ':' });
+      expect(wrapper.emitted('select')).toHaveLength(1);
+    });
   });
 
   describe('when multi select', () => {

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

@@ -195,6 +195,11 @@ export default {
             this.$emit('submit');
           }
         },
+        ':': () => {
+          if (suggestedValue != null) {
+            this.applySuggestion(suggestedValue);
+          }
+        },
         Escape: () => {
           this.$emit('complete');
         },

package/src/components/base/table/constants.js

@@ -0,0 +1,49 @@
+export const tableFullSlots = [
+  'bottom-row',
+  'empty',
+  'emptyfiltered',
+  'table-busy',
+  'thead-top',
+  'top-row',
+];
+
+export const tableFullProps = [
+  'api-url',
+  'busy',
+  'current-page',
+  'empty-filtered-html',
+  'empty-filtered-text',
+  'empty-html',
+  'empty-text',
+  'filter',
+  'filter-debounce',
+  'filter-function',
+  'filter-ignored-fields',
+  'filter-included-fields',
+  'label-sort-asc',
+  'label-sort-clear',
+  'label-sort-desc',
+  'no-footer-sorting',
+  'no-local-sorting',
+  'no-provider-filtering',
+  'no-provider-paging',
+  'no-provider-sorting',
+  'no-select-on-click',
+  'no-sort-reset',
+  'per-page',
+  'select-mode',
+  'selectable',
+  'selected-variant',
+  'show-empty',
+  'sort-by',
+  'sort-compare',
+  'sort-compare-locale',
+  'sort-compare-options',
+  'sort-desc',
+  'sort-direction',
+  'sort-icon-left',
+  'sort-null-last',
+];
+
+export const glTableLiteWarning =
+  'This GlTable could be a GlTableLite component, please consider using GlTableLite instead of GlTable to reduce the page bundlesize more about this here: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-table-table-lite--default';

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

@@ -0,0 +1,49 @@
+import { shallowMount } from '@vue/test-utils';
+import { logWarning } from '../../../utils/utils';
+import { waitForAnimationFrame } from '../../../utils/test_utils';
+import { glTableLiteWarning } from './constants';
+import Table from './table.vue';
+
+jest.mock('../../../utils/utils', () => ({
+  isDev: () => true,
+  logWarning: jest.fn(),
+}));
+
+describe('GlTable', () => {
+  const slotsTemplate = {
+    empty: `
+      <p>Placeholder empty text</p>`,
+  };
+
+  const factory = ({ props = {}, scopedSlots = {} } = {}) => {
+    shallowMount(Table, {
+      scopedSlots,
+      propsData: props,
+    });
+  };
+
+  afterEach(() => {
+    logWarning.mockClear();
+  });
+
+  it('should log a warning when not given any props or slots which qualifies for the usage of GlTable', async () => {
+    factory();
+    await waitForAnimationFrame();
+
+    expect(logWarning).toHaveBeenCalledWith(glTableLiteWarning);
+  });
+
+  it('should not log a warning when given a prop which qualifies for the usage of GlTable', async () => {
+    factory({ props: { busy: true } });
+    await waitForAnimationFrame();
+
+    expect(logWarning).not.toHaveBeenCalled();
+  });
+
+  it('should not log a warning when given a slot which qualifies for the usage of GlTable', async () => {
+    factory({ scopedSlots: slotsTemplate });
+    await waitForAnimationFrame();
+
+    expect(logWarning).not.toHaveBeenCalled();
+  });
+});

package/src/components/base/table/table.vue

@@ -1,11 +1,27 @@
 <script>
 import { BTable } from 'bootstrap-vue';
+import { logWarning, isDev } from '../../../utils/utils';
+import { tableFullSlots, tableFullProps, glTableLiteWarning } from './constants';
+
+const shouldUseFullTable = ({ $attrs, $scopedSlots }) => {
+  return (
+    tableFullProps.some((prop) => $attrs[prop] !== undefined) ||
+    tableFullSlots.some((slot) => $scopedSlots[slot] !== undefined)
+  );
+};
 
 export default {
   components: {
     BTable,
   },
   inheritAttrs: false,
+  mounted() {
+    // logWarning will call isDev before logging any message
+    // this additional call to isDev is being made to exit the condition early when run in production
+    if (isDev() && !shouldUseFullTable(this)) {
+      logWarning(glTableLiteWarning);
+    }
+  },
 };
 </script>
 

package/src/utils/utils.js

@@ -103,12 +103,22 @@ export function focusFirstFocusableElement(elts) {
   if (focusableElt) focusableElt.focus();
 }
 
+/**
+ * Returns true if the current environment is considered a development environment (it's not
+ * production or test).
+ *
+ * @returns {boolean}
+ */
+export function isDev() {
+  return !['test', 'production'].includes(process.env.NODE_ENV);
+}
+
 /**
  * Prints a warning message to the console in non-test and non-production environments.
  * @param {string} message message to print to the console
  */
 export function logWarning(message = '') {
-  if (message.length && !['test', 'production'].includes(process.env.NODE_ENV)) {
+  if (message.length && isDev()) {
     console.warn(message); // eslint-disable-line no-console
   }
 }