Add a warning in case new networks extend the network configuration

frontend/src/components/ShootWorkers/ManageWorkers.vue

@@ -71,6 +71,7 @@ import assign from 'lodash/assign'
 import isEmpty from 'lodash/isEmpty'
 import flatMap from 'lodash/flatMap'
 import difference from 'lodash/difference'
+import get from 'lodash/get'
 import { v4 as uuidv4 } from '@/utils/uuid'
 
 const NO_LIMIT = -1
@@ -158,12 +159,18 @@ export default {
     },
     cloudProviderKind () {
       const cloudProfile = this.cloudProfileByName(this.cloudProfileName)
-      return cloudProfile.metadata.cloudProviderKind
+      return get(cloudProfile, 'metadata.cloudProviderKind')
     },
     currentZonesNetworkConfiguration () {
       return getZonesNetworkConfiguration(this.zonesNetworkConfiguration, this.internalWorkers, this.cloudProviderKind, this.allZones.length, this.existingWorkerCIDR)
     }
   },
+  watch: {
+    currentZonesNetworkConfiguration (value) {
+      const additionalZonesNetworkConfiguration = difference(this.currentZonesNetworkConfiguration, this.zonesNetworkConfiguration)
+      this.$emit('additionalZonesNetworkConfiguration', additionalZonesNetworkConfiguration)
+    }
+  },
   methods: {
     setInternalWorkers (workers) {
       this.internalWorkers = []

frontend/src/components/ShootWorkers/WorkerConfiguration.vue

@@ -17,15 +17,36 @@ SPDX-License-Identifier: Apache-2.0
     <template v-slot:actionComponent>
       <manage-workers
         @valid="onWorkersValid"
+        @additionalZonesNetworkConfiguration="onAdditionalZonesNetworkConfiguration"
         ref="manageWorkers"
         v-on="$manageWorkers.hooks"
       ></manage-workers>
     </template>
+    <template v-slot:errorMessage>
+      <v-alert
+        type="warning"
+        outlined
+        tile
+        prominent
+        v-if="hasAdditionalZonesNetworkConfiguration"
+        dismissible
+        @input="dismissAdditionalNetworksWarning"
+        class="mx-1">
+        <span>Adding addtional zones will extend the zone network configuration by adding new networks to your cluster:</span>
+        <code-block
+          lang="code"
+          :content="additionalZonesNetworkConfigurationYaml"
+          :show-copy-button="false"
+          ></code-block>
+        <span class="font-weight-bold">This change cannot be undone.</span>
+      </v-alert>
+    </template>
   </action-button-dialog>
 </template>
 
 <script>
 import ActionButtonDialog from '@/components/dialogs/ActionButtonDialog'
+import CodeBlock from '@/components/CodeBlock'
 import { patchShootProvider } from '@/utils/api'
 import shootItem from '@/mixins/shootItem'
 import asyncRef from '@/mixins/asyncRef'
@@ -39,18 +60,26 @@ export default {
   name: 'worker-configuration',
   components: {
     ActionButtonDialog,
-    ManageWorkers
+    ManageWorkers,
+    CodeBlock
   },
   data () {
     return {
       workersValid: false,
-      workers: undefined
+      workers: undefined,
+      additionalZonesNetworkConfiguration: [],
+      additionalZonesNetworkConfigurationYaml: undefined
     }
   },
   mixins: [
     shootItem,
     asyncRef('manageWorkers')
   ],
+  computed: {
+    hasAdditionalZonesNetworkConfiguration () {
+      return this.additionalZonesNetworkConfiguration.length
+    }
+  },
   methods: {
     async onConfigurationDialogOpened () {
       await this.reset()
@@ -95,6 +124,21 @@ export default {
     },
     onWorkersValid (value) {
       this.workersValid = value
+    },
+    onAdditionalZonesNetworkConfiguration (value) {
+      this.additionalZonesNetworkConfiguration = value
+    },
+    dismissAdditionalNetworksWarning () {
+      this.additionalZonesNetworkConfiguration = []
+    }
+  },
+  watch: {
+    async hasAdditionalZonesNetworkConfiguration (value) {
+      if (value) {
+        this.additionalZonesNetworkConfigurationYaml = await this.$yaml.safeDump(this.additionalZonesNetworkConfiguration)
+      } else {
+        this.additionalZonesNetworkConfigurationYaml = undefined
+      }
     }
   }
 }

frontend/src/components/dialogs/ActionButtonDialog.vue

@@ -45,6 +45,7 @@ SPDX-License-Identifier: Apache-2.0
       <template v-slot:caption>{{caption}}</template>
       <template v-slot:affectedObjectName>{{shootName}}</template>
       <template v-slot:message><slot name="actionComponent"></slot></template>
+      <template v-slot:errorMessage><slot name="errorMessage"></slot></template>
     </g-dialog>
   </div>
   <div v-else style="width: 36px"></div>

frontend/src/components/dialogs/GDialog.vue

@@ -22,8 +22,9 @@ SPDX-License-Identifier: Apache-2.0
         <slot name="message">
           This is a generic dialog template.
         </slot>
-        <g-message color="error" class="mt-4" :message.sync="message" :detailed-message.sync="detailedMessage"></g-message>
       </v-card-text>
+      <slot name="errorMessage"></slot>
+      <g-message color="error" class="mt-4" :message.sync="message" :detailed-message.sync="detailedMessage"></g-message>
       <v-divider></v-divider>
       <v-card-actions>
         <v-spacer></v-spacer>