Refactor installation components

Created new InstallationTabs component
Removed GlTabs and replaced with new component
Updated tab change tracking
Updated tests

ee/app/assets/javascripts/packages/details/components/conan_installation.vue

 <script>
-import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui';
+import { GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import CodeInstruction from './code_instruction.vue';
 import Tracking from '~/tracking';
 import { TrackingActions, TrackingLabels } from '../constants';
 import { trackInstallationTabChange } from '../utils';
 import { mapGetters, mapState } from 'vuex';
+import InstallationTabs from './installation_tabs.vue';
 
 export default {
   name: 'ConanInstallation',
@@ -13,15 +14,9 @@ export default {
     CodeInstruction,
     GlLink,
     GlSprintf,
-    GlTab,
-    GlTabs,
+    InstallationTabs,
   },
-  mixins: [
-    Tracking.mixin({
-      label: TrackingLabels.CONAN_INSTALLATION,
-    }),
-    trackInstallationTabChange,
-  ],
+  mixins: [Tracking.mixin(), trackInstallationTabChange],
   computed: {
     ...mapState(['conanHelpPath']),
     ...mapGetters(['conanInstallationCommand', 'conanSetupCommand']),
@@ -32,13 +27,13 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
+  trackingLabel: TrackingLabels.CONAN_INSTALLATION,
 };
 </script>
 
 <template>
-  <div class="append-bottom-default">
-    <gl-tabs @input="trackInstallationTabChange">
-      <gl-tab :title="s__('PackageRegistry|Installation')" title-item-class="js-installation-tab">
+  <installation-tabs :tracking-label="$options.trackingLabel">
+    <template #installation>
       <div class="prepend-left-default append-right-default">
         <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Conan Command') }}</p>
         <code-instruction
@@ -48,8 +43,9 @@ export default {
           :tracking-action="$options.trackingActions.COPY_CONAN_COMMAND"
         />
       </div>
-      </gl-tab>
-      <gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
+    </template>
+
+    <template #setup>
       <div class="prepend-left-default append-right-default">
         <p class="prepend-top-8 font-weight-bold">
           {{ s__('PackageRegistry|Add Conan Remote') }}
@@ -66,7 +62,6 @@ export default {
           </template>
         </gl-sprintf>
       </div>
-      </gl-tab>
-    </gl-tabs>
-  </div>
+    </template>
+  </installation-tabs>
 </template>

ee/app/assets/javascripts/packages/details/components/installation_tabs.vue

+<script>
+import Tracking from '~/tracking';
+import { trackInstallationTabChange } from '../utils';
+import { GlTab, GlTabs } from '@gitlab/ui';
+
+export default {
+  name: 'TabWrapper',
+  components: {
+    GlTab,
+    GlTabs,
+  },
+  mixins: [Tracking.mixin(), trackInstallationTabChange],
+  props: {
+    trackingLabel: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="append-bottom-default">
+    <gl-tabs @input="trackInstallationTabChange">
+      <gl-tab :title="s__('PackageRegistry|Installation')" title-item-class="js-installation-tab">
+        <slot name="installation"></slot>
+      </gl-tab>
+      <gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
+        <slot name="setup"></slot>
+      </gl-tab>
+    </gl-tabs>
+  </div>
+</template>

ee/app/assets/javascripts/packages/details/components/maven_installation.vue

 <script>
-import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui';
+import { GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import CodeInstruction from './code_instruction.vue';
-import Tracking from '~/tracking';
 import { TrackingActions, TrackingLabels } from '../constants';
-import { trackInstallationTabChange } from '../utils';
 import { mapGetters, mapState } from 'vuex';
+import InstallationTabs from './installation_tabs.vue';
 
 export default {
   name: 'MavenInstallation',
@@ -13,15 +12,8 @@ export default {
     CodeInstruction,
     GlLink,
     GlSprintf,
-    GlTab,
-    GlTabs,
+    InstallationTabs,
   },
-  mixins: [
-    Tracking.mixin({
-      label: TrackingLabels.MAVEN_INSTALLATION,
-    }),
-    trackInstallationTabChange,
-  ],
   computed: {
     ...mapState(['mavenHelpPath']),
     ...mapGetters(['mavenInstallationXml', 'mavenInstallationCommand', 'mavenSetupXml']),
@@ -38,13 +30,13 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
+  trackingLabel: TrackingLabels.MAVEN_INSTALLATION,
 };
 </script>
 
 <template>
-  <div class="append-bottom-default">
-    <gl-tabs @input="trackInstallationTabChange">
-      <gl-tab :title="s__('PackageRegistry|Installation')" title-item-class="js-installation-tab">
+  <installation-tabs :tracking-label="$options.trackingLabel">
+    <template #installation>
       <div class="prepend-left-default append-right-default">
         <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Maven XML') }}</p>
         <p>
@@ -72,8 +64,9 @@ export default {
           :tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND"
         />
       </div>
-      </gl-tab>
-      <gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
+    </template>
+
+    <template #setup>
       <div class="prepend-left-default append-right-default">
         <p>
           <gl-sprintf :message="$options.i18n.setupText">
@@ -95,7 +88,6 @@ export default {
           </template>
         </gl-sprintf>
       </div>
-      </gl-tab>
-    </gl-tabs>
-  </div>
+    </template>
+  </installation-tabs>
 </template>

ee/app/assets/javascripts/packages/details/components/npm_installation.vue

 <script>
-import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui';
+import { GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import CodeInstruction from './code_instruction.vue';
 import Tracking from '~/tracking';
 import { NpmManager, TrackingActions, TrackingLabels } from '../constants';
 import { trackInstallationTabChange } from '../utils';
 import { mapGetters, mapState } from 'vuex';
+import InstallationTabs from './installation_tabs.vue';
 
 export default {
   name: 'NpmInstallation',
@@ -13,15 +14,9 @@ export default {
     CodeInstruction,
     GlLink,
     GlSprintf,
-    GlTab,
-    GlTabs,
+    InstallationTabs,
   },
-  mixins: [
-    Tracking.mixin({
-      label: TrackingLabels.NPM_INSTALLATION,
-    }),
-    trackInstallationTabChange,
-  ],
+  mixins: [Tracking.mixin(), trackInstallationTabChange],
   computed: {
     ...mapState(['npmHelpPath']),
     ...mapGetters(['npmInstallationCommand', 'npmSetupCommand']),
@@ -44,13 +39,13 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
+  trackingLabel: TrackingLabels.NPM_INSTALLATION,
 };
 </script>
 
 <template>
-  <div class="append-bottom-default">
-    <gl-tabs @input="trackInstallationTabChange">
-      <gl-tab :title="s__('PackageRegistry|Installation')" title-item-class="js-installation-tab">
+  <installation-tabs :tracking-label="$options.trackingLabel">
+    <template #installation>
       <div class="prepend-left-default append-right-default">
         <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
         <code-instruction
@@ -68,8 +63,9 @@ export default {
           :tracking-action="$options.trackingActions.COPY_YARN_INSTALL_COMMAND"
         />
       </div>
-      </gl-tab>
-      <gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
+    </template>
+
+    <template #setup>
       <div class="prepend-left-default append-right-default">
         <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
         <code-instruction
@@ -93,7 +89,6 @@ export default {
           </template>
         </gl-sprintf>
       </div>
-      </gl-tab>
-    </gl-tabs>
-  </div>
+    </template>
+  </installation-tabs>
 </template>

ee/app/assets/javascripts/packages/details/components/nuget_installation.vue

 <script>
-import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui';
+import { GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import CodeInstruction from './code_instruction.vue';
 import Tracking from '~/tracking';
 import { TrackingActions, TrackingLabels } from '../constants';
 import { trackInstallationTabChange } from '../utils';
 import { mapGetters, mapState } from 'vuex';
+import InstallationTabs from './installation_tabs.vue';
 
 export default {
   name: 'NugetInstallation',
@@ -13,15 +14,9 @@ export default {
     CodeInstruction,
     GlLink,
     GlSprintf,
-    GlTab,
-    GlTabs,
+    InstallationTabs,
   },
-  mixins: [
-    Tracking.mixin({
-      label: TrackingLabels.NUGET_INSTALLATION,
-    }),
-    trackInstallationTabChange,
-  ],
+  mixins: [Tracking.mixin(), trackInstallationTabChange],
   computed: {
     ...mapState(['nugetHelpPath']),
     ...mapGetters(['nugetInstallationCommand', 'nugetSetupCommand']),
@@ -32,13 +27,13 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
+  trackingLabel: TrackingLabels.NUGET_INSTALLATION,
 };
 </script>
 
 <template>
-  <div class="append-bottom-default">
-    <gl-tabs @input="trackInstallationTabChange">
-      <gl-tab :title="s__('PackageRegistry|Installation')" title-item-class="js-installation-tab">
+  <installation-tabs :tracking-label="$options.trackingLabel">
+    <template #installation>
       <div class="prepend-left-default append-right-default">
         <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|NuGet Command') }}</p>
         <code-instruction
@@ -48,8 +43,9 @@ export default {
           :tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND"
         />
       </div>
-      </gl-tab>
-      <gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
+    </template>
+
+    <template #setup>
       <div class="prepend-left-default append-right-default">
         <p class="prepend-top-8 font-weight-bold">
           {{ s__('PackageRegistry|Add NuGet Source') }}
@@ -66,7 +62,6 @@ export default {
           </template>
         </gl-sprintf>
       </div>
-      </gl-tab>
-    </gl-tabs>
-  </div>
+    </template>
+  </installation-tabs>
 </template>

ee/app/assets/javascripts/packages/details/utils.js

@@ -7,7 +7,7 @@ export const trackInstallationTabChange = {
   methods: {
     trackInstallationTabChange(tabIndex) {
       const action = tabIndex === 0 ? TrackingActions.INSTALLATION : TrackingActions.REGISTRY_SETUP;
-      this.track(action);
+      this.track(action, { label: this.trackingLabel });
     },
   },
 };

ee/spec/frontend/packages/details/components/conan_installation_spec.js

@@ -3,8 +3,6 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import ConanInstallation from 'ee/packages/details/components/conan_installation.vue';
 import { conanPackage as packageEntity } from '../../mock_data';
 import { registryUrl as conanPath } from '../mock_data';
-import { TrackingActions, TrackingLabels } from 'ee/packages/details/constants';
-import Tracking from '~/tracking';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -26,8 +24,6 @@ describe('ConanInstallation', () => {
     },
   });
 
-  const installationTab = () => wrapper.find('.js-installation-tab > a');
-  const setupTab = () => wrapper.find('.js-setup-tab > a');
   const conanInstallationCommand = () => wrapper.find('.js-conan-command > input');
   const conanSetupCommand = () => wrapper.find('.js-conan-setup > input');
 
@@ -57,38 +53,4 @@ describe('ConanInstallation', () => {
       expect(conanSetupCommand().element.value).toBe(conanSetupCommandStr);
     });
   });
-
-  describe('tab change tracking', () => {
-    let eventSpy;
-    const label = TrackingLabels.CONAN_INSTALLATION;
-
-    beforeEach(() => {
-      eventSpy = jest.spyOn(Tracking, 'event');
-    });
-
-    it('should track when the setup tab is clicked', () => {
-      setupTab().trigger('click');
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.REGISTRY_SETUP, {
-          label,
-        });
-      });
-    });
-
-    it('should track when the installation tab is clicked', () => {
-      setupTab().trigger('click');
-
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          installationTab().trigger('click');
-        })
-        .then(() => {
-          expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.INSTALLATION, {
-            label,
-          });
-        });
-    });
-  });
 });

ee/spec/frontend/packages/details/components/installation_tabs_spec.js

+import { mount } from '@vue/test-utils';
+import InstallationTabs from 'ee/packages/details/components/installation_tabs.vue';
+import Tracking from '~/tracking';
+import { TrackingActions } from 'ee/packages/details/constants';
+
+describe('InstallationTabs', () => {
+  let wrapper;
+  let eventSpy;
+
+  const trackingLabel = 'foo';
+
+  function createComponent() {
+    wrapper = mount(InstallationTabs, {
+      propsData: {
+        trackingLabel,
+      },
+    });
+  }
+
+  const installationTab = () => wrapper.find('.js-installation-tab > a');
+  const setupTab = () => wrapper.find('.js-setup-tab > a');
+
+  beforeEach(() => {
+    eventSpy = jest.spyOn(Tracking, 'event');
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('tab change tracking', () => {
+    it('should track when the setup tab is clicked', () => {
+      setupTab().trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.REGISTRY_SETUP, {
+          label: trackingLabel,
+        });
+      });
+    });
+
+    it('should track when the installation tab is clicked', () => {
+      setupTab().trigger('click');
+
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          installationTab().trigger('click');
+        })
+        .then(() => {
+          expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.INSTALLATION, {
+            label: trackingLabel,
+          });
+        });
+    });
+  });
+});

ee/spec/frontend/packages/details/components/maven_installation_spec.js

 import Vuex from 'vuex';
 import { mount, createLocalVue } from '@vue/test-utils';
 import MavenInstallation from 'ee/packages/details/components/maven_installation.vue';
-import { TrackingActions, TrackingLabels } from 'ee/packages/details/constants';
 import { registryUrl as mavenPath } from '../mock_data';
 import { mavenPackage as packageEntity } from '../../mock_data';
-import Tracking from '~/tracking';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -28,8 +26,6 @@ describe('MavenInstallation', () => {
     },
   });
 
-  const installationTab = () => wrapper.find('.js-installation-tab > a');
-  const setupTab = () => wrapper.find('.js-setup-tab > a');
   const xmlCode = () => wrapper.find('.js-maven-xml > pre');
   const mavenCommand = () => wrapper.find('.js-maven-command > input');
   const xmlSetup = () => wrapper.find('.js-maven-setup-xml > pre');
@@ -64,37 +60,4 @@ describe('MavenInstallation', () => {
       expect(xmlSetup().text()).toBe(mavenSetupXml);
     });
   });
-
-  describe('tab change tracking', () => {
-    let eventSpy;
-    const label = TrackingLabels.MAVEN_INSTALLATION;
-
-    beforeEach(() => {
-      eventSpy = jest.spyOn(Tracking, 'event');
-    });
-
-    it('should track when the setup tab is clicked', () => {
-      setupTab().trigger('click');
-
-      return wrapper.vm.$nextTick(() => {
-        expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.REGISTRY_SETUP, {
-          label,
-        });
-      });
-    });
-
-    it('should track when the installation tab is clicked', () => {
-      setupTab().trigger('click');
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          installationTab().trigger('click');
-        })
-        .then(() => {
-          expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.INSTALLATION, {
-            label,
-          });
-        });
-    });
-  });
 });

ee/spec/frontend/packages/details/components/npm_installation_spec.js

 import Vuex from 'vuex';
 import { mount, createLocalVue } from '@vue/test-utils';
 import NpmInstallation from 'ee/packages/details/components/npm_installation.vue';
-import { TrackingActions, TrackingLabels } from 'ee/packages/details/constants';
 import { npmPackage as packageEntity } from '../../mock_data';
 import { registryUrl as nugetPath } from '../mock_data';
-import Tracking from '~/tracking';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -17,8 +15,6 @@ describe('NpmInstallation', () => {
   const yarnCommandStr = 'npm install';
   const yarnSetupStr = 'npm setup';
 
-  const installationTab = () => wrapper.find('.js-installation-tab > a');
-  const setupTab = () => wrapper.find('.js-setup-tab > a');
   const npmInstallationCommand = () => wrapper.find('.js-npm-install > input');
   const npmSetupCommand = () => wrapper.find('.js-npm-setup > input');
   const yarnInstallationCommand = () => wrapper.find('.js-yarn-install > input');
@@ -73,39 +69,4 @@ describe('NpmInstallation', () => {
       expect(yarnSetupCommand().element.value).toBe(yarnSetupStr);
     });
   });
-
-  describe('tab change tracking', () => {
-    let eventSpy;
-    const label = TrackingLabels.NPM_INSTALLATION;
-
-    beforeEach(() => {
-      eventSpy = jest.spyOn(Tracking, 'event');
-      createComponent();
-    });
-
-    it('should track when the setup tab is clicked', () => {
-      setupTab().trigger('click');
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.REGISTRY_SETUP, {
-          label,
-        });
-      });
-    });
-
-    it('should track when the installation tab is clicked', () => {
-      setupTab().trigger('click');
-
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          installationTab().trigger('click');
-        })
-        .then(() => {
-          expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.INSTALLATION, {
-            label,
-          });
-        });
-    });
-  });
 });

ee/spec/frontend/packages/details/components/nuget_installation_spec.js

@@ -3,8 +3,6 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import NugetInstallation from 'ee/packages/details/components/nuget_installation.vue';
 import { nugetPackage as packageEntity } from '../../mock_data';
 import { registryUrl as nugetPath } from '../mock_data';
-import { TrackingActions, TrackingLabels } from 'ee/packages/details/constants';
-import Tracking from '~/tracking';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -26,8 +24,6 @@ describe('NugetInstallation', () => {
     },
   });
 
-  const installationTab = () => wrapper.find('.js-installation-tab > a');
-  const setupTab = () => wrapper.find('.js-setup-tab > a');
   const nugetInstallationCommand = () => wrapper.find('.js-nuget-command > input');
   const nugetSetupCommand = () => wrapper.find('.js-nuget-setup > input');
 
@@ -57,39 +53,4 @@ describe('NugetInstallation', () => {
       expect(nugetSetupCommand().element.value).toBe(nugetSetupCommandStr);
     });
   });
-
-  describe('tab change tracking', () => {
-    let eventSpy;
-    const label = TrackingLabels.NUGET_INSTALLATION;
-
-    beforeEach(() => {
-      eventSpy = jest.spyOn(Tracking, 'event');
-    });
-
-    it('should track when the setup tab is clicked', () => {
-      setupTab().trigger('click');
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.REGISTRY_SETUP, {
-          label,
-        });
-      });
-    });
-
-    it('should track when the installation tab is clicked', () => {
-      setupTab().trigger('click');
-
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          installationTab().trigger('click');
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
-          expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.INSTALLATION, {
-            label,
-          });
-        });
-    });
-  });
 });