From 4af78d22a17bfb599db887177116ef53d19dbbfb Mon Sep 17 00:00:00 2001
From: "Gross, Lukas" <lukas.gross@sap.com>
Date: Thu, 19 Sep 2024 14:48:04 +0200
Subject: [PATCH 1/3] Added Rotate Credentials Help Dialog

---
 .../components/GCredentialRotationHelp.vue    | 54 +++++++++++++++++++
 .../GShootCredentialRotationCard.vue          |  7 ++-
 2 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/GCredentialRotationHelp.vue

diff --git a/frontend/src/components/GCredentialRotationHelp.vue b/frontend/src/components/GCredentialRotationHelp.vue
new file mode 100644
index 0000000000..2a4e19bb72
--- /dev/null
+++ b/frontend/src/components/GCredentialRotationHelp.vue
@@ -0,0 +1,54 @@
+<!--
+SPDX-FileCopyrightText: 2023 SAP SE or an SAP affiliate company and Gardener contributors
+
+SPDX-License-Identifier: Apache-2.0
+-->
+
+<template>
+  <g-action-button
+    icon="mdi-help-circle-outline"
+    color="toolbar-title"
+    class="mr-4"
+    @click="showDialog"
+  >
+    <template #tooltip>
+      <span>Help</span>
+    </template>
+  </g-action-button>
+  <g-dialog
+    ref="gDialog"
+    confirm-button-text="Ok"
+    cancel-button-text=""
+    width="600"
+  >
+    <template #caption>
+      Credential Rotation Help
+    </template>
+    <template #content>
+      <v-card-text>
+        There are a lot of different credentials for Shoots to make sure that the various components can communicate with each other and to make sure it is usable and operable.<br>
+        <g-external-link url="https://github.com/gardener/gardener/blob/master/docs/usage/shoot_credentials_rotation.md">
+          This page
+        </g-external-link>
+        explains how the varieties of credentials can be rotated so that the cluster can be considered secure.
+      </v-card-text>
+    </template>
+  </g-dialog>
+</template>
+
+<script>
+import GDialog from '@/components/dialogs/GDialog.vue'
+import GActionButton from '@/components/GActionButton.vue'
+
+export default {
+  components: {
+    GDialog,
+    GActionButton,
+  },
+  methods: {
+    showDialog () {
+      this.$refs.gDialog.showDialog()
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/ShootDetails/GShootCredentialRotationCard.vue b/frontend/src/components/ShootDetails/GShootCredentialRotationCard.vue
index a126c38f9e..db0cf0e7bb 100644
--- a/frontend/src/components/ShootDetails/GShootCredentialRotationCard.vue
+++ b/frontend/src/components/ShootDetails/GShootCredentialRotationCard.vue
@@ -6,7 +6,11 @@ SPDX-License-Identifier: Apache-2.0
 
 <template>
   <v-card class="mb-4">
-    <g-toolbar title="Credential Rotation" />
+    <g-toolbar title="Credential Rotation">
+      <template #append>
+        <g-credential-rotation-help />
+      </template>
+    </g-toolbar>
     <g-list>
       <g-credential-tile
         type="ALL_CREDENTIALS"
@@ -45,6 +49,7 @@ SPDX-License-Identifier: Apache-2.0
 
 <script setup>
 import GCredentialTile from '@/components/GCredentialTile'
+import GCredentialRotationHelp from '@/components/GCredentialRotationHelp'
 
 import { useShootItem } from '@/composables/useShootItem'
 

From 0145b3eac285cbf680a54c15bccc883377a2358f Mon Sep 17 00:00:00 2001
From: "Gross, Lukas" <lukas.gross@sap.com>
Date: Wed, 25 Sep 2024 17:01:41 +0200
Subject: [PATCH 2/3] Use GGenericActionButtonDialog for Help Dialogs

---
 .../components/GCredentialRotationHelp.vue    | 36 ++------
 .../src/components/GResourceQuotaHelp.vue     | 89 +++++++------------
 .../GShootCustomFieldsConfiguration.vue       |  2 +-
 3 files changed, 43 insertions(+), 84 deletions(-)

diff --git a/frontend/src/components/GCredentialRotationHelp.vue b/frontend/src/components/GCredentialRotationHelp.vue
index 2a4e19bb72..f515faca92 100644
--- a/frontend/src/components/GCredentialRotationHelp.vue
+++ b/frontend/src/components/GCredentialRotationHelp.vue
@@ -5,25 +5,18 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <g-action-button
+  <g-generic-action-button-dialog
     icon="mdi-help-circle-outline"
     color="toolbar-title"
     class="mr-4"
-    @click="showDialog"
+    caption="Credential Rotation Help"
+    can-perform-action
+    cancel-button-text=""
+    confirm-button-text="Close"
   >
     <template #tooltip>
       <span>Help</span>
     </template>
-  </g-action-button>
-  <g-dialog
-    ref="gDialog"
-    confirm-button-text="Ok"
-    cancel-button-text=""
-    width="600"
-  >
-    <template #caption>
-      Credential Rotation Help
-    </template>
     <template #content>
       <v-card-text>
         There are a lot of different credentials for Shoots to make sure that the various components can communicate with each other and to make sure it is usable and operable.<br>
@@ -33,22 +26,11 @@ SPDX-License-Identifier: Apache-2.0
         explains how the varieties of credentials can be rotated so that the cluster can be considered secure.
       </v-card-text>
     </template>
-  </g-dialog>
+  </g-generic-action-button-dialog>
 </template>
 
-<script>
-import GDialog from '@/components/dialogs/GDialog.vue'
-import GActionButton from '@/components/GActionButton.vue'
+<script setup>
+
+import GGenericActionButtonDialog from '@/components/dialogs/GGenericActionButtonDialog.vue'
 
-export default {
-  components: {
-    GDialog,
-    GActionButton,
-  },
-  methods: {
-    showDialog () {
-      this.$refs.gDialog.showDialog()
-    },
-  },
-}
 </script>
diff --git a/frontend/src/components/GResourceQuotaHelp.vue b/frontend/src/components/GResourceQuotaHelp.vue
index 3045a221c0..48c093e0fd 100644
--- a/frontend/src/components/GResourceQuotaHelp.vue
+++ b/frontend/src/components/GResourceQuotaHelp.vue
@@ -5,69 +5,46 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <div
-    v-if="resourceQuotaHelpText"
-    class="mr-2"
+  <g-generic-action-button-dialog
+    icon="mdi-help-circle-outline"
+    color="toolbar-title"
+    class="mr-4"
+    caption="Quota Help"
+    :can-perform-action="!!resourceQuotaHelpText"
+    cancel-button-text=""
+    confirm-button-text="Close"
   >
-    <g-action-button
-      icon="mdi-help-circle-outline"
-      color="toolbar-title"
-      @click="showDialog"
-    >
-      <template #tooltip>
-        <span>Help</span>
-      </template>
-    </g-action-button>
-    <g-dialog
-      ref="gDialog"
-      confirm-button-text="Ok"
-      cancel-button-text=""
-      width="600"
-    >
-      <template #caption>
-        Quota Help
-      </template>
-      <template #content>
-        <v-card-text>
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            class="wrap-text"
-            v-html="resourceQuotaHelpHtml"
-          />
-          <!-- eslint-enable vue/no-v-html -->
-        </v-card-text>
-      </template>
-    </g-dialog>
-  </div>
+    <template #tooltip>
+      <span>Help</span>
+    </template>
+    <template #content>
+      <v-card-text>
+        <!-- eslint-disable vue/no-v-html -->
+        <div
+          class="wrap-text"
+          v-html="resourceQuotaHelpHtml"
+        />
+        <!-- eslint-enable vue/no-v-html -->
+      </v-card-text>
+    </template>
+  </g-generic-action-button-dialog>
 </template>
 
-<script>
-import { mapState } from 'pinia'
+<script setup>
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
 
 import { useConfigStore } from '@/store/config'
 
-import GDialog from '@/components/dialogs/GDialog.vue'
-import GActionButton from '@/components/GActionButton.vue'
+import GGenericActionButtonDialog from '@/components/dialogs/GGenericActionButtonDialog.vue'
 
 import { transformHtml } from '@/utils'
 
-export default {
-  components: {
-    GDialog,
-    GActionButton,
-  },
-  computed: {
-    ...mapState(useConfigStore, [
-      'resourceQuotaHelpText',
-    ]),
-    resourceQuotaHelpHtml () {
-      return transformHtml(this.resourceQuotaHelpText, true)
-    },
-  },
-  methods: {
-    showDialog () {
-      this.$refs.gDialog.showDialog()
-    },
-  },
-}
+const configStore = useConfigStore()
+const { resourceQuotaHelpText } = storeToRefs(configStore)
+
+const resourceQuotaHelpHtml = computed(() => {
+  return transformHtml(resourceQuotaHelpText.value, true)
+})
+
 </script>
diff --git a/frontend/src/components/GShootCustomFieldsConfiguration.vue b/frontend/src/components/GShootCustomFieldsConfiguration.vue
index 5c06a94343..8ebd8c2684 100644
--- a/frontend/src/components/GShootCustomFieldsConfiguration.vue
+++ b/frontend/src/components/GShootCustomFieldsConfiguration.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: Apache-2.0
     disable-confirm-input-focus
     :can-perform-action="canPatchProject"
     :disabled="!canPatchProject"
-    :is-toolbar-close-button-visible="true"
+    is-toolbar-close-button-visible
     cancel-button-text=""
     confirm-button-text="Close"
     width="90vw"

From 176ae8a24bd38ec55c6d139ed78d9b38cbf41d74 Mon Sep 17 00:00:00 2001
From: "Gross, Lukas" <lukas.gross@sap.com>
Date: Thu, 26 Sep 2024 09:09:00 +0200
Subject: [PATCH 3/3] PR Feedback (text)

---
 frontend/src/components/GCredentialRotationHelp.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/GCredentialRotationHelp.vue b/frontend/src/components/GCredentialRotationHelp.vue
index f515faca92..da51516f77 100644
--- a/frontend/src/components/GCredentialRotationHelp.vue
+++ b/frontend/src/components/GCredentialRotationHelp.vue
@@ -19,11 +19,11 @@ SPDX-License-Identifier: Apache-2.0
     </template>
     <template #content>
       <v-card-text>
-        There are a lot of different credentials for Shoots to make sure that the various components can communicate with each other and to make sure it is usable and operable.<br>
+        There are many different credentials for Shoots to ensure that various components can communicate with each other and to make sure they are usable and operable.<br>
         <g-external-link url="https://github.com/gardener/gardener/blob/master/docs/usage/shoot_credentials_rotation.md">
           This page
         </g-external-link>
-        explains how the varieties of credentials can be rotated so that the cluster can be considered secure.
+        explains how these credentials can be rotated to ensure the cluster's security.
       </v-card-text>
     </template>
   </g-generic-action-button-dialog>