@gitlab/ui 66.20.0 → 66.22.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Oct 2023 07:10:15 GMT
+ * Generated on Tue, 03 Oct 2023 10:22:26 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Oct 2023 07:10:15 GMT
+ * Generated on Tue, 03 Oct 2023 10:22:26 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Oct 2023 07:10:15 GMT
+ * Generated on Tue, 03 Oct 2023 10:22:26 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Oct 2023 07:10:15 GMT
+ * Generated on Tue, 03 Oct 2023 10:22:26 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 02 Oct 2023 07:10:15 GMT
+// Generated on Tue, 03 Oct 2023 10:22:26 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 02 Oct 2023 07:10:15 GMT
+// Generated on Tue, 03 Oct 2023 10:22:26 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.20.0",
+  "version": "66.22.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -122,7 +122,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "13.2.0",
+    "cypress": "13.3.0",
     "cypress-axe": "^1.4.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",

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

@@ -35,7 +35,7 @@ export const WithPopovers = (args, { argTypes }) => ({
     <template #default="{ pathItem, pathId }">
       <gl-popover triggers="hover" placement="bottom" :target="pathId">
         <template #title>
-          <strong>{{ pathItem.title }}</strong>
+          {{ pathItem.title }}
         </template>
         {{ pathItem.metric }}
       </gl-popover>

package/src/components/base/popover/popover.scss

@@ -63,10 +63,8 @@ $gl-popover-max-width: $grid-size * 35;
   }
 
   .popover-header {
+    @include gl-heading-scale-200;
     @include gl-bg-white;
-    @include gl-font-sm;
-    @include gl-font-weight-bold;
-    @include gl-m-0;
     @include gl-border-bottom-0;
     @include gl-pb-0;
   }

package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.md

@@ -0,0 +1 @@
+A simple component to list documentation sources for a documentation-related AI response messages.

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

@@ -0,0 +1,92 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlIcon, GlLink } from '../../../../../../index';
+import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
+import GlDuoChatMessageSources from './duo_chat_message_sources.vue';
+
+const dummySourceBase = {
+  title: 'Foo',
+  source_type: DOCUMENTATION_SOURCE_TYPES.HANDBOOK.value,
+  stage: 'foo-stage',
+  group: 'bar-group',
+  date: new Date('December 31, 2020 23:59:59'),
+  author: 'Gregor Samsa',
+};
+
+describe('Duo Chat Message Sources', () => {
+  let wrapper;
+
+  const findListItems = () => wrapper.findAll('[data-testid="source-list-item"]');
+  const findSourceIcons = () => wrapper.findAllComponents(GlIcon);
+  const findSourceTitles = () => wrapper.findAllComponents(GlLink);
+
+  const createComponent = ({ propsData = {} } = {}) => {
+    wrapper = shallowMount(GlDuoChatMessageSources, {
+      propsData,
+    });
+  };
+
+  it('does not render anything if sources is an empty Array', () => {
+    createComponent({
+      propsData: {
+        sources: [],
+      },
+    });
+    expect(wrapper.text()).toBe('');
+  });
+
+  it('renders sources passed down as a prop', () => {
+    createComponent({
+      propsData: {
+        sources: [
+          dummySourceBase,
+          {
+            ...dummySourceBase,
+            title: 'Bar',
+          },
+        ],
+      },
+    });
+    expect(findListItems().length).toBe(2);
+  });
+
+  it.each`
+    type                                         | expectedIcon
+    ${DOCUMENTATION_SOURCE_TYPES.HANDBOOK.value} | ${DOCUMENTATION_SOURCE_TYPES.HANDBOOK.icon}
+    ${DOCUMENTATION_SOURCE_TYPES.DOC.value}      | ${DOCUMENTATION_SOURCE_TYPES.DOC.icon}
+    ${DOCUMENTATION_SOURCE_TYPES.BLOG.value}     | ${DOCUMENTATION_SOURCE_TYPES.BLOG.icon}
+    ${'foo'}                                     | ${'document'}
+  `('renders the correct icon for $type type', ({ type, expectedIcon } = {}) => {
+    createComponent({
+      propsData: {
+        sources: [
+          {
+            ...dummySourceBase,
+            source_type: type,
+          },
+        ],
+      },
+    });
+    expect(findSourceIcons().at(0).props('name')).toBe(expectedIcon);
+  });
+
+  it.each`
+    sourceExtension                                           | expectedTitle
+    ${{ title: 'Foo' }}                                       | ${'Foo'}
+    ${{ source_type: DOCUMENTATION_SOURCE_TYPES.DOC.value }}  | ${`${dummySourceBase.stage} / ${dummySourceBase.group}`}
+    ${{ source_type: DOCUMENTATION_SOURCE_TYPES.BLOG.value }} | ${`${dummySourceBase.date} / ${dummySourceBase.author}`}
+    ${{}}                                                     | ${'Source'}
+  `('renders the correct title for $sourceExtension', ({ sourceExtension, expectedTitle } = {}) => {
+    createComponent({
+      propsData: {
+        sources: [
+          {
+            ...dummySourceBase,
+            title: '',
+            ...sourceExtension,
+          },
+        ],
+      },
+    });
+    expect(findSourceTitles().at(0).text()).toBe(expectedTitle);
+  });
+});

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

@@ -0,0 +1,32 @@
+import { MOCK_RESPONSE_MESSAGE } from '../../mock_data';
+import GlDuoChatMessageSources from './duo_chat_message_sources.vue';
+import readme from './duo_chat_message_sources.md';
+
+const generateProps = ({ sources = [] } = {}) => ({
+  sources,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlDuoChatMessageSources },
+  props: Object.keys(argTypes),
+  template: `
+    <gl-duo-chat-message-sources :sources="sources" />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps({
+  sources: MOCK_RESPONSE_MESSAGE.extras.sources,
+});
+
+export default {
+  title: 'experimental/duo/chat/duo_chat_message_sources',
+  component: GlDuoChatMessageSources,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,80 @@
+<script>
+import { GlIcon, GlLink } from '../../../../../../index';
+import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
+
+export const i18n = {
+  MESSAGE_SOURCE: 'Source',
+  MESSAGE_SOURCES: 'Sources',
+};
+
+export default {
+  name: 'GlDuoChatMessageSources',
+  components: {
+    GlIcon,
+    GlLink,
+  },
+  props: {
+    /**
+     * The Array of the message sources.
+     */
+    sources: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    sourceLabel() {
+      return this.sources.length > 1 ? i18n.MESSAGE_SOURCES : i18n.MESSAGE_SOURCES;
+    },
+  },
+  methods: {
+    getSourceIcon(sourceType) {
+      const currentSourceType = Object.values(DOCUMENTATION_SOURCE_TYPES).find(
+        ({ value }) => value === sourceType
+      );
+
+      return currentSourceType?.icon || 'document';
+    },
+    getSourceTitle({ title, source_type: sourceType, stage, group, date, author }) {
+      if (title) {
+        return title;
+      }
+
+      if (sourceType === DOCUMENTATION_SOURCE_TYPES.DOC.value) {
+        if (stage && group) {
+          return `${stage} / ${group}`;
+        }
+      }
+
+      if (sourceType === DOCUMENTATION_SOURCE_TYPES.BLOG.value) {
+        if (date && author) {
+          return `${date} / ${author}`;
+        }
+      }
+
+      return i18n.MESSAGE_SOURCE;
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-mt-4 gl-mr-3 gl-text-gray-600" data-testid="duo-chat-message-sources">
+    <span v-if="sources.length">{{ sourceLabel }}:</span>
+
+    <ul class="gl-list-style-none gl-p-0 gl-m-0">
+      <li
+        v-for="(source, index) in sources"
+        :key="index"
+        class="gl-display-flex gl-pt-3 gl-align-items-center"
+        data-testid="source-list-item"
+      >
+        <gl-icon
+          v-if="source.source_type"
+          :name="getSourceIcon(source.source_type)"
+          class="gl-flex-shrink-0 gl-mr-2"
+        />
+        <gl-link :href="source.source_url">{{ getSourceTitle(source) }}</gl-link>
+      </li>
+    </ul>
+  </div>
+</template>

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

@@ -0,0 +1,20 @@
+export const DOCUMENTATION_SOURCE_TYPES = {
+  HANDBOOK: {
+    value: 'handbook',
+    icon: 'book',
+  },
+  DOC: {
+    value: 'doc',
+    icon: 'documents',
+  },
+  BLOG: {
+    value: 'blog',
+    icon: 'list-bulleted',
+  },
+};
+
+export const MESSAGE_MODEL_ROLES = {
+  user: 'user',
+  system: 'system',
+  assistant: 'assistant',
+};

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

@@ -0,0 +1,34 @@
+import { DOCUMENTATION_SOURCE_TYPES, MESSAGE_MODEL_ROLES } from './constants';
+
+const MOCK_SOURCES = [
+  {
+    title: 'GitLab Handbook',
+    source_type: DOCUMENTATION_SOURCE_TYPES.HANDBOOK.value,
+    source_url: '/handbook/',
+  },
+  {
+    stage: 'Mock Stage',
+    group: 'Mock Group',
+    source_type: DOCUMENTATION_SOURCE_TYPES.DOC.value,
+    source_url: '/company/team/',
+  },
+  {
+    date: '2023-04-21',
+    author: 'Test User',
+    source_type: DOCUMENTATION_SOURCE_TYPES.BLOG.value,
+    source_url: '/blog/',
+  },
+];
+
+export const MOCK_RESPONSE_MESSAGE = {
+  id: '123',
+  content: '_Duo Chat message_ comming from AI',
+  contentHtml: '<p><em>Duo Chat message</em> comming from AI</p>',
+  role: MESSAGE_MODEL_ROLES.assistant,
+  extras: {
+    sources: MOCK_SOURCES,
+  },
+  requestId: '987',
+  errors: [],
+  timestamp: '2021-04-21T12:00:00.000Z',
+};