Applying reviewer feedback

Moved divs into installation_tabs
Added test for tab rendering

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

@@ -34,34 +34,30 @@ export default {
 <template>
   <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
-          :instruction="conanInstallationCommand"
-          :copy-text="s__('PackageRegistry|Copy Conan Command')"
-          class="js-conan-command"
-          :tracking-action="$options.trackingActions.COPY_CONAN_COMMAND"
-        />
-      </div>
+      <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Conan Command') }}</p>
+      <code-instruction
+        :instruction="conanInstallationCommand"
+        :copy-text="s__('PackageRegistry|Copy Conan Command')"
+        class="js-conan-command"
+        :tracking-action="$options.trackingActions.COPY_CONAN_COMMAND"
+      />
     </template>
 
     <template #setup>
-      <div class="prepend-left-default append-right-default">
-        <p class="prepend-top-8 font-weight-bold">
-          {{ s__('PackageRegistry|Add Conan Remote') }}
-        </p>
-        <code-instruction
-          :instruction="conanSetupCommand"
-          :copy-text="s__('PackageRegistry|Copy Conan Setup Command')"
-          class="js-conan-setup"
-          :tracking-action="$options.trackingActions.COPY_CONAN_SETUP_COMMAND"
-        />
-        <gl-sprintf :message="$options.i18n.helpText">
-          <template #link="{ content }">
-            <gl-link :href="conanHelpPath" target="_blank">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </div>
+      <p class="prepend-top-8 font-weight-bold">
+        {{ s__('PackageRegistry|Add Conan Remote') }}
+      </p>
+      <code-instruction
+        :instruction="conanSetupCommand"
+        :copy-text="s__('PackageRegistry|Copy Conan Setup Command')"
+        class="js-conan-setup"
+        :tracking-action="$options.trackingActions.COPY_CONAN_SETUP_COMMAND"
+      />
+      <gl-sprintf :message="$options.i18n.helpText">
+        <template #link="{ content }">
+          <gl-link :href="conanHelpPath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
     </template>
   </installation-tabs>
 </template>

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

@@ -23,10 +23,14 @@ export default {
   <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>
+        <div class="prepend-left-default append-right-default">
+          <slot name="installation"></slot>
+        </div>
       </gl-tab>
       <gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
-        <slot name="setup"></slot>
+        <div class="prepend-left-default append-right-default">
+          <slot name="setup"></slot>
+        </div>
       </gl-tab>
     </gl-tabs>
   </div>

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

@@ -37,57 +37,53 @@ export default {
 <template>
   <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>
-          <gl-sprintf :message="$options.i18n.xmlText">
-            <template #code="{ content }">
-              <code>{{ content }}</code>
-            </template>
-          </gl-sprintf>
-        </p>
-        <code-instruction
-          :instruction="mavenInstallationXml"
-          :copy-text="s__('PackageRegistry|Copy Maven XML')"
-          class="js-maven-xml"
-          multiline
-          :tracking-action="$options.trackingActions.COPY_MAVEN_XML"
-        />
+      <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Maven XML') }}</p>
+      <p>
+        <gl-sprintf :message="$options.i18n.xmlText">
+          <template #code="{ content }">
+            <code>{{ content }}</code>
+          </template>
+        </gl-sprintf>
+      </p>
+      <code-instruction
+        :instruction="mavenInstallationXml"
+        :copy-text="s__('PackageRegistry|Copy Maven XML')"
+        class="js-maven-xml"
+        multiline
+        :tracking-action="$options.trackingActions.COPY_MAVEN_XML"
+      />
 
-        <p class="prepend-top-default font-weight-bold">
-          {{ s__('PackageRegistry|Maven Command') }}
-        </p>
-        <code-instruction
-          :instruction="mavenInstallationCommand"
-          :copy-text="s__('PackageRegistry|Copy Maven command')"
-          class="js-maven-command"
-          :tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND"
-        />
-      </div>
+      <p class="prepend-top-default font-weight-bold">
+        {{ s__('PackageRegistry|Maven Command') }}
+      </p>
+      <code-instruction
+        :instruction="mavenInstallationCommand"
+        :copy-text="s__('PackageRegistry|Copy Maven command')"
+        class="js-maven-command"
+        :tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND"
+      />
     </template>
 
     <template #setup>
-      <div class="prepend-left-default append-right-default">
-        <p>
-          <gl-sprintf :message="$options.i18n.setupText">
-            <template #code="{ content }">
-              <code>{{ content }}</code>
-            </template>
-          </gl-sprintf>
-        </p>
-        <code-instruction
-          :instruction="mavenSetupXml"
-          :copy-text="s__('PackageRegistry|Copy Maven registry XML')"
-          class="js-maven-setup-xml"
-          multiline
-          :tracking-action="$options.trackingActions.COPY_MAVEN_SETUP"
-        />
-        <gl-sprintf :message="$options.i18n.helpText">
-          <template #link="{ content }">
-            <gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link>
+      <p>
+        <gl-sprintf :message="$options.i18n.setupText">
+          <template #code="{ content }">
+            <code>{{ content }}</code>
           </template>
         </gl-sprintf>
-      </div>
+      </p>
+      <code-instruction
+        :instruction="mavenSetupXml"
+        :copy-text="s__('PackageRegistry|Copy Maven registry XML')"
+        class="js-maven-setup-xml"
+        multiline
+        :tracking-action="$options.trackingActions.COPY_MAVEN_SETUP"
+      />
+      <gl-sprintf :message="$options.i18n.helpText">
+        <template #link="{ content }">
+          <gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
     </template>
   </installation-tabs>
 </template>

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

@@ -46,49 +46,45 @@ export default {
 <template>
   <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
-          :instruction="npmCommand"
-          :copy-text="s__('PackageRegistry|Copy npm command')"
-          class="js-npm-install"
-          :tracking-action="$options.trackingActions.COPY_NPM_INSTALL_COMMAND"
-        />
+      <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
+      <code-instruction
+        :instruction="npmCommand"
+        :copy-text="s__('PackageRegistry|Copy npm command')"
+        class="js-npm-install"
+        :tracking-action="$options.trackingActions.COPY_NPM_INSTALL_COMMAND"
+      />
 
-        <p class="prepend-top-default font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p>
-        <code-instruction
-          :instruction="yarnCommand"
-          :copy-text="s__('PackageRegistry|Copy yarn command')"
-          class="js-yarn-install"
-          :tracking-action="$options.trackingActions.COPY_YARN_INSTALL_COMMAND"
-        />
-      </div>
+      <p class="prepend-top-default font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p>
+      <code-instruction
+        :instruction="yarnCommand"
+        :copy-text="s__('PackageRegistry|Copy yarn command')"
+        class="js-yarn-install"
+        :tracking-action="$options.trackingActions.COPY_YARN_INSTALL_COMMAND"
+      />
     </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
-          :instruction="npmSetup"
-          :copy-text="s__('PackageRegistry|Copy npm setup command')"
-          class="js-npm-setup"
-          :tracking-action="$options.trackingActions.COPY_NPM_SETUP_COMMAND"
-        />
+      <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
+      <code-instruction
+        :instruction="npmSetup"
+        :copy-text="s__('PackageRegistry|Copy npm setup command')"
+        class="js-npm-setup"
+        :tracking-action="$options.trackingActions.COPY_NPM_SETUP_COMMAND"
+      />
 
-        <p class="prepend-top-default font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p>
-        <code-instruction
-          :instruction="yarnSetupCommand"
-          :copy-text="s__('PackageRegistry|Copy yarn setup command')"
-          class="js-yarn-setup"
-          :tracking-action="$options.trackingActions.COPY_YARN_SETUP_COMMAND"
-        />
+      <p class="prepend-top-default font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p>
+      <code-instruction
+        :instruction="yarnSetupCommand"
+        :copy-text="s__('PackageRegistry|Copy yarn setup command')"
+        class="js-yarn-setup"
+        :tracking-action="$options.trackingActions.COPY_YARN_SETUP_COMMAND"
+      />
 
-        <gl-sprintf :message="$options.i18n.helpText">
-          <template #link="{ content }">
-            <gl-link :href="npmHelpPath" target="_blank">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </div>
+      <gl-sprintf :message="$options.i18n.helpText">
+        <template #link="{ content }">
+          <gl-link :href="npmHelpPath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
     </template>
   </installation-tabs>
 </template>

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

@@ -34,34 +34,30 @@ export default {
 <template>
   <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
-          :instruction="nugetInstallationCommand"
-          :copy-text="s__('PackageRegistry|Copy NuGet Command')"
-          class="js-nuget-command"
-          :tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND"
-        />
-      </div>
+      <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|NuGet Command') }}</p>
+      <code-instruction
+        :instruction="nugetInstallationCommand"
+        :copy-text="s__('PackageRegistry|Copy NuGet Command')"
+        class="js-nuget-command"
+        :tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND"
+      />
     </template>
 
     <template #setup>
-      <div class="prepend-left-default append-right-default">
-        <p class="prepend-top-8 font-weight-bold">
-          {{ s__('PackageRegistry|Add NuGet Source') }}
-        </p>
-        <code-instruction
-          :instruction="nugetSetupCommand"
-          :copy-text="s__('PackageRegistry|Copy NuGet Setup Command')"
-          class="js-nuget-setup"
-          :tracking-action="$options.trackingActions.COPY_NUGET_SETUP_COMMAND"
-        />
-        <gl-sprintf :message="$options.i18n.helpText">
-          <template #link="{ content }">
-            <gl-link :href="nugetHelpPath" target="_blank">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </div>
+      <p class="prepend-top-8 font-weight-bold">
+        {{ s__('PackageRegistry|Add NuGet Source') }}
+      </p>
+      <code-instruction
+        :instruction="nugetSetupCommand"
+        :copy-text="s__('PackageRegistry|Copy NuGet Setup Command')"
+        class="js-nuget-setup"
+        :tracking-action="$options.trackingActions.COPY_NUGET_SETUP_COMMAND"
+      />
+      <gl-sprintf :message="$options.i18n.helpText">
+        <template #link="{ content }">
+          <gl-link :href="nugetHelpPath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
     </template>
   </installation-tabs>
 </template>

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

@@ -3,6 +3,7 @@ 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 { GlTabs } from '@gitlab/ui';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -24,6 +25,7 @@ describe('ConanInstallation', () => {
     },
   });
 
+  const findTabs = () => wrapper.find(GlTabs);
   const conanInstallationCommand = () => wrapper.find('.js-conan-command > input');
   const conanSetupCommand = () => wrapper.find('.js-conan-setup > input');
 
@@ -42,6 +44,12 @@ describe('ConanInstallation', () => {
     if (wrapper) wrapper.destroy();
   });
 
+  describe('it renders', () => {
+    it('with GlTabs', () => {
+      expect(findTabs().exists()).toBe(true);
+    });
+  });
+
   describe('installation commands', () => {
     it('renders the correct command', () => {
       expect(conanInstallationCommand().element.value).toBe(conanInstallationCommandStr);

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

@@ -3,6 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import MavenInstallation from 'ee/packages/details/components/maven_installation.vue';
 import { registryUrl as mavenPath } from '../mock_data';
 import { mavenPackage as packageEntity } from '../../mock_data';
+import { GlTabs } from '@gitlab/ui';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -26,6 +27,7 @@ describe('MavenInstallation', () => {
     },
   });
 
+  const findTabs = () => wrapper.find(GlTabs);
   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');
@@ -45,6 +47,12 @@ describe('MavenInstallation', () => {
     if (wrapper) wrapper.destroy();
   });
 
+  describe('it renders', () => {
+    it('with GlTabs', () => {
+      expect(findTabs().exists()).toBe(true);
+    });
+  });
+
   describe('installation commands', () => {
     it('renders the correct xml block', () => {
       expect(xmlCode().text()).toBe(xmlCodeBlock);

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

@@ -3,6 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import NpmInstallation from 'ee/packages/details/components/npm_installation.vue';
 import { npmPackage as packageEntity } from '../../mock_data';
 import { registryUrl as nugetPath } from '../mock_data';
+import { GlTabs } from '@gitlab/ui';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -15,6 +16,7 @@ describe('NpmInstallation', () => {
   const yarnCommandStr = 'npm install';
   const yarnSetupStr = 'npm setup';
 
+  const findTabs = () => wrapper.find(GlTabs);
   const npmInstallationCommand = () => wrapper.find('.js-npm-install > input');
   const npmSetupCommand = () => wrapper.find('.js-npm-setup > input');
   const yarnInstallationCommand = () => wrapper.find('.js-yarn-install > input');
@@ -46,6 +48,12 @@ describe('NpmInstallation', () => {
     if (wrapper) wrapper.destroy();
   });
 
+  describe('it renders', () => {
+    it('with GlTabs', () => {
+      expect(findTabs().exists()).toBe(true);
+    });
+  });
+
   describe('npm commands', () => {
     it('renders the correct install command', () => {
       expect(npmInstallationCommand().element.value).toBe(npmCommandStr);

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

@@ -3,6 +3,7 @@ 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 { GlTabs } from '@gitlab/ui';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -24,6 +25,7 @@ describe('NugetInstallation', () => {
     },
   });
 
+  const findTabs = () => wrapper.find(GlTabs);
   const nugetInstallationCommand = () => wrapper.find('.js-nuget-command > input');
   const nugetSetupCommand = () => wrapper.find('.js-nuget-setup > input');
 
@@ -42,6 +44,12 @@ describe('NugetInstallation', () => {
     if (wrapper) wrapper.destroy();
   });
 
+  describe('it renders', () => {
+    it('with GlTabs', () => {
+      expect(findTabs().exists()).toBe(true);
+    });
+  });
+
   describe('installation commands', () => {
     it('renders the correct command', () => {
       expect(nugetInstallationCommand().element.value).toBe(nugetInstallationCommandStr);