Skip to content

Commit c4713f2

Browse files
szuperazszuperaz
committed
feat: Remove deprecated inputs
BREAKING CHANGE: Deprecated inputs are removed See our docs on how to upgrade
1 parent 4c5bd26 commit c4713f2

File tree

12 files changed

+64
-398
lines changed

12 files changed

+64
-398
lines changed

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
id: upgrade-v2
3+
title: Upgrade from v2
4+
---
5+
6+
## Inputs removed in favor of channel capabilities
7+
8+
The following inputs are removed:
9+
10+
| Component/service | Input name | Replacement |
11+
| ------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
12+
| [`MessageListComponent`](../components/MessageListComponent.mdx) | `enabledMessageActionsInput` | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users |
13+
| [`MessageListComponent`](../components/MessageListComponent.mdx) | `areReactionsEnabled` | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users |
14+
| [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) | `acceptedFileTypes` | Use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) to control the accepted file types |
15+
| [`MessageInputComponent`](../components/MessageInputComponent.mdx) | `acceptedFileTypes` | Use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) to control the accepted file types |
16+
| [`MessageComponent`](../components/MessageComponent.mdx) | `areReactionsEnabled` | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users. Please note that existing reactions of a message will be displayed, even if reacting is disabled. |
17+
| [`MessageComponent`](../components/MessageComponent.mdx) | `canReactToMessage` | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users. Please note that existing reactions of a message will be displayed, even if reacting is disabled. |
18+
| [`MessageComponent`](../components/MessageComponent.mdx) | `canReceiveReadEvents` | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users |

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

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,6 @@ import { ChatClientService } from '../chat-client.service';
1313
import { MessageInputComponent } from '../message-input/message-input.component';
1414
import { NotificationService } from '../notification.service';
1515
import { StreamMessage } from '../types';
16-
17-
/**
18-
* @deprecated https://getstream.io/chat/docs/sdk/angular/components/message-actions/#required-enabledactions
19-
*/
20-
export type MessageActions =
21-
| 'edit'
22-
| 'delete'
23-
| 'edit-any'
24-
| 'delete-any'
25-
| 'pin'
26-
| 'quote'
27-
| 'flag'
28-
| 'mute';
29-
3016
/**
3117
* The `MessageActionsBox` component displays a list of message actions (i.e edit), that can be opened or closed. You can find the [list of the supported actions](../concepts/message-interactions.mdx) in the message interaction guide.
3218
*/

‎projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,6 @@ export class MessageInputConfigService {
3535
* You can add an emoji picker by [providing your own emoji picker template](../code-examples/emoji-picker.mdx)
3636
*/
3737
emojiPickerTemplate: TemplateRef<void> | undefined;
38-
/**
39-
* You can narrow the accepted file types by providing the [accepted types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept). By default every file type is accepted.
40-
* @deprecated use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) instead
41-
*/
42-
acceptedFileTypes: string[] | undefined;
4338
/**
4439
* If `false`, users can only upload one attachment per message
4540
*/

‎projects/stream-chat-angular/src/lib/message-input/message-input.component.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,6 @@
129129
type="file"
130130
class="rfu-file-input"
131131
data-testid="file-input"
132-
[accept]="accept"
133132
[multiple]="isMultipleFileUploadEnabled"
134133
(change)="filesSelected(fileInput.files)"
135134
/>

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

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -271,31 +271,6 @@ describe('MessageInputComponent', () => {
271271
expect(queryattachmentUploadButton()).toBeNull();
272272
});
273273

274-
it('should set the accepted file types, even if app settings are defined', () => {
275-
appSettings$.next({
276-
file_upload_config: {
277-
allowed_file_extensions: ['.txt'],
278-
allowed_mime_types: ['application/json'],
279-
},
280-
image_upload_config: {
281-
allowed_file_extensions: ['.png'],
282-
allowed_mime_types: ['image/jpeg'],
283-
},
284-
});
285-
const accepted = ['.jpg', '.png'];
286-
component.acceptedFileTypes = accepted;
287-
fixture.detectChanges();
288-
const attachmentUpload = queryFileInput();
289-
290-
expect(attachmentUpload?.getAttribute('accept')).toBe(accepted.join(','));
291-
});
292-
293-
it('should accept every file type if #acceptedFileTypes not provided', () => {
294-
const attachmentUpload = queryFileInput();
295-
296-
expect(attachmentUpload?.getAttribute('accept')).toBe('');
297-
});
298-
299274
it('should set multiple attribute on file upload', () => {
300275
const attachmentUpload = queryFileInput();
301276

@@ -546,23 +521,6 @@ describe('MessageInputComponent', () => {
546521
expect(queryTextarea()).toBeUndefined();
547522
});
548523

549-
it(`shouldn't set accept, if #acceptedFileTypes not defined`, () => {
550-
expect(component.accept).toBe('');
551-
552-
appSettings$.next({
553-
file_upload_config: {
554-
allowed_file_extensions: ['.txt'],
555-
allowed_mime_types: ['application/json'],
556-
},
557-
image_upload_config: {
558-
allowed_file_extensions: ['.png'],
559-
allowed_mime_types: ['image/jpeg'],
560-
},
561-
});
562-
563-
expect(component.accept).toBe('');
564-
});
565-
566524
it('should check uploaded attachments', async () => {
567525
const notificationService = TestBed.inject(NotificationService);
568526
spyOn(notificationService, 'addTemporaryNotification');
@@ -626,17 +584,6 @@ describe('MessageInputComponent', () => {
626584
);
627585
});
628586

629-
it(`shouldn't check attachments against #acceptedFileTypes, if that is defined`, async () => {
630-
const notificationService = TestBed.inject(NotificationService);
631-
spyOn(notificationService, 'addTemporaryNotification');
632-
component.acceptedFileTypes = ['application/pdf', '.jpg'];
633-
const files = [{ name: 'test3.png', type: 'image/png' }];
634-
await component.filesSelected(files as any as FileList);
635-
636-
expect(attachmentService.filesSelected).toHaveBeenCalledWith(files);
637-
expect(notificationService.addTemporaryNotification).not.toHaveBeenCalled();
638-
});
639-
640587
it('should load app settings, if not yet loaded', async () => {
641588
const files = [{ name: 'test.pdf', type: 'application/pdf' }];
642589
await component.filesSelected(files as any as FileList);

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

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -80,12 +80,6 @@ export class MessageInputComponent
8080
* Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
8181
*/
8282
@Input() mode: 'thread' | 'main' = 'main';
83-
/**
84-
* You can narrow the accepted file types by providing the [accepted types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept). By default every file type is accepted.
85-
* If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
86-
* @deprecated use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) instead
87-
*/
88-
@Input() acceptedFileTypes: string[] | undefined;
8983
/**
9084
* If true, users can select multiple files to upload. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
9185
*/
@@ -172,7 +166,6 @@ export class MessageInputComponent
172166
);
173167
this.attachmentUploads$ = this.attachmentService.attachmentUploads$;
174168
this.isFileUploadEnabled = this.configService.isFileUploadEnabled;
175-
this.acceptedFileTypes = this.configService.acceptedFileTypes;
176169
this.isMultipleFileUploadEnabled =
177170
this.configService.isMultipleFileUploadEnabled;
178171
this.areMentionsEnabled = this.configService.areMentionsEnabled;
@@ -241,9 +234,6 @@ export class MessageInputComponent
241234
if (changes.isFileUploadEnabled) {
242235
this.configService.isFileUploadEnabled = this.isFileUploadEnabled;
243236
}
244-
if (changes.acceptedFileTypes) {
245-
this.configService.acceptedFileTypes = this.acceptedFileTypes;
246-
}
247237
if (changes.isMultipleFileUploadEnabled) {
248238
this.configService.isMultipleFileUploadEnabled =
249239
this.isMultipleFileUploadEnabled;
@@ -339,10 +329,6 @@ export class MessageInputComponent
339329
);
340330
}
341331

342-
get accept() {
343-
return this.acceptedFileTypes ? this.acceptedFileTypes?.join(',') : '';
344-
}
345-
346332
get quotedMessageAttachments() {
347333
const originalAttachments = this.quotedMessage?.attachments;
348334
return originalAttachments && originalAttachments.length
@@ -395,7 +381,7 @@ export class MessageInputComponent
395381
}
396382

397383
private async areAttachemntsValid(fileList: FileList | null) {
398-
if (!fileList || this.acceptedFileTypes) {
384+
if (!fileList) {
399385
return true;
400386
}
401387
if (!this.appSettings) {

‎projects/stream-chat-angular/src/lib/message-list/message-list.component.html‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,9 @@
9797
messageTemplate;
9898
context: {
9999
message: message,
100-
areReactionsEnabled: areReactionsEnabled,
101-
canReactToMessage: canReactToMessage,
102100
lastSentMessageId: !!(
103101
lastSentMessageId && message?.id === lastSentMessageId
104102
),
105-
canReceiveReadEvents: canReceiveReadEvents,
106103
messageInputTemplate: messageInputTemplate,
107104
mentionTemplate: mentionTemplate,
108105
mode: mode
@@ -113,13 +110,10 @@
113110
<ng-template #defaultMessageTemplate>
114111
<stream-message
115112
[message]="message"
116-
[areReactionsEnabled]="areReactionsEnabled"
117-
[canReactToMessage]="canReactToMessage"
118113
[isLastSentMessage]="
119114
!!(lastSentMessageId && message?.id === lastSentMessageId)
120115
"
121116
[enabledMessageActions]="enabledMessageActions"
122-
[canReceiveReadEvents]="canReceiveReadEvents"
123117
[messageInputTemplate]="messageInputTemplate"
124118
[mentionTemplate]="mentionTemplate"
125119
[mode]="mode"

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

Lines changed: 1 addition & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -99,18 +99,8 @@ describe('MessageListComponent', () => {
9999
i === messages.length - 2 ? true : false
100100
);
101101

102-
expect(m.areReactionsEnabled).toBe(component.areReactionsEnabled);
103-
expect(m.canReactToMessage).toBe(component.canReactToMessage);
104-
expect(m.enabledMessageActions).toEqual([
105-
'send-reaction', // added automatically
106-
'flag',
107-
'edit',
108-
'edit-any',
109-
'delete',
110-
'delete-any',
111-
]);
102+
expect(m.enabledMessageActions).toEqual(component.enabledMessageActions);
112103

113-
expect(m.canReceiveReadEvents).toBe(component.canReceiveReadEvents);
114104
expect(m.mode).toBe(component.mode);
115105
});
116106
});
@@ -314,130 +304,6 @@ describe('MessageListComponent', () => {
314304
/* eslint-enable jasmine/new-line-before-expect */
315305
});
316306

317-
it('should only enable reactions if channel capabilites permit it', () => {
318-
channelServiceMock.activeChannel$.next({
319-
id: 'id',
320-
data: { own_capabilities: [] },
321-
} as any as Channel);
322-
fixture.detectChanges();
323-
324-
expect(component.canReactToMessage).toBeFalse();
325-
expect(queryMessageComponents()[0].canReactToMessage).toBeFalse();
326-
327-
channelServiceMock.activeChannel$.next({
328-
id: 'id',
329-
data: { own_capabilities: ['send-reaction'] },
330-
} as any as Channel);
331-
332-
expect(component.canReactToMessage).toBeTrue();
333-
});
334-
335-
it('should only enable flag action if channel capabilites permit it', () => {
336-
channelServiceMock.activeChannel$.next({
337-
id: 'id',
338-
data: { own_capabilities: [] },
339-
} as any as Channel);
340-
component.enabledMessageActionsInput = ['flag'];
341-
component.ngOnChanges({
342-
enabledMessageActionsInput: {} as any as SimpleChange,
343-
});
344-
fixture.detectChanges();
345-
346-
expect(queryMessageComponents()[0].enabledMessageActions).toEqual([]);
347-
348-
channelServiceMock.activeChannel$.next({
349-
id: 'id',
350-
data: { own_capabilities: ['flag-message'] },
351-
} as any as Channel);
352-
fixture.detectChanges();
353-
354-
expect(queryMessageComponents()[0].enabledMessageActions).toEqual(['flag']);
355-
});
356-
357-
it('should only enable edit action if channel capabilites permit it', () => {
358-
channelServiceMock.activeChannel$.next({
359-
id: 'id',
360-
data: { own_capabilities: [] },
361-
} as any as Channel);
362-
component.enabledMessageActionsInput = ['edit'];
363-
component.ngOnChanges({
364-
enabledMessageActionsInput: {} as any as SimpleChange,
365-
});
366-
fixture.detectChanges();
367-
368-
expect(queryMessageComponents()[0].enabledMessageActions).toEqual([]);
369-
370-
channelServiceMock.activeChannel$.next({
371-
id: 'id',
372-
data: { own_capabilities: ['update-own-message'] },
373-
} as any as Channel);
374-
fixture.detectChanges();
375-
376-
expect(queryMessageComponents()[0].enabledMessageActions).toEqual(['edit']);
377-
378-
channelServiceMock.activeChannel$.next({
379-
id: 'id',
380-
data: { own_capabilities: ['update-any-message'] },
381-
} as any as Channel);
382-
fixture.detectChanges();
383-
384-
expect(queryMessageComponents()[0].enabledMessageActions).toEqual(['edit']);
385-
386-
component.enabledMessageActionsInput = ['edit-any'];
387-
component.ngOnChanges({
388-
enabledMessageActionsInput: {} as any as SimpleChange,
389-
});
390-
fixture.detectChanges();
391-
392-
expect(queryMessageComponents()[0].enabledMessageActions).toEqual([
393-
'edit-any',
394-
]);
395-
});
396-
397-
it('should only enable delete action if channel capabilites permit it', () => {
398-
channelServiceMock.activeChannel$.next({
399-
id: 'id',
400-
data: { own_capabilities: [] },
401-
} as any as Channel);
402-
component.enabledMessageActionsInput = ['delete'];
403-
component.ngOnChanges({
404-
enabledMessageActionsInput: {} as any as SimpleChange,
405-
});
406-
fixture.detectChanges();
407-
408-
expect(queryMessageComponents()[0].enabledMessageActions).toEqual([]);
409-
410-
channelServiceMock.activeChannel$.next({
411-
id: 'id',
412-
data: { own_capabilities: ['delete-own-message'] },
413-
} as any as Channel);
414-
fixture.detectChanges();
415-
416-
expect(queryMessageComponents()[0].enabledMessageActions).toEqual([
417-
'delete',
418-
]);
419-
420-
channelServiceMock.activeChannel$.next({
421-
id: 'id',
422-
data: { own_capabilities: ['delete-any-message'] },
423-
} as any as Channel);
424-
fixture.detectChanges();
425-
426-
expect(queryMessageComponents()[0].enabledMessageActions).toEqual([
427-
'delete',
428-
]);
429-
430-
component.enabledMessageActionsInput = ['delete-any'];
431-
component.ngOnChanges({
432-
enabledMessageActionsInput: {} as any as SimpleChange,
433-
});
434-
fixture.detectChanges();
435-
436-
expect(queryMessageComponents()[0].enabledMessageActions).toEqual([
437-
'delete-any',
438-
]);
439-
});
440-
441307
it('should display typing indicator', () => {
442308
expect(queryTypingIndicator()).toBeNull();
443309

0 commit comments

Comments
 (0)