@gitlab/ui 68.6.0 → 68.7.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Nov 2023 08:05:48 GMT
+ * Generated on Wed, 15 Nov 2023 12:15:36 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Nov 2023 08:05:48 GMT
+ * Generated on Wed, 15 Nov 2023 12:15:36 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Nov 2023 08:05:48 GMT
+ * Generated on Wed, 15 Nov 2023 12:15:36 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Nov 2023 08:05:48 GMT
+ * Generated on Wed, 15 Nov 2023 12:15:36 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 15 Nov 2023 08:05:48 GMT
+// Generated on Wed, 15 Nov 2023 12:15:36 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 15 Nov 2023 08:05:48 GMT
+// Generated on Wed, 15 Nov 2023 12:15:36 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.6.0",
+  "version": "68.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/experimental/duo/chat/components/duo_chat_message/copy_code_element.js

@@ -0,0 +1,44 @@
+import iconsPath from '@gitlab/svgs/dist/icons.svg';
+
+const createButton = () => {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.classList.add(
+    'btn',
+    'btn-default',
+    'btn-md',
+    'gl-button',
+    'btn-default-secondary',
+    'btn-icon'
+  );
+  button.dataset.title = 'Copy to clipboard';
+
+  // Create an SVG element with the correct namespace
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('role', 'img');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.classList.add('gl-button-icon', 'gl-icon', 's16');
+
+  // Create a 'use' element with the correct namespace
+  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use.setAttribute('href', `${iconsPath}#copy-to-clipboard`);
+
+  svg.appendChild(use);
+  button.appendChild(svg);
+
+  return button;
+};
+
+export class CopyCodeElement extends HTMLElement {
+  constructor() {
+    super();
+    const btn = createButton();
+    const wrapper = this.parentNode;
+
+    this.appendChild(btn);
+    btn.addEventListener('click', async () => {
+      const textToCopy = wrapper.innerText;
+      await navigator.clipboard.writeText(textToCopy);
+    });
+  }
+}

package/src/components/experimental/duo/chat/components/duo_chat_message/copy_code_element.spec.js

@@ -0,0 +1,64 @@
+import { CopyCodeElement } from './copy_code_element';
+
+describe('copy-code element', () => {
+  customElements.define('copy-code', CopyCodeElement);
+  const code = 'function sum(a, b) {\n  return a + b;\n}';
+  const findCustomElement = () => document.querySelector('copy-code');
+  const findButton = () => document.querySelector('copy-code button');
+  const findButtonIcon = () => document.querySelector('copy-code button svg use');
+
+  beforeEach(() => {
+    document.body.innerHTML = `<div><pre><code>${code}</code></pre><copy-code></copy-code></div>`;
+  });
+
+  it('should create a button', () => {
+    expect(customElements.get('copy-code')).toBeDefined();
+  });
+
+  it('does not setup shadowDom on the custom element', () => {
+    expect(findCustomElement().shadowRoot).toBeNull();
+  });
+
+  it('adds a button to the DOM as a direct child', () => {
+    expect(findButton()).toBeDefined();
+  });
+
+  it('adds the correct icon to the button', () => {
+    expect(findButtonIcon().getAttribute('href')).toContain('#copy-to-clipboard');
+  });
+
+  describe('interaction', () => {
+    let copiedText = '';
+
+    beforeEach(() => {
+      Object.defineProperty(HTMLElement.prototype, 'innerText', {
+        get() {
+          return this.textContent.trim();
+        },
+        configurable: true,
+      });
+
+      global.navigator.clipboard = {
+        writeText: jest.fn().mockImplementation((text) => {
+          copiedText = text;
+          return Promise.resolve();
+        }),
+        readText: jest.fn().mockImplementation(() => Promise.resolve(copiedText)),
+      };
+    });
+
+    afterEach(() => {
+      // In JSDOM, `innerText` doesn't exist on the prototype.
+      // However, we can not set it to `undefined` as the property description should be an object
+      Object.defineProperty(HTMLElement.prototype, 'innerText', {});
+
+      jest.resetAllMocks();
+    });
+
+    it('copies the content of the parentNode to the clipboard when the button is clicked', async () => {
+      findButton().click();
+      const text = await navigator.clipboard.readText();
+      expect(text).toBe(code);
+    });
+  });
+});

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

@@ -15,4 +15,19 @@
   p:last-of-type {
     @include gl-mb-0;
   }
+
+  copy-code {
+    @include gl-absolute;
+    @include gl-transition-medium;
+    @include gl-opacity-0;
+    @include gl-right-4;
+    @include gl-top-3;
+  }
+
+  .js-markdown-code.markdown-code-block:hover {
+    copy-code,
+    copy-code:focus-within {
+      @include gl-opacity-10;
+    }
+  }
 }

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

@@ -47,6 +47,12 @@ describe('DuoChatMessage', () => {
     jest.clearAllMocks();
   });
 
+  it('registers the custom `copy-code` element', () => {
+    expect(customElements.get('copy-code')).toBeUndefined();
+    createComponent();
+    expect(customElements.get('copy-code')).toBeDefined();
+  });
+
   describe('rendering', () => {
     beforeEach(() => {
       renderMarkdown.mockImplementation(() => mockMarkdownContent);
@@ -79,6 +85,10 @@ describe('DuoChatMessage', () => {
       });
     });
 
+    it('renders the `copy-code` button for the code snippet', () => {
+      expect(findCopyCodeButton().exists()).toBe(true);
+    });
+
     it('renders the documentation sources component by default', () => {
       expect(findDocumentSources().exists()).toBe(true);
       expect(findDocumentSources().props('sources')).toEqual(MOCK_RESPONSE_MESSAGE.extras.sources);
@@ -107,10 +117,6 @@ describe('DuoChatMessage', () => {
       findUserFeedback().vm.$emit('feedback', 'foo');
       expect(wrapper.emitted('track-feedback')).toEqual([['foo']]);
     });
-
-    it('does not strip out the <copy-code/> element from HTML output', () => {
-      expect(findCopyCodeButton().exists()).toBe(true);
-    });
   });
 
   describe('message output', () => {

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

@@ -3,6 +3,7 @@ import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
+import { CopyCodeElement } from './copy_code_element';
 
 const concatIndicesUntilEmpty = (arr) => {
   const start = arr.findIndex((el) => el);
@@ -66,6 +67,9 @@ export default {
      * Is intentionally non-reactive
      */
     this.messageChunks = [];
+    if (!customElements.get('copy-code')) {
+      customElements.define('copy-code', CopyCodeElement);
+    }
   },
   mounted() {
     this.messageContent = this.content;