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] 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'