@gitlab/ui 43.17.1 → 43.19.0

package/dist/utils/constants.js

@@ -9,6 +9,7 @@ function appendDefaultOption(options) {
 }
 
 const COMMA = ',';
+const LEFT_MOUSE_BUTTON = 0;
 const glThemes = ['indigo', 'blue', 'light-blue', 'green', 'red', 'light-red'];
 const variantOptions = {
   primary: 'primary',
@@ -244,4 +245,4 @@ const loadingIconSizes = {
   'xl (64x64)': 'xl'
 };
 
-export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.17.1",
+  "version": "43.19.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -77,22 +77,22 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.18.13",
-    "@babel/preset-env": "^7.18.10",
+    "@babel/core": "^7.19.1",
+    "@babel/preset-env": "^7.19.1",
     "@gitlab/eslint-plugin": "17.0.0",
     "@gitlab/stylelint-config": "4.1.0",
     "@gitlab/svgs": "3.3.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.5.10",
-    "@storybook/addon-docs": "6.5.10",
-    "@storybook/addon-essentials": "6.5.10",
-    "@storybook/addon-storyshots": "6.5.10",
-    "@storybook/addon-storyshots-puppeteer": "6.5.10",
-    "@storybook/addon-viewport": "6.5.10",
-    "@storybook/theming": "6.5.10",
-    "@storybook/vue": "6.5.10",
+    "@storybook/addon-a11y": "6.5.12",
+    "@storybook/addon-docs": "6.5.12",
+    "@storybook/addon-essentials": "6.5.12",
+    "@storybook/addon-storyshots": "6.5.12",
+    "@storybook/addon-storyshots-puppeteer": "6.5.12",
+    "@storybook/addon-viewport": "6.5.12",
+    "@storybook/theming": "6.5.12",
+    "@storybook/vue": "6.5.12",
     "@vue/test-utils": "1.3.0",
     "@vue/vue2-jest": "29.0.0",
     "autoprefixer": "^9.7.6",
@@ -102,9 +102,9 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.5.3",
-    "cypress": "^10.7.0",
+    "cypress": "^10.8.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.23.0",
+    "eslint": "8.23.1",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.6.4",

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

@@ -18,9 +18,11 @@ const FakeToken = {
 
 Vue.directive('GlTooltip', () => {});
 
+let wrapper;
+
+const findFilteredSearchInput = () => wrapper.find('[data-testid="filtered-search-input"]');
 const stripId = (token) => (typeof token === 'object' ? omit(token, 'id') : token);
 
-let wrapper;
 describe('Filtered search', () => {
   const defaultProps = {
     availableTokens: [{ type: 'faketoken', token: FakeToken }],
@@ -41,6 +43,10 @@ describe('Filtered search', () => {
     });
   };
 
+  afterEach(() => {
+    wrapper = null;
+  });
+
   describe('value manipulation', () => {
     it('creates term when empty', () => {
       createComponent();
@@ -284,7 +290,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
-      wrapper.findAllComponents(GlFilteredSearchTerm).wrappers.forEach((searchTermWrapper) => {
+      wrapper.findAll(`.gl-filtered-search-item`).wrappers.forEach((searchTermWrapper) => {
         expect(searchTermWrapper.props('active')).toBe(false);
       });
     });
@@ -483,6 +489,51 @@ describe('Filtered search', () => {
       { type: 'filtered-search-term', value: { data: '' } },
     ]);
   });
+
+  it('the search input is enabled by default', () => {
+    createComponent();
+
+    expect(findFilteredSearchInput().attributes('disabled')).toBe(undefined);
+  });
+
+  describe('view-only state', () => {
+    const createViewOnlyComponent = (viewOnly) =>
+      createComponent({
+        value: ['one', { type: 'faketoken', value: '' }],
+        viewOnly,
+      });
+
+    it.each([true, false])(
+      'passes the value of viewOnly to the search term when view-only is %s',
+      (viewOnly) => {
+        createViewOnlyComponent(viewOnly);
+
+        expect(wrapper.findComponent(GlFilteredSearchTerm).props('viewOnly')).toBe(viewOnly);
+      }
+    );
+
+    describe('when view-only is true', () => {
+      beforeEach(() => {
+        createViewOnlyComponent(true);
+      });
+
+      it('disables the search input', () => {
+        expect(findFilteredSearchInput().attributes('disabled')).toBe('disabled');
+      });
+
+      it('prevents tokens from activating', async () => {
+        await wrapper.findComponent(FakeToken).vm.$emit('activate');
+
+        wrapper.findAll(`.gl-filtered-search-item`).wrappers.forEach((searchTermWrapper) => {
+          expect(searchTermWrapper.props('active')).toBe(false);
+        });
+      });
+
+      it('does not apply the last token class', async () => {
+        expect(wrapper.find('.gl-filtered-search-last-item').exists()).toBe(false);
+      });
+    });
+  });
 });
 
 describe('Filtered search integration tests', () => {

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

@@ -186,7 +186,7 @@ const LabelToken = {
     GlToken,
     GlDropdownDivider,
   },
-  props: ['value', 'active'],
+  props: ['value', 'active', 'viewOnly'],
   inheritAttrs: false,
   data() {
     return {
@@ -251,7 +251,7 @@ const LabelToken = {
       v-on="$listeners"
     >
       <template #view-token="{ inputValue, cssClasses, listeners }">
-        <gl-token variant="search-value" :class="cssClasses" :style="containerStyle" v-on="listeners">
+        <gl-token variant="search-value" :view-only="viewOnly" :class="cssClasses" :style="containerStyle" v-on="listeners">
           {{ activeLabel ? activeLabel.title : inputValue }}
         </gl-token>
       </template>
@@ -323,6 +323,17 @@ export const Default = () => ({
   template: `<gl-filtered-search :available-tokens="tokens" :value="value" />`,
 });
 
+export const ViewOnly = () => ({
+  data() {
+    return {
+      tokens,
+      value: [{ type: 'author', value: { data: 'epsilon', operator: '=' } }, 'raw text'],
+    };
+  },
+  components,
+  template: `<gl-filtered-search view-only :available-tokens="tokens" :value="value" />`,
+});
+
 export const WithHistoryItems = () => ({
   components,
   data() {

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

@@ -113,6 +113,11 @@ export default {
       required: false,
       default: () => ({}),
     },
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -162,7 +167,7 @@ export default {
           }
         }
 
-        if (this.tokens.length === 0 || !this.isLastTokenEmpty()) {
+        if ((this.tokens.length === 0 || !this.isLastTokenEmpty()) && !this.viewOnly) {
           this.tokens.push(createTerm());
         }
 
@@ -191,6 +196,10 @@ export default {
       this.tokens = needDenormalization(newValue) ? denormalizeTokens(newValue) : newValue;
     },
 
+    isActiveToken(idx) {
+      return this.activeTokenIdx === idx;
+    },
+
     isLastToken(idx) {
       return !this.activeTokenIdx && idx === this.lastTokenIdx;
     },
@@ -207,8 +216,14 @@ export default {
       return this.getTokenEntry(type)?.token || GlFilteredSearchTerm;
     },
 
+    getLastTokenClassList(idx) {
+      return this.isLastToken(idx) && !this.viewOnly ? 'gl-filtered-search-last-item' : '';
+    },
+
     activate(idx) {
-      this.activeTokenIdx = idx;
+      if (!this.viewOnly) {
+        this.activeTokenIdx = idx;
+      }
     },
 
     activatePreviousToken() {
@@ -336,6 +351,7 @@ export default {
     :history-items="historyItems"
     :clearable="hasValue"
     :search-button-attributes="searchButtonAttributes"
+    :disabled="viewOnly"
     data-testid="filtered-search-input"
     @submit="submit"
     @input="applyNewValue"
@@ -348,7 +364,10 @@ export default {
       <slot name="history-item" v-bind="slotScope"></slot>
     </template>
     <template #input>
-      <div class="gl-filtered-search-scrollable">
+      <div
+        class="gl-filtered-search-scrollable"
+        :class="{ 'gl-bg-gray-10! gl-inset-border-1-gray-100!': viewOnly }"
+      >
         <template v-for="(token, idx) in tokens">
           <component
             :is="getTokenComponent(token.type)"
@@ -364,11 +383,10 @@ export default {
             :placeholder="termPlaceholder"
             :show-friendly-text="showFriendlyText"
             :search-input-attributes="searchInputAttributes"
+            :view-only="viewOnly"
             :is-last-token="isLastToken(idx)"
             class="gl-filtered-search-item"
-            :class="{
-              'gl-filtered-search-last-item': isLastToken(idx),
-            }"
+            :class="{ 'gl-filtered-search-last-item': isLastToken(idx) && !viewOnly }"
             @activate="activate(idx)"
             @deactivate="deactivate(token)"
             @destroy="destroyToken(idx, $event)"

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

@@ -23,7 +23,7 @@ describe('Filtered search term', () => {
   const segmentStub = {
     name: 'gl-filtered-search-token-segment-stub',
     template: '<div><slot name="view"></slot><slot name="suggestions"></slot></div>',
-    props: ['searchInputAttributes', 'isLastToken', 'currentValue'],
+    props: ['searchInputAttributes', 'isLastToken', 'currentValue', 'viewOnly'],
   };
 
   const createComponent = (props) => {
@@ -35,6 +35,7 @@ describe('Filtered search term', () => {
     });
   };
 
+  const findSearchInput = () => wrapper.find('input');
   const findTokenSegmentComponent = () => wrapper.findComponent(segmentStub);
 
   it('renders value in inactive mode', () => {
@@ -85,8 +86,9 @@ describe('Filtered search term', () => {
     }
   );
 
-  it('passes `searchInputAttributes`, `isLastToken`, and `currentValue` props to `GlFilteredSearchTokenSegment`', () => {
+  it('passes `searchInputAttributes`, `isLastToken`, `currentValue` & `viewOnly` props to `GlFilteredSearchTokenSegment`', () => {
     const isLastToken = true;
+    const viewOnly = true;
     const currentValue = [
       { type: 'filtered-search-term', value: { data: 'something' } },
       { type: 'filtered-search-term', value: { data: '' } },
@@ -97,23 +99,41 @@ describe('Filtered search term', () => {
       searchInputAttributes,
       isLastToken,
       currentValue,
+      viewOnly,
     });
 
     expect(findTokenSegmentComponent().props()).toEqual({
       searchInputAttributes,
       isLastToken,
       currentValue,
+      viewOnly,
     });
   });
 
+  it('by default sets `viewOnly` to false on `GlFilteredSearchTokenSegment`', () => {
+    createComponent();
+
+    expect(findTokenSegmentComponent().props('viewOnly')).toBe(false);
+  });
+
   it('adds `searchInputAttributes` prop to search term input', () => {
     createComponent({
       placeholder: 'placeholder-stub',
       searchInputAttributes,
     });
 
-    expect(wrapper.find('input').attributes('data-qa-selector')).toBe(
+    expect(findSearchInput().attributes('data-qa-selector')).toBe(
       searchInputAttributes['data-qa-selector']
     );
   });
+
+  describe.each([true, false])('when `viewOnly` is %s', (viewOnly) => {
+    beforeEach(() => {
+      createComponent({ viewOnly, searchInputAttributes, placeholder: 'placeholder-stub' });
+    });
+
+    it(`${viewOnly ? 'adds' : 'does not add'} \`gl-bg-gray-10\` class to search term input`, () => {
+      expect(findSearchInput().classes('gl-bg-gray-10')).toBe(viewOnly);
+    });
+  });
 });

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

@@ -69,6 +69,11 @@ export default {
       default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     suggestedTokens() {
@@ -145,6 +150,7 @@ export default {
       :search-input-attributes="searchInputAttributes"
       :is-last-token="isLastToken"
       :current-value="currentValue"
+      :view-only="viewOnly"
       @activate="$emit('activate')"
       @deactivate="$emit('deactivate')"
       @complete="$emit('replace', { type: $event })"
@@ -170,8 +176,10 @@ export default {
           v-if="placeholder"
           v-bind="searchInputAttributes"
           class="gl-filtered-search-term-input"
+          :class="{ 'gl-bg-gray-10': viewOnly }"
           :placeholder="placeholder"
           :aria-label="placeholder"
+          :readonly="viewOnly"
           data-testid="filtered-search-term-input"
         />
 

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

@@ -8,14 +8,16 @@
   @include gl-white-space-nowrap;
   @include gl-cursor-pointer;
 
-  &:hover {
-    .gl-filtered-search-token-type {
-      @include gl-bg-gray-100;
-    }
-
-    .gl-filtered-search-token-data,
-    .gl-filtered-search-token-operator {
-      @include gl-bg-gray-200;
+  &.gl-filtered-search-token-hover {
+    &:hover {
+      .gl-filtered-search-token-type {
+        @include gl-bg-gray-100;
+      }
+
+      .gl-filtered-search-token-data,
+      .gl-filtered-search-token-operator {
+        @include gl-bg-gray-200;
+      }
     }
   }
 }

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

@@ -39,6 +39,27 @@ describe('Filtered search token', () => {
     });
   };
 
+  const mountComponent = (props) => {
+    wrapper = mount(GlFilteredSearchToken, {
+      provide: {
+        portalName: 'fake target',
+        alignSuggestions: function fakeAlignSuggestions() {},
+      },
+      stubs: {
+        Portal: {
+          template: '<div><slot></slot></div>',
+        },
+        GlFilteredSearchSuggestionList: {
+          template: '<div></div>',
+          methods: {
+            getValue: () => '=',
+          },
+        },
+      },
+      propsData: { ...defaultProps, ...props },
+    });
+  };
+
   describe('when activated', () => {
     it('emits activate when operator segment is clicked', () => {
       createComponent();
@@ -201,27 +222,6 @@ describe('Filtered search token', () => {
       }
     });
 
-    const mountComponent = (props) => {
-      wrapper = mount(GlFilteredSearchToken, {
-        provide: {
-          portalName: 'fake target',
-          alignSuggestions: function fakeAlignSuggestions() {},
-        },
-        stubs: {
-          Portal: {
-            template: '<div><slot></slot></div>',
-          },
-          GlFilteredSearchSuggestionList: {
-            template: '<div></div>',
-            methods: {
-              getValue: () => '=',
-            },
-          },
-        },
-        propsData: { ...defaultProps, ...props },
-      });
-    };
-
     it('emits close event when data token is closed', () => {
       mountComponent({ value: { operator: '=', data: 'something' } });
       const closeWrapper = wrapper.find('.gl-token-close');
@@ -302,4 +302,57 @@ describe('Filtered search token', () => {
       expect(findDataSegment().props('value')).toEqual('gamma');
     });
   });
+
+  describe('view-only state', () => {
+    it('prevents segments from activating when view-only is true', async () => {
+      createComponent({
+        active: true,
+        value: { operator: '=' },
+        viewOnly: true,
+      });
+
+      await findTitleSegment().vm.$emit('activate');
+
+      expect(findTitleSegment().props().active).toBe(false);
+    });
+
+    it('does not add a mousedown listener to the token-data when view-only is true', async () => {
+      mountComponent({ value: { operator: '=', data: 'something' }, viewOnly: true });
+
+      const tokenData = wrapper.find('.gl-filtered-search-token-data');
+      tokenData.element.closest = jest.fn(() => tokenData.element);
+
+      await tokenData.trigger('mousedown');
+
+      expect(tokenData.element.closest).not.toHaveBeenCalled();
+    });
+
+    describe.each`
+      viewOnly | hoverClassExists | cursorClassExists | propValue
+      ${true}  | ${false}         | ${true}           | ${true}
+      ${false} | ${true}          | ${false}          | ${false}
+    `(
+      'when view-only is $viewOnly',
+      ({ viewOnly, hoverClassExists, cursorClassExists, propValue }) => {
+        beforeEach(() => {
+          createComponent({
+            active: true,
+            value: { operator: '=' },
+            viewOnly,
+          });
+        });
+
+        it(`${viewOnly ? 'applies' : 'does not apply'} the view-only style classes`, () => {
+          expect(wrapper.find('.gl-filtered-search-token-hover').exists()).toBe(hoverClassExists);
+          expect(wrapper.find('.gl-cursor-default').exists()).toBe(cursorClassExists);
+        });
+
+        it(`sets the view-only prop to ${viewOnly} on the title, data and operator segments`, () => {
+          expect(findTitleSegment().props('viewOnly')).toBe(propValue);
+          expect(findDataSegment().props('viewOnly')).toBe(propValue);
+          expect(findOperatorSegment().props('viewOnly')).toBe(propValue);
+        });
+      }
+    );
+  });
 });

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

@@ -71,6 +71,11 @@ export default {
       default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -100,6 +105,10 @@ export default {
       const operator = this.operators.find((op) => op.value === this.tokenValue.operator);
       return this.showFriendlyText ? operator?.description : operator?.value;
     },
+
+    eventListeners() {
+      return this.viewOnly ? {} : { mousedown: this.destroyByClose };
+    },
   },
   segments: {
     SEGMENT_TITLE,
@@ -165,6 +174,8 @@ export default {
 
   methods: {
     activateSegment(segment) {
+      if (this.viewOnly) return;
+
       this.activeSegment = segment;
 
       if (!this.active) {
@@ -178,6 +189,9 @@ export default {
     },
 
     getAdditionalSegmentClasses(segment) {
+      if (this.viewOnly) {
+        return 'gl-cursor-text';
+      }
       return { 'gl-cursor-pointer': !this.isSegmentActive(segment) };
     },
 
@@ -293,7 +307,11 @@ export default {
 <template>
   <div
     class="gl-filtered-search-token"
-    :class="{ 'gl-filtered-search-token-active': active }"
+    :class="{
+      'gl-filtered-search-token-active': active,
+      'gl-filtered-search-token-hover': !viewOnly,
+      'gl-cursor-default': viewOnly,
+    }"
     data-testid="filtered-search-token"
   >
     <!--
@@ -307,6 +325,7 @@ export default {
       :active="isSegmentActive($options.segments.SEGMENT_TITLE)"
       :cursor-position="intendedCursorPosition"
       :options="availableTokensWithSelf"
+      :view-only="viewOnly"
       @activate="activateSegment($options.segments.SEGMENT_TITLE)"
       @deactivate="$emit('deactivate')"
       @complete="replaceToken"
@@ -333,7 +352,7 @@ export default {
       :cursor-position="intendedCursorPosition"
       :options="operators"
       :custom-input-keydown-handler="handleOperatorKeydown"
-      view-only
+      :view-only="viewOnly"
       @activate="activateSegment($options.segments.SEGMENT_OPERATOR)"
       @backspace="replaceWithTermIfEmpty"
       @complete="activateSegment($options.segments.SEGMENT_DATA)"
@@ -382,6 +401,7 @@ export default {
       :cursor-position="intendedCursorPosition"
       :multi-select="config.multiSelect"
       :options="config.options"
+      :view-only="viewOnly"
       option-text-field="title"
       @activate="activateDataSegment"
       @backspace="activateSegment($options.segments.SEGMENT_OPERATOR)"
@@ -406,7 +426,7 @@ export default {
           name="view-token"
           v-bind="{
             inputValue,
-            listeners: { mousedown: destroyByClose },
+            listeners: eventListeners,
             cssClasses: {
               'gl-filtered-search-token-data': true,
               ...getAdditionalSegmentClasses($options.segments.SEGMENT_DATA),
@@ -417,7 +437,8 @@ export default {
             class="gl-filtered-search-token-data"
             variant="search-value"
             :class="getAdditionalSegmentClasses($options.segments.SEGMENT_DATA)"
-            @mousedown="destroyByClose"
+            :view-only="viewOnly"
+            v-on="eventListeners"
           >
             <span class="gl-filtered-search-token-data-content">
               <!--

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

@@ -77,6 +77,14 @@ describe('Filtered search token segment', () => {
     expect(wrapper.emitted().activate).toHaveLength(1);
   });
 
+  it('does not emit activate when view-only is true', () => {
+    createComponent({ viewOnly: true, value: '' });
+
+    wrapper.trigger('mousedown.left');
+
+    expect(wrapper.emitted().activate).toBeUndefined();
+  });
+
   it('ignores mousedown if active', () => {
     createComponent({ value: '', active: true });
 
@@ -312,5 +320,15 @@ describe('Filtered search token segment', () => {
         searchInputAttributes['data-qa-selector']
       );
     });
+
+    describe.each([true, false])('and viewOnly is %s', (viewOnly) => {
+      const readonly = viewOnly ? 'readonly' : undefined;
+
+      it(`sets the input \`readonly\` atttribute to ${readonly}`, () => {
+        createWrappedComponent({ value: 'test', active: true, viewOnly });
+
+        expect(wrapper.find('input').attributes('readonly')).toBe(readonly);
+      });
+    });
   });
 });