[go: nahoru, domu]
Skip to content

Commit

Permalink
ui: refator member delete component
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 8, 2022
1 parent 339d909 commit 8833e15
Show file tree
Hide file tree
Showing 6 changed files with 234 additions and 205 deletions.
67 changes: 16 additions & 51 deletions ui/src/components/namespace/NamespaceMemberDelete.vue
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,20 @@
<template>
<fragment>
<v-tooltip
bottom
:disabled="hasAuthorization"
>
<template #activator="{ on }">
<span v-on="on">
<v-list-item-title data-test="remove-item">
Remove
</v-list-item-title>
</span>

<span v-on="on">
<v-icon
:disabled="!hasAuthorization"
left
data-test="remove-icon"
v-on="on"
>
delete
</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="'delete'"
/>
</v-list-item-icon>

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

<v-dialog
v-model="showDialog"
Expand Down Expand Up @@ -89,39 +77,16 @@ export default {
},
},
data() {
return {
action: 'removeMember',
};
},
computed: {
showDialog: {
get() {
return this.show && this.hasAuthorization;
return this.show;
},
set(value) {
this.$emit('update: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 !== '') {
return hasPermission(
this.$authorizer.role[role],
this.$actions.namespace[this.action],
) && this.member.role !== role;
}
return false;
},
},
methods: {
Expand Down
52 changes: 44 additions & 8 deletions ui/src/components/namespace/NamespaceMemberList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,33 @@
/>
</v-list-item>

<v-list-item @click.stop="showNamespaceMemberDelete(members.indexOf(item))">
<NamespaceMemberDelete
:member="item"
:show.sync="namespaceMemberDeleteShow[members.indexOf(item)]"
data-test="namespaceMemberDelete-component"
@update="refresh"
/>
</v-list-item>
<v-tooltip
bottom
:disabled="hasAuthorizationRemoveMember"
>
<template #activator="{ on, attrs }">
<div
v-bind="attrs"
v-on="on"
>
<v-list-item
:disabled="!hasAuthorizationRemoveMember"
@click.stop="showNamespaceMemberDelete(members.indexOf(item))"
>
<NamespaceMemberDelete
:member="item"
:show.sync="namespaceMemberDeleteShow[members.indexOf(item)]"
data-test="namespaceMemberDelete-component"
@update="refresh"
/>
</v-list-item>
</div>
</template>

<span>
You don't have this kind of authorization.
</span>
</v-tooltip>
</v-list>
</v-menu>
</template>
Expand All @@ -68,9 +87,13 @@
import NamespaceMemberDelete from '@/components/namespace/NamespaceMemberDelete';
import NamespaceMemberFormDialog from '@/components/namespace/NamespaceMemberFormDialog';
import hasPermission from '@/components/filter/permission';
export default {
name: 'NamespaceMemberList',
filters: { hasPermission },
components: {
NamespaceMemberDelete,
NamespaceMemberFormDialog,
Expand All @@ -88,6 +111,7 @@ export default {
menu: false,
namespaceMemberFormShow: [],
namespaceMemberDeleteShow: [],
removeMemberAction: 'removeMember',
headers: [
{
text: 'Username',
Expand Down Expand Up @@ -119,6 +143,18 @@ export default {
members() {
return this.namespace.members;
},
hasAuthorizationRemoveMember() {
const role = this.$store.getters['auth/role'];
if (role !== '') {
return hasPermission(
this.$authorizer.role[role],
this.$actions.namespace[this.removeMemberAction],
);
}
return false;
},
},
methods: {
Expand Down
115 changes: 39 additions & 76 deletions ui/tests/unit/components/namespaces/NamespaceMemberDelete.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { mount, createLocalVue } from '@vue/test-utils';
import { ValidationProvider, ValidationObserver } from 'vee-validate';
import Vuetify from 'vuetify';
import NamespaceMemberDelete from '@/components/namespace/NamespaceMemberDelete';
import { actions, authorizer } from '../../../../src/authorizer';
import '@/vee-validate';

describe('NamespaceMemberDelete', () => {
Expand All @@ -17,13 +16,6 @@ describe('NamespaceMemberDelete', () => {

let wrapper;

const role = ['owner', 'operator'];

const hasAuthorization = {
owner: true,
operator: false,
};

const members = [
{
id: 'xxxxxxxx',
Expand All @@ -48,57 +40,49 @@ describe('NamespaceMemberDelete', () => {

const tests = [
{
description: 'Button',
description: 'Dialog closed',
variables: {
namespace: namespaceGlobal,
},
props: {
member: members[0],
show: false,
},
data: {
action: 'removeMember',
},
template: {
'remove-item': true,
'remove-icon': true,
'remove-title': true,
'namespaceMemberDelete-dialog': false,
'close-btn': false,
'remove-btn': false,
},
},
{
description: 'Dialog',
description: 'Dialog opened',
variables: {
namespace: namespaceGlobal,
},
props: {
member: members[0],
show: true,
},
data: {
action: 'removeMember',
},
template: {
'remove-item': true,
'remove-icon': true,
'remove-title': true,
'namespaceMemberDelete-dialog': true,
'close-btn': true,
'remove-btn': true,
},
},
];

const storeVuex = (namespace, currentrole, tenant) => new Vuex.Store({
const storeVuex = (namespace, tenant) => new Vuex.Store({
namespaced: true,
state: {
namespace,
currentrole,
tenant,
},
getters: {
'namespaces/get': (state) => state.namespace,
'auth/role': (state) => state.currentrole,
'auth/tenant': (state) => state.tenant,
},
actions: {
Expand All @@ -109,69 +93,48 @@ describe('NamespaceMemberDelete', () => {
});

tests.forEach((test) => {
role.forEach((currentrole) => {
describe(`${test.description} ${currentrole}`, () => {
beforeEach(() => {
wrapper = mount(NamespaceMemberDelete, {
store: storeVuex(
test.variables.namespace,
currentrole,
test.variables.namespace.tenant_id,
),
localVue,
stubs: ['fragment'],
propsData: { member: test.props.member, show: test.props.show },
vuetify,
mocks: {
$authorizer: authorizer,
$actions: actions,
},
});
describe(`${test.description}`, () => {
beforeEach(() => {
wrapper = mount(NamespaceMemberDelete, {
store: storeVuex(
test.variables.namespace,
test.variables.namespace.tenant_id,
),
localVue,
stubs: ['fragment'],
propsData: { member: test.props.member, show: test.props.show },
vuetify,
});
});

///////
// Component Rendering
//////
///////
// Component Rendering
//////

it('Is a Vue instance', () => {
expect(wrapper).toBeTruthy();
});
it('Renders the component', () => {
expect(wrapper.html()).toMatchSnapshot();
});
it('Is a Vue instance', () => {
expect(wrapper).toBeTruthy();
});
it('Renders the component', () => {
expect(wrapper.html()).toMatchSnapshot();
});

///////
// Data checking
//////
///////
// Data checking
//////

it('Receive data in props', () => {
Object.keys(test.props).forEach((item) => {
expect(wrapper.vm[item]).toEqual(test.props[item]);
});
});
it('Compare data with default value', () => {
Object.keys(test.data).forEach((item) => {
expect(wrapper.vm[item]).toEqual(test.data[item]);
});
});
it('Process data in the computed', () => {
expect(wrapper.vm.hasAuthorization).toEqual(hasAuthorization[currentrole]);
it('Receive data in props', () => {
Object.keys(test.props).forEach((item) => {
expect(wrapper.vm[item]).toEqual(test.props[item]);
});
});

//////
// HTML validation
//////
//////
// HTML validation
//////

it('Renders the template with data', () => {
if (hasAuthorization[currentrole]) {
Object.keys(test.template).forEach((item) => {
expect(wrapper.find(`[data-test="${item}"]`).exists()).toBe(test.template[item]);
});
} else if (!test.props.show) {
Object.keys(test.template).forEach((item) => {
expect(wrapper.find(`[data-test="${item}"]`).exists()).toBe(test.template[item]);
});
}
it('Renders the template with data', () => {
Object.keys(test.template).forEach((item) => {
expect(wrapper.find(`[data-test="${item}"]`).exists()).toBe(test.template[item]);
});
});
});
Expand Down
Loading

0 comments on commit 8833e15

Please sign in to comment.