@gitlab/ui 78.1.2 → 78.2.1

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Mar 2024 13:53:39 GMT
+ * Generated on Tue, 19 Mar 2024 05:26:52 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Mar 2024 13:53:39 GMT
+ * Generated on Tue, 19 Mar 2024 05:26:52 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Mar 2024 13:53:39 GMT
+ * Generated on Tue, 19 Mar 2024 05:26:52 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Mar 2024 13:53:39 GMT
+ * Generated on Tue, 19 Mar 2024 05:26:52 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 Wed, 13 Mar 2024 13:53:39 GMT
+// Generated on Tue, 19 Mar 2024 05:26:52 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 13 Mar 2024 13:53:39 GMT
+// Generated on Tue, 19 Mar 2024 05:26:52 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "78.1.2",
+  "version": "78.2.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -113,7 +113,7 @@
     "@storybook/addon-viewport": "^7.6.17",
     "@storybook/builder-webpack5": "^7.6.17",
     "@storybook/test": "^7.6.17",
-    "@storybook/test-runner": "0.16.0",
+    "@storybook/test-runner": "0.17.0",
     "@storybook/theming": "^7.6.17",
     "@storybook/vue": "^7.6.17",
     "@storybook/vue-webpack5": "^7.6.17",
@@ -131,7 +131,7 @@
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
-    "cypress": "13.6.6",
+    "cypress": "13.7.0",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",
@@ -171,7 +171,7 @@
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
     "storybook": "^7.6.17",
-    "storybook-dark-mode": "3.0.3",
+    "storybook-dark-mode": "4.0.0",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",
     "tailwind-config-viewer": "1.7.3",

package/src/components/base/table/table.scss

@@ -20,14 +20,9 @@ table.gl-table {
 
       &.gl-text-right > span {
         @include gl-display-flex;
-        @include gl-justify-content-end;
-
-        span:first-of-type {
-          order: 1;
-        }
+        flex-direction: row-reverse;
 
         span:nth-of-type(2) {
-          order: 0;
           @include gl-ml-0;
           @include gl-mr-3;
         }

package/src/components/experimental/duo/chat/constants.js

@@ -1,4 +1,5 @@
 export const CHAT_RESET_MESSAGE = '/reset';
+export const CHAT_CLEAN_MESSAGE = '/clean';
 
 export const LOADING_TRANSITION_DURATION = 7500;
 

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

@@ -8,30 +8,14 @@ import DuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
 import DuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import DuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
 import GlDuoChat from './duo_chat.vue';
-import { MOCK_RESPONSE_MESSAGE, MOCK_USER_PROMPT_MESSAGE } from './mock_data';
+import {
+  MOCK_RESPONSE_MESSAGE,
+  MOCK_USER_PROMPT_MESSAGE,
+  SLASH_COMMANDS as slashCommands,
+} from './mock_data';
 
 import { MESSAGE_MODEL_ROLES, CHAT_RESET_MESSAGE } from './constants';
 
-const slashCommands = [
-  {
-    name: '/reset',
-    shouldSubmit: true,
-    description: 'Reset conversation, ignore the previous messages.',
-  },
-  {
-    name: '/tests',
-    description: 'Write tests for the selected snippet.',
-  },
-  {
-    name: '/refactor',
-    description: 'Refactor the selected snippet.',
-  },
-  {
-    name: '/explain',
-    description: 'Explain the selected snippet.',
-  },
-];
-
 const invalidSlashCommands = [
   {
     name: '/foo',
@@ -373,6 +357,28 @@ describe('GlDuoChat', () => {
         clickSubmit();
         expect(wrapper.emitted('send-chat-prompt')).toBe(undefined);
       });
+
+      it('resets the prompt after form submission', async () => {
+        const prompt = 'foo';
+        createComponent({ data: { prompt } });
+        expect(findChatInput().props('value')).toBe(prompt);
+        clickSubmit();
+        await nextTick();
+        expect(findChatInput().props('value')).toBe('');
+      });
+
+      it('focuses on prompt after form submission', async () => {
+        const focusSpy = jest.fn();
+        jest.spyOn(HTMLElement.prototype, 'focus').mockImplementation(function focusMockImpl() {
+          focusSpy(this);
+        });
+        createComponent({ data: { prompt: 'TEST!' } });
+
+        clickSubmit();
+        await nextTick();
+
+        expect(focusSpy).toHaveBeenCalledWith(findChatInput().element);
+      });
     });
 
     describe('reset', () => {
@@ -456,20 +462,6 @@ describe('GlDuoChat', () => {
       expect(findChatComponent().exists()).toBe(true);
     });
 
-    it('resets the prompt when a message is loaded', async () => {
-      const prompt = 'foo';
-      createComponent({ data: { prompt } });
-      expect(findChatInput().props('value')).toBe(prompt);
-      // setProps is justified here because we are testing the component's
-      // reactive behavior which consistutes an exception
-      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
-      wrapper.setProps({
-        isLoading: true,
-      });
-      await nextTick();
-      expect(findChatInput().props('value')).toBe('');
-    });
-
     it('renders custom loader when isLoading', () => {
       createComponent({ propsData: { isLoading: true } });
       expect(findCustomLoader().exists()).toBe(true);
@@ -773,7 +765,6 @@ describe('GlDuoChat', () => {
             expect(findSelectedSlashCommand().text()).toContain(command);
             findChatInput().trigger('keyup', { key: 'Enter' });
             await nextTick();
-            expect(findChatInput().props('value')).toBe(`${command}`);
             expect(wrapper.emitted('send-chat-prompt')).toEqual([[command]]);
           });
         });
@@ -827,7 +818,6 @@ describe('GlDuoChat', () => {
             findSelectedSlashCommand().vm.$emit('click');
             await nextTick();
 
-            expect(findChatInput().props('value')).toBe(slashCommandsNames[commandIndex]);
             expect(wrapper.emitted('send-chat-prompt')).toEqual([
               [slashCommandsNames[commandIndex]],
             ]);

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

@@ -3,33 +3,15 @@ import GlAlert from '../../../base/alert/alert.vue';
 import { makeContainer } from '../../../../utils/story_decorators/container';
 import GlDuoChat from './duo_chat.vue';
 import readme from './duo_chat.md';
+import { CHAT_CLEAN_MESSAGE } from './constants';
 import {
   MOCK_RESPONSE_MESSAGE,
   MOCK_USER_PROMPT_MESSAGE,
+  SLASH_COMMANDS as slashCommands,
   generateMockResponseChunks,
   renderGFM,
 } from './mock_data';
 
-const slashCommands = [
-  {
-    name: '/reset',
-    shouldSubmit: true,
-    description: 'Reset conversation, ignore the previous messages.',
-  },
-  {
-    name: '/tests',
-    description: 'Write tests for the selected snippet.',
-  },
-  {
-    name: '/refactor',
-    description: 'Refactor the selected snippet.',
-  },
-  {
-    name: '/explain',
-    description: 'Explain the selected snippet.',
-  },
-];
-
 const defaultValue = (prop) =>
   typeof GlDuoChat.props[prop].default === 'function'
     ? GlDuoChat.props[prop].default()
@@ -120,8 +102,12 @@ export const Interactive = (args, { argTypes }) => ({
         requestId: this.requestId,
       };
       this.loggerInfo += `New prompt: ${JSON.stringify(newPrompt)}\n\n`;
-      this.msgs.push(newPrompt);
-      this.promptInFlight = true;
+      if (prompt === CHAT_CLEAN_MESSAGE) {
+        this.msgs = [];
+      } else {
+        this.msgs.push(newPrompt);
+        this.promptInFlight = true;
+      }
     },
     onChatHidden() {
       this.isHidden = true;
@@ -204,6 +190,8 @@ export const Interactive = (args, { argTypes }) => ({
       :empty-state-title="emptyStateTitle"
       :empty-state-description="emptyStateDescription"
       :chat-prompt-placeholder="chatPromptPlaceholder"
+      :slash-commands="slashCommands"
+      class="gl-drawer-default"
       @send-chat-prompt="onSendChatPrompt"
       @chat-hidden="onChatHidden"
     />
@@ -253,6 +241,7 @@ export const Slots = (args, { argTypes }) => ({
     </div>
     `,
 });
+Slots.args = generateProps();
 Slots.decorators = [makeContainer({ height: '800px' })];
 
 export default {

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

@@ -253,13 +253,9 @@ export default {
     },
   },
   watch: {
-    isLoading(newVal) {
+    isLoading() {
       this.isHidden = false;
       this.scrollToBottom();
-      if (newVal) {
-        // We reset the prompt when we start getting the response and focus in the prompt field
-        this.setPromptAndFocus();
-      }
     },
   },
   created() {
@@ -290,6 +286,7 @@ export default {
          * @param {String} prompt The user prompt to send.
          */
         this.$emit('send-chat-prompt', this.prompt);
+        this.setPromptAndFocus();
       }
     },
     sendPredefinedPrompt(prompt) {

package/src/components/experimental/duo/chat/mock_data.js

@@ -1,5 +1,10 @@
 import { setStoryTimeout } from '../../../../utils/test_utils';
-import { DOCUMENTATION_SOURCE_TYPES, MESSAGE_MODEL_ROLES } from './constants';
+import {
+  DOCUMENTATION_SOURCE_TYPES,
+  MESSAGE_MODEL_ROLES,
+  CHAT_RESET_MESSAGE,
+  CHAT_CLEAN_MESSAGE,
+} from './constants';
 
 const MOCK_SOURCES = [
   {
@@ -119,3 +124,28 @@ export const renderGFM = (el) => {
     block?.classList.add('gl-markdown', 'gl-compact-markdown');
   });
 };
+
+export const SLASH_COMMANDS = [
+  {
+    name: CHAT_RESET_MESSAGE,
+    shouldSubmit: true,
+    description: 'Reset conversation, ignore the previous messages.',
+  },
+  {
+    name: CHAT_CLEAN_MESSAGE,
+    shouldSubmit: true,
+    description: 'Delete all messages in this conversation.',
+  },
+  {
+    name: '/tests',
+    description: 'Write tests for the selected snippet.',
+  },
+  {
+    name: '/refactor',
+    description: 'Refactor the selected snippet.',
+  },
+  {
+    name: '/explain',
+    description: 'Explain the selected snippet.',
+  },
+];

package/src/scss/variables.scss

@@ -213,6 +213,11 @@ $gl-transition-duration-slow: 0.4s;
 $gl-transition-duration-medium: 0.2s;
 $gl-transition-duration-fast: 0.1s;
 
+// Animation easings
+$gl-easing-linear: linear;
+$gl-easing-default: ease;
+$gl-easing-out-cubic: cubic-bezier(0.22, 0.61, 0.36, 1);
+
 // Focus ring
 $outline-offset: 1px;
 $outline-width: 2px;