@gitlab/ui 60.2.0 → 61.1.0

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

@@ -3,7 +3,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import { COMMA } from '../../../utils/constants';
 import GlToken from '../token/token.vue';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
-import { createTerm } from './filtered_search_utils';
+import { createTerm, tokenToOption } from './filtered_search_utils';
 
 const SEGMENT_TITLE = 'TYPE';
 const SEGMENT_OPERATOR = 'OPERATOR';
@@ -11,7 +11,7 @@ const SEGMENT_DATA = 'DATA';
 const TOKEN_CLOSE_SELECTOR = '.gl-token-close';
 
 const DEFAULT_OPERATORS = [
-  { value: '=', description: 'is', default: 'true' },
+  { value: '=', description: 'is', default: true },
   { value: '!=', description: 'is not' },
 ];
 
@@ -98,10 +98,9 @@ export default {
     },
 
     availableTokensWithSelf() {
-      return [this.config, ...this.availableTokens.filter((t) => t !== this.config)].map((t) => ({
-        ...t,
-        value: t.title,
-      }));
+      return [this.config, ...this.availableTokens.filter((token) => token !== this.config)].map(
+        tokenToOption
+      );
     },
 
     operatorDescription() {
@@ -212,8 +211,8 @@ export default {
       }
     },
 
-    replaceToken(newTitle) {
-      const newTokenConfig = this.availableTokens.find((t) => t.title === newTitle);
+    replaceToken(newType) {
+      const newTokenConfig = this.availableTokens.find(({ type }) => type === newType);
 
       if (newTokenConfig === this.config) {
         this.$nextTick(() => {
@@ -303,10 +302,6 @@ export default {
         this.$emit('destroy');
       }
     },
-
-    hasTitleOptionSlot() {
-      return Boolean(this.$scopedSlots['title-option']);
-    },
   },
 };
 </script>
@@ -350,9 +345,6 @@ export default {
           {{ inputValue }}
         </gl-token>
       </template>
-      <template v-if="hasTitleOptionSlot()" #option>
-        <slot name="title-option"></slot>
-      </template>
     </gl-filtered-search-token-segment>
 
     <gl-filtered-search-token-segment
@@ -361,6 +353,7 @@ export default {
       :active="isSegmentActive($options.segments.SEGMENT_OPERATOR)"
       :cursor-position="intendedCursorPosition"
       :options="operators"
+      option-text-field="value"
       :custom-input-keydown-handler="handleOperatorKeydown"
       :view-only="viewOnly"
       @activate="activateSegment($options.segments.SEGMENT_OPERATOR)"
@@ -412,7 +405,6 @@ export default {
       :multi-select="config.multiSelect"
       :options="config.options"
       :view-only="viewOnly"
-      option-text-field="title"
       @activate="activateDataSegment"
       @backspace="activateSegment($options.segments.SEGMENT_OPERATOR)"
       @complete="handleComplete"

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

@@ -1,7 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
 
-const OPTIONS = [{ value: '=' }, { value: '!=' }];
+const OPTIONS = [
+  { value: '=', title: 'is' },
+  { value: '!=', title: 'is not' },
+];
 
 describe('Filtered search token segment', () => {
   let wrapper;
@@ -330,5 +333,19 @@ describe('Filtered search token segment', () => {
       createWrappedComponent({ value: 'test', active: true, viewOnly: false });
       expect(wrapper.find('input').attributes('readonly')).toBeUndefined();
     });
+
+    it.each`
+      context       | isTerm   | eventPayloads
+      ${'does'}     | ${false} | ${[['!=']]}
+      ${'does not'} | ${true}  | ${undefined}
+    `(
+      '$context revert to fallback value on deactivation when no-fallback is $isTerm',
+      async ({ isTerm, eventPayloads }) => {
+        createComponent({ value: '!=', active: true, options: OPTIONS, isTerm });
+
+        await wrapper.setProps({ value: 'foo', active: false });
+        expect(wrapper.emitted('input')).toEqual(eventPayloads);
+      }
+    );
   });
 });

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

@@ -10,6 +10,15 @@ Vue.use(PortalVue);
 const staticOptions = [
   { icon: 'eye-slash', value: true, title: 'Yes' },
   { icon: 'eye', value: false, title: 'No' },
+  {
+    icon: 'pencil',
+    value: 'custom',
+    title: 'Custom',
+    component: {
+      props: ['option'],
+      template: '<span>{{ option.title }} <b class="gl-text-red-500">component</b></span>',
+    },
+  },
 ];
 
 const generateProps = ({ active = true } = {}) => ({

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

@@ -4,7 +4,7 @@ import { Portal } from 'portal-vue';
 import { COMMA, LEFT_MOUSE_BUTTON } from '../../../utils/constants';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
-import { splitOnQuotes, wrapTokenInQuotes } from './filtered_search_utils';
+import { splitOnQuotes, wrapTokenInQuotes, match } from './filtered_search_utils';
 
 // We need some helpers to ensure @vue/compat compatibility
 // @vue/compat will render comment nodes for v-if and comments in HTML
@@ -62,6 +62,11 @@ export default {
       required: false,
       default: false,
     },
+    isTerm: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     label: {
       type: String,
       required: false,
@@ -80,7 +85,7 @@ export default {
     optionTextField: {
       type: String,
       required: false,
-      default: 'value',
+      default: 'title',
     },
     customInputKeydownHandler: {
       type: Function,
@@ -145,18 +150,22 @@ export default {
 
     inputValue: {
       get() {
+        if (this.isTerm) {
+          return this.nonMultipleValue;
+        }
+
         return this.matchingOption
           ? this.matchingOption[this.optionTextField]
           : this.nonMultipleValue;
       },
 
-      set(v) {
+      set(inputValue) {
         /**
          * Emitted when this token segment's value changes.
          *
          * @type {object} option The current option.
          */
-        this.$emit('input', this.getMatchingOptionForInputValue(v)?.value ?? v);
+        this.$emit('input', inputValue);
       },
     },
 
@@ -176,8 +185,13 @@ export default {
         return option?.value;
       }
 
-      const defaultSuggestion = this.options.find((op) => op.default);
-      return (defaultSuggestion ?? this.options[0])?.value;
+      const defaultOption = this.options.find((op) => op.default);
+
+      if (defaultOption) {
+        return defaultOption.value;
+      }
+
+      return this.isTerm ? undefined : this.options[0]?.value;
     },
     containerAttributes() {
       return (
@@ -210,7 +224,7 @@ export default {
       const [firstWord, ...otherWords] = splitOnQuotes(newValue).filter(
         (w, idx, arr) => Boolean(w) || idx === arr.length - 1
       );
-      this.$emit('input', this.getMatchingOptionForInputValue(firstWord)?.value ?? firstWord);
+      this.$emit('input', firstWord);
 
       if (otherWords.length) {
         /**
@@ -233,9 +247,11 @@ export default {
       }
     },
 
-    getMatchingOptionForInputValue(v, { loose } = { loose: false }) {
-      return this.options?.find((o) =>
-        loose ? o[this.optionTextField].startsWith(v) : [this.optionTextField] === v
+    getMatchingOptionForInputValue(inputValue, { loose } = { loose: false }) {
+      return this.options?.find((option) =>
+        loose
+          ? match(option[this.optionTextField], inputValue)
+          : option[this.optionTextField] === inputValue
       );
     },
 
@@ -256,7 +272,7 @@ export default {
     },
 
     deactivate() {
-      if (!this.options) {
+      if (!this.options || this.isTerm) {
         return;
       }
 
@@ -410,7 +426,14 @@ export default {
               :value="option.value"
               :icon-name="option.icon"
             >
-              <slot name="option" v-bind="{ option }"> {{ option[optionTextField] }} </slot>
+              <slot name="option" v-bind="{ option }">
+                <template v-if="option.component">
+                  <component :is="option.component" :option="option" />
+                </template>
+                <template v-else>
+                  {{ option[optionTextField] }}
+                </template>
+              </slot>
             </gl-filtered-search-suggestion>
           </template>
 

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

@@ -1,6 +1,7 @@
 import first from 'lodash/first';
 import last from 'lodash/last';
 import isString from 'lodash/isString';
+import { modulo } from '../../../utils/number_utils';
 
 export const TERM_TOKEN_TYPE = 'filtered-search-term';
 
@@ -44,6 +45,61 @@ export function needDenormalization(tokens) {
   return tokens.some((t) => typeof t === 'string' || !t.id);
 }
 
+/**
+ * Given an initial index, step size and array length, returns an index that is
+ * within the array bounds (unless step is 0; see † below).
+ *
+ * The step can be any positive or negative integer, including zero.
+ *
+ * An out-of-bounds index is considered 'uninitialised', and is handled
+ * specially. For instance, the 'next' index of 'uninitialised' is the first
+ * index:
+ *
+ *     stepIndexAndWrap(-1, 1, 5) === 0
+ *
+ * The 'previous' index of 'uninitialised' is the last index:
+ *
+ *     stepIndexAndWrap(-1, -1, 5) === 4
+ *
+ * †: If step is 0, the index is returned as-is, which may be out-of-bounds.
+ *
+ * @param {number} index The initial index.
+ * @param {number} step The amount to step by (positive or negative).
+ * @param {number} length The length of the array.
+ * @returns {number}
+ */
+export function stepIndexAndWrap(index, step, length) {
+  if (step === 0) return index;
+
+  let start;
+  const indexInRange = index >= 0 && index < length;
+
+  if (indexInRange) {
+    // Step from the valid index.
+    start = index;
+  } else if (step > 0) {
+    // Step forwards from the beginning of the array.
+    start = -1;
+  } else {
+    // Step backwards from the end of the array.
+    start = length;
+  }
+
+  return modulo(start + step, length);
+}
+
+/**
+ * Transforms a given token definition to an option definition.
+ *
+ * @param {Object} token A token definition (see GlFilteredSearch's
+ *     availableTokens prop).
+ * @returns {Object} A option definition (see GlFilteredSearchTokenSegment's
+ *     options prop).
+ */
+export function tokenToOption({ icon, title, type, optionComponent }) {
+  return { icon, title, value: type, component: optionComponent };
+}
+
 let tokenIdCounter = 0;
 const getTokenId = () => {
   const tokenId = `token-${tokenIdCounter}`;
@@ -96,6 +152,19 @@ export function denormalizeTokens(inputTokens) {
   return result;
 }
 
+/**
+ * Returns `true` if `text` contains `query` (case insensitive).
+ *
+ * This is used in `filter` and `find` array methods for token segment options.
+ *
+ * @param {string} text The string to look within.
+ * @param {string} query The string to find inside the text.
+ * @returns {boolean}
+ */
+export function match(text, query) {
+  return text.toLowerCase().includes(query.toLowerCase());
+}
+
 export function splitOnQuotes(str) {
   if (first(str) === "'" && last(str) === "'") {
     return [str];

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

@@ -1,4 +1,4 @@
-import { splitOnQuotes, wrapTokenInQuotes } from './filtered_search_utils';
+import { splitOnQuotes, wrapTokenInQuotes, stepIndexAndWrap } from './filtered_search_utils';
 
 describe('FilteredSearchUtils', () => {
   describe('splitOnQuotes', () => {
@@ -48,4 +48,35 @@ describe('FilteredSearchUtils', () => {
       expect(wrapTokenInQuotes(token)).toEqual(`"${token}"`);
     });
   });
+
+  describe('stepIndexAndWrap', () => {
+    it.each`
+      index  | step   | length | result
+      ${0}   | ${0}   | ${5}   | ${0}
+      ${0}   | ${1}   | ${5}   | ${1}
+      ${0}   | ${-1}  | ${5}   | ${4}
+      ${0}   | ${6}   | ${5}   | ${1}
+      ${0}   | ${-6}  | ${5}   | ${4}
+      ${1}   | ${0}   | ${5}   | ${1}
+      ${1}   | ${1}   | ${5}   | ${2}
+      ${1}   | ${-2}  | ${5}   | ${4}
+      ${1}   | ${-5}  | ${5}   | ${1}
+      ${-1}  | ${0}   | ${5}   | ${-1}
+      ${6}   | ${0}   | ${5}   | ${6}
+      ${6}   | ${1}   | ${5}   | ${0}
+      ${6}   | ${-1}  | ${5}   | ${4}
+      ${-1}  | ${1}   | ${5}   | ${0}
+      ${-1}  | ${-1}  | ${5}   | ${4}
+      ${-1}  | ${-5}  | ${5}   | ${0}
+      ${-1}  | ${5}   | ${5}   | ${4}
+      ${4}   | ${1}   | ${5}   | ${0}
+      ${4}   | ${2}   | ${5}   | ${1}
+      ${NaN} | ${1}   | ${1}   | ${0}
+      ${0}   | ${NaN} | ${1}   | ${NaN}
+      ${0}   | ${1}   | ${NaN} | ${NaN}
+      ${0}   | ${1}   | ${0}   | ${NaN}
+    `('stepIndex($index, $step, $length) === $result', ({ index, step, length, result }) => {
+      expect(stepIndexAndWrap(index, step, length, result)).toBe(result);
+    });
+  });
 });

package/src/utils/number_utils.js

@@ -17,6 +17,27 @@ export const sum = (...numbers) => numbers.reduce(addition);
  */
 export const average = (...numbers) => sum(...numbers) / numbers.length;
 
+/**
+ * Returns the modulo of n for a divisor.
+ *
+ * Maps the integer n into the range [0, divisor) when the divisor is positive,
+ * and (divisor, 0] when the divisor is negative.
+ *
+ * This is useful when indexing into an array, to ensure you always stay within
+ * the array bounds.
+ *
+ * See https://2ality.com/2019/08/remainder-vs-modulo.html.
+ *
+ * @param {number} n The number to mod.
+ * @param {number} divisor The divisor (e.g., the length of an array).
+ * @returns {number}
+ */
+export function modulo(n, divisor) {
+  const result = ((n % divisor) + divisor) % divisor;
+  // Never return -0.
+  return result === 0 ? 0 : result;
+}
+
 /**
  * Convert number to engineering format, using SI suffix
  * @param {Number|String} value - Number or Number-convertible String

package/src/utils/number_utils.spec.js

@@ -44,4 +44,46 @@ describe('number utils', () => {
       expect(numberUtils.engineeringNotation(...input)).toBe(output);
     });
   });
+
+  describe('modulo', () => {
+    it.each`
+      n           | divisor | result
+      ${-7}       | ${3}    | ${2}
+      ${-6}       | ${3}    | ${0}
+      ${-5}       | ${3}    | ${1}
+      ${-4}       | ${3}    | ${2}
+      ${-3}       | ${3}    | ${0}
+      ${-2}       | ${3}    | ${1}
+      ${-1}       | ${3}    | ${2}
+      ${0}        | ${3}    | ${0}
+      ${1}        | ${3}    | ${1}
+      ${2}        | ${3}    | ${2}
+      ${3}        | ${3}    | ${0}
+      ${4}        | ${3}    | ${1}
+      ${5}        | ${3}    | ${2}
+      ${6}        | ${3}    | ${0}
+      ${7}        | ${3}    | ${1}
+      ${-7}       | ${-3}   | ${-1}
+      ${-6}       | ${-3}   | ${0}
+      ${-5}       | ${-3}   | ${-2}
+      ${-4}       | ${-3}   | ${-1}
+      ${-3}       | ${-3}   | ${0}
+      ${-2}       | ${-3}   | ${-2}
+      ${-1}       | ${-3}   | ${-1}
+      ${0}        | ${-3}   | ${0}
+      ${1}        | ${-3}   | ${-2}
+      ${2}        | ${-3}   | ${-1}
+      ${3}        | ${-3}   | ${0}
+      ${4}        | ${-3}   | ${-2}
+      ${5}        | ${-3}   | ${-1}
+      ${6}        | ${-3}   | ${0}
+      ${7}        | ${-3}   | ${-2}
+      ${NaN}      | ${1}    | ${NaN}
+      ${1}        | ${NaN}  | ${NaN}
+      ${1}        | ${0}    | ${NaN}
+      ${Infinity} | ${1}    | ${NaN}
+    `('modulo($n, $divisor) === $result', ({ n, divisor, result }) => {
+      expect(numberUtils.modulo(n, divisor)).toBe(result);
+    });
+  });
 });