Merge branch '207322-fix-component-issues' into 'master'

Fix Kubernetes applications template issues

See merge request gitlab-org/gitlab!33266

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

@@ -2,16 +2,13 @@
 import { escape } from 'lodash';
 import helmInstallIllustration from '@gitlab/svgs/dist/illustrations/kubernetes-installation.svg';
 import { GlLoadingIcon } from '@gitlab/ui';
-import elasticsearchLogo from 'images/cluster_app_logos/elasticsearch.png';
 import gitlabLogo from 'images/cluster_app_logos/gitlab.png';
 import helmLogo from 'images/cluster_app_logos/helm.png';
-import jeagerLogo from 'images/cluster_app_logos/jeager.png';
 import jupyterhubLogo from 'images/cluster_app_logos/jupyterhub.png';
 import kubernetesLogo from 'images/cluster_app_logos/kubernetes.png';
 import certManagerLogo from 'images/cluster_app_logos/cert_manager.png';
 import crossplaneLogo from 'images/cluster_app_logos/crossplane.png';
 import knativeLogo from 'images/cluster_app_logos/knative.png';
-import meltanoLogo from 'images/cluster_app_logos/meltano.png';
 import prometheusLogo from 'images/cluster_app_logos/prometheus.png';
 import elasticStackLogo from 'images/cluster_app_logos/elastic_stack.png';
 import fluentdLogo from 'images/cluster_app_logos/fluentd.png';
@@ -92,25 +89,7 @@ export default {
       default: false,
     },
   },
-  data: () => ({
-    elasticsearchLogo,
-    gitlabLogo,
-    helmLogo,
-    jeagerLogo,
-    jupyterhubLogo,
-    kubernetesLogo,
-    certManagerLogo,
-    crossplaneLogo,
-    knativeLogo,
-    meltanoLogo,
-    prometheusLogo,
-    elasticStackLogo,
-    fluentdLogo,
-  }),
   computed: {
-    isProjectCluster() {
-      return this.type === CLUSTER_TYPE.PROJECT;
-    },
     managedAppsLocalTillerEnabled() {
       return Boolean(gon.features?.managedAppsLocalTiller);
     },
@@ -133,9 +112,6 @@ export default {
     certManagerInstalled() {
       return this.applications.cert_manager.status === APPLICATION_STATUS.INSTALLED;
     },
-    crossplaneInstalled() {
-      return this.applications.crossplane.status === APPLICATION_STATUS.INSTALLED;
-    },
     ingressDescription() {
       return sprintf(
         escape(
@@ -208,9 +184,6 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
     jupyterHostname() {
       return this.applications.jupyter.hostname;
     },
-    elasticStackInstalled() {
-      return this.applications.elastic_stack.status === APPLICATION_STATUS.INSTALLED;
-    },
     knative() {
       return this.applications.knative;
     },
@@ -240,9 +213,6 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
       return this.applications.ingress;
     },
   },
-  created() {
-    this.helmInstallIllustration = helmInstallIllustration;
-  },
   methods: {
     saveKnativeDomain() {
       eventHub.$emit('saveKnativeDomain', {
@@ -267,6 +237,19 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
       });
     },
   },
+  logos: {
+    gitlabLogo,
+    helmLogo,
+    jupyterhubLogo,
+    kubernetesLogo,
+    certManagerLogo,
+    crossplaneLogo,
+    knativeLogo,
+    prometheusLogo,
+    elasticStackLogo,
+    fluentdLogo,
+  },
+  helmInstallIllustration,
 };
 </script>
 
@@ -284,7 +267,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
       <application-row
         v-if="!managedAppsLocalTillerEnabled"
         id="helm"
-        :logo-url="helmLogo"
+        :logo-url="$options.logos.helmLogo"
         :title="applications.helm.title"
         :status="applications.helm.status"
         :status-reason="applications.helm.statusReason"
@@ -308,7 +291,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         </div>
       </application-row>
       <div v-show="!helmInstalled" class="cluster-application-warning">
-        <div class="svg-container" v-html="helmInstallIllustration"></div>
+        <div class="svg-container" v-html="$options.helmInstallIllustration"></div>
         {{
           s__(`ClusterIntegration|You must first install Helm Tiller before
                 installing the applications below`)
@@ -316,7 +299,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
       </div>
       <application-row
         :id="ingressId"
-        :logo-url="kubernetesLogo"
+        :logo-url="$options.logos.kubernetesLogo"
         :title="applications.ingress.title"
         :status="applications.ingress.status"
         :status-reason="applications.ingress.statusReason"
@@ -352,7 +335,8 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
           <template v-if="ingressInstalled">
             <div class="form-group">
               <label for="ingress-endpoint">{{ s__('ClusterIntegration|Ingress Endpoint') }}</label>
-              <div v-if="ingressExternalEndpoint" class="input-group">
+              <div class="input-group">
+                <template v-if="ingressExternalEndpoint">
                   <input
                     id="ingress-endpoint"
                     :value="ingressExternalEndpoint"
@@ -367,12 +351,13 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
                       class="input-group-text js-clipboard-btn"
                     />
                   </span>
-              </div>
-              <div v-else class="input-group">
+                </template>
+                <template v-else>
                   <input type="text" class="form-control js-endpoint" readonly />
                   <gl-loading-icon
                     class="position-absolute align-self-center ml-2 js-ingress-ip-loading-icon"
                   />
+                </template>
               </div>
               <p class="form-text text-muted">
                 {{
@@ -397,7 +382,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
               </a>
             </p>
           </template>
-          <template v-if="!ingressInstalled">
+          <template v-else>
             <div class="bs-callout bs-callout-info">
               <strong v-html="ingressDescription"></strong>
             </div>
@@ -406,7 +391,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
       </application-row>
       <application-row
         id="cert_manager"
-        :logo-url="certManagerLogo"
+        :logo-url="$options.logos.certManagerLogo"
         :title="applications.cert_manager.title"
         :status="applications.cert_manager.status"
         :status-reason="applications.cert_manager.statusReason"
@@ -430,6 +415,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
               </label>
               <div class="input-group">
                 <input
+                  id="cert-manager-issuer-email"
                   v-model="applications.cert_manager.email"
                   :readonly="certManagerInstalled"
                   type="text"
@@ -454,7 +440,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
       </application-row>
       <application-row
         id="prometheus"
-        :logo-url="prometheusLogo"
+        :logo-url="$options.logos.prometheusLogo"
         :title="applications.prometheus.title"
         :manage-link="managePrometheusPath"
         :status="applications.prometheus.status"
@@ -473,7 +459,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
       </application-row>
       <application-row
         id="runner"
-        :logo-url="gitlabLogo"
+        :logo-url="$options.logos.gitlabLogo"
         :title="applications.runner.title"
         :status="applications.runner.status"
         :status-reason="applications.runner.statusReason"
@@ -503,7 +489,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
       </application-row>
       <application-row
         id="crossplane"
-        :logo-url="crossplaneLogo"
+        :logo-url="$options.logos.crossplaneLogo"
         :title="applications.crossplane.title"
         :status="applications.crossplane.status"
         :status-reason="applications.crossplane.statusReason"
@@ -530,7 +516,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
 
       <application-row
         id="jupyter"
-        :logo-url="jupyterhubLogo"
+        :logo-url="$options.logos.jupyterhubLogo"
         :title="applications.jupyter.title"
         :status="applications.jupyter.status"
         :status-reason="applications.jupyter.statusReason"
@@ -562,6 +548,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
 
               <div class="input-group">
                 <input
+                  id="jupyter-hostname"
                   v-model="applications.jupyter.hostname"
                   :readonly="jupyterInstalled"
                   type="text"
@@ -591,7 +578,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
       </application-row>
       <application-row
         id="knative"
-        :logo-url="knativeLogo"
+        :logo-url="$options.logos.knativeLogo"
         :title="applications.knative.title"
         :status="applications.knative.status"
         :status-reason="applications.knative.statusReason"
@@ -613,8 +600,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         title-link="https://github.com/knative/docs"
       >
         <div slot="description">
-          <span v-if="!rbac">
-            <p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info gl-mb-0">
+          <p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info">
             {{
               s__(`ClusterIntegration|You must have an RBAC-enabled cluster
             to install Knative.`)
@@ -623,8 +609,6 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
               {{ __('More information') }}
             </a>
           </p>
-            <br />
-          </span>
           <p>
             {{
               s__(`ClusterIntegration|Knative extends Kubernetes to provide
@@ -645,7 +629,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
       </application-row>
       <application-row
         id="elastic_stack"
-        :logo-url="elasticStackLogo"
+        :logo-url="$options.logos.elasticStackLogo"
         :title="applications.elastic_stack.title"
         :status="applications.elastic_stack.status"
         :status-reason="applications.elastic_stack.statusReason"
@@ -677,7 +661,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
 
       <application-row
         id="fluentd"
-        :logo-url="fluentdLogo"
+        :logo-url="$options.logos.fluentdLogo"
         :title="applications.fluentd.title"
         :status="applications.fluentd.status"
         :status-reason="applications.fluentd.statusReason"