@gitlab/ui 68.2.0 → 68.3.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 Nov 2023 14:12:01 GMT
+ * Generated on Fri, 10 Nov 2023 17:20:59 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 Nov 2023 14:12:01 GMT
+ * Generated on Fri, 10 Nov 2023 17:20:59 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 Nov 2023 14:12:01 GMT
+ * Generated on Fri, 10 Nov 2023 17:20:59 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 Nov 2023 14:12:01 GMT
+ * Generated on Fri, 10 Nov 2023 17:20:59 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 09 Nov 2023 14:12:01 GMT
+// Generated on Fri, 10 Nov 2023 17:20:59 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 09 Nov 2023 14:12:01 GMT
+// Generated on Fri, 10 Nov 2023 17:20:59 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.0",
+  "version": "68.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -29,8 +29,9 @@
     "build-scss-variables": "make scss_to_js/scss_variables.js",
     "build-tokens": "node ./bin/build_tokens.js",
     "clean": "rm -r dist storybook scss_to_js/scss_variables.* src/scss/utilities.scss",
-    "cy:edge": "cypress run --browser edge",
-    "cy:run": "cypress run --browser firefox",
+    "cy:a11y": "cypress run --browser chrome --env grepTags=@a11y",
+    "cy:edge": "cypress run --browser edge --env grepTags=-@a11y",
+    "cy:run": "cypress run --browser firefox --env grepTags=-@a11y",
     "start": "yarn storybook",
     "storybook": "yarn storybook-prep && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
     "storybook-vue3": "yarn storybook-prep && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
@@ -38,7 +39,7 @@
     "storybook-static": "yarn storybook-prep && storybook build -c .storybook -o storybook",
     "pretest:unit": "yarn build-tokens build-scss-variables",
     "test": "run-s test:unit test:visual",
-    "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html cy:run",
+    "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html 'yarn cy:run && yarn cy:a11y'",
     "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
     "test:unit:watch": "yarn test:unit --watch",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
@@ -91,6 +92,7 @@
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
+    "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.2.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "5.0.1",
@@ -98,18 +100,18 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.5.2",
-    "@storybook/addon-docs": "7.5.2",
-    "@storybook/addon-essentials": "7.5.2",
-    "@storybook/addon-storyshots": "7.5.2",
-    "@storybook/addon-storyshots-puppeteer": "7.5.2",
-    "@storybook/addon-viewport": "7.5.2",
-    "@storybook/builder-webpack5": "7.5.2",
-    "@storybook/theming": "7.5.2",
-    "@storybook/vue": "7.5.2",
-    "@storybook/vue-webpack5": "7.5.2",
-    "@storybook/vue3": "7.5.2",
-    "@storybook/vue3-webpack5": "7.5.2",
+    "@storybook/addon-a11y": "7.5.3",
+    "@storybook/addon-docs": "7.5.3",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addon-storyshots": "7.5.3",
+    "@storybook/addon-storyshots-puppeteer": "7.5.3",
+    "@storybook/addon-viewport": "7.5.3",
+    "@storybook/builder-webpack5": "7.5.3",
+    "@storybook/theming": "7.5.3",
+    "@storybook/vue": "7.5.3",
+    "@storybook/vue-webpack5": "7.5.3",
+    "@storybook/vue3": "7.5.3",
+    "@storybook/vue3-webpack5": "7.5.3",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -161,7 +163,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.5.2",
+    "storybook": "7.5.3",
     "storybook-dark-mode": "3.0.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

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;">