From bcd93aad0dbf5dee90d8208d30f57e8bc6252095 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Thu, 4 Jun 2020 18:00:30 +0530
Subject: [PATCH 01/24] Enabling Role based Users in Projects

---
 src/config/section/project.js                 |  41 +-
 src/locales/en.json                           |  16 +-
 src/views/AutogenView.vue                     |  14 +-
 src/views/project/AccountsTab.vue             |  48 +-
 src/views/project/InvitationsTemplate.vue     |  11 +-
 .../project/iam/ProjectRolePermissionTab.vue  | 444 ++++++++++++++++++
 src/views/project/iam/ProjectRoleTab.vue      | 289 ++++++++++++
 7 files changed, 851 insertions(+), 12 deletions(-)
 create mode 100644 src/views/project/iam/ProjectRolePermissionTab.vue
 create mode 100644 src/views/project/iam/ProjectRoleTab.vue

diff --git a/src/config/section/project.js b/src/config/section/project.js
index a0334e7ab..151694c22 100644
--- a/src/config/section/project.js
+++ b/src/config/section/project.js
@@ -15,6 +15,8 @@
 // specific language governing permissions and limitations
 // under the License.
 
+import store from '@/store'
+
 export default {
   name: 'project',
   title: 'label.projects',
@@ -23,6 +25,11 @@ export default {
   resourceType: 'Project',
   columns: ['name', 'state', 'displaytext', 'account', 'domain'],
   details: ['name', 'id', 'displaytext', 'projectaccountname', 'vmtotal', 'cputotal', 'memorytotal', 'volumetotal', 'iptotal', 'vpctotal', 'templatetotal', 'primarystoragetotal', 'vmlimit', 'iplimit', 'volumelimit', 'snapshotlimit', 'templatelimit', 'vpclimit', 'cpulimit', 'memorylimit', 'networklimit', 'primarystoragelimit', 'secondarystoragelimit', 'account', 'domain'],
+  related: [{
+    name: 'projectrolepermissions',
+    title: 'label.project.role.premissions',
+    param: 'projectid'
+  }],
   tabs: [
     {
       name: 'details',
@@ -33,6 +40,11 @@ export default {
       show: (record, route, user) => { return record.account === user.account || ['Admin', 'DomainAdmin'].includes(user.roletype) },
       component: () => import('@/views/project/AccountsTab.vue')
     },
+    {
+      name: 'project.roles',
+      show: () => { return 'listProjectRoles' in store.getters.apis },
+      component: () => import('@/views/project/iam/ProjectRoleTab.vue')
+    },
     {
       name: 'limits',
       show: (record, route, user) => { return ['Admin'].includes(user.roletype) },
@@ -91,10 +103,23 @@ export default {
     },
     {
       api: 'addAccountToProject',
-      icon: 'user-add',
+      icon: 'usergroup-add',
       label: 'Add Account to Project',
       dataView: true,
-      args: ['projectid', 'account', 'email'],
+      args: ['projectid', 'account', 'email', 'projectroleid', 'roletype'],
+      show: (record, store) => { return record.account === store.userInfo.account || ['Admin', 'DomainAdmin'].includes(store.userInfo.roletype) },
+      mapping: {
+        projectid: {
+          value: (record) => { return record.id }
+        }
+      }
+    },
+    {
+      api: 'addUserToProject',
+      icon: 'user-add',
+      label: 'Add User to Project',
+      dataView: true,
+      args: ['projectid', 'userid', 'projectroleid', 'roletype', 'email'],
       show: (record, store) => { return record.account === store.userInfo.account || ['Admin', 'DomainAdmin'].includes(store.userInfo.roletype) },
       mapping: {
         projectid: {
@@ -102,6 +127,18 @@ export default {
         }
       }
     },
+    {
+      api: 'createProjectRole',
+      icon: 'idcard',
+      label: 'label.add.project.role',
+      dataView: true,
+      args: ['projectid', 'name', 'description'],
+      mapping: {
+        projectid: {
+          value: (record) => { return record.id }
+        }
+      }
+    },
     {
       api: 'deleteProject',
       icon: 'delete',
diff --git a/src/locales/en.json b/src/locales/en.json
index 7b039ecdd..36b873d7a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -320,6 +320,7 @@
 "label.add.portable.ip.range": "Add Portable IP Range",
 "label.add.primary.storage": "Add Primary Storage",
 "label.add.private.gateway": "Add Private Gateway",
+"label.add.project.role": "Add Project Role",
 "label.add.region": "Add Region",
 "label.add.resources": "Add Resources",
 "label.add.role": "Add Role",
@@ -563,6 +564,7 @@
 "label.create.nfs.secondary.staging.storage": "Create NFS Secondary Staging Store",
 "label.create.nfs.secondary.staging.store": "Create NFS secondary staging store",
 "label.create.project": "Create project",
+"label.create.project.role": "Create Project Role",
 "label.create.ssh.key.pair": "Create a SSH Key Pair",
 "label.create.template": "Create template",
 "label.create.vpn.connection": "Create VPN Connection",
@@ -620,6 +622,7 @@
 "label.delete.pa": "Delete Palo Alto",
 "label.delete.portable.ip.range": "Delete Portable IP Range",
 "label.delete.project": "Delete project",
+"label.delete.project.role": "Delete Project Role",
 "label.delete.role": "Delete Role",
 "label.delete.secondary.staging.store": "Delete Secondary Staging Store",
 "label.delete.srx": "Delete SRX",
@@ -634,6 +637,7 @@
 "label.deleteprofile": "Delete Profile",
 "label.deleting.failed": "Deleting Failed",
 "label.deleting.processing": "Deleting....",
+"label.demote.project.owner": "Demote account to Regular role",
 "label.deny": "Deny",
 "label.deploymentplanner": "Deployment planner",
 "label.description": "Description",
@@ -728,6 +732,7 @@
 "label.edit.lb.rule": "Edit LB rule",
 "label.edit.network.details": "Edit network details",
 "label.edit.project.details": "Edit project details",
+"label.edit.project.role": "Edit Project Role",
 "label.edit.region": "Edit Region",
 "label.edit.role": "Edit Role",
 "label.edit.rule": "Edit rule",
@@ -1216,6 +1221,7 @@
 "label.metrics.network.usage": "Network Usage",
 "label.metrics.network.write": "Write",
 "label.metrics.num.cpu.cores": "Cores",
+
 "label.migrate.instance.to": "Migrate instance to",
 "label.migrate.instance.to.host": "Migrate instance to another host",
 "label.migrate.instance.to.ps": "Migrate instance to another primary storage",
@@ -1456,6 +1462,8 @@
 "label.project.invitation": "Project Invitations",
 "label.project.invite": "Invite to project",
 "label.project.name": "Project name",
+"label.project.roles": "Project Roles",
+"label.project.role.permissions": "Project Role Permissions",
 "label.project.view": "Project View",
 "label.projectid": "Project ID",
 "label.projects": "Projects",
@@ -1559,6 +1567,7 @@
 "label.remove.network.offering": "Remove network offering",
 "label.remove.pf": "Remove port forwarding rule",
 "label.remove.project.account": "Remove account from project",
+"label.remove.project.role": "Remove project role",
 "label.remove.region": "Remove Region",
 "label.remove.rule": "Remove rule",
 "label.remove.ssh.key.pair": "Remove SSH Key Pair",
@@ -1898,6 +1907,7 @@
 "label.unlimited": "Unlimited",
 "label.untagged": "Untagged",
 "label.update.project.resources": "Update project resources",
+"label.update.project.role": "Update project role",
 "label.update.ssl": " SSL Certificate",
 "label.update.ssl.cert": " SSL Certificate",
 "label.update.vmware.datacenter": "Update VMware Datacenter",
@@ -1921,6 +1931,7 @@
 "label.usehttps": "Use HTTPS",
 "label.usenewdiskoffering": "Replace disk offering?",
 "label.user": "User",
+"label.user.as.admin": "Make User the Project Admin",
 "label.user.conflict": "Conflict",
 "label.user.details": "User details",
 "label.user.source": "source",
@@ -2588,6 +2599,9 @@
 "message.zone.step.3.desc": "Please enter the following info to add a new pod",
 "message.zonewizard.enable.local.storage": "WARNING: If you enable local storage for this zone, you must do the following, depending on where you would like your system VMs to launch:<br/><br/>1. If system VMs need to be launched in shared primary storage, shared primary storage needs to be added to the zone after creation. You must also start the zone in a disabled state.<br/><br/>2. If system VMs need to be launched in local primary storage, system.vm.use.local.storage needs to be set to true before you enable the zone.<br/><br/><br/>Would you like to continue?",
 "messgae.validate.min": "Please enter a value greater than or equal to {0}.",
+"migrate.from": "Migrate From",
+"migrate.to": "Migrate To",
+"migrationPolicy": "Migration Policy",
 "network.rate": "Network Rate",
 "side.by.side": "Side by Side",
 "state.accepted": "Accepted",
@@ -2612,4 +2626,4 @@
 "state.stopping": "Stopping",
 "state.suspended": "Suspended",
 "title.upload.volume": "Upload Volume"
-}
+}
\ No newline at end of file
diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index 14d7a3ae4..d37cf8e00 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -170,7 +170,7 @@
                     rules: [{ required: field.required, message: 'Please select option' }]
                   }]"
                   :loading="field.loading"
-                  :placeholder="field.description"
+                  :placeholder="field.descriptions"
                   :filterOption="(input, option) => {
                     return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                   }"
@@ -180,6 +180,16 @@
                   </a-select-option>
                 </a-select>
               </span>
+              <span v-else-if="field.name === 'roletype'">
+                <a-select
+                  showSearch
+                  optionFilterProp="children"
+                  v-decorator="[field.name]"
+                  :placeholder="$t('label.roletype')">
+                  <a-select-option value="Admin">Admin</a-select-option>
+                  <a-select-option value="Regular">Regular</a-select-option>
+                </a-select>
+              </span>
               <span
                 v-else-if="field.type==='uuid'">
                 <a-select
@@ -675,6 +685,8 @@ export default {
         params.isofilter = 'executable'
       } else if (possibleApi === 'listHosts') {
         params.type = 'routing'
+      } else if (possibleApi === 'listProjectRoles') {
+        params.projectid = this.resource.id
       }
       api(possibleApi, params).then(json => {
         param.loading = false
diff --git a/src/views/project/AccountsTab.vue b/src/views/project/AccountsTab.vue
index 8f48f24ce..7eeaa3782 100644
--- a/src/views/project/AccountsTab.vue
+++ b/src/views/project/AccountsTab.vue
@@ -27,12 +27,30 @@
           :pagination="false"
           :rowKey="record => record.accountid || record.account"
         >
-          <span slot="action" v-if="record.role!==owner" slot-scope="text, record" class="account-button-action">
+          <span slot="action" v-if="record.role!==owner || (record.role === owner && record.account !== resource.account)" slot-scope="text, record" class="account-button-action">
             <a-tooltip placement="top">
               <template slot="title">
                 {{ $t('label.make.project.owner') }}
               </template>
-              <a-button type="default" shape="circle" icon="user" size="small" @click="onMakeProjectOwner(record)" />
+              <a-button
+                v-if="record.role!==owner"
+                type="default"
+                shape="circle"
+                icon="arrow-up"
+                size="small"
+                @click="onMakeProjectOwner(record)" />
+            </a-tooltip>
+            <a-tooltip placement="top">
+              <template slot="title">
+                {{ $t('label.demote.project.owner') }}
+              </template>
+              <a-button
+                v-if="record.role===owner"
+                type="default"
+                shape="circle"
+                icon="arrow-down"
+                size="small"
+                @click="demoteAccount(record)" />
             </a-tooltip>
             <a-tooltip placement="top">
               <template slot="title">
@@ -90,9 +108,15 @@ export default {
       {
         title: this.$t('label.account'),
         dataIndex: 'account',
-        width: '35%',
+        width: '30%',
         scopedSlots: { customRender: 'account' }
       },
+      {
+        title: this.$t('label.user'),
+        dataIndex: 'user_id',
+        width: '30%',
+        scopedSlots: { customRender: 'user' }
+      },
       {
         title: this.$t('label.role'),
         dataIndex: 'role',
@@ -164,17 +188,27 @@ export default {
       const loading = this.$message.loading(title + 'in progress for ' + record.account, 0)
       const params = {}
 
-      params.id = this.resource.id
+      params.projectid = this.resource.id
       params.account = record.account
-
+      params.roletype = this.owner
+      this.updateProject(record, params, title, loading)
+    },
+    demoteAccount (record) {
+      const title = this.$t('label.demote.project.owner')
+      const loading = this.$message.loading(title + 'in progress for ' + record.account, 0)
+      const params = {}
+      params.projectid = this.resource.id
+      params.account = record.account
+      params.roletype = 'Regular'
+      this.updateProject(record, params, title, loading)
+    },
+    updateProject (record, params, title, loading) {
       api('updateProject', params).then(json => {
         const hasJobId = this.checkForAddAsyncJob(json, title, record.account)
-
         if (hasJobId) {
           this.fetchData()
         }
       }).catch(error => {
-        // show error
         this.$notifyError(error)
       }).finally(() => {
         setTimeout(loading, 1000)
diff --git a/src/views/project/InvitationsTemplate.vue b/src/views/project/InvitationsTemplate.vue
index 21b246eae..73454dc54 100644
--- a/src/views/project/InvitationsTemplate.vue
+++ b/src/views/project/InvitationsTemplate.vue
@@ -111,6 +111,11 @@ export default {
         dataIndex: 'project',
         scopedSlots: { customRender: 'project' }
       },
+      {
+        title: this.$t('label.user'),
+        dataIndex: 'userid',
+        scopedSlots: { customRender: 'user' }
+      },
       {
         title: this.$t('label.domain'),
         dataIndex: 'domain',
@@ -221,7 +226,11 @@ export default {
       const params = {}
 
       params.projectid = record.projectid
-      params.account = record.account
+      if (record.userid !== null) {
+        params.userid = record.userid
+      } else {
+        params.account = record.account
+      }
       params.domainid = record.domainid
       params.accept = state
 
diff --git a/src/views/project/iam/ProjectRolePermissionTab.vue b/src/views/project/iam/ProjectRolePermissionTab.vue
new file mode 100644
index 000000000..d14ba435a
--- /dev/null
+++ b/src/views/project/iam/ProjectRolePermissionTab.vue
@@ -0,0 +1,444 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you 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>
+  <a-icon v-if="loadingTable" type="loading" class="main-loading-spinner"></a-icon>
+  <div v-else>
+    <div v-if="updateTable" class="loading-overlay">
+      <a-icon type="loading" />
+    </div>
+    <div
+      class="rules-list ant-list ant-list-bordered"
+      :class="{'rules-list--overflow-hidden' : updateTable}" >
+
+      <div class="rules-table-item ant-list-item">
+        <div class="rules-table__col rules-table__col--grab"></div>
+        <div class="rules-table__col rules-table__col--rule rules-table__col--new">
+          <a-auto-complete
+            :autoFocus="true"
+            :filterOption="filterOption"
+            :dataSource="apis"
+            :value="newRule"
+            @change="val => newRule = val"
+            placeholder="Rule"
+            :class="{'rule-dropdown-error' : newRuleSelectError}" />
+        </div>
+        <div class="rules-table__col rules-table__col--permission">
+          <permission-editable
+            :defaultValue="newRulePermission"
+            @change="onPermissionChange(null, $event)" />
+        </div>
+        <div class="rules-table__col rules-table__col--description">
+          <a-input v-model="newRuleDescription" placeholder="Description"></a-input>
+        </div>
+        <div class="rules-table__col rules-table__col--actions">
+          <a-tooltip
+            placement="bottom">
+            <template slot="title">
+              Save new Rule
+            </template>
+            <a-button
+              icon="plus"
+              type="primary"
+              shape="circle"
+              @click="onRuleSave"
+            >
+            </a-button>
+          </a-tooltip>
+        </div>
+      </div>
+
+      <draggable
+        v-model="rules"
+        @change="changeOrder"
+        handle=".drag-handle"
+        animation="200"
+        ghostClass="drag-ghost">
+        <transition-group type="transition">
+          <div
+            v-for="(record, index) in rules"
+            :key="`item-${index}`"
+            class="rules-table-item ant-list-item">
+            <div class="rules-table__col rules-table__col--grab drag-handle">
+              <a-icon type="drag"></a-icon>
+            </div>
+            <div class="rules-table__col rules-table__col--rule">
+              {{ record.rule }}
+            </div>
+            <div class="rules-table__col rules-table__col--permission">
+              <permission-editable
+                :defaultValue="record.permission"
+                @change="onPermissionChange(record, $event)" />
+            </div>
+            <div class="rules-table__col rules-table__col--description">
+              <template v-if="record.description">
+                {{ record.description }}
+              </template>
+              <div v-else class="no-description">
+                No description entered.
+              </div>
+            </div>
+            <div class="rules-table__col rules-table__col--actions">
+              <rule-delete
+                :record="record"
+                @delete="onRuleDelete(record.id)" />
+            </div>
+          </div>
+        </transition-group>
+      </draggable>
+    </div>
+  </div>
+</template>
+
+<script>
+import { api } from '@/api'
+import draggable from 'vuedraggable'
+import PermissionEditable from '@/views/iam/PermissionEditable'
+import RuleDelete from '@/views/iam/RuleDelete'
+
+export default {
+  name: 'ProjectRolePermissionTab',
+  components: {
+    RuleDelete,
+    PermissionEditable,
+    draggable
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    role: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      loadingTable: true,
+      updateTable: false,
+      rules: null,
+      newRule: '',
+      newRulePermission: 'allow',
+      newRuleDescription: '',
+      newRuleSelectError: false,
+      drag: false,
+      apis: []
+    }
+  },
+  mounted () {
+    this.apis = Object.keys(this.$store.getters.apis).sort((a, b) => a.localeCompare(b))
+    this.fetchData()
+  },
+  watch: {
+    resource: function () {
+      this.fetchData(() => {
+        this.resetNewFields()
+      })
+    }
+  },
+  methods: {
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
+      )
+    },
+    resetNewFields () {
+      this.newRule = ''
+      this.newRulePermission = 'allow'
+      this.newRuleDescription = ''
+      this.newRuleSelectError = false
+    },
+    fetchData (callback = null) {
+      console.log('res = ', this.resource)
+      if (!this.resource.id) return
+      api('listProjectRolePermissions', {
+        projectid: this.resource.id,
+        projectroleid: this.role.id
+      }).then(response => {
+        this.rules = response.listprojectrolepermissionsresponse.projectrolepermission
+      }).catch(error => {
+        console.error(error)
+      }).finally(() => {
+        this.loadingTable = false
+        this.updateTable = false
+        if (callback) callback()
+      })
+    },
+    changeOrder () {
+      api('updateProjectRolePermission', {}, 'POST', {
+        projectid: this.resource.id,
+        projectroleid: this.role.id,
+        ruleorder: this.rules.map(rule => rule.id)
+      }).catch(error => {
+        console.error(error)
+      }).finally(() => {
+        this.fetchData()
+      })
+    },
+    onRuleDelete (key) {
+      this.updateTable = true
+      api('deleteProjectRolePermission', {
+        id: key,
+        projectid: this.resource.id
+      }).catch(error => {
+        console.error(error)
+      }).finally(() => {
+        this.fetchData()
+      })
+    },
+    onPermissionChange (record, value) {
+      this.newRulePermission = value
+      if (!record) return
+
+      this.updateTable = true
+      api('updateProjectRolePermission', {
+        projectid: this.resource.id,
+        projectroleid: this.role.id,
+        ruleid: record.id,
+        permission: value
+      }).then(() => {
+        this.fetchData()
+      }).catch(error => {
+        console.error(error)
+      })
+    },
+    onRuleSelect (value) {
+      this.newRule = value
+    },
+    onRuleSave () {
+      if (!this.newRule) {
+        this.newRuleSelectError = true
+        return
+      }
+
+      this.updateTable = true
+      api('createProjectRolePermission', {
+        rule: this.newRule,
+        permission: this.newRulePermission,
+        description: this.newRuleDescription,
+        projectroleid: this.role.id,
+        projectid: this.resource.id
+      }).then(() => {
+      }).catch(error => {
+        console.error(error)
+      }).finally(() => {
+        this.resetNewFields()
+        this.fetchData()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .main-loading-spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+  }
+  .role-add-btn {
+    margin-bottom: 15px;
+  }
+  .new-role-controls {
+    display: flex;
+
+    button {
+      &:not(:last-child) {
+        margin-right: 5px;
+      }
+    }
+
+  }
+
+  .rules-list {
+    max-height: 600px;
+    overflow: auto;
+
+    &--overflow-hidden {
+      overflow: hidden;
+    }
+
+  }
+
+  .rules-table {
+
+    &-item {
+      position: relative;
+      display: flex;
+      align-items: stretch;
+      padding: 0;
+      flex-wrap: wrap;
+
+      @media (min-width: 760px) {
+        flex-wrap: nowrap;
+        padding-right: 25px;
+      }
+
+    }
+
+    &__col {
+      display: flex;
+      align-items: center;
+      padding: 15px;
+
+      @media (min-width: 760px) {
+        padding: 15px 0;
+
+        &:not(:first-child) {
+          padding-left: 20px;
+        }
+
+        &:not(:last-child) {
+          border-right: 1px solid #e8e8e8;
+          padding-right: 20px;
+        }
+      }
+
+      &--grab {
+        position: absolute;
+        top: 4px;
+        left: 0;
+        width: 100%;
+
+        @media (min-width: 760px) {
+          position: relative;
+          top: auto;
+          width: 35px;
+          padding-left: 25px;
+          justify-content: center;
+        }
+
+      }
+
+      &--rule,
+      &--description {
+        word-break: break-all;
+        flex: 1;
+        width: 100%;
+
+        @media (min-width: 760px) {
+          width: auto;
+        }
+
+      }
+
+      &--rule {
+        padding-left: 60px;
+        background-color: rgba(#e6f7ff, 0.7);
+
+        @media (min-width: 760px) {
+          padding-left: 0;
+          background: none;
+        }
+
+      }
+
+      &--permission {
+        justify-content: center;
+        width: 100%;
+
+        .ant-select {
+          width: 100%;
+        }
+
+        @media (min-width: 760px) {
+          width: auto;
+
+          .ant-select {
+            width: auto;
+          }
+
+        }
+
+      }
+
+      &--actions {
+        max-width: 60px;
+        width: 100%;
+        padding-right: 0;
+
+        @media (min-width: 760px) {
+          width: auto;
+          max-width: 70px;
+          padding-right: 15px;
+        }
+
+      }
+
+      &--new {
+        padding-left: 15px;
+        background-color: transparent;
+
+        div {
+          width: 100%;
+        }
+
+      }
+
+    }
+
+  }
+
+  .no-description {
+    opacity: 0.4;
+    font-size: 0.7rem;
+
+    @media (min-width: 760px) {
+      display: none;
+    }
+
+  }
+
+  .drag-handle {
+    cursor: pointer;
+  }
+
+  .drag-ghost {
+    opacity: 0.5;
+    background: #f0f2f5;
+  }
+
+  .loading-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 3rem;
+    color: #39A7DE;
+    background-color: rgba(#fff, 0.8);
+  }
+</style>
+
+<style lang="scss">
+  .rules-table__col--new {
+    .ant-select {
+      width: 100%;
+    }
+  }
+  .rule-dropdown-error {
+    .ant-input {
+      border-color: #ff0000
+    }
+  }
+</style>
diff --git a/src/views/project/iam/ProjectRoleTab.vue b/src/views/project/iam/ProjectRoleTab.vue
new file mode 100644
index 000000000..cd7ccf630
--- /dev/null
+++ b/src/views/project/iam/ProjectRoleTab.vue
@@ -0,0 +1,289 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you 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>
+    <a-row :gutter="12">
+      <a-col :md="24" :lg="24">
+        <a-table
+          size="small"
+          :loading="loading"
+          :columns="columns"
+          :dataSource="dataSource"
+          :rowKey="record => record.projectid"
+          pagination="false">
+          <template slot="expandedRowRender" slot-scope="record">
+            <ProjectRolePermissionTab class="table" style="margin-top:30px; margin-left: -40px; margin-right: 10px" :resource="resource" :role="record"/>
+          </template>
+          <template slot="name" slot-scope="record"> {{ record }} </template>
+          <template slot="description" slot-scope="record">
+            {{ record }}
+          </template>
+          <span slot="action" slot-scope="text, record" class="account-button-action">
+            <a-tooltip placement="top">
+              <template slot="title">
+                {{ $t('label.update.project.role') }}
+              </template>
+              <a-button
+                type="default"
+                shape="circle"
+                icon="edit"
+                size="small"
+                style="margin:10px"
+                @click="openUpdateModal(record)" />
+            </a-tooltip>
+            <a-tooltip placement="top">
+              <template slot="title">
+                {{ $t('label.remove.project.role') }}
+              </template>
+              <a-button
+                type="danger"
+                shape="circle"
+                icon="delete"
+                size="small"
+                @click="deleteProjectRole(record)"/>
+            </a-tooltip>
+          </span>
+        </a-table>
+
+        <a-modal title="Edit Project Role" v-model="editModalVisible" :footer="null" :afterClose="closeAction">
+          <a-form
+            :form="form"
+            @submit="updateProjectRole"
+            layout="vertical">
+            <a-form-item :label="$t('label.name')">
+              <a-input v-decorator="[ 'name' ]"></a-input>
+            </a-form-item>
+            <a-form-item :label="$t('label.description')">
+              <a-input v-decorator="[ 'description' ]"></a-input>
+            </a-form-item>
+            <div :span="24" class="action-button">
+              <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+              <a-button type="primary" @click="updateProjectRole" :loading="loading">{{ $t('label.ok') }}</a-button>
+            </div>
+            <span slot="action" slot-scope="text, record" class="account-button-action">
+              <a-tooltip placement="top">
+                <template slot="title">
+                  {{ $t('label.update.project.role') }}
+                </template>
+                <a-button
+                  type="default"
+                  shape="circle"
+                  icon="edit"
+                  size="small"
+                  style="margin:10px"
+                  @click="openUpdateModal(record)" />
+              </a-tooltip>
+              <a-tooltip placement="top">
+                <template slot="title">
+                  {{ $t('label.remove.project.role') }}
+                </template>
+                <a-button
+                  type="danger"
+                  shape="circle"
+                  icon="delete"
+                  size="small"
+                  @click="deleteProjectRole(record)"/>
+              </a-tooltip>
+            </span>
+          </a-form>
+        </a-modal>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<script>
+import { api } from '@/api'
+import ProjectRolePermissionTab from '@/views/project/iam/ProjectRolePermissionTab'
+export default {
+  name: 'ProjectRoleTab',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    ProjectRolePermissionTab
+  },
+  data () {
+    return {
+      columns: [],
+      dataSource: [],
+      loading: false,
+      editModalVisible: false,
+      selectedRole: null,
+      projectPermisssions: [],
+      customStyle: 'margin-bottom: -10px; border-bottom-style: none'
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  created () {
+    this.columns = [
+      {
+        title: this.$t('label.name'),
+        dataIndex: 'name',
+        width: '35%',
+        scopedSlots: { customRender: 'name' }
+      },
+      {
+        title: this.$t('label.description'),
+        dataIndex: 'description'
+      },
+      {
+        title: this.$t('label.action'),
+        dataIndex: 'action',
+        fixed: 'right',
+        width: 100,
+        scopedSlots: { customRender: 'action' }
+      }
+    ]
+  },
+  mounted () {
+    this.fetchData()
+  },
+  watch: {
+    resource (newItem, oldItem) {
+      if (!newItem || !newItem.id) {
+        return
+      }
+      this.resource = newItem
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchData () {
+      const params = {}
+      params.projectid = this.resource.id
+      this.loading = true
+      api('listProjectRoles', params).then(json => {
+        const projectRoles = json.listprojectrolesresponse.projectrole
+        if (!projectRoles || projectRoles.length === 0) {
+          this.dataSource = []
+          return
+        }
+        this.dataSource = projectRoles
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    openUpdateModal (role) {
+      this.selectedRole = role
+      this.editModalVisible = true
+    },
+    updateProjectRole (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+        var params = {}
+        params.projectid = this.resource.id
+        params.id = this.selectedRole.id
+        for (const key in values) {
+          const input = values[key]
+          if (input === undefined) {
+            continue
+          }
+          params[key] = input
+        }
+        api('updateProjectRole', params).then(response => {
+          this.$notification.success({
+            message: this.$t('label.update.project.role'),
+            description: this.$t('label.update.project.role')
+          })
+        }).catch(error => {
+          this.$notifyError(error)
+        }).finally(() => {
+          this.loading = false
+          this.fetchData()
+          this.closeAction()
+        })
+      })
+    },
+    closeAction () {
+      this.editModalVisible = false
+    },
+    deleteProjectRole (role) {
+      api('deleteProjectRole', {
+        projectid: this.resource.id,
+        id: role.id
+      }).then(response => {
+        this.$notification.success({
+          message: this.$t('label.delete.project.role'),
+          description: this.$t('label.delete.project.role')
+        })
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.loading = false
+        this.fetchData()
+        this.closeAction()
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.action-button {
+    text-align: right;
+
+    button {
+      margin-right: 5px;
+    }
+  }
+.list {
+
+  &__label {
+    font-weight: bold;
+  }
+
+  &__col {
+    flex: 1;
+
+    @media (min-width: 480px) {
+      &:not(:last-child) {
+        margin-right: 20px;
+      }
+    }
+  }
+
+  &__item {
+    margin-right: -8px;
+    align-items: flex-start;
+
+    &-outer-container {
+      width: 100%;
+    }
+
+    &-container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      @media (min-width: 480px) {
+        flex-direction: row;
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
+</style>

From f2caa829c677310fcbda77754102fe3cb95d4ecd Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Mon, 8 Jun 2020 18:30:15 +0530
Subject: [PATCH 02/24] Add users to projects

---
 src/config/section/project.js     |  7 +++++--
 src/locales/en.json               |  2 ++
 src/views/AutogenView.vue         | 21 +++++++++++++++++++++
 src/views/project/AccountsTab.vue | 26 +++++++++++++++++++-------
 4 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/src/config/section/project.js b/src/config/section/project.js
index 151694c22..1710abee8 100644
--- a/src/config/section/project.js
+++ b/src/config/section/project.js
@@ -37,7 +37,10 @@ export default {
     },
     {
       name: 'accounts',
-      show: (record, route, user) => { return record.account === user.account || ['Admin', 'DomainAdmin'].includes(user.roletype) },
+      // TODO: revert
+      show: () => { return true },
+      // show: (record, route, user) => { return record.account === user.account },
+      // || ['Admin', 'DomainAdmin'].includes(user.roletype) },
       component: () => import('@/views/project/AccountsTab.vue')
     },
     {
@@ -119,7 +122,7 @@ export default {
       icon: 'user-add',
       label: 'Add User to Project',
       dataView: true,
-      args: ['projectid', 'userid', 'projectroleid', 'roletype', 'email'],
+      args: ['projectid', 'userid', 'email', 'projectroleid', 'roletype'],
       show: (record, store) => { return record.account === store.userInfo.account || ['Admin', 'DomainAdmin'].includes(store.userInfo.roletype) },
       mapping: {
         projectid: {
diff --git a/src/locales/en.json b/src/locales/en.json
index 36b873d7a..2595225f4 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1139,6 +1139,7 @@
 "label.macaddress": "MAC Address",
 "label.macaddresschanges": "MAC Address Changes",
 "label.make.project.owner": "Make account project owner",
+"label.make.user.project.owner": "Make user project owner",
 "label.makeredundant": "Make redundant",
 "label.manage": "Manage",
 "label.manage.resources": "Manage Resources",
@@ -1568,6 +1569,7 @@
 "label.remove.pf": "Remove port forwarding rule",
 "label.remove.project.account": "Remove account from project",
 "label.remove.project.role": "Remove project role",
+"label.remove.project.user": "Remove user from project",
 "label.remove.region": "Remove Region",
 "label.remove.rule": "Remove rule",
 "label.remove.ssh.key.pair": "Remove SSH Key Pair",
diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index d37cf8e00..276aec3f3 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -180,6 +180,22 @@
                   </a-select-option>
                 </a-select>
               </span>
+              <span
+                v-else-if="field.name==='userid'">
+                <a-select
+                  showSearch
+                  optionFilterProp="children"
+                  v-decorator="[field.name, {
+                    rules: [{ required: field.required, message: 'Please select option' }]
+                  }]"
+                  :loading="field.loading"
+                  :placeholder="$t('label.user')"
+                >
+                  <a-select-option v-for="opt in field.opts" :key="opt.id">
+                    {{ opt.username }} ( {{ opt.id }} )
+                  </a-select-option>
+                </a-select>
+              </span>
               <span v-else-if="field.name === 'roletype'">
                 <a-select
                   showSearch
@@ -521,6 +537,9 @@ export default {
         delete params.treeView
       }
 
+      if (this.dataView && this.apiName === 'listProjects') {
+        params.projectid = this.$route.params.id
+      }
       api(this.apiName, params).then(json => {
         var responseName
         var objectName
@@ -687,6 +706,8 @@ export default {
         params.type = 'routing'
       } else if (possibleApi === 'listProjectRoles') {
         params.projectid = this.resource.id
+      } else if (possibleApi === 'listUsers') {
+        params.account = this.resource.account
       }
       api(possibleApi, params).then(json => {
         param.loading = false
diff --git a/src/views/project/AccountsTab.vue b/src/views/project/AccountsTab.vue
index 7eeaa3782..464015b9b 100644
--- a/src/views/project/AccountsTab.vue
+++ b/src/views/project/AccountsTab.vue
@@ -53,9 +53,12 @@
                 @click="demoteAccount(record)" />
             </a-tooltip>
             <a-tooltip placement="top">
-              <template slot="title">
+              <template v-if="record.userid === null" slot="title">
                 {{ $t('label.remove.project.account') }}
               </template>
+              <template v-else slot="title">
+                {{ $t('label.remove.project.user') }}
+              </template>
               <a-button
                 type="danger"
                 shape="circle"
@@ -113,7 +116,7 @@ export default {
       },
       {
         title: this.$t('label.user'),
-        dataIndex: 'user_id',
+        dataIndex: 'userid',
         width: '30%',
         scopedSlots: { customRender: 'user' }
       },
@@ -159,7 +162,6 @@ export default {
       api('listProjectAccounts', params).then(json => {
         const listProjectAccount = json.listprojectaccountsresponse.projectaccount
         const itemCount = json.listprojectaccountsresponse.count
-
         if (!listProjectAccount || listProjectAccount.length === 0) {
           this.dataSource = []
           return
@@ -184,21 +186,31 @@ export default {
       this.fetchData()
     },
     onMakeProjectOwner (record) {
-      const title = this.$t('label.make.project.owner')
+      var title = this.$t('label.make.project.owner')
       const loading = this.$message.loading(title + 'in progress for ' + record.account, 0)
       const params = {}
 
       params.projectid = this.resource.id
-      params.account = record.account
+      if (params.userid != null) {
+        params.userid = record.userid
+        title = this.$t('label.make.user.project.owner')
+      } else {
+        params.account = record.account
+      }
       params.roletype = this.owner
       this.updateProject(record, params, title, loading)
     },
     demoteAccount (record) {
-      const title = this.$t('label.demote.project.owner')
+      var title = this.$t('label.demote.project.owner')
       const loading = this.$message.loading(title + 'in progress for ' + record.account, 0)
       const params = {}
+      if (params.userid !== null) {
+        params.userid = record.userid
+        title = this.$t('label.demote.project.owner.user')
+      } else {
+        params.account = record.account
+      }
       params.projectid = this.resource.id
-      params.account = record.account
       params.roletype = 'Regular'
       this.updateProject(record, params, title, loading)
     },

From dfbd8a5bffb189036296dcd8f552fa04bb4c4299 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Tue, 9 Jun 2020 15:43:23 +0530
Subject: [PATCH 03/24] Refactored code - add user/account to project

---
 src/config/section/project.js                 |  36 +--
 src/locales/en.json                           |   2 +
 src/views/AutogenView.vue                     |  34 +--
 src/views/project/AccountsTab.vue             |   5 +-
 .../project/AddAccountOrUserToProject.vue     | 271 ++++++++++++++++++
 .../project/iam/ProjectRolePermissionTab.vue  |   1 -
 src/views/project/iam/ProjectRoleTab.vue      |  65 ++++-
 7 files changed, 343 insertions(+), 71 deletions(-)
 create mode 100644 src/views/project/AddAccountOrUserToProject.vue

diff --git a/src/config/section/project.js b/src/config/section/project.js
index 1710abee8..79f925334 100644
--- a/src/config/section/project.js
+++ b/src/config/section/project.js
@@ -106,41 +106,11 @@ export default {
     },
     {
       api: 'addAccountToProject',
-      icon: 'usergroup-add',
-      label: 'Add Account to Project',
-      dataView: true,
-      args: ['projectid', 'account', 'email', 'projectroleid', 'roletype'],
-      show: (record, store) => { return record.account === store.userInfo.account || ['Admin', 'DomainAdmin'].includes(store.userInfo.roletype) },
-      mapping: {
-        projectid: {
-          value: (record) => { return record.id }
-        }
-      }
-    },
-    {
-      api: 'addUserToProject',
       icon: 'user-add',
-      label: 'Add User to Project',
+      label: 'Add Account or User to Project',
       dataView: true,
-      args: ['projectid', 'userid', 'email', 'projectroleid', 'roletype'],
-      show: (record, store) => { return record.account === store.userInfo.account || ['Admin', 'DomainAdmin'].includes(store.userInfo.roletype) },
-      mapping: {
-        projectid: {
-          value: (record) => { return record.id }
-        }
-      }
-    },
-    {
-      api: 'createProjectRole',
-      icon: 'idcard',
-      label: 'label.add.project.role',
-      dataView: true,
-      args: ['projectid', 'name', 'description'],
-      mapping: {
-        projectid: {
-          value: (record) => { return record.id }
-        }
-      }
+      popup: true,
+      component: () => import('@/views/project/AddAccountOrUserToProject.vue')
     },
     {
       api: 'deleteProject',
diff --git a/src/locales/en.json b/src/locales/en.json
index 2595225f4..f3943b64d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -197,6 +197,7 @@
 "label.action.migrate.systemvm": "Migrate System VM",
 "label.action.migrate.systemvm.processing": "Migrating System VM....",
 "label.action.project.add.account": "Add Account to Project",
+"label.action.project.add.user": "Add User to Project",
 "label.action.reboot.instance": "Reboot Instance",
 "label.action.reboot.instance.processing": "Rebooting Instance....",
 "label.action.reboot.router": "Reboot Router",
@@ -1463,6 +1464,7 @@
 "label.project.invitation": "Project Invitations",
 "label.project.invite": "Invite to project",
 "label.project.name": "Project name",
+"label.project.role": "Project Role",
 "label.project.roles": "Project Roles",
 "label.project.role.permissions": "Project Role Permissions",
 "label.project.view": "Project View",
diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index 276aec3f3..7d9408ee8 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -180,32 +180,6 @@
                   </a-select-option>
                 </a-select>
               </span>
-              <span
-                v-else-if="field.name==='userid'">
-                <a-select
-                  showSearch
-                  optionFilterProp="children"
-                  v-decorator="[field.name, {
-                    rules: [{ required: field.required, message: 'Please select option' }]
-                  }]"
-                  :loading="field.loading"
-                  :placeholder="$t('label.user')"
-                >
-                  <a-select-option v-for="opt in field.opts" :key="opt.id">
-                    {{ opt.username }} ( {{ opt.id }} )
-                  </a-select-option>
-                </a-select>
-              </span>
-              <span v-else-if="field.name === 'roletype'">
-                <a-select
-                  showSearch
-                  optionFilterProp="children"
-                  v-decorator="[field.name]"
-                  :placeholder="$t('label.roletype')">
-                  <a-select-option value="Admin">Admin</a-select-option>
-                  <a-select-option value="Regular">Regular</a-select-option>
-                </a-select>
-              </span>
               <span
                 v-else-if="field.type==='uuid'">
                 <a-select
@@ -537,9 +511,6 @@ export default {
         delete params.treeView
       }
 
-      if (this.dataView && this.apiName === 'listProjects') {
-        params.projectid = this.$route.params.id
-      }
       api(this.apiName, params).then(json => {
         var responseName
         var objectName
@@ -704,11 +675,8 @@ export default {
         params.isofilter = 'executable'
       } else if (possibleApi === 'listHosts') {
         params.type = 'routing'
-      } else if (possibleApi === 'listProjectRoles') {
-        params.projectid = this.resource.id
-      } else if (possibleApi === 'listUsers') {
-        params.account = this.resource.account
       }
+
       api(possibleApi, params).then(json => {
         param.loading = false
         for (const obj in json) {
diff --git a/src/views/project/AccountsTab.vue b/src/views/project/AccountsTab.vue
index 464015b9b..bce0a6bcd 100644
--- a/src/views/project/AccountsTab.vue
+++ b/src/views/project/AccountsTab.vue
@@ -190,7 +190,7 @@ export default {
       const loading = this.$message.loading(title + 'in progress for ' + record.account, 0)
       const params = {}
 
-      params.projectid = this.resource.id
+      params.id = this.resource.id
       if (params.userid != null) {
         params.userid = record.userid
         title = this.$t('label.make.user.project.owner')
@@ -210,7 +210,8 @@ export default {
       } else {
         params.account = record.account
       }
-      params.projectid = this.resource.id
+
+      params.id = this.resource.id
       params.roletype = 'Regular'
       this.updateProject(record, params, title, loading)
     },
diff --git a/src/views/project/AddAccountOrUserToProject.vue b/src/views/project/AddAccountOrUserToProject.vue
new file mode 100644
index 000000000..707afff51
--- /dev/null
+++ b/src/views/project/AddAccountOrUserToProject.vue
@@ -0,0 +1,271 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you 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>
+    <a-tabs class="form-layout">
+      <a-tab-pane key="1" :tab="$t('label.action.project.add.account')">
+        <a-form
+          :form="form"
+          @submit="addAccountToProject"
+          layout="vertical">
+          <a-form-item :label="$t('label.account')">
+            <a-select
+              showSearch
+              v-decorator="['account']"
+              :loading="loading"
+              :placeholder="$t('label.account')"
+              @change="e => selectedAccount = e"
+            >
+              <a-select-option v-for="account in accounts" :key="account.name">
+                {{ account.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('label.email')">
+            <a-input v-decorator="[ 'email']"></a-input>
+          </a-form-item>
+          <a-form-item :label="$t('label.project.role')">
+            <a-select
+              showSearch
+              v-decorator="['projectroleid']"
+              :loading="loading"
+              :placeholder="$t('label.project.role')"
+            >
+              <a-select-option v-for="role in projectRoles" :key="role.id">
+                {{ role.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('label.roletype')">
+            <a-select
+              showSearch
+              v-decorator="['roletype']"
+              :placeholder="$t('label.roletype')">
+              <a-select-option value="Admin">Admin</a-select-option>
+              <a-select-option value="Regular">Regular</a-select-option>
+            </a-select>
+          </a-form-item>
+          <div :span="24" class="action-button">
+            <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+            <a-button type="primary" @click="addAccountToProject" :loading="loading">{{ $t('label.ok') }}</a-button>
+          </div>
+        </a-form>
+      </a-tab-pane>
+      <a-tab-pane key="2" :tab="$t('label.action.project.add.user')">
+        <a-form
+          :form="form"
+          @submit="addUserToProject"
+          layout="vertical">
+          <a-form-item :label="$t('label.user')">
+            <a-select
+              showSearch
+              v-decorator="['userid', {
+                rules: [{ required: true, message: 'Please select option' }]
+              }]"
+              @change="e => selectedUser = e"
+              :loading="loading"
+              :placeholder="$t('label.user')"
+            >
+              <a-select-option v-for="user in users" :key="user.id">
+                {{ user.username }} ( {{ user.id }} )
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('label.email')">
+            <a-input v-decorator="[ 'email']"></a-input>
+          </a-form-item>
+          <a-form-item :label="$t('label.project.role')">
+            <a-select
+              showSearch
+              v-decorator="['projectroleid']"
+              :loading="loading"
+              :placeholder="$t('label.project.role')"
+            >
+              <a-select-option v-for="role in projectRoles" :key="role.id">
+                {{ role.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('label.roletype')">
+            <a-select
+              showSearch
+              v-decorator="['roletype']"
+              :placeholder="$t('label.roletype')">
+              <a-select-option value="Admin">Admin</a-select-option>
+              <a-select-option value="Regular">Regular</a-select-option>
+            </a-select>
+          </a-form-item>
+          <div :span="24" class="action-button">
+            <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+            <a-button type="primary" @click="addUserToProject" :loading="loading">{{ $t('label.ok') }}</a-button>
+          </div>
+        </a-form>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+<script>
+import { api } from '@/api'
+export default {
+  name: 'AddAccountOrUserToProject',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      users: [],
+      accounts: [],
+      projectRoles: [],
+      selectedUser: null,
+      selectedAccount: null,
+      loading: false
+    }
+  },
+  mounted () {
+    this.fetchData()
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  methods: {
+    fetchData () {
+      this.fetchUsers()
+      this.fetchAccounts()
+      this.fetchProjectRoles()
+    },
+    fetchUsers () {
+      this.loading = true
+      api('listUsers').then(response => {
+        this.users = response.listusersresponse.user ? response.listusersresponse.user : []
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    fetchAccounts () {
+      this.loading = true
+      api('listAccounts', {
+        domainid: this.resource.domainid
+      }).then(response => {
+        this.accounts = response.listaccountsresponse.account || []
+      }).catch(error => {
+        this.$notifyError(error)
+      })
+    },
+    fetchProjectRoles () {
+      this.loading = true
+      api('listProjectRoles', {
+        projectid: this.resource.id
+      }).then(response => {
+        this.projectRoles = response.listprojectrolesresponse.projectrole || []
+      }).catch(error => {
+        this.$notifyError(error)
+      })
+    },
+    addAccountToProject (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+
+        var params = {}
+        params.projectid = this.resource.id
+        for (const key in values) {
+          const input = values[key]
+          if (input === undefined) {
+            continue
+          }
+          params[key] = input
+        }
+        api('addAccountToProject', params).then(response => {
+          this.$pollJob({
+            jobId: response.addaccounttoprojectresponse.jobid,
+            successMessage: `Successfully added account ${this.selectedAccount} to project`,
+            errorMessage: `Failed to add account: ${this.selectedAccount} to project`,
+            loadingMessage: `Adding Account: ${this.selectedAccount} to project...`,
+            catchMessage: 'Error encountered while fetching async job result'
+          })
+        }).catch(error => {
+          this.$notifyError(error)
+        }).finally(() => {
+          this.$emit('refresh-data')
+          this.loading = false
+          this.closeAction()
+        })
+      })
+    },
+    addUserToProject (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+
+        var params = {}
+        params.projectid = this.resource.id
+        for (const key in values) {
+          const input = values[key]
+          if (input === undefined) {
+            continue
+          }
+          params[key] = input
+        }
+        const user = this.users.filter(user => user.id === this.selectedUser)[0]
+        api('addUserToProject', params).then(response => {
+          this.$pollJob({
+            jobId: response.addusertoprojectresponse.jobid,
+            successMessage: `Successfully added user ${user.username} to project`,
+            errorMessage: `Failed to add user: ${user.username} to project`,
+            loadingMessage: `Adding User ${user.username} to project...`,
+            catchMessage: 'Error encountered while fetching async job result'
+          })
+        }).catch(error => {
+          this.$notifyError(error)
+        }).finally(() => {
+          this.$emit('refresh-data')
+          this.loading = false
+          this.closeAction()
+        })
+      })
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .form-layout {
+    width: 80vw;
+
+    @media (min-width: 600px) {
+      width: 450px;
+    }
+  }
+.action-button {
+    text-align: right;
+
+    button {
+      margin-right: 5px;
+    }
+  }
+</style>
diff --git a/src/views/project/iam/ProjectRolePermissionTab.vue b/src/views/project/iam/ProjectRolePermissionTab.vue
index d14ba435a..9338c8ac1 100644
--- a/src/views/project/iam/ProjectRolePermissionTab.vue
+++ b/src/views/project/iam/ProjectRolePermissionTab.vue
@@ -164,7 +164,6 @@ export default {
       this.newRuleSelectError = false
     },
     fetchData (callback = null) {
-      console.log('res = ', this.resource)
       if (!this.resource.id) return
       api('listProjectRolePermissions', {
         projectid: this.resource.id,
diff --git a/src/views/project/iam/ProjectRoleTab.vue b/src/views/project/iam/ProjectRoleTab.vue
index cd7ccf630..ac113c9e0 100644
--- a/src/views/project/iam/ProjectRoleTab.vue
+++ b/src/views/project/iam/ProjectRoleTab.vue
@@ -17,6 +17,9 @@
 
 <template>
   <div>
+    <a-button type="dashed" icon="plus" style="width: 100%; margin-bottom: 15px" @click="openCreateModal">
+      {{ $t('label.create.project.role') }}
+    </a-button>
     <a-row :gutter="12">
       <a-col :md="24" :lg="24">
         <a-table
@@ -25,7 +28,7 @@
           :columns="columns"
           :dataSource="dataSource"
           :rowKey="record => record.projectid"
-          pagination="false">
+          :pagination="false">
           <template slot="expandedRowRender" slot-scope="record">
             <ProjectRolePermissionTab class="table" style="margin-top:30px; margin-left: -40px; margin-right: 10px" :resource="resource" :role="record"/>
           </template>
@@ -102,6 +105,25 @@
             </span>
           </a-form>
         </a-modal>
+
+        <a-modal title="Create Project Role" v-model="createModalVisible" :footer="null" :afterClose="closeAction">
+          <a-form
+            :form="form"
+            @submit="createProjectRole"
+            layout="vertical">
+            <a-form-item :label="$t('label.name')">
+              <a-input v-decorator="[ 'name', { rules: [{ required: true, message: 'Please provide input' }] }]"></a-input>
+            </a-form-item>
+            <a-form-item :label="$t('label.description')">
+              <a-input v-decorator="[ 'description' ]"></a-input>
+            </a-form-item>
+            <div :span="24" class="action-button">
+              <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+              <a-button type="primary" @click="createProjectRole" :loading="loading">{{ $t('label.ok') }}</a-button>
+            </div>
+          </a-form>
+        </a-modal>
+
       </a-col>
     </a-row>
   </div>
@@ -125,6 +147,7 @@ export default {
       columns: [],
       dataSource: [],
       loading: false,
+      createModalVisible: false,
       editModalVisible: false,
       selectedRole: null,
       projectPermisssions: [],
@@ -189,6 +212,9 @@ export default {
       this.selectedRole = role
       this.editModalVisible = true
     },
+    openCreateModal () {
+      this.createModalVisible = true
+    },
     updateProjectRole (e) {
       e.preventDefault()
       this.form.validateFields((err, values) => {
@@ -220,7 +246,42 @@ export default {
       })
     },
     closeAction () {
-      this.editModalVisible = false
+      if (this.editModalVisible) {
+        this.editModalVisible = false
+      }
+      if (this.createModalVisible) {
+        this.createModalVisible = false
+      }
+    },
+    createProjectRole (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+        var params = {}
+        params.projectid = this.resource.id
+        for (const key in values) {
+          const input = values[key]
+          if (input === undefined) {
+            continue
+          }
+          params[key] = input
+        }
+        console.log('params', params)
+        api('createProjectRole', params).then(response => {
+          this.$notification.success({
+            message: this.$t('label.create.project.role'),
+            description: this.$t('label.create.project.role')
+          })
+        }).catch(error => {
+          this.$notifyError(error)
+        }).finally(() => {
+          this.loading = false
+          this.fetchData()
+          this.closeAction()
+        })
+      })
     },
     deleteProjectRole (role) {
       api('deleteProjectRole', {

From 25594cfdbf584dfca9406f6f83cee156b4f2b0a5 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Thu, 11 Jun 2020 11:46:49 +0530
Subject: [PATCH 04/24] Refactor proj invitation for users + visibility checks

---
 src/config/section/project.js                 |  7 +-
 src/locales/en.json                           |  1 +
 src/store/getters.js                          |  3 +-
 src/store/modules/user.js                     |  9 +-
 src/views/project/AccountsTab.vue             | 87 ++++++++++++++-----
 .../project/AddAccountOrUserToProject.vue     |  2 +-
 src/views/project/InvitationsTemplate.vue     |  7 +-
 7 files changed, 84 insertions(+), 32 deletions(-)

diff --git a/src/config/section/project.js b/src/config/section/project.js
index 79f925334..73fa1043d 100644
--- a/src/config/section/project.js
+++ b/src/config/section/project.js
@@ -37,15 +37,12 @@ export default {
     },
     {
       name: 'accounts',
-      // TODO: revert
-      show: () => { return true },
-      // show: (record, route, user) => { return record.account === user.account },
-      // || ['Admin', 'DomainAdmin'].includes(user.roletype) },
+      show: () => { return store.getters.userInfo.roletype !== 'User' },
       component: () => import('@/views/project/AccountsTab.vue')
     },
     {
       name: 'project.roles',
-      show: () => { return 'listProjectRoles' in store.getters.apis },
+      show: () => { return store.getters.userInfo.roletype !== 'User' },
       component: () => import('@/views/project/iam/ProjectRoleTab.vue')
     },
     {
diff --git a/src/locales/en.json b/src/locales/en.json
index f3943b64d..204b340c9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -639,6 +639,7 @@
 "label.deleting.failed": "Deleting Failed",
 "label.deleting.processing": "Deleting....",
 "label.demote.project.owner": "Demote account to Regular role",
+"label.demote.project.owner.user": "Demote user to Regular role",
 "label.deny": "Deny",
 "label.deploymentplanner": "Deployment planner",
 "label.description": "Description",
diff --git a/src/store/getters.js b/src/store/getters.js
index fba66a8a1..6e773c333 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -30,7 +30,8 @@ const getters = {
   multiTab: state => state.app.multiTab,
   asyncJobIds: state => state.user.asyncJobIds,
   isLdapEnabled: state => state.user.isLdapEnabled,
-  cloudian: state => state.user.cloudian
+  cloudian: state => state.user.cloudian,
+  loggedInUser: state => state.user.loggedInUser
 }
 
 export default getters
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index ad7497cf4..983bd3b1b 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -35,7 +35,8 @@ const user = {
     project: {},
     asyncJobIds: [],
     isLdapEnabled: false,
-    cloudian: {}
+    cloudian: {},
+    loggedInUser: ''
   },
 
   mutations: {
@@ -74,6 +75,9 @@ const user = {
     },
     RESET_THEME: (state) => {
       Vue.ls.set(DEFAULT_THEME, 'light')
+    },
+    SET_LOGGED_IN_USER: (state, loggedInUser) => {
+      state.loggedInUser = loggedInUser
     }
   },
 
@@ -95,7 +99,6 @@ const user = {
           Cookies.set('userfullname', result.firstname + ' ' + result.lastname, { expires: 1 })
           Cookies.set('userid', result.userid, { expires: 1 })
           Cookies.set('username', result.username, { expires: 1 })
-
           Vue.ls.set(ACCESS_TOKEN, result.sessionkey, 24 * 60 * 60 * 1000)
           commit('SET_TOKEN', result.sessionkey)
 
@@ -108,7 +111,9 @@ const user = {
           commit('SET_FEATURES', {})
           commit('SET_LDAP', {})
           commit('SET_CLOUDIAN', {})
+          commit('SET_LOGGED_IN_USER', {})
 
+          commit('SET_LOGGED_IN_USER', result.username)
           resolve()
         }).catch(error => {
           reject(error)
diff --git a/src/views/project/AccountsTab.vue b/src/views/project/AccountsTab.vue
index bce0a6bcd..6a2f8f4b9 100644
--- a/src/views/project/AccountsTab.vue
+++ b/src/views/project/AccountsTab.vue
@@ -25,11 +25,17 @@
           :columns="columns"
           :dataSource="dataSource"
           :pagination="false"
-          :rowKey="record => record.accountid || record.account"
+          :rowKey="record => record.userid ? record.userid: (record.accountid || record.account)"
         >
-          <span slot="action" v-if="record.role!==owner || (record.role === owner && record.account !== resource.account)" slot-scope="text, record" class="account-button-action">
+          <span slot="user" slot-scope="text, record" v-if="record.userid">
+            {{ getUserName(record) }}
+          </span>
+          <span slot="action" slot-scope="text, record" class="account-button-action">
             <a-tooltip placement="top">
-              <template slot="title">
+              <template v-if="record.userid" slot="title">
+                {{ $t('label.make.user.project.owner') }}
+              </template>
+              <template v-else slot="title">
                 {{ $t('label.make.project.owner') }}
               </template>
               <a-button
@@ -38,14 +44,17 @@
                 shape="circle"
                 icon="arrow-up"
                 size="small"
-                @click="onMakeProjectOwner(record)" />
+                @click="promoteAccount(record)" />
             </a-tooltip>
             <a-tooltip placement="top">
-              <template slot="title">
+              <template v-if="record.userid" slot="title">
+                {{ $t('label.demote.project.owner.user') }}
+              </template>
+              <template v-else slot="title">
                 {{ $t('label.demote.project.owner') }}
               </template>
               <a-button
-                v-if="record.role===owner"
+                v-if="record.role === owner"
                 type="default"
                 shape="circle"
                 icon="arrow-down"
@@ -53,13 +62,14 @@
                 @click="demoteAccount(record)" />
             </a-tooltip>
             <a-tooltip placement="top">
-              <template v-if="record.userid === null" slot="title">
-                {{ $t('label.remove.project.account') }}
+              <template v-if="record.userid" slot="title">
+                {{ $t('label.remove.project.user') }}
               </template>
               <template v-else slot="title">
-                {{ $t('label.remove.project.user') }}
+                {{ $t('label.remove.project.account') }}
               </template>
               <a-button
+                v-if="!isLoggedInUser(record)"
                 type="danger"
                 shape="circle"
                 icon="delete"
@@ -103,7 +113,8 @@ export default {
       page: 1,
       pageSize: 10,
       itemCount: 0,
-      owner: 'Admin'
+      owner: 'Admin',
+      role: 'Regular'
     }
   },
   created () {
@@ -121,15 +132,16 @@ export default {
         scopedSlots: { customRender: 'user' }
       },
       {
-        title: this.$t('label.role'),
+        title: this.$t('label.roletype'),
         dataIndex: 'role',
+        width: '20%',
         scopedSlots: { customRender: 'role' }
       },
       {
         title: this.$t('label.action'),
         dataIndex: 'action',
         fixed: 'right',
-        width: 100,
+        width: '30%',
         scopedSlots: { customRender: 'action' }
       }
     ]
@@ -158,7 +170,6 @@ export default {
       params.pageSize = this.pageSize
 
       this.loading = true
-
       api('listProjectAccounts', params).then(json => {
         const listProjectAccount = json.listprojectaccountsresponse.projectaccount
         const itemCount = json.listprojectaccountsresponse.count
@@ -185,27 +196,54 @@ export default {
       this.pageSize = pageSize
       this.fetchData()
     },
+    isLoggedInUser (record) {
+      const uname = this.getUserName(record)
+      var status = false
+      if (record.userid) {
+        status = uname !== null && uname === this.$store.getters.loggedInUser
+      } else {
+        status = record.account === this.$store.getters.userInfo.account
+      }
+      return status
+    },
+    getUserName (record) {
+      if (record.userid && record.userid !== null) {
+        return record.user ? record.user[0].username : record.userid
+      }
+      return null
+    },
     onMakeProjectOwner (record) {
+      const title = this.$t('label.make.project.owner')
+      const loading = this.$message.loading(title + 'in progress for ' + record.account, 0)
+      const params = {}
+      params.id = this.resource.id
+      params.account = record.account
+      this.updateProject(record, params, title, loading)
+    },
+    promoteAccount (record) {
       var title = this.$t('label.make.project.owner')
       const loading = this.$message.loading(title + 'in progress for ' + record.account, 0)
       const params = {}
 
       params.id = this.resource.id
-      if (params.userid != null) {
+      if (record.userid && record.userid !== null) {
         params.userid = record.userid
+        params.accountid = record.user[0].accountid
         title = this.$t('label.make.user.project.owner')
       } else {
         params.account = record.account
       }
       params.roletype = this.owner
+      params.swapowner = false
       this.updateProject(record, params, title, loading)
     },
     demoteAccount (record) {
       var title = this.$t('label.demote.project.owner')
       const loading = this.$message.loading(title + 'in progress for ' + record.account, 0)
       const params = {}
-      if (params.userid !== null) {
+      if (record.userid && record.userid !== null) {
         params.userid = record.userid
+        params.accountid = record.user[0].accountid
         title = this.$t('label.demote.project.owner.user')
       } else {
         params.account = record.account
@@ -213,6 +251,7 @@ export default {
 
       params.id = this.resource.id
       params.roletype = 'Regular'
+      params.swapowner = false
       this.updateProject(record, params, title, loading)
     },
     updateProject (record, params, title, loading) {
@@ -244,20 +283,24 @@ export default {
     },
     removeAccount (record) {
       const title = this.$t('label.remove.project.account')
-      const loading = this.$message.loading(title + 'in progress for ' + record.account, 0)
+      const loading = this.$message.loading(title + ' in progress for ' + record.account, 0)
       const params = {}
-
-      params.account = record.account
       params.projectid = this.resource.id
-
-      api('deleteAccountFromProject', params).then(json => {
+      if (record.userid && record.userid != null) {
+        params.userid = record.userid
+        this.deleteOperation('deleteUserFromProject', params, record, title, loading)
+      } else {
+        params.account = record.account
+        this.deleteOperation('deleteAccountFromProject', params, record, title, loading)
+      }
+    },
+    deleteOperation (cmdName, params, record, title, loading) {
+      api(cmdName, params).then(json => {
         const hasJobId = this.checkForAddAsyncJob(json, title, record.account)
-
         if (hasJobId) {
           this.fetchData()
         }
       }).catch(error => {
-        // show error
         this.$notifyError(error)
       }).finally(() => {
         setTimeout(loading, 1000)
diff --git a/src/views/project/AddAccountOrUserToProject.vue b/src/views/project/AddAccountOrUserToProject.vue
index 707afff51..14f67811a 100644
--- a/src/views/project/AddAccountOrUserToProject.vue
+++ b/src/views/project/AddAccountOrUserToProject.vue
@@ -152,7 +152,7 @@ export default {
     },
     fetchUsers () {
       this.loading = true
-      api('listUsers').then(response => {
+      api('listUsers', { listall: true }).then(response => {
         this.users = response.listusersresponse.user ? response.listusersresponse.user : []
       }).catch(error => {
         this.$notifyError(error)
diff --git a/src/views/project/InvitationsTemplate.vue b/src/views/project/InvitationsTemplate.vue
index 73454dc54..43d938417 100644
--- a/src/views/project/InvitationsTemplate.vue
+++ b/src/views/project/InvitationsTemplate.vue
@@ -111,6 +111,11 @@ export default {
         dataIndex: 'project',
         scopedSlots: { customRender: 'project' }
       },
+      {
+        title: this.$t('label.account'),
+        dataIndex: 'account',
+        scopedSlots: { customRender: 'account' }
+      },
       {
         title: this.$t('label.user'),
         dataIndex: 'userid',
@@ -226,7 +231,7 @@ export default {
       const params = {}
 
       params.projectid = record.projectid
-      if (record.userid !== null) {
+      if (record.userid && record.userid !== null) {
         params.userid = record.userid
       } else {
         params.account = record.account

From 399282c4628b4e85e022b0b648470755f3253feb Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Thu, 11 Jun 2020 11:46:49 +0530
Subject: [PATCH 05/24] Refactor proj invitation for users + visibility checks

---
 src/config/section/project.js                 |  7 +-
 src/locales/en.json                           |  1 +
 src/store/getters.js                          |  3 +-
 src/store/modules/user.js                     |  9 +-
 src/views/project/AccountsTab.vue             | 91 ++++++++++++++-----
 .../project/AddAccountOrUserToProject.vue     |  2 +-
 src/views/project/InvitationsTemplate.vue     |  7 +-
 7 files changed, 86 insertions(+), 34 deletions(-)

diff --git a/src/config/section/project.js b/src/config/section/project.js
index 79f925334..73fa1043d 100644
--- a/src/config/section/project.js
+++ b/src/config/section/project.js
@@ -37,15 +37,12 @@ export default {
     },
     {
       name: 'accounts',
-      // TODO: revert
-      show: () => { return true },
-      // show: (record, route, user) => { return record.account === user.account },
-      // || ['Admin', 'DomainAdmin'].includes(user.roletype) },
+      show: () => { return store.getters.userInfo.roletype !== 'User' },
       component: () => import('@/views/project/AccountsTab.vue')
     },
     {
       name: 'project.roles',
-      show: () => { return 'listProjectRoles' in store.getters.apis },
+      show: () => { return store.getters.userInfo.roletype !== 'User' },
       component: () => import('@/views/project/iam/ProjectRoleTab.vue')
     },
     {
diff --git a/src/locales/en.json b/src/locales/en.json
index f3943b64d..204b340c9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -639,6 +639,7 @@
 "label.deleting.failed": "Deleting Failed",
 "label.deleting.processing": "Deleting....",
 "label.demote.project.owner": "Demote account to Regular role",
+"label.demote.project.owner.user": "Demote user to Regular role",
 "label.deny": "Deny",
 "label.deploymentplanner": "Deployment planner",
 "label.description": "Description",
diff --git a/src/store/getters.js b/src/store/getters.js
index fba66a8a1..6e773c333 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -30,7 +30,8 @@ const getters = {
   multiTab: state => state.app.multiTab,
   asyncJobIds: state => state.user.asyncJobIds,
   isLdapEnabled: state => state.user.isLdapEnabled,
-  cloudian: state => state.user.cloudian
+  cloudian: state => state.user.cloudian,
+  loggedInUser: state => state.user.loggedInUser
 }
 
 export default getters
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index ad7497cf4..983bd3b1b 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -35,7 +35,8 @@ const user = {
     project: {},
     asyncJobIds: [],
     isLdapEnabled: false,
-    cloudian: {}
+    cloudian: {},
+    loggedInUser: ''
   },
 
   mutations: {
@@ -74,6 +75,9 @@ const user = {
     },
     RESET_THEME: (state) => {
       Vue.ls.set(DEFAULT_THEME, 'light')
+    },
+    SET_LOGGED_IN_USER: (state, loggedInUser) => {
+      state.loggedInUser = loggedInUser
     }
   },
 
@@ -95,7 +99,6 @@ const user = {
           Cookies.set('userfullname', result.firstname + ' ' + result.lastname, { expires: 1 })
           Cookies.set('userid', result.userid, { expires: 1 })
           Cookies.set('username', result.username, { expires: 1 })
-
           Vue.ls.set(ACCESS_TOKEN, result.sessionkey, 24 * 60 * 60 * 1000)
           commit('SET_TOKEN', result.sessionkey)
 
@@ -108,7 +111,9 @@ const user = {
           commit('SET_FEATURES', {})
           commit('SET_LDAP', {})
           commit('SET_CLOUDIAN', {})
+          commit('SET_LOGGED_IN_USER', {})
 
+          commit('SET_LOGGED_IN_USER', result.username)
           resolve()
         }).catch(error => {
           reject(error)
diff --git a/src/views/project/AccountsTab.vue b/src/views/project/AccountsTab.vue
index bce0a6bcd..b0303d428 100644
--- a/src/views/project/AccountsTab.vue
+++ b/src/views/project/AccountsTab.vue
@@ -25,11 +25,17 @@
           :columns="columns"
           :dataSource="dataSource"
           :pagination="false"
-          :rowKey="record => record.accountid || record.account"
+          :rowKey="record => record.userid ? record.userid: (record.accountid || record.account)"
         >
-          <span slot="action" v-if="record.role!==owner || (record.role === owner && record.account !== resource.account)" slot-scope="text, record" class="account-button-action">
+          <span slot="user" slot-scope="text, record" v-if="record.userid">
+            {{ getUserName(record) }}
+          </span>
+          <span slot="action" slot-scope="text, record" class="account-button-action">
             <a-tooltip placement="top">
-              <template slot="title">
+              <template v-if="record.userid" slot="title">
+                {{ $t('label.make.user.project.owner') }}
+              </template>
+              <template v-else slot="title">
                 {{ $t('label.make.project.owner') }}
               </template>
               <a-button
@@ -38,14 +44,17 @@
                 shape="circle"
                 icon="arrow-up"
                 size="small"
-                @click="onMakeProjectOwner(record)" />
+                @click="promoteAccount(record)" />
             </a-tooltip>
             <a-tooltip placement="top">
-              <template slot="title">
+              <template v-if="record.userid" slot="title">
+                {{ $t('label.demote.project.owner.user') }}
+              </template>
+              <template v-else slot="title">
                 {{ $t('label.demote.project.owner') }}
               </template>
               <a-button
-                v-if="record.role===owner"
+                v-if="record.role === owner"
                 type="default"
                 shape="circle"
                 icon="arrow-down"
@@ -53,13 +62,14 @@
                 @click="demoteAccount(record)" />
             </a-tooltip>
             <a-tooltip placement="top">
-              <template v-if="record.userid === null" slot="title">
-                {{ $t('label.remove.project.account') }}
+              <template v-if="record.userid" slot="title">
+                {{ $t('label.remove.project.user') }}
               </template>
               <template v-else slot="title">
-                {{ $t('label.remove.project.user') }}
+                {{ $t('label.remove.project.account') }}
               </template>
               <a-button
+                v-if="!isLoggedInUser(record)"
                 type="danger"
                 shape="circle"
                 icon="delete"
@@ -103,7 +113,8 @@ export default {
       page: 1,
       pageSize: 10,
       itemCount: 0,
-      owner: 'Admin'
+      owner: 'Admin',
+      role: 'Regular'
     }
   },
   created () {
@@ -121,15 +132,16 @@ export default {
         scopedSlots: { customRender: 'user' }
       },
       {
-        title: this.$t('label.role'),
+        title: this.$t('label.roletype'),
         dataIndex: 'role',
+        width: '20%',
         scopedSlots: { customRender: 'role' }
       },
       {
         title: this.$t('label.action'),
         dataIndex: 'action',
         fixed: 'right',
-        width: 100,
+        width: '30%',
         scopedSlots: { customRender: 'action' }
       }
     ]
@@ -158,7 +170,6 @@ export default {
       params.pageSize = this.pageSize
 
       this.loading = true
-
       api('listProjectAccounts', params).then(json => {
         const listProjectAccount = json.listprojectaccountsresponse.projectaccount
         const itemCount = json.listprojectaccountsresponse.count
@@ -185,27 +196,54 @@ export default {
       this.pageSize = pageSize
       this.fetchData()
     },
+    isLoggedInUser (record) {
+      const uname = this.getUserName(record)
+      var status = false
+      if (record.userid) {
+        status = uname !== null && uname === this.$store.getters.loggedInUser
+      } else {
+        status = record.account === this.$store.getters.userInfo.account
+      }
+      return status
+    },
+    getUserName (record) {
+      if (record.userid && record.userid !== null) {
+        return record.user ? record.user[0].username : record.userid
+      }
+      return null
+    },
     onMakeProjectOwner (record) {
+      const title = this.$t('label.make.project.owner')
+      const loading = this.$message.loading(title + ' in progress for ' + record.account, 0)
+      const params = {}
+      params.id = this.resource.id
+      params.account = record.account
+      this.updateProject(record, params, title, loading)
+    },
+    promoteAccount (record) {
       var title = this.$t('label.make.project.owner')
-      const loading = this.$message.loading(title + 'in progress for ' + record.account, 0)
+      const loading = this.$message.loading(title + ' in progress for ' + record.account, 0)
       const params = {}
 
       params.id = this.resource.id
-      if (params.userid != null) {
+      if (record.userid && record.userid !== null) {
         params.userid = record.userid
+        params.accountid = record.user[0].accountid
         title = this.$t('label.make.user.project.owner')
       } else {
         params.account = record.account
       }
       params.roletype = this.owner
+      params.swapowner = false
       this.updateProject(record, params, title, loading)
     },
     demoteAccount (record) {
       var title = this.$t('label.demote.project.owner')
-      const loading = this.$message.loading(title + 'in progress for ' + record.account, 0)
+      const loading = this.$message.loading(title + ' in progress for ' + record.account, 0)
       const params = {}
-      if (params.userid !== null) {
+      if (record.userid && record.userid !== null) {
         params.userid = record.userid
+        params.accountid = record.user[0].accountid
         title = this.$t('label.demote.project.owner.user')
       } else {
         params.account = record.account
@@ -213,6 +251,7 @@ export default {
 
       params.id = this.resource.id
       params.roletype = 'Regular'
+      params.swapowner = false
       this.updateProject(record, params, title, loading)
     },
     updateProject (record, params, title, loading) {
@@ -244,20 +283,24 @@ export default {
     },
     removeAccount (record) {
       const title = this.$t('label.remove.project.account')
-      const loading = this.$message.loading(title + 'in progress for ' + record.account, 0)
+      const loading = this.$message.loading(title + ' in progress for ' + record.account, 0)
       const params = {}
-
-      params.account = record.account
       params.projectid = this.resource.id
-
-      api('deleteAccountFromProject', params).then(json => {
+      if (record.userid && record.userid != null) {
+        params.userid = record.userid
+        this.deleteOperation('deleteUserFromProject', params, record, title, loading)
+      } else {
+        params.account = record.account
+        this.deleteOperation('deleteAccountFromProject', params, record, title, loading)
+      }
+    },
+    deleteOperation (cmdName, params, record, title, loading) {
+      api(cmdName, params).then(json => {
         const hasJobId = this.checkForAddAsyncJob(json, title, record.account)
-
         if (hasJobId) {
           this.fetchData()
         }
       }).catch(error => {
-        // show error
         this.$notifyError(error)
       }).finally(() => {
         setTimeout(loading, 1000)
diff --git a/src/views/project/AddAccountOrUserToProject.vue b/src/views/project/AddAccountOrUserToProject.vue
index 707afff51..14f67811a 100644
--- a/src/views/project/AddAccountOrUserToProject.vue
+++ b/src/views/project/AddAccountOrUserToProject.vue
@@ -152,7 +152,7 @@ export default {
     },
     fetchUsers () {
       this.loading = true
-      api('listUsers').then(response => {
+      api('listUsers', { listall: true }).then(response => {
         this.users = response.listusersresponse.user ? response.listusersresponse.user : []
       }).catch(error => {
         this.$notifyError(error)
diff --git a/src/views/project/InvitationsTemplate.vue b/src/views/project/InvitationsTemplate.vue
index 73454dc54..43d938417 100644
--- a/src/views/project/InvitationsTemplate.vue
+++ b/src/views/project/InvitationsTemplate.vue
@@ -111,6 +111,11 @@ export default {
         dataIndex: 'project',
         scopedSlots: { customRender: 'project' }
       },
+      {
+        title: this.$t('label.account'),
+        dataIndex: 'account',
+        scopedSlots: { customRender: 'account' }
+      },
       {
         title: this.$t('label.user'),
         dataIndex: 'userid',
@@ -226,7 +231,7 @@ export default {
       const params = {}
 
       params.projectid = record.projectid
-      if (record.userid !== null) {
+      if (record.userid && record.userid !== null) {
         params.userid = record.userid
       } else {
         params.account = record.account

From 971ae23f1129858e2d2fcaf5472b9e2fe4cdf3df Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Thu, 18 Jun 2020 17:47:51 +0530
Subject: [PATCH 06/24] Tab visibility for proj owners + multiple admins to be
 listed in List view of projects

---
 src/components/view/ResourceView.vue          | 27 +++++-
 src/config/section/project.js                 | 14 ++-
 src/locales/en.json                           |  2 +
 src/store/modules/user.js                     | 10 +-
 src/views/AutogenView.vue                     | 29 ++++++
 src/views/project/AccountsTab.vue             | 93 ++++++++++++++-----
 .../project/AddAccountOrUserToProject.vue     | 72 ++++++++++++--
 src/views/project/iam/ProjectRoleTab.vue      |  1 -
 8 files changed, 203 insertions(+), 45 deletions(-)

diff --git a/src/components/view/ResourceView.vue b/src/components/view/ResourceView.vue
index f3f79e279..acb57cd76 100644
--- a/src/components/view/ResourceView.vue
+++ b/src/components/view/ResourceView.vue
@@ -88,7 +88,8 @@ export default {
   data () {
     return {
       activeTab: '',
-      networkService: null
+      networkService: null,
+      projectAccount: null
     }
   },
   watch: {
@@ -101,6 +102,19 @@ export default {
           this.networkService = response.listnetworksresponse.network[0]
         })
       }
+      if (this.resource.projectaccountname) {
+        var projectAccountList = []
+        api('listProjectAccounts', { projectid: this.resource.id }).then(response => {
+          projectAccountList = response.listprojectaccountsresponse.projectaccount
+          for (var pa in projectAccountList) {
+            if ((projectAccountList[pa].userid && 'fetchUser(projectAccountList[pa].userid)'.username === this.$store.getters.userInfo.username) ||
+              projectAccountList[pa].account === this.$store.getters.userInfo.account) {
+              this.projectAccount = projectAccountList[pa]
+              break
+            }
+          }
+        })
+      }
     }
   },
   methods: {
@@ -117,11 +131,22 @@ export default {
         }
         return this.networkService && this.networkService.service &&
           tab.networkServiceFilter(this.networkService.service)
+      } else if ('projectAccountFilter' in tab) {
+        return tab.projectAccountFilter(this.projectAccount)
       } else if ('show' in tab) {
         return tab.show(this.resource, this.$route, this.$store.getters.userInfo)
       } else {
         return true
       }
+    },
+    fetchUser (userId) {
+      var user = null
+      api('listUsers', { listall: true }).then(response => {
+        var users = response.listusersresponse.user
+        users = users.filter(user => user.id === userId)
+        user = users[0]
+      })
+      return user
     }
   }
 }
diff --git a/src/config/section/project.js b/src/config/section/project.js
index 73fa1043d..599a2d9c8 100644
--- a/src/config/section/project.js
+++ b/src/config/section/project.js
@@ -37,13 +37,19 @@ export default {
     },
     {
       name: 'accounts',
-      show: () => { return store.getters.userInfo.roletype !== 'User' },
-      component: () => import('@/views/project/AccountsTab.vue')
+      component: () => import('@/views/project/AccountsTab.vue'),
+      projectAccountFilter: projectAccount => {
+        return (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype) ||
+        projectAccount && projectAccount.role === 'Admin')
+      }
     },
     {
       name: 'project.roles',
-      show: () => { return store.getters.userInfo.roletype !== 'User' },
-      component: () => import('@/views/project/iam/ProjectRoleTab.vue')
+      component: () => import('@/views/project/iam/ProjectRoleTab.vue'),
+      projectAccountFilter: projectAccount => {
+        return (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype) ||
+        projectAccount && projectAccount.role === 'Admin')
+      }
     },
     {
       name: 'limits',
diff --git a/src/locales/en.json b/src/locales/en.json
index 204b340c9..2e430530f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1465,6 +1465,7 @@
 "label.project.invitation": "Project Invitations",
 "label.project.invite": "Invite to project",
 "label.project.name": "Project name",
+"label.project.owner": "Project Owner(s)",
 "label.project.role": "Project Role",
 "label.project.roles": "Project Roles",
 "label.project.role.permissions": "Project Role Permissions",
@@ -2221,6 +2222,7 @@
 "message.add.service.offering": "Please fill in the following data to add a new compute offering.",
 "message.add.system.service.offering": "Please fill in the following data to add a new system service offering.",
 "message.add.template": "Please enter the following data to create your new template",
+"message.add.user.to.project": "This form is to enable adding specific users of an account to a project.<br>Furthermore, a ProjectRole may be added to the added user/account to allow/disallow API access at project level.<br> We can also specify the role with which the user should be added to a project - Admin/Regular; if not specified, it defaults to 'Regular'",
 "message.add.volume": "Please fill in the following data to add a new volume.",
 "message.add.vpn.gateway": "Please confirm that you want to add a VPN Gateway",
 "message.added.vpc.offering": "Added VPC offering",
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 983bd3b1b..fc688577b 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -35,8 +35,7 @@ const user = {
     project: {},
     asyncJobIds: [],
     isLdapEnabled: false,
-    cloudian: {},
-    loggedInUser: ''
+    cloudian: {}
   },
 
   mutations: {
@@ -75,9 +74,6 @@ const user = {
     },
     RESET_THEME: (state) => {
       Vue.ls.set(DEFAULT_THEME, 'light')
-    },
-    SET_LOGGED_IN_USER: (state, loggedInUser) => {
-      state.loggedInUser = loggedInUser
     }
   },
 
@@ -89,7 +85,7 @@ const user = {
       return new Promise((resolve, reject) => {
         login(userInfo).then(response => {
           const result = response.loginresponse || {}
-
+          console.log('sessionKey = ', result.sessionkey)
           Cookies.set('account', result.account, { expires: 1 })
           Cookies.set('domainid', result.domainid, { expires: 1 })
           Cookies.set('role', result.type, { expires: 1 })
@@ -111,9 +107,7 @@ const user = {
           commit('SET_FEATURES', {})
           commit('SET_LDAP', {})
           commit('SET_CLOUDIAN', {})
-          commit('SET_LOGGED_IN_USER', {})
 
-          commit('SET_LOGGED_IN_USER', result.username)
           resolve()
         }).catch(error => {
           reject(error)
diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index 7d9408ee8..53ebca011 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -536,6 +536,29 @@ export default {
         if (['listTemplates', 'listIsos'].includes(this.apiName) && this.items.length > 1) {
           this.items = [...new Map(this.items.map(x => [x.id, x])).values()]
         }
+        if (this.apiName === 'listProjects' && this.items.length > 0) {
+          for (var index in this.items) {
+            api('listProjectAccounts', {
+              projectid: this.items[index].id,
+              role: 'Admin'
+            }).then(response => {
+              const projAccounts = response.listprojectaccountsresponse.projectaccount || []
+              var pA = projAccounts.map(a => {
+                if (a.userid) {
+                  return a.account + '(' + this.getUserName(a) + ')'
+                } else {
+                  return a.account
+                }
+              })
+              this.items[index].account = pA.join()
+            })
+          }
+          this.columns.map(col => {
+            if (col.title === 'Account') {
+              col.title = this.$t('label.project.owner')
+            }
+          })
+        }
         if (this.treeView) {
           this.treeData = this.generateTreeData(this.items)
         } else {
@@ -579,6 +602,12 @@ export default {
         this.loading = false
       })
     },
+    getUserName (record) {
+      if (record.userid && record.userid !== null) {
+        return record.user ? record.user[0].username : record.userid
+      }
+      return null
+    },
     onSearch (value) {
       this.searchQuery = value
       this.page = 1
diff --git a/src/views/project/AccountsTab.vue b/src/views/project/AccountsTab.vue
index b0303d428..f68f33561 100644
--- a/src/views/project/AccountsTab.vue
+++ b/src/views/project/AccountsTab.vue
@@ -30,7 +30,10 @@
           <span slot="user" slot-scope="text, record" v-if="record.userid">
             {{ getUserName(record) }}
           </span>
-          <span slot="action" slot-scope="text, record" class="account-button-action">
+          <span slot="projectrole" slot-scope="text, record" v-if="record.projectroleid">
+            {{ getProjectRole(record) }}
+          </span>
+          <span v-if="isProjAdmin" slot="action" slot-scope="text, record" class="account-button-action">
             <a-tooltip placement="top">
               <template v-if="record.userid" slot="title">
                 {{ $t('label.make.user.project.owner') }}
@@ -109,10 +112,13 @@ export default {
     return {
       columns: [],
       dataSource: [],
+      isProjAdmin: false,
       loading: false,
       page: 1,
       pageSize: 10,
       itemCount: 0,
+      users: [],
+      projectRoles: [],
       owner: 'Admin',
       role: 'Regular'
     }
@@ -122,13 +128,13 @@ export default {
       {
         title: this.$t('label.account'),
         dataIndex: 'account',
-        width: '30%',
+        width: '20%',
         scopedSlots: { customRender: 'account' }
       },
       {
         title: this.$t('label.user'),
         dataIndex: 'userid',
-        width: '30%',
+        width: '20%',
         scopedSlots: { customRender: 'user' }
       },
       {
@@ -137,15 +143,20 @@ export default {
         width: '20%',
         scopedSlots: { customRender: 'role' }
       },
+      {
+        title: this.$t('label.project.role'),
+        dataIndex: 'projectroleid',
+        width: '20%',
+        scopedSlots: { customRender: 'projectrole' }
+      },
       {
         title: this.$t('label.action'),
         dataIndex: 'action',
         fixed: 'right',
-        width: '30%',
+        width: '20%',
         scopedSlots: { customRender: 'action' }
       }
     ]
-
     this.page = 1
     this.pageSize = 10
     this.itemCount = 0
@@ -170,21 +181,9 @@ export default {
       params.pageSize = this.pageSize
 
       this.loading = true
-      api('listProjectAccounts', params).then(json => {
-        const listProjectAccount = json.listprojectaccountsresponse.projectaccount
-        const itemCount = json.listprojectaccountsresponse.count
-        if (!listProjectAccount || listProjectAccount.length === 0) {
-          this.dataSource = []
-          return
-        }
-
-        this.itemCount = itemCount
-        this.dataSource = listProjectAccount
-      }).catch(error => {
-        this.$notifyError(error)
-      }).finally(() => {
-        this.loading = false
-      })
+      this.fetchUsers()
+      this.fetchProjectRoles()
+      this.fetchProjectAccounts(params)
     },
     changePage (page, pageSize) {
       this.page = page
@@ -200,18 +199,66 @@ export default {
       const uname = this.getUserName(record)
       var status = false
       if (record.userid) {
-        status = uname !== null && uname === this.$store.getters.loggedInUser
+        const user = this.users.filter(user => user.id === uname)
+        status = uname && uname === this.$store.getters.userInfo.username ||
+          (user[0] && user[0].username === this.$store.getters.userInfo.username)
       } else {
         status = record.account === this.$store.getters.userInfo.account
       }
       return status
     },
+    isProjectAdmin (loggedInUser) {
+      var status = false
+      if (['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype)) {
+        status = true
+      } else if ((loggedInUser.role === this.owner)) {
+        status = true
+      }
+      return status
+    },
     getUserName (record) {
       if (record.userid && record.userid !== null) {
         return record.user ? record.user[0].username : record.userid
       }
       return null
     },
+    getProjectRole (record) {
+      const projectRole = this.projectRoles.filter(role => role.id === record.projectroleid)
+      return projectRole[0].name || projectRole[0].id || null
+    },
+    fetchUsers () {
+      api('listUsers', { listall: true }).then(response => {
+        this.users = response.listusersresponse.user || []
+      })
+    },
+    fetchProjectRoles () {
+      api('listProjectRoles', { projectId: this.resource.id }).then(response => {
+        this.projectRoles = response.listprojectrolesresponse.projectrole || []
+      })
+    },
+    fetchProjectAccounts (params) {
+      api('listProjectAccounts', params).then(json => {
+        const listProjectAccount = json.listprojectaccountsresponse.projectaccount
+        const itemCount = json.listprojectaccountsresponse.count
+        if (!listProjectAccount || listProjectAccount.length === 0) {
+          this.dataSource = []
+          return
+        }
+        for (const pa in listProjectAccount) {
+          if ((listProjectAccount[pa].userid && listProjectAccount[pa].userid === this.$store.getters.userInfo.username) ||
+            listProjectAccount[pa].account === this.$store.getters.userInfo.account) {
+            this.isProjAdmin = this.isProjectAdmin(listProjectAccount[pa])
+          }
+        }
+
+        this.itemCount = itemCount
+        this.dataSource = listProjectAccount
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.loading = false
+      })
+    },
     onMakeProjectOwner (record) {
       const title = this.$t('label.make.project.owner')
       const loading = this.$message.loading(title + ' in progress for ' + record.account, 0)
@@ -228,7 +275,7 @@ export default {
       params.id = this.resource.id
       if (record.userid && record.userid !== null) {
         params.userid = record.userid
-        params.accountid = record.user[0].accountid
+        params.accountid = (record.user && record.user[0].accountid) || record.accountid
         title = this.$t('label.make.user.project.owner')
       } else {
         params.account = record.account
@@ -243,7 +290,7 @@ export default {
       const params = {}
       if (record.userid && record.userid !== null) {
         params.userid = record.userid
-        params.accountid = record.user[0].accountid
+        params.accountid = (record.user && record.user[0].accountid) || record.accountid
         title = this.$t('label.demote.project.owner.user')
       } else {
         params.account = record.account
diff --git a/src/views/project/AddAccountOrUserToProject.vue b/src/views/project/AddAccountOrUserToProject.vue
index 14f67811a..4abfa29fa 100644
--- a/src/views/project/AddAccountOrUserToProject.vue
+++ b/src/views/project/AddAccountOrUserToProject.vue
@@ -22,7 +22,13 @@
           :form="form"
           @submit="addAccountToProject"
           layout="vertical">
-          <a-form-item :label="$t('label.account')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.account') }}
+              <a-tooltip :title="fetchApiParams('addAccountToProject').account.description">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-select
               showSearch
               v-decorator="['account']"
@@ -35,10 +41,22 @@
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('label.email')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.email') }}
+              <a-tooltip :title="fetchApiParams('addAccountToProject').email.description">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-input v-decorator="[ 'email']"></a-input>
           </a-form-item>
-          <a-form-item :label="$t('label.project.role')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.project.role') }}
+              <a-tooltip :title="fetchApiParams('addAccountToProject').projectroleid.description">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-select
               showSearch
               v-decorator="['projectroleid']"
@@ -50,7 +68,13 @@
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('label.roletype')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.roletype') }}
+              <a-tooltip :title="fetchApiParams('addAccountToProject').roletype.description">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-select
               showSearch
               v-decorator="['roletype']"
@@ -70,7 +94,13 @@
           :form="form"
           @submit="addUserToProject"
           layout="vertical">
-          <a-form-item :label="$t('label.user')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.user') }}
+              <a-tooltip :title="fetchApiParams('addUserToProject').userid.description">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-select
               showSearch
               v-decorator="['userid', {
@@ -85,10 +115,22 @@
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('label.email')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.email') }}
+              <a-tooltip :title="fetchApiParams('addUserToProject').email.description">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-input v-decorator="[ 'email']"></a-input>
           </a-form-item>
-          <a-form-item :label="$t('label.project.role')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.project.role') }}
+              <a-tooltip :title="fetchApiParams('addUserToProject').roletype.description">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-select
               showSearch
               v-decorator="['projectroleid']"
@@ -100,7 +142,13 @@
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('label.roletype')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.roletype') }}
+              <a-tooltip :title="fetchApiParams('addUserToProject').roletype.description">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-select
               showSearch
               v-decorator="['roletype']"
@@ -180,6 +228,14 @@ export default {
         this.$notifyError(error)
       })
     },
+    fetchApiParams (apiCommand) {
+      const apiConfig = this.$store.getters.apis[apiCommand]
+      const apiParams = {}
+      apiConfig.params.forEach(param => {
+        apiParams[param.name] = param
+      })
+      return apiParams
+    },
     addAccountToProject (e) {
       e.preventDefault()
       this.form.validateFields((err, values) => {
diff --git a/src/views/project/iam/ProjectRoleTab.vue b/src/views/project/iam/ProjectRoleTab.vue
index ac113c9e0..a6b07bebf 100644
--- a/src/views/project/iam/ProjectRoleTab.vue
+++ b/src/views/project/iam/ProjectRoleTab.vue
@@ -268,7 +268,6 @@ export default {
           }
           params[key] = input
         }
-        console.log('params', params)
         api('createProjectRole', params).then(response => {
           this.$notification.success({
             message: this.$t('label.create.project.role'),

From f17c8abec07d84638d3b89cdde0b3e4360e5d291 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Tue, 23 Jun 2020 17:24:40 +0530
Subject: [PATCH 07/24] user info fix

---
 src/store/modules/user.js | 11 ++---------
 src/views/AutogenView.vue |  5 -----
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 6d03eddbc..b12aad5df 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -35,8 +35,7 @@ const user = {
     project: {},
     asyncJobIds: [],
     isLdapEnabled: false,
-    cloudian: {},
-    loggedInUser: ''
+    cloudian: {}
   },
 
   mutations: {
@@ -75,9 +74,6 @@ const user = {
     },
     RESET_THEME: (state) => {
       Vue.ls.set(DEFAULT_THEME, 'light')
-    },
-    SET_LOGGED_IN_USER: (state, loggedInUser) => {
-      state.loggedInUser = loggedInUser
     }
   },
 
@@ -89,7 +85,6 @@ const user = {
       return new Promise((resolve, reject) => {
         login(userInfo).then(response => {
           const result = response.loginresponse || {}
-          console.log('sessionKey = ', result.sessionkey)
           Cookies.set('account', result.account, { expires: 1 })
           Cookies.set('domainid', result.domainid, { expires: 1 })
           Cookies.set('role', result.type, { expires: 1 })
@@ -111,9 +106,7 @@ const user = {
           commit('SET_FEATURES', {})
           commit('SET_LDAP', {})
           commit('SET_CLOUDIAN', {})
-          commit('SET_LOGGED_IN_USER', {})
 
-          commit('SET_LOGGED_IN_USER', result.username)
           resolve()
         }).catch(error => {
           reject(error)
@@ -165,7 +158,7 @@ const user = {
           })
         }
 
-        api('listUsers').then(response => {
+        api('listUsers', { username: Cookies.get('username'), listall: true }).then(response => {
           const result = response.listusersresponse.user[0]
           commit('SET_INFO', result)
           commit('SET_NAME', result.firstname + ' ' + result.lastname)
diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index e21c8e095..8b15c74ab 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -770,7 +770,6 @@ export default {
     handleSubmit (e) {
       e.preventDefault()
       this.form.validateFields((err, values) => {
-        console.log(values)
         if (!err) {
           this.currentAction.loading = true
           const params = {}
@@ -821,10 +820,6 @@ export default {
             }
           }
 
-          console.log(this.currentAction)
-          console.log(this.resource)
-          console.log(params)
-
           const resourceName = params.displayname || params.displaytext || params.name || params.hostname || params.username || params.ipaddress || params.virtualmachinename || this.resource.name
 
           var hasJobId = false

From 1048d900a5ecbcdc9cef3972e72ebc6139e7f2b4 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Fri, 26 Jun 2020 16:12:11 +0530
Subject: [PATCH 08/24] Refactored code

---
 .../project/AddAccountOrUserToProject.vue     |  1 +
 src/views/project/iam/ProjectRoleTab.vue      | 50 ++-----------------
 2 files changed, 5 insertions(+), 46 deletions(-)

diff --git a/src/views/project/AddAccountOrUserToProject.vue b/src/views/project/AddAccountOrUserToProject.vue
index 4abfa29fa..603ef3e6d 100644
--- a/src/views/project/AddAccountOrUserToProject.vue
+++ b/src/views/project/AddAccountOrUserToProject.vue
@@ -94,6 +94,7 @@
           :form="form"
           @submit="addUserToProject"
           layout="vertical">
+          <p v-html="$t('message.add.user.to.project')"></p>
           <a-form-item>
             <span slot="label">
               {{ $t('label.user') }}
diff --git a/src/views/project/iam/ProjectRoleTab.vue b/src/views/project/iam/ProjectRoleTab.vue
index a6b07bebf..5aa25189c 100644
--- a/src/views/project/iam/ProjectRoleTab.vue
+++ b/src/views/project/iam/ProjectRoleTab.vue
@@ -14,7 +14,6 @@
 // KIND, either express or implied.  See the License for the
 // specific language governing permissions and limitations
 // under the License.
-
 <template>
   <div>
     <a-button type="dashed" icon="plus" style="width: 100%; margin-bottom: 15px" @click="openCreateModal">
@@ -27,16 +26,16 @@
           :loading="loading"
           :columns="columns"
           :dataSource="dataSource"
-          :rowKey="record => record.projectid"
+          :rowKey="(record,idx) => record.projectid + '-' + idx"
           :pagination="false">
           <template slot="expandedRowRender" slot-scope="record">
-            <ProjectRolePermissionTab class="table" style="margin-top:30px; margin-left: -40px; margin-right: 10px" :resource="resource" :role="record"/>
+            <ProjectRolePermissionTab class="table" :resource="resource" :role="record"/>
           </template>
           <template slot="name" slot-scope="record"> {{ record }} </template>
           <template slot="description" slot-scope="record">
             {{ record }}
           </template>
-          <span slot="action" slot-scope="text, record" class="account-button-action">
+          <span slot="action" slot-scope="text, record">
             <a-tooltip placement="top">
               <template slot="title">
                 {{ $t('label.update.project.role') }}
@@ -62,7 +61,6 @@
             </a-tooltip>
           </span>
         </a-table>
-
         <a-modal title="Edit Project Role" v-model="editModalVisible" :footer="null" :afterClose="closeAction">
           <a-form
             :form="form"
@@ -78,7 +76,7 @@
               <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
               <a-button type="primary" @click="updateProjectRole" :loading="loading">{{ $t('label.ok') }}</a-button>
             </div>
-            <span slot="action" slot-scope="text, record" class="account-button-action">
+            <span slot="action" slot-scope="text, record">
               <a-tooltip placement="top">
                 <template slot="title">
                   {{ $t('label.update.project.role') }}
@@ -105,7 +103,6 @@
             </span>
           </a-form>
         </a-modal>
-
         <a-modal title="Create Project Role" v-model="createModalVisible" :footer="null" :afterClose="closeAction">
           <a-form
             :form="form"
@@ -123,7 +120,6 @@
             </div>
           </a-form>
         </a-modal>
-
       </a-col>
     </a-row>
   </div>
@@ -172,7 +168,6 @@ export default {
       {
         title: this.$t('label.action'),
         dataIndex: 'action',
-        fixed: 'right',
         width: 100,
         scopedSlots: { customRender: 'action' }
       }
@@ -305,45 +300,8 @@ export default {
 <style lang="scss" scoped>
 .action-button {
     text-align: right;
-
     button {
       margin-right: 5px;
     }
   }
-.list {
-
-  &__label {
-    font-weight: bold;
-  }
-
-  &__col {
-    flex: 1;
-
-    @media (min-width: 480px) {
-      &:not(:last-child) {
-        margin-right: 20px;
-      }
-    }
-  }
-
-  &__item {
-    margin-right: -8px;
-    align-items: flex-start;
-
-    &-outer-container {
-      width: 100%;
-    }
-
-    &-container {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-
-      @media (min-width: 480px) {
-        flex-direction: row;
-        margin-bottom: 10px;
-      }
-    }
-  }
-}
 </style>

From 3f5c2451f3c153184efc96a24e3ab9ec04f5c380 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Mon, 29 Jun 2020 11:05:54 +0530
Subject: [PATCH 09/24] corrected parsed param and handled error notification

---
 src/views/project/iam/ProjectRolePermissionTab.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/views/project/iam/ProjectRolePermissionTab.vue b/src/views/project/iam/ProjectRolePermissionTab.vue
index 9338c8ac1..b8eb68863 100644
--- a/src/views/project/iam/ProjectRolePermissionTab.vue
+++ b/src/views/project/iam/ProjectRolePermissionTab.vue
@@ -203,17 +203,16 @@ export default {
     onPermissionChange (record, value) {
       this.newRulePermission = value
       if (!record) return
-
       this.updateTable = true
       api('updateProjectRolePermission', {
         projectid: this.resource.id,
         projectroleid: this.role.id,
-        ruleid: record.id,
+        projectruleid: record.id,
         permission: value
       }).then(() => {
         this.fetchData()
       }).catch(error => {
-        console.error(error)
+        this.$notifyError(error)
       })
     },
     onRuleSelect (value) {
@@ -224,7 +223,6 @@ export default {
         this.newRuleSelectError = true
         return
       }
-
       this.updateTable = true
       api('createProjectRolePermission', {
         rule: this.newRule,
@@ -235,6 +233,7 @@ export default {
       }).then(() => {
       }).catch(error => {
         console.error(error)
+        this.$notifyError(error)
       }).finally(() => {
         this.resetNewFields()
         this.fetchData()

From cb4ac449cfc1fdc3cc7cc75400c9a87efae57a20 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Wed, 1 Jul 2020 18:01:15 +0530
Subject: [PATCH 10/24] Code refactor

---
 src/components/view/ResourceView.vue | 12 ++----------
 src/config/section/project.js        |  5 -----
 src/store/getters.js                 |  3 +--
 src/store/modules/user.js            |  2 +-
 src/views/AutogenView.vue            | 16 +++-------------
 5 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/src/components/view/ResourceView.vue b/src/components/view/ResourceView.vue
index acb57cd76..43bcc5adf 100644
--- a/src/components/view/ResourceView.vue
+++ b/src/components/view/ResourceView.vue
@@ -107,7 +107,8 @@ export default {
         api('listProjectAccounts', { projectid: this.resource.id }).then(response => {
           projectAccountList = response.listprojectaccountsresponse.projectaccount
           for (var pa in projectAccountList) {
-            if ((projectAccountList[pa].userid && 'fetchUser(projectAccountList[pa].userid)'.username === this.$store.getters.userInfo.username) ||
+            // TODO
+            if ((projectAccountList[pa].userid && projectAccountList[pa].userid === this.$store.getters.userInfo.id) ||
               projectAccountList[pa].account === this.$store.getters.userInfo.account) {
               this.projectAccount = projectAccountList[pa]
               break
@@ -138,15 +139,6 @@ export default {
       } else {
         return true
       }
-    },
-    fetchUser (userId) {
-      var user = null
-      api('listUsers', { listall: true }).then(response => {
-        var users = response.listusersresponse.user
-        users = users.filter(user => user.id === userId)
-        user = users[0]
-      })
-      return user
     }
   }
 }
diff --git a/src/config/section/project.js b/src/config/section/project.js
index 1008be622..db2e0aff0 100644
--- a/src/config/section/project.js
+++ b/src/config/section/project.js
@@ -25,11 +25,6 @@ export default {
   resourceType: 'Project',
   columns: ['name', 'state', 'displaytext', 'account', 'domain'],
   details: ['name', 'id', 'displaytext', 'projectaccountname', 'vmtotal', 'cputotal', 'memorytotal', 'volumetotal', 'iptotal', 'vpctotal', 'templatetotal', 'primarystoragetotal', 'vmlimit', 'iplimit', 'volumelimit', 'snapshotlimit', 'templatelimit', 'vpclimit', 'cpulimit', 'memorylimit', 'networklimit', 'primarystoragelimit', 'secondarystoragelimit', 'account', 'domain'],
-  related: [{
-    name: 'projectrolepermissions',
-    title: 'label.project.role.premissions',
-    param: 'projectid'
-  }],
   tabs: [
     {
       name: 'details',
diff --git a/src/store/getters.js b/src/store/getters.js
index 090de0ab9..97103b49a 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -31,8 +31,7 @@ const getters = {
   multiTab: state => state.app.multiTab,
   asyncJobIds: state => state.user.asyncJobIds,
   isLdapEnabled: state => state.user.isLdapEnabled,
-  cloudian: state => state.user.cloudian,
-  loggedInUser: state => state.user.loggedInUser
+  cloudian: state => state.user.cloudian
 }
 
 export default getters
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index b12aad5df..7ddb51c1f 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -158,7 +158,7 @@ const user = {
           })
         }
 
-        api('listUsers', { username: Cookies.get('username'), listall: true }).then(response => {
+        api('listUsers', { username: Cookies.get('username') }).then(response => {
           const result = response.listusersresponse.user[0]
           commit('SET_INFO', result)
           commit('SET_NAME', result.firstname + ' ' + result.lastname)
diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index 8b15c74ab..bcd58851c 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -540,14 +540,10 @@ export default {
               role: 'Admin'
             }).then(response => {
               const projAccounts = response.listprojectaccountsresponse.projectaccount || []
-              var pA = projAccounts.map(a => {
-                if (a.userid) {
-                  return a.account + '(' + this.getUserName(a) + ')'
-                } else {
-                  return a.account
-                }
+              var pa = projAccounts.map(a => {
+                return a.userid ? a.account + '(' + (a.user[0].username || a.userid) + ')' : a.account
               })
-              this.items[index].account = pA.join()
+              this.items[index].account = pa.join()
             })
           }
           this.columns.map(col => {
@@ -592,12 +588,6 @@ export default {
         this.loading = false
       })
     },
-    getUserName (record) {
-      if (record.userid && record.userid !== null) {
-        return record.user ? record.user[0].username : record.userid
-      }
-      return null
-    },
     onSearch (value) {
       this.searchQuery = value
       this.page = 1

From 78b057426c696555c362e6172afd118c2e84d1df Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Thu, 2 Jul 2020 13:30:17 +0530
Subject: [PATCH 11/24] Review comments addressed

---
 src/components/view/ResourceView.vue          |  7 +--
 src/views/project/AccountsTab.vue             | 38 +++++++++----
 .../project/AddAccountOrUserToProject.vue     | 56 +++++++++++--------
 3 files changed, 63 insertions(+), 38 deletions(-)

diff --git a/src/components/view/ResourceView.vue b/src/components/view/ResourceView.vue
index 43bcc5adf..733249b4b 100644
--- a/src/components/view/ResourceView.vue
+++ b/src/components/view/ResourceView.vue
@@ -106,11 +106,10 @@ export default {
         var projectAccountList = []
         api('listProjectAccounts', { projectid: this.resource.id }).then(response => {
           projectAccountList = response.listprojectaccountsresponse.projectaccount
-          for (var pa in projectAccountList) {
+          for (var pa of projectAccountList) {
             // TODO
-            if ((projectAccountList[pa].userid && projectAccountList[pa].userid === this.$store.getters.userInfo.id) ||
-              projectAccountList[pa].account === this.$store.getters.userInfo.account) {
-              this.projectAccount = projectAccountList[pa]
+            if ((pa.userid && pa.userid === this.$store.getters.userInfo.id) || pa.account === this.$store.getters.userInfo.account) {
+              this.projectAccount = pa
               break
             }
           }
diff --git a/src/views/project/AccountsTab.vue b/src/views/project/AccountsTab.vue
index 83ec26d96..dcf6e3b02 100644
--- a/src/views/project/AccountsTab.vue
+++ b/src/views/project/AccountsTab.vue
@@ -21,7 +21,7 @@
       <a-col :md="24" :lg="24">
         <a-table
           size="small"
-          :loading="loading"
+          :loading="loadingTable"
           :columns="columns"
           :dataSource="dataSource"
           :pagination="false"
@@ -114,7 +114,12 @@ export default {
       columns: [],
       dataSource: [],
       isProjAdmin: false,
-      loading: false,
+      loadingTable: false,
+      loading: {
+        user: false,
+        projectAccount: false,
+        roles: false
+      },
       page: 1,
       pageSize: 10,
       itemCount: 0,
@@ -181,7 +186,6 @@ export default {
       params.page = this.page
       params.pageSize = this.pageSize
 
-      this.loading = true
       this.fetchUsers()
       this.fetchProjectRoles()
       this.fetchProjectAccounts(params)
@@ -218,7 +222,7 @@ export default {
       return status
     },
     getUserName (record) {
-      if (record.userid && record.userid !== null) {
+      if (record.userid) {
         return record.user ? record.user[0].username : record.userid
       }
       return null
@@ -228,16 +232,27 @@ export default {
       return projectRole[0].name || projectRole[0].id || null
     },
     fetchUsers () {
+      this.loading.user = true
       api('listUsers', { listall: true }).then(response => {
         this.users = response.listusersresponse.user || []
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.loading.user = false
       })
     },
     fetchProjectRoles () {
+      this.loading.roles = true
       api('listProjectRoles', { projectId: this.resource.id }).then(response => {
         this.projectRoles = response.listprojectrolesresponse.projectrole || []
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.loading.roles = false
       })
     },
     fetchProjectAccounts (params) {
+      this.loading.projectAccount = true
       api('listProjectAccounts', params).then(json => {
         const listProjectAccount = json.listprojectaccountsresponse.projectaccount
         const itemCount = json.listprojectaccountsresponse.count
@@ -245,10 +260,9 @@ export default {
           this.dataSource = []
           return
         }
-        for (const pa in listProjectAccount) {
-          if ((listProjectAccount[pa].userid && listProjectAccount[pa].userid === this.$store.getters.userInfo.username) ||
-            listProjectAccount[pa].account === this.$store.getters.userInfo.account) {
-            this.isProjAdmin = this.isProjectAdmin(listProjectAccount[pa])
+        for (const pa of listProjectAccount) {
+          if ((pa.userid && pa.userid === this.$store.getters.userInfo.username) || pa.account === this.$store.getters.userInfo.account) {
+            this.isProjAdmin = this.isProjectAdmin(pa)
           }
         }
 
@@ -257,7 +271,7 @@ export default {
       }).catch(error => {
         this.$notifyError(error)
       }).finally(() => {
-        this.loading = false
+        this.loading.projectAccount = false
       })
     },
     onMakeProjectOwner (record) {
@@ -274,7 +288,7 @@ export default {
       const params = {}
 
       params.id = this.resource.id
-      if (record.userid && record.userid !== null) {
+      if (record.userid) {
         params.userid = record.userid
         params.accountid = (record.user && record.user[0].accountid) || record.accountid
         title = this.$t('label.make.user.project.owner')
@@ -289,7 +303,7 @@ export default {
       var title = this.$t('label.demote.project.owner')
       const loading = this.$message.loading(title + ' in progress for ' + record.account, 0)
       const params = {}
-      if (record.userid && record.userid !== null) {
+      if (record.userid) {
         params.userid = record.userid
         params.accountid = (record.user && record.user[0].accountid) || record.accountid
         title = this.$t('label.demote.project.owner.user')
@@ -334,7 +348,7 @@ export default {
       const loading = this.$message.loading(title + ' in progress for ' + record.account, 0)
       const params = {}
       params.projectid = this.resource.id
-      if (record.userid && record.userid != null) {
+      if (record.userid) {
         params.userid = record.userid
         this.deleteOperation('deleteUserFromProject', params, record, title, loading)
       } else {
diff --git a/src/views/project/AddAccountOrUserToProject.vue b/src/views/project/AddAccountOrUserToProject.vue
index 603ef3e6d..ed58b4d7d 100644
--- a/src/views/project/AddAccountOrUserToProject.vue
+++ b/src/views/project/AddAccountOrUserToProject.vue
@@ -25,7 +25,7 @@
           <a-form-item>
             <span slot="label">
               {{ $t('label.account') }}
-              <a-tooltip :title="fetchApiParams('addAccountToProject').account.description">
+              <a-tooltip :title="apiParams.addAccountToProject.account.description">
                 <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
               </a-tooltip>
             </span>
@@ -44,7 +44,7 @@
           <a-form-item>
             <span slot="label">
               {{ $t('label.email') }}
-              <a-tooltip :title="fetchApiParams('addAccountToProject').email.description">
+              <a-tooltip :title="apiParams.addAccountToProject.email.description">
                 <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
               </a-tooltip>
             </span>
@@ -53,7 +53,7 @@
           <a-form-item>
             <span slot="label">
               {{ $t('label.project.role') }}
-              <a-tooltip :title="fetchApiParams('addAccountToProject').projectroleid.description">
+              <a-tooltip :title="apiParams.addAccountToProject.projectroleid.description">
                 <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
               </a-tooltip>
             </span>
@@ -71,7 +71,7 @@
           <a-form-item>
             <span slot="label">
               {{ $t('label.roletype') }}
-              <a-tooltip :title="fetchApiParams('addAccountToProject').roletype.description">
+              <a-tooltip :title="apiParams.addAccountToProject.roletype.description">
                 <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
               </a-tooltip>
             </span>
@@ -98,7 +98,7 @@
           <a-form-item>
             <span slot="label">
               {{ $t('label.user') }}
-              <a-tooltip :title="fetchApiParams('addUserToProject').userid.description">
+              <a-tooltip :title="apiParams.addUserToProject.userid.description">
                 <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
               </a-tooltip>
             </span>
@@ -119,7 +119,7 @@
           <a-form-item>
             <span slot="label">
               {{ $t('label.email') }}
-              <a-tooltip :title="fetchApiParams('addUserToProject').email.description">
+              <a-tooltip :title="apiParams.addUserToProject.email.description">
                 <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
               </a-tooltip>
             </span>
@@ -128,7 +128,7 @@
           <a-form-item>
             <span slot="label">
               {{ $t('label.project.role') }}
-              <a-tooltip :title="fetchApiParams('addUserToProject').roletype.description">
+              <a-tooltip :title="apiParams.addUserToProject.roletype.description">
                 <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
               </a-tooltip>
             </span>
@@ -146,7 +146,7 @@
           <a-form-item>
             <span slot="label">
               {{ $t('label.roletype') }}
-              <a-tooltip :title="fetchApiParams('addUserToProject').roletype.description">
+              <a-tooltip :title="apiParams.addUserToProject.roletype.description">
                 <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
               </a-tooltip>
             </span>
@@ -184,7 +184,12 @@ export default {
       projectRoles: [],
       selectedUser: null,
       selectedAccount: null,
-      loading: false
+      loading: false,
+      load: {
+        users: false,
+        accounts: false,
+        projectRoles: false
+      }
     }
   },
   mounted () {
@@ -192,6 +197,16 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
+    const apis = ['addAccountToProject', 'addUserToProject']
+    this.apiParams = {}
+    for (var api of apis) {
+      const details = {}
+      var apiConfig = this.$store.getters.apis[api]
+      apiConfig.params.forEach(param => {
+        details[param.name] = param
+      })
+      this.apiParams[api] = details
+    }
   },
   methods: {
     fetchData () {
@@ -200,50 +215,46 @@ export default {
       this.fetchProjectRoles()
     },
     fetchUsers () {
-      this.loading = true
+      this.load.users = true
       api('listUsers', { listall: true }).then(response => {
         this.users = response.listusersresponse.user ? response.listusersresponse.user : []
       }).catch(error => {
         this.$notifyError(error)
       }).finally(() => {
-        this.loading = false
+        this.load.users = false
       })
     },
     fetchAccounts () {
-      this.loading = true
+      this.load.accounts = true
       api('listAccounts', {
         domainid: this.resource.domainid
       }).then(response => {
         this.accounts = response.listaccountsresponse.account || []
       }).catch(error => {
         this.$notifyError(error)
+      }).finally(() => {
+        this.load.accounts = false
       })
     },
     fetchProjectRoles () {
-      this.loading = true
+      this.load.projectRoles = true
       api('listProjectRoles', {
         projectid: this.resource.id
       }).then(response => {
         this.projectRoles = response.listprojectrolesresponse.projectrole || []
       }).catch(error => {
         this.$notifyError(error)
+      }).finally(() => {
+        this.load.projectRoles = false
       })
     },
-    fetchApiParams (apiCommand) {
-      const apiConfig = this.$store.getters.apis[apiCommand]
-      const apiParams = {}
-      apiConfig.params.forEach(param => {
-        apiParams[param.name] = param
-      })
-      return apiParams
-    },
     addAccountToProject (e) {
       e.preventDefault()
       this.form.validateFields((err, values) => {
         if (err) {
           return
         }
-
+        this.loading = true
         var params = {}
         params.projectid = this.resource.id
         for (const key in values) {
@@ -278,6 +289,7 @@ export default {
         }
 
         var params = {}
+        this.loading = true
         params.projectid = this.resource.id
         for (const key in values) {
           const input = values[key]

From 77fb7612e632dd5fd2393b87f96baca65682ead8 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Fri, 3 Jul 2020 13:53:26 +0530
Subject: [PATCH 12/24] Fix backward compatibility issues

---
 src/config/section/project.js                 |  4 +-
 src/views/AutogenView.vue                     |  2 +-
 src/views/project/AccountsTab.vue             | 73 ++++++++-----------
 .../project/AddAccountOrUserToProject.vue     | 30 +++++---
 4 files changed, 55 insertions(+), 54 deletions(-)

diff --git a/src/config/section/project.js b/src/config/section/project.js
index e3ef83db9..e6cdfa273 100644
--- a/src/config/section/project.js
+++ b/src/config/section/project.js
@@ -43,8 +43,8 @@ export default {
       name: 'project.roles',
       component: () => import('@/views/project/iam/ProjectRoleTab.vue'),
       projectAccountFilter: projectAccount => {
-        return (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype) ||
-        projectAccount && projectAccount.role === 'Admin')
+        return (('listProjectRoles' in store.getters.apis) && (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype) ||
+        projectAccount && projectAccount.role === 'Admin'))
       }
     },
     {
diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index de8944afa..b96ccb9ea 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -589,7 +589,7 @@ export default {
             }).then(response => {
               const projAccounts = response.listprojectaccountsresponse.projectaccount || []
               var projectAccount = projAccounts.map(a => {
-                return a.userid ? a.account + '(' + (a.user[0].username || a.userid) + ')' : a.account
+                return a.userid ? a.account + '(' + (a.user && a.user[0].username || a.userid) + ')' : a.account
               })
               item.account = projectAccount.join()
             })
diff --git a/src/views/project/AccountsTab.vue b/src/views/project/AccountsTab.vue
index fa33b212b..49b1eebdf 100644
--- a/src/views/project/AccountsTab.vue
+++ b/src/views/project/AccountsTab.vue
@@ -25,15 +25,14 @@
           :columns="columns"
           :dataSource="dataSource"
           :pagination="false"
-          :rowKey="record => record.userid ? record.userid : (record.accountid || record.account)"
-        >
+          :rowKey="record => record.userid ? record.userid : (record.accountid || record.account)">
           <span slot="user" slot-scope="text, record" v-if="record.userid">
             {{ getUserName(record) }}
           </span>
           <span slot="projectrole" slot-scope="text, record" v-if="record.projectroleid">
             {{ getProjectRole(record) }}
           </span>
-          <span v-if="isProjAdmin" slot="action" slot-scope="text, record" class="account-button-action">
+          <span v-if="imProjectAdmin && dataSource.length > 1" slot="action" slot-scope="text, record" class="account-button-action">
             <a-tooltip
               slot="title"
               placement="top"
@@ -49,7 +48,8 @@
             <a-tooltip
               slot="title"
               placement="top"
-              :title="record.userid ? $t('label.demote.project.owner.user') : $t('label.demote.project.owner')">
+              :title="record.userid ? $t('label.demote.project.owner.user') : $t('label.demote.project.owner')"
+              v-if="updateProjectApi.params.filter(x => x.name === 'swapowner').length > 0">
               <a-button
                 v-if="record.role === owner"
                 type="default"
@@ -63,7 +63,6 @@
               placement="top"
               :title="record.userid ? $t('label.remove.project.user') : $t('label.remove.project.account')">
               <a-button
-                v-if="!isLoggedInUser(record)"
                 type="danger"
                 shape="circle"
                 icon="delete"
@@ -104,7 +103,7 @@ export default {
     return {
       columns: [],
       dataSource: [],
-      isProjAdmin: false,
+      imProjectAdmin: false,
       loading: {
         user: false,
         projectAccount: false,
@@ -125,35 +124,31 @@ export default {
       {
         title: this.$t('label.account'),
         dataIndex: 'account',
-        width: '20%',
         scopedSlots: { customRender: 'account' }
       },
-      {
-        title: this.$t('label.user'),
-        dataIndex: 'userid',
-        width: '20%',
-        scopedSlots: { customRender: 'user' }
-      },
       {
         title: this.$t('label.roletype'),
         dataIndex: 'role',
-        width: '20%',
         scopedSlots: { customRender: 'role' }
       },
-      {
-        title: this.$t('label.project.role'),
-        dataIndex: 'projectroleid',
-        width: '20%',
-        scopedSlots: { customRender: 'projectrole' }
-      },
       {
         title: this.$t('label.action'),
         dataIndex: 'action',
-        fixed: 'right',
-        width: '20%',
         scopedSlots: { customRender: 'action' }
       }
     ]
+    if (this.isProjectRolesSupported()) {
+      this.columns.splice(1, 0, {
+        title: this.$t('label.user'),
+        dataIndex: 'userid',
+        scopedSlots: { customRender: 'user' }
+      })
+      this.columns.splice(this.columns.length - 1, 0, {
+        title: this.$t('label.project.role'),
+        dataIndex: 'projectroleid',
+        scopedSlots: { customRender: 'projectrole' }
+      })
+    }
     this.page = 1
     this.pageSize = 10
     this.itemCount = 0
@@ -176,10 +171,12 @@ export default {
       params.projectId = this.resource.id
       params.page = this.page
       params.pageSize = this.pageSize
-
+      this.updateProjectApi = this.$store.getters.apis.updateProject
       this.fetchUsers()
-      this.fetchProjectRoles()
       this.fetchProjectAccounts(params)
+      if (this.isProjectRolesSupported()) {
+        this.fetchProjectRoles()
+      }
     },
     changePage (page, pageSize) {
       this.page = page
@@ -191,27 +188,21 @@ export default {
       this.pageSize = pageSize
       this.fetchData()
     },
-    isLoggedInUser (record) {
-      const uname = this.getUserName(record)
-      var status = false
-      if (record.userid) {
-        const user = this.users.filter(user => user.id === uname)
-        status = uname && uname === this.$store.getters.userInfo.username ||
-          (user[0] && user[0].username === this.$store.getters.userInfo.username)
-      } else {
-        status = record.account === this.$store.getters.userInfo.account
-      }
-      return status
-    },
-    isProjectAdmin (loggedInUser) {
+    isLoggedInUserProjectAdmin (user) {
       if (['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype)) {
         return true
       }
-      if ((loggedInUser.role === this.owner)) {
+      // If I'm the logged in user Or if I'm the logged in account And I'm the owner
+      if (((user.userid && user.userid === this.$store.getters.userInfo.id) ||
+        user.account === this.$store.getters.userInfo.account) &&
+        user.role === this.owner) {
         return true
       }
       return false
     },
+    isProjectRolesSupported () {
+      return ('listProjectRoles' in this.$store.getters.apis)
+    },
     getUserName (record) {
       if (record.userid) {
         return record.user ? record.user[0].username : record.userid
@@ -252,9 +243,9 @@ export default {
           return
         }
         for (const projectAccount of listProjectAccount) {
-          if ((projectAccount.userid && projectAccount.userid === this.$store.getters.userInfo.username) ||
-            projectAccount.account === this.$store.getters.userInfo.account) {
-            this.isProjAdmin = this.isProjectAdmin(projectAccount)
+          this.imProjectAdmin = this.isLoggedInUserProjectAdmin(projectAccount)
+          if (this.imProjectAdmin) {
+            break
           }
         }
 
diff --git a/src/views/project/AddAccountOrUserToProject.vue b/src/views/project/AddAccountOrUserToProject.vue
index ed58b4d7d..1e057183d 100644
--- a/src/views/project/AddAccountOrUserToProject.vue
+++ b/src/views/project/AddAccountOrUserToProject.vue
@@ -50,7 +50,7 @@
             </span>
             <a-input v-decorator="[ 'email']"></a-input>
           </a-form-item>
-          <a-form-item>
+          <a-form-item v-if="apiParams.addAccountToProject.projectroleid">
             <span slot="label">
               {{ $t('label.project.role') }}
               <a-tooltip :title="apiParams.addAccountToProject.projectroleid.description">
@@ -68,7 +68,7 @@
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item>
+          <a-form-item v-if="apiParams.addAccountToProject.roletype">
             <span slot="label">
               {{ $t('label.roletype') }}
               <a-tooltip :title="apiParams.addAccountToProject.roletype.description">
@@ -89,7 +89,7 @@
           </div>
         </a-form>
       </a-tab-pane>
-      <a-tab-pane key="2" :tab="$t('label.action.project.add.user')">
+      <a-tab-pane key="2" :tab="$t('label.action.project.add.user')" v-if="apiParams.addUserToProject">
         <a-form
           :form="form"
           @submit="addUserToProject"
@@ -197,11 +197,14 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    const apis = ['addAccountToProject', 'addUserToProject']
+    const apis = ['addAccountToProject']
+    if ('addUserToProject' in this.$store.getters.apis) {
+      apis.push('addUserToProject')
+    }
     this.apiParams = {}
     for (var api of apis) {
       const details = {}
-      var apiConfig = this.$store.getters.apis[api]
+      const apiConfig = this.$store.getters.apis[api]
       apiConfig.params.forEach(param => {
         details[param.name] = param
       })
@@ -212,7 +215,9 @@ export default {
     fetchData () {
       this.fetchUsers()
       this.fetchAccounts()
-      this.fetchProjectRoles()
+      if (this.isProjectRolesSupported()) {
+        this.fetchProjectRoles()
+      }
     },
     fetchUsers () {
       this.load.users = true
@@ -248,6 +253,9 @@ export default {
         this.load.projectRoles = false
       })
     },
+    isProjectRolesSupported () {
+      return ('listProjectRoles' in this.$store.getters.apis)
+    },
     addAccountToProject (e) {
       e.preventDefault()
       this.form.validateFields((err, values) => {
@@ -255,8 +263,9 @@ export default {
           return
         }
         this.loading = true
-        var params = {}
-        params.projectid = this.resource.id
+        var params = {
+          projectid: this.resource.id
+        }
         for (const key in values) {
           const input = values[key]
           if (input === undefined) {
@@ -288,9 +297,10 @@ export default {
           return
         }
 
-        var params = {}
         this.loading = true
-        params.projectid = this.resource.id
+        var params = {
+          projectid: this.resource.id
+        }
         for (const key in values) {
           const input = values[key]
           if (input === undefined) {

From eb74ebe78c6952de6780bbe3e74f54bdc5c7ba49 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Mon, 6 Jul 2020 17:02:17 +0530
Subject: [PATCH 13/24] Restrict visibility of project related action buttons
 to admins (root, domain or project)

---
 src/components/view/ResourceView.vue    | 15 ------
 src/config/section/project.js           | 36 +++++++++-----
 src/views/project/AccountsTab.vue       |  2 +
 src/views/project/ProjectDetailsTab.vue | 64 +++++++++++++++++++++++++
 4 files changed, 89 insertions(+), 28 deletions(-)
 create mode 100644 src/views/project/ProjectDetailsTab.vue

diff --git a/src/components/view/ResourceView.vue b/src/components/view/ResourceView.vue
index 489595acc..582dfc4fa 100644
--- a/src/components/view/ResourceView.vue
+++ b/src/components/view/ResourceView.vue
@@ -106,19 +106,6 @@ export default {
           }
         })
       }
-      if (this.resource.projectaccountname) {
-        var projectAccountList = []
-        api('listProjectAccounts', { projectid: this.resource.id }).then(response => {
-          projectAccountList = response.listprojectaccountsresponse.projectaccount
-          for (var projectAccount of projectAccountList) {
-            if ((projectAccount.userid && projectAccount.userid === this.$store.getters.userInfo.id) ||
-              projectAccount.account === this.$store.getters.userInfo.account) {
-              this.projectAccount = projectAccount
-              break
-            }
-          }
-        })
-      }
     }
   },
   methods: {
@@ -138,8 +125,6 @@ export default {
         }
         return this.networkService && this.networkService.service &&
           tab.networkServiceFilter(this.networkService.service)
-      } else if ('projectAccountFilter' in tab) {
-        return tab.projectAccountFilter(this.projectAccount)
       } else if ('show' in tab) {
         return tab.show(this.resource, this.$route, this.$store.getters.userInfo)
       } else {
diff --git a/src/config/section/project.js b/src/config/section/project.js
index e6cdfa273..b3bfc393b 100644
--- a/src/config/section/project.js
+++ b/src/config/section/project.js
@@ -14,7 +14,6 @@
 // KIND, either express or implied.  See the License for the
 // specific language governing permissions and limitations
 // under the License.
-
 import store from '@/store'
 
 export default {
@@ -29,22 +28,19 @@ export default {
   tabs: [
     {
       name: 'details',
-      component: () => import('@/components/view/DetailsTab.vue')
+      component: () => import('@/views/project/ProjectDetailsTab.vue')
     },
     {
       name: 'accounts',
       component: () => import('@/views/project/AccountsTab.vue'),
-      projectAccountFilter: projectAccount => {
-        return (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype) ||
-        projectAccount && projectAccount.role === 'Admin')
-      }
+      show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) || record.isLoggedInUser }
     },
     {
       name: 'project.roles',
       component: () => import('@/views/project/iam/ProjectRoleTab.vue'),
-      projectAccountFilter: projectAccount => {
-        return (('listProjectRoles' in store.getters.apis) && (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype) ||
-        projectAccount && projectAccount.role === 'Admin'))
+      show: (record, route, user) => {
+        return (['Admin', 'DomainAdmin'].includes(user.roletype) || record.isLoggedInUser) &&
+        'listProjectRoles' in store.getters.apis
       }
     },
     {
@@ -90,7 +86,10 @@ export default {
       icon: 'edit',
       label: 'label.edit.project.details',
       dataView: true,
-      args: ['displaytext']
+      args: ['displaytext'],
+      show: (record, store) => {
+        return (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isLoggedInUser
+      }
     },
     {
       api: 'activateProject',
@@ -98,7 +97,9 @@ export default {
       label: 'label.activate.project',
       message: 'message.activate.project',
       dataView: true,
-      show: (record) => { return record.state === 'Suspended' }
+      show: (record, store) => {
+        return ((['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isLoggedInUser) && record.state === 'Suspended'
+      }
     },
     {
       api: 'suspendProject',
@@ -107,7 +108,10 @@ export default {
       message: 'message.suspend.project',
       docHelp: 'adminguide/projects.html#suspending-or-deleting-a-project',
       dataView: true,
-      show: (record) => { return record.state !== 'Suspended' }
+      show: (record, store) => {
+        return ((['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) ||
+        record.isLoggedInUser) && record.state !== 'Suspended'
+      }
     },
     {
       api: 'addAccountToProject',
@@ -116,6 +120,9 @@ export default {
       docHelp: 'adminguide/projects.html#adding-project-members-from-the-ui',
       dataView: true,
       popup: true,
+      show: (record, store) => {
+        return (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isLoggedInUser
+      },
       component: () => import('@/views/project/AddAccountOrUserToProject.vue')
     },
     {
@@ -124,7 +131,10 @@ export default {
       label: 'label.delete.project',
       message: 'message.delete.project',
       docHelp: 'adminguide/projects.html#suspending-or-deleting-a-project',
-      dataView: true
+      dataView: true,
+      show: (record, store) => {
+        return (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isLoggedInUser
+      }
     }
   ]
 }
diff --git a/src/views/project/AccountsTab.vue b/src/views/project/AccountsTab.vue
index 49b1eebdf..94a2298a3 100644
--- a/src/views/project/AccountsTab.vue
+++ b/src/views/project/AccountsTab.vue
@@ -153,6 +153,7 @@ export default {
     this.pageSize = 10
     this.itemCount = 0
   },
+  inject: ['parentFetchData'],
   mounted () {
     this.fetchData()
   },
@@ -309,6 +310,7 @@ export default {
         this.$notifyError(error)
       }).finally(() => {
         setTimeout(loading, 1000)
+        this.parentFetchData()
       })
     },
     onShowConfirmDelete (record) {
diff --git a/src/views/project/ProjectDetailsTab.vue b/src/views/project/ProjectDetailsTab.vue
new file mode 100644
index 000000000..5a97cd688
--- /dev/null
+++ b/src/views/project/ProjectDetailsTab.vue
@@ -0,0 +1,64 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you 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>
+  <DetailsTab :resource="resource" />
+</template>
+<script>
+import DetailsTab from '@/components/view/DetailsTab'
+import { api } from '@/api'
+export default {
+  name: 'ProjectDetailsTab',
+  components: {
+    DetailsTab
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  watch: {
+    resource (newItem, oldItem) {
+      if (!newItem || !newItem.id) {
+        return
+      }
+      this.resource = newItem
+      this.fetchProjectAccounts()
+    }
+  },
+  methods: {
+    fetchProjectAccounts () {
+      api('listProjectAccounts', { projectid: this.resource.id }).then(json => {
+        var listProjectAccount = json.listprojectaccountsresponse.projectaccount || []
+        this.$set(this.resource, 'users', listProjectAccount)
+        listProjectAccount = listProjectAccount.filter(account => {
+          return (((account.userid && account.userid === this.$store.getters.userInfo.id) ||
+          account.account === this.$store.getters.userInfo.account) &&
+          account.role === 'Admin')
+        })
+        var isLoggedInUser = false
+        if (listProjectAccount.length > 0) {
+          isLoggedInUser = true
+        }
+        this.$set(this.resource, 'isLoggedInUser', isLoggedInUser)
+      }).catch(error => {
+        this.$notifyError(error)
+      })
+    }
+  }
+}
+</script>

From e8da02113b4eab2f8b2b0fa4d3f436e28c498e87 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Mon, 6 Jul 2020 20:18:57 +0530
Subject: [PATCH 14/24] Modified var name

---
 src/config/section/project.js           | 19 +++++++------------
 src/views/project/ProjectDetailsTab.vue |  6 +++---
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/config/section/project.js b/src/config/section/project.js
index 1385c4c36..8ed662803 100644
--- a/src/config/section/project.js
+++ b/src/config/section/project.js
@@ -34,13 +34,13 @@ export default {
     {
       name: 'accounts',
       component: () => import('@/views/project/AccountsTab.vue'),
-      show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) || record.isLoggedInUser }
+      show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) || record.isCurrentUserProjectAdmin }
     },
     {
       name: 'project.roles',
       component: () => import('@/views/project/iam/ProjectRoleTab.vue'),
       show: (record, route, user) => {
-        return (['Admin', 'DomainAdmin'].includes(user.roletype) || record.isLoggedInUser) &&
+        return (['Admin', 'DomainAdmin'].includes(user.roletype) || record.isCurrentUserProjectAdmin) &&
         'listProjectRoles' in store.getters.apis
       }
     },
@@ -52,11 +52,6 @@ export default {
       name: 'limits',
       show: (record, route, user) => { return ['Admin'].includes(user.roletype) },
       component: () => import('@/components/view/ResourceLimitTab.vue')
-    },
-    {
-      name: 'accounts',
-      show: (record, route, user) => { return record.account === user.account || ['Admin', 'DomainAdmin'].includes(user.roletype) },
-      component: () => import('@/views/project/AccountsTab.vue')
     }
   ],
   actions: [
@@ -98,7 +93,7 @@ export default {
       dataView: true,
       args: ['displaytext'],
       show: (record, store) => {
-        return (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isLoggedInUser
+        return (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isCurrentUserProjectAdmin
       }
     },
     {
@@ -108,7 +103,7 @@ export default {
       message: 'message.activate.project',
       dataView: true,
       show: (record, store) => {
-        return ((['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isLoggedInUser) && record.state === 'Suspended'
+        return ((['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isCurrentUserProjectAdmin) && record.state === 'Suspended'
       }
     },
     {
@@ -120,7 +115,7 @@ export default {
       dataView: true,
       show: (record, store) => {
         return ((['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) ||
-        record.isLoggedInUser) && record.state !== 'Suspended'
+        record.isCurrentUserProjectAdmin) && record.state !== 'Suspended'
       }
     },
     {
@@ -131,7 +126,7 @@ export default {
       dataView: true,
       popup: true,
       show: (record, store) => {
-        return (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isLoggedInUser
+        return (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isCurrentUserProjectAdmin
       },
       component: () => import('@/views/project/AddAccountOrUserToProject.vue')
     },
@@ -143,7 +138,7 @@ export default {
       docHelp: 'adminguide/projects.html#suspending-or-deleting-a-project',
       dataView: true,
       show: (record, store) => {
-        return (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isLoggedInUser
+        return (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) || record.isCurrentUserProjectAdmin
       }
     }
   ]
diff --git a/src/views/project/ProjectDetailsTab.vue b/src/views/project/ProjectDetailsTab.vue
index 5a97cd688..a4b035566 100644
--- a/src/views/project/ProjectDetailsTab.vue
+++ b/src/views/project/ProjectDetailsTab.vue
@@ -50,11 +50,11 @@ export default {
           account.account === this.$store.getters.userInfo.account) &&
           account.role === 'Admin')
         })
-        var isLoggedInUser = false
+        var isCurrentUserProjectAdmin = false
         if (listProjectAccount.length > 0) {
-          isLoggedInUser = true
+          isCurrentUserProjectAdmin = true
         }
-        this.$set(this.resource, 'isLoggedInUser', isLoggedInUser)
+        this.$set(this.resource, 'isCurrentUserProjectAdmin', isCurrentUserProjectAdmin)
       }).catch(error => {
         this.$notifyError(error)
       })

From 290cb4cacba0ca768e2a9506882a641f0a6d4702 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Tue, 7 Jul 2020 10:12:00 +0530
Subject: [PATCH 15/24] List multiple project admins if exists in detail view
 of Projects

---
 src/components/view/DetailsTab.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/view/DetailsTab.vue b/src/components/view/DetailsTab.vue
index cfa340fd6..3bcbd339a 100644
--- a/src/components/view/DetailsTab.vue
+++ b/src/components/view/DetailsTab.vue
@@ -33,6 +33,9 @@
             <router-link :to="{ path: '/volume/' + volume.uuid }">{{ volume.type }} - {{ volume.path }}</router-link> ({{ parseFloat(volume.size / (1024.0 * 1024.0 * 1024.0)).toFixed(1) }} GB)
           </div>
         </div>
+        <div v-else-if="$route.path.startsWith('/project/') && item === 'account' && fetchProjectAdmins()">
+          {{ fetchProjectAdmins() }}
+        </div>
         <div v-else>
           {{ resource[item] }}
         </div>
@@ -81,6 +84,18 @@ export default {
   watch: {
     $route () {
       this.dedicatedSectionActive = this.dedicatedRoutes.includes(this.$route.meta.name)
+      this.fetchProjectAdmins()
+    }
+  },
+  methods: {
+    fetchProjectAdmins () {
+      var projectAdminAccounts = []
+      var projectAdmins = []
+      projectAdminAccounts = this.resource && this.resource.users && this.resource.users.filter(user => user.role === 'Admin')
+      projectAdmins = projectAdminAccounts && projectAdminAccounts.map(a => {
+        return a.userid ? a.account + '(' + (a.user && a.user[0].username || a.userid) + ')' : a.account
+      })
+      return projectAdmins && projectAdmins.join()
     }
   }
 }

From 03fbf5be5a9da34c310e7fb0ee883ab08f2cea95 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Wed, 8 Jul 2020 09:50:59 +0530
Subject: [PATCH 16/24] Add user column to project invitations table only if
 API param has userid field

---
 src/views/project/InvitationsTemplate.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/views/project/InvitationsTemplate.vue b/src/views/project/InvitationsTemplate.vue
index 746bf716d..395dea213 100644
--- a/src/views/project/InvitationsTemplate.vue
+++ b/src/views/project/InvitationsTemplate.vue
@@ -116,11 +116,6 @@ export default {
         dataIndex: 'account',
         scopedSlots: { customRender: 'account' }
       },
-      {
-        title: this.$t('label.user'),
-        dataIndex: 'userid',
-        scopedSlots: { customRender: 'user' }
-      },
       {
         title: this.$t('label.domain'),
         dataIndex: 'domain',
@@ -158,6 +153,18 @@ export default {
     this.page = 1
     this.pageSize = 10
     this.itemCount = 0
+    this.apiConfig = this.$store.getters.apis.listProjectInvitations || {}
+    this.apiParams = {}
+    this.apiConfig.params.forEach(param => {
+      this.apiParams[param.name] = param
+    })
+    if (this.apiParams.userid) {
+      this.columns.splice(2, 0, {
+        title: this.$t('label.user'),
+        dataIndex: 'userid',
+        scopedSlots: { customRender: 'user' }
+      })
+    }
   },
   mounted () {
     this.fetchData()

From abc872784bdb78f5d6d384fa75639df1782db619 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Wed, 8 Jul 2020 16:46:29 +0530
Subject: [PATCH 17/24] Remove dependency on listprojectacc api for getting
 proj admins

---
 src/components/view/DetailsTab.vue            | 14 -----------
 src/views/AutogenView.vue                     | 12 ----------
 .../project/AddAccountOrUserToProject.vue     | 24 ++++++++++++-------
 3 files changed, 15 insertions(+), 35 deletions(-)

diff --git a/src/components/view/DetailsTab.vue b/src/components/view/DetailsTab.vue
index 3bcbd339a..70456ce05 100644
--- a/src/components/view/DetailsTab.vue
+++ b/src/components/view/DetailsTab.vue
@@ -33,9 +33,6 @@
             <router-link :to="{ path: '/volume/' + volume.uuid }">{{ volume.type }} - {{ volume.path }}</router-link> ({{ parseFloat(volume.size / (1024.0 * 1024.0 * 1024.0)).toFixed(1) }} GB)
           </div>
         </div>
-        <div v-else-if="$route.path.startsWith('/project/') && item === 'account' && fetchProjectAdmins()">
-          {{ fetchProjectAdmins() }}
-        </div>
         <div v-else>
           {{ resource[item] }}
         </div>
@@ -86,17 +83,6 @@ export default {
       this.dedicatedSectionActive = this.dedicatedRoutes.includes(this.$route.meta.name)
       this.fetchProjectAdmins()
     }
-  },
-  methods: {
-    fetchProjectAdmins () {
-      var projectAdminAccounts = []
-      var projectAdmins = []
-      projectAdminAccounts = this.resource && this.resource.users && this.resource.users.filter(user => user.role === 'Admin')
-      projectAdmins = projectAdminAccounts && projectAdminAccounts.map(a => {
-        return a.userid ? a.account + '(' + (a.user && a.user[0].username || a.userid) + ')' : a.account
-      })
-      return projectAdmins && projectAdmins.join()
-    }
   }
 }
 </script>
diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index 65f835f08..af89823c7 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -609,18 +609,6 @@ export default {
         }
 
         if (this.apiName === 'listProjects' && this.items.length > 0) {
-          for (const item of this.items) {
-            api('listProjectAccounts', {
-              projectid: item.id,
-              role: 'Admin'
-            }).then(response => {
-              const projAccounts = response.listprojectaccountsresponse.projectaccount || []
-              var projectAccount = projAccounts.map(a => {
-                return a.userid ? a.account + '(' + (a.user && a.user[0].username || a.userid) + ')' : a.account
-              })
-              item.account = projectAccount.join()
-            })
-          }
           this.columns.map(col => {
             if (col.title === 'Account') {
               col.title = this.$t('label.project.owner')
diff --git a/src/views/project/AddAccountOrUserToProject.vue b/src/views/project/AddAccountOrUserToProject.vue
index 1e057183d..db552d01d 100644
--- a/src/views/project/AddAccountOrUserToProject.vue
+++ b/src/views/project/AddAccountOrUserToProject.vue
@@ -29,17 +29,20 @@
                 <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
               </a-tooltip>
             </span>
-            <a-select
+            <!-- <a-select
               showSearch
               v-decorator="['account']"
               :loading="loading"
               :placeholder="$t('label.account')"
               @change="e => selectedAccount = e"
             >
-              <a-select-option v-for="account in accounts" :key="account.name">
+              <a-select-option v-if="['Admin'].includes($store.getters.userInfo.roletype)" v-for="account in accounts" :key="account.name">
                 {{ account.name }}
               </a-select-option>
-            </a-select>
+            </a-select> -->
+            <a-input
+              v-decorator="['account']"
+              :placeholder="apiParams.addAccountToProject.account.description"/>
           </a-form-item>
           <a-form-item>
             <span slot="label">
@@ -102,7 +105,7 @@
                 <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
               </a-tooltip>
             </span>
-            <a-select
+            <!-- <a-select
               showSearch
               v-decorator="['userid', {
                 rules: [{ required: true, message: 'Please select option' }]
@@ -114,7 +117,10 @@
               <a-select-option v-for="user in users" :key="user.id">
                 {{ user.username }} ( {{ user.id }} )
               </a-select-option>
-            </a-select>
+            </a-select> -->
+            <a-input
+              v-decorator="['userid']"
+              :placeholder="apiParams.addUserToProject.userid.description"/>
           </a-form-item>
           <a-form-item>
             <span slot="label">
@@ -308,16 +314,16 @@ export default {
           }
           params[key] = input
         }
-        const user = this.users.filter(user => user.id === this.selectedUser)[0]
         api('addUserToProject', params).then(response => {
           this.$pollJob({
             jobId: response.addusertoprojectresponse.jobid,
-            successMessage: `Successfully added user ${user.username} to project`,
-            errorMessage: `Failed to add user: ${user.username} to project`,
-            loadingMessage: `Adding User ${user.username} to project...`,
+            successMessage: `Successfully added user ${params.userid} to project`,
+            errorMessage: `Failed to add user: ${params.userid} to project`,
+            loadingMessage: `Adding User with id: ${params.userid} to project...`,
             catchMessage: 'Error encountered while fetching async job result'
           })
         }).catch(error => {
+          console.log('catch')
           this.$notifyError(error)
         }).finally(() => {
           this.$emit('refresh-data')

From 34819adfcf74d510d6c3367974942efd6101158e Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Wed, 8 Jul 2020 19:16:19 +0530
Subject: [PATCH 18/24] change userid to username for projects

---
 .../project/AddAccountOrUserToProject.vue     | 36 ++++---------------
 1 file changed, 6 insertions(+), 30 deletions(-)

diff --git a/src/views/project/AddAccountOrUserToProject.vue b/src/views/project/AddAccountOrUserToProject.vue
index db552d01d..eb335c17a 100644
--- a/src/views/project/AddAccountOrUserToProject.vue
+++ b/src/views/project/AddAccountOrUserToProject.vue
@@ -29,17 +29,6 @@
                 <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
               </a-tooltip>
             </span>
-            <!-- <a-select
-              showSearch
-              v-decorator="['account']"
-              :loading="loading"
-              :placeholder="$t('label.account')"
-              @change="e => selectedAccount = e"
-            >
-              <a-select-option v-if="['Admin'].includes($store.getters.userInfo.roletype)" v-for="account in accounts" :key="account.name">
-                {{ account.name }}
-              </a-select-option>
-            </a-select> -->
             <a-input
               v-decorator="['account']"
               :placeholder="apiParams.addAccountToProject.account.description"/>
@@ -101,26 +90,13 @@
           <a-form-item>
             <span slot="label">
               {{ $t('label.user') }}
-              <a-tooltip :title="apiParams.addUserToProject.userid.description">
+              <a-tooltip :title="apiParams.addUserToProject.username.description">
                 <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
               </a-tooltip>
             </span>
-            <!-- <a-select
-              showSearch
-              v-decorator="['userid', {
-                rules: [{ required: true, message: 'Please select option' }]
-              }]"
-              @change="e => selectedUser = e"
-              :loading="loading"
-              :placeholder="$t('label.user')"
-            >
-              <a-select-option v-for="user in users" :key="user.id">
-                {{ user.username }} ( {{ user.id }} )
-              </a-select-option>
-            </a-select> -->
             <a-input
-              v-decorator="['userid']"
-              :placeholder="apiParams.addUserToProject.userid.description"/>
+              v-decorator="['username']"
+              :placeholder="apiParams.addUserToProject.username.description"/>
           </a-form-item>
           <a-form-item>
             <span slot="label">
@@ -317,9 +293,9 @@ export default {
         api('addUserToProject', params).then(response => {
           this.$pollJob({
             jobId: response.addusertoprojectresponse.jobid,
-            successMessage: `Successfully added user ${params.userid} to project`,
-            errorMessage: `Failed to add user: ${params.userid} to project`,
-            loadingMessage: `Adding User with id: ${params.userid} to project...`,
+            successMessage: `Successfully added user ${params.username} to project`,
+            errorMessage: `Failed to add user: ${params.username} to project`,
+            loadingMessage: `Adding User ${params.username} to project...`,
             catchMessage: 'Error encountered while fetching async job result'
           })
         }).catch(error => {

From 44585438cc4489a1e410c83f97e17c309a71fe98 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Thu, 9 Jul 2020 22:37:58 +0530
Subject: [PATCH 19/24] leverage API response of listprojects to identify
 admins

---
 src/components/view/DetailsTab.vue | 13 +++++++++++++
 src/views/AutogenView.vue          | 12 ++++++++++++
 src/views/project/AccountsTab.vue  | 12 +++---------
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/view/DetailsTab.vue b/src/components/view/DetailsTab.vue
index 70456ce05..1f2176e6d 100644
--- a/src/components/view/DetailsTab.vue
+++ b/src/components/view/DetailsTab.vue
@@ -83,6 +83,19 @@ export default {
       this.dedicatedSectionActive = this.dedicatedRoutes.includes(this.$route.meta.name)
       this.fetchProjectAdmins()
     }
+  },
+  methods: {
+    fetchProjectAdmins () {
+      if (!this.resource.owner) {
+        return false
+      }
+      var owners = this.resource.owner
+      var projectAdmins = []
+      for (var owner of owners) {
+        projectAdmins.push(Object.keys(owner).includes('user') ? owner.account + '(' + owner.user + ')' : owner.account)
+      }
+      this.resource.account = projectAdmins.join()
+    }
   }
 }
 </script>
diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index af89823c7..6ad984808 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -609,6 +609,18 @@ export default {
         }
 
         if (this.apiName === 'listProjects' && this.items.length > 0) {
+          for (var item of this.items) {
+            if (!item.owner) {
+              break
+            }
+            var owners = item.owner
+            var projectAdmins = []
+
+            for (var owner of owners) {
+              projectAdmins.push(Object.keys(owner).includes('user') ? owner.account + '(' + owner.user + ')' : owner.account)
+            }
+            item.account = projectAdmins.join()
+          }
           this.columns.map(col => {
             if (col.title === 'Account') {
               col.title = this.$t('label.project.owner')
diff --git a/src/views/project/AccountsTab.vue b/src/views/project/AccountsTab.vue
index 94a2298a3..59e8a8bb4 100644
--- a/src/views/project/AccountsTab.vue
+++ b/src/views/project/AccountsTab.vue
@@ -27,7 +27,7 @@
           :pagination="false"
           :rowKey="record => record.userid ? record.userid : (record.accountid || record.account)">
           <span slot="user" slot-scope="text, record" v-if="record.userid">
-            {{ getUserName(record) }}
+            {{ record.username }}
           </span>
           <span slot="projectrole" slot-scope="text, record" v-if="record.projectroleid">
             {{ getProjectRole(record) }}
@@ -204,12 +204,6 @@ export default {
     isProjectRolesSupported () {
       return ('listProjectRoles' in this.$store.getters.apis)
     },
-    getUserName (record) {
-      if (record.userid) {
-        return record.user ? record.user[0].username : record.userid
-      }
-      return null
-    },
     getProjectRole (record) {
       const projectRole = this.projectRoles.filter(role => role.id === record.projectroleid)
       return projectRole[0].name || projectRole[0].id || null
@@ -274,7 +268,7 @@ export default {
       params.id = this.resource.id
       if (record.userid) {
         params.userid = record.userid
-        params.accountid = (record.user && record.user[0].accountid) || record.accountid
+        // params.accountid = (record.user && record.user[0].accountid) || record.accountid
         title = this.$t('label.make.user.project.owner')
       } else {
         params.account = record.account
@@ -289,7 +283,7 @@ export default {
       const params = {}
       if (record.userid) {
         params.userid = record.userid
-        params.accountid = (record.user && record.user[0].accountid) || record.accountid
+        // params.accountid = (record.user && record.user[0].accountid) || record.accountid
         title = this.$t('label.demote.project.owner.user')
       } else {
         params.account = record.account

From d4a15f35091c5b59a87faaf4ea62c5e9d42c9c9a Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Tue, 21 Jul 2020 20:42:05 +0530
Subject: [PATCH 20/24] fix routing, apidiscovery for project views

---
 src/components/header/ProjectMenu.vue         |  1 +
 src/components/view/InfoCard.vue              | 18 ++++++++++++-
 src/components/view/ListView.vue              | 26 ++++++++++++++-----
 src/locales/en.json                           |  1 +
 src/store/modules/user.js                     | 23 ++++++++++++++++
 src/views/project/ProjectDetailsTab.vue       | 26 +++++++------------
 .../project/iam/ProjectRolePermissionTab.vue  |  2 +-
 7 files changed, 73 insertions(+), 24 deletions(-)

diff --git a/src/components/header/ProjectMenu.vue b/src/components/header/ProjectMenu.vue
index 4e1314ddb..2f76ae531 100644
--- a/src/components/header/ProjectMenu.vue
+++ b/src/components/header/ProjectMenu.vue
@@ -90,6 +90,7 @@ export default {
     },
     changeProject (index) {
       const project = this.projects[index]
+      this.$store.dispatch('ProjectView')
       this.$store.dispatch('SetProject', project)
       this.$store.dispatch('ToggleTheme', project.id === undefined ? 'light' : 'dark')
       this.$message.success(`Switched to "${project.name}"`)
diff --git a/src/components/view/InfoCard.vue b/src/components/view/InfoCard.vue
index ae9356600..120c01fc0 100644
--- a/src/components/view/InfoCard.vue
+++ b/src/components/view/InfoCard.vue
@@ -451,7 +451,23 @@
             <span v-else>{{ resource.zone || resource.zonename || resource.zoneid }}</span>
           </div>
         </div>
-        <div class="resource-detail-item" v-if="resource.account">
+        <div class="resource-detail-item" v-if="resource.owner">
+          <div class="resource-detail-item__label">{{ $t('label.owners') }}</div>
+          <div class="resource-detail-item__details">
+            <a-icon type="user" />
+            <template v-for="(item,idx) in resource.owner">
+              <span :key="idx">
+                <span v-if="$store.getters.userInfo.roletype !== 'User'">
+                  <router-link v-if="'user' in item" :to="{ path: '/accountuser', query: { username: item.user, domainid: resource.domainid }}">{{ item.account + '(' + item.user + ')' }}</router-link>
+                  <router-link v-else :to="{ path: '/account', query: { name: item.account, domainid: resource.domainid } }">{{ item.account }}</router-link>
+                  <span style="margin-left:5px"/>
+                </span>
+                <span v-else>{{ item.user ? item.user : item.account }}</span>
+              </span>
+            </template>
+          </div>
+        </div>
+        <div class="resource-detail-item" v-else-if="resource.account">
           <div class="resource-detail-item__label">{{ $t('label.account') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="user" />
diff --git a/src/components/view/ListView.vue b/src/components/view/ListView.vue
index 179d99610..8047a36a9 100644
--- a/src/components/view/ListView.vue
+++ b/src/components/view/ListView.vue
@@ -154,12 +154,26 @@
       <router-link :to="{ path: '/pod/' + record.podid }">{{ text }}</router-link>
     </a>
     <span slot="account" slot-scope="text, record">
-      <router-link
-        v-if="'quota' in record && $router.resolve(`${$route.path}/${record.account}`) !== '404'"
-        :to="{ path: `${$route.path}/${record.account}`, query: { account: record.account, domainid: record.domainid, quota: true } }">{{ text }}</router-link>
-      <router-link :to="{ path: '/account/' + record.accountid }" v-else-if="record.accountid">{{ text }}</router-link>
-      <router-link :to="{ path: '/account', query: { name: record.account, domainid: record.domainid } }" v-else-if="$store.getters.userInfo.roletype !== 'User'">{{ text }}</router-link>
-      <span v-else>{{ text }}</span>
+      <template v-if="record.owner">
+        <template v-for="(item,idx) in record.owner">
+          <span :key="idx">
+            <span v-if="$store.getters.userInfo.roletype !== 'User'">
+              <router-link v-if="'user' in item" :to="{ path: '/accountuser', query: { username: item.user, domainid: record.domainid }}">{{ item.account + '(' + item.user + ')' }}</router-link>
+              <router-link v-else :to="{ path: '/account', query: { name: item.account, domainid: record.domainid } }">{{ item.account }}</router-link>
+              <span style="margin-left:5px"/>
+            </span>
+            <span v-else>{{ item.user ? item.user : item.account }}</span>
+          </span>
+        </template>
+      </template>
+      <template v-else>
+        <router-link
+          v-if="'quota' in record && $router.resolve(`${$route.path}/${record.account}`) !== '404'"
+          :to="{ path: `${$route.path}/${record.account}`, query: { account: record.account, domainid: record.domainid, quota: true } }">{{ text }}</router-link>
+        <router-link :to="{ path: '/account/' + record.accountid }" v-else-if="record.accountid">{{ text }}</router-link>
+        <router-link :to="{ path: '/account', query: { name: record.account, domainid: record.domainid } }" v-else-if="$store.getters.userInfo.roletype !== 'User'">{{ text }}</router-link>
+        <span v-else>{{ text }}</span>
+      </template>
     </span>
     <span slot="domain" slot-scope="text, record" href="javascript:;">
       <router-link v-if="record.domainid && !record.domainid.toString().includes(',') && $store.getters.userInfo.roletype !== 'User'" :to="{ path: '/domain/' + record.domainid }">{{ text }}</router-link>
diff --git a/src/locales/en.json b/src/locales/en.json
index 0e937adff..df4ab4fe5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1426,6 +1426,7 @@
 "label.owned.public.ips": "Owned Public IP Addresses",
 "label.owner.account": "Owner Account",
 "label.owner.domain": "Owner Domain",
+"label.owners": "Owners",
 "label.pa": "Palo Alto",
 "label.palo.alto.details": "Palo Alto details",
 "label.palo.alto.firewall": "Palo Alto Firewall",
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 2eab26e2a..2e1a128ec 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -220,6 +220,29 @@ const user = {
       var jobsArray = Vue.ls.get(ASYNC_JOB_IDS, [])
       jobsArray.push(jobJson)
       commit('SET_ASYNC_JOB_IDS', jobsArray)
+    },
+    ProjectView ({ commit }) {
+      return new Promise((resolve, reject) => {
+        api('listApis').then(response => {
+          const apis = {}
+          const apiList = response.listapisresponse.api
+          for (var idx = 0; idx < apiList.length; idx++) {
+            const api = apiList[idx]
+            const apiName = api.name
+            apis[apiName] = {
+              params: api.params,
+              response: api.response
+            }
+          }
+          commit('SET_APIS', apis)
+          resolve(apis)
+          store.dispatch('GenerateRoutes', { apis }).then(() => {
+            router.addRoutes(store.getters.addRouters)
+          })
+        }).catch(error => {
+          reject(error)
+        })
+      })
     }
   }
 }
diff --git a/src/views/project/ProjectDetailsTab.vue b/src/views/project/ProjectDetailsTab.vue
index a4b035566..5e650b383 100644
--- a/src/views/project/ProjectDetailsTab.vue
+++ b/src/views/project/ProjectDetailsTab.vue
@@ -19,7 +19,6 @@
 </template>
 <script>
 import DetailsTab from '@/components/view/DetailsTab'
-import { api } from '@/api'
 export default {
   name: 'ProjectDetailsTab',
   components: {
@@ -42,22 +41,17 @@ export default {
   },
   methods: {
     fetchProjectAccounts () {
-      api('listProjectAccounts', { projectid: this.resource.id }).then(json => {
-        var listProjectAccount = json.listprojectaccountsresponse.projectaccount || []
-        this.$set(this.resource, 'users', listProjectAccount)
-        listProjectAccount = listProjectAccount.filter(account => {
-          return (((account.userid && account.userid === this.$store.getters.userInfo.id) ||
-          account.account === this.$store.getters.userInfo.account) &&
-          account.role === 'Admin')
-        })
-        var isCurrentUserProjectAdmin = false
-        if (listProjectAccount.length > 0) {
-          isCurrentUserProjectAdmin = true
-        }
-        this.$set(this.resource, 'isCurrentUserProjectAdmin', isCurrentUserProjectAdmin)
-      }).catch(error => {
-        this.$notifyError(error)
+      var owner = this.resource.owner
+      owner = owner.filter(projectaccount => {
+        return (projectaccount.userid && projectaccount.userid === this.$store.getters.userInfo.id) ||
+          projectaccount.account === this.$store.getters.userInfo.account &&
+          projectaccount.role === 'Admin'
       })
+      var isCurrentUserProjectAdmin = false
+      if (owner.length > 0) {
+        isCurrentUserProjectAdmin = true
+      }
+      this.$set(this.resource, 'isCurrentUserProjectAdmin', isCurrentUserProjectAdmin)
     }
   }
 }
diff --git a/src/views/project/iam/ProjectRolePermissionTab.vue b/src/views/project/iam/ProjectRolePermissionTab.vue
index b8eb68863..b98610852 100644
--- a/src/views/project/iam/ProjectRolePermissionTab.vue
+++ b/src/views/project/iam/ProjectRolePermissionTab.vue
@@ -207,7 +207,7 @@ export default {
       api('updateProjectRolePermission', {
         projectid: this.resource.id,
         projectroleid: this.role.id,
-        projectruleid: record.id,
+        projectrolepermissionid: record.id,
         permission: value
       }).then(() => {
         this.fetchData()

From 172d9f801e6cd0e812e6dac053cc70f7f25a59bf Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Tue, 21 Jul 2020 21:15:20 +0530
Subject: [PATCH 21/24] remove redundant code

---
 src/views/AutogenView.vue | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index 461468bad..f75edce5f 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -580,18 +580,6 @@ export default {
         }
 
         if (this.apiName === 'listProjects' && this.items.length > 0) {
-          for (var item of this.items) {
-            if (!item.owner) {
-              break
-            }
-            var owners = item.owner
-            var projectAdmins = []
-
-            for (var owner of owners) {
-              projectAdmins.push(Object.keys(owner).includes('user') ? owner.account + '(' + owner.user + ')' : owner.account)
-            }
-            item.account = projectAdmins.join()
-          }
           this.columns.map(col => {
             if (col.title === 'Account') {
               col.title = this.$t('label.project.owner')

From 79672decee83a417b8a44ca307a777c0574537ae Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Tue, 21 Jul 2020 23:14:46 +0530
Subject: [PATCH 22/24] api discovery only for projects

---
 src/components/header/ProjectMenu.vue | 2 +-
 src/components/view/InfoCard.vue      | 4 ++--
 src/store/modules/user.js             | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/header/ProjectMenu.vue b/src/components/header/ProjectMenu.vue
index 2f76ae531..48d541360 100644
--- a/src/components/header/ProjectMenu.vue
+++ b/src/components/header/ProjectMenu.vue
@@ -90,7 +90,7 @@ export default {
     },
     changeProject (index) {
       const project = this.projects[index]
-      this.$store.dispatch('ProjectView')
+      this.$store.dispatch('ProjectView', project.id)
       this.$store.dispatch('SetProject', project)
       this.$store.dispatch('ToggleTheme', project.id === undefined ? 'light' : 'dark')
       this.$message.success(`Switched to "${project.name}"`)
diff --git a/src/components/view/InfoCard.vue b/src/components/view/InfoCard.vue
index 89a5758d5..88c476462 100644
--- a/src/components/view/InfoCard.vue
+++ b/src/components/view/InfoCard.vue
@@ -461,9 +461,9 @@
                 <span v-if="$store.getters.userInfo.roletype !== 'User'">
                   <router-link v-if="'user' in item" :to="{ path: '/accountuser', query: { username: item.user, domainid: resource.domainid }}">{{ item.account + '(' + item.user + ')' }}</router-link>
                   <router-link v-else :to="{ path: '/account', query: { name: item.account, domainid: resource.domainid } }">{{ item.account }}</router-link>
-                  <span style="margin-left:5px"/>
                 </span>
-                <span v-else>{{ item.user ? item.user : item.account }}</span>
+                <span v-else>{{ item.user ? item.account + '(' + item.user + ')' : item.account }}</span>
+                <span style="margin-left:5px"/>
               </span>
             </template>
           </div>
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 2e1a128ec..d07ec09bb 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -221,9 +221,9 @@ const user = {
       jobsArray.push(jobJson)
       commit('SET_ASYNC_JOB_IDS', jobsArray)
     },
-    ProjectView ({ commit }) {
+    ProjectView ({ commit }, projectid) {
       return new Promise((resolve, reject) => {
-        api('listApis').then(response => {
+        api('listApis', { projectid: projectid }).then(response => {
           const apis = {}
           const apiList = response.listapisresponse.api
           for (var idx = 0; idx < apiList.length; idx++) {

From ba97bdff511489423f08936326136457cd4bbc2e Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Wed, 22 Jul 2020 18:05:21 +0530
Subject: [PATCH 23/24] bug fixes

---
 src/components/view/InfoCard.vue                | 3 +--
 src/components/view/ListView.vue                | 5 ++---
 src/views/project/AddAccountOrUserToProject.vue | 6 +++---
 src/views/project/ProjectDetailsTab.vue         | 3 +--
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/view/InfoCard.vue b/src/components/view/InfoCard.vue
index 88c476462..85507fd60 100644
--- a/src/components/view/InfoCard.vue
+++ b/src/components/view/InfoCard.vue
@@ -457,13 +457,12 @@
           <div class="resource-detail-item__details">
             <a-icon type="user" />
             <template v-for="(item,idx) in resource.owner">
-              <span :key="idx">
+              <span style="margin-right:5px" :key="idx">
                 <span v-if="$store.getters.userInfo.roletype !== 'User'">
                   <router-link v-if="'user' in item" :to="{ path: '/accountuser', query: { username: item.user, domainid: resource.domainid }}">{{ item.account + '(' + item.user + ')' }}</router-link>
                   <router-link v-else :to="{ path: '/account', query: { name: item.account, domainid: resource.domainid } }">{{ item.account }}</router-link>
                 </span>
                 <span v-else>{{ item.user ? item.account + '(' + item.user + ')' : item.account }}</span>
-                <span style="margin-left:5px"/>
               </span>
             </template>
           </div>
diff --git a/src/components/view/ListView.vue b/src/components/view/ListView.vue
index 848a7980b..310b4dc8a 100644
--- a/src/components/view/ListView.vue
+++ b/src/components/view/ListView.vue
@@ -158,13 +158,12 @@
     <span slot="account" slot-scope="text, record">
       <template v-if="record.owner">
         <template v-for="(item,idx) in record.owner">
-          <span :key="idx">
+          <span style="margin-right:5px" :key="idx">
             <span v-if="$store.getters.userInfo.roletype !== 'User'">
               <router-link v-if="'user' in item" :to="{ path: '/accountuser', query: { username: item.user, domainid: record.domainid }}">{{ item.account + '(' + item.user + ')' }}</router-link>
               <router-link v-else :to="{ path: '/account', query: { name: item.account, domainid: record.domainid } }">{{ item.account }}</router-link>
-              <span style="margin-left:5px"/>
             </span>
-            <span v-else>{{ item.user ? item.user : item.account }}</span>
+            <span v-else>{{ item.user ? item.account + '(' + item.user + ')' : item.account }}</span>
           </span>
         </template>
       </template>
diff --git a/src/views/project/AddAccountOrUserToProject.vue b/src/views/project/AddAccountOrUserToProject.vue
index eb335c17a..0275ed752 100644
--- a/src/views/project/AddAccountOrUserToProject.vue
+++ b/src/views/project/AddAccountOrUserToProject.vue
@@ -258,9 +258,9 @@ export default {
         api('addAccountToProject', params).then(response => {
           this.$pollJob({
             jobId: response.addaccounttoprojectresponse.jobid,
-            successMessage: `Successfully added account ${this.selectedAccount} to project`,
-            errorMessage: `Failed to add account: ${this.selectedAccount} to project`,
-            loadingMessage: `Adding Account: ${this.selectedAccount} to project...`,
+            successMessage: `Successfully added account ${params.account} to project`,
+            errorMessage: `Failed to add account: ${params.account} to project`,
+            loadingMessage: `Adding Account: ${params.account} to project...`,
             catchMessage: 'Error encountered while fetching async job result'
           })
         }).catch(error => {
diff --git a/src/views/project/ProjectDetailsTab.vue b/src/views/project/ProjectDetailsTab.vue
index 5e650b383..ebffb5981 100644
--- a/src/views/project/ProjectDetailsTab.vue
+++ b/src/views/project/ProjectDetailsTab.vue
@@ -44,8 +44,7 @@ export default {
       var owner = this.resource.owner
       owner = owner.filter(projectaccount => {
         return (projectaccount.userid && projectaccount.userid === this.$store.getters.userInfo.id) ||
-          projectaccount.account === this.$store.getters.userInfo.account &&
-          projectaccount.role === 'Admin'
+          projectaccount.account === this.$store.getters.userInfo.account
       })
       var isCurrentUserProjectAdmin = false
       if (owner.length > 0) {

From 104553a55c71e5fa124e40a3261f25b597ce75ae Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl.dsilva@shapeblue.com>
Date: Wed, 29 Jul 2020 19:08:04 +0530
Subject: [PATCH 24/24] resolved conflicts and translations

---
 src/locales/en.json               | 11 -----------
 src/views/project/AccountsTab.vue | 12 ++----------
 2 files changed, 2 insertions(+), 21 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index a005b54a6..d3078e5ac 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -610,13 +610,10 @@
 "label.create.nfs.secondary.staging.storage": "Create NFS Secondary Staging Store",
 "label.create.nfs.secondary.staging.store": "Create NFS secondary staging store",
 "label.create.project": "Create project",
-<<<<<<< HEAD
 "label.create.project.role": "Create Project Role",
-=======
 "label.create.user": "Create user",
 "label.create.site.vpn.connection": "Create Site-to-Site VPN Connection",
 "label.create.site.vpn.gateway": "Create Site-to-Site VPN Gateway",
->>>>>>> 41aa289778aafe0d5d49d31566c78a5c1ea438b3
 "label.create.ssh.key.pair": "Create a SSH Key Pair",
 "label.create.template": "Create template",
 "label.create.vpn.connection": "Create VPN Connection",
@@ -701,12 +698,9 @@
 "label.deleting.failed": "Deleting Failed",
 "label.deleting.iso": "Deleting ISO",
 "label.deleting.processing": "Deleting....",
-<<<<<<< HEAD
 "label.demote.project.owner": "Demote account to Regular role",
 "label.demote.project.owner.user": "Demote user to Regular role",
-=======
 "label.deleting.template": "Deleting template",
->>>>>>> 41aa289778aafe0d5d49d31566c78a5c1ea438b3
 "label.deny": "Deny",
 "label.deploymentplanner": "Deployment planner",
 "label.description": "Description",
@@ -3235,12 +3229,7 @@
 "state.stopped": "Stopped",
 "state.stopping": "Stopping",
 "state.suspended": "Suspended",
-<<<<<<< HEAD
-"title.upload.volume": "Upload Volume"
-}
-=======
 "title.upload.volume": "Upload Volume",
 "user.login": "Login",
 "user.logout": "Logout"
 }
->>>>>>> 41aa289778aafe0d5d49d31566c78a5c1ea438b3
diff --git a/src/views/project/AccountsTab.vue b/src/views/project/AccountsTab.vue
index 8de4af0b0..8c986c5f3 100644
--- a/src/views/project/AccountsTab.vue
+++ b/src/views/project/AccountsTab.vue
@@ -258,11 +258,7 @@ export default {
     },
     onMakeProjectOwner (record) {
       const title = this.$t('label.make.project.owner')
-<<<<<<< HEAD
-      const loading = this.$message.loading(title + ' in progress for ' + record.account, 0)
-=======
       const loading = this.$message.loading(title + `${this.$t('label.in.progress.for')} ` + record.account, 0)
->>>>>>> 41aa289778aafe0d5d49d31566c78a5c1ea438b3
       const params = {}
       params.id = this.resource.id
       params.account = record.account
@@ -270,7 +266,7 @@ export default {
     },
     promoteAccount (record) {
       var title = this.$t('label.make.project.owner')
-      const loading = this.$message.loading(title + ' in progress for ' + record.account, 0)
+      const loading = this.$message.loading(title + `${this.$t('label.in.progress.for')} ` + record.account, 0)
       const params = {}
 
       params.id = this.resource.id
@@ -287,7 +283,7 @@ export default {
     },
     demoteAccount (record) {
       var title = this.$t('label.demote.project.owner')
-      const loading = this.$message.loading(title + ' in progress for ' + record.account, 0)
+      const loading = this.$message.loading(title + `${this.$t('label.in.progress.for')} ` + record.account, 0)
       const params = {}
       if (record.userid) {
         params.userid = record.userid
@@ -331,11 +327,7 @@ export default {
     },
     removeAccount (record) {
       const title = this.$t('label.remove.project.account')
-<<<<<<< HEAD
-      const loading = this.$message.loading(title + ' in progress for ' + record.account, 0)
-=======
       const loading = this.$message.loading(title + `${this.$t('label.in.progress.for')} ` + record.account, 0)
->>>>>>> 41aa289778aafe0d5d49d31566c78a5c1ea438b3
       const params = {}
       params.projectid = this.resource.id
       if (record.userid) {