@gitlab/ui 124.1.1 → 124.2.0

package/package.json

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

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -20,7 +20,7 @@ $breadcrumb-max-width: $grid-size * 16;
   @apply gl-leading-normal;
   @apply gl-shrink-0;
 
-  &:not(:last-child)::after {
+  &:not(:last-child, :has(+ .gl-breadcrumb-clipboard-button))::after {
     color: var(--gl-breadcrumb-separator-color);
     @apply gl-px-3;
     content: '/';
@@ -75,3 +75,8 @@ $breadcrumb-max-width: $grid-size * 16;
     }
   }
 }
+
+.gl-breadcrumb-clipboard-button {
+  @apply gl-leading-normal;
+  @apply gl-shrink-0;
+}

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -6,6 +6,7 @@ import GlAvatar from '../avatar/avatar.vue';
 import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
 import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { breadCrumbSizeOptions } from '../../../utils/constants';
+import ClipboardButton from '../../shared_components/clipboard_button/clipboard_button.vue';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
 
 export default {
@@ -14,6 +15,7 @@ export default {
     GlBreadcrumbItem,
     GlAvatar,
     GlDisclosureDropdown,
+    ClipboardButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -64,6 +66,30 @@ export default {
       default: breadCrumbSizeOptions.sm,
       validator: (value) => Object.keys(breadCrumbSizeOptions).includes(value),
     },
+    /**
+     * Copy to clipboard button for breadcrumbs path.
+     */
+    showClipboardButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Custom path for copy to clipboard button. By default, it resolves to all items text values with `/` separator.
+     */
+    pathToCopy: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * Custom tooltip text for clipboard button.
+     */
+    clipboardTooltipText: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -94,6 +120,12 @@ export default {
     avatarSize() {
       return this.size === 'sm' ? 16 : 24;
     },
+    clipboardButtonText() {
+      if (this.pathToCopy) return this.pathToCopy;
+
+      const items = Array.from(this.items, (item) => item.text);
+      return items.join('/');
+    },
   },
   watch: {
     items: {
@@ -230,16 +262,28 @@ export default {
         :size="size"
         :aria-current="getAriaCurrentAttr(index)"
         :class="[hideItemClass(item), itemClass]"
-        ><gl-avatar
-          v-if="item.avatarPath"
-          :src="item.avatarPath"
-          :size="avatarSize"
-          aria-hidden="true"
-          class="gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-default"
-          shape="rect"
-          data-testid="avatar"
-        /><span class="gl-align-middle">{{ item.text }}</span>
+        ><template #default>
+          <gl-avatar
+            v-if="item.avatarPath"
+            :src="item.avatarPath"
+            :size="avatarSize"
+            aria-hidden="true"
+            class="gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-default"
+            shape="rect"
+            data-testid="avatar"
+          /><span class="gl-align-middle">{{ item.text }}</span>
+        </template>
       </gl-breadcrumb-item>
+
+      <li v-if="showClipboardButton" class="gl-breadcrumb-clipboard-button">
+        <clipboard-button
+          data-testid="copy-to-clipboard-button"
+          class="gl-ml-2"
+          :text="clipboardButtonText"
+          v-bind="clipboardTooltipText ? { title: clipboardTooltipText } : {}"
+          :size="dropdownSize"
+        />
+      </li>
     </ol>
   </nav>
 </template>

package/src/components/index.js

@@ -102,6 +102,9 @@ export { default as GlDashboardPanel } from './dashboards/dashboard_panel/dashbo
 // Experimental
 export { default as GlExperimentBadge } from './experimental/experiment_badge/experiment_badge.vue';
 
+// Shared components
+export { default as GlClipboardButton } from './shared_components/clipboard_button/clipboard_button.vue';
+
 // Utilities
 export { default as GlAnimatedNumber } from './utilities/animated_number/animated_number.vue';
 export { default as GlFriendlyWrap } from './utilities/friendly_wrap/friendly_wrap.vue';

package/src/components/shared_components/clipboard_button/clipboard_button.vue

@@ -0,0 +1,78 @@
+<script>
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
+import GlButton from '../../base/button/button.vue';
+import { translate } from '../../../utils/i18n';
+
+export default {
+  name: 'ClipboardButton',
+  components: {
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    /**
+     * The text to copy to clipboard
+     */
+    text: {
+      type: String,
+      required: true,
+    },
+    /**
+     * The tooltip text shown on hover
+     */
+    title: {
+      type: String,
+      required: false,
+      default: () => translate('ClipboardButton.title', 'Copy to clipboard'),
+    },
+    /**
+     * Button size
+     */
+    size: {
+      type: String,
+      required: false,
+      default: 'medium',
+    },
+  },
+  data() {
+    return {
+      localTitle: this.title,
+      titleTimeout: null,
+    };
+  },
+  methods: {
+    updateTooltip(title) {
+      this.localTitle = title;
+
+      clearTimeout(this.titleTimeout);
+
+      this.titleTimeout = setTimeout(() => {
+        this.localTitle = this.title;
+      }, 1000);
+    },
+    async handleClick() {
+      try {
+        await navigator.clipboard.writeText(this.text);
+        this.updateTooltip(translate('ClipboardButton.copied', 'Copied'));
+      } catch {
+        this.updateTooltip(translate('ClipboardButton.error', 'Copy failed'));
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button
+    v-gl-tooltip.hover.focus.top
+    variant="default"
+    category="tertiary"
+    icon="copy-to-clipboard"
+    :size="size"
+    :title="localTitle"
+    :aria-label="localTitle"
+    @click="handleClick"
+  />
+</template>

package/translations.js

@@ -1,6 +1,9 @@
 /* eslint-disable import/no-default-export */
 export default {
   'ClearIconButton.title': 'Clear',
+  'ClipboardButton.copied': 'Copied',
+  'ClipboardButton.error': 'Copy failed',
+  'ClipboardButton.title': 'Copy to clipboard',
   'CloseButton.title': 'Close',
   'GlAlert.closeButtonTitle': 'Dismiss',
   'GlBanner.closeButtonTitle': 'Dismiss',