Resolve vue compiler warnings after bump to Vue 3.5

[rak-phillip]

New compiler warnings are printed to the console after the bump to Vue 3.5. Most of the warnings have to deal with the structure of tables, for example: <tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.

Acceptance criteria

• Compiler warnings are resolved and no longer printed to console on builds

Details

At the time of writing, these are the warnings printed to the console

[@vue/compiler-sfc] `defineEmits` is a compiler macro and no longer needs to be imported.


 WARNING  Compiled with 11 warnings                                                                                              9:16:25 AM

 warning  in ./pkg/aks/components/AksNodePool.vue?vue&type=template&id=65907345&scoped=true&ts=true

Module Warning (from ./node_modules/vue-loader/dist/templateLoader.js):
<tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
388|            class="taints"
389|          >
390|            <tr>
   |            ^^^^
391|              <th>
   |  ^^^^^^^^^^^^^^^^
392|                <label class="text-label">
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
393|                  {{ t('aks.nodePools.taints.key') }}
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
394|                  <span class="text-error">*</span>
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
395|                </label>
   |  ^^^^^^^^^^^^^^^^^^^^^^
396|              </th>
   |  ^^^^^^^^^^^^^^^^^
397|              <th>
   |  ^^^^^^^^^^^^^^^^
398|                <label class="text-label">
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
399|                  {{ t('aks.nodePools.taints.value') }}
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
400|                  <span class="text-error">*</span>
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
401|                </label>
   |  ^^^^^^^^^^^^^^^^^^^^^^
402|              </th>
   |  ^^^^^^^^^^^^^^^^^
403|              <th>
   |  ^^^^^^^^^^^^^^^^
404|                <label class="text-label">
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
405|                  {{ t('aks.nodePools.taints.effect') }}
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
406|                </label>
   |  ^^^^^^^^^^^^^^^^^^^^^^
407|              </th>
   |  ^^^^^^^^^^^^^^^^^
408|              <th />
   |  ^^^^^^^^^^^^^^^^^^
409|            </tr>
   |  ^^^^^^^^^^^^^^^

 warning  in ./shell/components/auth/Principal.vue?vue&type=template&id=260c0fc3&scoped=true

Module Warning (from ./node_modules/vue-loader/dist/templateLoader.js):
<tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
86 |        >
87 |          <table>
88 |            <tr><td>{{ t('principal.name') }}: </td><td>{{ principal.name || principal.loginName }}</td></tr>
   |            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
89 |            <tr><td>{{ t('principal.loginName') }}: </td><td>{{ principal.loginName }}</td></tr>
90 |            <tr><td>{{ t('principal.type') }}: </td><td>{{ principal.displayType }}</td></tr>

 warning  in ./shell/components/auth/Principal.vue?vue&type=template&id=260c0fc3&scoped=true

Module Warning (from ./node_modules/vue-loader/dist/templateLoader.js):
<tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
87 |          <table>
88 |            <tr><td>{{ t('principal.name') }}: </td><td>{{ principal.name || principal.loginName }}</td></tr>
89 |            <tr><td>{{ t('principal.loginName') }}: </td><td>{{ principal.loginName }}</td></tr>
   |            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
90 |            <tr><td>{{ t('principal.type') }}: </td><td>{{ principal.displayType }}</td></tr>
91 |          </table>

 warning  in ./shell/components/auth/Principal.vue?vue&type=template&id=260c0fc3&scoped=true

Module Warning (from ./node_modules/vue-loader/dist/templateLoader.js):
<tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
88 |            <tr><td>{{ t('principal.name') }}: </td><td>{{ principal.name || principal.loginName }}</td></tr>
89 |            <tr><td>{{ t('principal.loginName') }}: </td><td>{{ principal.loginName }}</td></tr>
90 |            <tr><td>{{ t('principal.type') }}: </td><td>{{ principal.displayType }}</td></tr>
   |            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
91 |          </table>
92 |        </div>

 warning  in ./shell/edit/auth/saml.vue?vue&type=template&id=2bbc7dfc&scoped=true

Module Warning (from ./node_modules/vue-loader/dist/templateLoader.js):
<tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
212|
213|              <table v-if="showLdapDetails && model.openLdapConfig">
214|                <tr><td>{{ t('authConfig.ldap.hostname.label') }}:</td><td>{{ ldapHosts }}</td></tr>
   |                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
215|                <tr><td>{{ t('authConfig.ldap.port') }}:</td><td>{{ model.openLdapConfig.port }}</td></tr>
216|                <tr><td>{{ t('authConfig.ldap.protocol') }}:</td><td>{{ ldapProtocol }}</td></tr>

 warning  in ./shell/edit/auth/saml.vue?vue&type=template&id=2bbc7dfc&scoped=true

Module Warning (from ./node_modules/vue-loader/dist/templateLoader.js):
<tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
213|              <table v-if="showLdapDetails && model.openLdapConfig">
214|                <tr><td>{{ t('authConfig.ldap.hostname.label') }}:</td><td>{{ ldapHosts }}</td></tr>
215|                <tr><td>{{ t('authConfig.ldap.port') }}:</td><td>{{ model.openLdapConfig.port }}</td></tr>
   |                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
216|                <tr><td>{{ t('authConfig.ldap.protocol') }}:</td><td>{{ ldapProtocol }}</td></tr>
217|                <tr><td>{{ t('authConfig.ldap.serviceAccountDN') }}:</td><td>{{ model.openLdapConfig.serviceAccountDistinguishedName }}</td></tr>

 warning  in ./shell/edit/auth/saml.vue?vue&type=template&id=2bbc7dfc&scoped=true

Module Warning (from ./node_modules/vue-loader/dist/templateLoader.js):
<tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
214|                <tr><td>{{ t('authConfig.ldap.hostname.label') }}:</td><td>{{ ldapHosts }}</td></tr>
215|                <tr><td>{{ t('authConfig.ldap.port') }}:</td><td>{{ model.openLdapConfig.port }}</td></tr>
216|                <tr><td>{{ t('authConfig.ldap.protocol') }}:</td><td>{{ ldapProtocol }}</td></tr>
   |                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
217|                <tr><td>{{ t('authConfig.ldap.serviceAccountDN') }}:</td><td>{{ model.openLdapConfig.serviceAccountDistinguishedName }}</td></tr>
218|                <tr><td>{{ t('authConfig.ldap.userSearchBase.label') }}:</td><td>{{ model.openLdapConfig.userSearchBase }}</td></tr>

 warning  in ./shell/edit/auth/saml.vue?vue&type=template&id=2bbc7dfc&scoped=true

Module Warning (from ./node_modules/vue-loader/dist/templateLoader.js):
<tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
215|                <tr><td>{{ t('authConfig.ldap.port') }}:</td><td>{{ model.openLdapConfig.port }}</td></tr>
216|                <tr><td>{{ t('authConfig.ldap.protocol') }}:</td><td>{{ ldapProtocol }}</td></tr>
217|                <tr><td>{{ t('authConfig.ldap.serviceAccountDN') }}:</td><td>{{ model.openLdapConfig.serviceAccountDistinguishedName }}</td></tr>
   |                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
218|                <tr><td>{{ t('authConfig.ldap.userSearchBase.label') }}:</td><td>{{ model.openLdapConfig.userSearchBase }}</td></tr>
219|                <tr><td>{{ t('authConfig.ldap.groupSearchBase.label') }}:</td><td>{{ model.openLdapConfig.groupSearchBase }}</td></tr>

 warning  in ./shell/edit/auth/saml.vue?vue&type=template&id=2bbc7dfc&scoped=true

Module Warning (from ./node_modules/vue-loader/dist/templateLoader.js):
<tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
216|                <tr><td>{{ t('authConfig.ldap.protocol') }}:</td><td>{{ ldapProtocol }}</td></tr>
217|                <tr><td>{{ t('authConfig.ldap.serviceAccountDN') }}:</td><td>{{ model.openLdapConfig.serviceAccountDistinguishedName }}</td></tr>
218|                <tr><td>{{ t('authConfig.ldap.userSearchBase.label') }}:</td><td>{{ model.openLdapConfig.userSearchBase }}</td></tr>
   |                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
219|                <tr><td>{{ t('authConfig.ldap.groupSearchBase.label') }}:</td><td>{{ model.openLdapConfig.groupSearchBase }}</td></tr>
220|              </table>

 warning  in ./shell/edit/auth/saml.vue?vue&type=template&id=2bbc7dfc&scoped=true

Module Warning (from ./node_modules/vue-loader/dist/templateLoader.js):
<tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
217|                <tr><td>{{ t('authConfig.ldap.serviceAccountDN') }}:</td><td>{{ model.openLdapConfig.serviceAccountDistinguishedName }}</td></tr>
218|                <tr><td>{{ t('authConfig.ldap.userSearchBase.label') }}:</td><td>{{ model.openLdapConfig.userSearchBase }}</td></tr>
219|                <tr><td>{{ t('authConfig.ldap.groupSearchBase.label') }}:</td><td>{{ model.openLdapConfig.groupSearchBase }}</td></tr>
   |                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
220|              </table>
221|            </template>

 warning  in ./shell/pages/diagnostic.vue?vue&type=template&id=7d1f6942&scoped=true

Module Warning (from ./node_modules/vue-loader/dist/templateLoader.js):
<th> cannot be child of <thead>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
347|          >
348|            <thead @click="toggleTable(cluster.id)">
349|              <th colspan="4">
   |              ^^^^^^^^^^^^^^^^
350|                <div class="cluster-row">
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
351|                  <span>Cluster: <b>{{ cluster.name }}</b></span>
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
352|                  <span>Namespace: <b>{{ cluster.namespace }}</b></span>
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
353|                  <span>Total Resources: <b>{{ sumResourceCount(cluster.counts) }}</b></span>
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
354|                  <span>Nodes: <b>{{ nodeCount(cluster.counts) }}</b></span>
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
355|                  <i
   |  ^^^^^^^^^^^^^^^^^^
356|                    class="icon"
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
357|                    :class="{
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^
358|                      'icon-chevron-down': !cluster.isTableVisible,
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
359|                      'icon-chevron-up': cluster.isTableVisible
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
360|                    }"
   |  ^^^^^^^^^^^^^^^^^^^^
361|                  />
   |  ^^^^^^^^^^^^^^^^^^
362|                </div>
   |  ^^^^^^^^^^^^^^^^^^^^
363|              </th>
   |  ^^^^^^^^^^^^^^^^^