Merge branch '36629-35958-add-cluster-application-section' into add-ingress-to-cluster-applications

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

 <script>
-import { s__ } from '../../locale';
+import { s__, sprintf } from '../../locale';
 import eventHub from '../event_hub';
 import loadingButton from '../../vue_shared/components/loading_button.vue';
 import {
@@ -56,9 +56,6 @@ export default {
     rowJsClass() {
       return `js-cluster-application-row-${this.id}`;
     },
-    titleElementType() {
-      return this.titleLink ? 'a' : 'span';
-    },
     installButtonLoading() {
       return !this.status ||
         this.status === APPLICATION_SCHEDULED ||
@@ -92,6 +89,13 @@ export default {
     hasError() {
       return this.status === APPLICATION_ERROR || this.requestStatus === REQUEST_FAILURE;
     },
+    generalErrorDescription() {
+      return sprintf(
+        s__('ClusterIntegration|Something went wrong while installing %{title}'), {
+          title: this.title,
+        },
+      );
+    }
   },
   methods: {
     installClicked() {
@@ -110,8 +114,8 @@ export default {
       class="gl-responsive-table-row-layout"
       role="row"
     >
-      <component
-        :is="titleElementType"
+      <a
+        v-if="titleLink"
         :href="titleLink"
         target="blank"
         rel="noopener noreferrer"
@@ -119,7 +123,13 @@ export default {
         class="table-section section-15 section-align-top js-cluster-application-title"
       >
         {{ title }}
-      </component>
+      </a>
+      <span
+        v-else
+        class="table-section section-15 section-align-top js-cluster-application-title"
+      >
+        {{ title }}
+      </span>
       <div
         class="table-section section-wrap"
         role="gridcell"
@@ -152,7 +162,7 @@ export default {
       >
         <div>
           <p class="js-cluster-application-general-error-message">
-            Something went wrong while installing {{ title }}
+            {{ generalErrorDescription }}
           </p>
           <ul v-if="statusReason || requestReason">
             <li

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

@@ -45,7 +45,7 @@ export default {
       const extraCostParagraph = sprintf(
         _.escape(s__('ClusterIntegration|%{boldNotice} This will add some extra resources like a load balancer, which incur additional costs. See %{pricingLink}')), {
           boldNotice: `<strong>${_.escape(s__('ClusterIntegration|Note:'))}</strong>`,
-          pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb" target="blank" rel="noopener noreferrer">
+          pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb" target="_blank" rel="noopener noreferrer">
             ${_.escape(s__('ClusterIntegration|GKE pricing'))}
           </a>`,
         },
@@ -85,7 +85,7 @@ export default {
     </div>
 
     <div class="settings-content">
-      <div class="form_group append-bottom-20">
+      <div class="append-bottom-20">
         <application-row
           id="helm"
           :title="applications.helm.title"