@gitlab/ui 78.1.0 → 78.1.2

package/dist/tokens/css/tokens.css

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

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

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

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

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

package/dist/tokens/js/tokens.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "78.1.0",
+  "version": "78.1.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -102,7 +102,7 @@
     "@gitlab/eslint-plugin": "19.4.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.88.0",
+    "@gitlab/svgs": "3.89.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

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

@@ -7,9 +7,7 @@ const defaultValue = (prop) => GlPopover.props[prop].default;
 const components = { GlPopover, GlButton };
 
 const contentString = `
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat a nisi non
-  pellentesque. Pellentesque efficitur vulputate rutrum. Fusce nisl magna, porttitor in
-  massa ac, porta condimentum libero. Ut id lacus tristique, egestas arcu non, molestie nisi.
+  A popover is used to provide supplemental, useful, unique information about an element.
 `;
 
 const getTemplate = (id, slots = '') => `
@@ -58,6 +56,23 @@ WithCloseButton.args = generateProps({
   showCloseButton: true,
 });
 
+export const TextLinks = (_args, { viewMode, argTypes }) => ({
+  viewMode,
+  components,
+  props: Object.keys(argTypes),
+  template: getTemplate(
+    'popover-with-text-links',
+    `
+    <template>
+      A popover is used to provide supplemental, useful, unique information about an element. This one has a link to <a class="gl-link" href="https://design.gitlab.com/components/popover">learn more about popovers.</a>
+    </template>
+  `
+  ),
+});
+TextLinks.args = generateProps({
+  showCloseButton: true,
+});
+
 export const OnClick = (_args, { viewMode, argTypes }) => ({
   viewMode,
   components,

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

@@ -17,6 +17,25 @@ table.gl-table {
     th {
       @include gl-font-weight-bold;
       @include gl-text-gray-900;
+
+      &.gl-text-right > span {
+        @include gl-display-flex;
+        @include gl-justify-content-end;
+
+        span:first-of-type {
+          order: 1;
+        }
+
+        span:nth-of-type(2) {
+          order: 0;
+          @include gl-ml-0;
+          @include gl-mr-3;
+        }
+      }
+
+      [name='sort-icon'] {
+        user-select: none;
+      }
     }
 
     td {
@@ -121,3 +140,8 @@ table.gl-table {
 .table.b-table > tfoot > tr > th {
   background-image: none !important;
 }
+
+.table.b-table > thead > tr > [aria-sort]:not(.b-table-sort-icon-left),
+.table.b-table > tfoot > tr > [aria-sort]:not(.b-table-sort-icon-left) {
+  padding-right: 1rem;
+}

package/src/components/base/table/table.spec.js

@@ -3,7 +3,6 @@ import { shallowMount, mount } from '@vue/test-utils';
 import { BTable } from 'bootstrap-vue';
 import { logWarning } from '../../../utils/utils';
 import { waitForAnimationFrame } from '../../../utils/test_utils';
-import Icon from '../icon/icon.vue';
 import { glTableLiteWarning } from './constants';
 import Table from './table.vue';
 
@@ -100,20 +99,18 @@ describe('GlTable', () => {
         findFirstColHeader().trigger('click');
         await nextTick();
 
-        const icon = findFirstColHeader().findComponent(Icon);
+        const headerText = findFirstColHeader().text();
 
-        expect(icon.exists()).toBe(true);
-        expect(icon.props('name')).toBe('arrow-up');
+        expect(headerText).toContain('↑');
       });
 
       it('renders the descending sort icon', async () => {
         findFirstColHeader().trigger('click');
         findFirstColHeader().trigger('click');
         await nextTick();
-        const icon = findFirstColHeader().findComponent(Icon);
+        const headerText = findFirstColHeader().text();
 
-        expect(icon.exists()).toBe(true);
-        expect(icon.props('name')).toBe('arrow-down');
+        expect(headerText).toContain('↓');
       });
     });
 
@@ -136,11 +133,10 @@ describe('GlTable', () => {
         findFirstColHeader().trigger('click');
         await nextTick();
 
-        const icon = findFirstColHeader().findComponent(Icon);
+        const headerText = findFirstColHeader().text();
 
-        expect(icon.exists()).toBe(true);
-        expect(icon.props('name')).toBe('arrow-up');
-        expect(findFirstColHeader().text()).toContain(customSlotContent);
+        expect(headerText).toContain('↑');
+        expect(headerText).toContain(customSlotContent);
       });
     });
   });

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

@@ -7,15 +7,18 @@ const components = { GlTable };
 const tableItems = [
   {
     column_one: 'test',
-    col_2: 1234,
+    col_2: 'ABC',
+    col_three: 1234,
   },
   {
     column_one: 'test2',
-    col_2: 5678,
+    col_2: 'DEF',
+    col_three: 5678,
   },
   {
     column_one: 'test3',
-    col_2: 9101,
+    col_2: 'GHI',
+    col_three: 9101,
   },
 ];
 
@@ -44,8 +47,9 @@ export const Default = (args, { argTypes }) => ({
     :fixed="fixed"
     :stacked="stacked"
     :foot-clone="footClone"
-    sort-by="col_2"
+    sort-by="col_three"
     sort-desc
+    no-sort-reset
     hover
     selectable
     selected-variant="primary"
@@ -65,9 +69,16 @@ export const Default = (args, { argTypes }) => ({
     },
     {
       key: 'col_2',
+      label: 'Column 2',
+      formatter: (value) => value,
+    },
+    {
+      key: 'col_three',
       sortable: true,
       label: 'Column 2',
       formatter: (value) => value,
+      thClass: 'gl-text-right',
+      tdClass: 'gl-text-right',
     },
   ],
   items: tableItems,

package/src/components/base/table/table.vue

@@ -1,7 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BTable } from 'bootstrap-vue';
-import GlIcon from '../icon/icon.vue';
 import { logWarning, isDev } from '../../../utils/utils';
 import { tableFullSlots, tableFullProps, glTableLiteWarning } from './constants';
 
@@ -18,7 +17,6 @@ export default {
   name: 'GlTable',
   components: {
     BTable,
-    GlIcon,
   },
   inheritAttrs: false,
   props: {
@@ -98,17 +96,27 @@ export default {
       <slot :name="slotName" v-bind="scope"></slot>
     </template>
     <template v-for="headSlotName in headSlots" #[headSlotName]="scope">
-      <div :key="headSlotName" class="gl-display-flex gl-align-items-center">
-        <slot :name="headSlotName" v-bind="scope">{{ scope.label }}</slot
+      <span :key="headSlotName">
+        <slot :name="headSlotName" v-bind="scope"
+          ><span>{{ scope.label }}</span></slot
         ><template v-if="isSortable(scope)">
-          <gl-icon
-            v-if="getSortingIcon(scope)"
-            :name="getSortingIcon(scope)"
-            class="gl-ml-3 gl-min-w-5 gl-text-gray-900"
-          />
-          <div v-else class="gl-display-inline-block gl-w-5 gl-h-5 gl-ml-3"></div>
+          <span
+            v-if="getSortingIcon(scope) && getSortingIcon(scope) === 'arrow-up'"
+            class="gl-ml-3 gl-min-w-5 gl-text-gray-900 gl-text-center"
+            name="sort-icon"
+          >
+            ↑
+          </span>
+          <span
+            v-else-if="getSortingIcon(scope) && getSortingIcon(scope) === 'arrow-down'"
+            class="gl-ml-3 gl-min-w-5 gl-text-gray-900 gl-text-center"
+            name="sort-icon"
+          >
+            ↓
+          </span>
+          <span v-else class="gl-display-inline-block gl-w-5 gl-h-3 gl-ml-3"></span>
         </template>
-      </div>
+      </span>
     </template>
   </b-table>
 </template>

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

@@ -8,6 +8,7 @@ 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 { MESSAGE_MODEL_ROLES, CHAT_RESET_MESSAGE } from './constants';
 
@@ -339,11 +340,38 @@ describe('GlDuoChat', () => {
           data: { prompt: promptStr },
         });
         trigger();
-        if (expectEmitted) {
-          expect(wrapper.emitted('send-chat-prompt')).toEqual(expectEmitted);
-        } else {
-          expect(wrapper.emitted('send-chat-prompt')).toBe(undefined);
-        }
+        expect(wrapper.emitted('send-chat-prompt')).toEqual(expectEmitted);
+      });
+
+      it.each`
+        desc                                              | msgs
+        ${''}                                             | ${[]}
+        ${'with just a user message'}                     | ${[MOCK_USER_PROMPT_MESSAGE]}
+        ${'with a user message, and a complete response'} | ${[MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE]}
+      `('prevents submission when loading $desc', ({ msgs } = {}) => {
+        createComponent({
+          propsData: { isChatAvailable: true, isLoading: true, messages: msgs },
+          data: { prompt: promptStr },
+        });
+        clickSubmit();
+        expect(wrapper.emitted('send-chat-prompt')).toBe(undefined);
+      });
+
+      it.each([
+        [[{ ...MOCK_RESPONSE_MESSAGE, content: undefined, chunks: [''] }]],
+        [
+          [
+            MOCK_USER_PROMPT_MESSAGE,
+            { ...MOCK_RESPONSE_MESSAGE, content: undefined, chunks: [''] },
+          ],
+        ],
+      ])('prevents submission when streaming (messages = "%o")', (msgs = []) => {
+        createComponent({
+          propsData: { isChatAvailable: true, messages: msgs },
+          data: { prompt: promptStr },
+        });
+        clickSubmit();
+        expect(wrapper.emitted('send-chat-prompt')).toBe(undefined);
       });
     });
 
@@ -428,7 +456,7 @@ describe('GlDuoChat', () => {
       expect(findChatComponent().exists()).toBe(true);
     });
 
-    it('resets the prompt when new messages are added', async () => {
+    it('resets the prompt when a message is loaded', async () => {
       const prompt = 'foo';
       createComponent({ data: { prompt } });
       expect(findChatInput().props('value')).toBe(prompt);
@@ -436,7 +464,7 @@ describe('GlDuoChat', () => {
       // reactive behavior which consistutes an exception
       // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
       wrapper.setProps({
-        messages,
+        isLoading: true,
       });
       await nextTick();
       expect(findChatInput().props('value')).toBe('');

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

@@ -1,6 +1,5 @@
 import GlButton from '../../../base/button/button.vue';
 import GlAlert from '../../../base/alert/alert.vue';
-import { setStoryTimeout } from '../../../../utils/test_utils';
 import { makeContainer } from '../../../../utils/story_decorators/container';
 import GlDuoChat from './duo_chat.vue';
 import readme from './duo_chat.md';
@@ -132,32 +131,52 @@ export const Interactive = (args, { argTypes }) => ({
       this.isHidden = false;
       this.loggerInfo += `Chat opened\n\n`;
     },
-    onResponseRequested() {
+    async onResponseRequested() {
       this.timeout = null;
-      this.chunks = generateMockResponseChunks(this.requestId);
-      this.mockResponseFromAi();
+      await this.mockResponseFromAi();
       this.requestId += 1;
     },
-    mockResponseFromAi() {
-      this.promptInFlight = false;
-      if (this.chunks.length) {
-        const newResponse = this.chunks.shift();
+    async mockResponseFromAi() {
+      const generator = generateMockResponseChunks(this.requestId);
+
+      for await (const result of generator) {
+        const { chunkId, content, ...messageAttributes } = result;
         const existingMessageIndex = this.msgs.findIndex(
-          (msg) => msg.requestId === newResponse.requestId && msg.role === newResponse.role
+          (msg) => msg.requestId === result.requestId && msg.role === result.role
         );
-        const existingMessage = this.msgs[existingMessageIndex];
-        if (existingMessage) {
-          this.msgs.splice(existingMessageIndex, 1, {
-            ...existingMessage,
-            content: existingMessage.content + newResponse.content,
-          });
+
+        if (existingMessageIndex === -1) {
+          this.addNewMessage(messageAttributes, content);
+        } else {
+          this.updateExistingMessage(existingMessageIndex, content, chunkId);
+        }
+      }
+    },
+    addNewMessage(messageAttributes, content) {
+      this.promptInFlight = false;
+      this.$set(this.msgs, this.msgs.length, {
+        ...messageAttributes,
+        chunks: [content],
+      });
+    },
+    updateExistingMessage(index, content, chunkId) {
+      const message = this.msgs[index];
+
+      if (chunkId != null) {
+        // Ensure the chunks array exists
+        if (!message.chunks) {
+          this.$set(message, 'chunks', []);
         } else {
-          this.msgs.push(newResponse);
+          this.$set(message.chunks, chunkId, content);
+        }
+      } else {
+        // Update for final message
+        this.$set(message, 'content', content);
+
+        // Remove chunks if they are not needed anymore
+        if (message.chunks) {
+          this.$delete(message, 'chunks');
         }
-        this.logerInfo += `New response: ${JSON.stringify(newResponse)}\n\n`;
-        this.timeout = setStoryTimeout(() => {
-          this.mockResponseFromAi();
-        }, Math.floor(Math.random() * 251) + 16);
       }
     },
   },

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

@@ -212,13 +212,20 @@ export default {
         [[]]
       );
     },
+    lastMessage() {
+      return this.messages[this.messages.length - 1];
+    },
     resetDisabled() {
       if (this.isLoading || !this.hasMessages) {
         return true;
       }
-
-      const lastMessage = this.messages[this.messages.length - 1];
-      return lastMessage.content === CHAT_RESET_MESSAGE;
+      return this.lastMessage?.content === CHAT_RESET_MESSAGE;
+    },
+    submitDisabled() {
+      return this.isLoading || this.isStreaming;
+    },
+    isStreaming() {
+      return Boolean(this.lastMessage?.chunks?.length > 0 && !this.lastMessage?.content);
     },
     filteredSlashCommands() {
       const caseInsensitivePrompt = this.prompt.toLowerCase();
@@ -246,12 +253,13 @@ export default {
     },
   },
   watch: {
-    isLoading() {
+    isLoading(newVal) {
       this.isHidden = false;
       this.scrollToBottom();
-    },
-    messages() {
-      this.prompt = '';
+      if (newVal) {
+        // We reset the prompt when we start getting the response and focus in the prompt field
+        this.setPromptAndFocus();
+      }
     },
   },
   created() {
@@ -269,6 +277,9 @@ export default {
       this.$emit('chat-hidden');
     },
     sendChatPrompt() {
+      if (this.submitDisabled) {
+        return;
+      }
       if (this.prompt) {
         if (this.prompt === CHAT_RESET_MESSAGE && this.resetDisabled) {
           return;
@@ -336,14 +347,18 @@ export default {
         this.activeCommandIndex = 0;
       }
     },
+    async setPromptAndFocus(prompt = '') {
+      this.prompt = prompt;
+      await this.$nextTick();
+      this.$refs.prompt.$el.focus();
+    },
     selectSlashCommand(index) {
       const command = this.filteredSlashCommands[index];
       if (command.shouldSubmit) {
         this.prompt = command.name;
         this.sendChatPrompt();
       } else {
-        this.prompt = `${command.name} `;
-        this.$refs.prompt.$el.focus();
+        this.setPromptAndFocus(`${command.name} `);
       }
     },
   },
@@ -494,7 +509,6 @@ export default {
               class="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': !prompt }"
               :placeholder="inputPlaceholder"
-              :disabled="isLoading"
               autofocus
               @keydown.enter.exact.native.prevent
               @keyup.native="onInputKeyup"
@@ -507,8 +521,9 @@ export default {
               variant="confirm"
               class="!gl-absolute gl-bottom-2 gl-right-2 gl-rounded-base!"
               type="submit"
+              data-testid="chat-prompt-submit-button"
               :aria-label="$options.i18n.CHAT_SUBMIT_LABEL"
-              :disabled="isLoading"
+              :disabled="submitDisabled"
             />
           </template>
         </gl-form-input-group>

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

@@ -1,3 +1,4 @@
+import { setStoryTimeout } from '../../../../utils/test_utils';
 import { DOCUMENTATION_SOURCE_TYPES, MESSAGE_MODEL_ROLES } from './constants';
 
 const MOCK_SOURCES = [
@@ -66,24 +67,39 @@ export const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   timestamp: '2021-04-21T12:00:00.000Z',
 };
 
-export const generateMockResponseChunks = (requestId) => {
-  const chunks = [];
+// Utility function for delay
+async function delayRandom(min = 16, max = 267) {
+  const delay = Math.floor(Math.random() * (max - min + 1)) + min;
+  // eslint-disable-next-line no-promise-executor-return
+  return new Promise((resolve) => setStoryTimeout(resolve, delay));
+}
+
+export async function* generateMockResponseChunks(requestId = 1) {
   const chunkSize = 5;
-  const chunkCount = Math.ceil(MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.length / chunkSize);
-  for (let i = 0; i < chunkCount; i += 1) {
+  const contentLength = MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.length;
+  const chunkCount = Math.ceil(contentLength / chunkSize);
+
+  for (let chunkId = 0; chunkId < chunkCount; chunkId += 1) {
+    const start = chunkId * chunkSize;
+    const end = Math.min((chunkId + 1) * chunkSize, contentLength);
     const chunk = {
       ...MOCK_RESPONSE_MESSAGE_FOR_STREAMING,
       requestId,
-      content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.substring(
-        i * chunkSize,
-        (i + 1) * chunkSize
-      ),
-      chunkId: i,
+      content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.substring(start, end),
+      chunkId,
     };
-    chunks.push(chunk);
+
+    // eslint-disable-next-line no-await-in-loop
+    await delayRandom();
+    yield chunk;
   }
-  return chunks;
-};
+  yield {
+    ...MOCK_RESPONSE_MESSAGE_FOR_STREAMING,
+    requestId,
+    content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content,
+    chunkId: null,
+  };
+}
 
 export const MOCK_USER_PROMPT_MESSAGE = {
   id: '456',