diff --git a/src/components/RightSidebar/Participants/Participant.spec.js b/src/components/RightSidebar/Participants/Participant.spec.js index 735a387effd..6dc3eaf8804 100644 --- a/src/components/RightSidebar/Participants/Participant.spec.js +++ b/src/components/RightSidebar/Participants/Participant.spec.js @@ -13,13 +13,15 @@ import VideoIcon from 'vue-material-design-icons/Video.vue' import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js' import Participant from './Participant.vue' import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue' import { ATTENDEE, PARTICIPANT } from '../../../constants.js' import storeConfig from '../../../store/storeConfig.js' -import { findNcActionButton } from '../../../test-helpers.js' +import { findNcActionButton, findNcButton } from '../../../test-helpers.js' describe('Participant.vue', () => { let conversation @@ -104,6 +106,8 @@ describe('Participant.vue', () => { }, stubs: { NcActionButton, + NcButton, + NcDialog, }, directives: { tooltip: tooltipMock, @@ -626,6 +630,12 @@ describe('Participant.vue', () => { await actionButton.find('button').trigger('click') + const dialog = wrapper.findComponent(NcDialog) + expect(dialog.exists()).toBeTruthy() + + const button = findNcButton(dialog, 'Remove') + await button.find('button').trigger('click') + expect(removeAction).toHaveBeenCalledWith(expect.anything(), { token: 'current-token', attendeeId: 'alice-attendee-id', diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue index adf889807d3..3d344ee2e25 100644 --- a/src/components/RightSidebar/Participants/Participant.vue +++ b/src/components/RightSidebar/Participants/Participant.vue @@ -284,14 +284,15 @@ {{ t('spreed', 'Edit permissions') }} + - + @click="isRemoveDialogOpen = true"> @@ -306,6 +307,22 @@ :token="token" @close="hidePermissionsEditor" /> + + + {{ removeDialogMessage }} + + + {{ t('spreed', 'Dismiss') }} + + + {{ t('spreed', 'Remove') }} + + + + @@ -346,6 +363,7 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js' import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' import ParticipantPermissionsEditor from './ParticipantPermissionsEditor.vue' @@ -378,6 +396,7 @@ export default { NcActionText, NcActionSeparator, NcButton, + NcDialog, ParticipantPermissionsEditor, // Icons Account, @@ -450,6 +469,7 @@ export default { isUserNameTooltipVisible: false, isStatusTooltipVisible: false, permissionsEditor: false, + isRemoveDialogOpen: false, disabled: false, } }, @@ -775,6 +795,21 @@ export default { } }, + removeDialogMessage() { + switch (this.participant.actorType) { + case ATTENDEE.ACTOR_TYPE.GROUPS: + return t('spreed', 'Do you really want to remove group "{displayName}" and its members from this conversation?', + this.participant, undefined, { escape: false, sanitize: false }) + case ATTENDEE.ACTOR_TYPE.CIRCLES: + return t('spreed', 'Do you really want to remove team "{displayName}" and its members from this conversation?', + this.participant, undefined, { escape: false, sanitize: false }) + case ATTENDEE.ACTOR_TYPE.USERS: + default: + return t('spreed', 'Do you really want to remove {displayName} from this conversation?', + this.participant, undefined, { escape: false, sanitize: false }) + } + }, + showModeratorLabel() { return this.isModerator && ![CONVERSATION.TYPE.ONE_TO_ONE, CONVERSATION.TYPE.ONE_TO_ONE_FORMER, CONVERSATION.TYPE.CHANGELOG].includes(this.conversation.type) @@ -943,6 +978,7 @@ export default { token: this.token, attendeeId: this.attendeeId, }) + this.isRemoveDialogOpen = false }, grantAllPermissions() { @@ -1201,4 +1237,8 @@ export default { } } +.critical > :deep(.action-button) { + color: var(--color-error); +} +
{{ removeDialogMessage }}