[PoC] Add cloud providers via configuration

[grolu]

What this PR does / why we need it:
On top of PR #1434 this PR adds logic to define additional cloud providers via configuration (customCloudProviders).
It is possible to define a custom secret dialog including validation and help texts.
A custom cloud provider icon can be defined using an image resource mounted via asset configuration

This PR also adds a configuration option for the available cloud providers (cloudProviderList). This allows to add additional cloud providers as well as their order in the Dashboard. It is possible to add cloud providers without additional configuration, the secret dialog and logo will fallback to generic input / icon.

Current Limitations:
No additional input fields on create cluster page, see #1445

Example dashboard configuration for a cloud provider with name custom

cloudProviderList:
  - gcp
  - aws
  - custom
customCloudProviders:
  custom:
    icon: https://upload.wikimedia.org/wikipedia/commons/7/71/Cloud_Logo.png
    zoned: false
    shoot:
      specTemplate:
        provider:
          type: custom
          infrastructureConfig:
            apiVersion: custom.provider.extensions.gardener.cloud/v1alpha1
            kind: InfrastructureConfig
            networks:
              vpc:
                cidr: ${workerCIDR}
          controlPlaneConfig:
            apiVersion: custom.provider.extensions.gardener.cloud/v1alpha1
            kind: ControlPlaneConfig
        networking:
          nodes: ${workerCIDR}
          foo: bar
    secret:
      fields:
      - key: namespace
        hint: Enter a valid namespace
        label: Namespace
        validators:
          required: .+
          isNamespace: .+--.+
        validationErrors:
          required: Namespace is required
          isNamespace: Must be a valid namespace with format a--b
      - key: token 
        hint: Enter a valid token
        label: token
        password: true
        validators:
          required: .+
          isToken: ^.{10}$
        validationErrors:
          required: token is required
          isToken: Must be a valid token with length 10
      help: |
        #Custom Cloud Provider
        <br />
        <img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Cloud_Logo.png" width="100px" />
        <br />
        ## Namespace
        Please enter a valid namespace with format a--b
        <br />
        ## Token
        Please enter a valid token with exactly 10 chars

Icons can be provided as base64 encoded values when using the helm chart in the frontendConfig.vendorAssets map. Those icons can then be refrenced in the vendor configurations as well as the help html as shown above.

Cloud provider custom rendered in the Dashboard

Which issue(s) this PR fixes:
Fixes

Special notes for your reviewer:

Release note:

Define order, name and icon of cloud providers in dashboard configuration

Define additional cloud providers in dashboard configuration

[holgerkoser]

Have you tested this. I think it will not work as expected because there is a webpack build step involved which creates hash values for the assets and returns a pathname with the hash value. In this case webpack cannot know the path and the require will not work at runtime??

[grolu]

You are probably right. I did not think about the webpack build step. I need to adjust this anyway to support images mounted via configuration. I will revert the other changes
Edit: I checked this with a production build and it seems to work... although I'm actually not sure why. Maybe we should not do it anyway as I do not have a good feeling about this.

[gardener-robot]

@grolu You need rebase this pull request with latest master branch. Please check.

[grolu]

Closed in favor of #1553 (adopted to vue3 branch)