K8s machineimage version warning (#511)

* Implemented select hint colorizer component

* Show hint in case kubernetes patch updates are enabled and selected kubernetes version is not latest patch

* removed vm.nexttick workarounds where possible

* use colorizer component to colorize machineimage hint
Show hint in case user does not select latest machine image and has automatic operating system updates enabled

* Filter invalid kubernetes / machine image versions

* renamed variable

* changes as discussed
added tests

* Fixed: Addon dialog not resetted properly
Fixed: Vendor icon error in console for unknown infrastructure providers

* Cleaned unit tests

* cleaned store tests

* Update frontend/src/components/NewShoot/NewShootDetails.vue

Co-Authored-By: Peter Sutter <peter.sutter@sap.com>

* changes as discussed

* test getters directly

* improved tests

* use startsWith

Co-authored-by: Peter Sutter <peter.sutter@sap.com>

frontend/src/components/NewShoot/NewShootDetails.vue

@@ -30,26 +30,30 @@ limitations under the License.
           ></v-text-field>
       </v-flex>
       <v-flex class="regularInput">
-        <v-select
-          color="cyan darken-2"
-          label="Kubernetes Version"
-          item-text="version"
-          item-value="version"
-          :items="sortedKubernetesVersionsList"
-          v-model="kubernetesVersion"
-          :error-messages="getErrorMessages('kubernetesVersion')"
-          @input="onInputKubernetesVersion"
-          @blur="$v.kubernetesVersion.$touch()"
-          >
-          <template v-slot:item="{ item }">
-            <v-list-tile-content>
-              <v-list-tile-title>{{item.version}}</v-list-tile-title>
-              <v-list-tile-sub-title v-if="item.expirationDateString">
-                <span>Expires: {{item.expirationDateString}}</span>
-              </v-list-tile-sub-title>
-            </v-list-tile-content>
-          </template>
-        </v-select>
+        <select-hint-colorizer hintColor="orange">
+          <v-select
+            color="cyan darken-2"
+            label="Kubernetes Version"
+            item-text="version"
+            item-value="version"
+            :items="sortedKubernetesVersionsList"
+            v-model="kubernetesVersion"
+            :error-messages="getErrorMessages('kubernetesVersion')"
+            @input="onInputKubernetesVersion"
+            @blur="$v.kubernetesVersion.$touch()"
+            :hint="versionHint"
+            persistent-hint
+            >
+            <template v-slot:item="{ item }">
+              <v-list-tile-content>
+                <v-list-tile-title>{{item.version}}</v-list-tile-title>
+                <v-list-tile-sub-title v-if="item.expirationDateString">
+                  <span>Expires: {{item.expirationDateString}}</span>
+                </v-list-tile-sub-title>
+              </v-list-tile-content>
+            </template>
+          </v-select>
+        </select-hint-colorizer>
       </v-flex>
       <v-flex class="regularInput">
         <v-select
@@ -69,12 +73,15 @@ limitations under the License.
 
 <script>
 
+import SelectHintColorizer from '@/components/SelectHintColorizer'
 import { mapGetters, mapState } from 'vuex'
 import { getValidationErrors, purposesForSecret } from '@/utils'
 import { required, maxLength } from 'vuelidate/lib/validators'
 import { resourceName, noStartEndHyphen, noConsecutiveHyphen } from '@/utils/validators'
 import head from 'lodash/head'
 import get from 'lodash/get'
+import find from 'lodash/find'
+import semver from 'semver'
 
 const validationErrors = {
   name: {
@@ -115,6 +122,7 @@ const validations = {
 export default {
   name: 'new-shoot-details',
   components: {
+    SelectHintColorizer
   },
   props: {
     userInterActionBus: {
@@ -130,7 +138,8 @@ export default {
       purpose: undefined,
       valid: false,
       cloudProfileName: undefined,
-      secret: undefined
+      secret: undefined,
+      updateK8sMaintenance: undefined
     }
   },
   validations,
@@ -147,6 +156,17 @@ export default {
     },
     sortedKubernetesVersionsList () {
       return this.sortedKubernetesVersions(this.cloudProfileName)
+    },
+    versionHint () {
+      if (this.updateK8sMaintenance && this.versionIsNotLatestPatch) {
+        return 'If you select a version which is not the latest patch version, you may want to disable automatic Kubernetes updates'
+      }
+      return undefined
+    },
+    versionIsNotLatestPatch () {
+      return !!find(this.sortedKubernetesVersionsList, ({ version }) => {
+        return semver.diff(version, this.kubernetesVersion) === 'patch' && semver.gt(version, this.kubernetesVersion)
+      })
     }
   },
   methods: {
@@ -188,12 +208,13 @@ export default {
         purpose: this.purpose
       }
     },
-    setDetailsData ({ name, kubernetesVersion, purpose, cloudProfileName, secret }) {
+    setDetailsData ({ name, kubernetesVersion, purpose, cloudProfileName, secret, updateK8sMaintenance }) {
       this.name = name
       this.cloudProfileName = cloudProfileName
       this.secret = secret
       this.kubernetesVersion = kubernetesVersion
       this.purpose = purpose
+      this.updateK8sMaintenance = updateK8sMaintenance
 
       this.validateInput()
     }
@@ -207,6 +228,9 @@ export default {
       this.cloudProfileName = cloudProfileName
       this.setDefaultKubernetesVersion()
     })
+    this.userInterActionBus.on('updateK8sMaintenance', updateK8sMaintenance => {
+      this.updateK8sMaintenance = updateK8sMaintenance
+    })
   }
 }
 </script>

frontend/src/components/SelectHintColorizer.vue

@@ -0,0 +1,68 @@
+<!--
+Copyright (c) 2019 by SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, v. 2 except as noted otherwise in the LICENSE file
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'select-hint-colorizer',
+  props: {
+    hintColor: {
+      type: String
+    }
+  },
+  watch: {
+    hintColor (hintColor) {
+      this.applyHintColor(hintColor)
+    }
+  },
+  methods: {
+    applyHintColor (hintColor) {
+      if (!this.$el) {
+        return
+      }
+      const elementClasses = this.$el.classList
+      elementClasses.forEach((className) => {
+        if (className.startsWith('hintColor-')) {
+          elementClasses.remove(className)
+        }
+      })
+      if (hintColor !== 'default') {
+        elementClasses.add(`hintColor-${hintColor}`)
+      }
+    }
+  },
+  mounted () {
+    this.applyHintColor(this.hintColor)
+  }
+}
+</script>
+
+<style lang="styl" scoped>
+  @import '~vuetify/src/stylus/settings/_colors.styl';
+
+  .hintColor-orange {
+    >>>.v-messages__wrapper {
+      .v-messages__message {
+        color: $orange.darken-2 !important;
+      }
+    }
+  }
+</style>

frontend/src/components/ShootAddons/ManageAddons.vue

@@ -36,7 +36,6 @@ limitations under the License.
 <script>
 import { mapGetters, mapState } from 'vuex'
 import filter from 'lodash/filter'
-import assign from 'lodash/assign'
 import cloneDeep from 'lodash/cloneDeep'
 import { shootAddonList } from '@/utils'
 
@@ -67,7 +66,7 @@ export default {
     },
     updateAddons (addons) {
       this.resetAddonList(addons)
-      assign(this.addons, cloneDeep(addons))
+      this.addons = cloneDeep(addons)
     },
     resetAddonList (addons) {
       this.addonDefinitionList = filter(shootAddonList, addon => {

frontend/src/components/ShootMaintenance/MaintenanceComponents.vue

@@ -69,6 +69,10 @@ limitations under the License.
 export default {
   name: 'maintenance-components',
   props: {
+    userInterActionBus: {
+      type: Object,
+      required: true
+    },
     title: {
       type: String,
       default: 'Auto Update'
@@ -80,11 +84,33 @@ export default {
   },
   data () {
     return {
-      osUpdates: false,
-      k8sUpdates: false
+      k8sUpdatesInternal: false,
+      osUpdatesInternal: false
     }
   },
   computed: {
+    k8sUpdates: {
+      get () {
+        return this.k8sUpdatesInternal
+      },
+      set (value) {
+        this.k8sUpdatesInternal = value
+        if (this.userInterActionBus) {
+          this.userInterActionBus.emit('updateK8sMaintenance', value)
+        }
+      }
+    },
+    osUpdates: {
+      get () {
+        return this.osUpdatesInternal
+      },
+      set (value) {
+        this.osUpdatesInternal = value
+        if (this.userInterActionBus) {
+          this.userInterActionBus.emit('updateOSMaintenance', value)
+        }
+      }
+    },
     showNoUpdates () {
       return !this.selectable && !this.osUpdates && !this.k8sUpdates
     }