From 25753e5a2c7486d608b3bd41b42e629ee1933b26 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Tue, 5 Sep 2023 16:47:41 +0200
Subject: [PATCH 01/21] Migrated WIP from enh/configure_cloudprovider to vue3
 branch

---
 backend/lib/routes/config.js                  |  10 +-
 .../runtime/dashboard/configmap.spec.js       | 105 +++++++++
 .../dashboard/configmap-vendor-assets.yaml    |  20 ++
 .../templates/dashboard/configmap.yaml        |  12 +
 .../templates/dashboard/deployment.yaml       |  10 +
 charts/gardener-dashboard/values.yaml         |  37 +++
 frontend/src/components/GVendorIcon.vue       |  17 +-
 .../Secrets/GSecretDialogGeneric.vue          | 221 +++++++++++++-----
 .../ShootWorkers/GManageWorkers.vue           |  15 +-
 .../ShootWorkers/GWorkerConfiguration.vue     |  12 +-
 frontend/src/store/cloudProfile/index.js      |   2 +-
 frontend/src/store/config.js                  |  15 ++
 frontend/src/utils/createShoot.js             |  28 ++-
 frontend/src/utils/index.js                   |   6 +-
 frontend/src/views/GNewShoot.vue              |   9 +-
 15 files changed, 441 insertions(+), 78 deletions(-)
 create mode 100644 charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap-vendor-assets.yaml

diff --git a/backend/lib/routes/config.js b/backend/lib/routes/config.js
index c9c6734318..e77cf53c0d 100644
--- a/backend/lib/routes/config.js
+++ b/backend/lib/routes/config.js
@@ -57,7 +57,8 @@ function sanitizeFrontendConfig (frontendConfig) {
     } = {},
     vendorHints = [],
     resourceQuotaHelp = '',
-    controlPlaneHighAvailabilityHelp = ''
+    controlPlaneHighAvailabilityHelp = '',
+    customCloudProviders = {}
   } = sanitizedFrontendConfig
 
   convertAndSanitize(alert, 'message')
@@ -89,5 +90,12 @@ function sanitizeFrontendConfig (frontendConfig) {
     convertAndSanitize(vendorHint, 'message')
   }
 
+  for (const key of Object.keys(customCloudProviders)) {
+    const secret = customCloudProviders[key]?.secret
+    if (secret) {
+      convertAndSanitize(secret, 'help')
+    }
+  }
+
   return sanitizedFrontendConfig
 }
diff --git a/charts/__tests__/gardener-dashboard/runtime/dashboard/configmap.spec.js b/charts/__tests__/gardener-dashboard/runtime/dashboard/configmap.spec.js
index 2992a883ce..c6e4dabe94 100644
--- a/charts/__tests__/gardener-dashboard/runtime/dashboard/configmap.spec.js
+++ b/charts/__tests__/gardener-dashboard/runtime/dashboard/configmap.spec.js
@@ -696,6 +696,111 @@ describe('gardener-dashboard', function () {
       })
     })
 
+    describe('cloudProviderList', function () {
+      it('should render the template with cloudProviderList', async function () {
+        const values = {
+          global: {
+            dashboard: {
+              frontendConfig: {
+                cloudProviderList: [
+                  'foo',
+                  'bar'
+                ]
+              }
+            }
+          }
+        }
+        const documents = await renderTemplates(templates, values)
+        expect(documents).toHaveLength(1)
+        const [configMap] = documents
+        const config = yaml.load(configMap.data['config.yaml'])
+        expect(pick(config, ['frontend.cloudProviderList'])).toMatchSnapshot()
+      })
+    })
+
+    describe('customCloudProviders', function () {
+      it('should render the template with customCloudProviders', async function () {
+        const values = {
+          global: {
+            dashboard: {
+              frontendConfig: {
+                customCloudProviders: {
+                  foo: {
+                    zoned: true,
+                    shoot: {
+                      provider: {
+                        type: 'foo'
+                      }
+                    },
+                    secret: {
+                      fields: [
+                        {
+                          key: 'user',
+                          type: 'text'
+                        },
+                        {
+                          key: 'password',
+                          type: 'password'
+                        }
+                      ]
+                    }
+                  },
+                  bar: {
+                    zoned: false,
+                    shoot: {
+                      provider: {
+                        type: 'bar'
+                      }
+                    },
+                    secret: {
+                      fields: [
+                        {
+                          key: 'user',
+                          type: 'text'
+                        },
+                        {
+                          key: 'password',
+                          type: 'password'
+                        }
+                      ]
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        const documents = await renderTemplates(templates, values)
+        expect(documents).toHaveLength(1)
+        const [configMap] = documents
+        const config = yaml.load(configMap.data['config.yaml'])
+        expect(pick(config, ['frontend.customCloudProviders'])).toMatchSnapshot()
+      })
+    })
+
+    describe('vendors', function () {
+      it('should render the template with vendors', async function () {
+        const values = {
+          global: {
+            dashboard: {
+              frontendConfig: {
+                vendors: {
+                  foo: {
+                    icon: 'foo_icon.svg'
+                  }
+                }
+              }
+            }
+          }
+        }
+        const documents = await renderTemplates(templates, values)
+        expect(documents).toHaveLength(1)
+        const [configMap] = documents
+        const config = yaml.load(configMap.data['config.yaml'])
+        expect(pick(config, ['frontend.vendors'])).toMatchSnapshot()
+      })
+    })
+
     describe('knownConditions', function () {
       it('should render the template with knownConditions markdown', async function () {
         const values = {
diff --git a/charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap-vendor-assets.yaml b/charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap-vendor-assets.yaml
new file mode 100644
index 0000000000..c8b426157d
--- /dev/null
+++ b/charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap-vendor-assets.yaml
@@ -0,0 +1,20 @@
+{{- if .Values.global.dashboard.enabled }}
+{{- if .Values.global.dashboard.frontendConfig.vendorAssets }}
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: dashboard-vendor-assets
+  namespace: {{ .Release.Namespace }}
+  labels:
+    app.kubernetes.io/name: gardener-dashboard
+    app.kubernetes.io/component: dashboard
+    helm.sh/chart: "{{ .Chart.Name }}-{{ .Chart.Version }}"
+    app.kubernetes.io/instance: "{{ .Release.Name }}"
+    app.kubernetes.io/managed-by: "{{ .Release.Service }}"
+binaryData:
+{{- range $file, $content := .Values.global.dashboard.frontendConfig.vendorAssets }}
+  {{ $file }}: |
+    {{ $content }}
+{{- end }}
+{{- end }}
+{{- end }}
diff --git a/charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap.yaml b/charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap.yaml
index 93f2417e11..a4aca90536 100644
--- a/charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap.yaml
+++ b/charts/gardener-dashboard/charts/runtime/templates/dashboard/configmap.yaml
@@ -341,6 +341,18 @@ data:
       {{- if .Values.global.dashboard.frontendConfig.serviceAccountDefaultTokenExpiration }}
       serviceAccountDefaultTokenExpiration: {{ .Values.global.dashboard.frontendConfig.serviceAccountDefaultTokenExpiration }}
       {{- end }}
+      {{- if .Values.global.dashboard.frontendConfig.cloudProviderList }}
+      cloudProviderList:
+        {{- range .Values.global.dashboard.frontendConfig.cloudProviderList }}
+        - {{ . }}
+        {{- end }}
+      {{- end }}
+      {{- if .Values.global.dashboard.frontendConfig.customCloudProviders }}
+      customCloudProviders: {{ toYaml .Values.global.dashboard.frontendConfig.customCloudProviders | nindent 8 }}
+      {{- end }}
+      {{- if .Values.global.dashboard.frontendConfig.vendors }}
+      vendors: {{ toYaml .Values.global.dashboard.frontendConfig.vendors | nindent 8  }}
+      {{- end }}
       {{- if .Values.global.dashboard.frontendConfig.knownConditions }}
       knownConditions: {{ toYaml .Values.global.dashboard.frontendConfig.knownConditions | nindent 8 }}
       {{- end }}
diff --git a/charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml b/charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml
index bfc9cfbcbe..a90eb6438b 100644
--- a/charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml
+++ b/charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml
@@ -75,6 +75,12 @@ spec:
           name: dashboard-assets
           defaultMode: 0444
       {{- end }}
+      {{- if .Values.global.dashboard.frontendConfig.vendorAssets }}
+      - name: vendor-assets
+        configMap:
+          name: dashboard-vendor-assets
+          defaultMode: 0444
+      {{- end }}
       {{- if .Values.global.dashboard.serviceAccountTokenVolumeProjection.enabled }}
       - name: service-account-token
         projected:
@@ -230,6 +236,10 @@ spec:
           - name: assets
             mountPath: /app/public/static/assets
           {{- end }}
+          {{- if .Values.global.dashboard.frontendConfig.vendorAssets }}
+          - name: vendor-assets
+            mountPath: /app/public/static/vendor-assets
+          {{- end }}
           {{- if .Values.global.dashboard.serviceAccountTokenVolumeProjection.enabled }}
           - name: service-account-token
             mountPath: /var/run/secrets/projected/serviceaccount
diff --git a/charts/gardener-dashboard/values.yaml b/charts/gardener-dashboard/values.yaml
index 715a71c1b7..7255252b1c 100644
--- a/charts/gardener-dashboard/values.yaml
+++ b/charts/gardener-dashboard/values.yaml
@@ -310,6 +310,43 @@ global:
       # resourceQuotaHelp:
       #   text: Help text
 
+       # # cloudProviderList - configure available cloud providers. This allows to change order and to add additional (not built-in providers), see also customCloudProviders
+      # cloudProviderList:
+      # - aws
+      # - custom-provider
+
+      # # customCloudProviders - configure additional cloud providers
+      # customCloudProviders:
+      #   custom-provider:
+      #     zoned: true
+      #     shoot: # shoot template for this provider
+      #       specTemplate:
+      #         provider:
+      #           type: custom-provider
+      #         networking:
+      #           nodes: ${workerCIDR}
+      #     secret: # secret dialog
+      #       fields:
+      #       - key: user
+      #         hint: Enter a valid user
+      #         label: User
+      #         type: text
+      #         validators:
+      #           required:
+      #             type: required
+      #         validationErrors:
+      #           required: User is required
+      #       help: | # help text for secret dialog
+      #         #Foo Cloud Provider
+
+      # # vendors - configure additional or overwrite built-in vendor icons
+      # vendors:
+      #   custom-provider:
+      #     icon: custom-provider.svg
+      #
+      # vendorAssets:
+      #   custom-provider.svg: |
+
       # # controlPlaneHighAvailabilityHelp - configure help text for control plane high availability, control plane pricing etc.
       # controlPlaneHighAvailabilityHelp:
       #   text: Help text
diff --git a/frontend/src/components/GVendorIcon.vue b/frontend/src/components/GVendorIcon.vue
index 0a052103bf..83c86fbde4 100644
--- a/frontend/src/components/GVendorIcon.vue
+++ b/frontend/src/components/GVendorIcon.vue
@@ -28,12 +28,19 @@ SPDX-License-Identifier: Apache-2.0
 </template>
 
 <script setup>
+
 import {
   computed,
   toRef,
 } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import { useConfigStore } from '@/store/config'
 
-import { startsWith } from '@/lodash'
+import {
+  startsWith,
+  get,
+} from '@/lodash'
 
 const props = defineProps({
   icon: {
@@ -52,7 +59,15 @@ const props = defineProps({
 
 const noBackground = toRef(props, 'noBackground')
 
+const configStore = useConfigStore()
+const { vendors } = storeToRefs(configStore)
+
 const iconSrc = computed(() => {
+  const customCloudProviderIcon = get(vendors, [props.icon, 'icon'])
+  if (customCloudProviderIcon) {
+    return new URL(`/static/vendor-assets/${customCloudProviderIcon}`, import.meta.url)
+  }
+
   switch (props.icon) {
     // infrastructures
     case 'azure':
diff --git a/frontend/src/components/Secrets/GSecretDialogGeneric.vue b/frontend/src/components/Secrets/GSecretDialogGeneric.vue
index 13c57aa333..8b675926c0 100644
--- a/frontend/src/components/Secrets/GSecretDialogGeneric.vue
+++ b/frontend/src/components/Secrets/GSecretDialogGeneric.vue
@@ -15,23 +15,47 @@ SPDX-License-Identifier: Apache-2.0
     :replace-title="`Replace ${vendor} Secret`"
   >
     <template #secret-slot>
-      <div>
-        <v-textarea
-          ref="data"
-          v-model="data"
-          color="primary"
-          variant="filled"
-          label="Secret Data"
-          :error-messages="getErrorMessages('data')"
-          @update:model-value="onInputSecretData"
-          @blur="v$.data.$touch()"
-        />
-      </div>
+      <template v-if="customCloudProviderFields">
+        <div
+          v-for="{ key, label, hint, type } in customCloudProviderFields"
+          :key="key"
+        >
+          <v-text-field
+            v-if="type === 'text' || type === 'password'"
+            v-model="customCloudProviderData[key]"
+            color="primary"
+            :label="label"
+            :error-messages="getErrorMessages(`customCloudProviderData.${key}`)"
+            :append-icon="type === 'password' ? showSecrets[key] ? 'mdi-eye' : 'mdi-eye-off' : undefined"
+            :type="type === 'password' && !showSecrets[key] ? 'password' : 'text'"
+            :hint="hint"
+            @click:append="toggleShowSecrets(key)"
+            @update:model-value="v$.customCloudProviderData[key].$touch()"
+            @blur="v$.customCloudProviderData[key].$touch()"
+          />
+          <v-textarea
+            v-if="type === 'yaml' || type === 'json'"
+            v-model="customCloudProviderData[key]"
+            color="primary"
+            :label="label"
+            :error-messages="getErrorMessages(`customCloudProviderData.${key}`)"
+            :hint="hint"
+            @update:model-value="onInputTextarea(key, type)"
+            @blur="v$.customCloudProviderData[key].$touch()"
+          />
+        </div>
+      </template>
     </template>
     <template #help-slot>
-      <div class="help-content">
+      <!-- eslint-disable vue/no-v-html -->
+      <div
+        v-if="helpHtml"
+        class="markdown"
+        v-html="helpHtml"
+      />
+      <div v-else>
         <p>
-          This is a generic secret dialog.
+          This is a generic provider service account dialog.
         </p>
         <p>
           Please enter data required for {{ vendor }}.
@@ -43,23 +67,32 @@ SPDX-License-Identifier: Apache-2.0
 
 <script>
 import { useVuelidate } from '@vuelidate/core'
-import { required } from '@vuelidate/validators'
+import {
+  required,
+  requiredIf,
+} from '@vuelidate/validators'
+import { mapState } from 'pinia'
+
+import { useConfigStore } from '@/store/config'
 
 import GSecretDialog from '@/components/Secrets/GSecretDialog'
 
 import {
   getValidationErrors,
   setDelayedInputFocus,
+  transformHtml,
 } from '@/utils'
 
-import { isObject } from '@/lodash'
-
-const validationErrors = {
-  data: {
-    required: 'You can\'t leave this empty.',
-    isYAML: 'You need to enter secret data as YAML key-value pairs',
-  },
-}
+import {
+  isObject,
+  forEach,
+  get,
+  every,
+  map,
+  isEmpty,
+  fromPairs,
+  set,
+} from '@/lodash'
 
 export default {
   components: {
@@ -88,16 +121,18 @@ export default {
   },
   data () {
     return {
-      data: undefined,
-      secretData: {},
-      validationErrors,
+      customCloudProviderData: {},
+      customCloudProviderParsedData: {},
+      showSecrets: {},
     }
   },
   validations () {
-    // had to move the code to a computed property so that the getValidationErrors method can access it
     return this.validators
   },
   computed: {
+    ...mapState(useConfigStore, [
+      'customCloudProviders',
+    ]),
     visible: {
       get () {
         return this.modelValue
@@ -106,75 +141,133 @@ export default {
         this.$emit('update:modelValue', modelValue)
       },
     },
-    valid () {
-      return !this.v$.$invalid
+    validationErrors () {
+      const allValidationErrors = {
+        customCloudProviderData: {},
+      }
+      forEach(this.customCloudProviderFields, ({ key, validationErrors }) => {
+        allValidationErrors.customCloudProviderData[key] = validationErrors
+      })
+      return allValidationErrors
     },
     validators () {
-      const validators = {
-        data: {
-          required,
-          isYAML: () => Object.keys(this.secretData).length > 0,
-        },
+      const allValidators = {
+        customCloudProviderData: {},
       }
-      return validators
+      forEach(this.customCloudProviderFields, ({ key, validators }) => {
+        const compiledValidators = {}
+        forEach(validators, (validator, validatorName) => {
+          switch (validator.type) {
+            case 'required':
+              compiledValidators[validatorName] = required
+              break
+            case 'requiredIf':
+              compiledValidators[validatorName] = requiredIf(() => !every(map(validator.not, fieldKey => this.customCloudProviderData[fieldKey])))
+              break
+            case 'isValidObject':
+              compiledValidators[validatorName] = () => isEmpty(this.customCloudProviderData[key]) || Object.keys(this.customCloudProviderParsedData[key]).length > 0
+              break
+            case 'regex':
+              compiledValidators[validatorName] = value => !value || new RegExp(validator.value).test(value)
+          }
+        })
+        allValidators.customCloudProviderData[key] = compiledValidators
+      })
+      return allValidators
+    },
+    customCloudProvider () {
+      return get(this.customCloudProviders, this.vendor)
+    },
+    customCloudProviderFields () {
+      const configuredFields = this.customCloudProvider?.secret?.fields
+      if (configuredFields) {
+        return configuredFields
+      }
+      return [
+        {
+          key: 'secret',
+          label: 'Secret Data',
+          hint: 'Provide secret data as YAML key-value pairs',
+          type: 'yaml',
+          validators: {
+            required: {
+              type: 'required',
+            },
+            isYAML: {
+              type: 'isValidObject',
+            },
+          },
+          validationErrors: {
+            required: 'You can\'t leave this empty',
+            isYAML: 'You need to enter secret data as YAML key-value pairs',
+          },
+        },
+      ]
+    },
+    helpHtml () {
+      return transformHtml(this.customCloudProvider?.secret?.help)
+    },
+    valid () {
+      return !this.$v.$invalid
     },
     isCreateMode () {
       return !this.secret
     },
+    secretData () {
+      const data = fromPairs(map(this.customCloudProviderFields, ({ key, type }) => {
+        if (type === 'json' || type === 'yaml') {
+          return [key, this.customCloudProviderParsedData[key]]
+        }
+        return [key, this.customCloudProviderData[key]]
+      }))
+      return data
+    },
   },
   methods: {
-    async onInputSecretData () {
-      this.secretData = {}
-
+    async onInputTextarea (key, type) {
+      set(this.customCloudProviderParsedData, key, {})
       try {
-        this.secretData = await this.yaml.load(this.data)
+        if (type === 'yaml') {
+          this.customCloudProviderParsedData[key] = await this.$yaml.load(this.customCloudProviderData[key])
+        } else if (type === 'json') {
+          this.customCloudProviderParsedData[key] = JSON.parse(this.customCloudProviderData[key])
+        }
       } catch (err) {
         /* ignore errors */
       } finally {
-        if (!isObject(this.secretData)) {
-          this.secretData = {}
+        if (!isObject(this.customCloudProviderParsedData[key])) {
+          this.customCloudProviderParsedData[key] = {}
         }
       }
-
-      this.v$.data.$touch()
+      this.$v.customCloudProviderData[key].$touch()
     },
     reset () {
       this.v$.$reset()
 
-      this.data = ''
-      this.secretData = {}
+      this.customCloudProviderParsedData = {}
+      this.customCloudProviderData = {}
+      this.showSecrets = {}
 
       if (!this.isCreateMode) {
-        setDelayedInputFocus(this, 'data')
+        setDelayedInputFocus(this, 'textAreaData')
       }
     },
     getErrorMessages (field) {
       return getValidationErrors(this, field)
     },
+    toggleShowSecrets (key) {
+      set(this.showSecrets, key, !this.showSecrets[key])
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
 
-  :deep(.v-input__control textarea) {
-    font-family: monospace;
-    font-size: 14px;
-  }
-
-  .help-content {
-    ul {
-      margin-top: 20px;
-      margin-bottom: 20px;
-      list-style-type: none;
-      border-left: 4px solid #318334 !important;
-      margin-left: 20px;
-      padding-left: 24px;
-      li {
-        font-weight: 300;
-        font-size: 16px;
-      }
-    }
+.markdown {
+  :deep(p) {
+    margin: 0px;
   }
+}
 
 </style>
diff --git a/frontend/src/components/ShootWorkers/GManageWorkers.vue b/frontend/src/components/ShootWorkers/GManageWorkers.vue
index 3838736126..088a880009 100644
--- a/frontend/src/components/ShootWorkers/GManageWorkers.vue
+++ b/frontend/src/components/ShootWorkers/GManageWorkers.vue
@@ -63,9 +63,13 @@ SPDX-License-Identifier: Apache-2.0
 </template>
 
 <script>
-import { mapActions } from 'pinia'
+import {
+  mapActions,
+  mapState,
+} from 'pinia'
 
 import { useCloudProfileStore } from '@/store/cloudProfile'
+import { useConfigStore } from '@/store/config'
 
 import GWorkerInputGeneric from '@/components/ShootWorkers/GWorkerInputGeneric'
 import GExpandTransitionGroup from '@/components/GExpandTransitionGroup'
@@ -128,6 +132,9 @@ export default {
     }
   },
   computed: {
+    ...mapState(useConfigStore, [
+      'customCloudProviders',
+    ]),
     allMachineTypes () {
       return this.machineTypesByCloudProfileName({ cloudProfileName: this.cloudProfileName })
     },
@@ -208,7 +215,11 @@ export default {
          * do not pass shootspec as we do not have it available in this component and it is (currently) not required to determine isZoned for new clusters. This event handler is only called for new clusters, as the
          * userInterActionBus is only set for the create cluster use case
          */
-        this.zonedCluster = isZonedCluster({ cloudProviderKind: this.cloudProviderKind, isNewCluster: this.isNewCluster })
+        this.zonedCluster = isZonedCluster({
+          cloudProviderKind: this.cloudProviderKind,
+          isNewCluster: this.isNewCluster,
+          customCloudProviders: this.customCloudProviders,
+        })
         this.setDefaultWorker()
       })
       this.userInterActionBus.on('updateRegion', region => {
diff --git a/frontend/src/components/ShootWorkers/GWorkerConfiguration.vue b/frontend/src/components/ShootWorkers/GWorkerConfiguration.vue
index ea44880ef5..47fa82c37b 100644
--- a/frontend/src/components/ShootWorkers/GWorkerConfiguration.vue
+++ b/frontend/src/components/ShootWorkers/GWorkerConfiguration.vue
@@ -97,6 +97,9 @@ SPDX-License-Identifier: Apache-2.0
 <script>
 import { defineAsyncComponent } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
+import { mapState } from 'pinia'
+
+import { useConfigStore } from '@/store/config'
 
 import GActionButtonDialog from '@/components/dialogs/GActionButtonDialog'
 import GCodeBlock from '@/components/GCodeBlock'
@@ -145,6 +148,9 @@ export default {
     }
   },
   computed: {
+    ...mapState(useConfigStore, [
+      'customCloudProviders',
+    ]),
     tab: {
       get () {
         return this.tabValue
@@ -211,7 +217,11 @@ export default {
       const zonesNetworkConfiguration = get(this.shootItem, 'spec.provider.infrastructureConfig.networks.zones')
       const cloudProfileName = this.shootCloudProfileName
       const region = this.shootRegion
-      const zonedCluster = isZonedCluster({ cloudProviderKind: this.shootCloudProviderKind, shootSpec: this.shootSpec })
+      const zonedCluster = isZonedCluster({
+        cloudProviderKind: this.shootCloudProviderKind,
+        shootSpec: this.shootSpec,
+        customCloudProviders: this.customCloudProviders,
+      })
       const existingWorkerCIDR = get(this.shootItem, 'spec.networking.nodes')
 
       await this.manageWorkers.dispatch('setWorkersData', { workers, cloudProfileName, region, zonesNetworkConfiguration, zonedCluster, existingWorkerCIDR, kubernetesVersion: this.shootK8sVersion })
diff --git a/frontend/src/store/cloudProfile/index.js b/frontend/src/store/cloudProfile/index.js
index ba1fbb2ca3..99f5be471e 100644
--- a/frontend/src/store/cloudProfile/index.js
+++ b/frontend/src/store/cloudProfile/index.js
@@ -103,7 +103,7 @@ export const useCloudProfileStore = defineStore('cloudProfile', () => {
   })
 
   const sortedInfrastructureKindList = computed(() => {
-    return intersection(['aws', 'azure', 'gcp', 'openstack', 'alicloud', 'metal', 'vsphere', 'hcloud', 'onmetal', 'local'], infrastructureKindList.value)
+    return intersection(configStore.cloudProviderList ?? ['aws', 'azure', 'gcp', 'openstack', 'alicloud', 'metal', 'vsphere', 'hcloud', 'onmetal', 'local'], infrastructureKindList.value)
   })
 
   function cloudProfilesByCloudProviderKind (cloudProviderKind) {
diff --git a/frontend/src/store/config.js b/frontend/src/store/config.js
index db565a692a..d8cc12ffcd 100644
--- a/frontend/src/store/config.js
+++ b/frontend/src/store/config.js
@@ -243,6 +243,18 @@ export const useConfigStore = defineStore('config', () => {
     }
   })
 
+  const customCloudProviders = computed(() => {
+    return state.value?.customCloudProviders
+  })
+
+  const vendors = computed(() => {
+    return state.value?.vendors
+  })
+
+  const cloudProviderList = computed(() => {
+    return state.value?.cloudProviderList
+  })
+
   const appVersion = computed(() => {
     return state.value?.appVersion ?? import.meta.env.VITE_APP_VERSION
   })
@@ -330,6 +342,9 @@ export const useConfigStore = defineStore('config', () => {
     isShootHasNoHibernationScheduleWarning,
     fetchConfig,
     conditionForType,
+    customCloudProviders,
+    vendors,
+    cloudProviderList,
     $reset,
   }
 })
diff --git a/frontend/src/utils/createShoot.js b/frontend/src/utils/createShoot.js
index a6c82ea7a4..07a264bb02 100644
--- a/frontend/src/utils/createShoot.js
+++ b/frontend/src/utils/createShoot.js
@@ -19,9 +19,31 @@ import {
   range,
   pick,
   values,
+  get,
+  template,
 } from '@/lodash'
 
-export function getSpecTemplate (infrastructureKind, defaultWorkerCIDR) {
+export function getSpecTemplate (infrastructureKind, defaultWorkerCIDR, customCloudProviders) {
+  const defaultShootSpec = {
+    networking: {
+      nodes: defaultWorkerCIDR,
+    },
+  }
+
+  const customCloudProviderSpec = get(customCloudProviders, [infrastructureKind, 'shoot', 'specTemplate'])
+  if (customCloudProviderSpec !== undefined) {
+    const customCloudProviderSpecJson = JSON.stringify(customCloudProviderSpec)
+    const compiled = template(customCloudProviderSpecJson)
+    const data = compiled({
+      workerCIDR: defaultWorkerCIDR,
+    })
+
+    const shootSpec = JSON.parse(data)
+    return {
+      ...defaultShootSpec,
+      ...shootSpec,
+    }
+  }
   switch (infrastructureKind) {
     case 'metal':
       return { // TODO: Remove when metal extension sets this config via mutating webhook, see https://github.com/metal-stack/gardener-extension-provider-metal/issues/32
@@ -55,10 +77,8 @@ export function getSpecTemplate (infrastructureKind, defaultWorkerCIDR) {
       }
     default:
       return {
+        ...defaultShootSpec,
         provider: getProviderTemplate(infrastructureKind, defaultWorkerCIDR),
-        networking: {
-          nodes: defaultWorkerCIDR,
-        },
       }
   }
 }
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 2dee7e7302..7265d7512e 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -547,7 +547,11 @@ export function defaultCriNameByKubernetesVersion (criNames, kubernetesVersion)
     ? criName
     : head(criNames)
 }
-export function isZonedCluster ({ cloudProviderKind, shootSpec, isNewCluster }) {
+export function isZonedCluster ({ cloudProviderKind, shootSpec, isNewCluster, customCloudProviders }) {
+  const customCloudProviderZone = get(customCloudProviders, [cloudProviderKind, 'zoned'])
+  if (customCloudProviderZone !== undefined) {
+    return customCloudProviderZone
+  }
   switch (cloudProviderKind) {
     case 'azure':
       if (isNewCluster) {
diff --git a/frontend/src/views/GNewShoot.vue b/frontend/src/views/GNewShoot.vue
index fa65ffdb24..8c17ca9a57 100644
--- a/frontend/src/views/GNewShoot.vue
+++ b/frontend/src/views/GNewShoot.vue
@@ -263,7 +263,10 @@ export default {
   },
   computed: {
     ...mapState(useAuthzStore, ['namespace']),
-    ...mapState(useConfigStore, ['accessRestriction', 'defaultNodesCIDR']),
+    ...mapState(useConfigStore, [
+      'accessRestriction',
+      'defaultNodesCIDR',
+      'customCloudProviders']),
     ...mapState(useShootStagingStore, ['controlPlaneFailureToleranceType']),
     ...mapState(useShootStagingStore, [
       'getDnsConfiguration',
@@ -324,7 +327,7 @@ export default {
       const oldInfrastructureKind = get(shootResource, 'spec.provider.type')
       if (oldInfrastructureKind !== infrastructureKind) {
         // Infrastructure changed
-        set(shootResource, 'spec', getSpecTemplate(infrastructureKind, this.defaultNodesCIDR))
+        set(shootResource, 'spec', getSpecTemplate(infrastructureKind, this.defaultNodesCIDR, this.customCloudProviders))
       }
       set(shootResource, 'spec.cloudProfileName', cloudProfileName)
       set(shootResource, 'spec.region', region)
@@ -500,7 +503,7 @@ export default {
       })
 
       const workers = get(shootResource, 'spec.provider.workers')
-      const zonedCluster = isZonedCluster({ cloudProviderKind: infrastructureKind, isNewCluster: true })
+      const zonedCluster = isZonedCluster({ cloudProviderKind: infrastructureKind, isNewCluster: true, customCloudProviders: this.customCloudProviders })
 
       const newShootWorkerCIDR = get(shootResource, 'spec.networking.nodes', this.defaultNodesCIDR)
       await this.manageWorkers.dispatch('setWorkersData', { workers, cloudProfileName, region, updateOSMaintenance: osUpdates, zonedCluster, kubernetesVersion, newShootWorkerCIDR })

From fd98aff554dd2fccba568f5546adedf12f647532 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Fri, 8 Sep 2023 16:31:28 +0200
Subject: [PATCH 02/21] fixed some issues

---
 frontend/src/components/GVendor.vue           | 19 ++++++++++++++++---
 frontend/src/components/GVendorIcon.vue       |  4 ++--
 .../GNewShootSelectInfrastructure.vue         | 10 +++++++++-
 .../Secrets/GSecretDialogGeneric.vue          |  6 +++---
 .../components/ShootWorkers/GMachineImage.vue |  4 ++--
 .../components/ShootWorkers/GWorkerGroup.vue  |  2 +-
 frontend/src/store/cloudProfile/index.js      |  2 ++
 7 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/GVendor.vue b/frontend/src/components/GVendor.vue
index 9cd9778252..f361f8cb30 100644
--- a/frontend/src/components/GVendor.vue
+++ b/frontend/src/components/GVendor.vue
@@ -33,7 +33,7 @@ SPDX-License-Identifier: Apache-2.0
               :icon="cloudProviderKind"
               class="mr-2"
             />
-            {{ cloudProviderKind }}
+            {{ vendorName }}
           </v-list-item-title>
         </v-list-item>
         <v-list-item v-if="cloudProfileName">
@@ -54,9 +54,16 @@ SPDX-License-Identifier: Apache-2.0
 </template>
 
 <script>
+import { mapState } from 'pinia'
+
+import { useConfigStore } from '@/store/config'
+
 import GVendorIcon from '@/components/GVendorIcon'
 
-import { join } from '@/lodash'
+import {
+  join,
+  get,
+} from '@/lodash'
 
 export default {
   components: {
@@ -86,6 +93,9 @@ export default {
     },
   },
   computed: {
+    ...mapState(useConfigStore, [
+      'vendors',
+    ]),
     zoneText () {
       return join(this.zones, ', ')
     },
@@ -98,7 +108,7 @@ export default {
     description () {
       const description = []
       if (this.extended && this.cloudProviderKind) {
-        description.push(this.cloudProviderKind)
+        description.push(this.vendorName)
       }
       if (this.cloudProfileName) {
         description.push(this.cloudProfileName)
@@ -128,6 +138,9 @@ export default {
       }
       return join(titles, ' / ')
     },
+    vendorName () {
+      return get(this.vendors, [this.cloudProviderKind, 'name'], this.cloudProviderKind)
+    },
   },
 }
 </script>
diff --git a/frontend/src/components/GVendorIcon.vue b/frontend/src/components/GVendorIcon.vue
index 83c86fbde4..571609c301 100644
--- a/frontend/src/components/GVendorIcon.vue
+++ b/frontend/src/components/GVendorIcon.vue
@@ -63,9 +63,9 @@ const configStore = useConfigStore()
 const { vendors } = storeToRefs(configStore)
 
 const iconSrc = computed(() => {
-  const customCloudProviderIcon = get(vendors, [props.icon, 'icon'])
+  const customCloudProviderIcon = get(vendors, ['value', props.icon, 'icon'])
   if (customCloudProviderIcon) {
-    return new URL(`/static/vendor-assets/${customCloudProviderIcon}`, import.meta.url)
+    return `/static/vendor-assets/${customCloudProviderIcon}`
   }
 
   switch (props.icon) {
diff --git a/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue b/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
index a4f8b24f7f..33ca34737a 100644
--- a/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
+++ b/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
@@ -26,7 +26,7 @@ SPDX-License-Identifier: Apache-2.0
           />
         </div>
         <div class="mt-2">
-          <span class="text-subtitle-1">{{ infrastructureKind }}</span>
+          <span class="text-subtitle-1">{{ vendorName(infrastructureKind) }}</span>
         </div>
       </div>
     </v-card>
@@ -40,9 +40,11 @@ import {
 } from 'pinia'
 
 import { useCloudProfileStore } from '@/store/cloudProfile'
+import { useConfigStore } from '@/store/config'
 
 import GVendorIcon from '@/components/GVendorIcon'
 
+import { get } from '@/lodash'
 export default {
   components: {
     GVendorIcon,
@@ -62,6 +64,9 @@ export default {
     ...mapState(useCloudProfileStore, [
       'sortedInfrastructureKindList',
     ]),
+    ...mapState(useConfigStore, [
+      'vendors',
+    ]),
   },
   methods: {
     ...mapActions(useCloudProfileStore, ['cloudProfilesByCloudProviderKind']),
@@ -72,6 +77,9 @@ export default {
     setSelectedInfrastructure (infrastructure) {
       this.selectedInfrastructure = infrastructure
     },
+    vendorName (infrastructureKind) {
+      return get(this.vendors, [infrastructureKind, 'name'], infrastructureKind)
+    },
   },
 }
 </script>
diff --git a/frontend/src/components/Secrets/GSecretDialogGeneric.vue b/frontend/src/components/Secrets/GSecretDialogGeneric.vue
index 8b675926c0..22c50d6ea6 100644
--- a/frontend/src/components/Secrets/GSecretDialogGeneric.vue
+++ b/frontend/src/components/Secrets/GSecretDialogGeneric.vue
@@ -208,7 +208,7 @@ export default {
       return transformHtml(this.customCloudProvider?.secret?.help)
     },
     valid () {
-      return !this.$v.$invalid
+      return !this.v$.$invalid
     },
     isCreateMode () {
       return !this.secret
@@ -228,7 +228,7 @@ export default {
       set(this.customCloudProviderParsedData, key, {})
       try {
         if (type === 'yaml') {
-          this.customCloudProviderParsedData[key] = await this.$yaml.load(this.customCloudProviderData[key])
+          this.customCloudProviderParsedData[key] = await this.yaml.load(this.customCloudProviderData[key])
         } else if (type === 'json') {
           this.customCloudProviderParsedData[key] = JSON.parse(this.customCloudProviderData[key])
         }
@@ -239,7 +239,7 @@ export default {
           this.customCloudProviderParsedData[key] = {}
         }
       }
-      this.$v.customCloudProviderData[key].$touch()
+      this.v$.customCloudProviderData[key].$touch()
     },
     reset () {
       this.v$.$reset()
diff --git a/frontend/src/components/ShootWorkers/GMachineImage.vue b/frontend/src/components/ShootWorkers/GMachineImage.vue
index 05c3fcd4e2..27b6ef0e72 100644
--- a/frontend/src/components/ShootWorkers/GMachineImage.vue
+++ b/frontend/src/components/ShootWorkers/GMachineImage.vue
@@ -28,7 +28,7 @@ SPDX-License-Identifier: Apache-2.0
         <template #prepend>
           <g-vendor-icon :icon="item.raw.icon" />
         </template>
-        <v-list-item-title>Name: {{ item.raw.name }} | Version: {{ item.raw.version }}</v-list-item-title>
+        <v-list-item-title>Name: {{ item.raw.displayName }} | Version: {{ item.raw.version }}</v-list-item-title>
         <v-list-item-subtitle v-if="itemDescription(item).length">
           {{ itemDescription(item.raw) }}
         </v-list-item-subtitle>
@@ -37,7 +37,7 @@ SPDX-License-Identifier: Apache-2.0
     <template #selection="{ item }">
       <g-vendor-icon :icon="item.raw.icon" />
       <span class="ml-2">
-        {{ item.raw.name }} [{{ item.raw.version }}]
+        {{ item.raw.displayName }} [{{ item.raw.version }}]
       </span>
     </template>
     <template #message="{ message }">
diff --git a/frontend/src/components/ShootWorkers/GWorkerGroup.vue b/frontend/src/components/ShootWorkers/GWorkerGroup.vue
index 4386adb3a9..54bdd70db4 100644
--- a/frontend/src/components/ShootWorkers/GWorkerGroup.vue
+++ b/frontend/src/components/ShootWorkers/GWorkerGroup.vue
@@ -197,7 +197,7 @@ SPDX-License-Identifier: Apache-2.0
                         <legend class="text-caption text-medium-emphasis">
                           Name
                         </legend>
-                        <span class="text-body-2">{{ workerGroup.machine.image.name }}</span>
+                        <span class="text-body-2">{{ machineImage ? machineImage.displayName : workerGroup.machine.image.name }}</span>
                       </v-col>
                       <v-col>
                         <legend class="text-caption text-medium-emphasis">
diff --git a/frontend/src/store/cloudProfile/index.js b/frontend/src/store/cloudProfile/index.js
index 99f5be471e..2d6c826c0f 100644
--- a/frontend/src/store/cloudProfile/index.js
+++ b/frontend/src/store/cloudProfile/index.js
@@ -379,6 +379,7 @@ export const useCloudProfileStore = defineStore('cloudProfile', () => {
 
       const name = machineImage.name
       const vendorName = vendorNameFromImageName(machineImage.name)
+      const displayName = get(configStore, ['vendors', vendorName, 'name'], vendorName)
       const vendorHint = findVendorHint(configStore.vendorHints, vendorName)
 
       return map(versions, ({ version, expirationDate, cri, classification, architectures }) => {
@@ -388,6 +389,7 @@ export const useCloudProfileStore = defineStore('cloudProfile', () => {
         return decorateClassificationObject({
           key: name + '/' + version,
           name,
+          displayName,
           version,
           cri,
           classification,

From c7cf47115618a4b046e1db40161e9e93d0b4f563 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Fri, 20 Oct 2023 12:02:56 +0200
Subject: [PATCH 03/21] Added known vendor names

---
 frontend/src/components/GVendor.vue           | 10 ++--
 frontend/src/components/GVendorIcon.vue       |  3 +
 .../GNewShootSelectInfrastructure.vue         |  6 +-
 .../src/components/Secrets/GSecretDialog.vue  | 14 ++---
 .../Secrets/GSecretDialogAlicloud.vue         | 13 +---
 .../components/Secrets/GSecretDialogAws.vue   | 13 +---
 .../components/Secrets/GSecretDialogAzure.vue | 16 +----
 .../Secrets/GSecretDialogCloudflare.vue       |  2 -
 .../components/Secrets/GSecretDialogGcp.vue   | 13 +---
 .../Secrets/GSecretDialogGeneric.vue          |  4 +-
 .../Secrets/GSecretDialogHCloud.vue           |  2 -
 .../Secrets/GSecretDialogInfoblox.vue         |  2 -
 .../components/Secrets/GSecretDialogMetal.vue |  2 -
 .../Secrets/GSecretDialogNetlify.vue          |  2 -
 .../Secrets/GSecretDialogOpenstack.vue        |  4 +-
 .../Secrets/GSecretDialogVSphere.vue          |  2 -
 frontend/src/store/config.js                  | 59 +++++++++++++++++++
 frontend/src/views/GSecrets.vue               | 12 ++--
 18 files changed, 84 insertions(+), 95 deletions(-)

diff --git a/frontend/src/components/GVendor.vue b/frontend/src/components/GVendor.vue
index f361f8cb30..4935f68a43 100644
--- a/frontend/src/components/GVendor.vue
+++ b/frontend/src/components/GVendor.vue
@@ -54,7 +54,7 @@ SPDX-License-Identifier: Apache-2.0
 </template>
 
 <script>
-import { mapState } from 'pinia'
+import { mapActions } from 'pinia'
 
 import { useConfigStore } from '@/store/config'
 
@@ -93,9 +93,6 @@ export default {
     },
   },
   computed: {
-    ...mapState(useConfigStore, [
-      'vendors',
-    ]),
     zoneText () {
       return join(this.zones, ', ')
     },
@@ -139,9 +136,12 @@ export default {
       return join(titles, ' / ')
     },
     vendorName () {
-      return get(this.vendors, [this.cloudProviderKind, 'name'], this.cloudProviderKind)
+      return this.vendorNameForKind(this.cloudProviderKind)
     },
   },
+  methods: {
+    ...mapActions(useConfigStore, ['vendorNameForKind']),
+  },
 }
 </script>
 
diff --git a/frontend/src/components/GVendorIcon.vue b/frontend/src/components/GVendorIcon.vue
index 16c5263748..103da941a6 100644
--- a/frontend/src/components/GVendorIcon.vue
+++ b/frontend/src/components/GVendorIcon.vue
@@ -65,6 +65,9 @@ const { vendors } = storeToRefs(configStore)
 const iconSrc = computed(() => {
   const customCloudProviderIcon = get(vendors, ['value', props.icon, 'icon'])
   if (customCloudProviderIcon) {
+    if (startsWith(customCloudProviderIcon, 'data:image/')) {
+      return customCloudProviderIcon
+    }
     return `/static/vendor-assets/${customCloudProviderIcon}`
   }
 
diff --git a/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue b/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
index 33ca34737a..4342f0c507 100644
--- a/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
+++ b/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
@@ -64,12 +64,10 @@ export default {
     ...mapState(useCloudProfileStore, [
       'sortedInfrastructureKindList',
     ]),
-    ...mapState(useConfigStore, [
-      'vendors',
-    ]),
   },
   methods: {
     ...mapActions(useCloudProfileStore, ['cloudProfilesByCloudProviderKind']),
+    ...mapActions(useConfigStore, ['vendorNameForKind']),
     selectInfrastructure (infrastructure) {
       this.setSelectedInfrastructure(infrastructure)
       this.userInterActionBus.emit('updateInfrastructure', infrastructure)
@@ -78,7 +76,7 @@ export default {
       this.selectedInfrastructure = infrastructure
     },
     vendorName (infrastructureKind) {
-      return get(this.vendors, [infrastructureKind, 'name'], infrastructureKind)
+      return this.vendorNameForKind(infrastructureKind)
     },
   },
 }
diff --git a/frontend/src/components/Secrets/GSecretDialog.vue b/frontend/src/components/Secrets/GSecretDialog.vue
index 42095c7d3d..e5f02619a2 100644
--- a/frontend/src/components/Secrets/GSecretDialog.vue
+++ b/frontend/src/components/Secrets/GSecretDialog.vue
@@ -131,6 +131,7 @@ import { useAuthzStore } from '@/store/authz'
 import { useCloudProfileStore } from '@/store/cloudProfile'
 import { useGardenerExtensionStore } from '@/store/gardenerExtension'
 import { useShootStore } from '@/store/shoot'
+import { useConfigStore } from '@/store/config'
 
 import GToolbar from '@/components/GToolbar.vue'
 import GMessage from '@/components/GMessage'
@@ -193,14 +194,6 @@ export default {
       type: String,
       required: true,
     },
-    createTitle: {
-      type: String,
-      required: true,
-    },
-    replaceTitle: {
-      type: String,
-      required: true,
-    },
     secret: {
       type: Object,
     },
@@ -288,7 +281,9 @@ export default {
       return this.isCreateMode ? 'Add Secret' : 'Replace Secret'
     },
     title () {
-      return this.isCreateMode ? this.createTitle : this.replaceTitle
+      return this.isCreateMode
+        ? `Add new ${this.vendorNameForKind(this.vendor)} Secret`
+        : `Replace ${this.vendorNameForKind(this.vendor)} Secret`
     },
     relatedShootCount () {
       return this.shootsByInfrastructureSecret.length
@@ -325,6 +320,7 @@ export default {
     ...mapActions(useCloudProfileStore, [
       'cloudProfilesByCloudProviderKind',
     ]),
+    ...mapActions(useConfigStore, ['vendorNameForKind']),
     hide () {
       this.visible = false
     },
diff --git a/frontend/src/components/Secrets/GSecretDialogAlicloud.vue b/frontend/src/components/Secrets/GSecretDialogAlicloud.vue
index 36e87d0827..67e61d3c61 100644
--- a/frontend/src/components/Secrets/GSecretDialogAlicloud.vue
+++ b/frontend/src/components/Secrets/GSecretDialogAlicloud.vue
@@ -11,8 +11,6 @@ SPDX-License-Identifier: Apache-2.0
     :data-valid="valid"
     :secret="secret"
     :vendor="vendor"
-    :create-title="`Add new ${name} Secret`"
-    :replace-title="`Replace ${name} Secret`"
   >
     <template #secret-slot>
       <div>
@@ -135,7 +133,7 @@ export default {
       type: Object,
     },
     vendor: {
-      type: String,
+      type: Object,
     },
   },
   emits: [
@@ -204,15 +202,6 @@ export default {
     valid () {
       return !this.v$.$invalid
     },
-    name () {
-      if (this.vendor === 'alicloud') {
-        return 'Alibaba Cloud'
-      }
-      if (this.vendor === 'alicloud-dns') {
-        return 'Alicloud DNS'
-      }
-      return undefined
-    },
     secretData () {
       return {
         accessKeyID: this.accessKeyId,
diff --git a/frontend/src/components/Secrets/GSecretDialogAws.vue b/frontend/src/components/Secrets/GSecretDialogAws.vue
index 3f9c2c96a4..f2a8d276e7 100644
--- a/frontend/src/components/Secrets/GSecretDialogAws.vue
+++ b/frontend/src/components/Secrets/GSecretDialogAws.vue
@@ -11,8 +11,6 @@ SPDX-License-Identifier: Apache-2.0
     :data-valid="valid"
     :secret="secret"
     :vendor="vendor"
-    :create-title="`Add new ${name} Secret`"
-    :replace-title="`Replace ${name} Secret`"
   >
     <template #secret-slot>
       <div>
@@ -145,7 +143,7 @@ export default {
       type: Object,
     },
     vendor: {
-      type: String,
+      type: Object,
     },
   },
   emits: [
@@ -288,15 +286,6 @@ export default {
     isCreateMode () {
       return !this.secret
     },
-    name () {
-      if (this.vendor === 'aws') {
-        return 'AWS'
-      }
-      if (this.vendor === 'aws-route53') {
-        return 'Amazon Route 53'
-      }
-      return undefined
-    },
   },
   watch: {
     value: function (value) {
diff --git a/frontend/src/components/Secrets/GSecretDialogAzure.vue b/frontend/src/components/Secrets/GSecretDialogAzure.vue
index e25ba0125d..8bc2ca318d 100644
--- a/frontend/src/components/Secrets/GSecretDialogAzure.vue
+++ b/frontend/src/components/Secrets/GSecretDialogAzure.vue
@@ -11,8 +11,6 @@ SPDX-License-Identifier: Apache-2.0
     :data-valid="valid"
     :secret="secret"
     :vendor="vendor"
-    :create-title="`Add new ${name} Secret`"
-    :replace-title="`Replace ${name} Secret`"
   >
     <template #secret-slot>
       <div>
@@ -137,7 +135,7 @@ export default {
       type: Object,
     },
     vendor: {
-      type: String,
+      type: Object,
     },
   },
   emits: [
@@ -202,18 +200,6 @@ export default {
     isCreateMode () {
       return !this.secret
     },
-    name () {
-      if (this.vendor === 'azure') {
-        return 'Azure'
-      }
-      if (this.vendor === 'azure-dns') {
-        return 'Azure DNS'
-      }
-      if (this.vendor === 'azure-private-dns') {
-        return 'Azure Private DNS'
-      }
-      return undefined
-    },
   },
   watch: {
     value: function (value) {
diff --git a/frontend/src/components/Secrets/GSecretDialogCloudflare.vue b/frontend/src/components/Secrets/GSecretDialogCloudflare.vue
index 72a4c6fb37..b00bf61765 100644
--- a/frontend/src/components/Secrets/GSecretDialogCloudflare.vue
+++ b/frontend/src/components/Secrets/GSecretDialogCloudflare.vue
@@ -11,8 +11,6 @@ SPDX-License-Identifier: Apache-2.0
     :data-valid="valid"
     :secret="secret"
     vendor="cloudflare-dns"
-    create-title="Add new Cloudflare Secret"
-    replace-title="Replace Cloudflare Secret"
   >
     <template #secret-slot>
       <div>
diff --git a/frontend/src/components/Secrets/GSecretDialogGcp.vue b/frontend/src/components/Secrets/GSecretDialogGcp.vue
index c12d7c1143..20918383e5 100644
--- a/frontend/src/components/Secrets/GSecretDialogGcp.vue
+++ b/frontend/src/components/Secrets/GSecretDialogGcp.vue
@@ -11,8 +11,6 @@ SPDX-License-Identifier: Apache-2.0
     :data-valid="valid"
     :secret="secret"
     :vendor="vendor"
-    :create-title="`Add new ${name} Secret`"
-    :replace-title="`Replace ${name} Secret`"
   >
     <template #secret-slot>
       <div>
@@ -114,7 +112,7 @@ export default {
       type: Object,
     },
     vendor: {
-      type: String,
+      type: Object,
     },
   },
   emits: [
@@ -165,15 +163,6 @@ export default {
     isCreateMode () {
       return !this.secret
     },
-    name () {
-      if (this.vendor === 'gcp') {
-        return 'Google'
-      }
-      if (this.vendor === 'google-clouddns') {
-        return 'Google Cloud DNS'
-      }
-      return undefined
-    },
   },
   watch: {
     value: function (value) {
diff --git a/frontend/src/components/Secrets/GSecretDialogGeneric.vue b/frontend/src/components/Secrets/GSecretDialogGeneric.vue
index 22c50d6ea6..89ab78648b 100644
--- a/frontend/src/components/Secrets/GSecretDialogGeneric.vue
+++ b/frontend/src/components/Secrets/GSecretDialogGeneric.vue
@@ -11,8 +11,6 @@ SPDX-License-Identifier: Apache-2.0
     :data-valid="valid"
     :secret="secret"
     :vendor="vendor"
-    :create-title="`Add new ${vendor} Secret`"
-    :replace-title="`Replace ${vendor} Secret`"
   >
     <template #secret-slot>
       <template v-if="customCloudProviderFields">
@@ -108,7 +106,7 @@ export default {
       type: Object,
     },
     vendor: {
-      type: String,
+      type: Object,
     },
   },
   emits: [
diff --git a/frontend/src/components/Secrets/GSecretDialogHCloud.vue b/frontend/src/components/Secrets/GSecretDialogHCloud.vue
index ec7ae47174..709f653680 100644
--- a/frontend/src/components/Secrets/GSecretDialogHCloud.vue
+++ b/frontend/src/components/Secrets/GSecretDialogHCloud.vue
@@ -11,8 +11,6 @@ SPDX-License-Identifier: Apache-2.0
     :data-valid="valid"
     :secret="secret"
     vendor="hcloud"
-    create-title="Add new Hetzner Cloud Secret"
-    replace-title="Replace Hetzner Cloud Secret"
   >
     <template #secret-slot>
       <div>
diff --git a/frontend/src/components/Secrets/GSecretDialogInfoblox.vue b/frontend/src/components/Secrets/GSecretDialogInfoblox.vue
index 32bc7ea960..c92e015875 100644
--- a/frontend/src/components/Secrets/GSecretDialogInfoblox.vue
+++ b/frontend/src/components/Secrets/GSecretDialogInfoblox.vue
@@ -11,8 +11,6 @@ SPDX-License-Identifier: Apache-2.0
     :data-valid="valid"
     :secret="secret"
     vendor="infoblox-dns"
-    create-title="Add new Infoblox Secret"
-    replace-title="Replace Infoblox Secret"
   >
     <template #secret-slot>
       <div>
diff --git a/frontend/src/components/Secrets/GSecretDialogMetal.vue b/frontend/src/components/Secrets/GSecretDialogMetal.vue
index dad95fe993..0309a8571b 100644
--- a/frontend/src/components/Secrets/GSecretDialogMetal.vue
+++ b/frontend/src/components/Secrets/GSecretDialogMetal.vue
@@ -11,8 +11,6 @@ SPDX-License-Identifier: Apache-2.0
     :data-valid="valid"
     :secret="secret"
     vendor="metal"
-    create-title="Add new Metal Secret"
-    replace-title="Replace Metal Secret"
   >
     <template #secret-slot>
       <div>
diff --git a/frontend/src/components/Secrets/GSecretDialogNetlify.vue b/frontend/src/components/Secrets/GSecretDialogNetlify.vue
index 16fd8119b7..e94f7b3aa7 100644
--- a/frontend/src/components/Secrets/GSecretDialogNetlify.vue
+++ b/frontend/src/components/Secrets/GSecretDialogNetlify.vue
@@ -11,8 +11,6 @@ SPDX-License-Identifier: Apache-2.0
     :data-valid="valid"
     :secret="secret"
     vendor="netlify-dns"
-    create-title="Add new Netlify Secret"
-    replace-title="Replace Netlify Secret"
   >
     <template #secret-slot>
       <div>
diff --git a/frontend/src/components/Secrets/GSecretDialogOpenstack.vue b/frontend/src/components/Secrets/GSecretDialogOpenstack.vue
index 131c2c9227..6826586531 100644
--- a/frontend/src/components/Secrets/GSecretDialogOpenstack.vue
+++ b/frontend/src/components/Secrets/GSecretDialogOpenstack.vue
@@ -11,8 +11,6 @@ SPDX-License-Identifier: Apache-2.0
     :data-valid="valid"
     :secret="secret"
     :vendor="vendor"
-    :create-title="`Add new ${name} Secret`"
-    :replace-title="`Replace ${name} Secret`"
   >
     <template #secret-slot>
       <div v-if="vendor==='openstack-designate'">
@@ -227,7 +225,7 @@ export default {
       type: Object,
     },
     vendor: {
-      type: String,
+      type: Object,
     },
   },
   emits: [
diff --git a/frontend/src/components/Secrets/GSecretDialogVSphere.vue b/frontend/src/components/Secrets/GSecretDialogVSphere.vue
index 51d32cbafe..568e98ae9e 100644
--- a/frontend/src/components/Secrets/GSecretDialogVSphere.vue
+++ b/frontend/src/components/Secrets/GSecretDialogVSphere.vue
@@ -11,8 +11,6 @@ SPDX-License-Identifier: Apache-2.0
     :data-valid="valid"
     :secret="secret"
     vendor="vsphere"
-    create-title="Add new VMware vSphere Secret"
-    replace-title="Replace VMware vSphere Secret"
   >
     <template #secret-slot>
       <div>
diff --git a/frontend/src/store/config.js b/frontend/src/store/config.js
index 4fe7a933cf..1f66d008ef 100644
--- a/frontend/src/store/config.js
+++ b/frontend/src/store/config.js
@@ -22,6 +22,7 @@ import {
   get,
   isEmpty,
   camelCase,
+  find,
 } from '@/lodash'
 
 const wellKnownConditions = {
@@ -322,6 +323,63 @@ export const useConfigStore = defineStore('config', () => {
     return get(knownConditions.value, type, getCondition(type))
   }
 
+  function vendorNameForKind (kind) {
+    const knownVendors = {
+      alicloud: {
+        name: 'Alibaba Cloud',
+      },
+      'alicloud-dns': {
+        name: 'Alicloud DNS',
+      },
+      aws: {
+        name: 'aws',
+      },
+      'aws-route53': {
+        name: 'Amazon Route53',
+      },
+      azure: {
+        name: 'Azure',
+      },
+      'azure-dns': {
+        name: 'Azure DNS',
+      },
+      'azure-private-dns': {
+        name: 'Azure Private DNS',
+      },
+      'cloudflare-dns': {
+        name: 'Cloudflare',
+      },
+      gcp: {
+        name: 'Google Cloud',
+      },
+      'google-clouddns': {
+        name: 'Google Cloud DNS',
+      },
+      hcloud: {
+        name: 'Hetzner Cloud',
+      },
+      'infoblox-dns': {
+        name: 'Infoblox',
+      },
+      metal: {
+        name: 'Metal',
+      },
+      'netlify-dns': {
+        name: 'Netlify',
+      },
+      openstack: {
+        name: 'OpenStack',
+      },
+      'openstack-designate': {
+        name: 'OpenStack Designate',
+      },
+      vsphere: {
+        name: 'vSphere',
+      },
+    }
+    return get({ ...knownVendors, ...vendors.value }, [kind, 'name'], kind)
+  }
+
   return {
     isInitial,
     appVersion,
@@ -362,6 +420,7 @@ export const useConfigStore = defineStore('config', () => {
     conditionForType,
     customCloudProviders,
     vendors,
+    vendorNameForKind,
     cloudProviderList,
     $reset,
   }
diff --git a/frontend/src/views/GSecrets.vue b/frontend/src/views/GSecrets.vue
index f6aa0ced6f..f3484b2edf 100644
--- a/frontend/src/views/GSecrets.vue
+++ b/frontend/src/views/GSecrets.vue
@@ -63,7 +63,7 @@ SPDX-License-Identifier: Apache-2.0
                   />
                 </template>
                 <v-list-item-title>
-                  {{ infrastructure }}
+                  {{ vendorNameForKind(infrastructure) }}
                 </v-list-item-title>
               </v-list-item>
             </v-list>
@@ -187,7 +187,7 @@ SPDX-License-Identifier: Apache-2.0
                   />
                 </template>
                 <v-list-item-title>
-                  {{ dnsProvider }}
+                  {{ vendorNameForKind(dnsProvider) }}
                 </v-list-item-title>
               </v-list-item>
             </v-list>
@@ -264,6 +264,7 @@ import { useSecretStore } from '@/store/secret'
 import { useAuthzStore } from '@/store/authz'
 import { useShootStore } from '@/store/shoot'
 import { useLocalStorageStore } from '@/store/localStorage'
+import { useConfigStore } from '@/store/config'
 
 import GSecretDialogWrapper from '@/components/Secrets/GSecretDialogWrapper'
 import GTableColumnSelection from '@/components/GTableColumnSelection.vue'
@@ -339,11 +340,6 @@ export default {
       'dnsSecretItemsPerPage',
       'dnsSecretSortBy',
     ]),
-    hasCloudProfileForCloudProviderKind () {
-      return (kind) => {
-        return !isEmpty(this.cloudProfilesByCloudProviderKind(kind))
-      }
-    },
     infraSecretTableHeaders () {
       const headers = [
         {
@@ -505,8 +501,8 @@ export default {
     this.onUpdateSecret(secret)
   },
   methods: {
-    ...mapActions(useCloudProfileStore, ['cloudProfilesByCloudProviderKind']),
     ...mapActions(useSecretStore, ['getCloudProviderSecretByName']),
+    ...mapActions(useConfigStore, ['vendorNameForKind']),
     openSecretAddDialog (infrastructureKind) {
       this.selectedSecret = undefined
       this.visibleSecretDialog = infrastructureKind

From b1307791a0e4c282078738b33db8e4a45a5d50a9 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Fri, 20 Oct 2023 16:42:34 +0200
Subject: [PATCH 04/21] rm unused action

---
 .../src/components/NewShoot/GNewShootSelectInfrastructure.vue    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue b/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
index 4342f0c507..63c61f90dd 100644
--- a/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
+++ b/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
@@ -66,7 +66,6 @@ export default {
     ]),
   },
   methods: {
-    ...mapActions(useCloudProfileStore, ['cloudProfilesByCloudProviderKind']),
     ...mapActions(useConfigStore, ['vendorNameForKind']),
     selectInfrastructure (infrastructure) {
       this.setSelectedInfrastructure(infrastructure)

From 5969d555c36f43a3fd9e9497c326202fda701eb2 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Mon, 23 Oct 2023 12:21:50 +0200
Subject: [PATCH 05/21] Some lint fixes

---
 frontend/src/components/GVendor.vue                          | 5 +----
 .../components/NewShoot/GNewShootSelectInfrastructure.vue    | 1 -
 frontend/src/store/config.js                                 | 1 -
 frontend/src/views/GSecrets.vue                              | 1 -
 4 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/frontend/src/components/GVendor.vue b/frontend/src/components/GVendor.vue
index 4935f68a43..da47bfdf26 100644
--- a/frontend/src/components/GVendor.vue
+++ b/frontend/src/components/GVendor.vue
@@ -60,10 +60,7 @@ import { useConfigStore } from '@/store/config'
 
 import GVendorIcon from '@/components/GVendorIcon'
 
-import {
-  join,
-  get,
-} from '@/lodash'
+import { join } from '@/lodash'
 
 export default {
   components: {
diff --git a/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue b/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
index 63c61f90dd..96124cf22c 100644
--- a/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
+++ b/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
@@ -44,7 +44,6 @@ import { useConfigStore } from '@/store/config'
 
 import GVendorIcon from '@/components/GVendorIcon'
 
-import { get } from '@/lodash'
 export default {
   components: {
     GVendorIcon,
diff --git a/frontend/src/store/config.js b/frontend/src/store/config.js
index 1f66d008ef..18dd33cee8 100644
--- a/frontend/src/store/config.js
+++ b/frontend/src/store/config.js
@@ -22,7 +22,6 @@ import {
   get,
   isEmpty,
   camelCase,
-  find,
 } from '@/lodash'
 
 const wellKnownConditions = {
diff --git a/frontend/src/views/GSecrets.vue b/frontend/src/views/GSecrets.vue
index f3484b2edf..ecbde86359 100644
--- a/frontend/src/views/GSecrets.vue
+++ b/frontend/src/views/GSecrets.vue
@@ -284,7 +284,6 @@ import {
   filter,
   head,
   includes,
-  isEmpty,
   map,
   mapKeys,
   mapValues,

From 0c773efc0b1bab9cf36a577b36eae2616f870a0b Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Mon, 23 Oct 2023 12:22:06 +0200
Subject: [PATCH 06/21] Added documentation

---
 docs/README.md                        |   3 +-
 docs/operations/vendors-custom-cps.md | 178 ++++++++++++++++++++++++++
 2 files changed, 180 insertions(+), 1 deletion(-)
 create mode 100644 docs/operations/vendors-custom-cps.md

diff --git a/docs/README.md b/docs/README.md
index 787543f868..da6236aa9a 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -19,9 +19,10 @@
 
 * [Configure Access Restrictions](operations/access-restrictions.md)
 * [Theming and Branding](operations/customization.md)
+* [Configure Vendors and Custom Cloud Providers](operations/vendors-custom-cps.md)
 * [Webterminals](operations/webterminals.md)
 
 ## Development
 
 * [Setting up a local development environment](development/local-setup.md)
-* [Testing](development/testing.md)
\ No newline at end of file
+* [Testing](development/testing.md)
diff --git a/docs/operations/vendors-custom-cps.md b/docs/operations/vendors-custom-cps.md
new file mode 100644
index 0000000000..e8ba6f4605
--- /dev/null
+++ b/docs/operations/vendors-custom-cps.md
@@ -0,0 +1,178 @@
+# Configure Vendors and Custom Cloud Providers
+
+## Motivation
+Gardener landscape administrators should have the possibility to change icons and name of vendors (cloud providers, image vendors etc.). This enables the administator to adjust vendors and apply company or context specific values. A usage example could be a locally hosted OpenStack infrastructure that should appear as `MyCustomCloud` with a custom icon in the Dashboard so that the user immediately identifies it as `MyCustomCloud` as he might not be famililar with the term `OpenStack`.
+
+## Vendor Configuration
+It is possible to change the name and icon of build-in vendors in the Gardener Dashboard (e.g. aws, ubuntu etc.) when using the [helm chart](https://github.com/gardener/dashboard/blob/master/charts/gardener-dashboard) in the `frontend.vendors` map. You can add a key for each vendor that you want to customize. The following configuration properties are supported:
+
+| name | description |
+| ---- | ----------- |
+| `name` | Name of the vendor |
+| `icon` | Asset name as defined in the vendor asset map. You can also use [data:](https://developer.mozilla.org/en-US/docs/web/http/basics_of_http/data_urls) scheme for development. For production it is recommended to provide static assets |
+
+Besides overwriting built-in vendors, you can also add additonal vendors that the Dashboard does not already support. E.g. additional machine image vendors or a cloud provider that you have defined via [cloud provider configuration](#configure-available-cloud-providers).
+
+## Configure Available Cloud Providers
+Gardener Dashboard has a list of built-in cloud providers:
+`'aws', 'azure', 'gcp', 'openstack', 'alicloud', 'metal', 'vsphere', 'hcloud', 'onmetal', 'local'`
+
+The Dashboard renders available cloud providers in the order defined by the list.
+> **_NOTE:_**  A cloud provider is considered `available` if at least one cloud profile as well as a matching seed is defined for a Gardener landscape. If you add custom cloud providers, they will only appear if you have configured these prerequisites in your landscape
+
+You can overwrite the list by providing the `frontend.cloudProviderList` array using the [helm chart](https://github.com/gardener/dashboard/blob/master/charts/gardener-dashboard).
+This way you can change the order or hide cloud providers from the Gardener Dashboard by ommiting it in the list. You can also add additional (custom) cloud providers. You can overwrite the appearance of the custom cloud providers via [vendor configuration](#vendor-configuration). You can configure details of the custom cloud provider, see [custom cloud providers](#custom-cloud-providers)
+
+## Custom Cloud Providers
+You can add custom cloud providers and define the secret dialog input values as well as add a default shoot spec where you can provide values that are required for the shoot resource. The values can be configured using the helm chart in the `frontend.customCloudProviders` map. You can add a key for each vendor that you want to customize. The following configuration properties are supported:
+
+| name | description |
+| ---- | ----------- |
+| `zoned` | Defines if this cloud provider is zones. If not provided defaults to `true` |
+| `shoot.specTemplate` | Add default `shoot.spec` template. The provided yaml values are added to each new shoot resource. The worker CIDR can be used as as variable `${workerCIDR}` |
+| `secret.fields` | Define secret input fields. See below for more details. If not provided, defaults to plain yaml object input |
+| `secret.help` | `HTML` secret dialog help content |
+
+> **_NOTE:_**  It is currently not possible to add custom DNS Providers. Only infrastructure providers are supported
+
+
+
+### Secret Fields
+It is possible to define input fields with data validation to help the user add secret data for this custom cloud provider. The array can contain field definitions with the following properties:
+| name | description |
+| ---- | ----------- |
+| `key` | Unique key for input field. Used as secret data key |
+| `hint` | Input field hint |
+| `label` | Input field label |
+| `type` | Input field type. Supported values are `text \| password \| json \| yaml` <br /> `text`: Simple plain text input<br /> `password`: Hidden secret data plain text input <br /> `json`: Object data in JSON format<br /> `yaml`: Object data in YAML input |
+| `validators` | Add a key for each validation. Each validator has a `type` property as well as additional properties depending on the type. See below for possible valdation properties |
+| `validationErrors` | For each key defined in `validations` add a key with an error message for the validation |
+
+#### Validators
+| type | properties | description |
+| ---- | ---------- | ----------- |
+| `required` | `not`: Optional array of field keys. Makes field required if one of the referenced input fields is empty. If `not` is not provided, the field is always required | Required input field. Use `not` references to ceate *either or* scenarios, e.g. `username / password` *or* `token` is required |
+| `regex` | `value`: JavaScript regex pattern | Input field must match provided pattern. You can define arbitrary validations. e.g. length or specific syntax |
+| `isValidObject` | `none` | Input value must be valid object. Can be used for `json` and `yaml` field types to ensure valid data |
+> **_NOTE:_**  It is currently not possible to define custom input fields on the create cluster page
+
+### Example
+A complete custom cloud provider configuration example including required available cloud provider configuration as well as vendor configuration:
+
+```yaml
+global:
+  dashboard:
+    frontendConfig:
+      cloudProviderList:
+      - aws
+      - my-cc
+      - gcp
+      customCloudProviders:
+        my-cc:
+          zoned: true
+          shoot:
+            specTemplate:
+              provider:
+                type: my-cc
+                infrastructureConfig:
+                  apiVersion: my-cc.provider.extensions.gardener.cloud/v1alpha1
+                  kind: InfrastructureConfig
+                  networks:
+                    vpc:
+                      cidr: ${workerCIDR}
+                controlPlaneConfig:
+                  apiVersion: my-cc.provider.extensions.gardener.cloud/v1alpha1
+                  kind: ControlPlaneConfig
+              networking:
+                nodddes: ${workerCIDR}
+          secret:
+            fields:
+            - key: project
+              hint: Enter a valid project
+              label: Project
+              type: text
+              validators:
+                required:
+                  type: required
+                isproject:
+                  type: regex
+                  value: .+.+--.+
+              validationErrors:
+                required: Project is required
+                isproject: Must be a valid project with format a--b
+            - key: token
+              hint: Enter a valid token
+              label: Token
+              type: password
+              validators:
+                required:
+                  type: requiredIf
+                  not:
+                    - user
+                    - password
+                istoken:
+                  type: regex
+                  value: ^.{10}$
+              validationErrors:
+                required: Token is required if no user / password provided
+                istoken: Must be a valid token with length 10
+            - key: user
+              hint: Enter a valid User
+              label: User
+              type: text
+              validators:
+                required:
+                  type: requiredIf
+                  not:
+                    - token
+              validationErrors:
+                required: User is required if no token provided
+            - key: password
+              hint: Enter a password
+              label: password
+              type: password
+              validators:
+                required:
+                  type: requiredIf
+                  not:
+                    - token
+              validationErrors:
+                required: Password is required if no token provided
+            - key: json
+              hint: Enter additional Data as JSON
+              label: JSON
+              type: json
+              validators:
+                isJSON:
+                  type: isValidObject
+              validationErrors:
+                isJSON: Data must be valid JSON
+            - key: yaml
+              hint: Enter additional Data as YAML
+              label: YAML
+              type: yaml
+              validators:
+                isYAML:
+                  type: isValidObject
+              validationErrors:
+                isYAML: Data must be valid YAML
+            help: |
+              #My Custom Cloud Provider
+              <br />
+              <img src="/static/vendor-assets/cp_my-cc.jpg" width="100px" />
+              <br />
+              ## Project
+              Please enter a valid project with format a--b
+              <br />
+              ## Token
+              Please enter a valid token with exactly 10 chars
+      vendors:
+        my-cc:
+          name: My CC
+          icon: cp_my-cc.jpg
+```
+
+## Vendor assets
+In the above example, the vendor icon is referenced as static asset. Static vendor assets can be provided in the [assets](https://github.com/gardener/dashboard/tree/master/frontend/public/static/vendor-assets) folder when using the [helm chart](https://github.com/gardener/dashboard/blob/master/charts/gardener-dashboard) in the `frontendConfig.vendorAssets` map.
+
+The files have to be encoded as base64 for the chart. For more information, see [Logos and Icons](customization.md#logos-and-icons) section of customization documentation.

From 45a673d1829cafd8e42432f66a3d49194e6d6de5 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Mon, 23 Oct 2023 14:40:23 +0200
Subject: [PATCH 07/21] Small fixes

---
 frontend/src/components/GVendor.vue                         | 4 ++--
 .../components/NewShoot/GNewShootSelectInfrastructure.vue   | 4 ++--
 frontend/src/components/Secrets/GSecretDialog.vue           | 6 +++---
 frontend/src/components/Secrets/GSecretDialogAlicloud.vue   | 2 +-
 frontend/src/components/Secrets/GSecretDialogAws.vue        | 2 +-
 frontend/src/components/Secrets/GSecretDialogAzure.vue      | 2 +-
 frontend/src/components/Secrets/GSecretDialogGcp.vue        | 2 +-
 frontend/src/components/Secrets/GSecretDialogGeneric.vue    | 2 +-
 frontend/src/components/Secrets/GSecretDialogOpenstack.vue  | 2 +-
 frontend/src/store/config.js                                | 4 ++--
 frontend/src/views/GSecrets.vue                             | 6 +++---
 11 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/GVendor.vue b/frontend/src/components/GVendor.vue
index da47bfdf26..4285d3135d 100644
--- a/frontend/src/components/GVendor.vue
+++ b/frontend/src/components/GVendor.vue
@@ -133,11 +133,11 @@ export default {
       return join(titles, ' / ')
     },
     vendorName () {
-      return this.vendorNameForKind(this.cloudProviderKind)
+      return this.vendorDisplayName(this.cloudProviderKind)
     },
   },
   methods: {
-    ...mapActions(useConfigStore, ['vendorNameForKind']),
+    ...mapActions(useConfigStore, ['vendorDisplayName']),
   },
 }
 </script>
diff --git a/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue b/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
index 96124cf22c..26bafda221 100644
--- a/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
+++ b/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
@@ -65,7 +65,7 @@ export default {
     ]),
   },
   methods: {
-    ...mapActions(useConfigStore, ['vendorNameForKind']),
+    ...mapActions(useConfigStore, ['vendorDisplayName']),
     selectInfrastructure (infrastructure) {
       this.setSelectedInfrastructure(infrastructure)
       this.userInterActionBus.emit('updateInfrastructure', infrastructure)
@@ -74,7 +74,7 @@ export default {
       this.selectedInfrastructure = infrastructure
     },
     vendorName (infrastructureKind) {
-      return this.vendorNameForKind(infrastructureKind)
+      return this.vendorDisplayName(infrastructureKind)
     },
   },
 }
diff --git a/frontend/src/components/Secrets/GSecretDialog.vue b/frontend/src/components/Secrets/GSecretDialog.vue
index e5f02619a2..7c47cc31b2 100644
--- a/frontend/src/components/Secrets/GSecretDialog.vue
+++ b/frontend/src/components/Secrets/GSecretDialog.vue
@@ -282,8 +282,8 @@ export default {
     },
     title () {
       return this.isCreateMode
-        ? `Add new ${this.vendorNameForKind(this.vendor)} Secret`
-        : `Replace ${this.vendorNameForKind(this.vendor)} Secret`
+        ? `Add new ${this.vendorDisplayName(this.vendor)} Secret`
+        : `Replace ${this.vendorDisplayName(this.vendor)} Secret`
     },
     relatedShootCount () {
       return this.shootsByInfrastructureSecret.length
@@ -320,7 +320,7 @@ export default {
     ...mapActions(useCloudProfileStore, [
       'cloudProfilesByCloudProviderKind',
     ]),
-    ...mapActions(useConfigStore, ['vendorNameForKind']),
+    ...mapActions(useConfigStore, ['vendorDisplayName']),
     hide () {
       this.visible = false
     },
diff --git a/frontend/src/components/Secrets/GSecretDialogAlicloud.vue b/frontend/src/components/Secrets/GSecretDialogAlicloud.vue
index 67e61d3c61..a2af1fe94e 100644
--- a/frontend/src/components/Secrets/GSecretDialogAlicloud.vue
+++ b/frontend/src/components/Secrets/GSecretDialogAlicloud.vue
@@ -133,7 +133,7 @@ export default {
       type: Object,
     },
     vendor: {
-      type: Object,
+      type: String,
     },
   },
   emits: [
diff --git a/frontend/src/components/Secrets/GSecretDialogAws.vue b/frontend/src/components/Secrets/GSecretDialogAws.vue
index f2a8d276e7..5192d83254 100644
--- a/frontend/src/components/Secrets/GSecretDialogAws.vue
+++ b/frontend/src/components/Secrets/GSecretDialogAws.vue
@@ -143,7 +143,7 @@ export default {
       type: Object,
     },
     vendor: {
-      type: Object,
+      type: String,
     },
   },
   emits: [
diff --git a/frontend/src/components/Secrets/GSecretDialogAzure.vue b/frontend/src/components/Secrets/GSecretDialogAzure.vue
index 8bc2ca318d..e92fa1ac2f 100644
--- a/frontend/src/components/Secrets/GSecretDialogAzure.vue
+++ b/frontend/src/components/Secrets/GSecretDialogAzure.vue
@@ -135,7 +135,7 @@ export default {
       type: Object,
     },
     vendor: {
-      type: Object,
+      type: String,
     },
   },
   emits: [
diff --git a/frontend/src/components/Secrets/GSecretDialogGcp.vue b/frontend/src/components/Secrets/GSecretDialogGcp.vue
index 20918383e5..6baad9f870 100644
--- a/frontend/src/components/Secrets/GSecretDialogGcp.vue
+++ b/frontend/src/components/Secrets/GSecretDialogGcp.vue
@@ -112,7 +112,7 @@ export default {
       type: Object,
     },
     vendor: {
-      type: Object,
+      type: String,
     },
   },
   emits: [
diff --git a/frontend/src/components/Secrets/GSecretDialogGeneric.vue b/frontend/src/components/Secrets/GSecretDialogGeneric.vue
index 89ab78648b..85945a133f 100644
--- a/frontend/src/components/Secrets/GSecretDialogGeneric.vue
+++ b/frontend/src/components/Secrets/GSecretDialogGeneric.vue
@@ -106,7 +106,7 @@ export default {
       type: Object,
     },
     vendor: {
-      type: Object,
+      type: String,
     },
   },
   emits: [
diff --git a/frontend/src/components/Secrets/GSecretDialogOpenstack.vue b/frontend/src/components/Secrets/GSecretDialogOpenstack.vue
index 6826586531..da5905ddf9 100644
--- a/frontend/src/components/Secrets/GSecretDialogOpenstack.vue
+++ b/frontend/src/components/Secrets/GSecretDialogOpenstack.vue
@@ -225,7 +225,7 @@ export default {
       type: Object,
     },
     vendor: {
-      type: Object,
+      type: String,
     },
   },
   emits: [
diff --git a/frontend/src/store/config.js b/frontend/src/store/config.js
index 18dd33cee8..8965510425 100644
--- a/frontend/src/store/config.js
+++ b/frontend/src/store/config.js
@@ -322,7 +322,7 @@ export const useConfigStore = defineStore('config', () => {
     return get(knownConditions.value, type, getCondition(type))
   }
 
-  function vendorNameForKind (kind) {
+  function vendorDisplayName (kind) {
     const knownVendors = {
       alicloud: {
         name: 'Alibaba Cloud',
@@ -419,7 +419,7 @@ export const useConfigStore = defineStore('config', () => {
     conditionForType,
     customCloudProviders,
     vendors,
-    vendorNameForKind,
+    vendorDisplayName,
     cloudProviderList,
     $reset,
   }
diff --git a/frontend/src/views/GSecrets.vue b/frontend/src/views/GSecrets.vue
index ecbde86359..3f51ead6a1 100644
--- a/frontend/src/views/GSecrets.vue
+++ b/frontend/src/views/GSecrets.vue
@@ -63,7 +63,7 @@ SPDX-License-Identifier: Apache-2.0
                   />
                 </template>
                 <v-list-item-title>
-                  {{ vendorNameForKind(infrastructure) }}
+                  {{ vendorDisplayName(infrastructure) }}
                 </v-list-item-title>
               </v-list-item>
             </v-list>
@@ -187,7 +187,7 @@ SPDX-License-Identifier: Apache-2.0
                   />
                 </template>
                 <v-list-item-title>
-                  {{ vendorNameForKind(dnsProvider) }}
+                  {{ vendorDisplayName(dnsProvider) }}
                 </v-list-item-title>
               </v-list-item>
             </v-list>
@@ -501,7 +501,7 @@ export default {
   },
   methods: {
     ...mapActions(useSecretStore, ['getCloudProviderSecretByName']),
-    ...mapActions(useConfigStore, ['vendorNameForKind']),
+    ...mapActions(useConfigStore, ['vendorDisplayName']),
     openSecretAddDialog (infrastructureKind) {
       this.selectedSecret = undefined
       this.visibleSecretDialog = infrastructureKind

From 6f251a76af9e5d7b6cd382e42bf988c11d1e4b6f Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Mon, 4 Dec 2023 17:22:45 +0100
Subject: [PATCH 08/21] Show cloud profiles without seed in frontend

---
 backend/lib/services/cloudprofiles.js              | 12 +-----------
 frontend/src/components/GCloudProfile.vue          | 14 ++++++++++++++
 .../NewShoot/GNewShootInfrastructureDetails.vue    |  7 ++++++-
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/backend/lib/services/cloudprofiles.js b/backend/lib/services/cloudprofiles.js
index 619ea77cf9..1cbf9c56cd 100644
--- a/backend/lib/services/cloudprofiles.js
+++ b/backend/lib/services/cloudprofiles.js
@@ -65,17 +65,7 @@ exports.list = async function ({ user }) {
 
   const cloudProfiles = getCloudProfiles()
   const seeds = getVisibleAndNotProtectedSeeds()
-  return _
-    .chain(cloudProfiles)
-    .map(assignSeedsToCloudProfileIteratee(seeds))
-    .filter(cloudProfile => {
-      if (!_.isEmpty(cloudProfile.data.seedNames)) {
-        return true
-      }
-      logger.info(`No matching seed for cloud profile with name ${cloudProfile.metadata.name} found`)
-      return false
-    })
-    .value()
+  return _.map(cloudProfiles, assignSeedsToCloudProfileIteratee(seeds))
 }
 
 exports.read = async function ({ user, name }) {
diff --git a/frontend/src/components/GCloudProfile.vue b/frontend/src/components/GCloudProfile.vue
index 3b26a7ebf8..757989cc3a 100644
--- a/frontend/src/components/GCloudProfile.vue
+++ b/frontend/src/components/GCloudProfile.vue
@@ -8,6 +8,7 @@ SPDX-License-Identifier: Apache-2.0
   <div>
     <template v-if="createMode">
       <v-select
+        v-messages-color="{ color: 'warning' }"
         :items="cloudProfiles"
         :model-value="modelValue"
         item-value="metadata.name"
@@ -16,6 +17,8 @@ SPDX-License-Identifier: Apache-2.0
         :error-messages="getErrorMessages('modelValue')"
         color="primary"
         variant="underlined"
+        :hint="hint"
+        persistent-hint
         @update:model-value="onInput"
         @blur="v$.modelValue.$touch()"
       />
@@ -36,6 +39,8 @@ import { required } from '@vuelidate/validators'
 
 import { getValidationErrors } from '@/utils'
 
+import { find } from '@/lodash'
+
 const validationErrors = {
   modelValue: {
     required: 'You can\'t leave this empty.',
@@ -80,6 +85,15 @@ export default {
         },
       }
     },
+    selectedCloudProfile () {
+      return find(this.cloudProfiles, { metadata: { name: this.modelValue } })
+    },
+    hint () {
+      if (!this.selectedCloudProfile?.data.seedNames?.length) {
+        return 'This cloud profile does not have a matching seed. Gardener will not be able to schedule shoots using this cloud profile'
+      }
+      return undefined
+    },
   },
   methods: {
     getErrorMessages (field) {
diff --git a/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue b/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue
index d2293f5e0b..d7d15b7338 100644
--- a/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue
+++ b/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: Apache-2.0
   <v-container class="px-0 mx-0">
     <v-row>
       <v-col
-        v-if="cloudProfiles.length > 1"
+        v-if="cloudProfiles.length > 1 || !cloudProfileHasSeedNames"
         cols="3"
       >
         <g-cloud-profile
@@ -274,6 +274,7 @@ export default {
       firewallNetworks: undefined,
       projectID: undefined,
       defaultNodesCIDR: undefined,
+      customCloudProviderData: {},
     }
   },
   validations () {
@@ -436,6 +437,10 @@ export default {
       const secretDomain = get(this.secret, 'data.domainName')
       return this.floatingPoolNamesByCloudProfileNameAndRegionAndDomain({ cloudProfileName, region, secretDomain })
     },
+    cloudProfileHasSeedNames () {
+      const selectedCloudProfile = find(this.cloudProfiles, { metadata: { name: this.cloudProfileName } })
+      return selectedCloudProfile?.data.seedNames?.length
+    },
   },
   watch: {
     workerless (value) {

From 2e51cf9b3746e478d102879278f82d604cd6248b Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Mon, 4 Dec 2023 20:23:23 +0100
Subject: [PATCH 09/21] Add custom input fields to create shoot infrastructure
 card

---
 .../GNewShootInfrastructureDetails.vue        | 79 ++++++++++++++++++-
 frontend/src/views/GNewShoot.vue              | 12 +++
 2 files changed, 88 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue b/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue
index d7d15b7338..6d3c9ab9a7 100644
--- a/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue
+++ b/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue
@@ -199,6 +199,26 @@ SPDX-License-Identifier: Apache-2.0
           </v-select>
         </v-col>
       </template>
+      <template v-if="customCloudProviderFields">
+        <v-col
+          v-for="{ key, label, hint, type } in customCloudProviderFields"
+          :key="key"
+          cols="3"
+        >
+          <v-text-field
+            v-if="type === 'text'"
+            v-model="customCloudProviderData[key]"
+            color="primary"
+            :label="label"
+            :error-messages="getErrorMessages(`customCloudProviderData.${key}`)"
+            type="text"
+            :hint="hint"
+            variant="underlined"
+            @update:model-value="v$.customCloudProviderData[key].$touch()"
+            @blur="v$.customCloudProviderData[key].$touch()"
+          />
+        </v-col>
+      </template>
     </v-row>
   </v-container>
 </template>
@@ -237,6 +257,7 @@ import {
   forEach,
   intersection,
   find,
+  set,
 } from '@/lodash'
 
 export default {
@@ -281,11 +302,14 @@ export default {
     return this.validators
   },
   computed: {
-    ...mapState(useConfigStore, ['seedCandidateDeterminationStrategy']),
+    ...mapState(useConfigStore, [
+      'seedCandidateDeterminationStrategy',
+      'customCloudProviders',
+    ]),
     ...mapState(useGardenerExtensionStore, ['networkingTypes']),
     ...mapState(useShootStagingStore, ['workerless']),
     validators () {
-      return {
+      const validators = {
         region: {
           required,
         },
@@ -329,6 +353,31 @@ export default {
           }),
         },
       }
+
+      const allValidators = {
+        customCloudProviderData: {},
+        ...validators,
+      }
+      forEach(this.customCloudProviderFields, ({ key, validators }) => {
+        const compiledValidators = {}
+        forEach(validators, (validator, validatorName) => {
+          switch (validator.type) {
+            case 'required':
+              compiledValidators[validatorName] = required
+              break
+            case 'requiredIf':
+              compiledValidators[validatorName] = requiredIf(() => !every(map(validator.not, fieldKey => this.customCloudProviderData[fieldKey])))
+              break
+            case 'isValidObject':
+              compiledValidators[validatorName] = () => isEmpty(this.customCloudProviderData[key]) || Object.keys(this.customCloudProviderParsedData[key]).length > 0
+              break
+            case 'regex':
+              compiledValidators[validatorName] = value => !value || new RegExp(validator.value).test(value)
+          }
+        })
+        allValidators.customCloudProviderData[key] = compiledValidators
+      })
+      return allValidators
     },
     validationErrors () {
       const validationErrors = {
@@ -361,7 +410,15 @@ export default {
           required: 'Firewall Networks required',
         },
       }
-      return validationErrors
+
+      const allValidationErrors = {
+        customCloudProviderData: {},
+        ...validationErrors,
+      }
+      forEach(this.customCloudProviderFields, ({ key, validationErrors }) => {
+        allValidationErrors.customCloudProviderData[key] = validationErrors
+      })
+      return allValidationErrors
     },
     cloudProfiles () {
       return sortBy(this.cloudProfilesByCloudProviderKind(this.infrastructureKind), [(item) => item.metadata.name])
@@ -437,10 +494,23 @@ export default {
       const secretDomain = get(this.secret, 'data.domainName')
       return this.floatingPoolNamesByCloudProfileNameAndRegionAndDomain({ cloudProfileName, region, secretDomain })
     },
+    customCloudProvider () {
+      return get(this.customCloudProviders, this.infrastructureKind)
+    },
+    customCloudProviderFields () {
+      return this.customCloudProvider?.shoot?.createFields
+    },
     cloudProfileHasSeedNames () {
       const selectedCloudProfile = find(this.cloudProfiles, { metadata: { name: this.cloudProfileName } })
       return selectedCloudProfile?.data.seedNames?.length
     },
+    customCloudProviderShootData () {
+      const shootData = {}
+      forEach(this.customCloudProviderFields, ({ key, path }) => {
+        set(shootData, `${path}.${key}`, this.customCloudProviderData[key])
+      })
+      return shootData
+    },
   },
   watch: {
     workerless (value) {
@@ -579,6 +649,7 @@ export default {
         firewallSize: this.firewallSize,
         firewallNetworks: this.firewallNetworks,
         defaultNodesCIDR: this.defaultNodesCIDR,
+        customCloudProviderData: this.customCloudProviderShootData,
       }
     },
     setInfrastructureData ({
@@ -595,6 +666,7 @@ export default {
       firewallImage,
       firewallSize,
       firewallNetworks,
+      customCloudProviderData,
     }) {
       this.infrastructureKind = infrastructureKind
       this.cloudProfileName = cloudProfileName
@@ -610,6 +682,7 @@ export default {
       this.firewallSize = firewallSize
       this.firewallNetworks = firewallNetworks
       this.defaultNodesCIDR = this.getDefaultNodesCIDR({ cloudProfileName })
+      this.customCloudProviderData = customCloudProviderData
 
       this.v$.projectID.$touch() // project id is a required field (for metal). We want to show the error immediatley
     },
diff --git a/frontend/src/views/GNewShoot.vue b/frontend/src/views/GNewShoot.vue
index fee80892a3..c6610cc9c2 100644
--- a/frontend/src/views/GNewShoot.vue
+++ b/frontend/src/views/GNewShoot.vue
@@ -214,6 +214,8 @@ import {
   isEqual,
   unset,
   omit,
+  merge,
+  forEach,
 } from '@/lodash'
 
 export default {
@@ -338,6 +340,7 @@ export default {
         firewallSize,
         firewallNetworks,
         defaultNodesCIDR,
+        customCloudProviderData,
       } = this.$refs.infrastructureDetails.getInfrastructureData()
       const oldInfrastructureKind = get(shootResource, 'spec.provider.type')
       if (oldInfrastructureKind !== infrastructureKind ||
@@ -348,6 +351,7 @@ export default {
       }
       set(shootResource, 'spec.cloudProfileName', cloudProfileName)
       set(shootResource, 'spec.region', region)
+      merge(shootResource, customCloudProviderData)
 
       if (!this.workerless) {
         set(shootResource, 'spec.networking.type', networkingType)
@@ -495,6 +499,13 @@ export default {
       const firewallSize = get(shootResource, 'spec.provider.infrastructureConfig.firewall.size')
       const firewallNetworks = get(shootResource, 'spec.provider.infrastructureConfig.firewall.networks')
 
+      const customCloudProvider = get(this.customCloudProviders, infrastructureKind)
+      const customCloudProviderFields = customCloudProvider?.shoot?.createFields
+      const customCloudProviderData = {}
+      forEach(customCloudProviderFields, ({ key, path }) => {
+        customCloudProviderData[key] = get(shootResource, `${path}.${key}`)
+      })
+
       this.$refs.infrastructureDetails.setInfrastructureData({
         infrastructureKind,
         cloudProfileName,
@@ -509,6 +520,7 @@ export default {
         firewallImage,
         firewallSize,
         firewallNetworks,
+        customCloudProviderData,
       })
 
       if (this.$refs.accessRestrictions) {

From 88ab096bc73418b2e3c78cac3c350d0284363020 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Mon, 11 Dec 2023 09:49:11 +0100
Subject: [PATCH 10/21] moved custom fields to dedicated component

---
 frontend/src/components/GCloudProfile.vue     |   6 -
 .../src/components/GGenericInputFields.vue    | 203 ++++++++++++++++++
 .../GNewShootInfrastructureDetails.vue        |  58 +----
 .../Secrets/GSecretDialogAlicloud.vue         |   3 -
 .../components/Secrets/GSecretDialogAws.vue   |   3 -
 .../components/Secrets/GSecretDialogAzure.vue |   3 -
 .../Secrets/GSecretDialogCloudflare.vue       |   3 -
 .../components/Secrets/GSecretDialogGcp.vue   |   3 -
 .../Secrets/GSecretDialogGeneric.vue          | 135 +-----------
 .../Secrets/GSecretDialogHCloud.vue           |   3 -
 .../Secrets/GSecretDialogInfoblox.vue         |   3 -
 .../components/Secrets/GSecretDialogMetal.vue |   3 -
 frontend/src/utils/validators.js              |   9 +-
 13 files changed, 224 insertions(+), 211 deletions(-)
 create mode 100644 frontend/src/components/GGenericInputFields.vue

diff --git a/frontend/src/components/GCloudProfile.vue b/frontend/src/components/GCloudProfile.vue
index 1493ffe0b9..52385864e7 100644
--- a/frontend/src/components/GCloudProfile.vue
+++ b/frontend/src/components/GCloudProfile.vue
@@ -42,12 +42,6 @@ import { withFieldName } from '@/utils/validators'
 
 import { find } from '@/lodash'
 
-const validationErrors = {
-  modelValue: {
-    required: 'You can\'t leave this empty.',
-  },
-}
-
 export default {
   props: {
     modelValue: {
diff --git a/frontend/src/components/GGenericInputFields.vue b/frontend/src/components/GGenericInputFields.vue
new file mode 100644
index 0000000000..1704f0394a
--- /dev/null
+++ b/frontend/src/components/GGenericInputFields.vue
@@ -0,0 +1,203 @@
+<!--
+SPDX-FileCopyrightText: 2023 SAP SE or an SAP affiliate company and Gardener contributors
+
+SPDX-License-Identifier: Apache-2.0
+-->
+
+<template>
+  <component
+    :is="wrapper"
+    v-for="{ key, label, hint, type } in fields"
+    :key="key"
+    v-bind="wrapperProps"
+  >
+    <v-text-field
+      v-if="type === 'text' || type === 'password'"
+      v-bind="inputProps"
+      v-model="fieldData[key]"
+      color="primary"
+      :label="label"
+      :error-messages="getErrorMessages(v$.fieldData[key])"
+      :append-icon="type === 'password' ? showInputData[key] ? 'mdi-eye' : 'mdi-eye-off' : undefined"
+      :type="type === 'password' && !showInputData[key] ? 'password' : 'text'"
+      :hint="hint"
+      @click:append="toggleShowInputData(key)"
+      @update:model-value="v$.fieldData[key].$touch()"
+      @blur="v$.fieldData[key].$touch()"
+    />
+    <v-textarea
+      v-if="type === 'yaml' || type === 'json'"
+      v-model="fieldData[key]"
+      color="primary"
+      :label="label"
+      :error-messages="getErrorMessages(v$.fieldData[key])"
+      :hint="hint"
+      @update:model-value="onInputTextarea(key, type)"
+      @blur="v$.fieldData[key].$touch()"
+    />
+  </component>
+</template>
+
+<script>
+import { VCol } from 'vuetify/components'
+import {
+  required,
+  requiredIf,
+} from '@vuelidate/validators'
+import { useVuelidate } from '@vuelidate/core'
+
+import {
+  withFieldName,
+  withMessage,
+} from '@/utils/validators'
+import { getErrorMessages } from '@/utils'
+
+import {
+  isObject,
+  forEach,
+  every,
+  map,
+  isEmpty,
+  fromPairs,
+  set,
+} from '@/lodash'
+
+export default {
+  components: {
+    VCol,
+  },
+  inject: ['yaml'],
+  props: {
+    fields: {
+      type: Array,
+      required: false,
+    },
+    modelValue: {
+      type: Object,
+      required: true,
+    },
+    wrapper: {
+      type: String,
+      default: 'div',
+    },
+    wrapperProps: {
+      type: Object,
+      required: false,
+    },
+    inputProps: {
+      type: Object,
+      required: false,
+    },
+  },
+  emits: [
+    'update:modelValue',
+  ],
+  setup () {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+  data () {
+    return {
+      parsedInput: {},
+      showInputData: {},
+      fieldData: {},
+    }
+  },
+  validations () {
+    return this.validators
+  },
+  computed: {
+    validators () {
+      const allValidators = {
+        fieldData: {},
+      }
+      forEach(this.fields, ({ key, label, validators }) => {
+        const compiledValidators = {}
+        forEach(validators, (validator, validatorName) => {
+          switch (validator.type) {
+            case 'required':
+              compiledValidators[validatorName] = required
+              break
+            case 'requiredIf':
+              compiledValidators[validatorName] = requiredIf(() => !every(map(validator.not, fieldKey => this.fieldData[fieldKey])))
+              break
+            case 'isValidObject':
+              compiledValidators[validatorName] = () => isEmpty(this.fieldData[key]) || Object.keys(this.parsedInput[key]).length > 0
+              break
+            case 'regex':
+              compiledValidators[validatorName] = value => !value || new RegExp(validator.value).test(value)
+          }
+          if (validator.message) {
+            compiledValidators[validatorName] = withMessage(validator.message, compiledValidators[validatorName])
+          }
+        })
+        allValidators.fieldData[key] = withFieldName(label, compiledValidators)
+      })
+      return allValidators
+    },
+    parsedFieldData () {
+      return fromPairs(map(this.fields, ({ key, type }) => {
+        if (type === 'json' || type === 'yaml') {
+          return [key, this.parsedInput[key]]
+        }
+        return [key, this.fieldData[key]]
+      }))
+    },
+  },
+  watch: {
+    fieldData: {
+      deep: true,
+      handler () {
+        this.$emit('update:modelValue', this.parsedFieldData)
+      },
+    },
+    parsedInput: {
+      deep: true,
+      handler () {
+        this.$emit('update:modelValue', this.parsedFieldData)
+      },
+    },
+    modelValue: {
+      async handler (value) {
+        if (isEmpty(this.fieldData)) {
+          // set initial data
+          const fieldData = fromPairs(await Promise.all(map(this.fields, async ({ key, type }) => {
+            if (type === 'yaml') {
+              return [key, await this.yaml.dump(value[key])]
+            }
+            if (type === 'json') {
+              return [key, JSON.stringify(value[key])]
+            }
+            return [key, value[key]]
+          })))
+          this.fieldData = fieldData
+        }
+      },
+    },
+  },
+  methods: {
+    async onInputTextarea (key, type) {
+      set(this.parsedInput, key, {})
+      try {
+        if (type === 'yaml') {
+          this.parsedInput[key] = await this.yaml.load(this.fieldData[key])
+        } else if (type === 'json') {
+          this.parsedInput[key] = JSON.parse(this.fieldData[key])
+        }
+      } catch (err) {
+        /* ignore errors */
+      } finally {
+        if (!isObject(this.parsedInput[key])) {
+          this.parsedInput[key] = {}
+        }
+      }
+      this.v$.fieldData[key].$touch()
+    },
+    toggleShowInputData (key) {
+      set(this.showInputData, key, !this.showInputData[key])
+    },
+    getErrorMessages,
+  },
+}
+</script>
diff --git a/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue b/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue
index ea3b3b385a..a6d63dda70 100644
--- a/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue
+++ b/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue
@@ -186,26 +186,13 @@ SPDX-License-Identifier: Apache-2.0
           />
         </v-col>
       </template>
-      <template v-if="customCloudProviderFields">
-        <v-col
-          v-for="{ key, label, hint, type } in customCloudProviderFields"
-          :key="key"
-          cols="3"
-        >
-          <v-text-field
-            v-if="type === 'text'"
-            v-model="customCloudProviderData[key]"
-            color="primary"
-            :label="label"
-            :error-messages="getErrorMessages(v$.customCloudProviderData[key])"
-            type="text"
-            :hint="hint"
-            variant="underlined"
-            @update:model-value="v$.customCloudProviderData[key].$touch()"
-            @blur="v$.customCloudProviderData[key].$touch()"
-          />
-        </v-col>
-      </template>
+      <g-generic-input-fields
+        v-model="customCloudProviderData"
+        :fields="customCloudProviderFields"
+        wrapper="VCol"
+        :wrapper-props="{ cols: '3' }"
+        :input-props="{ variant: 'underlined' }"
+      />
     </v-row>
   </v-container>
 </template>
@@ -230,6 +217,7 @@ import { useShootStagingStore } from '@/store/shootStaging'
 import GCloudProfile from '@/components/GCloudProfile'
 import GWildcardSelect from '@/components/GWildcardSelect'
 import GSelectSecret from '@/components/Secrets/GSelectSecret'
+import GGenericInputFields from '@/components/GGenericInputFields'
 
 import { getErrorMessages } from '@/utils'
 import {
@@ -249,7 +237,6 @@ import {
   intersection,
   find,
   set,
-  every,
 } from '@/lodash'
 
 export default {
@@ -257,6 +244,7 @@ export default {
     GCloudProfile,
     GWildcardSelect,
     GSelectSecret,
+    GGenericInputFields,
   },
   props: {
     userInterActionBus: {
@@ -294,7 +282,7 @@ export default {
     const requiresInfrastructure = infrastructureKind => {
       return requiredIf(() => this.infrastructureKind === infrastructureKind)
     }
-    const rules = {
+    return {
       region: withFieldName('Region', {
         required,
       }),
@@ -323,33 +311,7 @@ export default {
       projectID: withFieldName('Project ID', {
         required: requiresInfrastructure('metal'),
       }),
-      customCloudProviderData: {},
     }
-
-    forEach(this.customCloudProviderFields, ({ key, label, validators }) => {
-      const compiledValidators = {}
-      forEach(validators, (validator, validatorName) => {
-        switch (validator.type) {
-          case 'required':
-            compiledValidators[validatorName] = required
-            break
-          case 'requiredIf':
-            compiledValidators[validatorName] = requiredIf(() => !every(map(validator.not, fieldKey => this.customCloudProviderData[fieldKey])))
-            break
-          case 'isValidObject':
-            compiledValidators[validatorName] = () => isEmpty(this.customCloudProviderData[key]) || Object.keys(this.customCloudProviderParsedData[key]).length > 0
-            break
-          case 'regex':
-            compiledValidators[validatorName] = value => !value || new RegExp(validator.value).test(value)
-        }
-        if (validator.message) {
-          compiledValidators[validatorName] = withMessage(validator.message, compiledValidators[validatorName])
-        }
-      })
-      rules.customCloudProviderData[key] = withFieldName(label, compiledValidators)
-    })
-
-    return rules
   },
   computed: {
     ...mapState(useConfigStore, [
diff --git a/frontend/src/components/Secrets/GSecretDialogAlicloud.vue b/frontend/src/components/Secrets/GSecretDialogAlicloud.vue
index 14ea5ba788..092016f91f 100644
--- a/frontend/src/components/Secrets/GSecretDialogAlicloud.vue
+++ b/frontend/src/components/Secrets/GSecretDialogAlicloud.vue
@@ -196,9 +196,6 @@ export default {
         this.$emit('update:modelValue', modelValue)
       },
     },
-    valid () {
-      return !this.v$.$invalid
-    },
     secretData () {
       return {
         accessKeyID: this.accessKeyId,
diff --git a/frontend/src/components/Secrets/GSecretDialogAws.vue b/frontend/src/components/Secrets/GSecretDialogAws.vue
index 8605739676..6ef5429d9c 100644
--- a/frontend/src/components/Secrets/GSecretDialogAws.vue
+++ b/frontend/src/components/Secrets/GSecretDialogAws.vue
@@ -254,9 +254,6 @@ export default {
         this.$emit('update:modelValue', modelValue)
       },
     },
-    valid () {
-      return !this.v$.$invalid
-    },
     secretData () {
       return {
         accessKeyID: this.accessKeyId,
diff --git a/frontend/src/components/Secrets/GSecretDialogAzure.vue b/frontend/src/components/Secrets/GSecretDialogAzure.vue
index ac9229019f..99acf49809 100644
--- a/frontend/src/components/Secrets/GSecretDialogAzure.vue
+++ b/frontend/src/components/Secrets/GSecretDialogAzure.vue
@@ -166,9 +166,6 @@ export default {
         this.$emit('update:modelValue', modelValue)
       },
     },
-    valid () {
-      return !this.v$.$invalid
-    },
     secretData () {
       return {
         clientID: this.clientId,
diff --git a/frontend/src/components/Secrets/GSecretDialogCloudflare.vue b/frontend/src/components/Secrets/GSecretDialogCloudflare.vue
index 9dde726457..7f091f8579 100644
--- a/frontend/src/components/Secrets/GSecretDialogCloudflare.vue
+++ b/frontend/src/components/Secrets/GSecretDialogCloudflare.vue
@@ -111,9 +111,6 @@ export default {
         this.$emit('update:modelValue', modelValue)
       },
     },
-    valid () {
-      return !this.v$.$invalid
-    },
     secretData () {
       return {
         apiToken: this.apiToken,
diff --git a/frontend/src/components/Secrets/GSecretDialogGcp.vue b/frontend/src/components/Secrets/GSecretDialogGcp.vue
index cf73dddba2..f997677853 100644
--- a/frontend/src/components/Secrets/GSecretDialogGcp.vue
+++ b/frontend/src/components/Secrets/GSecretDialogGcp.vue
@@ -142,9 +142,6 @@ export default {
         this.$emit('update:modelValue', modelValue)
       },
     },
-    valid () {
-      return !this.v$.$invalid
-    },
     secretData () {
       return {
         'serviceaccount.json': this.serviceAccountKey,
diff --git a/frontend/src/components/Secrets/GSecretDialogGeneric.vue b/frontend/src/components/Secrets/GSecretDialogGeneric.vue
index 7838ecbc96..080e6b0dd4 100644
--- a/frontend/src/components/Secrets/GSecretDialogGeneric.vue
+++ b/frontend/src/components/Secrets/GSecretDialogGeneric.vue
@@ -7,41 +7,17 @@ SPDX-License-Identifier: Apache-2.0
 <template>
   <g-secret-dialog
     v-model="visible"
-    :data="secretData"
+    :data="customCloudProviderData"
     :secret-validations="v$"
     :secret="secret"
     :vendor="vendor"
   >
     <template #secret-slot>
       <template v-if="customCloudProviderFields">
-        <div
-          v-for="{ key, label, hint, type } in customCloudProviderFields"
-          :key="key"
-        >
-          <v-text-field
-            v-if="type === 'text' || type === 'password'"
-            v-model="customCloudProviderData[key]"
-            color="primary"
-            :label="label"
-            :error-messages="getErrorMessages(v$.customCloudProviderData[key])"
-            :append-icon="type === 'password' ? showSecrets[key] ? 'mdi-eye' : 'mdi-eye-off' : undefined"
-            :type="type === 'password' && !showSecrets[key] ? 'password' : 'text'"
-            :hint="hint"
-            @click:append="toggleShowSecrets(key)"
-            @update:model-value="v$.customCloudProviderData[key].$touch()"
-            @blur="v$.customCloudProviderData[key].$touch()"
-          />
-          <v-textarea
-            v-if="type === 'yaml' || type === 'json'"
-            v-model="customCloudProviderData[key]"
-            color="primary"
-            :label="label"
-            :error-messages="getErrorMessages(v$.customCloudProviderData[key])"
-            :hint="hint"
-            @update:model-value="onInputTextarea(key, type)"
-            @blur="v$.customCloudProviderData[key].$touch()"
-          />
-        </div>
+        <g-generic-input-fields
+          v-model="customCloudProviderData"
+          :fields="customCloudProviderFields"
+        />
       </template>
     </template>
     <template #help-slot>
@@ -64,43 +40,27 @@ SPDX-License-Identifier: Apache-2.0
 </template>
 
 <script>
-import { useVuelidate } from '@vuelidate/core'
-import {
-  required,
-  requiredIf,
-} from '@vuelidate/validators'
+
 import { mapState } from 'pinia'
+import { useVuelidate } from '@vuelidate/core'
 
 import { useConfigStore } from '@/store/config'
 
 import GSecretDialog from '@/components/Secrets/GSecretDialog'
+import GGenericInputFields from '@/components/GGenericInputFields'
 
-import {
-  withFieldName,
-  withMessage,
-} from '@/utils/validators'
 import {
   setDelayedInputFocus,
   transformHtml,
-  getErrorMessages,
 } from '@/utils'
 
-import {
-  isObject,
-  forEach,
-  get,
-  every,
-  map,
-  isEmpty,
-  fromPairs,
-  set,
-} from '@/lodash'
+import { get } from '@/lodash'
 
 export default {
   components: {
     GSecretDialog,
+    GGenericInputFields,
   },
-  inject: ['yaml'],
   props: {
     modelValue: {
       type: Boolean,
@@ -124,13 +84,8 @@ export default {
   data () {
     return {
       customCloudProviderData: {},
-      customCloudProviderParsedData: {},
-      showSecrets: {},
     }
   },
-  validations () {
-    return this.validators
-  },
   computed: {
     ...mapState(useConfigStore, [
       'customCloudProviders',
@@ -143,43 +98,6 @@ export default {
         this.$emit('update:modelValue', modelValue)
       },
     },
-    validationErrors () {
-      const allValidationErrors = {
-        customCloudProviderData: {},
-      }
-      forEach(this.customCloudProviderFields, ({ key, validationErrors }) => {
-        allValidationErrors.customCloudProviderData[key] = validationErrors
-      })
-      return allValidationErrors
-    },
-    validators () {
-      const allValidators = {
-        customCloudProviderData: {},
-      }
-      forEach(this.customCloudProviderFields, ({ key, label, validators }) => {
-        const compiledValidators = {}
-        forEach(validators, (validator, validatorName) => {
-          switch (validator.type) {
-            case 'required':
-              compiledValidators[validatorName] = required
-              break
-            case 'requiredIf':
-              compiledValidators[validatorName] = requiredIf(() => !every(map(validator.not, fieldKey => this.customCloudProviderData[fieldKey])))
-              break
-            case 'isValidObject':
-              compiledValidators[validatorName] = () => isEmpty(this.customCloudProviderData[key]) || Object.keys(this.customCloudProviderParsedData[key]).length > 0
-              break
-            case 'regex':
-              compiledValidators[validatorName] = value => !value || new RegExp(validator.value).test(value)
-          }
-          if (validator.message) {
-            compiledValidators[validatorName] = withMessage(validator.message, compiledValidators[validatorName])
-          }
-        })
-        allValidators.customCloudProviderData[key] = withFieldName(label, compiledValidators)
-      })
-      return allValidators
-    },
     customCloudProvider () {
       return get(this.customCloudProviders, this.vendor)
     },
@@ -209,40 +127,11 @@ export default {
     helpHtml () {
       return transformHtml(this.customCloudProvider?.secret?.help)
     },
-    valid () {
-      return !this.v$.$invalid
-    },
     isCreateMode () {
       return !this.secret
     },
-    secretData () {
-      const data = fromPairs(map(this.customCloudProviderFields, ({ key, type }) => {
-        if (type === 'json' || type === 'yaml') {
-          return [key, this.customCloudProviderParsedData[key]]
-        }
-        return [key, this.customCloudProviderData[key]]
-      }))
-      return data
-    },
   },
   methods: {
-    async onInputTextarea (key, type) {
-      set(this.customCloudProviderParsedData, key, {})
-      try {
-        if (type === 'yaml') {
-          this.customCloudProviderParsedData[key] = await this.yaml.load(this.customCloudProviderData[key])
-        } else if (type === 'json') {
-          this.customCloudProviderParsedData[key] = JSON.parse(this.customCloudProviderData[key])
-        }
-      } catch (err) {
-        /* ignore errors */
-      } finally {
-        if (!isObject(this.customCloudProviderParsedData[key])) {
-          this.customCloudProviderParsedData[key] = {}
-        }
-      }
-      this.v$.customCloudProviderData[key].$touch()
-    },
     reset () {
       this.v$.$reset()
 
@@ -254,10 +143,6 @@ export default {
         setDelayedInputFocus(this, 'textAreaData')
       }
     },
-    toggleShowSecrets (key) {
-      set(this.showSecrets, key, !this.showSecrets[key])
-    },
-    getErrorMessages,
   },
 }
 </script>
diff --git a/frontend/src/components/Secrets/GSecretDialogHCloud.vue b/frontend/src/components/Secrets/GSecretDialogHCloud.vue
index 632455b7cf..39219f45a3 100644
--- a/frontend/src/components/Secrets/GSecretDialogHCloud.vue
+++ b/frontend/src/components/Secrets/GSecretDialogHCloud.vue
@@ -103,9 +103,6 @@ export default {
         this.$emit('update:modelValue', modelValue)
       },
     },
-    valid () {
-      return !this.v$.$invalid
-    },
     secretData () {
       return {
         hcloudToken: this.hcloudToken,
diff --git a/frontend/src/components/Secrets/GSecretDialogInfoblox.vue b/frontend/src/components/Secrets/GSecretDialogInfoblox.vue
index 014d1ff3fb..63dfeaab77 100644
--- a/frontend/src/components/Secrets/GSecretDialogInfoblox.vue
+++ b/frontend/src/components/Secrets/GSecretDialogInfoblox.vue
@@ -109,9 +109,6 @@ export default {
         this.$emit('update:modelValue', modelValue)
       },
     },
-    valid () {
-      return !this.v$.$invalid
-    },
     secretData () {
       return {
         USERNAME: this.infobloxUsername,
diff --git a/frontend/src/components/Secrets/GSecretDialogMetal.vue b/frontend/src/components/Secrets/GSecretDialogMetal.vue
index ea6672f852..5acb7e8515 100644
--- a/frontend/src/components/Secrets/GSecretDialogMetal.vue
+++ b/frontend/src/components/Secrets/GSecretDialogMetal.vue
@@ -114,9 +114,6 @@ export default {
         this.$emit('update:modelValue', modelValue)
       },
     },
-    valid () {
-      return !this.v$.$invalid
-    },
     secretData () {
       return {
         metalAPIHMac: this.apiHmac,
diff --git a/frontend/src/utils/validators.js b/frontend/src/utils/validators.js
index da58b3ecee..e543586d68 100644
--- a/frontend/src/utils/validators.js
+++ b/frontend/src/utils/validators.js
@@ -4,18 +4,11 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-import {
-  helpers,
-  requiredIf,
-  required,
-} from '@vuelidate/validators'
+import { helpers } from '@vuelidate/validators'
 
 import {
   includes,
   get,
-  every,
-  map,
-  isEmpty,
 } from '@/lodash'
 
 const { withParams, regex, req, withMessage } = helpers

From 2f6711ec29544b8c64239476b027be3f9c2291ca Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Mon, 11 Dec 2023 11:55:49 +0100
Subject: [PATCH 11/21] Added simple generic selects removed fake profile

---
 backend/lib/services/cloudprofiles.js         | 11 +----
 .../src/components/GGenericInputFields.vue    | 45 +++++++++++++++++--
 .../GNewShootInfrastructureDetails.vue        |  1 +
 3 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/backend/lib/services/cloudprofiles.js b/backend/lib/services/cloudprofiles.js
index b43cd19148..1cbf9c56cd 100644
--- a/backend/lib/services/cloudprofiles.js
+++ b/backend/lib/services/cloudprofiles.js
@@ -65,16 +65,7 @@ exports.list = async function ({ user }) {
 
   const cloudProfiles = getCloudProfiles()
   const seeds = getVisibleAndNotProtectedSeeds()
-  const list = _.map(cloudProfiles, assignSeedsToCloudProfileIteratee(seeds))
-
-  const cc = _.cloneDeep(list[0])
-  cc.metadata.cloudProviderKind = 'foo'
-  cc.data.seedNames = undefined
-  cc.metadata.name = 'foocloud'
-  cc.metadata.displayName = 'foocloud'
-  list.push(cc)
-
-  return list
+  return _.map(cloudProfiles, assignSeedsToCloudProfileIteratee(seeds))
 }
 
 exports.read = async function ({ user, name }) {
diff --git a/frontend/src/components/GGenericInputFields.vue b/frontend/src/components/GGenericInputFields.vue
index 1704f0394a..cd8b8a2da7 100644
--- a/frontend/src/components/GGenericInputFields.vue
+++ b/frontend/src/components/GGenericInputFields.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: Apache-2.0
 <template>
   <component
     :is="wrapper"
-    v-for="{ key, label, hint, type } in fields"
+    v-for="{ key, label, hint, type, items } in parsedFields"
     :key="key"
     v-bind="wrapperProps"
   >
@@ -25,8 +25,22 @@ SPDX-License-Identifier: Apache-2.0
       @update:model-value="v$.fieldData[key].$touch()"
       @blur="v$.fieldData[key].$touch()"
     />
+    <v-select
+      v-if="type === 'select'"
+      v-bind="inputProps"
+      v-model="fieldData[key]"
+      color="primary"
+      item-color="primary"
+      :label="label"
+      :items="items"
+      :hint="hint"
+      :error-messages="getErrorMessages(v$.fieldData[key])"
+      @update:model-value="v$.fieldData[key].$touch()"
+      @blur="v$.fieldData[key].$touch()"
+    />
     <v-textarea
       v-if="type === 'yaml' || type === 'json'"
+      v-bind="inputProps"
       v-model="fieldData[key]"
       color="primary"
       :label="label"
@@ -45,6 +59,9 @@ import {
   requiredIf,
 } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
+import { mapActions } from 'pinia'
+
+import { useCloudProfileStore } from '@/store/cloudProfile'
 
 import {
   withFieldName,
@@ -60,6 +77,7 @@ import {
   isEmpty,
   fromPairs,
   set,
+  get,
 } from '@/lodash'
 
 export default {
@@ -70,7 +88,6 @@ export default {
   props: {
     fields: {
       type: Array,
-      required: false,
     },
     modelValue: {
       type: Object,
@@ -82,11 +99,12 @@ export default {
     },
     wrapperProps: {
       type: Object,
-      required: false,
     },
     inputProps: {
       type: Object,
-      required: false,
+    },
+    cloudProfileName: {
+      type: String,
     },
   },
   emits: [
@@ -144,6 +162,22 @@ export default {
         return [key, this.fieldData[key]]
       }))
     },
+    parsedFields () {
+      return map(this.fields, field => {
+        let items
+        if (Array.isArray(field.values)) {
+          items = field.values
+        } else if (field.values?.cloudprofilePath) {
+          const cloudProfile = this.cloudProfileByName(this.cloudProfileName)
+          const values = get(cloudProfile, field.values.cloudprofilePath)
+          items = map(values, field.values.key)
+        }
+        return {
+          ...field,
+          items,
+        }
+      })
+    },
   },
   watch: {
     fieldData: {
@@ -177,6 +211,9 @@ export default {
     },
   },
   methods: {
+    ...mapActions(useCloudProfileStore, [
+      'cloudProfileByName',
+    ]),
     async onInputTextarea (key, type) {
       set(this.parsedInput, key, {})
       try {
diff --git a/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue b/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue
index a6d63dda70..b4c83c30da 100644
--- a/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue
+++ b/frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue
@@ -192,6 +192,7 @@ SPDX-License-Identifier: Apache-2.0
         wrapper="VCol"
         :wrapper-props="{ cols: '3' }"
         :input-props="{ variant: 'underlined' }"
+        :cloud-profile-name="cloudProfileName"
       />
     </v-row>
   </v-container>

From ec98a0a2686cc1b086482f95ea7ce67756cbb5dd Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Mon, 11 Dec 2023 15:46:53 +0100
Subject: [PATCH 12/21] Removed logger import

---
 backend/lib/services/cloudprofiles.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/backend/lib/services/cloudprofiles.js b/backend/lib/services/cloudprofiles.js
index 1cbf9c56cd..0c02429380 100644
--- a/backend/lib/services/cloudprofiles.js
+++ b/backend/lib/services/cloudprofiles.js
@@ -8,7 +8,6 @@
 
 const { NotFound, Forbidden } = require('http-errors')
 const authorization = require('./authorization')
-const logger = require('../logger')
 const _ = require('lodash')
 const { getCloudProfiles, getVisibleAndNotProtectedSeeds } = require('../cache')
 

From 72208fc0a08e0c185d147aa956e9138e24c6a5b8 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Mon, 11 Dec 2023 16:31:18 +0100
Subject: [PATCH 13/21] updated tests (no longer filter cloudprofiles without
 matching seed)

---
 .../api.cloudprofiles.spec.js.snap            | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/backend/test/acceptance/__snapshots__/api.cloudprofiles.spec.js.snap b/backend/test/acceptance/__snapshots__/api.cloudprofiles.spec.js.snap
index 324e8150d0..4163cc3faf 100644
--- a/backend/test/acceptance/__snapshots__/api.cloudprofiles.spec.js.snap
+++ b/backend/test/acceptance/__snapshots__/api.cloudprofiles.spec.js.snap
@@ -85,6 +85,27 @@ Array [
       "name": "infra1-profileName2",
     },
   },
+  Object {
+    "data": Object {
+      "kubernetes": Object {
+        "versions": Array [
+          Object {
+            "version": "1.9.0",
+          },
+          Object {
+            "version": "1.8.5",
+          },
+        ],
+      },
+      "seedSelector": Object {},
+      "type": "infra2",
+    },
+    "metadata": Object {
+      "cloudProviderKind": "infra2",
+      "displayName": "infra2-profileName",
+      "name": "infra2-profileName",
+    },
+  },
   Object {
     "data": Object {
       "kubernetes": Object {

From 35547f7e305d5234531a1178469759964f33a1d2 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Fri, 1 Mar 2024 18:19:35 +0100
Subject: [PATCH 14/21] updated charts

---
 .../__snapshots__/configmap.spec.js.snap      | 77 +++++++++++++++++++
 .../runtime/dashboard/configmap.spec.js       | 62 ++++++++-------
 charts/gardener-dashboard/values.yaml         | 13 +++-
 3 files changed, 121 insertions(+), 31 deletions(-)

diff --git a/charts/__tests__/gardener-dashboard/runtime/dashboard/__snapshots__/configmap.spec.js.snap b/charts/__tests__/gardener-dashboard/runtime/dashboard/__snapshots__/configmap.spec.js.snap
index f047f5ea39..025943b855 100644
--- a/charts/__tests__/gardener-dashboard/runtime/dashboard/__snapshots__/configmap.spec.js.snap
+++ b/charts/__tests__/gardener-dashboard/runtime/dashboard/__snapshots__/configmap.spec.js.snap
@@ -114,6 +114,17 @@ Object {
 }
 `;
 
+exports[`gardener-dashboard configmap cloudProviderList should render the template with cloudProviderList 1`] = `
+Object {
+  "frontend": Object {
+    "cloudProviderList": Array [
+      "foo",
+      "bar",
+    ],
+  },
+}
+`;
+
 exports[`gardener-dashboard configmap contentSecurityPolicy should render the template with connectSrc containing additional host sources 1`] = `
 Object {
   "contentSecurityPolicy": Object {
@@ -146,6 +157,60 @@ Object {
 }
 `;
 
+exports[`gardener-dashboard configmap customCloudProviders should render the template with customCloudProviders 1`] = `
+Object {
+  "frontend": Object {
+    "customCloudProviders": Object {
+      "fooProvider": Object {
+        "secret": Object {
+          "fields": Array [
+            Object {
+              "hint": "Enter a valid namespace",
+              "key": "namespace",
+              "label": "Namespace",
+              "type": "text",
+              "validators": Object {
+                "required": Object {
+                  "type": "required",
+                },
+              },
+            },
+          ],
+          "help": "#Custom Cloud Provider
+foo",
+        },
+        "shoot": Object {
+          "createFields": Array [
+            Object {
+              "hint": "Select foo value",
+              "key": "selectFoo",
+              "label": "Select Foo",
+              "path": "spec.provider",
+              "type": "select",
+              "validators": Object {
+                "required": Object {
+                  "type": "required",
+                },
+              },
+              "values": Object {
+                "cloudprofilePath": "data.foo",
+                "key": "name",
+              },
+            },
+          ],
+          "specTemplate": Object {
+            "provider": Object {
+              "type": "custom",
+            },
+          },
+        },
+        "zoned": false,
+      },
+    },
+  },
+}
+`;
+
 exports[`gardener-dashboard configmap experimental should render the template with experimental features 1`] = `
 Object {
   "frontend": Object {
@@ -732,3 +797,15 @@ Object {
   },
 }
 `;
+
+exports[`gardener-dashboard configmap vendors should render the template with vendors 1`] = `
+Object {
+  "frontend": Object {
+    "vendors": Object {
+      "foo": Object {
+        "icon": "foo_icon.svg",
+      },
+    },
+  },
+}
+`;
diff --git a/charts/__tests__/gardener-dashboard/runtime/dashboard/configmap.spec.js b/charts/__tests__/gardener-dashboard/runtime/dashboard/configmap.spec.js
index 194c9dc509..a6bb20075a 100644
--- a/charts/__tests__/gardener-dashboard/runtime/dashboard/configmap.spec.js
+++ b/charts/__tests__/gardener-dashboard/runtime/dashboard/configmap.spec.js
@@ -823,44 +823,48 @@ describe('gardener-dashboard', function () {
             dashboard: {
               frontendConfig: {
                 customCloudProviders: {
-                  foo: {
-                    zoned: true,
+                  fooProvider: {
+                    zoned: false,
                     shoot: {
-                      provider: {
-                        type: 'foo'
-                      }
-                    },
-                    secret: {
-                      fields: [
-                        {
-                          key: 'user',
-                          type: 'text'
-                        },
+                      createFields: [
                         {
-                          key: 'password',
-                          type: 'password'
+                          key: 'selectFoo',
+                          path: 'spec.provider',
+                          hint: 'Select foo value',
+                          label: 'Select Foo',
+                          type: 'select',
+                          validators: {
+                            required: {
+                              type: 'required'
+                            }
+                          },
+                          values: {
+                            cloudprofilePath: 'data.foo',
+                            key: 'name'
+                          }
+                        }
+                      ],
+                      specTemplate: {
+                        provider: {
+                          type: 'custom'
                         }
-                      ]
-                    }
-                  },
-                  bar: {
-                    zoned: false,
-                    shoot: {
-                      provider: {
-                        type: 'bar'
                       }
                     },
                     secret: {
                       fields: [
                         {
-                          key: 'user',
-                          type: 'text'
-                        },
-                        {
-                          key: 'password',
-                          type: 'password'
+                          key: 'namespace',
+                          hint: 'Enter a valid namespace',
+                          label: 'Namespace',
+                          type: 'text',
+                          validators: {
+                            required: {
+                              type: 'required'
+                            }
+                          }
                         }
-                      ]
+                      ],
+                      help: '#Custom Cloud Provider\nfoo'
                     }
                   }
                 }
diff --git a/charts/gardener-dashboard/values.yaml b/charts/gardener-dashboard/values.yaml
index 971e720e63..2bb8177513 100644
--- a/charts/gardener-dashboard/values.yaml
+++ b/charts/gardener-dashboard/values.yaml
@@ -366,12 +366,21 @@ global:
       # customCloudProviders:
       #   custom-provider:
       #     zoned: true
-      #     shoot: # shoot template for this provider
-      #       specTemplate:
+      #     shoot:
+      #       specTemplate: # shoot template for this provider
       #         provider:
       #           type: custom-provider
       #         networking:
       #           nodes: ${workerCIDR}
+      #       createFields:
+      #       - key: foo
+      #         path: spec.provider.extra
+      #          hint: Enter Additional data
+      #         label: Additional Information
+      #         type: text
+      #         validators:
+      #           required:
+      #             type: required
       #     secret: # secret dialog
       #       fields:
       #       - key: user

From 0c8e20dcb964a208823451e8c4ad303c2eff858a Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Mon, 4 Mar 2024 16:26:14 +0100
Subject: [PATCH 15/21] Updated documentation

---
 docs/operations/vendors-custom-cps.md | 85 +++++++++++++++++++--------
 1 file changed, 60 insertions(+), 25 deletions(-)

diff --git a/docs/operations/vendors-custom-cps.md b/docs/operations/vendors-custom-cps.md
index e8ba6f4605..20855aa937 100644
--- a/docs/operations/vendors-custom-cps.md
+++ b/docs/operations/vendors-custom-cps.md
@@ -1,62 +1,62 @@
 # Configure Vendors and Custom Cloud Providers
 
 ## Motivation
-Gardener landscape administrators should have the possibility to change icons and name of vendors (cloud providers, image vendors etc.). This enables the administator to adjust vendors and apply company or context specific values. A usage example could be a locally hosted OpenStack infrastructure that should appear as `MyCustomCloud` with a custom icon in the Dashboard so that the user immediately identifies it as `MyCustomCloud` as he might not be famililar with the term `OpenStack`.
+Gardener landscape administrators should have the possibility to change icons and names of vendors (cloud providers, image vendors, etc.). This enables the administrator to adjust vendors and apply company or context-specific values. An example of use could be a locally hosted OpenStack infrastructure that should appear as `MyCustomCloud` with a custom icon in the Dashboard, so that the user immediately identifies it as `MyCustomCloud` as they might not be familiar with the term `OpenStack`.
 
 ## Vendor Configuration
-It is possible to change the name and icon of build-in vendors in the Gardener Dashboard (e.g. aws, ubuntu etc.) when using the [helm chart](https://github.com/gardener/dashboard/blob/master/charts/gardener-dashboard) in the `frontend.vendors` map. You can add a key for each vendor that you want to customize. The following configuration properties are supported:
+It is possible to change the name and icon of built-in vendors in the Gardener Dashboard (e.g., AWS, Ubuntu, etc.) when using the [helm chart](https://github.com/gardener/dashboard/blob/master/charts/gardener-dashboard) in the `frontend.vendors` map. You can add a key for each vendor that you want to customize. The following configuration properties are supported:
 
 | name | description |
 | ---- | ----------- |
 | `name` | Name of the vendor |
-| `icon` | Asset name as defined in the vendor asset map. You can also use [data:](https://developer.mozilla.org/en-US/docs/web/http/basics_of_http/data_urls) scheme for development. For production it is recommended to provide static assets |
+| `icon` | Asset name as defined in the vendor asset map. You can also use the [data:](https://developer.mozilla.org/en-US/docs/web/http/basics_of_http/data_urls) scheme for development. For production, it is recommended to provide static assets |
 
-Besides overwriting built-in vendors, you can also add additonal vendors that the Dashboard does not already support. E.g. additional machine image vendors or a cloud provider that you have defined via [cloud provider configuration](#configure-available-cloud-providers).
+Besides overwriting built-in vendors, you can also add additional vendors that the Dashboard does not already support. For example, additional machine image vendors or a cloud provider that you have defined via [cloud provider configuration](#configure-available-cloud-providers).
 
 ## Configure Available Cloud Providers
-Gardener Dashboard has a list of built-in cloud providers:
+The Gardener Dashboard has a list of built-in cloud providers:
 `'aws', 'azure', 'gcp', 'openstack', 'alicloud', 'metal', 'vsphere', 'hcloud', 'onmetal', 'local'`
 
 The Dashboard renders available cloud providers in the order defined by the list.
-> **_NOTE:_**  A cloud provider is considered `available` if at least one cloud profile as well as a matching seed is defined for a Gardener landscape. If you add custom cloud providers, they will only appear if you have configured these prerequisites in your landscape
+> **_NOTE:_**  A cloud provider is considered `available` if at least one cloud profile is defined for a Gardener landscape. If you add custom cloud providers, they will only appear if you have configured a cloud profile in your landscape.
 
 You can overwrite the list by providing the `frontend.cloudProviderList` array using the [helm chart](https://github.com/gardener/dashboard/blob/master/charts/gardener-dashboard).
-This way you can change the order or hide cloud providers from the Gardener Dashboard by ommiting it in the list. You can also add additional (custom) cloud providers. You can overwrite the appearance of the custom cloud providers via [vendor configuration](#vendor-configuration). You can configure details of the custom cloud provider, see [custom cloud providers](#custom-cloud-providers)
+This way, you can change the order or hide cloud providers from the Gardener Dashboard by omitting them from the list. You can also add additional (custom) cloud providers. You can overwrite the appearance of the custom cloud providers via [vendor configuration](#vendor-configuration). For information on how to configure a custom cloud provider, see [custom cloud providers](#custom-cloud-providers).
 
 ## Custom Cloud Providers
-You can add custom cloud providers and define the secret dialog input values as well as add a default shoot spec where you can provide values that are required for the shoot resource. The values can be configured using the helm chart in the `frontend.customCloudProviders` map. You can add a key for each vendor that you want to customize. The following configuration properties are supported:
+You can add custom cloud providers and define the secret dialog input fields as well as add a default shoot spec where you can provide values that are required for the shoot resource. You can also define input fields that are added to the `Infrastructure Details` section of the create cluster page. These fields can be used if a user needs to provide infrastructure-specific data for a shoot cluster. All values for the custom cloud provider can be configured using the helm chart in the `frontend.customCloudProviders` map. You can add a key for each vendor that you want to customize. The following configuration properties are supported:
 
 | name | description |
 | ---- | ----------- |
-| `zoned` | Defines if this cloud provider is zones. If not provided defaults to `true` |
-| `shoot.specTemplate` | Add default `shoot.spec` template. The provided yaml values are added to each new shoot resource. The worker CIDR can be used as as variable `${workerCIDR}` |
+| `zoned` | Defines if this cloud provider is zoned. If not provided, defaults to `true` |
+| `shoot.specTemplate` | Add default `shoot.spec` template. The provided yaml values are added to each new shoot resource. The worker CIDR can be used as a variable `${workerCIDR}` |
+| `shoot.createFields` | Define infrastructure-specific input fields for the create cluster page. See below for more details. |
 | `secret.fields` | Define secret input fields. See below for more details. If not provided, defaults to plain yaml object input |
 | `secret.help` | `HTML` secret dialog help content |
 
-> **_NOTE:_**  It is currently not possible to add custom DNS Providers. Only infrastructure providers are supported
+> **_NOTE:_**  It is currently not possible to add custom DNS Providers. Only infrastructure providers are supported.
 
-
-
-### Secret Fields
-It is possible to define input fields with data validation to help the user add secret data for this custom cloud provider. The array can contain field definitions with the following properties:
+### Custom Input Fields
+It is possible to define input fields with data validation for the `Infrastructure Details` section on the create cluster page as well as for the infrastructure secret dialog. The array can contain field definitions with the following properties:
 | name | description |
 | ---- | ----------- |
-| `key` | Unique key for input field. Used as secret data key |
+| `key` | Unique key for the input field. Used as the secret data key |
+| `path` | Destination path in shoot spec for create fields |
 | `hint` | Input field hint |
 | `label` | Input field label |
-| `type` | Input field type. Supported values are `text \| password \| json \| yaml` <br /> `text`: Simple plain text input<br /> `password`: Hidden secret data plain text input <br /> `json`: Object data in JSON format<br /> `yaml`: Object data in YAML input |
-| `validators` | Add a key for each validation. Each validator has a `type` property as well as additional properties depending on the type. See below for possible valdation properties |
-| `validationErrors` | For each key defined in `validations` add a key with an error message for the validation |
+| `type` | Input field type. Supported values are `text \| password \| select \| json \| yaml` <br /> `text`: Simple plain text input<br /> `password`: Hidden secret data plain text input <br /> `select`: List of values that the user can select <br /> `json`: Object data in JSON format<br /> `yaml`: Object data in YAML input |
+| `values` | List of values for the select input field `Array` \| `Object`<br /> `Array`: List of values <br />`Object`: `{ cloudprofilePath, key }` - Source path in cloud profile, if object use `key` to map values |
+| `validators` | Add a key for each validation. Each validator has a `type` property as well as additional properties depending on the type. See below for possible validation properties |
+| `validationErrors` | For each key defined in `validations`, add a key with an error message for the validation |
 
-#### Validators
+### Validators
 | type | properties | description |
 | ---- | ---------- | ----------- |
-| `required` | `not`: Optional array of field keys. Makes field required if one of the referenced input fields is empty. If `not` is not provided, the field is always required | Required input field. Use `not` references to ceate *either or* scenarios, e.g. `username / password` *or* `token` is required |
-| `regex` | `value`: JavaScript regex pattern | Input field must match provided pattern. You can define arbitrary validations. e.g. length or specific syntax |
-| `isValidObject` | `none` | Input value must be valid object. Can be used for `json` and `yaml` field types to ensure valid data |
-> **_NOTE:_**  It is currently not possible to define custom input fields on the create cluster page
+| `required` | `not`: Optional array of field keys. Makes field required if one of the referenced input fields is empty. If `not` is not provided, the field is always required | Required input field. Use `not` references to create *either or* scenarios, e.g., `username / password` *or* `token` is required |
+| `regex` | `value`: JavaScript regex pattern | Input field must match the provided pattern. You can define arbitrary validations, e.g., length or specific syntax |
+| `isValidObject` | `none` | Input value must be a valid object. Can be used for `json` and `yaml` field types to ensure valid data |
 
-### Example
+## Example
 A complete custom cloud provider configuration example including required available cloud provider configuration as well as vendor configuration:
 
 ```yaml
@@ -71,6 +71,41 @@ global:
         my-cc:
           zoned: true
           shoot:
+            createFields:
+            - key: extra
+              path: spec.provider.extra
+              hint: Enter Additional data
+              label: Additional Information
+              type: text
+              validators:
+                required:
+                  type: required
+                isNamespace:
+                  type: regex
+                  value: .+.+--.+
+                  message: Must be valid extra data with format a--b
+            - key: cp_select
+              path: spec.provider
+              hint: Select a value from the cloud profile
+              label: Select Value
+              type: select
+              validators:
+                required:
+                  type: required
+              values:
+                cloudprofilePath: data.foo.bar
+                key: name
+            - key: value_Select
+              path: spec.provider
+              hint: Select a predefined value
+              label: Select Value
+              type: select
+              validators:
+                required:
+                  type: required
+              values:
+                - foo
+                - bar
             specTemplate:
               provider:
                 type: my-cc

From 34a42854c9e562c77ea35376f298c1f56174f757 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Tue, 5 Mar 2024 13:33:50 +0100
Subject: [PATCH 16/21] Optimized documentation Support multiple select

---
 docs/operations/vendors-custom-cps.md         | 37 ++++++++++++++-----
 .../src/components/GGenericInputFields.vue    |  3 +-
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/docs/operations/vendors-custom-cps.md b/docs/operations/vendors-custom-cps.md
index 20855aa937..5bc88588b5 100644
--- a/docs/operations/vendors-custom-cps.md
+++ b/docs/operations/vendors-custom-cps.md
@@ -40,14 +40,31 @@ You can add custom cloud providers and define the secret dialog input fields as
 It is possible to define input fields with data validation for the `Infrastructure Details` section on the create cluster page as well as for the infrastructure secret dialog. The array can contain field definitions with the following properties:
 | name | description |
 | ---- | ----------- |
-| `key` | Unique key for the input field. Used as the secret data key |
-| `path` | Destination path in shoot spec for create fields |
-| `hint` | Input field hint |
-| `label` | Input field label |
-| `type` | Input field type. Supported values are `text \| password \| select \| json \| yaml` <br /> `text`: Simple plain text input<br /> `password`: Hidden secret data plain text input <br /> `select`: List of values that the user can select <br /> `json`: Object data in JSON format<br /> `yaml`: Object data in YAML input |
-| `values` | List of values for the select input field `Array` \| `Object`<br /> `Array`: List of values <br />`Object`: `{ cloudprofilePath, key }` - Source path in cloud profile, if object use `key` to map values |
-| `validators` | Add a key for each validation. Each validator has a `type` property as well as additional properties depending on the type. See below for possible validation properties |
-| `validationErrors` | For each key defined in `validations`, add a key with an error message for the validation |
+| `key` | Unique key for the input field. Used as the secret data key. |
+| `path` | Destination path in shoot spec for create fields. |
+| `hint` | Input field hint. |
+| `label` | Input field label. |
+| `type` | Input field type. Supported values are detailed below. |
+| `values` | List of values for the select input field. Details are provided below. |
+| `validators` | Add a key for each validation. Each validator has a `type` property as well as additional properties depending on the type. See below for possible validation properties. |
+| `validationErrors` | For each key defined in `validations`, add a key with an error message for the validation. |
+
+### Type
+Supported input field types include:
+
+- `text`: Simple plain text input.
+- `password`: Hidden secret data plain text input.
+- `select`: List of values that the user can select.
+- `select-multiple`: Allow to select multiple values from a list.
+- `json`: Object data in JSON format.
+- `yaml`: Object data in YAML input.
+
+### Values
+For the `select` and `select-multiple` input field, the list of values can be:
+
+- `Array`: A simple list of values.
+- `Object`: Use `{ cloudprofilePath, key }` - Source path in cloud profile. If an object, use `key` to map values.
+
 
 ### Validators
 | type | properties | description |
@@ -56,6 +73,8 @@ It is possible to define input fields with data validation for the `Infrastructu
 | `regex` | `value`: JavaScript regex pattern | Input field must match the provided pattern. You can define arbitrary validations, e.g., length or specific syntax |
 | `isValidObject` | `none` | Input value must be a valid object. Can be used for `json` and `yaml` field types to ensure valid data |
 
+You can add an optional `message` property to all validators to provide a custom error message.
+
 ## Example
 A complete custom cloud provider configuration example including required available cloud provider configuration as well as vendor configuration:
 
@@ -95,7 +114,7 @@ global:
               values:
                 cloudprofilePath: data.foo.bar
                 key: name
-            - key: value_Select
+            - key: value_select
               path: spec.provider
               hint: Select a predefined value
               label: Select Value
diff --git a/frontend/src/components/GGenericInputFields.vue b/frontend/src/components/GGenericInputFields.vue
index cd8b8a2da7..31ebc1f38e 100644
--- a/frontend/src/components/GGenericInputFields.vue
+++ b/frontend/src/components/GGenericInputFields.vue
@@ -26,7 +26,7 @@ SPDX-License-Identifier: Apache-2.0
       @blur="v$.fieldData[key].$touch()"
     />
     <v-select
-      v-if="type === 'select'"
+      v-if="type === 'select' || type === 'select-multiple'"
       v-bind="inputProps"
       v-model="fieldData[key]"
       color="primary"
@@ -35,6 +35,7 @@ SPDX-License-Identifier: Apache-2.0
       :items="items"
       :hint="hint"
       :error-messages="getErrorMessages(v$.fieldData[key])"
+      :multiple="type === 'select-multiple'"
       @update:model-value="v$.fieldData[key].$touch()"
       @blur="v$.fieldData[key].$touch()"
     />

From 52f7da2816d7904ccd8c7ab9eb8a4802dd989e6f Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Wed, 6 Mar 2024 15:12:22 +0100
Subject: [PATCH 17/21] Further cleanup Fixed gcp secret dialog drag & drop

---
 docs/operations/vendors-custom-cps.md         |  4 +-
 frontend/src/components/GCloudProfile.vue     |  2 +-
 .../src/components/Secrets/GSecretDialog.vue  | 58 ++++++++++---------
 .../Secrets/GSecretDialogAlicloud.vue         | 20 ++-----
 .../components/Secrets/GSecretDialogAws.vue   | 21 ++-----
 .../components/Secrets/GSecretDialogAzure.vue | 22 ++-----
 .../Secrets/GSecretDialogCloudflare.vue       | 20 +++----
 .../components/Secrets/GSecretDialogGcp.vue   | 30 +++-------
 .../Secrets/GSecretDialogGeneric.vue          | 21 +------
 .../Secrets/GSecretDialogHCloud.vue           | 22 ++-----
 .../Secrets/GSecretDialogInfoblox.vue         | 23 ++------
 .../components/Secrets/GSecretDialogMetal.vue | 20 ++-----
 .../Secrets/GSecretDialogNetlify.vue          | 20 +++----
 .../Secrets/GSecretDialogOpenstack.vue        | 34 ++---------
 .../Secrets/GSecretDialogVSphere.vue          | 26 ++-------
 frontend/src/store/cloudProfile/helper.js     | 20 +------
 frontend/src/store/cloudProfile/index.js      |  4 +-
 frontend/src/store/config.js                  |  5 --
 frontend/src/utils/index.js                   |  5 +-
 19 files changed, 98 insertions(+), 279 deletions(-)

diff --git a/docs/operations/vendors-custom-cps.md b/docs/operations/vendors-custom-cps.md
index 5bc88588b5..63b4b7b6c6 100644
--- a/docs/operations/vendors-custom-cps.md
+++ b/docs/operations/vendors-custom-cps.md
@@ -116,9 +116,9 @@ global:
                 key: name
             - key: value_select
               path: spec.provider
-              hint: Select a predefined value
+              hint: Select at least one predefined value
               label: Select Value
-              type: select
+              type: select-multiple
               validators:
                 required:
                   type: required
diff --git a/frontend/src/components/GCloudProfile.vue b/frontend/src/components/GCloudProfile.vue
index 52385864e7..a843f6718d 100644
--- a/frontend/src/components/GCloudProfile.vue
+++ b/frontend/src/components/GCloudProfile.vue
@@ -83,7 +83,7 @@ export default {
       return find(this.cloudProfiles, { metadata: { name: this.modelValue } })
     },
     hint () {
-      if (!this.selectedCloudProfile?.data.seedNames?.length) {
+      if (this.selectedCloudProfile && !this.selectedCloudProfile.data.seedNames?.length) {
         return 'This cloud profile does not have a matching seed. Gardener will not be able to schedule shoots using this cloud profile'
       }
       return undefined
diff --git a/frontend/src/components/Secrets/GSecretDialog.vue b/frontend/src/components/Secrets/GSecretDialog.vue
index 011a17c44b..8987057e4c 100644
--- a/frontend/src/components/Secrets/GSecretDialog.vue
+++ b/frontend/src/components/Secrets/GSecretDialog.vue
@@ -50,7 +50,7 @@ SPDX-License-Identifier: Apache-2.0
               </template>
             </div>
 
-            <div v-if="cloudProfiles.length !== 1 && isInfrastructureSecret">
+            <div v-if="showCloudProfileSelect">
               <g-cloud-profile
                 ref="cloudProfile"
                 v-model="cloudProfileName"
@@ -59,7 +59,9 @@ SPDX-License-Identifier: Apache-2.0
               />
             </div>
 
-            <slot name="secret-slot" />
+            <div ref="bla">
+              <slot name="secret-slot" />
+            </div>
             <g-message
               v-model:message="errorMessage"
               v-model:detailed-message="detailedErrorMessage"
@@ -300,9 +302,34 @@ export default {
     isDnsProviderSecret () {
       return includes(this.dnsProviderTypes, this.vendor)
     },
+    showCloudProfileSelect () {
+      if (!this.isInfrastructureSecret) {
+        return false
+      }
+      if (this.cloudProfiles.length > 1) {
+        return true
+      }
+      if (this.cloudProfiles.length === 1 && !this.cloudProfiles[0].data.seedNames?.length) {
+        return true
+      }
+      return false
+    },
   },
   mounted () {
-    this.reset()
+    if (this.isCreateMode) {
+      this.name = `my-${this.vendor}-secret`
+
+      if (this.cloudProfiles.length === 1) {
+        this.cloudProfileName = get(head(this.cloudProfiles), 'metadata.name')
+      } else {
+        this.cloudProfileName = undefined
+      }
+
+      setDelayedInputFocus(this, 'name')
+    } else {
+      this.name = get(this.secret, 'metadata.name')
+      this.cloudProfileName = get(this.secret, 'metadata.cloudProfileName')
+    }
   },
   methods: {
     ...mapActions(useSecretStore, [
@@ -373,31 +400,6 @@ export default {
         return this.updateSecret({ metadata, data: this.data })
       }
     },
-    reset () {
-      this.v$.$reset()
-      const cloudProfileRef = this.$refs.cloudProfile
-      if (cloudProfileRef) {
-        cloudProfileRef.v$.$reset()
-      }
-
-      if (this.isCreateMode) {
-        this.name = `my-${this.vendor}-secret`
-
-        if (this.cloudProfiles.length === 1) {
-          this.cloudProfileName = get(head(this.cloudProfiles), 'metadata.name')
-        } else {
-          this.cloudProfileName = undefined
-        }
-
-        setDelayedInputFocus(this, 'name')
-      } else {
-        this.name = get(this.secret, 'metadata.name')
-        this.cloudProfileName = get(this.secret, 'metadata.cloudProfileName')
-      }
-
-      this.errorMessage = undefined
-      this.detailedMessage = undefined
-    },
     getErrorMessages,
   },
 }
diff --git a/frontend/src/components/Secrets/GSecretDialogAlicloud.vue b/frontend/src/components/Secrets/GSecretDialogAlicloud.vue
index 092016f91f..f21737056d 100644
--- a/frontend/src/components/Secrets/GSecretDialogAlicloud.vue
+++ b/frontend/src/components/Secrets/GSecretDialogAlicloud.vue
@@ -206,24 +206,12 @@ export default {
       return !this.secret
     },
   },
-  watch: {
-    value: function (value) {
-      if (value) {
-        this.reset()
-      }
-    },
+  mounted () {
+    if (!this.isCreateMode) {
+      setDelayedInputFocus(this, 'accessKeyId')
+    }
   },
   methods: {
-    reset () {
-      this.v$.$reset()
-
-      this.accessKeyId = ''
-      this.accessKeySecret = ''
-
-      if (!this.isCreateMode) {
-        setDelayedInputFocus(this, 'accessKeyId')
-      }
-    },
     getErrorMessages,
   },
 }
diff --git a/frontend/src/components/Secrets/GSecretDialogAws.vue b/frontend/src/components/Secrets/GSecretDialogAws.vue
index 6ef5429d9c..498a9f6097 100644
--- a/frontend/src/components/Secrets/GSecretDialogAws.vue
+++ b/frontend/src/components/Secrets/GSecretDialogAws.vue
@@ -265,25 +265,12 @@ export default {
       return !this.secret
     },
   },
-  watch: {
-    value: function (value) {
-      if (value) {
-        this.reset()
-      }
-    },
+  mounted () {
+    if (!this.isCreateMode) {
+      setDelayedInputFocus(this, 'accessKeyId')
+    }
   },
   methods: {
-    reset () {
-      this.v$.$reset()
-
-      this.accessKeyId = ''
-      this.secretAccessKey = ''
-      this.awsRegion = ''
-
-      if (!this.isCreateMode) {
-        setDelayedInputFocus(this, 'accessKeyId')
-      }
-    },
     getErrorMessages,
   },
 }
diff --git a/frontend/src/components/Secrets/GSecretDialogAzure.vue b/frontend/src/components/Secrets/GSecretDialogAzure.vue
index 966fab6d53..8252ca3fcd 100644
--- a/frontend/src/components/Secrets/GSecretDialogAzure.vue
+++ b/frontend/src/components/Secrets/GSecretDialogAzure.vue
@@ -178,26 +178,12 @@ export default {
       return !this.secret
     },
   },
-  watch: {
-    value: function (value) {
-      if (value) {
-        this.reset()
-      }
-    },
+  mounted () {
+    if (!this.isCreateMode) {
+      setDelayedInputFocus(this, 'clientId')
+    }
   },
   methods: {
-    reset () {
-      this.v$.$reset()
-
-      this.clientId = ''
-      this.clientSecret = ''
-      this.subscriptionId = ''
-      this.tenantId = ''
-
-      if (!this.isCreateMode) {
-        setDelayedInputFocus(this, 'clientId')
-      }
-    },
     getErrorMessages,
   },
 }
diff --git a/frontend/src/components/Secrets/GSecretDialogCloudflare.vue b/frontend/src/components/Secrets/GSecretDialogCloudflare.vue
index 7f091f8579..9b71074c26 100644
--- a/frontend/src/components/Secrets/GSecretDialogCloudflare.vue
+++ b/frontend/src/components/Secrets/GSecretDialogCloudflare.vue
@@ -15,6 +15,7 @@ SPDX-License-Identifier: Apache-2.0
     <template #secret-slot>
       <div>
         <v-text-field
+          ref="apiToken"
           v-model="apiToken"
           color="primary"
           label="Cloudflare API Token"
@@ -64,7 +65,10 @@ import { required } from '@vuelidate/validators'
 import GSecretDialog from '@/components/Secrets/GSecretDialog'
 import GExternalLink from '@/components/GExternalLink'
 
-import { getErrorMessages } from '@/utils'
+import {
+  getErrorMessages,
+  setDelayedInputFocus,
+} from '@/utils'
 import { withFieldName } from '@/utils/validators'
 
 export default {
@@ -120,18 +124,12 @@ export default {
       return !this.secret
     },
   },
-  watch: {
-    value: function (value) {
-      if (value) {
-        this.reset()
-      }
-    },
+  mounted () {
+    if (!this.isCreateMode) {
+      setDelayedInputFocus(this, 'apiToken')
+    }
   },
   methods: {
-    reset () {
-      this.v$.$reset()
-      this.apiToken = ''
-    },
     getErrorMessages,
   },
 }
diff --git a/frontend/src/components/Secrets/GSecretDialogGcp.vue b/frontend/src/components/Secrets/GSecretDialogGcp.vue
index e5e1629480..2c8bec4f65 100644
--- a/frontend/src/components/Secrets/GSecretDialogGcp.vue
+++ b/frontend/src/components/Secrets/GSecretDialogGcp.vue
@@ -151,31 +151,15 @@ export default {
       return !this.secret
     },
   },
-  watch: {
-    value: function (value) {
-      if (value) {
-        this.reset()
-
-        // Mounted does not guarantee that all child components have also been mounted.
-        // In addition, the serviceAccountKey ref is within a slot of a v-dialog, which is by default lazily loaded.
-        // We initialize the drop handler once the dialog is shown by watching the `value`.
-        // We use $nextTick to make sure the entire view has been rendered
-        this.$nextTick(() => {
-          this.initializeDropHandlerOnce()
-        })
-      }
-    },
+  mounted () {
+    if (!this.isCreateMode) {
+      setDelayedInputFocus(this, 'accessKeyId')
+    }
+    this.$nextTick(() => {
+      this.initializeDropHandlerOnce()
+    })
   },
   methods: {
-    reset () {
-      this.v$.$reset()
-
-      this.serviceAccountKey = ''
-
-      if (!this.isCreateMode) {
-        setDelayedInputFocus(this, 'serviceAccountKey')
-      }
-    },
     initializeDropHandlerOnce () {
       if (this.dropHandlerInitialized) {
         return
diff --git a/frontend/src/components/Secrets/GSecretDialogGeneric.vue b/frontend/src/components/Secrets/GSecretDialogGeneric.vue
index 080e6b0dd4..390602927b 100644
--- a/frontend/src/components/Secrets/GSecretDialogGeneric.vue
+++ b/frontend/src/components/Secrets/GSecretDialogGeneric.vue
@@ -17,6 +17,7 @@ SPDX-License-Identifier: Apache-2.0
         <g-generic-input-fields
           v-model="customCloudProviderData"
           :fields="customCloudProviderFields"
+          :input-props="{ variant: 'underlined' }"
         />
       </template>
     </template>
@@ -49,10 +50,7 @@ import { useConfigStore } from '@/store/config'
 import GSecretDialog from '@/components/Secrets/GSecretDialog'
 import GGenericInputFields from '@/components/GGenericInputFields'
 
-import {
-  setDelayedInputFocus,
-  transformHtml,
-} from '@/utils'
+import { transformHtml } from '@/utils'
 
 import { get } from '@/lodash'
 
@@ -118,7 +116,7 @@ export default {
             },
             isYAML: {
               type: 'isValidObject',
-              message: 'You need to enter secret data as YAML key- value pairs',
+              message: 'You need to enter secret data as YAML key-value pairs',
             },
           },
         },
@@ -131,19 +129,6 @@ export default {
       return !this.secret
     },
   },
-  methods: {
-    reset () {
-      this.v$.$reset()
-
-      this.customCloudProviderParsedData = {}
-      this.customCloudProviderData = {}
-      this.showSecrets = {}
-
-      if (!this.isCreateMode) {
-        setDelayedInputFocus(this, 'textAreaData')
-      }
-    },
-  },
 }
 </script>
 
diff --git a/frontend/src/components/Secrets/GSecretDialogHCloud.vue b/frontend/src/components/Secrets/GSecretDialogHCloud.vue
index 39219f45a3..34c2a67d9d 100644
--- a/frontend/src/components/Secrets/GSecretDialogHCloud.vue
+++ b/frontend/src/components/Secrets/GSecretDialogHCloud.vue
@@ -112,26 +112,12 @@ export default {
       return !this.secret
     },
   },
-  watch: {
-    value: function (value) {
-      if (value) {
-        this.reset()
-      }
-    },
+  mounted () {
+    if (!this.isCreateMode) {
+      setDelayedInputFocus(this, 'hcloudToken')
+    }
   },
   methods: {
-    reset () {
-      this.v$.$reset()
-
-      this.hcloudToken = ''
-
-      if (!this.isCreateMode) {
-        if (this.secret.data) {
-          this.hcloudToken = this.secret.data.hcloudToken
-        }
-        setDelayedInputFocus(this, 'hcloudToken')
-      }
-    },
     getErrorMessages,
   },
 }
diff --git a/frontend/src/components/Secrets/GSecretDialogInfoblox.vue b/frontend/src/components/Secrets/GSecretDialogInfoblox.vue
index 63dfeaab77..4fd44c51ef 100644
--- a/frontend/src/components/Secrets/GSecretDialogInfoblox.vue
+++ b/frontend/src/components/Secrets/GSecretDialogInfoblox.vue
@@ -119,27 +119,12 @@ export default {
       return !this.secret
     },
   },
-  watch: {
-    value: function (value) {
-      if (value) {
-        this.reset()
-      }
-    },
+  mounted () {
+    if (!this.isCreateMode) {
+      setDelayedInputFocus(this, 'infobloxUsername')
+    }
   },
   methods: {
-    reset () {
-      this.v$.$reset()
-
-      this.infobloxUsername = ''
-      this.infobloxPassword = ''
-
-      if (!this.isCreateMode) {
-        if (this.secret.data) {
-          this.infobloxUsername = this.secret.data.USERNAME
-        }
-        setDelayedInputFocus(this, 'infobloxUsername')
-      }
-    },
     getErrorMessages,
   },
 }
diff --git a/frontend/src/components/Secrets/GSecretDialogMetal.vue b/frontend/src/components/Secrets/GSecretDialogMetal.vue
index 5acb7e8515..a86ae7042b 100644
--- a/frontend/src/components/Secrets/GSecretDialogMetal.vue
+++ b/frontend/src/components/Secrets/GSecretDialogMetal.vue
@@ -124,24 +124,12 @@ export default {
       return !this.secret
     },
   },
-  watch: {
-    value: function (value) {
-      if (value) {
-        this.reset()
-      }
-    },
+  mounted () {
+    if (!this.isCreateMode) {
+      setDelayedInputFocus(this, 'apiUrl')
+    }
   },
   methods: {
-    reset () {
-      this.v$.$reset()
-
-      this.apiHmac = ''
-      this.apiUrl = ''
-
-      if (!this.isCreateMode) {
-        setDelayedInputFocus(this, 'apiUrl')
-      }
-    },
     getErrorMessages,
   },
 }
diff --git a/frontend/src/components/Secrets/GSecretDialogNetlify.vue b/frontend/src/components/Secrets/GSecretDialogNetlify.vue
index 9df530c21b..7c402b6e4c 100644
--- a/frontend/src/components/Secrets/GSecretDialogNetlify.vue
+++ b/frontend/src/components/Secrets/GSecretDialogNetlify.vue
@@ -55,7 +55,10 @@ import { required } from '@vuelidate/validators'
 import GSecretDialog from '@/components/Secrets/GSecretDialog'
 import GExternalLink from '@/components/GExternalLink'
 
-import { getErrorMessages } from '@/utils'
+import {
+  getErrorMessages,
+  setDelayedInputFocus,
+} from '@/utils'
 import { withFieldName } from '@/utils/validators'
 
 export default {
@@ -114,19 +117,12 @@ export default {
       return !this.secret
     },
   },
-  watch: {
-    value: function (value) {
-      if (value) {
-        this.reset()
-      }
-    },
+  mounted () {
+    if (!this.isCreateMode) {
+      setDelayedInputFocus(this, 'apiToken')
+    }
   },
   methods: {
-    reset () {
-      this.v$.$reset()
-
-      this.apiToken = ''
-    },
     getErrorMessages,
   },
 }
diff --git a/frontend/src/components/Secrets/GSecretDialogOpenstack.vue b/frontend/src/components/Secrets/GSecretDialogOpenstack.vue
index 1542521faf..50f7bfeb8a 100644
--- a/frontend/src/components/Secrets/GSecretDialogOpenstack.vue
+++ b/frontend/src/components/Secrets/GSecretDialogOpenstack.vue
@@ -163,15 +163,12 @@ SPDX-License-Identifier: Apache-2.0
 </template>
 
 <script>
-import { mapActions } from 'pinia'
 import { useVuelidate } from '@vuelidate/core'
 import {
   required,
   requiredIf,
 } from '@vuelidate/validators'
 
-import { useCloudProfileStore } from '@/store/cloudProfile'
-
 import GSecretDialog from '@/components/Secrets/GSecretDialog'
 import GExternalLink from '@/components/GExternalLink'
 
@@ -322,11 +319,6 @@ export default {
     },
   },
   watch: {
-    value: function (value) {
-      if (value) {
-        this.reset()
-      }
-    },
     authenticationMethod () {
       this.username = undefined
       this.password = undefined
@@ -336,28 +328,12 @@ export default {
       this.v$.$reset()
     },
   },
+  mounted () {
+    if (!this.isCreateMode) {
+      setDelayedInputFocus(this, 'domainName')
+    }
+  },
   methods: {
-    ...mapActions(useCloudProfileStore, ['cloudProfileByName']),
-    reset () {
-      this.v$.$reset()
-
-      this.domainName = ''
-      this.tenantName = ''
-      this.username = ''
-      this.password = ''
-      this.authURL = ''
-      this.applicationCredentialID = ''
-      this.applicationCredentialName = ''
-      this.applicationCredentialSecret = ''
-
-      if (!this.isCreateMode) {
-        if (this.secret.data) {
-          this.domainName = this.secret.data.domainName
-          this.tenantName = this.secret.data.tenantName
-        }
-        setDelayedInputFocus(this, 'domainName')
-      }
-    },
     getErrorMessages,
   },
 }
diff --git a/frontend/src/components/Secrets/GSecretDialogVSphere.vue b/frontend/src/components/Secrets/GSecretDialogVSphere.vue
index ea8208c0ee..baf8c3c256 100644
--- a/frontend/src/components/Secrets/GSecretDialogVSphere.vue
+++ b/frontend/src/components/Secrets/GSecretDialogVSphere.vue
@@ -175,30 +175,12 @@ export default {
       return !this.secret
     },
   },
-  watch: {
-    value: function (value) {
-      if (value) {
-        this.reset()
-      }
-    },
+  mounted () {
+    if (!this.isCreateMode) {
+      setDelayedInputFocus(this, 'vsphereUsername')
+    }
   },
   methods: {
-    reset () {
-      this.v$.$reset()
-
-      this.vsphereUsername = ''
-      this.vspherePassword = ''
-      this.nsxtUsername = ''
-      this.nsxtPassword = ''
-
-      if (!this.isCreateMode) {
-        if (this.secret.data) {
-          this.vsphereUsername = this.secret.data.vsphereUsername
-          this.nsxtUsername = this.secret.data.nsxtUsername
-        }
-        setDelayedInputFocus(this, 'vsphereUsername')
-      }
-    },
     getErrorMessages,
   },
 }
diff --git a/frontend/src/store/cloudProfile/helper.js b/frontend/src/store/cloudProfile/helper.js
index 5cfd1da62a..dbbadb9503 100644
--- a/frontend/src/store/cloudProfile/helper.js
+++ b/frontend/src/store/cloudProfile/helper.js
@@ -29,7 +29,7 @@ export function matchesPropertyOrEmpty (path, srcValue) {
   }
 }
 
-export function vendorNameFromImageName (imageName) {
+export function vendorNameFromMachineImageName (imageName) {
   const lowerCaseName = lowerCase(imageName)
   if (lowerCaseName.includes('coreos')) {
     return 'coreos'
@@ -45,24 +45,6 @@ export function vendorNameFromImageName (imageName) {
     return 'flatcar'
   } else if (lowerCaseName.includes('memoryone') || lowerCaseName.includes('vsmp')) {
     return 'memoryone'
-  } else if (lowerCaseName.includes('aws-route53')) {
-    return 'aws-route53'
-  } else if (lowerCaseName.includes('azure-dns')) {
-    return 'azure-dns'
-  } else if (lowerCaseName.includes('azure-private-dns')) {
-    return 'azure-private-dns'
-  } else if (lowerCaseName.includes('google-clouddns')) {
-    return 'google-clouddns'
-  } else if (lowerCaseName.includes('openstack-designate')) {
-    return 'openstack-designate'
-  } else if (lowerCaseName.includes('alicloud-dns')) {
-    return 'alicloud-dns'
-  } else if (lowerCaseName.includes('cloudflare-dns')) {
-    return 'cloudflare-dns'
-  } else if (lowerCaseName.includes('infoblox-dns')) {
-    return 'infoblox-dns'
-  } else if (lowerCaseName.includes('netlify-dns')) {
-    return 'netlify-dns'
   }
   return undefined
 }
diff --git a/frontend/src/store/cloudProfile/index.js b/frontend/src/store/cloudProfile/index.js
index 10150b1de4..436398f50e 100644
--- a/frontend/src/store/cloudProfile/index.js
+++ b/frontend/src/store/cloudProfile/index.js
@@ -32,7 +32,7 @@ import { useSeedStore } from '../seed'
 
 import {
   matchesPropertyOrEmpty,
-  vendorNameFromImageName,
+  vendorNameFromMachineImageName,
   findVendorHint,
   decorateClassificationObject,
   firstItemMatchingVersionClassification,
@@ -386,7 +386,7 @@ export const useCloudProfileStore = defineStore('cloudProfile', () => {
       })
 
       const name = machineImage.name
-      const vendorName = vendorNameFromImageName(machineImage.name)
+      const vendorName = vendorNameFromMachineImageName(machineImage.name)
       const displayName = get(configStore, ['vendors', vendorName, 'name'], vendorName)
       const vendorHint = findVendorHint(configStore.vendorHints, vendorName)
 
diff --git a/frontend/src/store/config.js b/frontend/src/store/config.js
index 4a7785b6f8..b191d9140e 100644
--- a/frontend/src/store/config.js
+++ b/frontend/src/store/config.js
@@ -258,10 +258,6 @@ export const useConfigStore = defineStore('config', () => {
     return features.value?.projectTerminalShortcutsEnabled === true
   })
 
-  const isShootForceDeletionEnabled = computed(() => {
-    return features.value?.shootForceDeletionEnabled === true
-  })
-
   const throttleDelayPerCluster = computed(() => {
     return experimental.value?.throttleDelayPerCluster ?? 10
   })
@@ -457,7 +453,6 @@ export const useConfigStore = defineStore('config', () => {
     serviceAccountDefaultTokenExpiration,
     isTerminalEnabled,
     isProjectTerminalShortcutsEnabled,
-    isShootForceDeletionEnabled,
     throttleDelayPerCluster,
     alertBannerMessage,
     alertBannerType,
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index fe5795c9f6..187f9d5501 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -83,9 +83,8 @@ export function handleTextFieldDrop (textField, fileTypePattern, onDrop = () =>
     event.dataTransfer.dropEffect = 'copy'
   }
 
-  const textarea = textField.$refs['input-slot']
-  textarea.addEventListener('dragover', dragOver, false)
-  textarea.addEventListener('drop', drop, false)
+  textField.addEventListener('dragover', dragOver, false)
+  textField.addEventListener('drop', drop, false)
 }
 
 export function getErrorMessages (property) {

From 0e8890867fd3f2923f86dbc4f9484928b8434199 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Thu, 25 Jul 2024 10:36:30 +0200
Subject: [PATCH 18/21] Fixed helm template. & tests

---
 .../api.cloudprofiles.spec.js.snap            | 21 ++++++++
 .../__snapshots__/configmap.spec.js.snap      | 48 +++++++++----------
 .../templates/dashboard/deployment.yaml       |  1 +
 3 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/backend/test/acceptance/__snapshots__/api.cloudprofiles.spec.js.snap b/backend/test/acceptance/__snapshots__/api.cloudprofiles.spec.js.snap
index 612aaad4a8..468d29bb46 100644
--- a/backend/test/acceptance/__snapshots__/api.cloudprofiles.spec.js.snap
+++ b/backend/test/acceptance/__snapshots__/api.cloudprofiles.spec.js.snap
@@ -85,6 +85,27 @@ exports[`api cloudprofiles should return all cloudprofiles 2`] = `
       "name": "infra1-profileName2",
     },
   },
+  {
+    "data": {
+      "kubernetes": {
+        "versions": [
+          {
+            "version": "1.9.0",
+          },
+          {
+            "version": "1.8.5",
+          },
+        ],
+      },
+      "seedSelector": {},
+      "type": "infra2",
+    },
+    "metadata": {
+      "cloudProviderKind": "infra2",
+      "displayName": "infra2-profileName",
+      "name": "infra2-profileName",
+    },
+  },
   {
     "data": {
       "kubernetes": {
diff --git a/charts/__tests__/gardener-dashboard/runtime/dashboard/__snapshots__/configmap.spec.js.snap b/charts/__tests__/gardener-dashboard/runtime/dashboard/__snapshots__/configmap.spec.js.snap
index 27c982c4f4..df737dba69 100644
--- a/charts/__tests__/gardener-dashboard/runtime/dashboard/__snapshots__/configmap.spec.js.snap
+++ b/charts/__tests__/gardener-dashboard/runtime/dashboard/__snapshots__/configmap.spec.js.snap
@@ -115,9 +115,9 @@ exports[`gardener-dashboard configmap branding should render the template 1`] =
 `;
 
 exports[`gardener-dashboard configmap cloudProviderList should render the template with cloudProviderList 1`] = `
-Object {
-  "frontend": Object {
-    "cloudProviderList": Array [
+{
+  "frontend": {
+    "cloudProviderList": [
       "foo",
       "bar",
     ],
@@ -158,19 +158,19 @@ exports[`gardener-dashboard configmap controlPlaneHighAvailabilityHelp should re
 `;
 
 exports[`gardener-dashboard configmap customCloudProviders should render the template with customCloudProviders 1`] = `
-Object {
-  "frontend": Object {
-    "customCloudProviders": Object {
-      "fooProvider": Object {
-        "secret": Object {
-          "fields": Array [
-            Object {
+{
+  "frontend": {
+    "customCloudProviders": {
+      "fooProvider": {
+        "secret": {
+          "fields": [
+            {
               "hint": "Enter a valid namespace",
               "key": "namespace",
               "label": "Namespace",
               "type": "text",
-              "validators": Object {
-                "required": Object {
+              "validators": {
+                "required": {
                   "type": "required",
                 },
               },
@@ -179,27 +179,27 @@ Object {
           "help": "#Custom Cloud Provider
 foo",
         },
-        "shoot": Object {
-          "createFields": Array [
-            Object {
+        "shoot": {
+          "createFields": [
+            {
               "hint": "Select foo value",
               "key": "selectFoo",
               "label": "Select Foo",
               "path": "spec.provider",
               "type": "select",
-              "validators": Object {
-                "required": Object {
+              "validators": {
+                "required": {
                   "type": "required",
                 },
               },
-              "values": Object {
+              "values": {
                 "cloudprofilePath": "data.foo",
                 "key": "name",
               },
             },
           ],
-          "specTemplate": Object {
-            "provider": Object {
+          "specTemplate": {
+            "provider": {
               "type": "custom",
             },
           },
@@ -803,10 +803,10 @@ exports[`gardener-dashboard configmap vendorHints should render the template 1`]
 `;
 
 exports[`gardener-dashboard configmap vendors should render the template with vendors 1`] = `
-Object {
-  "frontend": Object {
-    "vendors": Object {
-      "foo": Object {
+{
+  "frontend": {
+    "vendors": {
+      "foo": {
         "icon": "foo_icon.svg",
       },
     },
diff --git a/charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml b/charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml
index 34e3d7cca4..0df4b9a46c 100644
--- a/charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml
+++ b/charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml
@@ -86,6 +86,7 @@ spec:
         configMap:
           name: dashboard-vendor-assets
           defaultMode: 0444
+      {{- end }}
       {{- if .Values.global.dashboard.oidc }}
       - name: gardener-dashboard-oidc
         secret:

From a5ba4cc1e2081150344eb24db8050ba50f72293d Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Fri, 9 Aug 2024 17:43:00 +0200
Subject: [PATCH 19/21] Some docu fixes

---
 docs/operations/vendors-custom-cps.md | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/docs/operations/vendors-custom-cps.md b/docs/operations/vendors-custom-cps.md
index 63b4b7b6c6..1c6d7c9a61 100644
--- a/docs/operations/vendors-custom-cps.md
+++ b/docs/operations/vendors-custom-cps.md
@@ -4,14 +4,14 @@
 Gardener landscape administrators should have the possibility to change icons and names of vendors (cloud providers, image vendors, etc.). This enables the administrator to adjust vendors and apply company or context-specific values. An example of use could be a locally hosted OpenStack infrastructure that should appear as `MyCustomCloud` with a custom icon in the Dashboard, so that the user immediately identifies it as `MyCustomCloud` as they might not be familiar with the term `OpenStack`.
 
 ## Vendor Configuration
-It is possible to change the name and icon of built-in vendors in the Gardener Dashboard (e.g., AWS, Ubuntu, etc.) when using the [helm chart](https://github.com/gardener/dashboard/blob/master/charts/gardener-dashboard) in the `frontend.vendors` map. You can add a key for each vendor that you want to customize. The following configuration properties are supported:
+It is possible to change the name and icon of built-in vendors in the Gardener Dashboard (e.g., AWS, Ubuntu, etc.) when using the [helm chart](https://github.com/gardener/dashboard/blob/master/charts/gardener-dashboard) in the `frontend.vendors` map. You can add a key for each vendor that you want to customize. The key equals the vendor type. The following configuration properties are supported:
 
 | name | description |
 | ---- | ----------- |
-| `name` | Name of the vendor |
+| `name` | Display name of the vendor |
 | `icon` | Asset name as defined in the vendor asset map. You can also use the [data:](https://developer.mozilla.org/en-US/docs/web/http/basics_of_http/data_urls) scheme for development. For production, it is recommended to provide static assets |
 
-Besides overwriting built-in vendors, you can also add additional vendors that the Dashboard does not already support. For example, additional machine image vendors or a cloud provider that you have defined via [cloud provider configuration](#configure-available-cloud-providers).
+Besides overwriting built-in vendors, you can also add additional vendors that the Dashboard does not (yet) have built-in support for. For example, additional machine image vendors or a cloud provider that you have defined via [cloud provider configuration](#configure-available-cloud-providers).
 
 ## Configure Available Cloud Providers
 The Gardener Dashboard has a list of built-in cloud providers:
@@ -24,7 +24,8 @@ You can overwrite the list by providing the `frontend.cloudProviderList` array u
 This way, you can change the order or hide cloud providers from the Gardener Dashboard by omitting them from the list. You can also add additional (custom) cloud providers. You can overwrite the appearance of the custom cloud providers via [vendor configuration](#vendor-configuration). For information on how to configure a custom cloud provider, see [custom cloud providers](#custom-cloud-providers).
 
 ## Custom Cloud Providers
-You can add custom cloud providers and define the secret dialog input fields as well as add a default shoot spec where you can provide values that are required for the shoot resource. You can also define input fields that are added to the `Infrastructure Details` section of the create cluster page. These fields can be used if a user needs to provide infrastructure-specific data for a shoot cluster. All values for the custom cloud provider can be configured using the helm chart in the `frontend.customCloudProviders` map. You can add a key for each vendor that you want to customize. The following configuration properties are supported:
+Custom Cloud Providers are provider types already suppored by Gardener (Gardener Provider Extension exists) but that are not (yet) built into the Dashboard.
+You can add custom cloud providers and define the secret dialog input fields as well as add a default shoot spec where you can provide values that are required for the shoot resource. You can also define input fields that are added to the `Infrastructure Details` section of the create cluster page. These fields can be used if a user needs to provide infrastructure-specific data for a shoot cluster. All values for the custom cloud provider can be configured using the helm chart in the `frontend.customCloudProviders` map. You can add a key for each vendor that you want to customize. The key equals the custom cloud provider type. The following configuration properties are supported:
 
 | name | description |
 | ---- | ----------- |
@@ -40,8 +41,8 @@ You can add custom cloud providers and define the secret dialog input fields as
 It is possible to define input fields with data validation for the `Infrastructure Details` section on the create cluster page as well as for the infrastructure secret dialog. The array can contain field definitions with the following properties:
 | name | description |
 | ---- | ----------- |
-| `key` | Unique key for the input field. Used as the secret data key. |
-| `path` | Destination path in shoot spec for create fields. |
+| `key` | Unique key for the input field. Used as the secret data key if defined as part of infrastructure secret dialog. |
+| `path` | Destination path in shoot spec for create fields. Only required for `Infrastructure Details` section. |
 | `hint` | Input field hint. |
 | `label` | Input field label. |
 | `type` | Input field type. Supported values are detailed below. |
@@ -63,13 +64,14 @@ Supported input field types include:
 For the `select` and `select-multiple` input field, the list of values can be:
 
 - `Array`: A simple list of values.
-- `Object`: Use `{ cloudprofilePath, key }` - Source path in cloud profile. If an object, use `key` to map values.
+- `Object`: Use `{ cloudprofilePath, key }` - Source path in the cloud profile. If an object, use `key` to map values.
 
 
 ### Validators
 | type | properties | description |
 | ---- | ---------- | ----------- |
-| `required` | `not`: Optional array of field keys. Makes field required if one of the referenced input fields is empty. If `not` is not provided, the field is always required | Required input field. Use `not` references to create *either or* scenarios, e.g., `username / password` *or* `token` is required |
+| `required` | `none` | Required input field |
+| `requiredIf` | `not`: Optional array of field keys. Makes field required if one of the referenced input fields is empty. | Depends on other input field if required or not. Use `not` references to create *either or* scenarios, e.g., `username / password` *or* `token` is required |
 | `regex` | `value`: JavaScript regex pattern | Input field must match the provided pattern. You can define arbitrary validations, e.g., length or specific syntax |
 | `isValidObject` | `none` | Input value must be a valid object. Can be used for `json` and `yaml` field types to ensure valid data |
 
@@ -227,6 +229,6 @@ global:
 ```
 
 ## Vendor assets
-In the above example, the vendor icon is referenced as static asset. Static vendor assets can be provided in the [assets](https://github.com/gardener/dashboard/tree/master/frontend/public/static/vendor-assets) folder when using the [helm chart](https://github.com/gardener/dashboard/blob/master/charts/gardener-dashboard) in the `frontendConfig.vendorAssets` map.
+In the above example, the vendor icon is referenced as static asset. Static vendor assets can be provided in the `static/vendor-assets` folder using in the `frontendConfig.vendorAssets` map.
 
-The files have to be encoded as base64 for the chart. For more information, see [Logos and Icons](customization.md#logos-and-icons) section of customization documentation.
+The files have to be encoded as base64 for the chart. For more information on how to provide assets using the chart, see [Logos and Icons](customization.md#logos-and-icons) section of customization documentation.

From c8911c3ff1c3fa2f421a33e61e98d7c47a55536d Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Mon, 12 Aug 2024 14:08:38 +0200
Subject: [PATCH 20/21] Some minor fixes

---
 frontend/src/components/GCloudProfile.vue                    | 2 +-
 .../components/NewShoot/GNewShootSelectInfrastructure.vue    | 1 -
 frontend/src/components/Secrets/GSecretDialog.vue            | 5 +----
 frontend/src/components/Secrets/GSecretDialogCloudflare.vue  | 1 -
 4 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/GCloudProfile.vue b/frontend/src/components/GCloudProfile.vue
index f819b4a337..5e5a44954a 100644
--- a/frontend/src/components/GCloudProfile.vue
+++ b/frontend/src/components/GCloudProfile.vue
@@ -93,7 +93,7 @@ export default {
       if (this.selectedCloudProfile && !this.selectedCloudProfile.data.seedNames?.length) {
         return 'This cloud profile does not have a matching seed. Gardener will not be able to schedule shoots using this cloud profile'
       }
-      return undefined
+      return ''
     },
   },
   methods: {
diff --git a/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue b/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
index 1ad4891188..1bcfba8890 100644
--- a/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
+++ b/frontend/src/components/NewShoot/GNewShootSelectInfrastructure.vue
@@ -30,5 +30,4 @@ const { providerType } = useShootContext()
 function setProviderType (value) {
   providerType.value = value
 }
-
 </script>
diff --git a/frontend/src/components/Secrets/GSecretDialog.vue b/frontend/src/components/Secrets/GSecretDialog.vue
index f68d69c98e..983a151e35 100644
--- a/frontend/src/components/Secrets/GSecretDialog.vue
+++ b/frontend/src/components/Secrets/GSecretDialog.vue
@@ -58,10 +58,7 @@ SPDX-License-Identifier: Apache-2.0
                 :cloud-profiles="cloudProfiles"
               />
             </div>
-
-            <div ref="bla">
-              <slot name="secret-slot" />
-            </div>
+            <slot name="secret-slot" />
             <g-message
               v-model:message="errorMessage"
               v-model:detailed-message="detailedErrorMessage"
diff --git a/frontend/src/components/Secrets/GSecretDialogCloudflare.vue b/frontend/src/components/Secrets/GSecretDialogCloudflare.vue
index e1a9e0da7e..8cf8ad957a 100644
--- a/frontend/src/components/Secrets/GSecretDialogCloudflare.vue
+++ b/frontend/src/components/Secrets/GSecretDialogCloudflare.vue
@@ -14,7 +14,6 @@ SPDX-License-Identifier: Apache-2.0
     <template #secret-slot>
       <div>
         <v-text-field
-          ref="apiToken"
           v-model="apiToken"
           color="primary"
           label="Cloudflare API Token"

From 3290653144414fe27d88fed75775380586703ec8 Mon Sep 17 00:00:00 2001
From: "Gross, Lukas" <lukas.gross@sap.com>
Date: Mon, 23 Sep 2024 16:46:17 +0200
Subject: [PATCH 21/21] Fixed lint security warnings

---
 backend/lib/routes/config.js                  |  2 +-
 .../src/components/GGenericInputFields.vue    | 34 +++++++++----------
 frontend/src/composables/useShootContext.js   |  2 +-
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/backend/lib/routes/config.js b/backend/lib/routes/config.js
index 13ff4bbcb7..6e89aac3bc 100644
--- a/backend/lib/routes/config.js
+++ b/backend/lib/routes/config.js
@@ -92,7 +92,7 @@ function sanitizeFrontendConfig (frontendConfig) {
   }
 
   for (const key of Object.keys(customCloudProviders)) {
-    const secret = customCloudProviders[key]?.secret
+    const secret = _.get(customCloudProviders, [key, 'secret'])
     if (secret) {
       convertAndSanitize(secret, 'help')
     }
diff --git a/frontend/src/components/GGenericInputFields.vue b/frontend/src/components/GGenericInputFields.vue
index 56d040bd51..4d5e9da0cf 100644
--- a/frontend/src/components/GGenericInputFields.vue
+++ b/frontend/src/components/GGenericInputFields.vue
@@ -136,31 +136,31 @@ export default {
         forEach(validators, (validator, validatorName) => {
           switch (validator.type) {
             case 'required':
-              compiledValidators[validatorName] = required
+              set(compiledValidators, [validatorName], required)
               break
             case 'requiredIf':
-              compiledValidators[validatorName] = requiredIf(() => !every(map(validator.not, fieldKey => this.fieldData[fieldKey])))
+              set(compiledValidators, [validatorName], requiredIf(() => !every(map(validator.not, fieldKey => get(this.fieldData, [fieldKey])))))
               break
             case 'isValidObject':
-              compiledValidators[validatorName] = () => isEmpty(this.fieldData[key]) || Object.keys(this.parsedInput[key]).length > 0
+              set(compiledValidators, [validatorName], () => isEmpty(get(this.fieldData, [key])) || Object.keys(get(this.parsedInput, [key])).length > 0)
               break
             case 'regex':
-              compiledValidators[validatorName] = value => !value || new RegExp(validator.value).test(value)
+              set(compiledValidators, [validatorName], value => !value || new RegExp(validator.value).test(value)) // eslint-disable-line security/detect-non-literal-regexp
           }
           if (validator.message) {
-            compiledValidators[validatorName] = withMessage(validator.message, compiledValidators[validatorName])
+            set(compiledValidators, [validatorName], withMessage(validator.message, get(compiledValidators, [validatorName])))
           }
         })
-        allValidators.fieldData[key] = withFieldName(label, compiledValidators)
+        set(allValidators.fieldData, [key], withFieldName(label, compiledValidators))
       })
       return allValidators
     },
     parsedFieldData () {
       return fromPairs(map(this.fields, ({ key, type }) => {
         if (type === 'json' || type === 'yaml') {
-          return [key, this.parsedInput[key]]
+          return [key, get(this.parsedInput, [key])]
         }
-        return [key, this.fieldData[key]]
+        return [key, get(this.fieldData, [key])]
       }))
     },
     parsedFields () {
@@ -199,13 +199,13 @@ export default {
           // set initial data
           const fieldData = fromPairs(map(this.fields, ({ key, type }) => {
             if (type === 'yaml') {
-              return [key, yaml.dump(value[key])]
+              return [key, yaml.dump(get(value, [key]))]
             }
             if (type === 'json') {
-              return [key, JSON.stringify(value[key])]
+              return [key, JSON.stringify(get(value, [key]))]
             }
 
-            return [key, value[key]]
+            return [key, get(value, [key])]
           }))
           this.fieldData = fieldData
         }
@@ -221,21 +221,21 @@ export default {
       set(this.parsedInput, key, {})
       try {
         if (type === 'yaml') {
-          this.parsedInput[key] = yaml.load(this.fieldData[key])
+          set(this.parsedInput, [key], yaml.load(get(this.fieldData, [key])))
         } else if (type === 'json') {
-          this.parsedInput[key] = JSON.parse(this.fieldData[key])
+          set(this.parsedInput, [key], JSON.parse(get(this.fieldData, [key])))
         }
       } catch (err) {
         /* ignore errors */
       } finally {
-        if (!isObject(this.parsedInput[key])) {
-          this.parsedInput[key] = {}
+        if (!isObject(get(this.parsedInput, [key]))) {
+          set(this.parsedInput, [key], {})
         }
       }
-      this.v$.fieldData[key].$touch()
+      get(this.v$.fieldData, [key]).$touch()
     },
     toggleShowInputData (key) {
-      set(this.showInputData, key, !this.showInputData[key])
+      set(this.showInputData, key, !get(this.showInputData, [key]))
     },
     getErrorMessages,
   },
diff --git a/frontend/src/composables/useShootContext.js b/frontend/src/composables/useShootContext.js
index 8a8b212155..0d2ff0ba2f 100644
--- a/frontend/src/composables/useShootContext.js
+++ b/frontend/src/composables/useShootContext.js
@@ -880,7 +880,7 @@ export function createShootContextComposable (options = {}) {
     },
     set (value) {
       forEach(customCloudProviderFields.value, ({ key, path }) => {
-        set(manifest.value, `${path}.${key}`, value[key])
+        set(manifest.value, [`${path}.${key}`], get(value, [key]))
       })
     },
   })