Member role management fixes (#695)

* Ensure that member roles currently not supported by the dashboard don't get lost when updating a member
Fixed autofocus for some dialogs

* changes as discussed

* revert

* Fix secret access in slots

* Revert "Fix secret access in slots"

This reverts commit 90cc626.

* Fixed secret page, had to move code to parent component due to regression in Vue 2.6
The new v-slot directive, does not provide access to the slotProps to use in an v-if to overwrite the slot conditionally and have the default (fallback) slot content rendered otherwise.
See also these related issues:
vuejs/vue#10784
vuejs/vue#9725
vuejs/vue#9658

Author: grolu

frontend/src/components/NewShoot/NewShootDetails.vue

@@ -80,7 +80,7 @@ limitations under the License.
 import HintColorizer from '@/components/HintColorizer'
 import Purpose from '@/components/Purpose'
 import { mapGetters, mapState } from 'vuex'
-import { getValidationErrors, compileMarkdown } from '@/utils'
+import { getValidationErrors, compileMarkdown, setDelayedInputFocus } from '@/utils'
 import { required, maxLength } from 'vuelidate/lib/validators'
 import { resourceName, noStartEndHyphen, noConsecutiveHyphen } from '@/utils/validators'
 import head from 'lodash/head'
@@ -251,6 +251,8 @@ export default {
     this.userInterActionBus.on('updateK8sMaintenance', updateK8sMaintenance => {
       this.updateK8sMaintenance = updateK8sMaintenance
     })
+
+    setDelayedInputFocus(this, 'name')
   }
 }
 </script>

frontend/src/components/ProjectServiceAccountRow.vue

@@ -60,9 +60,11 @@ limitations under the License.
         </v-list-item-subtitle>
       </v-list-item-content>
       <v-list-item-action class="ml-1">
-        <v-chip class="mr-3" v-for="roleName in roleDisplayNames" :key="roleName" small color="black" outlined>
-          {{roleName}}
-        </v-chip>
+        <div d-flex flex-row>
+          <v-chip class="mr-3" v-for="roleName in roleDisplayNames" :key="roleName" small color="black" outlined>
+            {{roleName}}
+          </v-chip>
+        </div>
       </v-list-item-action>
       <v-list-item-action v-if="isServiceAccountFromCurrentNamespace && canGetSecrets" class="ml-1">
         <v-tooltip top>

frontend/src/components/ProjectUserRow.vue

@@ -31,9 +31,11 @@ limitations under the License.
         </v-list-item-subtitle>
       </v-list-item-content>
       <v-list-item-action class="ml-1">
-        <v-chip class="mr-3" v-for="roleName in roleDisplayNames" :key="roleName" small color="grey darken-4" outlined>
-          {{roleName}}
-        </v-chip>
+        <div d-flex flex-row>
+          <v-chip class="mr-3" v-for="roleName in roleDisplayNames" :key="roleName" small color="grey darken-4" outlined>
+            {{roleName}}
+          </v-chip>
+        </div>
       </v-list-item-action>
       <v-list-item-action v-if="canPatchProject" class="ml-1">
         <v-tooltip top>

frontend/src/components/Secret.vue

@@ -38,16 +38,28 @@ limitations under the License.
     <!-- List of the added secrets -->
     <v-list two-line v-else>
       <secret-row
-        v-for="row in rows"
-        :key="row.metadata.name"
-        :secret="row"
+        v-for="secret in rows"
+        :key="secret.metadata.name"
+        :secret="secret"
         :secretDescriptorKey="secretDescriptorKey"
         @update="onUpdate"
         @delete="onDelete"
       >
-        <!-- forward slot -->
-        <template v-slot:rowSubTitle>
-          <slot name="rowSubTitle" :secret="row"></slot>
+       <template v-if="infrastructureKey === 'openstack' && isOwnSecretBinding(secret)" v-slot:rowSubTitle>
+          {{secret.data.domainName}} / {{secret.data.tenantName}}
+        </template>
+        <template v-else-if="infrastructureKey === 'vsphere' && isOwnSecretBinding(secret)" v-slot:rowSubTitle>
+          <v-tooltip top>
+            <template v-slot:activator="{ on }">
+              <span v-on="on">{{secret.data.vsphereUsername}}</span>
+            </template>
+            <span>vSphere Username</span>
+          </v-tooltip> / <v-tooltip top>
+            <template v-slot:activator="{ on }">
+              <span v-on="on">{{secret.data.nsxtUsername}}</span>
+            </template>
+            <span>NSX-T Username</span>
+          </v-tooltip>
         </template>
       </secret-row>
     </v-list>
@@ -59,6 +71,7 @@ limitations under the License.
 import { mapGetters } from 'vuex'
 import SecretRow from '@/components/SecretRow'
 import InfraIcon from '@/components/VendorIcon'
+import { isOwnSecretBinding } from '@/utils'
 
 export default {
   components: {
@@ -128,6 +141,9 @@ export default {
     },
     onDelete (row) {
       this.$emit('delete', row)
+    },
+    isOwnSecretBinding (secret) {
+      return isOwnSecretBinding(secret)
     }
   }
 }

frontend/src/components/ShootDetails/ShootDetailsCard.vue

@@ -82,8 +82,9 @@ limitations under the License.
         </v-list-item-icon>
         <v-list-item-content>
           <v-list-item-subtitle>Worker Groups</v-list-item-subtitle>
-          <v-list-item-title class="d-flex align-center pt-1">
+          <v-list-item-title class="d-flex flex-wrap align-center pt-1">
             <worker-group
+            class="mr-2 mb-2"
             v-for="workerGroup in shootWorkerGroups"
             :workerGroup="workerGroup"
             :cloudProfileName="shootCloudProfileName"

frontend/src/components/dialogs/MemberDialog.vue

@@ -42,6 +42,7 @@ limitations under the License.
             <v-col cols="4">
               <v-select
                 color="black"
+                item-color="black"
                 label="Roles"
                 :items="roleItems"
                 multiple
@@ -80,10 +81,12 @@ import { required } from 'vuelidate/lib/validators'
 import { resourceName, unique } from '@/utils/validators'
 import GAlert from '@/components/GAlert'
 import { errorDetailsFromError, isConflict } from '@/utils/error'
-import { serviceAccountToDisplayName, isServiceAccount, setInputFocus, getValidationErrors, MEMBER_ROLE_DESCRIPTORS } from '@/utils'
+import { serviceAccountToDisplayName, isServiceAccount, setDelayedInputFocus, getValidationErrors, MEMBER_ROLE_DESCRIPTORS } from '@/utils'
 import filter from 'lodash/filter'
 import map from 'lodash/map'
 import includes from 'lodash/includes'
+import forEach from 'lodash/forEach'
+import find from 'lodash/find'
 
 const defaultUsername = ''
 const defaultServiceName = 'robot'
@@ -117,6 +120,7 @@ export default {
     return {
       internalName: undefined,
       internalRoles: undefined,
+      unsupportedRoles: undefined,
       errorMessage: undefined,
       detailedErrorMessage: undefined
     }
@@ -200,11 +204,8 @@ export default {
     isUpdateDialog () {
       return this.type === 'updateuser' || this.type === 'updateservice'
     },
-    textField () {
-      return this.$refs.internalName
-    },
     roleItems () {
-      return filter(MEMBER_ROLE_DESCRIPTORS, role => role.hidden !== true)
+      return MEMBER_ROLE_DESCRIPTORS
     },
     nameLabel () {
       return this.isUserDialog ? 'User' : 'Service Account'
@@ -287,7 +288,7 @@ export default {
       if (this.valid) {
         try {
           const name = this.memberName
-          const roles = this.internalRoles
+          const roles = [...this.internalRoles, ...this.unsupportedRoles]
           await this.updateMember({ name, roles })
           if (this.isCurrentUser && !this.isAdmin) {
             await this.refreshSubjectRules()
@@ -323,9 +324,18 @@ export default {
       }
 
       if (this.roles) {
-        this.internalRoles = [...this.roles]
+        this.internalRoles = []
+        this.unsupportedRoles = []
+        forEach(this.roles, role => {
+          if (find(this.roleItems, { name: role })) {
+            this.internalRoles.push(role)
+          } else {
+            this.unsupportedRoles.push(role)
+          }
+        })
       } else {
         this.internalRoles = [defaultRole]
+        this.unsupportedRoles = []
       }
 
       this.errorMessage = undefined
@@ -334,9 +344,7 @@ export default {
       this.setFocusAndSelection()
     },
     setFocusAndSelection () {
-      if (this.textField) {
-        setInputFocus(this, 'name')
-      }
+      setDelayedInputFocus(this, 'internalName')
     },
     defaultServiceName () {
       let name = defaultServiceName
@@ -355,12 +363,6 @@ export default {
         this.reset()
       }
     }
-  },
-  mounted () {
-    if (this.textField) {
-      const input = this.textField.$refs.input
-      input.style.textTransform = 'lowercase'
-    }
   }
 }
 </script>

frontend/src/utils/index.js

@@ -689,11 +689,6 @@ export const MEMBER_ROLE_DESCRIPTORS = [
   {
     name: 'viewer',
     displayName: 'Viewer'
-  },
-  {
-    name: 'owner',
-    displayName: 'Technical Contact',
-    hidden: true // Do not show on UI as currently cannot be modified
   }
 ]
 

frontend/src/views/Members.vue

@@ -209,7 +209,6 @@ import forEach from 'lodash/forEach'
 import join from 'lodash/join'
 import map from 'lodash/map'
 import find from 'lodash/find'
-import upperFirst from 'lodash/upperFirst'
 import escape from 'lodash/escape'
 import MemberDialog from '@/components/dialogs/MemberDialog'
 import MemberHelpDialog from '@/components/dialogs/MemberHelpDialog'
@@ -455,10 +454,7 @@ export default {
       const displayNames = []
       forEach(roleNames, roleName => {
         const roleDescriptor = find(MEMBER_ROLE_DESCRIPTORS, { name: roleName })
-        if (!roleDescriptor) {
-          displayNames.push(upperFirst(roleName))
-        }
-        if (!roleDescriptor.hidden) {
+        if (roleDescriptor) {
           displayNames.push(roleDescriptor.displayName)
         }
       })

frontend/src/views/Secrets.vue

@@ -73,11 +73,7 @@ limitations under the License.
     @toogleHelp="onToogleHelp"
     @update="onUpdate"
     @delete="onDelete"
-    >
-      <template v-if="isOwnSecretBinding(secret)" v-slot:rowSubTitle="{ secret }">
-        {{secret.data.domainName}} / {{secret.data.tenantName}}
-      </template>
-    </secret>
+    ></secret>
 
     <secret
     v-if="hasCloudProfileForCloudProviderKind('alicloud')"
@@ -122,21 +118,7 @@ limitations under the License.
     @toogleHelp="onToogleHelp"
     @update="onUpdate"
     @delete="onDelete"
-    >
-      <template v-if="isOwnSecretBinding(secret)" v-slot:rowSubTitle="{ secret }">
-        <v-tooltip top>
-          <template v-slot:activator="{ on }">
-            <span v-on="on">{{secret.data.vsphereUsername}}</span>
-          </template>
-          <span>vSphere Username</span>
-        </v-tooltip> / <v-tooltip top>
-          <template v-slot:activator="{ on }">
-            <span v-on="on">{{secret.data.nsxtUsername}}</span>
-          </template>
-          <span>NSX-T Username</span>
-        </v-tooltip>
-      </template>
-    </secret>
+    ></secret>
 
     <template v-if="showDisabledCloudProviders">
 
@@ -206,7 +188,6 @@ limitations under the License.
 <script>
 import { mapGetters } from 'vuex'
 import get from 'lodash/get'
-import { isOwnSecretBinding } from '@/utils'
 import DeleteDialog from '@/components/dialogs/SecretDialogDelete'
 import SecretDialogWrapper from '@/components/dialogs/SecretDialogWrapper'
 import Secret from '@/components/Secret'
@@ -323,9 +304,6 @@ export default {
     },
     hideDialogs () {
       merge(this.dialogState, this.initialDialogState)
-    },
-    isOwnSecretBinding (secret) {
-      return isOwnSecretBinding(secret)
     }
   },
   mounted () {