@gitlab/ui 74.4.0 → 74.6.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [74.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v74.5.0...v74.6.0) (2024-02-14)
+
+
+### Features
+
+* **GlFormFields:** Add prop for server field validations ([6c23b37](https://gitlab.com/gitlab-org/gitlab-ui/commit/6c23b37773d0944953d9068de2bcec00a0e74a8f))
+
+# [74.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v74.4.0...v74.5.0) (2024-02-12)
+
+
+### Bug Fixes
+
+* **DuoChat:** Move global error to header ([7d026ef](https://gitlab.com/gitlab-org/gitlab-ui/commit/7d026effca6cf9fb9a352e09784da401936285c5))
+
+
+### Features
+
+* **DuoChat:** Remove unused hero header ([30ab50c](https://gitlab.com/gitlab-org/gitlab-ui/commit/30ab50c30e72f10cca8600d21b5f71238a4dd2c4))
+
 # [74.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v74.3.1...v74.4.0) (2024-02-09)
 
 

package/dist/components/base/form/form_fields/form_fields.js

@@ -50,6 +50,16 @@ var script = {
     formId: {
       type: String,
       required: true
+    },
+    /**
+     * Validation errors from the server. Generally passed to the component after making an API call.
+     */
+    serverValidations: {
+      type: Object,
+      required: false,
+      default() {
+        return {};
+      }
     }
   },
   data() {
@@ -64,7 +74,7 @@ var script = {
     },
     fieldValidationProps() {
       return mapValues(this.fields, (_, fieldName) => {
-        const invalidFeedback = this.fieldValidations[fieldName] || '';
+        const invalidFeedback = this.serverValidations[fieldName] || this.fieldValidations[fieldName] || '';
         return {
           invalidFeedback,
           state: invalidFeedback ? false : null

package/dist/components/experimental/duo/chat/duo_chat.js

@@ -343,11 +343,11 @@ 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 (!_vm.isHidden)?_c('aside',{ref:"drawer",staticClass:"markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"},on:{"scroll":_vm.handleScrollingTrottled}},[(_vm.showHeader)?_c('header',{staticClass:"gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0",attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-font-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_c('gl-experiment-badge',{attrs:{"help-page-url":_vm.badgeHelpPageUrl,"type":_vm.badgeType,"container-id":"chat-component"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-p-0! gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":_vm.hideChat}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full",attrs:{"dismissible":false,"variant":"tip","show-icon":false,"role":"alert","data-testid":"chat-legal-warning"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_GENERATED_BY_AI))]),_vm._v(" "),_vm._t("subheader")],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body gl-display-flex gl-flex-direction-column"},[_vm._t("hero"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"gl-mb-0 gl-pl-9!",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e(),_vm._v(" "),_c('section',{staticClass:"duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"},[_c('transition-group',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end",class:[
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.isHidden)?_c('aside',{ref:"drawer",staticClass:"markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"},on:{"scroll":_vm.handleScrollingTrottled}},[(_vm.showHeader)?_c('header',{staticClass:"gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0",attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-font-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_c('gl-experiment-badge',{attrs:{"help-page-url":_vm.badgeHelpPageUrl,"type":_vm.badgeType,"container-id":"chat-component"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-p-0! gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":_vm.hideChat}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full",attrs:{"dismissible":false,"variant":"tip","show-icon":false,"role":"alert","data-testid":"chat-legal-warning"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_GENERATED_BY_AI))]),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"gl-pl-9!",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e()],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body gl-display-flex gl-flex-direction-column"},[_c('section',{staticClass:"duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"},[_c('transition-group',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end",class:[
           {
             'gl-h-full': !_vm.hasMessages,
             'gl-h-auto': _vm.hasMessages,
-          } ],attrs:{"tag":"div","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"messages":conversation,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state",staticClass:"gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto"},[_c('gl-empty-state',{staticClass:"gl-align-self-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.emptyStateTitle,"description":_vm.emptyStateDescription}})],1),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e()],2),_vm._v(" "),_c('transition',{attrs:{"name":"loader"}},[(_vm.isLoading)?_c('gl-duo-chat-loader',{staticClass:"gl-px-0!",attrs:{"tool-name":_vm.toolName}}):_vm._e()],1),_vm._v(" "),_c('div',{ref:"anchor",staticClass:"scroll-anchor"})],1)],2),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'gl-drawer-body-scrim-on-footer': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{staticClass:"gl-absolute! gl-bottom-2 gl-right-2 gl-rounded-base!",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL,"disabled":_vm.isLoading}})]},proxy:true}],null,false,2232229068)},[_c('div',{staticClass:"duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands gl-absolute! gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md",attrs:{"body-class":"gl-p-2!"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-display-flex gl-justify-content-space-between"},[_c('span',{staticClass:"gl-display-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-text-gray-500 gl-font-style-italic gl-text-right gl-pl-3"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!",class:{ 'gl-text-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"disabled":_vm.isLoading,"autofocus":""},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)]),_vm._v(" "),_c('gl-form-text',{staticClass:"gl-text-gray-400 gl-line-height-20 gl-mt-3",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER))])],1)],1):_vm._e()]):_vm._e()};
+          } ],attrs:{"tag":"div","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"messages":conversation,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state",staticClass:"gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto"},[_c('gl-empty-state',{staticClass:"gl-align-self-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.emptyStateTitle,"description":_vm.emptyStateDescription}})],1),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e()],2),_vm._v(" "),_c('transition',{attrs:{"name":"loader"}},[(_vm.isLoading)?_c('gl-duo-chat-loader',{staticClass:"gl-px-0!",attrs:{"tool-name":_vm.toolName}}):_vm._e()],1),_vm._v(" "),_c('div',{ref:"anchor",staticClass:"scroll-anchor"})],1)]),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'gl-drawer-body-scrim-on-footer': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{staticClass:"gl-absolute! gl-bottom-2 gl-right-2 gl-rounded-base!",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL,"disabled":_vm.isLoading}})]},proxy:true}],null,false,2232229068)},[_c('div',{staticClass:"duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands gl-absolute! gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md",attrs:{"body-class":"gl-p-2!"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-display-flex gl-justify-content-space-between"},[_c('span',{staticClass:"gl-display-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-text-gray-500 gl-font-style-italic gl-text-right gl-pl-3"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!",class:{ 'gl-text-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"disabled":_vm.isLoading,"autofocus":""},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)]),_vm._v(" "),_c('gl-form-text',{staticClass:"gl-text-gray-400 gl-line-height-20 gl-mt-3",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER))])],1)],1):_vm._e()]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Feb 2024 13:52:54 GMT
+ * Generated on Wed, 14 Feb 2024 07:45:43 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Feb 2024 13:52:54 GMT
+ * Generated on Wed, 14 Feb 2024 07:45:43 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Feb 2024 13:52:54 GMT
+ * Generated on Wed, 14 Feb 2024 07:45:43 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Feb 2024 13:52:54 GMT
+ * Generated on Wed, 14 Feb 2024 07:45:43 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 09 Feb 2024 13:52:54 GMT
+// Generated on Wed, 14 Feb 2024 07:45:43 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 09 Feb 2024 13:52:54 GMT
+// Generated on Wed, 14 Feb 2024 07:45:43 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/dist/utils/play_utils.js

@@ -1,4 +1,4 @@
-import { userEvent } from '@storybook/testing-library';
+import { userEvent } from '@storybook/test';
 
 const triggerBlurEvent = async () => userEvent.pointer([{
   keys: '[MouseLeft]',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "74.4.0",
+  "version": "74.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -61,7 +61,7 @@
     "markdownlint": "markdownlint '**/*.md' --ignore node_modules --ignore CHANGELOG.md",
     "markdownlint:fix": "yarn markdownlint --fix",
     "lint": "run-p prettier eslint stylelint markdownlint",
-    "lint:fix": "run-s prettier:fix eslint:fix stylelint:fix markdownlint:fix",
+    "lint:fix": "run-s eslint:fix prettier:fix stylelint:fix markdownlint:fix",
     "generate:component": "plop",
     "translations:collect": "make translations.json",
     "tailwind-config-viewer": "tailwind-config-viewer -o"
@@ -101,26 +101,24 @@
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.4.0",
     "@gitlab/fonts": "^1.3.0",
-    "@gitlab/stylelint-config": "5.0.1",
+    "@gitlab/stylelint-config": "6.1.0",
     "@gitlab/svgs": "3.83.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.6.12",
-    "@storybook/addon-docs": "7.6.12",
-    "@storybook/addon-essentials": "7.6.12",
-    "@storybook/addon-interactions": "7.6.12",
-    "@storybook/addon-viewport": "7.6.12",
-    "@storybook/builder-webpack5": "7.6.12",
-    "@storybook/jest": "0.2.3",
+    "@storybook/addon-a11y": "7.6.14",
+    "@storybook/addon-docs": "7.6.14",
+    "@storybook/addon-essentials": "7.6.14",
+    "@storybook/addon-interactions": "7.6.14",
+    "@storybook/addon-viewport": "7.6.14",
+    "@storybook/builder-webpack5": "7.6.14",
+    "@storybook/test": "7.6.14",
     "@storybook/test-runner": "0.16.0",
-    "@storybook/testing-library": "0.2.2",
-    "@storybook/theming": "7.6.12",
-    "@storybook/vue": "7.6.12",
-    "@storybook/vue-webpack5": "7.6.12",
-    "@storybook/vue3": "7.6.12",
-    "@storybook/vue3-webpack5": "7.6.12",
-    "@types/jest": "^29.5.11",
+    "@storybook/theming": "7.6.14",
+    "@storybook/vue": "7.6.14",
+    "@storybook/vue-webpack5": "7.6.14",
+    "@storybook/vue3": "7.6.14",
+    "@storybook/vue3-webpack5": "7.6.14",
     "@types/jest-image-snapshot": "^6.4.0",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
@@ -172,7 +170,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.6.12",
+    "storybook": "7.6.14",
     "storybook-dark-mode": "3.0.3",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

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

@@ -1,6 +1,5 @@
 import last from 'lodash/last';
-import { userEvent, within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import GlIcon from '../icon/icon.vue';
 import GlToken from '../token/token.vue';

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

@@ -1,4 +1,4 @@
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import { provide } from './common_story_options';

package/src/components/base/form/form_combobox/form_combobox.stories.js

@@ -1,5 +1,4 @@
-import { userEvent, within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import { makeContainer } from '../../../../utils/story_decorators/container';
 import { stringTokenList, labelText, objectTokenList, actionsList } from './constants';
 import readme from './form_combobox.md';

package/src/components/base/form/form_fields/form_fields.spec.js

@@ -345,6 +345,22 @@ describe('GlFormFields', () => {
         });
       }
     );
+
+    describe('when there is a server validation message', () => {
+      beforeEach(async () => {
+        await submitForm();
+
+        wrapper.setProps({
+          serverValidations: { username: 'Username has already been taken.' },
+        });
+      });
+
+      it('renders error message', () => {
+        expect(
+          findFormGroupFromLabel(TEST_FIELDS.username.label).attributes('invalid-feedback')
+        ).toBe('Username has already been taken.');
+      });
+    });
   });
 
   describe('with scoped slot', () => {

package/src/components/base/form/form_fields/form_fields.stories.js

@@ -3,6 +3,7 @@ import omit from 'lodash/omit';
 import GlModal from '../../modal/modal.vue';
 import GlButton from '../../button/button.vue';
 import GlListbox from '../../new_dropdowns/listbox/listbox.vue';
+import { setStoryTimeout } from '../../../../utils/test_utils';
 import GlFormFields from './form_fields.vue';
 import readme from './form_fields.md';
 import { required } from './validators';
@@ -49,6 +50,8 @@ const Template = () => ({
       },
       formValues: {},
       testFormId: uniqueId('form_fields_story_'),
+      serverValidations: {},
+      loading: false,
     };
   },
   computed: {
@@ -61,7 +64,27 @@ const Template = () => ({
     },
   },
   methods: {
-    onSubmit() {
+    onInputField({ name }) {
+      this.$delete(this.serverValidations, name);
+    },
+    async onSubmit() {
+      this.loading = true;
+
+      // Simulate waiting for API request to resolve
+      await new Promise((resolve) => {
+        setStoryTimeout(resolve, 1000);
+      });
+
+      this.loading = false;
+
+      // Manually checking field and validating for this example.
+      // In practice this error message would come from the API response.
+      if (this.formValues.USERNAME === 'FOO') {
+        this.$set(this.serverValidations, 'USERNAME', 'Username has already been taken.');
+
+        return;
+      }
+
       this.$refs.modal.show();
     },
   },
@@ -69,7 +92,7 @@ const Template = () => ({
     <div>
       <h3>Fields</h3>
       <form :id="testFormId" @submit.prevent>
-        <gl-form-fields :fields="fields" v-model="formValues" :form-id="testFormId" @submit="onSubmit">
+        <gl-form-fields :fields="fields" v-model="formValues" :form-id="testFormId" :server-validations="serverValidations" @input-field="onInputField" @submit="onSubmit">
           <template #input(custom)="{ id, value, input, blur }">
             <button :id="id" @click="input(value + 1)" @blur="blur" type="button">{{value}}</button>
           </template>
@@ -77,7 +100,7 @@ const Template = () => ({
             <gl-listbox :id="id" :items="$options.ITEMS" :selected="value" @select="input" @hidden="blur" />
           </template>
         </gl-form-fields>
-        <gl-button type="submit" category="primary">Submit</gl-button>
+        <gl-button type="submit" category="primary" :loading="loading">Submit</gl-button>
       </form>
       <gl-modal ref="modal" modal-id="submission-modal" title="Form submission"><pre>{{ valuesJSON }}</pre></gl-modal>
     </div>

package/src/components/base/form/form_fields/form_fields.vue

@@ -51,6 +51,16 @@ export default {
       type: String,
       required: true,
     },
+    /**
+     * Validation errors from the server. Generally passed to the component after making an API call.
+     */
+    serverValidations: {
+      type: Object,
+      required: false,
+      default() {
+        return {};
+      },
+    },
   },
   data() {
     return {
@@ -64,7 +74,8 @@ export default {
     },
     fieldValidationProps() {
       return mapValues(this.fields, (_, fieldName) => {
-        const invalidFeedback = this.fieldValidations[fieldName] || '';
+        const invalidFeedback =
+          this.serverValidations[fieldName] || this.fieldValidations[fieldName] || '';
 
         return {
           invalidFeedback,

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

@@ -1,5 +1,4 @@
-import { userEvent, within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import { makeContainer } from '../../../utils/story_decorators/container';
 import GlSorting from './sorting.vue';
 import readme from './sorting.md';

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

@@ -1,5 +1,4 @@
-import { userEvent, within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import Vue from 'vue';
 import GlButton from '../button/button.vue';
 import GlToast from './toast';

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

@@ -1,5 +1,4 @@
-import { userEvent, within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import readme from './token_selector.md';
 import GlTokenSelector from './token_selector.vue';
 

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

@@ -1,5 +1,4 @@
-import { userEvent, within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../button/button.vue';
 import GlTooltip from './tooltip.vue';

package/src/components/experimental/duo/chat/duo_chat.spec.js

@@ -191,8 +191,6 @@ describe('GlDuoChat', () => {
 
       it.each`
         slot           | content        | isChatAvailable
-        ${'hero'}      | ${slotContent} | ${true}
-        ${'hero'}      | ${slotContent} | ${false}
         ${'subheader'} | ${slotContent} | ${false}
         ${'subheader'} | ${slotContent} | ${true}
       `(

package/src/components/experimental/duo/chat/duo_chat.stories.js

@@ -215,15 +215,6 @@ export const Slots = (args, { argTypes }) => ({
         :empty-state-title="emptyStateTitle"
         :empty-state-description="emptyStateDescription"
         :chat-prompt-placeholder="chatPromptPlaceholder">
-
-        <template #hero>
-<pre class="code-block rounded code highlight gl-border-b gl-rounded-0! gl-mb-0 gl-overflow-y-auto solarized-light" style="max-height: 20rem; overflow-y: auto;">
-if (firstUserPromptIndex >= 0 && lastUserPromptIndex > firstUserPromptIndex) {
-  messages.splice(firstUserPromptIndex, 1);
-  return truncateChatPrompt(messages);
-}
-</pre>
-        </template>
         <template #subheader>
           <gl-alert
             :dismissible="false"

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -401,24 +401,22 @@ export default {
         @slot Subheader to be rendered right after the title. It is sticky and stays on top of the chat no matter the number of messages.
       -->
       <slot name="subheader"></slot>
-    </header>
-
-    <div class="gl-drawer-body gl-display-flex gl-flex-direction-column">
-      <!-- @slot 'Hero' information to be rendered at the top of the chat before any message. It gets pushed away from the view by incomming messages
-      -->
-      <slot name="hero"></slot>
 
+      <!-- Ensure that the global error is not scrolled away -->
       <gl-alert
         v-if="error"
         key="error"
         :dismissible="false"
         variant="danger"
-        class="gl-mb-0 gl-pl-9!"
+        class="gl-pl-9!"
         role="alert"
         data-testid="chat-error"
-        ><span v-safe-html="error"></span
-      ></gl-alert>
+      >
+        <span v-safe-html="error"></span>
+      </gl-alert>
+    </header>
 
+    <div class="gl-drawer-body gl-display-flex gl-flex-direction-column">
       <section
         class="duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"
       >

package/src/utils/play_utils.js

@@ -1,4 +1,4 @@
-import { userEvent } from '@storybook/testing-library';
+import { userEvent } from '@storybook/test';
 
 export const triggerBlurEvent = async () =>
   userEvent.pointer([