@gitlab/ui 66.23.0 → 66.24.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [66.24.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.23.1...v66.24.0) (2023-10-05)
+
+
+### Features
+
+* **DuoChatLoader:** added component ([658ca9e](https://gitlab.com/gitlab-org/gitlab-ui/commit/658ca9e4eecf3311f110311f483123271432897d))
+
+## [66.23.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.23.0...v66.23.1) (2023-10-04)
+
+
+### Bug Fixes
+
+* **GlCollapsibleListbox, GlDisclosureDropdown:** Update group border color ([6dc4bf2](https://gitlab.com/gitlab-org/gitlab-ui/commit/6dc4bf25af9fcd85f7de70f3919e5152b0979de0))
+
 # [66.23.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.22.0...v66.23.0) (2023-10-03)
 
 

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js

@@ -5,8 +5,8 @@ import { DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS, DISCLOSURE_DROPDOWN_GROUP_N
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const BORDER_CLASSES = {
-  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.top]: 'gl-border-t gl-pt-2 gl-mt-2',
-  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.bottom]: 'gl-border-b gl-pb-2 gl-mb-2'
+  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.top]: 'gl-border-t gl-border-t-gray-200 gl-pt-2 gl-mt-2',
+  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.bottom]: 'gl-border-b gl-border-b-gray-200 gl-pb-2 gl-mb-2'
 };
 var script = {
   name: DISCLOSURE_DROPDOWN_GROUP_NAME,

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -18,7 +18,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 //
 const ITEM_SELECTOR = '[role="option"]';
 const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-gray-200'];
-const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-1', 'gl-mt-2'];
+const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-border-t-gray-200', 'gl-pt-1', 'gl-mt-2'];
 const SEARCH_INPUT_SELECTOR = '.gl-listbox-search-input';
 var script = {
   name: 'GlCollapsibleListbox',

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

@@ -0,0 +1,100 @@
+import GlSprintf from '../../../../../utilities/sprintf/sprintf';
+import { LOADING_TRANSITION_DURATION } from '../../constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  LOADER_LOADING_MESSAGE: '%{tool} is %{transition} an answer',
+  LOADER_LOADING_TRANSITIONS: ['finding', 'working on', 'generating', 'producing'],
+  GITLAB_DUO: 'GitLab Duo'
+};
+var script = {
+  name: 'GlDuoChatLoader',
+  components: {
+    GlSprintf
+  },
+  i18n,
+  props: {
+    /**
+     * The message containing the name of the current AI tool working on the answer.
+     */
+    toolName: {
+      type: String,
+      required: false,
+      default: i18n.GITLAB_DUO
+    }
+  },
+  data() {
+    return {
+      loadingSequence: 0,
+      timeout: null
+    };
+  },
+  beforeDestroy() {
+    clearTimeout(this.timeout);
+  },
+  mounted() {
+    this.computeTransitionWidth();
+    this.enter();
+  },
+  methods: {
+    computeTransitionWidth() {
+      const container = this.$refs.transition;
+      const active = this.$refs.currentTransition[0]; // There's only one `currentTransition` ref at a time, but refs in v-for loops are always Arrays
+      const {
+        width,
+        height
+      } = active.getBoundingClientRect();
+      container.$el.style.width = `${width}px`;
+      container.$el.style.height = `${height}px`;
+    },
+    enter() {
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        this.loadingSequence = (this.loadingSequence + 1) % this.$options.i18n.LOADER_LOADING_TRANSITIONS.length;
+        this.enter();
+      }, LOADING_TRANSITION_DURATION);
+    },
+    isCurrentTransition(index) {
+      return index === this.loadingSequence;
+    }
+  }
+};
+
+/* 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:"duo-chat-loader"},[_vm._m(0),_vm._v(" "),_c('gl-sprintf',{attrs:{"message":_vm.$options.i18n.LOADER_LOADING_MESSAGE},scopedSlots:_vm._u([{key:"tool",fn:function(){return [_c('strong',{staticClass:"gl-mr-2",attrs:{"data-testid":"tool"}},[_vm._v(_vm._s(_vm.toolName))])]},proxy:true},{key:"transition",fn:function(){return [_c('transition-group',{ref:"transition",staticClass:"transition gl-display-inline-block gl-mx-2",attrs:{"name":"text"},on:{"after-leave":_vm.computeTransitionWidth}},_vm._l((_vm.$options.i18n.LOADER_LOADING_TRANSITIONS),function(message,index){return _c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.isCurrentTransition(index)),expression:"isCurrentTransition(index)"}],key:message,ref:_vm.isCurrentTransition(index) ? 'currentTransition' : '',refInFor:true,staticClass:"gl-white-space-nowrap",attrs:{"data-testid":_vm.isCurrentTransition(index) ? 'current-transition' : ''}},[_vm._v(_vm._s(message))])}),0)]},proxy:true}])})],1)};
+var __vue_staticRenderFns__ = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-display-flex gl-align-items-center gl-mr-3"},[_c('div',{staticClass:"duo-chat-loader__dot duo-chat-loader__dot--1"}),_vm._v(" "),_c('div',{staticClass:"duo-chat-loader__dot duo-chat-loader__dot--2"}),_vm._v(" "),_c('div',{staticClass:"duo-chat-loader__dot duo-chat-loader__dot--3"})])}];
+
+  /* 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/chat/constants.js

@@ -1,3 +1,4 @@
+const LOADING_TRANSITION_DURATION = 7500;
 const DOCUMENTATION_SOURCE_TYPES = {
   HANDBOOK: {
     value: 'handbook',
@@ -18,4 +19,4 @@ const MESSAGE_MODEL_ROLES = {
   assistant: 'assistant'
 };
 
-export { DOCUMENTATION_SOURCE_TYPES, MESSAGE_MODEL_ROLES };
+export { DOCUMENTATION_SOURCE_TYPES, LOADING_TRANSITION_DURATION, MESSAGE_MODEL_ROLES };

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

@@ -58,7 +58,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-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_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,"button-text-classes":"gl-white-space-normal! gl-text-left"},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 */