Skip to content

Commit 7721148

Browse files
szuperazszuperaz
authored
Merge pull request #241 from GetStream/remove-custom-action-names
feat: Remove custom action names and mute action
2 parents 04a8490 + 64f8c8d commit 7721148

File tree

6 files changed

+63
-68
lines changed

6 files changed

+63
-68
lines changed

‎docusaurus/docs/Angular/basics/upgrade-v2.mdx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,17 @@ The `notification$` stream on the [`ChatClientService`](../services/ChatClientSe
6363
The `events$` stream emits the received [client, notification and user presence events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript).
6464

6565
The payload of this Observable was renamed from `Notification` to `ClientEvent`.
66+
67+
## Custom action names removed
68+
69+
Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control the authorization of the following message actions:
70+
71+
| Custom action name | Channel capability | Comment |
72+
| ------------------ | -------------------- | -------------------------------------------- |
73+
| `quote` | `quote-message` | |
74+
| `pin` | `pin-message` | Currently turned off because not implemented |
75+
| `flag` | `flag-message` | |
76+
| `edit` | `update-own-message` | |
77+
| `edit-any` | `update-any-message` | |
78+
79+
The `mute` action is removed.

‎projects/customizations-example/src/app/message-action/message-action.component.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Component, Input } from '@angular/core';
66
styleUrls: ['./message-action.component.scss'],
77
})
88
export class MessageActionComponent {
9-
@Input() actionName!: 'quote' | 'pin' | 'flag' | 'mute' | 'edit' | 'delete';
9+
@Input() actionName!: 'quote' | 'pin' | 'flag' | 'edit' | 'delete';
1010
@Input() actionLabelOrTranslationKey!: (() => string) | string;
1111
@Input() actionHandler!: () => any;
1212

@@ -19,7 +19,6 @@ export class MessageActionComponent {
1919
delete: 'delete',
2020
flag: 'flag',
2121
pin: 'push_pin',
22-
mute: 'volume_mute',
2322
};
2423
return iconMapping[this.actionName];
2524
}

‎projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.spec.ts‎

Lines changed: 38 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -154,19 +154,23 @@ describe('MessageActionsBoxComponent', () => {
154154
expect(queryFlagAction()).toBeNull();
155155
expect(queryQuoteAction()).toBeNull();
156156

157-
component.enabledActions = ['pin', 'edit-any', 'delete-any'];
157+
component.enabledActions = [
158+
'pin-message',
159+
'update-any-message',
160+
'delete-any',
161+
];
158162
component.ngOnChanges({ enabledActions: {} as SimpleChange });
159163
fixture.detectChanges();
160164

161165
expect(queryDeleteAction()).not.toBeNull();
162166
expect(queryEditAction()).not.toBeNull();
163-
expect(queryPinAction()).not.toBeNull();
167+
expect(queryPinAction()).toBeNull();
164168
expect(queryMuteAction()).toBeNull();
165169
expect(queryFlagAction()).toBeNull();
166170
expect(queryQuoteAction()).toBeNull();
167171
});
168172

169-
it(`should only display 'flag' action for other user's messages`, () => {
173+
it(`should only display 'flag-message' action for other user's messages`, () => {
170174
component.enabledActions = ['flag-message'];
171175
component.isMine = false;
172176
component.ngOnChanges({
@@ -187,7 +191,7 @@ describe('MessageActionsBoxComponent', () => {
187191
});
188192

189193
it('should handle quote action', () => {
190-
component.enabledActions = ['quote'];
194+
component.enabledActions = ['quote-message'];
191195
component.ngOnChanges({ enabledActions: {} as SimpleChange });
192196
fixture.detectChanges();
193197
const spy = TestBed.inject(ChannelService).selectMessageToQuote;
@@ -211,7 +215,7 @@ describe('MessageActionsBoxComponent', () => {
211215
...component.message!,
212216
quoted_message: mockMessage() as any as MessageResponseBase,
213217
};
214-
component.enabledActions = ['quote'];
218+
component.enabledActions = ['quote-message'];
215219
component.ngOnChanges({
216220
message: {} as SimpleChange,
217221
enabledActions: {} as SimpleChange,
@@ -221,9 +225,10 @@ describe('MessageActionsBoxComponent', () => {
221225
expect(queryQuoteAction()).toBeNull();
222226
});
223227

224-
it('should display the pin action label correctly', () => {
228+
// eslint-disable-next-line jasmine/no-disabled-tests
229+
xit('should display the pin action label correctly', () => {
225230
component.message = { ...message, ...{ pinned: false } };
226-
component.enabledActions = ['pin'];
231+
component.enabledActions = ['pin-message'];
227232
component.ngOnChanges({
228233
message: {} as SimpleChange,
229234
enabledActions: {} as SimpleChange,
@@ -240,8 +245,9 @@ describe('MessageActionsBoxComponent', () => {
240245
expect(pinAction?.textContent).toContain('Unpin');
241246
});
242247

243-
it('should handle pin action', () => {
244-
component.enabledActions = ['pin'];
248+
// eslint-disable-next-line jasmine/no-disabled-tests
249+
xit('should handle pin action', () => {
250+
component.enabledActions = ['pin-message'];
245251
component.ngOnChanges({ enabledActions: {} as SimpleChange });
246252
fixture.detectChanges();
247253
spyOn(window, 'alert').and.callThrough();
@@ -252,24 +258,10 @@ describe('MessageActionsBoxComponent', () => {
252258
expect(window.alert).toHaveBeenCalledWith(jasmine.anything());
253259
});
254260

255-
it('should handle mute action', () => {
256-
component.enabledActions = ['mute'];
257-
component.ngOnChanges({
258-
enabledActions: {} as SimpleChange,
259-
});
260-
fixture.detectChanges();
261-
spyOn(window, 'alert').and.callThrough();
262-
const action = queryMuteAction();
263-
action?.click();
264-
fixture.detectChanges();
265-
266-
expect(window.alert).toHaveBeenCalledWith(jasmine.anything());
267-
});
268-
269261
it('should handle flag action', async () => {
270262
const notificationService = TestBed.inject(NotificationService);
271263
spyOn(notificationService, 'addTemporaryNotification');
272-
component.enabledActions = ['flag'];
264+
component.enabledActions = ['flag-message'];
273265
component.ngOnChanges({ enabledActions: {} as SimpleChange });
274266
fixture.detectChanges();
275267
const action = queryFlagAction();
@@ -288,7 +280,7 @@ describe('MessageActionsBoxComponent', () => {
288280
const notificationService = TestBed.inject(NotificationService);
289281
spyOn(notificationService, 'addTemporaryNotification');
290282
mockChatClient.flagMessage.and.rejectWith();
291-
component.enabledActions = ['flag'];
283+
component.enabledActions = ['flag-message'];
292284
component.ngOnChanges({ enabledActions: {} as SimpleChange });
293285
fixture.detectChanges();
294286
const action = queryFlagAction();
@@ -304,10 +296,10 @@ describe('MessageActionsBoxComponent', () => {
304296

305297
it('should emit the number of displayed actions', () => {
306298
component.enabledActions = [
307-
'pin',
299+
'pin-message',
308300
'update-own-message',
309301
'delete-own-message',
310-
'flag',
302+
'flag-message',
311303
];
312304
component.isMine = true;
313305
const spy = jasmine.createSpy();
@@ -318,16 +310,15 @@ describe('MessageActionsBoxComponent', () => {
318310
});
319311
fixture.detectChanges();
320312

321-
expect(spy).toHaveBeenCalledWith(3);
313+
expect(spy).toHaveBeenCalledWith(2);
322314

323315
spy.calls.reset();
324316
component.enabledActions = [
325-
'pin',
317+
'pin-message',
326318
'update-any-message',
327319
'delete',
328-
'flag',
329-
'quote',
330-
'mute',
320+
'flag-message',
321+
'quote-message',
331322
];
332323
component.isMine = false;
333324
component.ngOnChanges({
@@ -336,12 +327,12 @@ describe('MessageActionsBoxComponent', () => {
336327
});
337328
fixture.detectChanges();
338329

339-
expect(spy).toHaveBeenCalledWith(5);
330+
expect(spy).toHaveBeenCalledWith(3);
340331
});
341332

342333
describe('should display edit action', () => {
343334
it('if #enabledActions contains "edit" and #isMine', () => {
344-
component.enabledActions = ['edit'];
335+
component.enabledActions = ['update-own-message'];
345336
component.isMine = false;
346337
component.ngOnChanges({
347338
enabledActions: {} as SimpleChange,
@@ -359,7 +350,7 @@ describe('MessageActionsBoxComponent', () => {
359350
});
360351

361352
it('if #enabledActions contains "edit-any"', () => {
362-
component.enabledActions = ['edit-any'];
353+
component.enabledActions = ['update-any-message'];
363354
component.isMine = false;
364355
component.ngOnChanges({
365356
enabledActions: {} as SimpleChange,
@@ -408,7 +399,12 @@ describe('MessageActionsBoxComponent', () => {
408399
it('should emit #isEditing if user starts to edit', () => {
409400
const spy = jasmine.createSpy();
410401
component.isEditing.subscribe(spy);
411-
component.enabledActions = ['pin', 'edit-any', 'delete', 'flag'];
402+
component.enabledActions = [
403+
'pin-message',
404+
'update-any-message',
405+
'delete',
406+
'flag-message',
407+
];
412408
component.ngOnChanges({
413409
enabledActions: {} as SimpleChange,
414410
});
@@ -420,7 +416,7 @@ describe('MessageActionsBoxComponent', () => {
420416
});
421417

422418
it('should open modal if user starts to edit', () => {
423-
component.enabledActions = ['edit'];
419+
component.enabledActions = ['update-own-message'];
424420
component.isMine = true;
425421
component.ngOnChanges({
426422
enabledActions: {} as SimpleChange,
@@ -434,7 +430,7 @@ describe('MessageActionsBoxComponent', () => {
434430
});
435431

436432
it('should display message input if user starts to edit', () => {
437-
component.enabledActions = ['edit-any'];
433+
component.enabledActions = ['update-any-message'];
438434
component.ngOnChanges({
439435
enabledActions: {} as SimpleChange,
440436
});
@@ -446,7 +442,7 @@ describe('MessageActionsBoxComponent', () => {
446442
});
447443

448444
it('should call update message if "Send" button is clicked', () => {
449-
component.enabledActions = ['edit-any'];
445+
component.enabledActions = ['update-any-message'];
450446
component.isEditModalOpen = true;
451447
component.ngOnChanges({
452448
enabledActions: {} as SimpleChange,
@@ -463,7 +459,7 @@ describe('MessageActionsBoxComponent', () => {
463459
});
464460

465461
it('should close modal with "Cancel" button', () => {
466-
component.enabledActions = ['edit'];
462+
component.enabledActions = ['update-own-message'];
467463
component.isMine = true;
468464
component.ngOnChanges({
469465
enabledActions: {} as SimpleChange,
@@ -482,7 +478,7 @@ describe('MessageActionsBoxComponent', () => {
482478
});
483479

484480
it('should update #isEditModalOpen if modal is closed', () => {
485-
component.enabledActions = ['edit'];
481+
component.enabledActions = ['update-own-message'];
486482
component.isMine = true;
487483
component.isEditModalOpen = true;
488484
component.ngOnChanges({
@@ -502,7 +498,7 @@ describe('MessageActionsBoxComponent', () => {
502498
});
503499

504500
it('should close modal if message was updated successfully', () => {
505-
component.enabledActions = ['edit'];
501+
component.enabledActions = ['update-own-message'];
506502
component.isMine = true;
507503
component.ngOnChanges({
508504
enabledActions: {} as SimpleChange,

‎projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -101,17 +101,15 @@ export class MessageActionsBoxComponent implements OnChanges, OnDestroy {
101101
isMine: boolean,
102102
message: StreamMessage
103103
) =>
104-
(enabledActions.indexOf('quote') !== -1 ||
105-
enabledActions.indexOf('quote-message') !== -1) &&
104+
enabledActions.indexOf('quote-message') !== -1 &&
106105
!message?.quoted_message,
107106
},
108107
{
109108
actionName: 'pin',
110109
actionLabelOrTranslationKey: () =>
111110
this.message?.pinned ? 'streamChat.Unpin' : 'streamChat.Pin',
112111
actionHandler: () => alert('Feature not yet implemented'),
113-
isVisible: (enabledActions: string[]) =>
114-
enabledActions.indexOf('pin') !== -1,
112+
isVisible: () => false,
115113
},
116114
{
117115
actionName: 'flag',
@@ -130,16 +128,7 @@ export class MessageActionsBoxComponent implements OnChanges, OnDestroy {
130128
}
131129
},
132130
isVisible: (enabledActions: string[], isMine: boolean) =>
133-
(enabledActions.indexOf('flag') !== -1 ||
134-
enabledActions.indexOf('flag-message') !== -1) &&
135-
!isMine,
136-
},
137-
{
138-
actionName: 'mute',
139-
actionLabelOrTranslationKey: 'streamChat.Mute',
140-
actionHandler: () => alert('Feature not yet implemented'),
141-
isVisible: (enabledActions: string[]) =>
142-
enabledActions.indexOf('mute') !== -1,
131+
enabledActions.indexOf('flag-message') !== -1 && !isMine,
143132
},
144133
{
145134
actionName: 'edit',
@@ -149,10 +138,7 @@ export class MessageActionsBoxComponent implements OnChanges, OnDestroy {
149138
this.isEditModalOpen = true;
150139
},
151140
isVisible: (enabledActions: string[], isMine: boolean) =>
152-
((enabledActions.indexOf('edit') !== -1 ||
153-
enabledActions.indexOf('update-own-message') !== -1) &&
154-
isMine) ||
155-
enabledActions.indexOf('edit-any') !== -1 ||
141+
(enabledActions.indexOf('update-own-message') !== -1 && isMine) ||
156142
enabledActions.indexOf('update-any-message') !== -1,
157143
},
158144
{

‎projects/stream-chat-angular/src/lib/message/message.component.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -456,14 +456,14 @@ describe('MessageComponent', () => {
456456
});
457457

458458
it(`shouldn't display message actions if there is no visible message action`, () => {
459-
component.enabledMessageActions = ['flag'];
459+
component.enabledMessageActions = ['flag-message'];
460460
fixture.detectChanges();
461461

462462
expect(queryActionIcon()).toBeNull();
463463
});
464464

465465
it('should open and close message actions box', () => {
466-
component.enabledMessageActions = ['edit', 'flag'];
466+
component.enabledMessageActions = ['update-own-message', 'flag-message'];
467467
fixture.detectChanges();
468468

469469
expect(messageActionsBoxComponent.isOpen).toBeFalse();
@@ -475,7 +475,7 @@ describe('MessageComponent', () => {
475475
});
476476

477477
it('should close message actions box on mouseleave event', () => {
478-
component.enabledMessageActions = ['edit', 'flag'];
478+
component.enabledMessageActions = ['update-own-message', 'flag-message'];
479479
component.isActionBoxOpen = true;
480480
fixture.detectChanges();
481481

@@ -906,7 +906,7 @@ describe('MessageComponent', () => {
906906
describe('in thread mode', () => {
907907
beforeEach(() => {
908908
component.mode = 'thread';
909-
component.enabledMessageActions = ['edit', 'delete'];
909+
component.enabledMessageActions = ['update-own-message', 'delete'];
910910
component.ngOnChanges({
911911
enabledMessageActions: {} as SimpleChange,
912912
});

‎projects/stream-chat-angular/src/lib/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -192,13 +192,13 @@ export type MessageActionsBoxContext = {
192192
};
193193

194194
export type MessageActionBoxItemContext = {
195-
actionName: 'quote' | 'pin' | 'flag' | 'mute' | 'edit' | 'delete';
195+
actionName: 'quote' | 'pin' | 'flag' | 'edit' | 'delete';
196196
actionLabelOrTranslationKey: (() => string) | string;
197197
actionHandler: () => any;
198198
};
199199

200200
export type MessageActionItem = {
201-
actionName: 'quote' | 'pin' | 'flag' | 'mute' | 'edit' | 'delete';
201+
actionName: 'quote' | 'pin' | 'flag' | 'edit' | 'delete';
202202
actionLabelOrTranslationKey: (() => string) | string;
203203
isVisible: (
204204
enabledActions: string[],

0 commit comments

Comments
 (0)