DNS provider w/o secretBinding should be readonly (#1086)

frontend/src/components/SelectSecret.vue

@@ -11,6 +11,7 @@ SPDX-License-Identifier: Apache-2.0
       color="primary"
       item-color="primary"
       label="Secret"
+      :disabled="disabled"
       :items="secretList"
       item-value="metadata.name"
       return-object
@@ -71,6 +72,10 @@ export default {
       type: Boolean,
       default: true
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     cloudProfileName: {
       type: String
     },

frontend/src/components/ShootDns/DnsProvider.vue

@@ -16,7 +16,7 @@ SPDX-License-Identifier: Apache-2.0
         outlined
         class="cursor-pointer my-0 ml-0">
           <vendor-icon :value="type" :size="20"></vendor-icon>
-          {{secretName}}
+          <span class="px-1">{{secretName}}</span>
           <v-icon v-if="primary" small>mdi-star</v-icon>
       </v-chip>
     </template>

frontend/src/components/ShootDns/DnsProviderRow.vue

@@ -5,13 +5,14 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <v-tooltip top :disabled="!secretBindingMissing" open-delay="0">
+  <v-tooltip top :disabled="!readonly" open-delay="0">
     <template v-slot:activator="{ on }">
      <v-row align="center" class="ma-0" v-on="on">
-        <v-col cols="11" :class="{'disabled-row' : secretBindingMissing}">
+        <v-col cols="11">
           <div class="d-flex flex-wrap">
-            <div class="regularInput">
+            <div class="regular-input">
               <v-select
+                :disabled="readonly || primaryReadonly"
                 color="primary"
                 item-color="primary"
                 v-model="type"
@@ -20,7 +21,6 @@ SPDX-License-Identifier: Apache-2.0
                 :items="dnsProviderTypes"
                 :error-messages="getErrorMessages('type')"
                 label="Dns Provider Type"
-                :disabled="primary && !clusterIsNew"
                 :hint="typeHint"
                 persistent-hint
               >
@@ -40,15 +40,17 @@ SPDX-License-Identifier: Apache-2.0
                 </template>
               </v-select>
             </div>
-            <div class="regularInput">
+            <div class="regular-input">
               <select-secret
+                :disabled="readonly"
                 :dns-provider-kind="type"
                 v-model="secret"
                 :valid.sync="secretValid">
               </select-secret>
             </div>
-            <div class="regularInput">
+            <div class="regular-input">
               <v-combobox
+                :disabled="readonly"
                 v-model="excludeDomains"
                 label="Exclude Domains"
                 multiple
@@ -57,8 +59,9 @@ SPDX-License-Identifier: Apache-2.0
               >
               </v-combobox>
             </div>
-            <div class="regularInput">
+            <div class="regular-input">
               <v-combobox
+                :disabled="readonly"
                 v-model="includeDomains"
                 label="Include Domains"
                 multiple
@@ -67,8 +70,9 @@ SPDX-License-Identifier: Apache-2.0
               >
               </v-combobox>
             </div>
-            <div class="regularInput">
+            <div class="regular-input">
               <v-combobox
+                :disabled="readonly"
                 v-model="excludeZones"
                 label="Exclude Zones"
                 multiple
@@ -77,8 +81,9 @@ SPDX-License-Identifier: Apache-2.0
               >
               </v-combobox>
             </div>
-            <div class="regularInput">
+            <div class="regular-input">
               <v-combobox
+                :disabled="readonly"
                 v-model="includeZones"
                 label="Include Zones"
                 multiple
@@ -89,14 +94,14 @@ SPDX-License-Identifier: Apache-2.0
             </div>
           </div>
         </v-col>
-        <v-col cols="1" :class="{'disabled-row' : secretBindingMissing}">
+        <v-col cols="1">
           <v-btn
+            :disabled="readonly || primaryReadonly"
             small
             outlined
             icon
             color="grey"
-            @click="onDelete"
-            :disabled="primary && !clusterIsNew">
+            @click="onDelete">
             <v-icon>mdi-close</v-icon>
           </v-btn>
         </v-col>
@@ -160,31 +165,32 @@ export default {
     }),
     ...mapGetters('shootStaging', [
       'clusterIsNew',
-      'dnsProviderTypes'
-    ]),
-    ...mapGetters([
-      'dnsSecretsByProviderKind'
+      'dnsProviderTypes',
+      'getDnsProviderSecrets'
     ]),
     dnsSecrets () {
-      return this.dnsSecretsByProviderKind(this.type)
+      return this.getDnsProviderSecrets(this.type)
     },
     typeHint () {
       return this.primary && !this.clusterIsNew
         ? 'Primary Provider type cannot be changed after cluster creation'
         : ''
     },
-    secretBindingMissing () {
-      return !this.clusterIsNew && !this.secret
+    primaryReadonly () {
+      return !this.clusterIsNew && this.primary
+    },
+    readonly () {
+      return get(this.dnsProvider, 'readonly')
     },
     type: {
       get () {
         return get(this.dnsProvider, 'type')
       },
       set (value) {
-        const defaultDnsSecret = head(this.dnsSecretsByProviderKind(value))
+        const defaultDnsSecret = head(this.getDnsProviderSecrets(value))
         this.setData({
           type: value,
-          secretName: get(defaultDnsSecret, 'metadata.name', null)
+          secretName: get(defaultDnsSecret, 'metadata.secretRef.name', null)
         })
       }
     },
@@ -201,7 +207,7 @@ export default {
         return find(this.dnsSecrets, ['metadata.secretRef.name', this.secretName])
       },
       set (value) {
-        this.secretName = get(value, 'metadata.name', null)
+        this.secretName = get(value, 'metadata.secretRef.name', null)
       }
     },
     includeDomains: {
@@ -252,8 +258,8 @@ export default {
       })
     },
     updateValid () {
-      const valid = this.secretBindingMissing || (this.secretValid && !this.$v.$invalid)
-      if (this.valid !== valid) {
+      const valid = this.secretValid && !this.$v.$invalid
+      if (this.valid !== valid && !this.readonly) {
         this.setData({ valid })
       }
     },
@@ -286,12 +292,8 @@ export default {
     }
   }
 
-  .disabled-row {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  .regularInput {
+  .regular-input {
+    width: 250px;
     max-width: 300px;
     flex: 1 1 auto;
     padding: 12px;

frontend/src/components/ShootDns/ManageDns.vue

@@ -8,7 +8,7 @@ SPDX-License-Identifier: Apache-2.0
   <v-container class="pa-0 ma-0">
     <template v-if="dnsProviderIds.length">
       <v-row class="ma-0">
-        <v-col cols="6">
+        <v-col cols="7">
           <v-text-field
             color="primary"
             label="Cluster Domain"
@@ -19,7 +19,7 @@ SPDX-License-Identifier: Apache-2.0
             :hint="domainHint"
           ></v-text-field>
         </v-col>
-        <v-col cols="3" v-show="primaryProviderVisible">
+        <v-col cols="4" v-show="primaryProviderVisible">
           <v-select
             color="primary"
             item-color="primary"

frontend/src/store/modules/shootStaging.js

@@ -17,6 +17,7 @@ import filter from 'lodash/filter'
 import includes from 'lodash/includes'
 import isEmpty from 'lodash/isEmpty'
 import every from 'lodash/every'
+import find from 'lodash/find'
 
 import { v4 as uuidv4 } from '@/utils/uuid'
 
@@ -54,6 +55,15 @@ const getters = {
   dnsProviderTypesWithPrimarySupport (state, getters, rootState, rootGetters) {
     return map(filter(rootGetters.sortedDnsProviderList, 'primary'), 'type')
   },
+  getDnsProviderSecrets (state, getters, rootState, rootGetters) {
+    return type => rootGetters.dnsSecretsByProviderKind(type)
+  },
+  findDnsProviderSecret (state, getters) {
+    return (type, secretName) => {
+      const secrets = getters.getDnsProviderSecrets(type)
+      return find(secrets, ['metadata.secretRef.name', secretName])
+    }
+  },
   dnsProviders (state) {
     return map(state.dnsProviderIds, id => state.dnsProviders[id])
   },
@@ -130,10 +140,10 @@ const actions = {
       }
     }
   },
-  addDnsProvider ({ commit, getters, rootGetters }) {
+  addDnsProvider ({ commit, getters }) {
     const type = head(getters.dnsProviderTypes)
-    const dnsSecret = head(rootGetters.dnsSecretsByProviderKind(type))
-    const secretName = get(dnsSecret, 'metadata.name')
+    const secret = head(getters.getDnsProviderSecrets(type))
+    const secretName = get(secret, 'metadata.name')
     const id = uuidv4()
     commit('addDnsProvider', {
       id,
@@ -143,10 +153,11 @@ const actions = {
       includeDomains: [],
       excludeZones: [],
       includeZones: [],
-      valid: isDnsProviderValid({ type, secretName })
+      valid: isDnsProviderValid({ type, secretName }),
+      readonly: false
     })
   },
-  setClusterConfiguration ({ commit }, value) {
+  setClusterConfiguration ({ commit, getters }, value) {
     const {
       metadata = {},
       spec: {
@@ -176,6 +187,16 @@ const actions = {
       if (primary) {
         primaryProviderId = id
       }
+      let readonly = false
+      if (!getters.clusterIsNew) {
+        const secret = getters.findDnsProviderSecret(type, secretName)
+        // If no secret binding was found for a given secretName and the cluster is not new,
+        // then we assume that the secret exists and was created by hand.
+        // The DNS provider should not be changed in this case.
+        if (!secret) {
+          readonly = true
+        }
+      }
       return {
         id,
         type,
@@ -184,7 +205,8 @@ const actions = {
         includeDomains: [...includeDomains],
         excludeZones: [...excludeZones],
         includeZones: [...includeZones],
-        valid: isDnsProviderValid({ type, secretName })
+        valid: isDnsProviderValid({ type, secretName }),
+        readonly
       }
     })
     commit('setDns', {