@gitlab/ui 68.2.1 → 68.4.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Nov 2023 15:49:52 GMT
+ * Generated on Tue, 14 Nov 2023 09:09:01 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Nov 2023 15:49:52 GMT
+ * Generated on Tue, 14 Nov 2023 09:09:01 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Nov 2023 15:49:52 GMT
+ * Generated on Tue, 14 Nov 2023 09:09:01 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Nov 2023 15:49:52 GMT
+ * Generated on Tue, 14 Nov 2023 09:09:01 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 10 Nov 2023 15:49:52 GMT
+// Generated on Tue, 14 Nov 2023 09:09:01 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 10 Nov 2023 15:49:52 GMT
+// Generated on Tue, 14 Nov 2023 09:09:01 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "68.2.1",
+  "version": "68.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -89,14 +89,14 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
+    "@babel/core": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.2.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "5.0.1",
-    "@gitlab/svgs": "3.69.0",
+    "@gitlab/svgs": "3.71.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -124,7 +124,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "13.4.0",
+    "cypress": "13.5.0",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",

package/src/components/base/alert/alert.scss

@@ -1,15 +1,25 @@
+/*
+ * --gl-alert-padding-x
+ *
+ * Way to hook into spacing of gl-alert.
+ * This is used e.g. for page wide containers
+ * in GitLab.
+ */
+// stylelint-disable length-zero-no-unit
+$gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
+
 .gl-alert {
   @include gl-font-base;
   @include gl-relative;
-  @include gl-px-9;
+  padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x});
   @include gl-py-5;
 
   &-not-dismissible {
-    @include gl-pr-5;
+    padding-right: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
   }
 
   &-no-icon {
-    @include gl-pl-5;
+    padding-left: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
   }
 
   .gl-link:not(.gl-label-link) {
@@ -35,14 +45,14 @@
 .gl-alert-icon-container {
   @include gl-absolute;
   @include gl-top-5;
-  @include gl-left-5;
+  left: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
   @include gl-display-flex;
   @include gl-align-items-center;
   height: $gl-line-height-20;
 
   .gl-alert-has-title & {
     @include gl-heading-scale-500; // get dynamic font-size
-    height: $gl-line-height-heading * 1em; // give unit to unitless relative line-height (1.25) 
+    height: $gl-line-height-heading * 1em; // give unit to unitless relative line-height (1.25)
   }
 }
 
@@ -69,7 +79,7 @@
 .gl-dismiss-btn {
   @include gl-absolute;
   @include gl-top-4;
-  @include gl-right-4;
+  right: calc(#{$gl-spacing-scale-4} + #{$gl-alert-padding-x});
 }
 
 .gl-alert-danger {

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

@@ -143,6 +143,18 @@ export const Sticky = () => ({
   </div>`,
 });
 
+export const IncreasedSpacing = (args, { argTypes }) => ({
+  components: { GlAlert },
+  props: Object.keys(argTypes),
+  template: `
+    <div style="--gl-alert-padding-x: 0.5rem;">
+      <gl-alert>
+        Lorem ipsum dolor sit <a class="gl-link" href="#">text link</a> amet
+      </gl-alert>
+    </div>`,
+});
+IncreasedSpacing.args = generateProps();
+
 export default {
   title: 'base/alert',
   component: GlAlert,

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -1,11 +1,21 @@
+/*
+ * --gl-broadcast-message-padding-x
+ *
+ * Way to hook into spacing of gl-alert.
+ * This is used e.g. for page wide containers
+ * in GitLab.
+ */
+// stylelint-disable length-zero-no-unit
+$gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
+
 .gl-broadcast-message {
   @include gl-display-flex;
   @include gl-justify-content-space-between;
   @include gl-align-items-flex-start;
   @include gl-font-base;
   @include gl-line-height-20;
-  @include gl-pl-5;
-  @include gl-pr-4;
+  padding-left: calc(#{$gl-spacing-scale-5} + #{$gl-broadcast-message-padding-x});
+  padding-right: calc(#{$gl-spacing-scale-4} + #{$gl-broadcast-message-padding-x});
   @include gl-py-5;
 
   &.indigo {

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

@@ -77,6 +77,15 @@ Stacked.parameters = {
   storyshots: { disable: true },
 };
 
+export const IncreasedSpacing = (args, { argTypes }) => ({
+  components: {
+    GlBroadcastMessage,
+  },
+  props: Object.keys(argTypes),
+  template: `<div style="--gl-broadcast-message-padding-x: 0.5rem;">${template}</div>`,
+});
+IncreasedSpacing.args = generateProps();
+
 export default {
   title: 'base/broadcast message',
   component: GlBroadcastMessage,

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

@@ -55,3 +55,22 @@
     @include gl-py-4;
   }
 }
+
+.slash-commands {
+  @include gl-mt-n2;
+
+  .active-command{
+    @include gl-bg-gray-50;
+    @include gl-rounded-base;
+  }
+
+  .gl-dropdown-item button.dropdown-item {
+    @include gl-font-sm;
+    @include gl-px-3;
+    @include gl-bg-none;
+
+    &:hover {
+      @include gl-bg-none;
+    }
+  }
+}

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

@@ -2,13 +2,23 @@ import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import GlEmptyState from '../../../regions/empty_state/empty_state.vue';
 import GlExperimentBadge from '../../experiment_badge/experiment_badge.vue';
+import GlCard from '../../../base/card/card.vue';
+import GlDropdownItem from '../../../base/dropdown/dropdown_item.vue';
 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 GlDuoChat, { slashCommands } from './duo_chat.vue';
 
 import { MESSAGE_MODEL_ROLES, CHAT_RESET_MESSAGE } from './constants';
 
+const generatePartialSlashCommands = () => {
+  const res = [];
+  slashCommands.forEach((command) => {
+    res.push(command.name.slice(0, command.name.length - 1));
+  });
+  return res;
+};
+
 describe('GlDuoChat', () => {
   let wrapper;
 
@@ -43,6 +53,9 @@ describe('GlDuoChat', () => {
   const findChatInput = () => wrapper.find('[data-testid="chat-prompt-input"]');
   const findCloseChatButton = () => wrapper.find('[data-testid="chat-close-button"]');
   const findLegalDisclaimer = () => wrapper.find('[data-testid="chat-legal-disclaimer"]');
+  const findSlashCommandsCard = () => wrapper.findComponent(GlCard);
+  const findSlashCommands = () => wrapper.findAllComponents(GlDropdownItem);
+  const findSelectedSlashCommand = () => wrapper.find('.active-command');
 
   beforeEach(() => {
     createComponent();
@@ -207,13 +220,13 @@ describe('GlDuoChat', () => {
       const ENTER = 'Enter';
 
       it.each`
-        trigger                                                                            | event                         | action          | expectEmitted
-        ${() => clickSubmit()}                                                             | ${'Submit button click'}      | ${'submit'}     | ${[[promptStr]]}
-        ${() => findChatInput().trigger('keydown.enter', { code: ENTER })}                 | ${`Clicking ${ENTER}`}        | ${'submit'}     | ${[[promptStr]]}
-        ${() => findChatInput().trigger('keydown.enter', { code: ENTER, metaKey: true })}  | ${`Clicking ${ENTER} + ⌘`}    | ${'not submit'} | ${undefined}
-        ${() => findChatInput().trigger('keydown.enter', { code: ENTER, altKey: true })}   | ${`Clicking ${ENTER} + ⎇`}    | ${'not submit'} | ${undefined}
-        ${() => findChatInput().trigger('keydown.enter', { code: ENTER, shiftKey: true })} | ${`Clicking ${ENTER} + ⬆︎`}   | ${'not submit'} | ${undefined}
-        ${() => findChatInput().trigger('keydown.enter', { code: ENTER, ctrlKey: true })}  | ${`Clicking ${ENTER} + CTRL`} | ${'not submit'} | ${undefined}
+        trigger                                                                   | event                         | action          | expectEmitted
+        ${() => clickSubmit()}                                                    | ${'Submit button click'}      | ${'submit'}     | ${[[promptStr]]}
+        ${() => findChatInput().trigger('keyup', { key: ENTER })}                 | ${`Clicking ${ENTER}`}        | ${'submit'}     | ${[[promptStr]]}
+        ${() => findChatInput().trigger('keyup', { key: ENTER, metaKey: true })}  | ${`Clicking ${ENTER} + ⌘`}    | ${'not submit'} | ${undefined}
+        ${() => findChatInput().trigger('keyup', { key: ENTER, altKey: true })}   | ${`Clicking ${ENTER} + ⎇`}    | ${'not submit'} | ${undefined}
+        ${() => findChatInput().trigger('keyup', { key: ENTER, shiftKey: true })} | ${`Clicking ${ENTER} + ⬆︎`}   | ${'not submit'} | ${undefined}
+        ${() => findChatInput().trigger('keyup', { key: ENTER, ctrlKey: true })}  | ${`Clicking ${ENTER} + CTRL`} | ${'not submit'} | ${undefined}
       `('$event should $action the prompt form', ({ trigger, expectEmitted } = {}) => {
         createComponent({
           propsData: { messages: [], isChatAvailable: true },
@@ -401,4 +414,288 @@ describe('GlDuoChat', () => {
       });
     });
   });
+
+  describe('slash commands', () => {
+    const slashCommandsNames = slashCommands.map((command) => command.name);
+    const slashCommandsOnly = (commands = []) =>
+      slashCommandsNames.filter((name) => commands.includes(name));
+
+    describe('rendering', () => {
+      describe('without the `withSlashCommands` enabled', () => {
+        it('does not render slash commands by default', () => {
+          createComponent({
+            propsData: {
+              withSlashCommands: false,
+            },
+          });
+          expect(findSlashCommandsCard().exists()).toBe(false);
+        });
+
+        it('does not render slash commands when prompt is "/"', async () => {
+          createComponent({
+            propsData: {
+              withSlashCommands: false,
+            },
+            data: {
+              prompt: '/',
+            },
+          });
+
+          await nextTick();
+          expect(findSlashCommandsCard().exists()).toBe(false);
+        });
+      });
+
+      describe('with the `withSlashCommands` enabled', () => {
+        it('does not render slash commands by default', async () => {
+          createComponent({
+            propsData: {
+              withSlashCommands: true,
+            },
+          });
+
+          await nextTick();
+          expect(findSlashCommandsCard().exists()).toBe(false);
+        });
+
+        it('renders all slash commands when prompt is "/"', async () => {
+          createComponent({
+            propsData: {
+              withSlashCommands: true,
+            },
+            data: {
+              prompt: '/',
+            },
+          });
+
+          await nextTick();
+          expect(findSlashCommandsCard().exists()).toBe(true);
+          expect(findSlashCommands()).toHaveLength(slashCommands.length);
+
+          slashCommands.forEach((command, index) => {
+            expect(findSlashCommands().at(index).text()).toContain(command.name);
+            expect(findSlashCommands().at(index).text()).toContain(command.description);
+          });
+        });
+
+        describe('when the prompt includes the "/" character or no characters', () => {
+          it.each(['', '//', '\\', 'foo', '/foo'])(
+            'does not render the slash commands if prompt is "$prompt"',
+            async (prompt) => {
+              createComponent({
+                propsData: {
+                  withSlashCommands: true,
+                },
+                data: {
+                  prompt,
+                },
+              });
+
+              await nextTick();
+              expect(findSlashCommandsCard().exists()).toBe(false);
+            }
+          );
+        });
+
+        describe('when prompt presents a partial match to an existing slash command', () => {
+          it.each(generatePartialSlashCommands())(
+            'renders the slash commands when prompt is "%s" and is a partial match',
+            async (prompt) => {
+              createComponent({
+                propsData: {
+                  withSlashCommands: true,
+                },
+                data: {
+                  prompt,
+                },
+              });
+
+              await nextTick();
+              expect(findSlashCommandsCard().exists()).toBe(true);
+            }
+          );
+        });
+
+        describe('when the prompt matches a complete slash command', () => {
+          it.each(slashCommands.map((command) => command.name))(
+            'does not render the slash commands when prompt is "%s"',
+            async (prompt) => {
+              createComponent({
+                propsData: {
+                  withSlashCommands: true,
+                },
+                data: {
+                  prompt,
+                },
+              });
+
+              await nextTick();
+              expect(findSlashCommandsCard().exists()).toBe(false);
+            }
+          );
+        });
+      });
+    });
+
+    describe('interaction', () => {
+      describe('filtering when user types in partial slash command', () => {
+        it.each`
+          prompt       | expectedCommands
+          ${'/'}       | ${slashCommandsNames}
+          ${'/t'}      | ${slashCommandsOnly(['/test'])}
+          ${'/tes'}    | ${slashCommandsOnly(['/test'])}
+          ${'/e'}      | ${slashCommandsOnly(['/explain'])}
+          ${'/explai'} | ${slashCommandsOnly(['/explain'])}
+          ${'/r'}      | ${slashCommandsOnly(['/reset', '/refactor'])}
+          ${'/re'}     | ${slashCommandsOnly(['/reset', '/refactor'])}
+          ${'/res'}    | ${slashCommandsOnly(['/reset'])}
+          ${'/ref'}    | ${slashCommandsOnly(['/refactor'])}
+          ${'/foo'}    | ${[]}
+        `(
+          'shows $expectedCommands when prompt is $prompt',
+          async ({ prompt, expectedCommands } = {}) => {
+            createComponent({
+              propsData: {
+                withSlashCommands: true,
+              },
+              data: {
+                prompt,
+              },
+            });
+
+            await nextTick();
+            expect(findSlashCommands()).toHaveLength(expectedCommands.length);
+            expectedCommands.forEach((command) => {
+              expect(findSlashCommandsCard().text()).toContain(command);
+            });
+          }
+        );
+      });
+
+      describe('keyboard navigation', () => {
+        beforeEach(() => {
+          createComponent({
+            propsData: {
+              withSlashCommands: true,
+              messages,
+            },
+            data: {
+              prompt: '/',
+            },
+          });
+        });
+
+        it('toggles through commands on ArrowDown', async () => {
+          for (const command of slashCommandsNames) {
+            expect(findSelectedSlashCommand().text()).toContain(command);
+            findChatInput().trigger('keyup', { key: 'ArrowDown' });
+            // eslint-disable-next-line no-await-in-loop
+            await nextTick();
+          }
+        });
+
+        it('toggles through commands on ArrowUp', async () => {
+          const arr = [...slashCommandsNames].reverse();
+          arr.unshift(slashCommandsNames[0]); // it still has the top most command selected on the first run
+          for (const command of arr) {
+            expect(findSelectedSlashCommand().text()).toContain(command);
+            findChatInput().trigger('keyup', { key: 'ArrowUp' });
+            // eslint-disable-next-line no-await-in-loop
+            await nextTick();
+          }
+        });
+
+        describe('on Enter', () => {
+          const navigateToCommand = async (index) => {
+            const command = slashCommandsNames[index];
+            if (index) {
+              for (let i = 0; i < index; i += 1) {
+                findChatInput().trigger('keyup', { key: 'ArrowDown' });
+              }
+            }
+            await nextTick();
+            return command;
+          };
+
+          it('selects correct command and updates input if command should not submit right away', async () => {
+            const commandIndex = slashCommands.findIndex((cmd) => !cmd.shouldSubmit);
+            const command = await navigateToCommand(commandIndex);
+
+            expect(findSelectedSlashCommand().text()).toContain(command);
+            findChatInput().trigger('keyup', { key: 'Enter' });
+            await nextTick();
+            expect(findChatInput().props('value')).toBe(`${command} `);
+            expect(wrapper.emitted('send-chat-prompt')).toBe(undefined);
+          });
+
+          it('selects correct command and submits the prompt if command should submit right away', async () => {
+            const commandIndex = slashCommands.findIndex((cmd) => cmd.shouldSubmit);
+            const command = await navigateToCommand(commandIndex);
+
+            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]]);
+          });
+        });
+      });
+
+      describe('mouse navigation', () => {
+        beforeEach(() => {
+          createComponent({
+            propsData: {
+              withSlashCommands: true,
+              messages,
+            },
+            data: {
+              prompt: '/',
+            },
+          });
+        });
+
+        it('updates the selected command when hovering over it', async () => {
+          expect(findSelectedSlashCommand().text()).toContain(slashCommandsNames[0]);
+          findSlashCommands().at(2).trigger('mouseenter');
+          await nextTick();
+          expect(findSelectedSlashCommand().text()).toContain(slashCommandsNames[2]);
+          expect(findSelectedSlashCommand().text()).not.toContain(slashCommandsNames[0]);
+        });
+
+        describe('click', () => {
+          it('selects correct command and updates input if command should not submit right away', async () => {
+            const commandIndex = slashCommands.findIndex((cmd) => !cmd.shouldSubmit);
+
+            findSlashCommands().at(commandIndex).trigger('mouseenter');
+            await nextTick();
+
+            expect(findSelectedSlashCommand().text()).toContain(slashCommandsNames[commandIndex]);
+
+            findSelectedSlashCommand().vm.$emit('click');
+            await nextTick();
+
+            expect(findChatInput().props('value')).toBe(`${slashCommandsNames[commandIndex]} `);
+            expect(wrapper.emitted('send-chat-prompt')).toBe(undefined);
+          });
+
+          it('selects correct command and submits the prompt if command should submit right away', async () => {
+            const commandIndex = slashCommands.findIndex((cmd) => cmd.shouldSubmit);
+
+            findSlashCommands().at(commandIndex).trigger('mouseenter');
+            await nextTick();
+
+            expect(findSelectedSlashCommand().text()).toContain(slashCommandsNames[commandIndex]);
+
+            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

@@ -27,6 +27,7 @@ const generateProps = ({
   badgeHelpPageUrl = defaultValue('badgeHelpPageUrl'),
   badgeType = defaultValue('badgeType'),
   toolName = defaultValue('toolName'),
+  withSlashCommands = defaultValue('withSlashCommands'),
 } = {}) => ({
   title,
   messages,
@@ -37,6 +38,7 @@ const generateProps = ({
   badgeHelpPageUrl,
   badgeType,
   toolName,
+  withSlashCommands,
 });
 
 export const Default = (args, { argTypes }) => ({
@@ -57,6 +59,7 @@ export const Default = (args, { argTypes }) => ({
       :badge-help-page-url="badgeHelpPageUrl"
       :badge-type="badgeType"
       :tool-name="toolName"
+      :with-slash-commands="withSlashCommands"
     />`,
 });
 Default.args = generateProps({
@@ -151,6 +154,7 @@ export const Interactive = (args, { argTypes }) => ({
       :badge-help-page-url="badgeHelpPageUrl"
       :badge-type="badgeType"
       :tool-name="toolName"
+      :with-slash-commands="withSlashCommands"
       @send-chat-prompt="onSendChatPrompt"
       @chat-hidden="onChatHidden"
     />
@@ -176,7 +180,8 @@ export const Slots = (args, { argTypes }) => ({
         :predefined-prompts="predefinedPrompts"
         :badge-help-page-url="badgeHelpPageUrl"
         :badge-type="badgeType"
-        :tool-name="toolName">
+        :tool-name="toolName"
+        :with-slash-commands="withSlashCommands">
 
         <template #hero>
 <pre class="code-block rounded code highlight gl-border-b gl-rounded-0! gl-mb-0 gl-overflow-y-auto solarized-light" style="max-height: 20rem; overflow-y: auto;">