Fixing Popover Attachment in the Shoot List (gardener#1671)

* update yarn and floating ui

* fixes gardener#1650

.yarnrc.yml

@@ -40,8 +40,8 @@ packageExtensions:
       vue: "*"
   vite@*:
     dependencies:
-      "@esbuild/linux-arm64": "0.18"
-      "@esbuild/linux-x64": "0.18"
+      "@esbuild/linux-arm64": 0.18
+      "@esbuild/linux-x64": 0.18
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
@@ -57,4 +57,4 @@ plugins:
 
 pnpEnableEsmLoader: true
 
-yarnPath: .yarn/releases/yarn-3.6.3.cjs
+yarnPath: .yarn/releases/yarn-3.6.4.cjs

frontend/src/components/ControlPlaneHighAvailability/GControlPlaneHighAvailabilityTag.vue

@@ -6,17 +6,19 @@ SPDX-License-Identifier: Apache-2.0
 
 <template>
   <g-popover
-    v-if="shootControlPlaneHighAvailabilityFailureTolerance"
+    v-model="internalValue"
+    :disbaled="!shootControlPlaneHighAvailabilityFailureTolerance"
     toolbar-title="Control Plane High Availability"
     :toolbar-color="color"
   >
     <template #activator="{ props }">
       <v-chip
+        v-if="shootControlPlaneHighAvailabilityFailureTolerance"
         v-bind="props"
         variant="tonal"
         :size="size"
         :color="color"
-        class="cursor-pointer ml-1"
+        class="cursor-pointer"
       >
         {{ shootControlPlaneHighAvailabilityFailureTolerance }}
       </v-chip>
@@ -66,12 +68,26 @@ import { some } from '@/lodash'
 
 export default {
   mixins: [shootItem],
+  inject: [
+    'activePopoverKey',
+  ],
   props: {
     size: {
       type: [String, Number],
     },
   },
   computed: {
+    popoverKey () {
+      return `g-control-plane-hig-availability-tag:${this.shootMetadata.uid}`
+    },
+    internalValue: {
+      get () {
+        return this.activePopoverKey === this.popoverKey
+      },
+      set (value) {
+        this.activePopoverKey = value ? this.popoverKey : ''
+      },
+    },
     zoneSupported () {
       const seeds = this.seedsByCloudProfileName(this.shootCloudProfileName)
       return some(seeds, ({ data }) => data.zones?.length >= 3)

frontend/src/components/GShootCustomField.vue

@@ -6,6 +6,7 @@ SPDX-License-Identifier: Apache-2.0
 
 <template>
   <g-popover
+    v-model="popover"
     :toolbar-title="name"
     :toolbar-color="color"
     placement="right"
@@ -174,5 +175,10 @@ export default {
       type: Boolean,
     },
   },
+  data () {
+    return {
+      popover: false,
+    }
+  },
 }
 </script>

frontend/src/components/GShootStatus.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: Apache-2.0
 <template>
   <div class="d-flex align-center">
     <g-popover
-      v-model="popover"
+      v-model="internalValue"
       :toolbar-title="toolbarTitle"
       :toolbar-color="color"
       :placement="popperPlacement"
@@ -16,7 +16,7 @@ SPDX-License-Identifier: Apache-2.0
         <div class="d-flex align-center">
           <v-tooltip
             location="top"
-            :disabled="popover"
+            :disabled="internalValue"
           >
             <template #activator="{ props: tooltipProps }">
               <v-btn
@@ -215,7 +215,10 @@ export default {
     GShootMessageDetails,
   },
   mixins: [shootItem],
-  inject: ['mergeProps'],
+  inject: [
+    'mergeProps',
+    'activePopoverKey',
+  ],
   props: {
     popperKey: {
       type: String,
@@ -231,11 +234,21 @@ export default {
   },
   data () {
     return {
-      popover: false,
       retryingOperation: false,
     }
   },
   computed: {
+    popoverKey () {
+      return `g-shoot-status:${this.shootMetadata.uid}`
+    },
+    internalValue: {
+      get () {
+        return this.activePopoverKey === this.popoverKey
+      },
+      set (value) {
+        this.activePopoverKey = value ? this.popoverKey : ''
+      },
+    },
     showProgress () {
       return this.operationState === 'Processing'
     },

frontend/src/components/GStatusTag.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: Apache-2.0
 <template>
   <div v-if="visible">
     <g-popover
-      v-model="popover"
+      v-model="internalValue"
       :placement="popperPlacement"
       :disabled="!condition.message"
       :toolbar-title="popperTitle"
@@ -35,7 +35,7 @@ SPDX-License-Identifier: Apache-2.0
             :activator="$refs.tagChipRef"
             location="top"
             max-width="400px"
-            :disabled="popover"
+            :disabled="internalValue"
           >
             <div class="font-weight-bold">
               {{ chipTooltip.title }}
@@ -69,7 +69,7 @@ SPDX-License-Identifier: Apache-2.0
         :error-descriptions="errorDescriptions"
         :last-transition-time="condition.lastTransitionTime"
         :secret-binding-name="secretBindingName"
-        :namespace="namespace"
+        :namespace="shootMetadata.namespace"
       />
     </g-popover>
   </div>
@@ -97,6 +97,9 @@ export default {
   components: {
     GShootMessageDetails,
   },
+  inject: [
+    'activePopoverKey',
+  ],
   props: {
     condition: {
       type: Object,
@@ -105,25 +108,34 @@ export default {
     secretBindingName: {
       type: String,
     },
-    namespace: {
-      type: String,
-    },
     popperPlacement: {
       type: String,
     },
     staleShoot: {
       type: Boolean,
     },
-  },
-  data () {
-    return {
-      popover: false,
-    }
+    shootMetadata: {
+      type: Object,
+      default () {
+        return { uid: '' }
+      },
+    },
   },
   computed: {
     ...mapState(useAuthnStore, [
       'isAdmin',
     ]),
+    popoverKey () {
+      return `g-status-tag[${this.condition.type}]:${this.shootMetadata.uid}`
+    },
+    internalValue: {
+      get () {
+        return this.activePopoverKey === this.popoverKey
+      },
+      set (value) {
+        this.activePopoverKey = value ? this.popoverKey : ''
+      },
+    },
     popperTitle () {
       if (this.staleShoot) {
         return 'Last Status'

frontend/src/components/GStatusTags.vue

@@ -12,7 +12,7 @@ SPDX-License-Identifier: Apache-2.0
       :condition="condition"
       :popper-placement="popperPlacement"
       :secret-binding-name="shootSecretBindingName"
-      :namespace="shootNamespace"
+      :shoot-metadata="shootMetadata"
       :stale-shoot="isStaleShoot"
     />
   </div>

frontend/src/components/ShootDns/GDnsProvider.vue

@@ -6,6 +6,7 @@ SPDX-License-Identifier: Apache-2.0
 
 <template>
   <g-popover
+    v-model="popover"
     :toolbar-title="secretName"
   >
     <template #activator="{ props }">
@@ -106,6 +107,11 @@ export default {
       required: false,
     },
   },
+  data () {
+    return {
+      popover: false,
+    }
+  },
   computed: {
     dnsProviderDescriptions () {
       const descriptions = []

frontend/src/components/ShootMessages/GShootMessages.vue

@@ -6,14 +6,15 @@ SPDX-License-Identifier: Apache-2.0
 
 <template>
   <g-popover
-    v-if="visible"
-    v-model="popover"
+    v-model="internalValue"
+    :disabled="!visible"
     :toolbar-title="statusTitle"
     :toolbar-color="overallColor"
     content-text-class="pa-0"
   >
     <template #activator="{ props }">
       <g-action-button
+        v-if="visible"
         v-bind="props"
         :icon="icon"
         :color="overallColor"
@@ -87,7 +88,11 @@ export default {
     GMaintenanceStatusMessage,
   },
   mixins: [shootItem],
-  inject: ['mainContainer', 'logger'],
+  inject: [
+    'mainContainer',
+    'logger',
+    'activePopoverKey',
+  ],
   props: {
     small: {
       type: Boolean,
@@ -115,6 +120,17 @@ export default {
     ...mapState(useAuthzStore, [
       'canPatchShoots',
     ]),
+    popoverKey () {
+      return `g-shoot-messages:${this.shootMetadata.uid}`
+    },
+    internalValue: {
+      get () {
+        return this.activePopoverKey === this.popoverKey
+      },
+      set (value) {
+        this.activePopoverKey = value ? this.popoverKey : ''
+      },
+    },
     visible () {
       return !this.isShootMarkedForDeletion && this.shootMessages.length
     },

frontend/src/components/ShootWorkers/GWorkerGroup.vue

@@ -6,6 +6,7 @@ SPDX-License-Identifier: Apache-2.0
 
 <template>
   <g-popover
+    v-model="internalValue"
     :toolbar-title="workerGroup.name"
     placement="bottom"
   >
@@ -33,13 +34,13 @@ SPDX-License-Identifier: Apache-2.0
         value="overview"
         class="text-caption text-medium-emphasis"
       >
-        Overview
+        OVERVIEW
       </v-tab>
       <v-tab
         value="yaml"
         class="text-caption text-medium-emphasis"
       >
-        Yaml
+        YAML
       </v-tab>
     </v-tabs>
     <v-card-text>
@@ -364,7 +365,10 @@ export default {
     GVendorIcon,
     GCodeBlock,
   },
-  inject: ['yaml'],
+  inject: [
+    'yaml',
+    'activePopoverKey',
+  ],
   props: {
     modelValue: {
       type: [String, Number],
@@ -375,6 +379,12 @@ export default {
     cloudProfileName: {
       type: String,
     },
+    shootMetadata: {
+      type: Object,
+      default () {
+        return { uid: '' }
+      },
+    },
   },
   emits: [
     'update:modelValue',
@@ -385,6 +395,17 @@ export default {
     }
   },
   computed: {
+    popoverKey () {
+      return `g-worker-group[${this.workerGroup.name}]:${this.shootMetadata.uid}`
+    },
+    internalValue: {
+      get () {
+        return this.activePopoverKey === this.popoverKey
+      },
+      set (value) {
+        this.activePopoverKey = value ? this.popoverKey : ''
+      },
+    },
     machineType () {
       const machineTypes = this.machineTypesByCloudProfileName({ cloudProfileName: this.cloudProfileName })
       const type = get(this.workerGroup, 'machine.type')