Merge branch...

Merge branch '426755-frontend-add-a-copy-to-clipboard-button-in-the-code-snippet-in-the-component-tab' into 'master' 

Add a copy button inside Catalog Resource components tab

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/134805



Merged-by: Andrew Fontaine <afontaine@gitlab.com>
Approved-by: Andrew Fontaine <afontaine@gitlab.com>
Approved-by: Briley Sandlin <bsandlin@gitlab.com>
Reviewed-by: Andrew Fontaine <afontaine@gitlab.com>
Reviewed-by: Frédéric Caplette <fcaplette@gitlab.com>
Co-authored-by: Frédéric Caplette <fcaplette@gitlab.com>

app/assets/javascripts/ci/catalog/components/details/ci_resource_components.vue

 <script>
-import { GlLoadingIcon, GlTableLite } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlTableLite } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import { __, s__ } from '~/locale';
 import getCiCatalogResourceComponents from '../../graphql/queries/get_ci_catalog_resource_components.query.graphql';
 
 export default {
   components: {
+    GlButton,
     GlLoadingIcon,
     GlTableLite,
   },
@@ -70,6 +71,8 @@ export default {
     },
   ],
   i18n: {
+    copyText: __('Copy value'),
+    copyAriaText: __('Copy to clipboard'),
     inputTitle: s__('CiCatalogComponent|Inputs'),
     fetchError: s__("CiCatalogComponent|There was an error fetching this resource's components"),
   },
@@ -88,7 +91,24 @@ export default {
       >
         <h3 class="gl-font-size-h2" data-testid="component-name">{{ component.name }}</h3>
         <p class="gl-mt-5">{{ component.description }}</p>
-        <pre class="gl-w-85p gl-py-4">{{ generateSnippet(component.path) }}</pre>
+        <div class="gl-display-flex">
+          <pre
+            class="gl-w-85p gl-py-4 gl-display-flex gl-justify-content-space-between gl-m-0 gl-border-r-none"
+          ><span>{{ generateSnippet(component.path) }}</span>
+        </pre>
+          <div class="gl--flex-center gl-bg-gray-10 gl-border gl-border-l-none">
+            <gl-button
+              class="gl-p-4! gl-mr-3!"
+              category="tertiary"
+              icon="copy-to-clipboard"
+              size="small"
+              :title="$options.i18n.copyText"
+              :data-clipboard-text="generateSnippet(component.path)"
+              data-testid="copy-to-clipboard"
+              :aria-label="$options.i18n.copyAriaText"
+            />
+          </div>
+        </div>
         <div class="gl-mt-5">
           <b class="gl-display-block gl-mb-4"> {{ $options.i18n.inputTitle }}</b>
           <gl-table-lite :items="component.inputs.nodes" :fields="$options.fields">

spec/frontend/ci/catalog/components/details/ci_resource_components_spec.js

@@ -38,6 +38,7 @@ describe('CiResourceComponents', () => {
   };
 
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findCopyToClipboardButton = (i) => wrapper.findAllByTestId('copy-to-clipboard').at(i);
   const findComponents = () => wrapper.findAllByTestId('component-section');
 
   beforeEach(() => {
@@ -98,6 +99,15 @@ describe('CiResourceComponents', () => {
       });
     });
 
+    it('adds a copy-to-clipboard button', () => {
+      components.forEach((component, i) => {
+        const button = findCopyToClipboardButton(i);
+
+        expect(button.props().icon).toBe('copy-to-clipboard');
+        expect(button.attributes('data-clipboard-text')).toContain(component.path);
+      });
+    });
+
     describe('inputs', () => {
       it('renders the component parameter attributes', () => {
         const [firstComponent] = components;