Merge branch '207322-remove-eslint-disable' into 'master'

Remove eslint-disable for application row component

Closes #207322

See merge request gitlab-org/gitlab!33940

app/assets/javascripts/clusters/components/application_row.vue

 <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 }}
+            <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
-              v-if="updateSuccessful"
                     :href="chartRepo"
                     target="_blank"
                     class="js-cluster-application-update-version"
-              >chart v{{ version }}</gl-link
+                    >{{ content }}{{ version }}</gl-link
                   >
+                </template>
+              </gl-sprintf>
+            </template>
           </div>
 
           <div

locale/gitlab.pot

@@ -23999,7 +23999,7 @@ msgstr ""
 msgid "Updated at"
 msgstr ""
 
-msgid "Updated to"
+msgid "Updated to %{linkStart}chart v%{linkEnd}"
 msgstr ""
 
 msgid "Updating"

spec/frontend/clusters/components/application_row_spec.js

 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);
     });
   });