@gitlab/ui 78.2.0 → 78.2.2

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Mar 2024 18:11:11 GMT
+ * Generated on Tue, 19 Mar 2024 16:19:47 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Mar 2024 18:11:11 GMT
+ * Generated on Tue, 19 Mar 2024 16:19:47 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Mar 2024 18:11:11 GMT
+ * Generated on Tue, 19 Mar 2024 16:19:47 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Mar 2024 18:11:11 GMT
+ * Generated on Tue, 19 Mar 2024 16:19:47 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 Thu, 14 Mar 2024 18:11:11 GMT
+// Generated on Tue, 19 Mar 2024 16:19:47 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 Thu, 14 Mar 2024 18:11:11 GMT
+// Generated on Tue, 19 Mar 2024 16:19:47 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "78.2.0",
+  "version": "78.2.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.89.0",
+    "@gitlab/svgs": "3.90.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -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/filtered_search/filtered_search.stories.js

@@ -349,7 +349,7 @@ const tokens = [
     token: UserToken,
   },
   { type: 'user', icon: 'user', title: 'Assignee', dataType: 'user', token: UserToken },
-  { type: 'milestone', icon: 'clock', title: 'Milestone', unique: true, token: MilestoneToken },
+  { type: 'milestone', icon: 'milestone', title: 'Milestone', unique: true, token: MilestoneToken },
   { type: 'label', icon: 'labels', title: 'Label', token: LabelToken },
   { type: 'weight', icon: 'weight', title: 'Weight', unique: true, token: GlFilteredSearchToken },
   {

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

@@ -18,13 +18,12 @@ table.gl-table {
       @include gl-font-weight-bold;
       @include gl-text-gray-900;
 
-      &.gl-text-right > span {
-        @include gl-display-flex;
+      &.gl-text-right > div {
         flex-direction: row-reverse;
 
-        span:nth-of-type(2) {
+        div.gl-ml-2 {
           @include gl-ml-0;
-          @include gl-mr-3;
+          @include gl-mr-2;
         }
       }
 
@@ -129,6 +128,14 @@ table.gl-table {
   &.table-hover td.table-secondary:hover {
     background-color: $gray-10;
   }
+
+  thead th:hover {
+    background-color: transparent !important;
+
+    [name='sort-icon'] {
+      display: flex !important;
+    }
+  }
 }
 
 .table.b-table > thead > tr > th,

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

@@ -27,7 +27,10 @@ describe('GlTable', () => {
   };
 
   const findBTable = () => wrapper.findComponent(BTable);
-  const findFirstColHeader = () => findBTable().find('thead').findAll('th').at(0);
+  const findColHeaderAt = (index) => findBTable().find('thead').findAll('th').at(index);
+  const findFirstColHeader = () => findColHeaderAt(0);
+  const findSortIconForHeaderAt = (index) =>
+    findColHeaderAt(index).find('[data-testid="sort-icon"]');
 
   afterEach(() => {
     logWarning.mockClear();
@@ -80,19 +83,31 @@ describe('GlTable', () => {
   });
 
   describe('sortable columns', () => {
-    const field = {
-      key: 'name',
-      label: 'Name column',
-      sortable: true,
-    };
+    const fields = [
+      {
+        key: 'name',
+        label: 'Name column',
+        sortable: true,
+      },
+      {
+        key: 'age',
+        label: 'Age column',
+        sortable: true,
+      },
+      {
+        key: 'email',
+        label: 'Email column',
+        sortable: false,
+      },
+    ];
 
     describe('without custom slots', () => {
       beforeEach(() => {
-        factory({ mountFn: mount, props: { fields: [field] } });
+        factory({ mountFn: mount, props: { fields } });
       });
 
       it('sets the correct column label', () => {
-        expect(findFirstColHeader().text()).toMatch(field.label);
+        expect(findFirstColHeader().text()).toMatch(fields[0].label);
       });
 
       it('renders the ascending sort icon', async () => {
@@ -112,6 +127,40 @@ describe('GlTable', () => {
 
         expect(headerText).toContain('↓');
       });
+
+      it('sets initial sorting column using the sortBy property', () => {
+        factory({ mountFn: mount, props: { fields, sortBy: 'age' } });
+
+        expect(findSortIconForHeaderAt(0).classes()).toContain('gl-display-none');
+        expect(findSortIconForHeaderAt(1).classes()).not.toContain('gl-display-none');
+      });
+
+      it('sets initial sorting direction using the sortDesc property', () => {
+        factory({
+          mountFn: mount,
+          props: { fields, sortBy: 'age', sortDesc: true },
+        });
+
+        expect(findColHeaderAt(1).text()).toContain('↓');
+      });
+
+      it('does not render sort icon for non-sortable columns', () => {
+        expect(findSortIconForHeaderAt(2).exists()).toBe(false);
+      });
+
+      describe('changing the active sort column', () => {
+        it('hides sorting icon in previous active sort column', async () => {
+          await findColHeaderAt(0).trigger('click');
+
+          expect(findSortIconForHeaderAt(0).classes()).not.toContain('gl-display-none');
+          expect(findSortIconForHeaderAt(1).classes()).toContain('gl-display-none');
+
+          await findColHeaderAt(1).trigger('click');
+
+          expect(findSortIconForHeaderAt(0).classes()).toContain('gl-display-none');
+          expect(findSortIconForHeaderAt(1).classes()).not.toContain('gl-display-none');
+        });
+      });
     });
 
     describe('when headers are customized via slots', () => {
@@ -121,7 +170,7 @@ describe('GlTable', () => {
         factory({
           mountFn: mount,
           props: {
-            fields: [field],
+            fields,
           },
           scopedSlots: {
             'head(name)': `<div>${customSlotContent}</div>`,

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

@@ -50,6 +50,7 @@ export const Default = (args, { argTypes }) => ({
     sort-by="col_three"
     sort-desc
     no-sort-reset
+    sort-direction="desc"
     hover
     selectable
     selected-variant="primary"

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

@@ -73,11 +73,22 @@ export default {
     isSortable({ field }) {
       return field?.sortable;
     },
+    activeSortingColumn({ field }) {
+      return this.localSortBy === field?.key;
+    },
     getSortingIcon({ field }) {
-      if (this.localSortBy !== field?.key) {
-        return null;
+      if (this.activeSortingColumn({ field })) {
+        if (this.localSortDesc) {
+          return '↓';
+        }
+        return '↑';
+      }
+
+      if (this.$attrs['sort-direction'] === 'desc') {
+        return '↓';
       }
-      return this.localSortDesc ? 'arrow-down' : 'arrow-up';
+
+      return '↑';
     },
   },
 };
@@ -96,27 +107,21 @@ export default {
       <slot :name="slotName" v-bind="scope"></slot>
     </template>
     <template v-for="headSlotName in headSlots" #[headSlotName]="scope">
-      <span :key="headSlotName">
+      <div :key="headSlotName" class="gl-display-flex">
         <slot :name="headSlotName" v-bind="scope"
           ><span>{{ scope.label }}</span></slot
         ><template v-if="isSortable(scope)">
-          <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>
+          <div class="gl-ml-2 gl-w-5 gl-text-gray-900 gl-display-flex gl-justify-content-center">
+            <span
+              name="sort-icon"
+              data-testid="sort-icon"
+              :class="{ 'gl-display-none': !activeSortingColumn(scope) }"
+            >
+              {{ getSortingIcon(scope) }}
+            </span>
+          </div>
         </template>
-      </span>
+      </div>
     </template>
   </b-table>
 </template>

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.',
+  },
+];