Commit 5cd549d6 authored by Daniel Tian's avatar Daniel Tian

Remove eslint-disable for app row component

parent 02f310f6
<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable @gitlab/vue-require-i18n-strings */
import { GlLink, GlModalDirective } from '@gitlab/ui';
import { GlLink, GlModalDirective, GlSprintf } from '@gitlab/ui';
import { s__, __, sprintf } from '~/locale';
import eventHub from '../event_hub';
import identicon from '../../vue_shared/components/identicon.vue';
......@@ -17,6 +15,7 @@ export default {
loadingButton,
identicon,
GlLink,
GlSprintf,
UninstallApplicationButton,
UninstallApplicationConfirmationModal,
UpdateApplicationConfirmationModal,
......@@ -36,15 +35,17 @@ export default {
titleLink: {
type: String,
required: false,
default: '',
},
manageLink: {
type: String,
required: false,
default: '',
},
logoUrl: {
type: String,
required: false,
default: null,
default: '',
},
disabled: {
type: Boolean,
......@@ -59,14 +60,17 @@ export default {
status: {
type: String,
required: false,
default: '',
},
statusReason: {
type: String,
required: false,
default: '',
},
requestReason: {
type: String,
required: false,
default: '',
},
installed: {
type: Boolean,
......@@ -81,14 +85,17 @@ export default {
installedVia: {
type: String,
required: false,
default: '',
},
version: {
type: String,
required: false,
default: '',
},
chartRepo: {
type: String,
required: false,
default: '',
},
updateAvailable: {
type: Boolean,
......@@ -206,15 +213,6 @@ export default {
return sprintf(errorDescription, { title: this.title });
},
versionLabel() {
if (this.updateFailed) {
return __('Update failed');
} else if (this.isUpdating) {
return __('Updating');
}
return this.updateSuccessful ? __('Updated to') : __('Updated');
},
updateFailureDescription() {
return s__('ClusterIntegration|Update failed. Please check the logs and try again.');
},
......@@ -365,14 +363,20 @@ export default {
v-if="shouldShowUpdateDetails"
class="form-text text-muted label p-0 js-cluster-application-update-details"
>
{{ versionLabel }}
<gl-link
v-if="updateSuccessful"
:href="chartRepo"
target="_blank"
class="js-cluster-application-update-version"
>chart v{{ version }}</gl-link
>
<template v-if="updateFailed">{{ __('Update failed') }}</template>
<template v-else-if="isUpdating">{{ __('Updating') }}</template>
<template v-else>
<gl-sprintf :message="__('Updated to %{linkStart}chart v%{linkEnd}')">
<template #link="{ content }">
<gl-link
:href="chartRepo"
target="_blank"
class="js-cluster-application-update-version"
>{{ content }}{{ version }}</gl-link
>
</template>
</gl-sprintf>
</template>
</div>
<div
......
......@@ -23999,7 +23999,7 @@ msgstr ""
msgid "Updated at"
msgstr ""
msgid "Updated to"
msgid "Updated to %{linkStart}chart v%{linkEnd}"
msgstr ""
msgid "Updating"
......
import { shallowMount } from '@vue/test-utils';
import { GlSprintf } from '@gitlab/ui';
import eventHub from '~/clusters/event_hub';
import { APPLICATION_STATUS, ELASTIC_STACK } from '~/clusters/constants';
import ApplicationRow from '~/clusters/components/application_row.vue';
......@@ -16,6 +17,7 @@ describe('Application Row', () => {
const mountComponent = data => {
wrapper = shallowMount(ApplicationRow, {
stubs: { GlSprintf },
propsData: {
...DEFAULT_APPLICATION_STATE,
...data,
......@@ -356,6 +358,9 @@ describe('Application Row', () => {
});
describe('Version', () => {
const updateDetails = () => wrapper.find('.js-cluster-application-update-details');
const versionEl = () => wrapper.find('.js-cluster-application-update-version');
it('displays a version number if application has been updated', () => {
const version = '0.1.45';
mountComponent({
......@@ -363,12 +368,8 @@ describe('Application Row', () => {
updateSuccessful: true,
version,
});
const updateDetails = wrapper.find('.js-cluster-application-update-details');
const versionEl = wrapper.find('.js-cluster-application-update-version');
expect(updateDetails.text()).toContain('Updated');
expect(versionEl.exists()).toBe(true);
expect(versionEl.text()).toContain(version);
expect(updateDetails().text()).toBe(`Updated to chart v${version}`);
});
it('contains a link to the chart repo if application has been updated', () => {
......@@ -380,10 +381,9 @@ describe('Application Row', () => {
chartRepo,
version,
});
const versionEl = wrapper.find('.js-cluster-application-update-version');
expect(versionEl.attributes('href')).toEqual(chartRepo);
expect(versionEl.props('target')).toEqual('_blank');
expect(versionEl().attributes('href')).toEqual(chartRepo);
expect(versionEl().props('target')).toEqual('_blank');
});
it('does not display a version number if application update failed', () => {
......@@ -393,11 +393,20 @@ describe('Application Row', () => {
updateFailed: true,
version,
});
const updateDetails = wrapper.find('.js-cluster-application-update-details');
const versionEl = wrapper.find('.js-cluster-application-update-version');
expect(updateDetails.text()).toContain('failed');
expect(versionEl.exists()).toBe(false);
expect(updateDetails().text()).toBe('Update failed');
expect(versionEl().exists()).toBe(false);
});
it('displays updating when the application update is currently updating', () => {
mountComponent({
status: APPLICATION_STATUS.UPDATING,
updateSuccessful: true,
version: '1.2.3',
});
expect(updateDetails().text()).toBe('Updating');
expect(versionEl().exists()).toBe(false);
});
});
......
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