@gitlab/ui 36.0.0 → 36.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [36.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v36.0.0...v36.1.0) (2022-02-08)
+
+
+### Features
+
+* **GlFilteredSearch:** add props for adding additional HTML attributes ([b26ea14](https://gitlab.com/gitlab-org/gitlab-ui/commit/b26ea14b818cef389c48617cb3443ae493cc49aa))
+
 # [36.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v35.1.0...v36.0.0) (2022-02-07)
 
 

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

@@ -39,6 +39,12 @@ var filtered_search_documentation = {
     },
     suggestionsListClass: {
       additionalInfo: 'Additional classes to add to the suggestion list menu. NOTE: this not reactive, and the value must be available and fixed when the component is instantiated'
+    },
+    searchButtonAttributes: {
+      additionalInfo: 'HTML attributes to add to the search button'
+    },
+    searchInputAttributes: {
+      additionalInfo: 'HTML attributes to add to the search input'
     }
   },
   events: [{

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

@@ -83,6 +83,16 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    searchButtonAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    searchInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({})
     }
   },
 
@@ -269,9 +279,9 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable"},[_vm._l((_vm.tokens),function(token,idx){return [_c(_vm.getTokenComponent(token.type),{key:((token.type) + "-" + idx),ref:"tokens",refInFor:true,tag:"component",staticClass:"gl-filtered-search-item",class:{
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable"},[_vm._l((_vm.tokens),function(token,idx){return [_c(_vm.getTokenComponent(token.type),{key:((token.type) + "-" + idx),ref:"tokens",refInFor:true,tag:"component",staticClass:"gl-filtered-search-item",class:{
             'gl-filtered-search-last-item': _vm.isLastToken(idx),
-          },attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)}},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})]})],2),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
+          },attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken(idx)},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)}},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})]})],2),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -17,6 +17,12 @@ var filtered_search_term_documentation = {
     },
     value: {
       additionalInfo: 'Current term value'
+    },
+    searchInputAttributes: {
+      additionalInfo: 'HTML attributes to add to the search input'
+    },
+    isLastToken: {
+      additionalInfo: 'If this is the last token'
     }
   },
   events: [{

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

@@ -29,6 +29,16 @@ var script = {
       type: String,
       required: false,
       default: ''
+    },
+    searchInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    isLastToken: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   computed: {
@@ -55,7 +65,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-auto gl-filtered-search-term"},[_c('gl-filtered-search-token-segment',{staticClass:"gl-filtered-search-term-token",class:{ 'gl-w-full': _vm.placeholder },attrs:{"active":_vm.active},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":function($event){return _vm.$emit('replace', { type: $event })},"backspace":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return _vm._l((_vm.suggestedTokens),function(item,idx){return _c('gl-filtered-search-suggestion',{key:idx,attrs:{"value":item.type,"icon-name":item.icon}},[_vm._v("\n        "+_vm._s(item.title)+"\n      ")])})},proxy:true},{key:"view",fn:function(){return [(_vm.placeholder)?_c('input',{staticClass:"gl-filtered-search-term-input",attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder}}):[_vm._v(_vm._s(_vm.value.data))]]},proxy:true}]),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-auto gl-filtered-search-term"},[_c('gl-filtered-search-token-segment',{staticClass:"gl-filtered-search-term-token",class:{ 'gl-w-full': _vm.placeholder },attrs:{"active":_vm.active,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":function($event){return _vm.$emit('replace', { type: $event })},"backspace":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return _vm._l((_vm.suggestedTokens),function(item,idx){return _c('gl-filtered-search-suggestion',{key:idx,attrs:{"value":item.type,"icon-name":item.icon}},[_vm._v("\n        "+_vm._s(item.title)+"\n      ")])})},proxy:true},{key:"view",fn:function(){return [(_vm.placeholder)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder}},'input',_vm.searchInputAttributes,false)):[_vm._v(_vm._s(_vm.value.data))]]},proxy:true}]),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -23,6 +23,12 @@ var filtered_search_token_segment_documentation = {
     },
     value: {
       additionalInfo: 'Current term value'
+    },
+    searchInputAttributes: {
+      additionalInfo: 'HTML attributes to add to the search input'
+    },
+    isLastToken: {
+      additionalInfo: 'If this is the last token'
     }
   },
   events: [{

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

@@ -48,6 +48,16 @@ var script = {
     value: {
       required: true,
       validator: () => true
+    },
+    searchInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    isLastToken: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
 
@@ -274,7 +284,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-filtered-search-token-segment",class:{ 'gl-filtered-search-token-segment-active': _vm.active },attrs:{"data-testid":"filtered-search-token-segment"},on:{"mousedown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.emitIfInactive($event)}}},[(_vm.active)?[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}}),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",[_vm._v("\n              "+_vm._s(option[_vm.optionTextField])+"\n            ")],null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",[_vm._v(_vm._s(_vm.inputValue))],null,{ inputValue: _vm.inputValue })],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._b({staticClass:"gl-filtered-search-token-segment",class:{ 'gl-filtered-search-token-segment-active': _vm.active },attrs:{"data-testid":"filtered-search-token-segment"},on:{"mousedown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.emitIfInactive($event)}}},'div',_vm.isLastToken && !_vm.active && _vm.searchInputAttributes,false),[(_vm.active)?[(((_vm.searchInputAttributes).type)==='checkbox')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.inputValue)?_vm._i(_vm.inputValue,null)>-1:(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){var $$a=_vm.inputValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.inputValue=$$a.concat([$$v]));}else {$$i>-1&&(_vm.inputValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.inputValue=$$c;}}}},'input',_vm.searchInputAttributes,false)):(((_vm.searchInputAttributes).type)==='radio')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":"radio"},domProps:{"checked":_vm._q(_vm.inputValue,null)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){_vm.inputValue=null;}}},'input',_vm.searchInputAttributes,false)):_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":(_vm.searchInputAttributes).type},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}},'input',_vm.searchInputAttributes,false)),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",[_vm._v("\n              "+_vm._s(option[_vm.optionTextField])+"\n            ")],null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",[_vm._v(_vm._s(_vm.inputValue))],null,{ inputValue: _vm.inputValue })],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -51,6 +51,9 @@ var search_box_by_click_documentation = {
     },
     tooltipContainer: {
       additionalInfo: 'Container for tooltip. Valid values: DOM node, selector string or `false` for default'
+    },
+    searchButtonAttributes: {
+      additionalInfo: 'HTML attributes to add to the search button'
     }
   },
   events: [{

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

@@ -82,6 +82,11 @@ var script = {
       required: false,
       default: false,
       validator: value => value === false || typeof value === 'string' || value instanceof HTMLElement
+    },
+    searchButtonAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({})
     }
   },
 
@@ -159,7 +164,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-input-group',{staticClass:"gl-search-box-by-click",scopedSlots:_vm._u([(_vm.historyItems)?{key:"prepend",fn:function(){return [_c('gl-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"menu-class":"gl-search-box-by-click-menu","category":"secondary","disabled":_vm.disabled},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon",attrs:{"name":"history"}}),_vm._v(" "),_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon-chevron",attrs:{"name":"chevron-down"}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only"},[_vm._v("Toggle history")])]},proxy:true}],null,false,2220989388)},[_vm._v(" "),_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-header"},[_vm._v("\n        "+_vm._s(_vm.recentSearchesHeader)+"\n        "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:({ container: _vm.tooltipContainer }),expression:"{ container: tooltipContainer }",modifiers:{"hover":true}}],ref:"closeHistory",staticClass:"gl-search-box-by-click-close-history-button",attrs:{"title":_vm.closeButtonTitle,"aria-label":_vm.closeButtonTitle,"category":"tertiary","name":"close","icon":"close"},on:{"click":_vm.closeHistoryDropdown}})],1),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),(_vm.historyItems.length)?[_vm._l((_vm.historyItems),function(item,idx){return _c('gl-dropdown-item',{key:idx,staticClass:"gl-search-box-by-click-history-item",on:{"click":function($event){return _vm.selectHistoryItem(item)}}},[_vm._t("history-item",[_vm._v(_vm._s(item))],{"historyItem":item})],2)}),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-item',{ref:"clearHistory",on:{"click":function($event){return _vm.$emit('clear-history')}}},[_vm._v(_vm._s(_vm.clearRecentSearchesText))])]:_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-no-searches"},[_vm._v(_vm._s(_vm.noRecentSearchesText))])],2)]},proxy:true}:null,{key:"append",fn:function(){return [_c('gl-button',{ref:"searchButton",staticClass:"gl-search-box-by-click-search-button",attrs:{"icon":"search","disabled":_vm.disabled,"aria-label":"Search"},on:{"click":function($event){return _vm.search(_vm.currentValue)}}})]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("input",[_c('gl-form-input',_vm._b({ref:"input",staticClass:"gl-search-box-by-click-input",attrs:{"disabled":_vm.disabled},on:{"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;},"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.search(_vm.currentValue)}},model:{value:(_vm.currentValue),callback:function ($$v) {_vm.currentValue=$$v;},expression:"currentValue"}},'gl-form-input',_vm.inputAttributes,false))]),_vm._v(" "),(_vm.clearable && _vm.hasValue && !_vm.disabled)?_c('gl-clear-icon-button',{staticClass:"gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer,"data-testid":"filtered-search-clear-button"},on:{"click":_vm.clearInput}}):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-input-group',{staticClass:"gl-search-box-by-click",scopedSlots:_vm._u([(_vm.historyItems)?{key:"prepend",fn:function(){return [_c('gl-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"menu-class":"gl-search-box-by-click-menu","category":"secondary","disabled":_vm.disabled},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon",attrs:{"name":"history"}}),_vm._v(" "),_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon-chevron",attrs:{"name":"chevron-down"}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only"},[_vm._v("Toggle history")])]},proxy:true}],null,false,2220989388)},[_vm._v(" "),_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-header"},[_vm._v("\n        "+_vm._s(_vm.recentSearchesHeader)+"\n        "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:({ container: _vm.tooltipContainer }),expression:"{ container: tooltipContainer }",modifiers:{"hover":true}}],ref:"closeHistory",staticClass:"gl-search-box-by-click-close-history-button",attrs:{"title":_vm.closeButtonTitle,"aria-label":_vm.closeButtonTitle,"category":"tertiary","name":"close","icon":"close"},on:{"click":_vm.closeHistoryDropdown}})],1),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),(_vm.historyItems.length)?[_vm._l((_vm.historyItems),function(item,idx){return _c('gl-dropdown-item',{key:idx,staticClass:"gl-search-box-by-click-history-item",on:{"click":function($event){return _vm.selectHistoryItem(item)}}},[_vm._t("history-item",[_vm._v(_vm._s(item))],{"historyItem":item})],2)}),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-item',{ref:"clearHistory",on:{"click":function($event){return _vm.$emit('clear-history')}}},[_vm._v(_vm._s(_vm.clearRecentSearchesText))])]:_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-no-searches"},[_vm._v(_vm._s(_vm.noRecentSearchesText))])],2)]},proxy:true}:null,{key:"append",fn:function(){return [_c('gl-button',_vm._b({ref:"searchButton",staticClass:"gl-search-box-by-click-search-button",attrs:{"icon":"search","disabled":_vm.disabled,"aria-label":"Search","data-testid":"search-button"},on:{"click":function($event){return _vm.search(_vm.currentValue)}}},'gl-button',_vm.searchButtonAttributes,false))]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("input",[_c('gl-form-input',_vm._b({ref:"input",staticClass:"gl-search-box-by-click-input",attrs:{"disabled":_vm.disabled},on:{"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;},"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.search(_vm.currentValue)}},model:{value:(_vm.currentValue),callback:function ($$v) {_vm.currentValue=$$v;},expression:"currentValue"}},'gl-form-input',_vm.inputAttributes,false))]),_vm._v(" "),(_vm.clearable && _vm.hasValue && !_vm.disabled)?_c('gl-clear-icon-button',{staticClass:"gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer,"data-testid":"filtered-search-clear-button"},on:{"click":_vm.clearInput}}):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

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

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

@@ -35,6 +35,12 @@ export default {
       additionalInfo:
         'Additional classes to add to the suggestion list menu. NOTE: this not reactive, and the value must be available and fixed when the component is instantiated',
     },
+    searchButtonAttributes: {
+      additionalInfo: 'HTML attributes to add to the search button',
+    },
+    searchInputAttributes: {
+      additionalInfo: 'HTML attributes to add to the search input',
+    },
   },
   events: [
     {

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

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { shallowMount, mount } from '@vue/test-utils';
 import GlFilteredSearch from './filtered_search.vue';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
@@ -31,7 +31,7 @@ describe('Filtered search', () => {
       stubs: {
         GlSearchBoxByClick: {
           name: 'GlSearchBoxByClickStub',
-          props: ['clearable'],
+          props: ['clearable', 'searchButtonAttributes'],
           template: '<div><slot name="input"></slot></div>',
         },
       },
@@ -66,7 +66,7 @@ describe('Filtered search', () => {
       createComponent({
         value: [{ type: 'faketoken', value: { data: '' } }],
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findSearchBox().props('clearable')).toBe(true);
     });
@@ -75,7 +75,7 @@ describe('Filtered search', () => {
       createComponent({
         value: ['one', 'two'],
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const inputEventArgs = wrapper.emitted().input[1][0];
       expect(inputEventArgs.every((t) => t.type === TERM_TOKEN_TYPE)).toBe(true);
@@ -86,7 +86,7 @@ describe('Filtered search', () => {
       createComponent({
         value: ['one two'],
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const inputEventArgs = wrapper.emitted().input[1][0];
       expect(inputEventArgs.every((t) => t.type === TERM_TOKEN_TYPE)).toBe(true);
@@ -104,7 +104,7 @@ describe('Filtered search', () => {
     `('passes through $eventName', async ({ eventName, payload }) => {
       createComponent();
       findSearchBox().vm.$emit(eventName, payload[0]);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted()[eventName][0]).toStrictEqual(payload);
     });
@@ -113,11 +113,11 @@ describe('Filtered search', () => {
       createComponent({
         value: [{ type: 'faketoken', value: '' }],
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       wrapper.findComponent(FakeToken).vm.$emit('activate');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.findComponent(FakeToken).props('active')).toBe(true);
     });
@@ -126,12 +126,12 @@ describe('Filtered search', () => {
       createComponent({
         value: [{ type: 'faketoken', value: '' }],
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       wrapper.findComponent(FakeToken).vm.$emit('activate');
       wrapper.findComponent(FakeToken).vm.$emit('deactivate');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(
         wrapper.findAllComponents({ ref: 'tokens' }).filter((w) => w.props('active') === true)
@@ -145,12 +145,12 @@ describe('Filtered search', () => {
           { type: 'faketoken', value: { data: '2' } },
         ],
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       wrapper.findComponent(FakeToken).vm.$emit('activate');
       wrapper.findAllComponents(FakeToken).at(1).vm.$emit('deactivate');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.findComponent(FakeToken).props('active')).toBe(true);
     });
@@ -161,16 +161,16 @@ describe('Filtered search', () => {
         value: [{ type: 'faketoken', value: { data: '' } }, 'one', 'two', 'three'],
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       findSecondTerm().vm.$emit('activate');
       findSecondTerm().vm.$emit('input', { data: '' });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       findSecondTerm().vm.$emit('deactivate');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
         { type: 'faketoken', value: { data: '' } },
@@ -184,11 +184,11 @@ describe('Filtered search', () => {
       createComponent({
         value: [{ type: 'faketoken', value: '' }, 'one'],
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       wrapper.findComponent(FakeToken).vm.$emit('destroy');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: 'one' } },
@@ -200,11 +200,11 @@ describe('Filtered search', () => {
       createComponent({
         value: ['one', { type: 'faketoken', value: '' }, 'two'],
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       wrapper.findComponent(FakeToken).vm.$emit('destroy');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.findComponent(GlFilteredSearchTerm).props('active')).toBe(true);
     });
@@ -213,7 +213,7 @@ describe('Filtered search', () => {
       createComponent();
       wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('destroy');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: '' } },
@@ -226,7 +226,7 @@ describe('Filtered search', () => {
         .findComponent(GlFilteredSearchTerm)
         .vm.$emit('replace', { type: 'faketoken', value: { data: 'test' } });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
         { type: 'faketoken', value: { data: 'test' } },
@@ -241,13 +241,13 @@ describe('Filtered search', () => {
 
       findSearchBox().vm.$emit('input', '');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       wrapper
         .findComponent(GlFilteredSearchTerm)
         .vm.$emit('replace', { type: 'faketoken', value: { data: 'test' } });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
         { type: 'faketoken', value: { data: 'test' } },
@@ -260,7 +260,7 @@ describe('Filtered search', () => {
       wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('activate');
       wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('split');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: 'one' } },
@@ -270,12 +270,12 @@ describe('Filtered search', () => {
 
     it('jumps to last token when insert of empty term requested', async () => {
       createComponent({ value: ['one', 'two'] });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('activate');
       wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('split');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.findAllComponents(GlFilteredSearchTerm).at(2).props('active')).toBe(true);
       expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
@@ -289,11 +289,11 @@ describe('Filtered search', () => {
       createComponent({ value: ['one'] });
       wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('activate');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('split', ['foo', 'bar']);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: 'one' } },
@@ -336,7 +336,7 @@ describe('Filtered search', () => {
     createComponent({
       value: [{ type: 'faketoken', value: '' }],
     });
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     const fakeTokenInstance = wrapper.findComponent(FakeToken);
     expect(fakeTokenInstance.exists()).toBe(true);
@@ -344,6 +344,40 @@ describe('Filtered search', () => {
       expect.arrayContaining(['current-value', 'index', 'config', 'value'])
     );
   });
+
+  it('passes `searchButtonAttributes` prop to `GlSearchBoxByClick`', () => {
+    const searchButtonAttributes = { 'data-qa-selector': 'foo-bar' };
+
+    createComponent({ searchButtonAttributes });
+
+    expect(findSearchBox().props('searchButtonAttributes')).toEqual(searchButtonAttributes);
+  });
+
+  it('passes `searchInputAttributes` prop to search term', async () => {
+    const searchInputAttributes = { 'data-qa-selector': 'foo-bar' };
+
+    createComponent({
+      value: ['one'],
+      searchInputAttributes,
+    });
+    await nextTick();
+
+    expect(wrapper.findComponent(GlFilteredSearchTerm).props('searchInputAttributes')).toEqual(
+      searchInputAttributes
+    );
+  });
+
+  it('passes `isLastToken` prop to search terms', async () => {
+    createComponent({
+      value: ['one'],
+    });
+    await nextTick();
+
+    const filteredSearchTerms = wrapper.findAllComponents(GlFilteredSearchTerm);
+
+    expect(filteredSearchTerms.at(0).props('isLastToken')).toBe(false);
+    expect(filteredSearchTerms.at(1).props('isLastToken')).toBe(true);
+  });
 });
 
 describe('Filtered search integration tests', () => {
@@ -420,7 +454,7 @@ describe('Filtered search integration tests', () => {
     beforeEach(async () => {
       mountComponent();
       activate(0);
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('brings focus to term element input', () => {
@@ -441,7 +475,7 @@ describe('Filtered search integration tests', () => {
       const input = findInput();
       input.setValue('sta'); // partial of "static"
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const suggestions = wrapper.findComponent(GlFilteredSearchSuggestionList);
       expect(suggestions.exists()).toBe(true);
@@ -452,7 +486,7 @@ describe('Filtered search integration tests', () => {
       const input = findInput();
       input.setValue('--wrong-- ');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const suggestions = wrapper.findComponent(GlFilteredSearchSuggestionList);
       expect(suggestions.exists()).toBe(true);
@@ -463,7 +497,7 @@ describe('Filtered search integration tests', () => {
       const input = findInput();
       input.setValue('--wrong--');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const suggestions = wrapper.findComponent(GlFilteredSearchSuggestionList);
       expect(suggestions.exists()).toBe(false);
@@ -473,11 +507,11 @@ describe('Filtered search integration tests', () => {
       const input = findInput();
       input.trigger('keydown', { key: 'ArrowDown' });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       input.trigger('keydown', { key: 'Enter' });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const token = wrapper.findComponent(GlFilteredSearchToken);
       expect(token.exists()).toBe(true);
@@ -488,9 +522,9 @@ describe('Filtered search integration tests', () => {
 
       const input = findInput();
       input.trigger('keydown', { key: 'ArrowDown' });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       input.trigger('keydown', { key: 'Enter' });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.props('value')).toEqual(initialValue);
     });
@@ -500,11 +534,11 @@ describe('Filtered search integration tests', () => {
       input.trigger('keydown', { key: 'ArrowDown' });
       const alignSuggestionsSpy = jest.spyOn(wrapper.vm, 'alignSuggestions');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       input.trigger('keydown', { key: 'Enter' });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(alignSuggestionsSpy).toHaveBeenCalled();
     });
@@ -514,7 +548,7 @@ describe('Filtered search integration tests', () => {
     mountComponent({ value: ['token', { type: 'unique', value: { data: 'something' } }] });
     activate(0);
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     const suggestions = wrapper.findComponent(GlFilteredSearchSuggestionList);
     expect(suggestions.exists()).toBe(true);
@@ -525,27 +559,27 @@ describe('Filtered search integration tests', () => {
     mountComponent({ value: ['one two'] });
     activate(0);
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     activate(1);
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.findAllComponents(GlFilteredSearchTerm).at(1).find('input').exists()).toBe(true);
   });
 
   it('correctly switches focus on token destroy', async () => {
     mountComponent({ value: ['one t three'] });
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     activate(1);
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     // Unfortunately backspace is not working in JSDOM
     wrapper.findAllComponents(GlFilteredSearchTerm).at(1).vm.$emit('destroy');
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(document.activeElement).toBe(
       wrapper.findComponent(GlFilteredSearchTerm).find('input').element
@@ -554,14 +588,14 @@ describe('Filtered search integration tests', () => {
 
   it('clicking clear button clears component input', async () => {
     mountComponent({ value: ['one two three'] });
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     wrapper
       .findAll('button')
       .filter((b) => b.attributes('name') === 'clear')
       .trigger('click');
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.findAllComponents(GlFilteredSearchTerm)).toHaveLength(1);
   });

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

@@ -85,6 +85,16 @@ export default {
       required: false,
       default: false,
     },
+    searchButtonAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    searchInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -253,6 +263,7 @@ export default {
     :value="tokens"
     :history-items="historyItems"
     :clearable="hasValue"
+    :search-button-attributes="searchButtonAttributes"
     data-testid="filtered-search-input"
     @submit="submit"
     @input="applyNewValue"
@@ -278,6 +289,8 @@ export default {
             :index="idx"
             :placeholder="termPlaceholder"
             :show-friendly-text="showFriendlyText"
+            :search-input-attributes="searchInputAttributes"
+            :is-last-token="isLastToken(idx)"
             class="gl-filtered-search-item"
             :class="{
               'gl-filtered-search-last-item': isLastToken(idx),

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

@@ -13,6 +13,12 @@ export default {
     value: {
       additionalInfo: 'Current term value',
     },
+    searchInputAttributes: {
+      additionalInfo: 'HTML attributes to add to the search input',
+    },
+    isLastToken: {
+      additionalInfo: 'If this is the last token',
+    },
   },
   events: [
     { event: 'activate', description: 'Emitted when this term token is clicked' },

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

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import FilteredSearchTerm from './filtered_search_term.vue';
@@ -11,6 +12,8 @@ const availableTokens = [
 describe('Filtered search term', () => {
   let wrapper;
 
+  const searchInputAttributes = { 'data-qa-selector': 'foo-bar' };
+
   const defaultProps = {
     availableTokens: [],
   };
@@ -18,6 +21,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'],
   };
 
   const createComponent = (props) => {
@@ -29,6 +33,8 @@ describe('Filtered search term', () => {
     });
   };
 
+  const findTokenSegmentComponent = () => wrapper.findComponent(segmentStub);
+
   it('renders value in inactive mode', () => {
     createComponent({ value: { data: 'test-value' } });
     expect(wrapper.html()).toMatchSnapshot();
@@ -44,11 +50,12 @@ describe('Filtered search term', () => {
     expect(wrapper.find('input').attributes('placeholder')).toBe('placeholder-stub');
   });
 
-  it('filters suggestions by input', () => {
+  it('filters suggestions by input', async () => {
     createComponent({ availableTokens, active: true, value: { data: 'test1' } });
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.findAllComponents(GlFilteredSearchSuggestion)).toHaveLength(2);
-    });
+
+    await nextTick();
+
+    expect(wrapper.findAllComponents(GlFilteredSearchSuggestion)).toHaveLength(2);
   });
 
   it.each`
@@ -61,14 +68,40 @@ describe('Filtered search term', () => {
     ${'backspace'}  | ${'destroy'}
   `(
     'emits $emittedEvent when token segment emits $originalEvent',
-    ({ originalEvent, emittedEvent }) => {
+    async ({ originalEvent, emittedEvent }) => {
       createComponent({ active: true, value: { data: 'something' } });
 
-      wrapper.findComponent(segmentStub).vm.$emit(originalEvent);
+      findTokenSegmentComponent().vm.$emit(originalEvent);
+
+      await nextTick();
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted()[emittedEvent]).toHaveLength(1);
-      });
+      expect(wrapper.emitted()[emittedEvent]).toHaveLength(1);
     }
   );
+
+  it('passes `searchInputAttributes` and `isLastToken` prop to `GlFilteredSearchTokenSegment`', () => {
+    const isLastToken = true;
+
+    createComponent({
+      value: { data: 'something' },
+      searchInputAttributes,
+      isLastToken,
+    });
+
+    expect(findTokenSegmentComponent().props()).toEqual({
+      searchInputAttributes,
+      isLastToken,
+    });
+  });
+
+  it('adds `searchInputAttributes` prop to search term input', () => {
+    createComponent({
+      placeholder: 'placeholder-stub',
+      searchInputAttributes,
+    });
+
+    expect(wrapper.find('input').attributes('data-qa-selector')).toBe(
+      searchInputAttributes['data-qa-selector']
+    );
+  });
 });

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

@@ -28,6 +28,16 @@ export default {
       required: false,
       default: '',
     },
+    searchInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    isLastToken: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     suggestedTokens() {
@@ -54,6 +64,8 @@ export default {
       class="gl-filtered-search-term-token"
       :active="active"
       :class="{ 'gl-w-full': placeholder }"
+      :search-input-attributes="searchInputAttributes"
+      :is-last-token="isLastToken"
       @activate="$emit('activate')"
       @deactivate="$emit('deactivate')"
       @complete="$emit('replace', { type: $event })"
@@ -74,6 +86,7 @@ export default {
       <template #view>
         <input
           v-if="placeholder"
+          v-bind="searchInputAttributes"
           class="gl-filtered-search-term-input"
           :placeholder="placeholder"
           :aria-label="placeholder"

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

@@ -19,6 +19,12 @@ export default {
     value: {
       additionalInfo: 'Current term value',
     },
+    searchInputAttributes: {
+      additionalInfo: 'HTML attributes to add to the search input',
+    },
+    isLastToken: {
+      additionalInfo: 'If this is the last token',
+    },
   },
   events: [
     { event: 'activate', description: 'Emitted on mousedown event on the main component' },

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

@@ -6,6 +6,8 @@ const OPTIONS = [{ value: '=' }, { value: '!=' }];
 describe('Filtered search token segment', () => {
   let wrapper;
 
+  const searchInputAttributes = { 'data-qa-selector': 'foo-bar' };
+
   beforeAll(() => {
     if (!HTMLElement.prototype.scrollIntoView) {
       HTMLElement.prototype.scrollIntoView = jest.fn();
@@ -251,4 +253,55 @@ describe('Filtered search token segment', () => {
       });
     });
   });
+
+  describe('when input is active', () => {
+    it('adds `searchInputAttributes` prop to search token segment input', () => {
+      createComponent({ active: true, value: 'something', searchInputAttributes });
+
+      expect(wrapper.find('input').attributes('data-qa-selector')).toBe(
+        searchInputAttributes['data-qa-selector']
+      );
+    });
+
+    it('does not add `searchInputAttributes` prop to search token segment', () => {
+      createComponent({
+        active: true,
+        value: 'something',
+        searchInputAttributes,
+        isLastToken: true,
+      });
+
+      expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
+    });
+  });
+
+  describe('when input is not active', () => {
+    describe('when `isLastToken` prop is `true`', () => {
+      it('adds `searchInputAttributes` prop to search token segment', () => {
+        createComponent({
+          active: false,
+          value: 'something',
+          searchInputAttributes,
+          isLastToken: true,
+        });
+
+        expect(wrapper.attributes('data-qa-selector')).toBe(
+          searchInputAttributes['data-qa-selector']
+        );
+      });
+    });
+
+    describe('when `isLastToken` prop is `false`', () => {
+      it('does not add `searchInputAttributes` prop to search token segment', () => {
+        createComponent({
+          active: false,
+          value: 'something',
+          searchInputAttributes,
+          isLastToken: false,
+        });
+
+        expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
+      });
+    });
+  });
 });

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

@@ -49,6 +49,16 @@ export default {
       required: true,
       validator: () => true,
     },
+    searchInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    isLastToken: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   data() {
@@ -244,6 +254,7 @@ export default {
 
 <template>
   <div
+    v-bind="isLastToken && !active && searchInputAttributes"
     class="gl-filtered-search-token-segment"
     :class="{ 'gl-filtered-search-token-segment-active': active }"
     data-testid="filtered-search-token-segment"
@@ -252,6 +263,7 @@ export default {
     <template v-if="active">
       <input
         ref="input"
+        v-bind="searchInputAttributes"
         v-model="inputValue"
         class="gl-filtered-search-token-segment-input"
         :aria-label="label"

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

@@ -52,6 +52,9 @@ export default {
       additionalInfo:
         'Container for tooltip. Valid values: DOM node, selector string or `false` for default',
     },
+    searchButtonAttributes: {
+      additionalInfo: 'HTML attributes to add to the search button',
+    },
   },
   events: [
     {

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

@@ -25,6 +25,7 @@ describe('search box by click component', () => {
   };
 
   const findClearIcon = () => wrapper.findComponent(ClearIcon);
+  const findSearchButton = () => wrapper.find('[data-testid="search-button"]');
 
   it('emits input event when input changes', async () => {
     createComponent({ value: 'somevalue' });
@@ -125,8 +126,8 @@ describe('search box by click component', () => {
     });
 
     it('displays disabled search button', () => {
-      expect(wrapper.findComponent({ ref: 'searchButton' }).exists()).toBe(true);
-      expect(wrapper.findComponent({ ref: 'searchButton' }).attributes('disabled')).toBe('true');
+      expect(findSearchButton().exists()).toBe(true);
+      expect(findSearchButton().attributes('disabled')).toBe('true');
     });
 
     it('does not render clear icon even with value', () => {
@@ -145,9 +146,19 @@ describe('search box by click component', () => {
 
   it('emits submit event when search button is pressed', async () => {
     createComponent({ value: 'some-input' });
-    wrapper.findComponent({ ref: 'searchButton' }).vm.$emit('click');
+    findSearchButton().vm.$emit('click');
 
     await wrapper.vm.$nextTick();
     expect(wrapper.emitted().submit[0]).toEqual(['some-input']);
   });
+
+  it('adds `searchButtonAttributes` prop to search button', () => {
+    const searchButtonAttributes = { 'data-qa-selector': 'foo-bar' };
+
+    createComponent({ searchButtonAttributes });
+
+    expect(findSearchButton().attributes('data-qa-selector')).toBe(
+      searchButtonAttributes['data-qa-selector']
+    );
+  });
 });

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

@@ -84,6 +84,11 @@ export default {
       validator: (value) =>
         value === false || typeof value === 'string' || value instanceof HTMLElement,
     },
+    searchButtonAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -216,11 +221,13 @@ export default {
     />
     <template #append class="gl-search-box-by-click-input-group-control">
       <gl-button
+        v-bind="searchButtonAttributes"
         ref="searchButton"
         class="gl-search-box-by-click-search-button"
         icon="search"
         :disabled="disabled"
         aria-label="Search"
+        data-testid="search-button"
         @click="search(currentValue)"
       />
     </template>