Add tracking to container registry quickstart

- add tracking
- add unit tests for the new behaviour

app/assets/javascripts/registry/explorer/components/quickstart_dropdown.vue

 <script>
 import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
+import Tracking from '~/tracking';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import {
   QUICK_START,
@@ -19,6 +20,7 @@ export default {
     GlFormInputGroup,
     ClipboardButton,
   },
+  mixins: [Tracking.mixin({ label: 'quickstart_dropdown' })],
   i18n: {
     dropdownTitle: QUICK_START,
     loginCommandLabel: LOGIN_COMMAND_LABEL,
@@ -34,7 +36,13 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown :text="$options.i18n.dropdownTitle" variant="primary" size="sm" right>
+  <gl-dropdown
+    :text="$options.i18n.dropdownTitle"
+    variant="primary"
+    size="sm"
+    right
+    @shown="track('click_dropdown')"
+  >
     <!-- This li is used as a container since gl-dropdown produces a root ul, this mimics the functionality exposed by b-dropdown-form -->
     <li role="presentation" class="px-2 py-1 dropdown-menu-large">
       <form>
@@ -49,6 +57,7 @@ export default {
                 class="border"
                 :text="dockerLoginCommand"
                 :title="$options.i18n.copyLoginTitle"
+                @click.native="track('click_copy_login')"
               />
             </template>
           </gl-form-input-group>
@@ -65,6 +74,7 @@ export default {
                 class="border"
                 :text="dockerBuildCommand"
                 :title="$options.i18n.copyBuildTitle"
+                @click.native="track('click_copy_build')"
               />
             </template>
           </gl-form-input-group>
@@ -82,6 +92,7 @@ export default {
                 class="border"
                 :text="dockerPushCommand"
                 :title="$options.i18n.copyPushTitle"
+                @click.native="track('click_copy_push')"
               />
             </template>
           </gl-form-input-group>

changelogs/unreleased/212325-track-the-adoption-and-usage-of-the-quick-setup-button-in-the-cont.yml

+---
+title: Add event tracking to Container regstry quickstart
+merge_request: 27990
+author:
+type: changed

spec/frontend/registry/explorer/components/quickstart_dropdown_spec.js

 import Vuex from 'vuex';
 import { mount, createLocalVue } from '@vue/test-utils';
 import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
+import Tracking from '~/tracking';
 import * as getters from '~/registry/explorer/stores/getters';
 import QuickstartDropdown from '~/registry/explorer/components/quickstart_dropdown.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -42,6 +43,7 @@ describe('quickstart_dropdown', () => {
   };
 
   beforeEach(() => {
+    jest.spyOn(Tracking, 'event');
     mountComponent();
   });
 
@@ -55,12 +57,21 @@ describe('quickstart_dropdown', () => {
     expect(findDropdownButton().text()).toContain(QUICK_START);
   });
 
+  it('clicking on the dropdown emit a tracking event', () => {
+    findDropdownButton().vm.$emit('shown');
+    expect(Tracking.event).toHaveBeenCalledWith(
+      undefined,
+      'click_dropdown',
+      expect.objectContaining({ label: 'quickstart_dropdown' }),
+    );
+  });
+
   describe.each`
-    index | id                    | labelText              | titleText           | getter
-    ${0}  | ${'docker-login-btn'} | ${LOGIN_COMMAND_LABEL} | ${COPY_LOGIN_TITLE} | ${'dockerLoginCommand'}
-    ${1}  | ${'docker-build-btn'} | ${BUILD_COMMAND_LABEL} | ${COPY_BUILD_TITLE} | ${'dockerBuildCommand'}
-    ${2}  | ${'docker-push-btn'}  | ${PUSH_COMMAND_LABEL}  | ${COPY_PUSH_TITLE}  | ${'dockerPushCommand'}
-  `('form group at $index', ({ index, id, labelText, titleText, getter }) => {
+    index | id                    | labelText              | titleText           | getter                  | trackedEvent
+    ${0}  | ${'docker-login-btn'} | ${LOGIN_COMMAND_LABEL} | ${COPY_LOGIN_TITLE} | ${'dockerLoginCommand'} | ${'click_copy_login'}
+    ${1}  | ${'docker-build-btn'} | ${BUILD_COMMAND_LABEL} | ${COPY_BUILD_TITLE} | ${'dockerBuildCommand'} | ${'click_copy_build'}
+    ${2}  | ${'docker-push-btn'}  | ${PUSH_COMMAND_LABEL}  | ${COPY_PUSH_TITLE}  | ${'dockerPushCommand'}  | ${'click_copy_push'}
+  `('form group at $index', ({ index, id, labelText, titleText, getter, trackedEvent }) => {
     let formGroup;
 
     const findFormInputGroup = parent => parent.find(GlFormInputGroup);
@@ -91,5 +102,19 @@ describe('quickstart_dropdown', () => {
       expect(clipBoardButton.props('title')).toBe(titleText);
       expect(clipBoardButton.props('text')).toBe(store.getters[getter]);
     });
+
+    it('clipboard button tracks click event', () => {
+      const clipBoardButton = findClipboardButton(formGroup);
+      clipBoardButton.trigger('click');
+      /* This expect to be called with first argument undefined so that
+       * the function internally can default to document.body.dataset.page
+       * https://docs.gitlab.com/ee/telemetry/frontend.html#tracking-within-vue-components
+       */
+      expect(Tracking.event).toHaveBeenCalledWith(
+        undefined,
+        trackedEvent,
+        expect.objectContaining({ label: 'quickstart_dropdown' }),
+      );
+    });
   });
 });