Skip to content

G
gitlab-ce
Commit 19aa7cb7 authored by Denys Mishunov's avatar Denys Mishunov
Browse files
Options

Merge branch '201730-refactor-package-details-installation-tabs' into 'master' 

Refactor package details installation tabs

See merge request gitlab-org/gitlab!29946
parents 4d41259a bb546f6c
Show whitespace changes
Inline Side-by-side
Showing with 291 additions and 364 deletions
ee/app/assets/javascripts/packages/details/components/conan_installation.vue
View file @ 19aa7cb7
<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 +12,8 @@ export default {
CodeInstruction,
GlLink,
GlSprintf,
GlTab,
GlTabs,
InstallationTabs,
},
mixins: [
Tracking.mixin({
label: TrackingLabels.CONAN_INSTALLATION,
}),
trackInstallationTabChange,
],
computed: {
...mapState(['conanHelpPath']),
...mapGetters(['conanInstallationCommand', 'conanSetupCommand']),
......@@ -32,14 +24,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">
<div class="prepend-left-default append-right-default">
<installation-tabs :tracking-label="$options.trackingLabel">
<template #installation>
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Conan Command') }}</p>
<code-instruction
:instruction="conanInstallationCommand"
......@@ -47,10 +38,9 @@ export default {
class="js-conan-command"
:tracking-action="$options.trackingActions.COPY_CONAN_COMMAND"
/>
</div>
</gl-tab>
<gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
<div class="prepend-left-default append-right-default">
</template>
<template #setup>
<p class="prepend-top-8 font-weight-bold">
{{ s__('PackageRegistry|Add Conan Remote') }}
</p>
......@@ -65,8 +55,6 @@ export default {
<gl-link :href="conanHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</gl-tab>
</gl-tabs>
</div>
</template>
</installation-tabs>
</template>
ee/app/assets/javascripts/packages/details/components/installation_tabs.vue 0 → 100644
View file @ 19aa7cb7
<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">
<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">
<div class="prepend-left-default append-right-default">
<slot name="setup"></slot>
</div>
</gl-tab>
</gl-tabs>
</div>
</template>
ee/app/assets/javascripts/packages/details/components/maven_installation.vue
View file @ 19aa7cb7
<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,14 +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">
<div class="prepend-left-default append-right-default">
<installation-tabs :tracking-label="$options.trackingLabel">
<template #installation>
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Maven XML') }}</p>
<p>
<gl-sprintf :message="$options.i18n.xmlText">
......@@ -71,10 +62,9 @@ export default {
class="js-maven-command"
:tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND"
/>
</div>
</gl-tab>
<gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
<div class="prepend-left-default append-right-default">
</template>
<template #setup>
<p>
<gl-sprintf :message="$options.i18n.setupText">
<template #code="{ content }">
......@@ -94,8 +84,6 @@ export default {
<gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</gl-tab>
</gl-tabs>
</div>
</template>
</installation-tabs>
</template>
ee/app/assets/javascripts/packages/details/components/npm_installation.vue
View file @ 19aa7cb7
<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 +12,8 @@ export default {
CodeInstruction,
GlLink,
GlSprintf,
GlTab,
GlTabs,
InstallationTabs,
},
mixins: [
Tracking.mixin({
label: TrackingLabels.NPM_INSTALLATION,
}),
trackInstallationTabChange,
],
computed: {
...mapState(['npmHelpPath']),
...mapGetters(['npmInstallationCommand', 'npmSetupCommand']),
......@@ -44,14 +36,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">
<div class="prepend-left-default append-right-default">
<installation-tabs :tracking-label="$options.trackingLabel">
<template #installation>
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
<code-instruction
:instruction="npmCommand"
......@@ -67,10 +58,9 @@ export default {
class="js-yarn-install"
:tracking-action="$options.trackingActions.COPY_YARN_INSTALL_COMMAND"
/>
</div>
</gl-tab>
<gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
<div class="prepend-left-default append-right-default">
</template>
<template #setup>
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
<code-instruction
:instruction="npmSetup"
......@@ -92,8 +82,6 @@ export default {
<gl-link :href="npmHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</gl-tab>
</gl-tabs>
</div>
</template>
</installation-tabs>
</template>
ee/app/assets/javascripts/packages/details/components/nuget_installation.vue
View file @ 19aa7cb7
<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 +12,8 @@ export default {
CodeInstruction,
GlLink,
GlSprintf,
GlTab,
GlTabs,
InstallationTabs,
},
mixins: [
Tracking.mixin({
label: TrackingLabels.NUGET_INSTALLATION,
}),
trackInstallationTabChange,
],
computed: {
...mapState(['nugetHelpPath']),
...mapGetters(['nugetInstallationCommand', 'nugetSetupCommand']),
......@@ -32,14 +24,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">
<div class="prepend-left-default append-right-default">
<installation-tabs :tracking-label="$options.trackingLabel">
<template #installation>
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|NuGet Command') }}</p>
<code-instruction
:instruction="nugetInstallationCommand"
......@@ -47,10 +38,9 @@ export default {
class="js-nuget-command"
:tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND"
/>
</div>
</gl-tab>
<gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
<div class="prepend-left-default append-right-default">
</template>
<template #setup>
<p class="prepend-top-8 font-weight-bold">
{{ s__('PackageRegistry|Add NuGet Source') }}
</p>
......@@ -65,8 +55,6 @@ export default {
<gl-link :href="nugetHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</gl-tab>
</gl-tabs>
</div>
</template>
</installation-tabs>
</template>
ee/app/assets/javascripts/packages/details/utils.js
View file @ 19aa7cb7
......@@ -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
View file @ 19aa7cb7
......@@ -3,8 +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 { TrackingActions, TrackingLabels } from 'ee/packages/details/constants';
import Tracking from '~/tracking';
import { GlTabs } from '@gitlab/ui';
const localVue = createLocalVue();
localVue.use(Vuex);
......@@ -26,8 +25,7 @@ describe('ConanInstallation', () => {
},
});
const installationTab = () => wrapper.find('.js-installation-tab > a');
const setupTab = () => wrapper.find('.js-setup-tab > a');
const findTabs = () => wrapper.find(GlTabs);
const conanInstallationCommand = () => wrapper.find('.js-conan-command > input');
const conanSetupCommand = () => wrapper.find('.js-conan-setup > input');
......@@ -46,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);
......@@ -57,38 +61,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 0 → 100644
View file @ 19aa7cb7
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
View file @ 19aa7cb7
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';
import { GlTabs } from '@gitlab/ui';
const localVue = createLocalVue();
localVue.use(Vuex);
......@@ -28,8 +27,7 @@ describe('MavenInstallation', () => {
},
});
const installationTab = () => wrapper.find('.js-installation-tab > a');
const setupTab = () => wrapper.find('.js-setup-tab > a');
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');
......@@ -49,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);
......@@ -64,37 +68,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
View file @ 19aa7cb7
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';
import { GlTabs } from '@gitlab/ui';
const localVue = createLocalVue();
localVue.use(Vuex);
......@@ -17,8 +16,7 @@ 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 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');
......@@ -50,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);
......@@ -73,39 +77,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
View file @ 19aa7cb7
......@@ -3,8 +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 { TrackingActions, TrackingLabels } from 'ee/packages/details/constants';
import Tracking from '~/tracking';
import { GlTabs } from '@gitlab/ui';
const localVue = createLocalVue();
localVue.use(Vuex);
......@@ -26,8 +25,7 @@ describe('NugetInstallation', () => {
},
});
const installationTab = () => wrapper.find('.js-installation-tab > a');
const setupTab = () => wrapper.find('.js-setup-tab > a');
const findTabs = () => wrapper.find(GlTabs);
const nugetInstallationCommand = () => wrapper.find('.js-nuget-command > input');
const nugetSetupCommand = () => wrapper.find('.js-nuget-setup > input');
......@@ -46,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);
......@@ -57,39 +61,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,
});
});
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7