Update deprecated slot syntax in `./app/assets/javascripts/clusters/components/applications.vue`

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

@@ -281,7 +281,8 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         class="rounded-top"
         title-link="https://docs.helm.sh/"
       >
-        <div slot="description">
+        <template #description>
+          <div>
             {{
               s__(`ClusterIntegration|Helm streamlines installing
                       and managing Kubernetes applications.
@@ -289,6 +290,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
                       and manages releases of your charts.`)
             }}
           </div>
+        </template>
       </application-row>
       <div v-show="!helmInstalled" class="cluster-application-warning">
         <div class="svg-container" v-html="$options.helmInstallIllustration"></div>
@@ -318,7 +320,8 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         :updateable="false"
         title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
       >
-        <div slot="description">
+        <template #description>
+          <div>
             <p>
               {{
                 s__(`ClusterIntegration|Ingress gives you a way to route
@@ -334,7 +337,9 @@ 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>
+                <label for="ingress-endpoint">{{
+                  s__('ClusterIntegration|Ingress Endpoint')
+                }}</label>
                 <div class="input-group">
                   <template v-if="ingressExternalEndpoint">
                     <input
@@ -388,6 +393,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
               </div>
             </template>
           </div>
+        </template>
       </application-row>
       <application-row
         id="cert_manager"
@@ -406,8 +412,8 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         :disabled="!helmInstalled"
         title-link="https://cert-manager.readthedocs.io/en/latest/#"
       >
-        <template>
-          <div slot="description">
+        <template #description>
+          <div>
             <p v-html="certManagerDescription"></p>
             <div class="form-group">
               <label for="cert-manager-issuer-email">
@@ -455,7 +461,9 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         :disabled="!helmInstalled"
         title-link="https://prometheus.io/docs/introduction/overview/"
       >
-        <div slot="description" v-html="prometheusDescription"></div>
+        <template #description>
+          <div v-html="prometheusDescription"></div>
+        </template>
       </application-row>
       <application-row
         id="runner"
@@ -478,7 +486,8 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         :disabled="!helmInstalled"
         title-link="https://docs.gitlab.com/runner/"
       >
-        <div slot="description">
+        <template #description>
+          <div>
             {{
               s__(`ClusterIntegration|GitLab Runner connects to the
                       repository and executes CI/CD jobs,
@@ -486,6 +495,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
                       applications to production.`)
             }}
           </div>
+        </template>
       </application-row>
       <application-row
         id="crossplane"
@@ -504,8 +514,8 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         :disabled="!helmInstalled"
         title-link="https://crossplane.io"
       >
-        <template>
-          <div slot="description">
+        <template #description>
+          <div>
             <p v-html="crossplaneDescription"></p>
             <div class="form-group">
               <CrossplaneProviderStack :crossplane="crossplane" @set="setCrossplaneProviderStack" />
@@ -531,7 +541,8 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         :disabled="!helmInstalled"
         title-link="https://jupyterhub.readthedocs.io/en/stable/"
       >
-        <div slot="description">
+        <template #description>
+          <div>
             <p>
               {{
                 s__(`ClusterIntegration|JupyterHub, a multi-user Hub, spawns,
@@ -544,7 +555,9 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
 
             <template v-if="ingressExternalEndpoint">
               <div class="form-group">
-              <label for="jupyter-hostname">{{ s__('ClusterIntegration|Jupyter Hostname') }}</label>
+                <label for="jupyter-hostname">{{
+                  s__('ClusterIntegration|Jupyter Hostname')
+                }}</label>
 
                 <div class="input-group">
                   <input
@@ -575,6 +588,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
               </div>
             </template>
           </div>
+        </template>
       </application-row>
       <application-row
         id="knative"
@@ -599,8 +613,9 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         v-bind="applications.knative"
         title-link="https://github.com/knative/docs"
       >
-        <div slot="description">
-          <p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info">
+        <template #description>
+          <div>
+            <p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info gl-mb-0">
               {{
                 s__(`ClusterIntegration|You must have an RBAC-enabled cluster
                 to install Knative.`)
@@ -609,6 +624,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
                 {{ __('More information') }}
               </a>
             </p>
+            <br />
             <p>
               {{
                 s__(`ClusterIntegration|Knative extends Kubernetes to provide
@@ -626,6 +642,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
               @set="setKnativeDomain"
             />
           </div>
+        </template>
       </application-row>
       <application-row
         id="elastic_stack"
@@ -648,7 +665,8 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         :disabled="!helmInstalled"
         title-link="https://gitlab.com/gitlab-org/charts/elastic-stack"
       >
-        <div slot="description">
+        <template #description>
+          <div>
             <p>
               {{
                 s__(
@@ -657,6 +675,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
               }}
             </p>
           </div>
+        </template>
       </application-row>
 
       <application-row
@@ -683,7 +702,8 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         :updateable="false"
         title-link="https://github.com/helm/charts/tree/master/stable/fluentd"
       >
-        <div slot="description">
+        <template #description>
+          <div>
             <p>
               {{
                 s__(
@@ -702,6 +722,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
               :update-failed="applications.fluentd.updateFailed"
             />
           </div>
+        </template>
       </application-row>
     </div>
   </section>

spec/frontend/clusters/components/applications_spec.js

@@ -13,6 +13,14 @@ import FluentdOutputSettings from '~/clusters/components/fluentd_output_settings
 describe('Applications', () => {
   let vm;
   let Applications;
+  const ApplicationRowStub = {
+    name: 'application-row-stub',
+    template: `
+                <div>
+                  <slot name="description"></slot>
+                </div>
+              `,
+  };
 
   beforeEach(() => {
     Applications = Vue.extend(applications);
@@ -202,7 +210,12 @@ describe('Applications', () => {
 
       let wrapper;
       beforeEach(() => {
-        wrapper = shallowMount(Applications, { propsData });
+        wrapper = shallowMount(Applications, {
+          propsData,
+          stubs: {
+            ApplicationRow: ApplicationRowStub,
+          },
+        });
       });
       afterEach(() => {
         wrapper.destroy();
@@ -436,7 +449,10 @@ describe('Applications', () => {
     let knativeDomainEditor;
 
     beforeEach(() => {
-      wrapper = shallowMount(Applications, { propsData });
+      wrapper = shallowMount(Applications, {
+        propsData,
+        stubs: { ApplicationRow: ApplicationRowStub },
+      });
       jest.spyOn(eventHub, '$emit');
 
       knativeDomainEditor = wrapper.find(KnativeDomainEditor);
@@ -504,7 +520,10 @@ describe('Applications', () => {
 
     let wrapper;
     beforeEach(() => {
-      wrapper = shallowMount(Applications, { propsData });
+      wrapper = shallowMount(Applications, {
+        propsData,
+        stubs: { ApplicationRow: ApplicationRowStub },
+      });
     });
     afterEach(() => {
       wrapper.destroy();
@@ -563,7 +582,10 @@ describe('Applications', () => {
 
     let wrapper;
     beforeEach(() => {
-      wrapper = shallowMount(Applications, { propsData });
+      wrapper = shallowMount(Applications, {
+        propsData,
+        stubs: { ApplicationRow: ApplicationRowStub },
+      });
     });
     afterEach(() => {
       wrapper.destroy();