Workaround for vuetifyjs/vuetify#19707

gardener · Apr 30, 2024 · 525f722 · 525f722
1 parent def9747
commit 525f722
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 109 deletions.
diff --git a/frontend/src/components/Members/GAccountRoles.vue b/frontend/src/components/Members/GAccountRoles.vue
@@ -5,38 +5,31 @@ SPDX-License-Identifier: Apache-2.0
  -->
 
 <template>
-  <v-tooltip
-    v-for="({ displayName, notEditable, tooltip }, index) in roleDisplayNames"
+  <v-chip
+    v-for="({ displayName, notEditable, tooltip }, index) in props.roleDisplayNames"
     :key="displayName"
-    location="top"
-    :disabled="!tooltip"
+    :disabled="notEditable"
+    size="small"
+    color="action-button"
+    variant="tonal"
+    :class="{ 'ml-3': index > 0 }"
   >
-    <template #activator="{ props: activatorProps }">
-      <v-chip
-        v-bind="activatorProps"
-        :disabled="notEditable"
-        size="small"
-        color="action-button"
-        variant="tonal"
-        :class="{ 'ml-3': index > 0 }"
-      >
-        {{ displayName }}
-      </v-chip>
-    </template>
-    <span>{{ tooltip }}</span>
-  </v-tooltip>
+    {{ displayName }}
+    <v-tooltip
+      activator="parent"
+      location="top"
+      :disabled="!tooltip"
+    >
+      {{ tooltip }}
+    </v-tooltip>
+  </v-chip>
 </template>
 
 <script setup>
-import { toRefs } from 'vue'
-
 const props = defineProps({
   roleDisplayNames: {
     type: Array,
     required: true,
   },
 })
-
-const { roleDisplayNames } = toRefs(props)
-
 </script>
diff --git a/frontend/src/components/ShootAccessRestrictions/GAccessRestrictionChips.vue b/frontend/src/components/ShootAccessRestrictions/GAccessRestrictionChips.vue
@@ -5,71 +5,59 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <div>
-    <div
-      v-for="{ key, title, description, options: optionsList } in selectedAccessRestrictions"
-      :key="key"
-      class="d-flex"
+  <div
+    v-for="{ key, title, description, options: optionsList } in props.selectedAccessRestrictions"
+    :key="key"
+    class="d-flex"
+  >
+    <v-chip
+      size="small"
+      variant="tonal"
+      color="primary"
+      class="mr-2 my-0"
     >
+      {{ title }}
       <v-tooltip
+        activator="parent"
         location="top"
         :disabled="!description"
         max-width="600px"
       >
-        <template #activator="{ props }">
-          <v-chip
-            v-bind="props"
-            size="small"
-            variant="tonal"
-            color="primary"
-            class="mr-2 my-0"
-          >
-            {{ title }}
-          </v-chip>
-        </template>
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <section v-html="transformHtml(description)" />
+        <div v-html="transformHtml(description) " />
       </v-tooltip>
+    </v-chip>
+
+    <v-chip
+      v-for="options in optionsList "
+      :key="`${key}_${options.key}`"
+      size="small"
+      variant="tonal"
+      color="primary"
+      class="mr-2"
+    >
+      {{ options.title }}
       <v-tooltip
-        v-for="options in optionsList"
-        :key="`${key}_${options.key}`"
+        activator="parent"
         location="top"
         :disabled="!options.description"
         max-width="600px"
       >
-        <template #activator="{ props }">
-          <v-chip
-            v-bind="props"
-            size="small"
-            variant="tonal"
-            color="primary"
-            class="mr-2"
-          >
-            {{ options.title }}
-          </v-chip>
-        </template>
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <section v-html="transformHtml(options.description)" />
+        <div v-html="transformHtml(options.description) " />
       </v-tooltip>
-    </div>
+    </v-chip>
   </div>
 </template>
 
-<script>
+<script setup>
 import { transformHtml } from '@/utils'
 
-export default {
-  props: {
-    selectedAccessRestrictions: {
-      type: Array,
-    },
-  },
-  methods: {
-    transformHtml (value) {
-      return transformHtml(value)
-    },
+const props = defineProps({
+  selectedAccessRestrictions: {
+    type: Array,
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>

diff --git a/frontend/src/components/ShootDetails/GShootInfrastructureCard.vue b/frontend/src/components/ShootDetails/GShootInfrastructureCard.vue
@@ -159,8 +159,13 @@ SPDX-License-Identifier: Apache-2.0
       </g-list-item>
       <g-list-item>
         <template #prepend />
-        <g-list-item-content label="DNS Providers">
-          <template v-if="shootDnsProviders && shootDnsProviders.length">
+        <g-list-item-content
+          label="DNS Providers"
+        >
+          <div
+            v-if="shootDnsProviders && shootDnsProviders.length"
+            class="d-flex justify-start"
+          >
             <g-dns-provider
               v-for="({ primary, secretName, type, domains, zones }) in shootDnsProviders"
               :key="secretName"
@@ -173,7 +178,7 @@ SPDX-License-Identifier: Apache-2.0
               :zones="zones"
               :secret="getCloudProviderSecretByName({ name: secretName, namespace: shootNamespace })"
             />
-          </template>
+          </div>
           <span v-else>No DNS provider configured</span>
         </g-list-item-content>
         <template #append>
@@ -203,31 +208,29 @@ SPDX-License-Identifier: Apache-2.0
           </template>
           <g-list-item-content label="Available Load Balancer Classes">
             <div class="d-flex align-center pt-1">
-              <v-tooltip
+              <v-chip
                 v-for="{ name } in shootLoadbalancerClasses"
                 :key="name"
-                :disabled="name !== defaultLoadbalancerClass"
-                location="top"
+                size="small"
+                class="mr-2"
+                variant="tonal"
+                color="primary"
               >
-                <template #activator="{ props }">
-                  <v-chip
-                    v-bind="props"
-                    size="small"
-                    class="mr-2"
-                    variant="tonal"
-                    color="primary"
-                  >
-                    {{ name }}
-                    <v-icon
-                      v-if="name === defaultLoadbalancerClass"
-                      size="small"
-                    >
-                      mdi-star
-                    </v-icon>
-                  </v-chip>
-                </template>
-                <span>Default Load Balancer Class</span>
-              </v-tooltip>
+                {{ name }}
+                <v-icon
+                  v-if="name === defaultLoadbalancerClass"
+                  size="small"
+                >
+                  mdi-star
+                </v-icon>
+                <v-tooltip
+                  activator="parent"
+                  :disabled="name !== defaultLoadbalancerClass"
+                  location="top"
+                >
+                  <span>Default Load Balancer Class</span>
+                </v-tooltip>
+              </v-chip>
             </div>
           </g-list-item-content>
         </g-list-item>

diff --git a/frontend/src/views/GAdministration.vue b/frontend/src/views/GAdministration.vue
@@ -417,25 +417,31 @@ SPDX-License-Identifier: Apache-2.0
                       v-for="resourceQuota in projectQuotaStatus"
                       :key="resourceQuota.key"
                     >
-                      <td>
-                        <v-tooltip location="top">
-                          <template #activator="{ props }">
-                            <span v-bind="props">{{ resourceQuota.caption }}</span>
-                          </template>
-                          {{ resourceQuota.resourceName }}
-                        </v-tooltip>
+                      <td class="text-left">
+                        <span>
+                          {{ resourceQuota.caption }}
+                          <v-tooltip
+                            activator="parent"
+                            location="top"
+                          >
+                            {{ resourceQuota.resourceName }}
+                          </v-tooltip>
+                        </span>
                       </td>
                       <td class="text-center">
-                        <v-tooltip location="top">
-                          <template #activator="{ props }">
-                            <v-progress-linear
-                              v-bind="props"
-                              :model-value="resourceQuota.percentage"
-                              :color="resourceQuota.progressColor"
-                            />
-                          </template>
-                          {{ resourceQuota.percentage }}%
-                        </v-tooltip>
+                        <div>
+                          <v-progress-linear
+                            :model-value="resourceQuota.percentage"
+                            :color="resourceQuota.progressColor"
+                            :height="8"
+                          />
+                          <v-tooltip
+                            activator="parent"
+                            location="top"
+                          >
+                            {{ resourceQuota.percentage }}%
+                          </v-tooltip>
+                        </div>
                       </td>
                       <td class="text-center">
                         {{ resourceQuota.usedValue }} / {{ resourceQuota.limitValue }}