Commit 5a5d928d authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch '196254-update-label-text' into 'master'

Update button label in MR widget pipeline footer

See merge request gitlab-org/gitlab!22900
parents a49ffdd5 a3e19cdd
<script>
import { GlTooltipDirective } from '@gitlab/ui';
import { __, s__ } from '~/locale';
import DeploymentInfo from './deployment_info.vue';
import DeploymentViewButton from './deployment_view_button.vue';
import DeploymentStopButton from './deployment_stop_button.vue';
......@@ -14,9 +14,6 @@ export default {
DeploymentStopButton,
DeploymentViewButton,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
deployment: {
type: Object,
......@@ -43,6 +40,14 @@ export default {
},
},
computed: {
appButtonText() {
return {
text: this.isCurrent ? s__('Review App|View app') : s__('Review App|View latest app'),
tooltip: this.isCurrent
? ''
: __('View the latest successful deployment to this environment'),
};
},
canBeManuallyDeployed() {
return this.computedDeploymentStatus === MANUAL_DEPLOY;
},
......@@ -55,9 +60,6 @@ export default {
hasExternalUrls() {
return Boolean(this.deployment.external_url && this.deployment.external_url_formatted);
},
hasPreviousDeployment() {
return Boolean(!this.isCurrent && this.deployment.deployed_at);
},
isCurrent() {
return this.computedDeploymentStatus === SUCCESS;
},
......@@ -89,7 +91,7 @@ export default {
<!-- show appropriate version of review app button -->
<deployment-view-button
v-if="hasExternalUrls"
:is-current="isCurrent"
:app-button-text="appButtonText"
:deployment="deployment"
:show-visual-review-app="showVisualReviewApp"
:visual-review-app-metadata="visualReviewAppMeta"
......
......@@ -11,12 +11,12 @@ export default {
import('ee_component/vue_merge_request_widget/components/visual_review_app_link.vue'),
},
props: {
deployment: {
appButtonText: {
type: Object,
required: true,
},
isCurrent: {
type: Boolean,
deployment: {
type: Object,
required: true,
},
showVisualReviewApp: {
......@@ -60,7 +60,7 @@ export default {
>
<template slot="mainAction" slot-scope="slotProps">
<review-app-link
:is-current="isCurrent"
:display="appButtonText"
:link="deploymentExternalUrl"
:css-class="`deploy-link js-deploy-url inline ${slotProps.className}`"
/>
......@@ -85,7 +85,7 @@ export default {
</filtered-search-dropdown>
<template v-else>
<review-app-link
:is-current="isCurrent"
:display="appButtonText"
:link="deploymentExternalUrl"
css-class="js-deploy-url deploy-link btn btn-default btn-sm inline"
/>
......
<script>
import { __ } from '~/locale';
import { GlTooltipDirective } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
Icon,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
cssClass: {
type: String,
required: true,
},
isCurrent: {
type: Boolean,
display: {
type: Object,
required: true,
},
link: {
......@@ -20,15 +23,12 @@ export default {
required: true,
},
},
computed: {
linkText() {
return this.isCurrent ? __('View app') : __('View previous app');
},
},
};
</script>
<template>
<a
v-gl-tooltip
:title="display.tooltip"
:href="link"
target="_blank"
rel="noopener noreferrer nofollow"
......@@ -36,6 +36,6 @@ export default {
data-track-event="open_review_app"
data-track-label="review_app"
>
{{ linkText }} <icon class="fgray" name="external-link" />
{{ display.text }} <icon class="fgray" name="external-link" />
</a>
</template>
---
title: Update button label in MR widget pipeline footer
merge_request: 22900
author:
type: changed
......@@ -30,9 +30,6 @@ export default {
default: false,
},
},
tooltips: {
information: s__('EnviornmentDashboard|You are looking at the last updated environment'),
},
computed: {
headerClasses() {
return {
......@@ -42,6 +39,13 @@ export default {
};
},
},
reviewButtonText: {
text: s__('Review App|View app'),
tooltip: '',
},
tooltips: {
information: s__('EnvironmentDashboard|You are looking at the last updated environment'),
},
};
</script>
......@@ -70,7 +74,7 @@ export default {
<review-app-link
v-else-if="environment.external_url"
:link="environment.external_url"
:is-current="true"
:display="$options.reviewButtonText"
css-class="btn btn-default btn-sm"
/>
</div>
......
......@@ -24,7 +24,7 @@ exports[`Environment Header has a failed pipeline matches the snapshot 1`] = `
<review-app-link-stub
cssclass="btn btn-default btn-sm"
iscurrent="true"
display="[object Object]"
link="http://example.com"
/>
</div>
......@@ -54,7 +54,7 @@ exports[`Environment Header has errors matches the snapshot 1`] = `
<review-app-link-stub
cssclass="btn btn-default btn-sm"
iscurrent="true"
display="[object Object]"
link="http://example.com"
/>
</div>
......@@ -67,8 +67,8 @@ exports[`Environment Header renders name and link to app matches the snapshot 1`
<div
class="flex-grow-1 block-truncated"
>
<gl-link-stub
class="js-environment-link cgray"
<a
class="gl-link js-environment-link cgray"
href="/enivronment/1"
title="staging"
>
......@@ -77,16 +77,31 @@ exports[`Environment Header renders name and link to app matches the snapshot 1`
>
staging
</span>
</gl-link-stub>
</a>
<!---->
</div>
<review-app-link-stub
cssclass="btn btn-default btn-sm"
iscurrent="true"
link="http://example.com"
<a
class="btn btn-default btn-sm"
data-track-event="open_review_app"
data-track-label="review_app"
href="http://example.com"
rel="noopener noreferrer nofollow"
target="_blank"
title=""
>
View app
<svg
aria-hidden="true"
class="fgray s16 ic-external-link"
>
<use
xlink:href="#external-link"
/>
</svg>
</a>
</div>
`;
......
import { shallowMount } from '@vue/test-utils';
import { shallowMount, mount } from '@vue/test-utils';
import { GlLink, GlBadge } from '@gitlab/ui';
import component from 'ee/environments_dashboard/components/dashboard/environment_header.vue';
import Icon from '~/vue_shared/components/icon.vue';
......@@ -24,7 +24,7 @@ describe('Environment Header', () => {
describe('renders name and link to app', () => {
beforeEach(() => {
wrapper = shallowMount(component, {
wrapper = mount(component, {
attachToDocument: true,
propsData,
});
......@@ -43,7 +43,7 @@ describe('Environment Header', () => {
});
it('renders a link to the external app', () => {
expect(wrapper.find(ReviewAppLink).attributes('link')).toBe(
expect(wrapper.find(ReviewAppLink).attributes('href')).toBe(
propsData.environment.external_url,
);
});
......
......@@ -6930,9 +6930,6 @@ msgstr ""
msgid "Enter zen mode"
msgstr ""
msgid "EnviornmentDashboard|You are looking at the last updated environment"
msgstr ""
msgid "Environment"
msgstr ""
......@@ -6951,6 +6948,9 @@ msgstr ""
msgid "EnvironmentDashboard|Created through the Deployment API"
msgstr ""
msgid "EnvironmentDashboard|You are looking at the last updated environment"
msgstr ""
msgid "Environments"
msgstr ""
......@@ -15728,6 +15728,12 @@ msgstr ""
msgid "Review"
msgstr ""
msgid "Review App|View app"
msgstr ""
msgid "Review App|View latest app"
msgstr ""
msgid "Review the process for configuring service providers in your identity provider — in this case, GitLab is the \"service provider\" or \"relying party\"."
msgstr ""
......@@ -20485,9 +20491,6 @@ msgstr ""
msgid "View Documentation"
msgstr ""
msgid "View app"
msgstr ""
msgid "View blame prior to this change"
msgstr ""
......@@ -20547,9 +20550,6 @@ msgstr ""
msgid "View open merge request"
msgstr ""
msgid "View previous app"
msgstr ""
msgid "View project"
msgstr ""
......@@ -20562,6 +20562,9 @@ msgstr ""
msgid "View the documentation"
msgstr ""
msgid "View the latest successful deployment to this environment"
msgstr ""
msgid "Viewing commit"
msgstr ""
......
......@@ -134,7 +134,7 @@ describe('Deployment component', () => {
if (status === SUCCESS) {
expect(wrapper.find(DeploymentViewButton).text()).toContain('View app');
} else {
expect(wrapper.find(DeploymentViewButton).text()).toContain('View previous app');
expect(wrapper.find(DeploymentViewButton).text()).toContain('View latest app');
}
});
}
......
......@@ -3,6 +3,11 @@ import DeploymentViewButton from '~/vue_merge_request_widget/components/deployme
import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
import deploymentMockData from './deployment_mock_data';
const appButtonText = {
text: 'View app',
tooltip: 'View the latest successful deployment to this environment',
};
describe('Deployment View App button', () => {
let wrapper;
......@@ -16,7 +21,7 @@ describe('Deployment View App button', () => {
factory({
propsData: {
deployment: deploymentMockData,
isCurrent: true,
appButtonText,
},
});
});
......@@ -26,25 +31,8 @@ describe('Deployment View App button', () => {
});
describe('text', () => {
describe('when app is current', () => {
it('shows View app', () => {
expect(wrapper.find(ReviewAppLink).text()).toContain('View app');
});
});
describe('when app is not current', () => {
beforeEach(() => {
factory({
propsData: {
deployment: deploymentMockData,
isCurrent: false,
},
});
});
it('shows View Previous app', () => {
expect(wrapper.find(ReviewAppLink).text()).toContain('View previous app');
});
it('renders text as passed', () => {
expect(wrapper.find(ReviewAppLink).text()).toContain(appButtonText.text);
});
});
......@@ -53,7 +41,7 @@ describe('Deployment View App button', () => {
factory({
propsData: {
deployment: { ...deploymentMockData, changes: null },
isCurrent: false,
appButtonText,
},
});
});
......@@ -68,7 +56,7 @@ describe('Deployment View App button', () => {
factory({
propsData: {
deployment: { ...deploymentMockData, changes: [deploymentMockData.changes[0]] },
isCurrent: false,
appButtonText,
},
});
});
......@@ -91,7 +79,7 @@ describe('Deployment View App button', () => {
factory({
propsData: {
deployment: deploymentMockData,
isCurrent: false,
appButtonText,
},
});
});
......
......@@ -8,7 +8,10 @@ describe('review app link', () => {
const props = {
link: '/review',
cssClass: 'js-link',
isCurrent: true,
display: {
text: 'View app',
tooltip: '',
},
};
let vm;
let el;
......
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