@gitlab/ui 66.16.0 → 66.19.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [66.19.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.18.0...v66.19.0) (2023-09-29)
+
+
+### Features
+
+* **GlDuoUserFeedback:** Added the component ([f9a6f93](https://gitlab.com/gitlab-org/gitlab-ui/commit/f9a6f93fe0b46ba5638d9ad711e062afb7898636))
+
+# [66.18.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.17.0...v66.18.0) (2023-09-27)
+
+
+### Features
+
+* **GlEmptyState:** Add line length limit ([7e03303](https://gitlab.com/gitlab-org/gitlab-ui/commit/7e03303da94d39c062c61fa6882cc94f1da928c4))
+
+# [66.17.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.16.0...v66.17.0) (2023-09-27)
+
+
+### Features
+
+* **Modal:** Use current styles and h2 for heading ([21abaf1](https://gitlab.com/gitlab-org/gitlab-ui/commit/21abaf1c5c64df650feb3702c14f3ad2f0022a65))
+
 # [66.16.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.15.0...v66.16.0) (2023-09-27)
 
 

package/dist/components/base/modal/modal.js

@@ -169,7 +169,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('b-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"aria-label":_vm.ariaLabel || _vm.title,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled,"change":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"modal-header",fn:function(){return [_vm._t("modal-header",function(){return [_c('h4',{staticClass:"modal-title"},[_vm._t("modal-title",function(){return [_vm._v(_vm._s(_vm.title))]})],2)]}),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true},(_vm.shouldRenderModalOk)?{key:"modal-ok",fn:function(){return [_vm._t("modal-ok")]},proxy:true}:null,(_vm.shouldRenderModalCancel)?{key:"modal-cancel",fn:function(){return [_vm._t("modal-cancel")]},proxy:true}:null,(_vm.shouldRenderModalFooter)?{key:"modal-footer",fn:function(){return [_vm._t("modal-footer",function(){return [(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n        "+_vm._s(_vm.actionCancel.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-secondary",on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n        "+_vm._s(_vm.actionSecondary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n        "+_vm._s(_vm.actionPrimary.text)+"\n      ")]):_vm._e()]})]},proxy:true}:null],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"aria-label":_vm.ariaLabel || _vm.title,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled,"change":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"modal-header",fn:function(){return [_vm._t("modal-header",function(){return [_c('h2',{staticClass:"modal-title"},[_vm._t("modal-title",function(){return [_vm._v(_vm._s(_vm.title))]})],2)]}),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true},(_vm.shouldRenderModalOk)?{key:"modal-ok",fn:function(){return [_vm._t("modal-ok")]},proxy:true}:null,(_vm.shouldRenderModalCancel)?{key:"modal-cancel",fn:function(){return [_vm._t("modal-cancel")]},proxy:true}:null,(_vm.shouldRenderModalFooter)?{key:"modal-footer",fn:function(){return [_vm._t("modal-footer",function(){return [(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n        "+_vm._s(_vm.actionCancel.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-secondary",on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n        "+_vm._s(_vm.actionSecondary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n        "+_vm._s(_vm.actionPrimary.text)+"\n      ")]):_vm._e()]})]},proxy:true}:null],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/experimental/duo/user_feedback/user_feedback.js

@@ -0,0 +1,94 @@
+import { GlButton } from '../../../../index';
+import FeedbackModal from './user_feedback_modal';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  FEEDBACK_LINK_TEXT: 'Give feedback to improve this answer.',
+  FEEDBACK_THANKS: 'Thank you for your feedback.'
+};
+var script = {
+  name: 'GlDuoUserFeedback',
+  components: {
+    GlButton,
+    FeedbackModal
+  },
+  props: {
+    /**
+     * The text to be displayed as the feedback link/button.
+     */
+    feedbackLinkText: {
+      type: String,
+      required: false,
+      default: i18n.FEEDBACK_LINK_TEXT
+    },
+    /**
+     * The URL of a page to provide more explanations on the experiment. If provided, clicking
+     * the feedback link will open a new tab with the URL instead of showing the feedback modal.
+     */
+    feedbackLinkUrl: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      feedbackReceived: false
+    };
+  },
+  computed: {
+    shouldRenderModal() {
+      return !this.feedbackReceived && !this.feedbackLinkUrl;
+    }
+  },
+  methods: {
+    notify(event) {
+      /**
+       * Notify listeners about the feedback form submission.
+       * @param {*} event An event, containing the feedback choices and the extended feedback text.
+       */
+      this.$emit('feedback', event);
+      this.feedbackReceived = true;
+    }
+  },
+  i18n
+};
+
+/* 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-pt-4"},[_c('div',[(!_vm.feedbackReceived)?_c('gl-button',{attrs:{"variant":"link","target":"_blank","href":_vm.feedbackLinkUrl},on:{"click":function($event){_vm.shouldRenderModal && _vm.$refs.feedbackModal.show();}}},[_vm._v(_vm._s(_vm.feedbackLinkText))]):_c('span',{staticClass:"gl-text-gray-500"},[_vm._v("\n      "+_vm._s(_vm.$options.i18n.FEEDBACK_THANKS)+"\n    ")])],1),_vm._v(" "),(_vm.shouldRenderModal)?_c('feedback-modal',{ref:"feedbackModal",on:{"feedback-submitted":_vm.notify}}):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+export { i18n };

package/dist/components/experimental/duo/user_feedback/user_feedback_modal.js

@@ -0,0 +1,121 @@
+import { GlModal, GlFormCheckboxGroup, GlFormGroup, GlFormTextarea } from '../../../../index';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  MODAL_TITLE: 'Give feedback on AI content',
+  MODAL_DESCRIPTION: 'To help improve the quality of the content, send your feedback to GitLab team members.',
+  MODAL_OPTIONS_LABEL: 'How was the AI content?',
+  MODAL_MORE_LABEL: 'More information',
+  MODAL_MORE_PLACEHOLDER: 'How could the content be improved?',
+  MODAL_FEEDBACK_OPTIONS: {
+    helpful: 'Helpful',
+    unhelpful: 'Unhelpful or irrelevant',
+    incorrect: 'Factually incorrect',
+    long: 'Too long',
+    abuse: 'Abusive or offensive',
+    other: 'Something else'
+  },
+  MODAL_ACTIONS: {
+    submit: 'Submit',
+    cancel: 'Cancel'
+  }
+};
+const feedbackOptions = [{
+  text: i18n.MODAL_FEEDBACK_OPTIONS.helpful,
+  value: 'helpful'
+}, {
+  text: i18n.MODAL_FEEDBACK_OPTIONS.unhelpful,
+  value: 'unhelpful'
+}, {
+  text: i18n.MODAL_FEEDBACK_OPTIONS.incorrect,
+  value: 'incorrect'
+}, {
+  text: i18n.MODAL_FEEDBACK_OPTIONS.long,
+  value: 'long'
+}, {
+  text: i18n.MODAL_FEEDBACK_OPTIONS.abuse,
+  value: 'abuse'
+}, {
+  text: i18n.MODAL_FEEDBACK_OPTIONS.other,
+  value: 'other'
+}];
+var script = {
+  name: 'DuoChatFeedbackModal',
+  components: {
+    GlModal,
+    GlFormCheckboxGroup,
+    GlFormGroup,
+    GlFormTextarea
+  },
+  data() {
+    return {
+      selectedFeedbackOptions: [],
+      extendedFeedback: ''
+    };
+  },
+  methods: {
+    show() {
+      this.$refs.feedbackModal.show();
+    },
+    onFeedbackSubmit() {
+      if (this.selectedFeedbackOptions.length) {
+        this.$emit('feedback-submitted', {
+          feedbackChoices: this.selectedFeedbackOptions,
+          extendedTextFeedback: this.extendedFeedback
+        });
+      }
+    },
+    onFeedbackCanceled() {
+      this.$refs.feedbackModal.hide();
+    }
+  },
+  actions: {
+    primary: {
+      text: i18n.MODAL_ACTIONS.submit
+    },
+    cancel: {
+      text: i18n.MODAL_ACTIONS.cancel
+    }
+  },
+  feedbackOptions,
+  i18n
+};
+
+/* 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-modal',{ref:"feedbackModal",attrs:{"modal-id":"feedbackModal","title":_vm.$options.i18n.MODAL_TITLE,"action-primary":_vm.$options.actions.primary,"action-cancel":_vm.$options.actions.cancel,"visible":false,"size":"sm"},on:{"primary":_vm.onFeedbackSubmit,"canceled":_vm.onFeedbackCanceled}},[_c('p',[_vm._v(_vm._s(_vm.$options.i18n.MODAL_DESCRIPTION))]),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL_OPTIONS_LABEL,"optional":false,"data-testid":"feedback-options"}},[_c('gl-form-checkbox-group',{attrs:{"options":_vm.$options.feedbackOptions},model:{value:(_vm.selectedFeedbackOptions),callback:function ($$v) {_vm.selectedFeedbackOptions=$$v;},expression:"selectedFeedbackOptions"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL_MORE_LABEL,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL_MORE_PLACEHOLDER},model:{value:(_vm.extendedFeedback),callback:function ($$v) {_vm.extendedFeedback=$$v;},expression:"extendedFeedback"}})],1)],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+export { feedbackOptions, i18n };

package/dist/components/regions/empty_state/empty_state.js

@@ -107,7 +107,7 @@ var script = {
       return Boolean(this.secondaryButtonLink && this.secondaryButtonText);
     },
     contentClasses() {
-      return [this.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-88 gl-m-auto', this.contentClass];
+      return [this.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-m-auto gl-p-5', this.contentClass];
     }
   }
 };
@@ -119,7 +119,7 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:"gl-display-flex",class:{
     'gl-empty-state gl-text-center gl-flex-direction-column': !_vm.compact,
     'gl-flex-direction-row': _vm.compact,
-  }},[_c('div',{class:{ 'gl-display-none gl-sm-display-block gl-px-4': _vm.compact, 'gl-max-w-full': !_vm.compact }},[(_vm.svgPath)?_c('div',[_c('img',{staticClass:"gl-max-w-full",class:{ 'gl-dark-invert-keep-hue': _vm.invertInDarkMode },attrs:{"src":_vm.svgPath,"alt":"","role":"img","height":_vm.height}})]):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.contentClasses,attrs:{"data-testid":"gl-empty-state-content"}},[_c('div',{staticClass:"gl-mx-auto gl-my-0",class:{ 'gl-p-5': !_vm.compact }},[_vm._t("title",function(){return [_c('h1',{staticClass:"gl-font-size-h-display gl-line-height-36 gl-mt-0 gl-mb-0",class:_vm.compact ? 'h5' : 'h4'},[_vm._v("\n          "+_vm._s(_vm.title)+"\n        ")])]}),_vm._v(" "),(_vm.description || _vm.$scopedSlots.description)?_c('p',{ref:"description",staticClass:"gl-mt-4 gl-mb-0"},[_vm._t("description",function(){return [_vm._v("\n          "+_vm._s(_vm.description)+"\n        ")]})],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-wrap gl-mt-5",class:{ 'gl-justify-content-center': !_vm.compact }},[_vm._t("actions",function(){return [(_vm.shouldRenderPrimaryButton)?_c('gl-button',{staticClass:"gl-mb-3",class:_vm.compact ? 'gl-mr-3' : 'gl-mx-2',attrs:{"variant":"confirm","href":_vm.primaryButtonLink}},[_vm._v(_vm._s(_vm.primaryButtonText))]):_vm._e(),_vm._v(" "),(_vm.shouldRenderSecondaryButton)?_c('gl-button',{staticClass:"gl-mb-3 gl-mr-3",class:{ 'gl-mx-2!': !_vm.compact },attrs:{"href":_vm.secondaryButtonLink}},[_vm._v(_vm._s(_vm.secondaryButtonText)+"\n          ")]):_vm._e()]})],2)],2)])])};
+  }},[_c('div',{class:{ 'gl-display-none gl-sm-display-block gl-px-4': _vm.compact, 'gl-max-w-full': !_vm.compact }},[(_vm.svgPath)?_c('img',{staticClass:"gl-max-w-full",class:{ 'gl-dark-invert-keep-hue': _vm.invertInDarkMode },attrs:{"src":_vm.svgPath,"alt":"","role":"img","height":_vm.height}}):_vm._e()]),_vm._v(" "),_c('div',{staticClass:"gl-empty-state-content gl-mx-auto gl-my-0",class:_vm.contentClasses,attrs:{"data-testid":"gl-empty-state-content"}},[_vm._t("title",function(){return [_c('h1',{staticClass:"gl-font-size-h-display gl-line-height-36 gl-mt-0 gl-mb-0",class:_vm.compact ? 'h5' : 'h4'},[_vm._v("\n        "+_vm._s(_vm.title)+"\n      ")])]}),_vm._v(" "),(_vm.description || _vm.$scopedSlots.description)?_c('p',{ref:"description",staticClass:"gl-mt-4 gl-mb-0"},[_vm._t("description",function(){return [_vm._v("\n        "+_vm._s(_vm.description)+"\n      ")]})],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-wrap gl-mt-5",class:{ 'gl-justify-content-center': !_vm.compact }},[_vm._t("actions",function(){return [(_vm.shouldRenderPrimaryButton)?_c('gl-button',{staticClass:"gl-mb-3",class:_vm.compact ? 'gl-mr-3' : 'gl-mx-2',attrs:{"variant":"confirm","href":_vm.primaryButtonLink}},[_vm._v(_vm._s(_vm.primaryButtonText))]):_vm._e(),_vm._v(" "),(_vm.shouldRenderSecondaryButton)?_c('gl-button',{staticClass:"gl-mb-3 gl-mr-3",class:{ 'gl-mx-2!': !_vm.compact },attrs:{"href":_vm.secondaryButtonLink}},[_vm._v(_vm._s(_vm.secondaryButtonText)+"\n        ")]):_vm._e()]})],2)],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */