Refactor Provider Credentials

backend/test/acceptance/__snapshots__/api.cloudProviderCredentials.spec.js.snap

@@ -137,7 +137,7 @@ exports[`api cloudproviderCredentials should not delete a shared cloudProvider c
 {
   "code": 422,
   "details": Any<Object>,
-  "message": "Remove allowed only for secrets in own namespace",
+  "message": "Remove allowed only if secret and secretBinding are in the same namespace",
   "reason": "Unprocessable Entity",
   "status": "Failure",
 }
@@ -162,11 +162,11 @@ exports[`api cloudproviderCredentials should not patch a shared cloudProvider cr
   "code": 422,
   "details": {
     "name": "UnprocessableEntityError",
-    "stack": "UnprocessableEntityError: Patch allowed only for secrets in own namespace
+    "stack": "UnprocessableEntityError: Patch allowed only if secret and secretBinding are in the same namespace
     at [object Object]
     at [object Object]",
   },
-  "message": "Patch allowed only for secrets in own namespace",
+  "message": "Patch allowed only if secret and secretBinding are in the same namespace",
   "reason": "Unprocessable Entity",
   "status": "Failure",
 }

frontend/__tests__/stores/credential.spec.js

@@ -197,95 +197,15 @@ describe('stores', () => {
       expect(newSecretBinding._secret.data).toEqual({ newSecret: 'dummy-data' })
     })
 
-    it('should deleteCredential secretbinding and referenced secret / quota', async () => {
+    it('should not delete credential', async () => {
       const name = azureSecretBindingName
       const namespace = testNamespace
 
-      let azureSecretBinding = find(credentialStore.secretBindingList, { metadata: { namespace, name } })
-      expect(azureSecretBinding).toMatchSnapshot()
-
-      const azureSecretRef = azureSecretBinding.secretRef
-      let azureSecret = find(credentialStore.secretList, { metadata: azureSecretRef })
-      expect(azureSecret).toMatchSnapshot()
-
-      const azureQuotaRef1 = azureSecretBinding.quotas[0]
-      let azureQuota1 = find(credentialStore.quotaList, { metadata: azureQuotaRef1 })
-      expect(azureQuota1).toMatchSnapshot()
-
-      const azureQuotaRef2 = azureSecretBinding.quotas[1]
-      let azureQuota2 = find(credentialStore.quotaList, { metadata: azureQuotaRef2 })
-      expect(azureQuota2).toMatchSnapshot()
-
       await credentialStore.deleteCredential(name)
 
       expect(api.deleteCloudProviderCredential).toBeCalledTimes(1)
       expect(api.deleteCloudProviderCredential).toBeCalledWith({ name, namespace })
-
-      azureSecretBinding = find(credentialStore.secretBindingList, { metadata: { namespace, name } })
-      expect(azureSecretBinding).toBeUndefined()
-
-      azureSecret = find(credentialStore.secretList, { metadata: azureSecretRef })
-      expect(azureSecret).toBeUndefined()
-
-      azureQuota1 = find(credentialStore.quotaList, { metadata: azureQuotaRef1 })
-      expect(azureQuota1).toBeUndefined()
-
-      azureQuota2 = find(credentialStore.quotaList, { metadata: azureQuotaRef2 })
-      expect(azureQuota2).toBeUndefined()
-    })
-
-    it('should not delete secret or quota if referenced by other SecretBinding', async () => {
-      const name = azureSecretBindingName
-      const namespace = testNamespace
-
-      let azureSecretBinding = find(credentialStore.secretBindingList, { metadata: { namespace, name } })
-      expect(azureSecretBinding).toMatchSnapshot()
-
-      const azureSecretRef = azureSecretBinding.secretRef
-      const azureQuotaRef1 = azureSecretBinding.quotas[0]
-      const azureQuotaRef2 = azureSecretBinding.quotas[1]
-
-      // Add another SecretBinding that references the same secret and quota
-      const otherSecretBinding = {
-        metadata: {
-          namespace,
-          name: 'other-secretbinding',
-        },
-        provider: {
-          type: 'azure',
-        },
-        secretRef: azureSecretRef,
-        quotas: [azureQuotaRef1],
-      }
-      const { secretBindings, secrets, quotas } = fixtures.credentials
-      secretBindings.push(otherSecretBinding)
-      credentialStore._setCredentials({ secretBindings, secrets, quotas })
-
-      let azureSecret = find(credentialStore.secretList, { metadata: azureSecretRef })
-      expect(azureSecret).toMatchSnapshot()
-
-      let azureQuota1 = find(credentialStore.quotaList, { metadata: azureQuotaRef1 })
-      expect(azureQuota1).toMatchSnapshot()
-
-      let azureQuota2 = find(credentialStore.quotaList, { metadata: azureQuotaRef2 })
-      expect(azureQuota2).toMatchSnapshot()
-
-      await credentialStore.deleteCredential(name)
-
-      expect(api.deleteCloudProviderCredential).toBeCalledTimes(1)
-      expect(api.deleteCloudProviderCredential).toBeCalledWith({ name, namespace })
-
-      azureSecretBinding = find(credentialStore.secretBindingList, { metadata: { namespace, name } })
-      expect(azureSecretBinding).toBeUndefined()
-
-      azureSecret = find(credentialStore.secretList, { metadata: azureSecretRef })
-      expect(azureSecret).toMatchSnapshot() // still referenced by otherSecretBinding
-
-      azureQuota1 = find(credentialStore.quotaList, { metadata: azureQuotaRef1 })
-      expect(azureQuota1).toMatchSnapshot() // still referenced by otherSecretBinding
-
-      azureQuota2 = find(credentialStore.quotaList, { metadata: azureQuotaRef2 })
-      expect(azureQuota2).toBeUndefined() // not referenced anymore
+      expect(api.getCloudProviderCredentials).toBeCalledTimes(1)
     })
 
     it('store should be resetted in case of a fetch error', async () => {

frontend/src/components/GShootSecretName.vue

@@ -13,7 +13,7 @@ SPDX-License-Identifier: Apache-2.0
       <g-text-router-link
         v-if="canLinkToSecret"
         v-bind="props"
-        :to="{ name: 'Secret', params: { name: secretBindingName, namespace: namespace } }"
+        :to="{ name: 'Secrets', params: { namespace }, hash: credentialHash }"
         :text="secretBindingName"
       />
       <span
@@ -23,6 +23,7 @@ SPDX-License-Identifier: Apache-2.0
     </template>
     <v-card>
       <g-secret-details-item-content
+        v-if="secretBinding"
         class="ma-1"
         infra
         :secret="secretBinding._secret"
@@ -67,6 +68,13 @@ export default {
     secretBinding () {
       return this.getSecretBinding({ namespace: this.namespace, name: this.secretBindingName })
     },
+    credentialHash () {
+      const uid = this.secretBinding?.metadata.uid
+      if (!uid) {
+        return ''
+      }
+      return `#credential-uid=${encodeURIComponent(uid)}`
+    },
   },
   methods: {
     ...mapActions(useCredentialStore, ['getSecretBinding']),

frontend/src/components/Secrets/GSecretDialog.vue

@@ -8,6 +8,7 @@ SPDX-License-Identifier: Apache-2.0
   <v-dialog
     v-model="visible"
     max-width="850"
+    scrollable
   >
     <v-card>
       <g-toolbar
@@ -25,7 +26,7 @@ SPDX-License-Identifier: Apache-2.0
         </template>
       </g-toolbar>
       <v-card-text>
-        <div class="d-flex flex-row pa-3">
+        <div class="d-flex flex-row pa-3 card-content">
           <div
             ref="secretDetails"
             class="d-flex flex-column flex-grow-1"
@@ -69,22 +70,24 @@ SPDX-License-Identifier: Apache-2.0
           </v-slide-x-reverse-transition>
         </div>
       </v-card-text>
-      <v-alert
-        :model-value="!isCreateMode && relatedShootCount > 0"
-        type="warning"
-        rounded="0"
-        class="mb-2"
-      >
-        This secret is used by {{ relatedShootCount }} clusters. The new secret should be part of the same account as the one that gets replaced.
-      </v-alert>
-      <v-alert
-        :model-value="!isCreateMode && relatedShootCount > 0"
-        type="warning"
-        rounded="0"
-        class="mb-2"
-      >
-        Clusters will only start using the new secret after they got reconciled. Therefore, wait until all clusters using the secret are reconciled before you disable the old secret in your infrastructure account. Otherwise the clusters will no longer function.
-      </v-alert>
+      <div>
+        <v-alert
+          :model-value="!isCreateMode && relatedShootCount > 0"
+          type="warning"
+          rounded="0"
+          class="mb-2"
+        >
+          This secret is used by {{ relatedShootCount }} clusters. The new secret should be part of the same account as the one that gets replaced.
+        </v-alert>
+        <v-alert
+          :model-value="!isCreateMode && relatedShootCount > 0"
+          type="warning"
+          rounded="0"
+          class="mb-2"
+        >
+          Clusters will only start using the new secret after they got reconciled. Therefore, wait until all clusters using the secret are reconciled before you disable the old secret in your infrastructure account. Otherwise the clusters will no longer function.
+        </v-alert>
+      </div>
       <v-divider />
       <v-card-actions>
         <v-spacer />
@@ -395,4 +398,9 @@ export default {
   pointer-events: none;
 }
 
+.card-content {
+    overflow: scroll;
+    height: auto;
+  }
+
 </style>

frontend/src/components/Secrets/GSecretRowDns.vue

@@ -5,7 +5,10 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <tr :class="{ 'highlighted': item.highlighted }">
+  <tr
+    class="secret-row"
+    :class="{ 'highlighted': item.highlighted }"
+  >
     <td v-if="selectedHeaders.name">
       <div class="d-flex">
         {{ item.name }}
@@ -136,10 +139,13 @@ export default {
 
 <style lang="scss" scoped>
   $highlighted-color: rgb(var(--v-theme-accent));
-  $highlighted-border-color: rgb(var(--v-theme-accent-darken-2));
 
-  .highlighted {
-    background-color: $highlighted-color;
-    border-color: $highlighted-border-color;
+  .secret-row {
+    background-color: inherit;
+    transition: background-color 0.5s ease;
+
+    &.highlighted {
+      background-color: $highlighted-color;
+    }
   }
 </style>

frontend/src/components/Secrets/GSecretRowInfra.vue

@@ -5,7 +5,10 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <tr :class="{ 'highlighted': item.highlighted }">
+  <tr
+    class="secret-row"
+    :class="{ 'highlighted': item.highlighted }"
+  >
     <td v-if="selectedHeaders.name">
       <div class="d-flex">
         {{ item.name }}
@@ -134,7 +137,12 @@ export default {
 <style lang="scss" scoped>
   $highlighted-color: rgb(var(--v-theme-accent));
 
-  .highlighted {
-    background-color: $highlighted-color;
+  .secret-row {
+    background-color: inherit;
+    transition: background-color 0.5s ease;
+
+    &.highlighted {
+      background-color: $highlighted-color;
+    }
   }
 </style>