@gitlab/ui 90.5.0 → 91.1.0

package/dist/utils/constants.js

@@ -26,7 +26,6 @@ const CONTRAST_LEVELS = [{
 }];
 const HEX_REGEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 const LEFT_MOUSE_BUTTON = 0;
-const glThemes = ['indigo', 'blue', 'light-blue', 'green', 'red', 'light-red'];
 const variantOptions = {
   primary: 'primary',
   secondary: 'secondary',
@@ -306,4 +305,4 @@ const loadingIconVariants = {
   dots: 'dots'
 };
 
-export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, glThemes, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "90.5.0",
+  "version": "91.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/path/path.scss

@@ -6,25 +6,14 @@ $path-chevron-dimension: px-to-rem(24px);
 $path-chevron-border-radius: px-to-rem(10px);
 $path-chevron-tip-border-radius: px-to-rem(2px);
 $path-button-right-padding: 1.25 * $grid-size;
-$path-chevron-drop-shadow: drop-shadow(0 0 px-to-rem(1px) $white)
-  drop-shadow(0 0 px-to-rem(2px) $blue-500);
 $path-chevron-transformation: rotate(45deg) skew(14deg, 14deg);
 $path-chevron-right-margin: px-to-rem(14px);
 
 // Mixins
-@mixin gl-path-active-item-color($color) {
-  @include gl-text-contrast-light;
-  background-color: $color;
-
-  &::after {
-    background-color: $color;
-  }
-}
-
 @mixin gl-path-chevron {
+  @include gl-reset-bg;
   content: '';
   position: absolute;
-  @include gl-reset-bg;
   top: $path-chevron-top;
   right: $path-chevron-right;
   width: $path-chevron-dimension;
@@ -34,6 +23,7 @@ $path-chevron-right-margin: px-to-rem(14px);
   border-top-left-radius: $path-chevron-border-radius;
   border-bottom-right-radius: $path-chevron-border-radius;
   border-top-right-radius: $path-chevron-tip-border-radius;
+  clip-path: polygon(100% 0, 0 0, 100% 100%);
 }
 
 .gl-path-nav {
@@ -43,11 +33,11 @@ $path-chevron-right-margin: px-to-rem(14px);
   .gl-path-nav-list {
     @include gl-p-1;
     @include gl-m-0;
-    position: relative;
     @include gl-list-style-none;
     @include gl-display-inline-flex;
     @include gl-overflow-hidden;
     margin-left: -1px;
+    position: relative;
   }
 
   .gl-path-nav-list-item {
@@ -65,18 +55,18 @@ $path-chevron-right-margin: px-to-rem(14px);
     @include gl-pl-5;
     @include gl-py-3;
     @include gl-display-flex;
-    position: relative;
     @include gl-font-base;
     @include gl-z-index-0;
-    @apply gl-border-none;
-    @include gl-text-gray-500;
     @include gl-font-weight-bold;
     @include gl-line-height-normal;
     @include gl-rounded-top-left-base;
     @include gl-rounded-bottom-left-base;
-    background-color: var(--path-bg-color);
-    padding-right: $path-button-right-padding;
+    @apply gl-border-none;
+    background-color: var(--gl-action-neutral-background-color-default);
+    color: var(--gl-action-neutral-foreground-color-default);
     margin-right: $path-chevron-right-margin;
+    padding-right: $path-button-right-padding;
+    position: relative;
 
     &::before,
     &::after {
@@ -85,47 +75,69 @@ $path-chevron-right-margin: px-to-rem(14px);
 
     // Pseudo focus element
     &::before {
+      background-color: var(--gl-color-alpha-0);
       display: none;
       z-index: 2;
       right: calc(-0.75rem + 1px);
-      box-shadow: 0 0 0 1px $white, 0.5px -0.5px 0 2.5px $blue-400;
+      box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0.5px -0.5px 0 2.5px var(--gl-focus-ring-outer-color);
       clip-path: polygon(0% 0%, 0% -30%, 160% 0%, 75% 130%, 100% 100%);
       transform: rotate(45deg) skew(14deg, 14deg) scale(0.99);
     }
 
-    &[disabled] {
-      color: $gl-text-color-disabled;
-      @include gl-cursor-not-allowed;
+    &:hover {
+      background-color: var(--gl-action-neutral-background-color-hover);
+      color: var(--gl-action-neutral-foreground-color-hover);
+    }
+
+    &:focus {
+      background-color: var(--gl-action-neutral-background-color-focus);
+      color: var(--gl-action-neutral-foreground-color-focus);
     }
 
-    &:not([disabled]):hover {
-      @include gl-path-active-item-color($gray-100);
-      color: $gl-text-color;
+    &:active {
+      background-color: var(--gl-action-neutral-background-color-active);
+      color: var(--gl-action-neutral-foreground-color-active);
     }
 
     &:active,
     &:focus,
     &:focus:active {
-      // Custom focus
+      // Custom focus to account for path shape
+      box-shadow: 5px -3px 0 -2px var(--gl-focus-ring-inner-color), 5px 3px 0 -2px var(--gl-focus-ring-inner-color), 0 0 0 1px var(--gl-focus-ring-inner-color),
+        0 0 0 3px var(--gl-focus-ring-outer-color);
+      outline: none;
       border-top-right-radius: 1px;
       border-bottom-right-radius: 1px;
-      box-shadow: 5px -3px 0 -2px $white, 5px 3px 0 -2px $white, 0 0 0 1px $white,
-        0 0 0 3px $blue-400;
-      outline: none;
 
       &::before {
         display: block;
       }
     }
+
+    &.gl-path-active-item {
+      background-color: var(--gl-action-selected-background-color-default);
+      color: var(--gl-action-selected-foreground-color-default);
+    }
+
+    &:disabled {
+      @include gl-cursor-not-allowed;
+      background-color: var(--gl-color-alpha-0);
+      box-shadow: none;
+      color: var(--gl-action-disabled-foreground-color);
+
+      &::before {
+        box-shadow: none;
+      }
+    }
   }
 
   .gl-path-fade {
     @include gl-w-8;
     @include gl-h-full;
+    @include gl-z-index-2;
     bottom: 0;
+    color: var(--gl-text-color-subtle);
     position: absolute;
-    @include gl-z-index-2;
-    @include gl-text-gray-500;
 
     &-left {
       left: 0;
@@ -141,41 +153,11 @@ $path-chevron-right-margin: px-to-rem(14px);
 
   .gl-clear-icon-button {
     @include gl-p-0;
-    @include gl-text-gray-400;
     @include gl-h-full;
+    color: var(--gl-icon-color-subtle);
 
     .gl-icon {
       @include gl-vertical-align-middle;
     }
   }
-
-  .gl-path-active-item-indigo,
-  .gl-path-active-item-indigo:hover {
-    @include gl-path-active-item-color($theme-indigo-700);
-  }
-
-  .gl-path-active-item-blue,
-  .gl-path-active-item-blue:hover {
-    @include gl-path-active-item-color($theme-blue-500);
-  }
-
-  .gl-path-active-item-light-blue,
-  .gl-path-active-item-light-blue:hover {
-    @include gl-path-active-item-color($theme-light-blue-500);
-  }
-
-  .gl-path-active-item-red,
-  .gl-path-active-item-red:hover {
-    @include gl-path-active-item-color($theme-red-500);
-  }
-
-  .gl-path-active-item-light-red,
-  .gl-path-active-item-light-red:hover {
-    @include gl-path-active-item-color($theme-light-red-500);
-  }
-
-  .gl-path-active-item-green,
-  .gl-path-active-item-green:hover {
-    @include gl-path-active-item-color($theme-green-500);
-  }
 }

package/src/components/base/path/path.vue

@@ -4,12 +4,11 @@ import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import uniqueId from 'lodash/uniqueId';
 import findLast from 'lodash/findLast';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
-import { glThemes } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
 
 const BOUNDARY_WIDTH = 40;
 const PATH_ITEM_CLASS = 'gl-path-button';
-const PATH_ACTIVE_ITEM_PREFIX = 'gl-path-active-item';
+const PATH_ACTIVE_ITEM_CLASS = 'gl-path-active-item';
 
 export default {
   name: 'GlPath',
@@ -36,15 +35,6 @@ export default {
       required: false,
       default: () => [],
     },
-    /**
-     * The color theme to be used.
-     */
-    theme: {
-      type: String,
-      required: false,
-      default: 'indigo',
-      validator: (theme) => glThemes.includes(theme),
-    },
     /**
      * The items' background color.
      */
@@ -62,9 +52,6 @@ export default {
     };
   },
   computed: {
-    activeClass() {
-      return `${PATH_ACTIVE_ITEM_PREFIX}-${this.theme}`;
-    },
     entireListVisible() {
       return this.width >= this.getScrollWidth();
     },
@@ -97,7 +84,7 @@ export default {
   methods: {
     pathItemClass(index) {
       return index === this.selectedIndex
-        ? `${PATH_ITEM_CLASS} ${this.activeClass}`
+        ? `${PATH_ITEM_CLASS} ${PATH_ACTIVE_ITEM_CLASS}`
         : PATH_ITEM_CLASS;
     },
     onItemClicked(selectedIndex) {

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

@@ -0,0 +1,3 @@
+export const CONTEXT_ITEM_TYPE_ISSUE = 'issue';
+export const CONTEXT_ITEM_TYPE_MERGE_REQUEST = 'merge_request';
+export const CONTEXT_ITEM_TYPE_PROJECT_FILE = 'project_file';

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_popover/duo_chat_context_item_popover.vue

@@ -0,0 +1,111 @@
+<script>
+import GlPopover from '../../../../../../base/popover/popover.vue';
+import { translate } from '../../../../../../../utils/i18n';
+import {
+  CONTEXT_ITEM_TYPE_ISSUE,
+  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
+  CONTEXT_ITEM_TYPE_PROJECT_FILE,
+} from '../constants';
+
+const ID_PREFIXES = {
+  issue: '#',
+  merge_request: '!',
+};
+
+export default {
+  name: 'DuoChatContextItemPopover',
+  components: {
+    GlPopover,
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    target: {
+      type: String,
+      required: true,
+    },
+    placement: {
+      type: String,
+      default: 'bottom',
+      required: false,
+    },
+  },
+  computed: {
+    itemInfo() {
+      return this.item.metadata?.info || {};
+    },
+    id() {
+      const isIssuable =
+        this.item.type === CONTEXT_ITEM_TYPE_ISSUE ||
+        this.item.type === CONTEXT_ITEM_TYPE_MERGE_REQUEST;
+      return isIssuable ? this.itemInfo.iid || '' : null;
+    },
+    idPrefix() {
+      return ID_PREFIXES[this.item.type] || '';
+    },
+    filePath() {
+      return this.item.type === CONTEXT_ITEM_TYPE_PROJECT_FILE
+        ? this.itemInfo.relFilePath || ''
+        : null;
+    },
+    isEnabled() {
+      return this.item.isEnabled !== false;
+    },
+    disabledMessage() {
+      return Array.isArray(this.item.disabledReasons) && this.item.disabledReasons.length > 0
+        ? this.item.disabledReasons.join(', ')
+        : translate('DuoChatContextItemPopover.DisabledReason', 'This item is disabled');
+    },
+  },
+  methods: {
+    translate,
+  },
+};
+</script>
+<template>
+  <gl-popover
+    :target="target"
+    triggers="hover focus"
+    :placement="placement"
+    :title="item.metadata.name"
+    custom-class="gl-duo-chat-item-popover"
+  >
+    <template #title>
+      <span class="gl-text-sm gl-text-gray-500" data-testid="chat-context-popover-title">{{
+        item.metadata.name
+      }}</span>
+    </template>
+    <div class="gl-p-3">
+      <div class="gl-mb-2">
+        <strong class="gl-mr-1">{{
+          translate('DuoChatContextItemPopover.ProjectLabel', 'Project:')
+        }}</strong>
+        <span>{{ itemInfo.project }}</span>
+      </div>
+      <div v-if="filePath !== null" class="gl-mb-2">
+        <strong class="gl-mr-1">{{
+          translate('DuoChatContextItemPopover.PathLabel', 'Path:')
+        }}</strong>
+        <span>{{ filePath }}</span>
+      </div>
+      <div v-if="id !== null" class="gl-mb-2">
+        <strong class="gl-mr-1">{{ translate('DuoChatContextItemPopover.IdLabel', 'ID:') }}</strong>
+        <span>{{ idPrefix }}{{ id }}</span>
+      </div>
+      <div class="gl-mb-2">
+        <strong class="gl-mr-1">{{
+          translate('DuoChatContextItemPopover.TypeLabel', 'Type:')
+        }}</strong>
+        <span>{{ item.type }}</span>
+      </div>
+      <div v-if="!isEnabled" class="gl-text-red-500" data-testid="chat-context-popover-disabled">
+        <strong class="gl-mr-1">{{
+          translate('DuoChatContextItemPopover.DisabledMessageLabel', 'Note:')
+        }}</strong>
+        <span>{{ disabledMessage }}</span>
+      </div>
+    </div>
+  </gl-popover>
+</template>

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue

@@ -0,0 +1,94 @@
+<script>
+import uniqueId from 'lodash/uniqueId';
+import GlIcon from '../../../../../../base/icon/icon.vue';
+import GlToken from '../../../../../../base/token/token.vue';
+import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
+import {
+  CONTEXT_ITEM_TYPE_ISSUE,
+  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
+  CONTEXT_ITEM_TYPE_PROJECT_FILE,
+} from '../constants';
+
+export default {
+  name: 'GlDuoChatContextItemSelections',
+  components: {
+    GlIcon,
+    GlDuoChatContextItemPopover,
+    GlToken,
+  },
+  props: {
+    selections: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    defaultCollapsed: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isCollapsed: this.defaultCollapsed,
+      selectionsId: uniqueId(),
+    };
+  },
+  computed: {
+    collapseIconName() {
+      return this.isCollapsed ? 'chevron-right' : 'chevron-down';
+    },
+  },
+  methods: {
+    getIconName(type) {
+      const iconMap = {
+        [CONTEXT_ITEM_TYPE_PROJECT_FILE]: 'document',
+        [CONTEXT_ITEM_TYPE_ISSUE]: 'issues',
+        [CONTEXT_ITEM_TYPE_MERGE_REQUEST]: 'merge-request',
+      };
+      return iconMap[type] || 'document';
+    },
+    toggleCollapse() {
+      this.isCollapsed = !this.isCollapsed;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-mb-3 gl-flex gl-flex-col">
+    <button
+      class="gl-flex gl-w-full gl-items-center gl-border-0 gl-bg-transparent gl-p-0 gl-text-left gl-text-xs gl-lowercase gl-text-gray-500"
+      data-testid="chat-context-selections-title"
+      @click="toggleCollapse"
+    >
+      <gl-icon :name="collapseIconName" data-testid="chat-context-collapse-icon" /> {{ title }}
+    </button>
+
+    <div
+      v-show="!isCollapsed"
+      class="gl-mt-1 gl-flex gl-grow gl-flex-wrap"
+      data-testid="chat-context-tokens-wrapper"
+    >
+      <gl-token
+        v-for="item in selections"
+        :key="item.id"
+        :view-only="true"
+        variant="default"
+        class="gl-mb-2 gl-mr-2"
+      >
+        <div :id="`context-item-${item.id}-${selectionsId}`" class="gl-flex gl-items-center">
+          <gl-icon :name="getIconName(item.type)" :size="12" class="gl-mr-1" />
+          {{ item.metadata.name }}
+        </div>
+        <gl-duo-chat-context-item-popover
+          :item="item"
+          :target="`context-item-${item.id}-${selectionsId}`"
+          placement="bottom"
+        />
+      </gl-token>
+    </div>
+  </div>
+</template>

package/src/components/experimental/duo/chat/components/duo_chat_context/mock_context_data.js

@@ -0,0 +1,137 @@
+export const MOCK_CONTEXT_ITEM_FILE = {
+  id: '123e4567-e89b-12d3-a456-426614174000',
+  isEnabled: true,
+  metadata: {
+    name: 'strawberry.ts',
+    info: {
+      project: 'example/garden',
+      relFilePath: 'src/plants/strawberry.ts',
+    },
+  },
+  type: 'project_file',
+};
+
+export const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
+  id: '323e4567-e89b-12d3-a456-426614174002',
+  isEnabled: false,
+  metadata: {
+    name: 'motorbike.cs',
+    info: {
+      project: 'example/vehicles',
+      relFilePath: '/src/VehicleFoo/motorbike.cs',
+    },
+  },
+  type: 'project_file',
+};
+const mockFiles = [
+  MOCK_CONTEXT_ITEM_FILE,
+  {
+    id: '223e4567-e89b-12d3-a456-426614174001',
+    isEnabled: true,
+    metadata: {
+      name: 'potato.ts',
+      info: {
+        project: 'example/garden',
+        relFilePath: '/src/plants/potato.ts',
+      },
+    },
+    type: 'project_file',
+  },
+  MOCK_CONTEXT_ITEM_FILE_DISABLED,
+];
+
+export const MOCK_CONTEXT_ITEM_ISSUE = {
+  id: '423e4567-e89b-12d3-a456-426614174003',
+  isEnabled: true,
+  metadata: {
+    name: 'Implement watering schedule',
+    info: {
+      project: 'example/garden',
+      iid: 1234,
+    },
+  },
+  type: 'issue',
+};
+export const MOCK_CONTEXT_ITEM_ISSUE_DISABLED = {
+  id: 'c463fb31-2a4c-4f8e-a609-97230ac48ae5',
+  isEnabled: false,
+  metadata: {
+    name: 'Fix vehicle colours',
+    info: {
+      project: 'example/vehicle',
+      iid: 91011,
+    },
+  },
+  disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+  type: 'issue',
+};
+
+const mockIssues = [
+  MOCK_CONTEXT_ITEM_ISSUE,
+  {
+    id: '523e4567-e89b-12d3-a456-426614174004',
+    isEnabled: true,
+    metadata: {
+      name: 'Refactor plant growth rates',
+      info: {
+        project: 'example/garden',
+        iid: 5678,
+      },
+    },
+    type: 'issue',
+  },
+  MOCK_CONTEXT_ITEM_ISSUE_DISABLED,
+];
+
+export const MOCK_CONTEXT_ITEM_MERGE_REQUEST = {
+  id: '623e4567-e89b-12d3-a456-426614174005',
+  isEnabled: true,
+  metadata: {
+    name: 'Improve database performance',
+    info: {
+      project: 'example/garden',
+      iid: 1122,
+    },
+  },
+  type: 'merge_request',
+};
+export const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
+  id: '4eb665fc-e5e1-49b0-9789-2a16964e461a',
+  isEnabled: false,
+  metadata: {
+    name: 'Fix broken layout at small viewports',
+    info: {
+      project: 'example/vehicle',
+      iid: 5566,
+    },
+  },
+  disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+  type: 'merge_request',
+};
+
+const mockMergeRequests = [
+  MOCK_CONTEXT_ITEM_MERGE_REQUEST,
+  {
+    id: '723e4567-e89b-12d3-a456-426614174006',
+    isEnabled: false,
+    metadata: {
+      name: 'Add vehicle registration details',
+      info: {
+        project: 'example/vehicle',
+        iid: 3344,
+      },
+    },
+    disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+    type: 'merge_request',
+  },
+  MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED,
+];
+
+export const getMockContextItems = () => {
+  const allItems = [...mockFiles, ...mockIssues, ...mockMergeRequests];
+
+  // put disabled items in the back
+  const disabledItems = allItems.filter((item) => !item.isEnabled);
+  const enabledItems = allItems.filter((item) => item.isEnabled);
+  return [...enabledItems, ...disabledItems];
+};

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

@@ -62,3 +62,8 @@ The component emits the `track-feedback` event, a proxy of the `feedback` event
 the `GlDuoUserFeedback` component. Please refer to
 [the documentation on that component](/story/experimental-duo-user-feedback--docs#listening-to-the-feedback-form-submission)
 when processing feedback from users.
+
+## Included context references
+
+Messages will display any included context references (files, issues merge requests etc.) when
+the message `meta.contextItems` array contains valid items.