@gitlab/ui 82.0.1 → 83.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "82.0.1",
+  "version": "83.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -49,9 +49,11 @@
     "test:integration:server": "NODE_ENV=test start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
     "test:unit": "NODE_ENV=test jest",
     "test:unit:watch": "yarn test:unit --watch",
+    "test:unit:coverage": "yarn test:unit --coverage",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:unit-vue3": "VUE_VERSION=3 NODE_ENV=test jest",
     "test:unit-vue3:watch": "VUE_VERSION=3 yarn test:unit --watch",
+    "test:unit-vue3:coverage": "VUE_VERSION=3 yarn test:unit --coverage",
     "test:unit-vue3:debug": "VUE_VERSION=3 NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:visual": "./bin/run-visual-tests.sh 'test-storybook --browsers firefox --verbose --url http://localhost:9001'",
     "test:visual:update": "./bin/run-visual-tests.sh 'test-storybook -u --browsers firefox --verbose --url http://localhost:9001'",
@@ -108,7 +110,7 @@
     "@gitlab/eslint-plugin": "19.5.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.102.0",
+    "@gitlab/svgs": "3.103.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",

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

@@ -27,6 +27,7 @@ export const i18n = {
   CHAT_PROMPT_PLACEHOLDER_DEFAULT: 'GitLab Duo Chat',
   CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: 'Type "/" for slash commands',
   CHAT_SUBMIT_LABEL: 'Send chat message.',
+  CHAT_CANCEL_LABEL: 'Cancel',
   CHAT_LEGAL_DISCLAIMER:
     "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
   CHAT_DEFAULT_PREDEFINED_PROMPTS: [
@@ -188,6 +189,7 @@ export default {
       prompt: '',
       scrolledToBottom: true,
       activeCommandIndex: 0,
+      displaySubmitButton: true,
     };
   },
   computed: {
@@ -213,7 +215,7 @@ export default {
       );
     },
     lastMessage() {
-      return this.messages[this.messages.length - 1];
+      return this.messages?.[this.messages.length - 1];
     },
     resetDisabled() {
       if (this.isLoading || !this.hasMessages) {
@@ -221,9 +223,6 @@ export default {
       }
       return this.lastMessage?.content === CHAT_RESET_MESSAGE;
     },
-    submitDisabled() {
-      return this.isLoading || this.isStreaming;
-    },
     isStreaming() {
       return Boolean(
         (this.lastMessage?.chunks?.length > 0 && !this.lastMessage?.content) ||
@@ -256,10 +255,18 @@ export default {
     },
   },
   watch: {
-    isLoading() {
+    isLoading(newVal) {
+      if (!newVal && !this.isStreaming) {
+        this.displaySubmitButton = true; // Re-enable submit button when loading stops
+      }
       this.isHidden = false;
       this.scrollToBottom();
     },
+    isStreaming(newVal) {
+      if (!newVal && !this.isLoading) {
+        this.displaySubmitButton = true; // Re-enable submit button when streaming stops
+      }
+    },
   },
   created() {
     this.handleScrollingTrottled = throttle(this.handleScrolling, 200); // Assume a 200ms throttle for example
@@ -275,8 +282,17 @@ export default {
        */
       this.$emit('chat-hidden');
     },
+    cancelPrompt() {
+      /**
+       * Emitted when user clicks the stop button in the textarea
+       */
+
+      this.displaySubmitButton = true;
+      this.$emit('chat-cancel');
+      this.setPromptAndFocus();
+    },
     sendChatPrompt() {
-      if (this.submitDisabled) {
+      if (!this.displaySubmitButton) {
         return;
       }
       if (this.prompt) {
@@ -289,6 +305,7 @@ export default {
          * @param {String} prompt The user prompt to send.
          */
         this.$emit('send-chat-prompt', this.prompt.trim());
+        this.displaySubmitButton = false;
         this.setPromptAndFocus();
       }
     },
@@ -517,6 +534,7 @@ export default {
           </div>
           <template #append>
             <gl-button
+              v-if="displaySubmitButton"
               icon="paper-airplane"
               category="primary"
               variant="confirm"
@@ -524,7 +542,16 @@ export default {
               type="submit"
               data-testid="chat-prompt-submit-button"
               :aria-label="$options.i18n.CHAT_SUBMIT_LABEL"
-              :disabled="submitDisabled"
+            />
+            <gl-button
+              v-else
+              icon="stop"
+              category="primary"
+              variant="default"
+              class="!gl-absolute gl-bottom-2 gl-right-2 gl-rounded-base!"
+              data-testid="chat-prompt-cancel-button"
+              :aria-label="$options.i18n.CHAT_CANCEL_LABEL"
+              @click="cancelPrompt"
             />
           </template>
         </gl-form-input-group>

package/src/directives/outside/outside.js

@@ -1,7 +1,5 @@
-import { getEventLikeTimeStamp } from './get_event_like_time_stamp';
-
 /**
- * Map<HTMLElement, { bindTimeStamp: number, callback: Function }>
+ * Map<HTMLElement, Function>
  */
 const callbacks = new Map();
 
@@ -12,13 +10,11 @@ let listening = false;
 let lastMousedown = null;
 
 const globalListener = (event) => {
-  callbacks.forEach(({ bindTimeStamp, callback }, element) => {
+  callbacks.forEach((callback, element) => {
     const originalEvent = lastMousedown || event;
     if (
       // Ignore events that aren't targeted outside the element
-      element.contains(originalEvent.target) ||
-      // Only consider events triggered after the directive was bound
-      event.timeStamp <= bindTimeStamp
+      element.contains(originalEvent.target)
     ) {
       return;
     }
@@ -48,6 +44,9 @@ const startListening = () => {
   }
 
   document.addEventListener('mousedown', onMousedown);
+  // Added { capture: true } to prevent the behavior discussed in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1686#note_412545027
+  // Ensures the event listener handles the event in the capturing phase, avoiding issues encountered previously.
+  // Cannot be tested with Jest or Cypress, but can be tested with Playwright in the future: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4272#note_1947425384
   document.addEventListener('click', globalListener, { capture: true });
   listening = true;
   lastMousedown = null;
@@ -91,10 +90,7 @@ const bind = (el, { value, arg = 'click' }) => {
     startListening();
   }
 
-  callbacks.set(el, {
-    bindTimeStamp: getEventLikeTimeStamp(),
-    callback: value,
-  });
+  callbacks.set(el, value);
 };
 
 const unbind = (el) => {

package/src/scss/gitlab_ui.scss

@@ -2,6 +2,9 @@
 
 @import 'bootstrap_vue';
 
+// Design Tokens
+@import 'tokens';
+
 // Settings
 @import 'functions';
 @import 'variables';

package/dist/directives/outside/get_event_like_time_stamp.js

@@ -1,33 +0,0 @@
-/**
- * This file is based on Vue's scheduler code:
- * https://github.com/vuejs/vue/blob/v2.6.12/src/core/observer/scheduler.js#L44-L66
- *
- * See the LICENSE file in this directory.
- */
-
-const {
-  performance
-} = window;
-
-/**
- * Get a current timestamp that can be meaningfully compared to an event's
- * `timeStamp` property.
- *
- * Event timestamps can be a DOMHighResTimeStamp (if supported), otherwise
- * a DOMTimeStamp (used by jsdom and older browsers).
- *
- * This function will return a current timestamp of the same type used by the
- * underlying environment when it creates DOM events.
- *
- * See https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp for
- * more details.
- *
- * @returns {number}
- */
-const getEventLikeTimeStamp =
-// If the event timestamp, although evaluated AFTER the Date.now(), is
-// smaller, it means the event is using a hi-res timestamp, and we need to
-// use the hi-res version for event listener timestamps as well.
-typeof (performance === null || performance === void 0 ? void 0 : performance.now) === 'function' && Date.now() > document.createEvent('Event').timeStamp ? () => performance.now() : () => Date.now();
-
-export { getEventLikeTimeStamp };

package/src/directives/outside/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2013-present, Yuxi (Evan) You
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

package/src/directives/outside/get_event_like_time_stamp.js

@@ -1,31 +0,0 @@
-/**
- * This file is based on Vue's scheduler code:
- * https://github.com/vuejs/vue/blob/v2.6.12/src/core/observer/scheduler.js#L44-L66
- *
- * See the LICENSE file in this directory.
- */
-
-const { performance } = window;
-
-/**
- * Get a current timestamp that can be meaningfully compared to an event's
- * `timeStamp` property.
- *
- * Event timestamps can be a DOMHighResTimeStamp (if supported), otherwise
- * a DOMTimeStamp (used by jsdom and older browsers).
- *
- * This function will return a current timestamp of the same type used by the
- * underlying environment when it creates DOM events.
- *
- * See https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp for
- * more details.
- *
- * @returns {number}
- */
-export const getEventLikeTimeStamp =
-  // If the event timestamp, although evaluated AFTER the Date.now(), is
-  // smaller, it means the event is using a hi-res timestamp, and we need to
-  // use the hi-res version for event listener timestamps as well.
-  typeof performance?.now === 'function' && Date.now() > document.createEvent('Event').timeStamp
-    ? () => performance.now()
-    : () => Date.now();