@gitlab/ui 92.5.0 → 93.1.0

package/dist/utils/set_utils.js

@@ -0,0 +1,25 @@
+import isObject from 'lodash/isObject';
+
+/**
+ * Purpose is a substitute of Vue.set but with preserving reactivity
+ * New object can be assigned to data property of aa component
+ * @param source
+ * @param key
+ * @param value
+ * @returns {*}
+ */
+const setObjectProperty = function (source, key) {
+  let value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  if (!source || !key || !isObject(source)) {
+    return {};
+  }
+  if (typeof key !== 'string') {
+    return source;
+  }
+  return {
+    ...source,
+    [key]: value
+  };
+};
+
+export { setObjectProperty };

package/package.json

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

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

@@ -130,5 +130,6 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
   &-dismiss {
     @include gl-my-n2;
     @apply gl-ml-5;
+    color: inherit !important;
   }
 }

package/src/components/base/broadcast_message/broadcast_message.vue

@@ -90,7 +90,7 @@ export default {
     <close-button
       v-if="showDismissButton"
       ref="dismiss"
-      class="gl-close-btn-color-inherit gl-broadcast-message-dismiss"
+      class="gl-broadcast-message-dismiss"
       :label="dismissLabel"
       @click="onDismiss"
     />

package/src/components/base/form/form_fields/form_fields.vue

@@ -4,6 +4,7 @@ import mapValues from 'lodash/mapValues';
 import uniqueId from 'lodash/uniqueId';
 import GlFormGroup from '../form_group/form_group.vue';
 import GlFormInput from '../form_input/form_input.vue';
+import { setObjectProperty } from '../../../../utils/set_utils';
 import GlFormFieldValidator from './form_field_validator.vue';
 
 export default {
@@ -147,7 +148,7 @@ export default {
   },
   methods: {
     setFieldDirty(fieldName) {
-      this.$set(this.fieldDirtyStatuses, fieldName, true);
+      this.fieldDirtyStatuses = setObjectProperty(this.fieldDirtyStatuses, fieldName, true);
     },
     setAllFieldsDirty() {
       this.fieldNames.forEach((fieldName) => this.setFieldDirty(fieldName));
@@ -173,7 +174,7 @@ export default {
       return val;
     },
     onFieldValidationUpdate(fieldName, invalidFeedback) {
-      this.$set(this.fieldValidations, fieldName, invalidFeedback);
+      this.fieldValidations = setObjectProperty(this.fieldValidations, fieldName, invalidFeedback);
     },
     onFieldBlur(fieldName) {
       this.setFieldDirty(fieldName);

package/src/components/base/new_dropdowns/dropdown.scss

@@ -102,6 +102,10 @@
 
     .gl-button-icon.gl-button-icon {
       @apply gl-mr-0;
+
+      &.gl-button-loading-indicator {
+        @apply gl-mr-2;
+      }
     }
 
     &.btn-sm .gl-new-dropdown-chevron {

package/src/components/base/toast/toast.js

@@ -17,7 +17,7 @@ let toastsCount = 0;
 function renderTitle(h, toast, options) {
   const nodes = [
     h(CloseButton, {
-      class: ['gl-toast-close-button', 'gl-close-btn-color-inherit'],
+      class: ['gl-toast-close-button'],
       on: {
         click: toast.hide,
       },

package/src/components/base/toast/toast.scss

@@ -56,5 +56,6 @@
 
   .gl-toast-close-button {
     @apply gl-ml-5;
+    color: inherit !important;
   }
 }

package/src/components/base/token/token.scss

@@ -41,15 +41,11 @@
   @apply gl-ml-2;
   @include gl-reset-color;
   @include gl-cursor-pointer;
+
   opacity: 0.8;
   color: inherit !important;
   background-color: transparent !important;
 
-  svg {
-    color: inherit !important;
-    mix-blend-mode: normal !important;
-  }
-
   &:hover,
   &:focus {
     @include gl-opacity-10;

package/src/components/base/token/token.vue

@@ -60,12 +60,7 @@ export default {
   <span :class="['gl-token', variantClass, viewOnlyClass]" v-on="$listeners">
     <span class="gl-token-content">
       <slot></slot>
-      <close-button
-        v-if="!viewOnly"
-        class="gl-token-close gl-close-btn-color-inherit"
-        :label="removeLabel"
-        @click="close"
-      />
+      <close-button v-if="!viewOnly" class="gl-token-close" :label="removeLabel" @click="close" />
     </span>
   </span>
 </template>

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

@@ -6,3 +6,13 @@ mark the beginning of the conversation.
 ```html
 <gl-duo-chat-conversation :messages="messages" :show-delimeter="showDelimiter" />
 ```
+
+Translations for newChatLabel can be set via the props as documented or via translation configuration:
+
+```js
+setConfigs({
+  translations: {
+    'GlDuoWorkflowPrompt.newChat': __('New chat'),
+  },
+});
+```

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

@@ -1,8 +1,9 @@
 <script>
 import GlDuoChatMessage from '../duo_chat_message/duo_chat_message.vue';
+import { translate } from '../../../../../../utils/i18n';
 
 const i18n = {
-  CONVERSATION_NEW_CHAT: 'New chat',
+  CONVERSATION_NEW_CHAT: translate('GlDuoChatConversation.newChat', 'New chat'),
 };
 
 const isMessage = (item) => Boolean(item) && item?.role;

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

@@ -1,11 +1,20 @@
 <script>
+import { translate } from '../../../../../../utils/i18n';
 import GlSprintf from '../../../../../utilities/sprintf/sprintf.vue';
 import { LOADING_TRANSITION_DURATION } from '../../constants';
 
 export const i18n = {
-  LOADER_LOADING_MESSAGE: '%{tool} is %{transition} an answer',
-  LOADER_LOADING_TRANSITIONS: ['finding', 'working on', 'generating', 'producing'],
-  GITLAB_DUO: 'GitLab Duo',
+  LOADER_LOADING_MESSAGE: translate(
+    'GlDuoChatLoader.loaderLoadingMessage',
+    '%{tool} is %{transition} an answer'
+  ),
+  LOADER_LOADING_TRANSITIONS: [
+    translate('GlDuoChatLoader.loaderLoadingTransitionsFinding', 'finding'),
+    translate('GlDuoChatLoader.loaderLoadingTransitionsWorkingOn', 'working on'),
+    translate('GlDuoChatLoader.loaderLoadingTransitionsGenerating', 'generating'),
+    translate('GlDuoChatLoader.loaderLoadingTransitionsProducing', 'producing'),
+  ],
+  GITLAB_DUO: translate('GlDuoChatLoader.gitlabDuo', 'GitLab Duo'),
 };
 
 export default {

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

@@ -7,8 +7,8 @@ import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import GlFormGroup from '../../../../../base/form/form_group/form_group.vue';
 import GlFormTextarea from '../../../../../base/form/form_textarea/form_textarea.vue';
 import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
-import { sprintf, translatePlural } from '../../../../../../utils/i18n';
 import { MESSAGE_MODEL_ROLES, SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED } from '../../constants';
+import { sprintf, translate, translatePlural } from '../../../../../../utils/i18n';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
 // eslint-disable-next-line no-restricted-imports
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
@@ -18,14 +18,25 @@ import { concatUntilEmpty } from './utils';
 
 export const i18n = {
   MODAL: {
-    TITLE: 'Give feedback on GitLab Duo Chat',
-    ALERT_TEXT:
-      'GitLab team members cannot view your conversation. Please be as descriptive as possible.',
-    DID_WHAT: 'What were you doing?',
-    INTERACTION: 'The situation in which you interacted with GitLab Duo Chat.',
-    IMPROVE_WHAT: 'How could the response be improved?',
-    BETTER_RESPONSE: 'How the response might better meet your needs.',
-    MESSAGE_ERROR: 'Error sending the message',
+    TITLE: translate('GlDuoChatMessage.modalTitle', 'Give feedback on GitLab Duo Chat'),
+    ALERT_TEXT: translate(
+      'GlDuoChatMessage.modalAlertText',
+      'GitLab team members cannot view your conversation. Please be as descriptive as possible.'
+    ),
+    DID_WHAT: translate('GlDuoChatMessage.modalDidWhat', 'What were you doing?'),
+    INTERACTION: translate(
+      'GlDuoChatMessage.modalInteraction',
+      'The situation in which you interacted with GitLab Duo Chat.'
+    ),
+    IMPROVE_WHAT: translate(
+      'GlDuoChatMessage.modalImproveWhat',
+      'How could the response be improved?'
+    ),
+    BETTER_RESPONSE: translate(
+      'GlDuoChatMessage.modalBetterResponse',
+      'How the response might better meet your needs.'
+    ),
+    MESSAGE_ERROR: translate('GlDuoChatMessage.modalMessageError', 'Error sending the message'),
   },
 };
 

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

@@ -1,11 +1,12 @@
 <script>
+import { translatePlural } from '../../../../../../utils/i18n';
 import GlIcon from '../../../../../base/icon/icon.vue';
 import GlLink from '../../../../../base/link/link.vue';
 import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
 
 export const i18n = {
-  MESSAGE_SOURCE: 'Source',
-  MESSAGE_SOURCES: 'Sources',
+  MESSAGE_SOURCE: (count = 1) =>
+    translatePlural('GlDuoChatMessageSources.messageSources', 'Source', 'Sources')(count),
 };
 
 export default {
@@ -25,7 +26,7 @@ export default {
   },
   computed: {
     sourceLabel() {
-      return this.sources.length > 1 ? i18n.MESSAGE_SOURCES : i18n.MESSAGE_SOURCES;
+      return i18n.MESSAGE_SOURCE(this.sources.length);
     },
   },
   methods: {
@@ -53,7 +54,7 @@ export default {
         }
       }
 
-      return i18n.MESSAGE_SOURCE;
+      return this.sourceLabel;
     },
   },
 };

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

@@ -12,6 +12,7 @@ import GlForm from '../../../base/form/form.vue';
 import GlExperimentBadge from '../../experiment_badge/experiment_badge.vue';
 import { badgeTypes, badgeTypeValidator } from '../../experiment_badge/constants';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
+import { translate } from '../../../../utils/i18n';
 import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
 import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import GlDuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
@@ -25,23 +26,49 @@ import {
 import { INCLUDE_SLASH_COMMAND } from './mock_data';
 
 export const i18n = {
-  CHAT_DEFAULT_TITLE: 'GitLab Duo Chat',
-  CHAT_CLOSE_LABEL: 'Close the Code Explanation',
-  CHAT_LEGAL_GENERATED_BY_AI: 'Responses generated by AI',
-  CHAT_EMPTY_STATE_TITLE: 'Ask a question',
-  CHAT_EMPTY_STATE_DESC: 'GitLab Duo Chat is your AI-powered assistant.',
-  CHAT_EMPTY_STATE_SECONDARY_DESC: 'Responses may be inaccurate. Verify before use.',
-  CHAT_PROMPT_PLACEHOLDER_DEFAULT: 'GitLab Duo Chat',
-  CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: 'Type "/" for slash commands',
-  CHAT_SUBMIT_LABEL: 'Send chat message.',
-  CHAT_CANCEL_LABEL: 'Cancel',
-  CHAT_LEGAL_DISCLAIMER:
-    "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
+  CHAT_DEFAULT_TITLE: translate('GlDuoChat.chatDefaultTitle', 'GitLab Duo Chat'),
+  CHAT_CLOSE_LABEL: translate('GlDuoChat.chatCloseLabel', 'Close the Code Explanation'),
+  CHAT_LEGAL_GENERATED_BY_AI: translate(
+    'GlDuoChat.chatLegalGeneratedByAI',
+    'Responses generated by AI'
+  ),
+  CHAT_EMPTY_STATE_TITLE: translate('GlDuoChat.chatEmptyStateTitle', 'Ask a question'),
+  CHAT_EMPTY_STATE_DESC: translate(
+    'GlDuoChat.chatEmptyStateDesc',
+    'GitLab Duo Chat is your AI-powered assistant.'
+  ),
+  CHAT_EMPTY_STATE_SECONDARY_DESC: translate(
+    'GlDuoChat.chatEmptyStateSecondaryDesc',
+    'Responses may be inaccurate. Verify before use.'
+  ),
+  CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate(
+    'GlDuoChat.chatPromptPlaceholderDefault',
+    'GitLab Duo Chat'
+  ),
+  CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: translate(
+    'GlDuoChat.chatPromptPlaceholderWithCommands',
+    'Type "/" for slash commands'
+  ),
+  CHAT_SUBMIT_LABEL: translate('GlDuoChat.chatSubmitLabel', 'Send chat message.'),
+  CHAT_CANCEL_LABEL: translate('GlDuoChat.chatCancelLabel', 'Cancel'),
+  CHAT_LEGAL_DISCLAIMER: translate(
+    'GlDuoChat.chatLegalDisclaimer',
+    "May provide inappropriate responses not representative of GitLab's views. Do not input personal data."
+  ),
   CHAT_DEFAULT_PREDEFINED_PROMPTS: [
-    'How do I change my password in GitLab?',
-    'How do I fork a project?',
-    'How do I clone a repository?',
-    'How do I create a template?',
+    translate(
+      'GlDuoChat.chatDefaultPredefinedPromptsChangePassword',
+      'How do I change my password in GitLab?'
+    ),
+    translate('GlDuoChat.chatDefaultPredefinedPromptsForkProject', 'How do I fork a project?'),
+    translate(
+      'GlDuoChat.chatDefaultPredefinedPromptsCloneRepository',
+      'How do I clone a repository?'
+    ),
+    translate(
+      'GlDuoChat.chatDefaultPredefinedPromptsCreateTemplate',
+      'How do I create a template?'
+    ),
   ],
 };
 

package/src/scss/components.scss

@@ -12,7 +12,6 @@
 @import '../components/base/token_selector/token_selector';
 @import '../components/base/card/card';
 @import '../components/shared_components/clear_icon_button/clear_icon_button';
-@import '../components/shared_components/close_button/close_button';
 @import '../components/base/accordion/accordion_item';
 @import '../components/base/alert/alert';
 @import '../components/base/avatar/avatar';

package/src/utils/set_utils.js

@@ -0,0 +1,24 @@
+import isObject from 'lodash/isObject';
+
+/**
+ * Purpose is a substitute of Vue.set but with preserving reactivity
+ * New object can be assigned to data property of aa component
+ * @param source
+ * @param key
+ * @param value
+ * @returns {*}
+ */
+export const setObjectProperty = (source, key, value = '') => {
+  if (!source || !key || !isObject(source)) {
+    return {};
+  }
+
+  if (typeof key !== 'string') {
+    return source;
+  }
+
+  return {
+    ...source,
+    [key]: value,
+  };
+};

package/translations.js

@@ -11,12 +11,45 @@ export default {
   'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
   'GlBroadcastMessage.closeButtonTitle': 'Dismiss',
   'GlCollapsibleListbox.srOnlyResultsLabel': null,
+  'GlDuoChat.chatCancelLabel': 'Cancel',
+  'GlDuoChat.chatCloseLabel': 'Close the Code Explanation',
+  'GlDuoChat.chatDefaultPredefinedPromptsChangePassword': 'How do I change my password in GitLab?',
+  'GlDuoChat.chatDefaultPredefinedPromptsCloneRepository': 'How do I clone a repository?',
+  'GlDuoChat.chatDefaultPredefinedPromptsCreateTemplate': 'How do I create a template?',
+  'GlDuoChat.chatDefaultPredefinedPromptsForkProject': 'How do I fork a project?',
+  'GlDuoChat.chatDefaultTitle': 'GitLab Duo Chat',
+  'GlDuoChat.chatEmptyStateDesc': 'GitLab Duo Chat is your AI-powered assistant.',
+  'GlDuoChat.chatEmptyStateSecondaryDesc': 'Responses may be inaccurate. Verify before use.',
+  'GlDuoChat.chatEmptyStateTitle': 'Ask a question',
+  'GlDuoChat.chatLegalDisclaimer':
+    "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
+  'GlDuoChat.chatLegalGeneratedByAI': 'Responses generated by AI',
+  'GlDuoChat.chatPromptPlaceholderDefault': 'GitLab Duo Chat',
+  'GlDuoChat.chatPromptPlaceholderWithCommands': 'Type "/" for slash commands',
+  'GlDuoChat.chatSubmitLabel': 'Send chat message.',
   'GlDuoChatContextItemMenu.emptyStateMessage': 'No results found',
   'GlDuoChatContextItemMenu.loadingMessage': 'Loading...',
   'GlDuoChatContextItemMenu.searchInputPlaceholder': 'Search %{categoryLabel}...',
   'GlDuoChatContextItemMenu.selectedContextItemsTitle': 'Included references',
+  'GlDuoChatConversation.newChat': 'New chat',
+  'GlDuoChatLoader.gitlabDuo': 'GitLab Duo',
+  'GlDuoChatLoader.loaderLoadingMessage': '%{tool} is %{transition} an answer',
+  'GlDuoChatLoader.loaderLoadingTransitionsFinding': 'finding',
+  'GlDuoChatLoader.loaderLoadingTransitionsGenerating': 'generating',
+  'GlDuoChatLoader.loaderLoadingTransitionsProducing': 'producing',
+  'GlDuoChatLoader.loaderLoadingTransitionsWorkingOn': 'working on',
   'GlDuoChatMessage.SelectedContextItemsTitleAssistantMessage': null,
   'GlDuoChatMessage.SelectedContextItemsTitleUserMessage': null,
+  'GlDuoChatMessage.modalAlertText':
+    'GitLab team members cannot view your conversation. Please be as descriptive as possible.',
+  'GlDuoChatMessage.modalBetterResponse': 'How the response might better meet your needs.',
+  'GlDuoChatMessage.modalDidWhat': 'What were you doing?',
+  'GlDuoChatMessage.modalImproveWhat': 'How could the response be improved?',
+  'GlDuoChatMessage.modalInteraction':
+    'The situation in which you interacted with GitLab Duo Chat.',
+  'GlDuoChatMessage.modalMessageError': 'Error sending the message',
+  'GlDuoChatMessage.modalTitle': 'Give feedback on GitLab Duo Chat',
+  'GlDuoChatMessageSources.messageSources': null,
   'GlDuoWorkflowPanel.collapseButtonTitle': 'Collapse',
   'GlDuoWorkflowPanel.expandButtonTitle': 'Expand',
   'GlDuoWorkflowPrompt.cancelButtonText': 'Cancel',

package/src/components/shared_components/close_button/close_button.scss

@@ -1,21 +0,0 @@
-.gl-close-btn-color-inherit {
-  mix-blend-mode: luminosity !important;
-
-  &,
-  &:focus .gl-icon,
-  &:not(:hover) .gl-icon {
-    color: inherit !important;
-  }
-
-  &:focus,
-  &:active,
-  &.active {
-    mix-blend-mode: initial !important;
-    @include gl-focus($important: true, $focus-ring: $focus-ring-dark);
-
-    .gl-icon {
-      background-color: transparent;
-      mix-blend-mode: difference;
-    }
-  }
-}