[go: nahoru, domu]
Skip to content

Commit

Permalink
ui: refactor the component to only support user edit in namespace
Browse files Browse the repository at this point in the history 
This commit refactors the component to block click actions on the listing when
the user does not have permission.

Signed-off-by: Leonardo R.S. Joao <leonardo.joao@ossystems.com.br>
  • Loading branch information
@leonardojoao @gustavosbarreto
leonardojoao authored and gustavosbarreto committed Feb 10, 2022
1 parent f92731c commit 3141ca7
Show file tree
Hide file tree
Showing 8 changed files with 285 additions and 585 deletions.
4 changes: 4 additions & 0 deletions ui/src/authorizer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ const {
namespaceCreate,
namespaceRename,
namespaceAddMember,
namespaceEditMember,
namespaceRemoveMember,
namespaceEnableSessionRecord,
namespaceRemove,
Expand Down Expand Up @@ -90,6 +91,7 @@ export const actions = {
create: namespaceCreate,
rename: namespaceRename,
addMember: namespaceAddMember,
editMember: namespaceEditMember,
removeMember: namespaceRemoveMember,
enableSessionRecord: namespaceEnableSessionRecord,
remove: namespaceRemove,
Expand Down Expand Up @@ -137,6 +139,7 @@ export const authorizer = {
actions.namespace.create,
actions.namespace.rename,
actions.namespace.addMember,
actions.namespace.editMember,
actions.namespace.removeMember,
actions.namespace.enableSessionRecord,
actions.namespace.remove,
Expand Down Expand Up @@ -177,6 +180,7 @@ export const authorizer = {
actions.namespace.create,
actions.namespace.rename,
actions.namespace.addMember,
actions.namespace.editMember,
actions.namespace.removeMember,
actions.namespace.enableSessionRecord,
// Billing
Expand Down
169 changes: 29 additions & 140 deletions ...s/namespace/NamespaceMemberFormDialog.vue → ...mespace/NamespaceMemberFormDialogEdit.vue
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,32 @@
<template>
<fragment>
<v-tooltip
v-if="addUser"
bottom
:disabled="hasAuthorization"
>
<template #activator="{ on }">
<div v-on="on">
<v-btn
:disabled="!hasAuthorization"
class="mr-2"
color="primary"
data-test="add-btn"
@click="setShowDialog()"
>
Add Member
</v-btn>
</div>
</template>

<span>
You don't have this kind of authorization.
</span>
</v-tooltip>

<v-tooltip
v-else
bottom
:disabled="hasAuthorization"
>
<template #activator="{ on }">
<span v-on="on">
<v-list-item-title data-test="edit-list">
Edit
</v-list-item-title>
</span>

<span v-on="on">
<v-icon
:disabled="!hasAuthorization"
left
data-test="edit-icon"
v-on="on"
>
mdi-pencil
</v-icon>
</span>
</template>

<span>
You don't have this kind of authorization.
</span>
</v-tooltip>
<v-list-item-icon class="mr-0">
<v-icon
left
data-test="remove-icon"
v-text="'mdi-pencil'"
/>
</v-list-item-icon>

<v-list-item-content>
<v-list-item-title
class="text-left"
data-test="edit-title"
v-text="'Edit'"
/>
</v-list-item-content>

<v-dialog
v-model="showDialog"
max-width="450"
@click:outside="close"
>
<v-card data-test="namespaceNewMember-dialog">
<v-card-title class="headline primary">
{{ addUser ? 'Add member to namespace' : 'Update member role' }}
</v-card-title>
<v-card-title
class="headline primary"
data-test="text-title"
v-text="'Update member role'"
/>

<ValidationObserver
ref="obs"
Expand All @@ -77,7 +42,7 @@
>
<v-text-field
v-model="memberLocal.username"
:disabled="!addUser"
:disabled="true"
label="Username"
:error-messages="errors"
require
Expand Down Expand Up @@ -113,31 +78,18 @@
<v-spacer />
<v-btn
text
data-test="dialogClose-btn"
data-test="close-btn"
@click="close()"
>
Close
</v-btn>

<v-btn
v-if="addUser"
color="primary"
text
data-test="dialogAdd-btn"
@click="passes(addMember)"
>
Add
</v-btn>
v-text="'Close'"
/>

<v-btn
v-else
color="primary"
text
data-test="dialogEdit-btn"
data-test="edit-btn"
@click="passes(editMember)"
>
Edit
</v-btn>
v-text="'Edit'"
/>
</v-card-actions>
</ValidationObserver>
</v-card>
Expand Down Expand Up @@ -171,11 +123,6 @@ export default {
default: Object,
},
addUser: {
type: Boolean,
required: true,
},
show: {
type: Boolean,
required: false,
Expand All @@ -195,34 +142,13 @@ export default {
computed: {
showDialog: {
get() {
return this.show && this.hasAuthorization;
return this.show;
},
set(value) {
this.$emit('show', value);
},
},
hasAuthorization() {
const ownerID = this.$store.getters['namespaces/get'].owner;
if (this.member.id === ownerID) {
return false;
}
const role = this.$store.getters['auth/role'];
if (role !== '') {
let action = '';
if (this.addUser) action = 'addMember';
else action = 'removeMember';
return hasPermission(
this.$authorizer.role[role],
this.$actions.namespace[action],
) && this.member.role !== role;
}
return false;
},
},
async created() {
Expand All @@ -235,40 +161,7 @@ export default {
methods: {
setLocalVariable() {
if (this.addUser) {
this.memberLocal = {
id: '',
username: '',
selectedRole: '',
};
} else {
this.memberLocal = { ...this.member, selectedRole: this.member.role };
}
},
async addMember() {
try {
await this.$store.dispatch('namespaces/addUser', {
username: this.memberLocal.username,
tenant_id: this.$store.getters['auth/tenant'],
role: this.memberLocal.selectedRole,
});
this.$store.dispatch('snackbar/showSnackbarSuccessAction', this.$success.namespaceNewMember);
this.update();
} catch (error) {
if (error.response.status === 404) {
this.$refs.obs.setErrors({
username: 'The username doesn\'t exist.',
});
} else if (error.response.status === 409) {
this.$refs.obs.setErrors({
username: 'The username has already been added to namespace.',
});
} else {
this.$store.dispatch('snackbar/showSnackbarErrorAction', this.$errors.snackbar.namespaceNewMember);
}
}
this.memberLocal = { ...this.member, selectedRole: this.member.role };
},
async editMember() {
Expand Down Expand Up @@ -305,10 +198,6 @@ export default {
this.close();
},
setShowDialog() {
this.$emit('update:show', true);
},
close() {
this.$emit('update:show', false);
this.$refs.obs.reset();
Expand Down
55 changes: 43 additions & 12 deletions ui/src/components/namespace/NamespaceMemberList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,33 @@
</template>

<v-list>
<v-list-item @click.stop="showNamespaceMemberForm(members.indexOf(item))">
<NamespaceMemberFormDialog
:add-user="false"
:member="item"
:show.sync="namespaceMemberFormShow[members.indexOf(item)]"
data-test="NamespaceMemberFormDialogEdit-component"
@update="refresh"
/>
</v-list-item>
<v-tooltip
bottom
:disabled="hasAuthorizationEditMember"
>
<template #activator="{ on, attrs }">
<div
v-bind="attrs"
v-on="on"
>
<v-list-item
:disabled="!hasAuthorizationEditMember"
@click.stop="showNamespaceMemberFormEdit(members.indexOf(item))"
>
<NamespaceMemberFormDialogEdit
:member="item"
:show.sync="namespaceMemberFormShow[members.indexOf(item)]"
data-test="NamespaceMemberFormDialogEdit-component"
@update="refresh"
/>
</v-list-item>
</div>
</template>

<span>
You don't have this kind of authorization.
</span>
</v-tooltip>

<v-tooltip
bottom
Expand Down Expand Up @@ -84,8 +102,8 @@

<script>
import NamespaceMemberFormDialogEdit from '@/components/namespace/NamespaceMemberFormDialogEdit';
import NamespaceMemberDelete from '@/components/namespace/NamespaceMemberDelete';
import NamespaceMemberFormDialog from '@/components/namespace/NamespaceMemberFormDialog';
import hasPermission from '@/components/filter/permission';
Expand All @@ -95,8 +113,8 @@ export default {
filters: { hasPermission },
components: {
NamespaceMemberFormDialogEdit,
NamespaceMemberDelete,
NamespaceMemberFormDialog,
},
props: {
Expand All @@ -111,6 +129,7 @@ export default {
menu: false,
namespaceMemberFormShow: [],
namespaceMemberDeleteShow: [],
editMemberAction: 'editMember',
removeMemberAction: 'removeMember',
headers: [
{
Expand Down Expand Up @@ -144,6 +163,18 @@ export default {
return this.namespace.members;
},
hasAuthorizationEditMember() {
const role = this.$store.getters['auth/role'];
if (role !== '') {
return hasPermission(
this.$authorizer.role[role],
this.$actions.namespace[this.editMemberAction],
);
}
return false;
},
hasAuthorizationRemoveMember() {
const role = this.$store.getters['auth/role'];
if (role !== '') {
Expand All @@ -162,7 +193,7 @@ export default {
this.getNamespace();
},
showNamespaceMemberForm(index) {
showNamespaceMemberFormEdit(index) {
this.namespaceMemberFormShow[index] = this.namespaceMemberFormShow[index] === undefined
? true : !this.namespaceMemberFormShow[index];
this.$set(this.namespaceMemberFormShow, index, this.namespaceMemberFormShow[index]);
Expand Down
Loading

0 comments on commit 3141ca7

Please sign in to comment.