make all components use OnPush change detection

.eslintrc.json

@@ -17,7 +17,7 @@
       ],
       "rules": {
         "@angular-eslint/sort-ngmodule-metadata-arrays": "off",
-        "@angular-eslint/prefer-on-push-component-change-detection": "off",
+        "@angular-eslint/prefer-on-push-component-change-detection": 2,
         "unused-imports/no-unused-imports": "error",
         "no-console": [
           "error",

.github/workflows/workflow.yml

@@ -3,11 +3,11 @@ on:
   push:
     branches:
       - master
-      - 6.x.x-rc
+      - 7.x.x-beta
   pull_request:
     branches:
       - master
-      - 6.x.x-rc
+      - 7.x.x-beta
 jobs:
   workflow:
     runs-on: ubuntu-latest

package.json

@@ -55,7 +55,7 @@
         "channel": "rc"
       }
     ],
-    "dryRun": false,
+    "dryRun": true,
     "plugins": [
       [
         "@semantic-release/commit-analyzer",
@@ -79,7 +79,7 @@
         "@semantic-release/npm",
         {
           "pkgRoot": "./dist/stream-chat-angular",
-          "npmPublish": true
+          "npmPublish": false
         }
       ],
       [

projects/customizations-example/.eslintrc.json

@@ -27,7 +27,8 @@
             "prefix": "app",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@angular-eslint/prefer-on-push-component-change-detection": "off"
       }
     },
     {

projects/customizations-example/src/app/icon/icon.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChangeDetectionStrategy } from '@angular/core';
 
 import { IconComponent } from './icon.component';
 
@@ -9,7 +10,11 @@ describe('IconComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [IconComponent],
-    }).compileComponents();
+    })
+      .overrideComponent(IconComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents();
   });
 
   beforeEach(() => {

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

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChangeDetectionStrategy } from '@angular/core';
 
 import { MessageActionComponent } from './message-action.component';
 
@@ -9,7 +10,11 @@ describe('MessageActionComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [MessageActionComponent],
-    }).compileComponents();
+    })
+      .overrideComponent(MessageActionComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents();
   });
 
   beforeEach(() => {

projects/customizations-example/src/app/thread-header/thread-header.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChangeDetectionStrategy } from '@angular/core';
 
 import { ThreadHeaderComponent } from './thread-header.component';
 
@@ -9,7 +10,11 @@ describe('ThreadHeaderComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ThreadHeaderComponent],
-    }).compileComponents();
+    })
+      .overrideComponent(ThreadHeaderComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents();
   });
 
   beforeEach(() => {

projects/sample-app/.eslintrc.json

@@ -33,7 +33,8 @@
           {
             "patterns": ["dist/*", "public-api"]
           }
-        ]
+        ],
+        "@angular-eslint/prefer-on-push-component-change-detection": "off"
       }
     },
     {

projects/sample-app/src/styles.scss

@@ -61,6 +61,7 @@ body {
 
     .channel-list.thread-close {
       width: 30%;
+      min-width: 30%;
       max-width: 420px;
       position: initial;
       z-index: auto;

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

@@ -15,6 +15,7 @@ import { CustomAttachmentListContext, GalleryAttachment } from '../types';
 import { AttachmentConfigurationService } from '../attachment-configuration.service';
 import {
   AfterViewInit,
+  ChangeDetectionStrategy,
   Component,
   SimpleChange,
   TemplateRef,
@@ -63,7 +64,11 @@ describe('AttachmentListComponent', () => {
         MessageService,
       ],
       imports: [TranslateModule.forRoot()],
-    }).compileComponents();
+    })
+      .overrideComponent(AttachmentListComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents();
     TestBed.inject(StreamI18nService).setTranslation();
   });
 

projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts

@@ -1,4 +1,6 @@
 import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   HostBinding,
@@ -36,6 +38,7 @@ import { MessageService } from '../message.service';
   selector: 'stream-attachment-list',
   templateUrl: './attachment-list.component.html',
   styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
   /**
@@ -77,6 +80,7 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
     private channelService: ChannelService,
     private attachmentConfigurationService: AttachmentConfigurationService,
     private messageService: MessageService,
+    private cdRef: ChangeDetectorRef,
   ) {}
 
   trackByUrl = (attachment: Attachment | GalleryAttachment) => {
@@ -119,7 +123,10 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
   ngOnInit(): void {
     this.subscriptions.push(
       this.customTemplatesService.customAttachmentListTemplate$.subscribe(
-        (t) => (this.customAttachmentsTemplate = t),
+        (t) => {
+          this.customAttachmentsTemplate = t;
+          this.cdRef.markForCheck();
+        },
       ),
     );
   }

projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.html

@@ -72,6 +72,7 @@
                 <a
                   class="str-chat__attachment-preview-file-download"
                   data-testclass="file-download-link"
+                  target="_blank"
                   download
                   href="{{ attachmentUpload.url }}"
                   (click)="

projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.spec.ts

@@ -5,6 +5,7 @@ import { AttachmentUpload, CustomAttachmentPreviewListContext } from '../types';
 import { AttachmentPreviewListComponent } from './attachment-preview-list.component';
 import {
   AfterViewInit,
+  ChangeDetectionStrategy,
   Component,
   TemplateRef,
   ViewChild,
@@ -25,7 +26,11 @@ describe('AttachmentPreviewListComponent', () => {
     attachmentUploads$ = new BehaviorSubject<AttachmentUpload[]>([]);
     await TestBed.configureTestingModule({
       declarations: [AttachmentPreviewListComponent],
-    }).compileComponents();
+    })
+      .overrideComponent(AttachmentPreviewListComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents();
   });
 
   beforeEach(() => {

projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts

@@ -1,4 +1,6 @@
 import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
@@ -20,6 +22,7 @@ import { Attachment } from 'stream-chat';
   selector: 'stream-attachment-preview-list',
   templateUrl: './attachment-preview-list.component.html',
   styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AttachmentPreviewListComponent implements OnInit, OnDestroy {
   /**
@@ -41,18 +44,23 @@ export class AttachmentPreviewListComponent implements OnInit, OnDestroy {
   constructor(
     private customTemplateService: CustomTemplatesService,
     public readonly attachmentService: AttachmentService,
+    private cdRef: ChangeDetectorRef,
   ) {}
 
   ngOnInit(): void {
     this.subscriptions.push(
       this.customTemplateService.customAttachmentPreviewListTemplate$.subscribe(
-        (t) => (this.customAttachmentsPreview = t),
+        (t) => {
+          this.customAttachmentsPreview = t;
+          this.cdRef.markForCheck();
+        },
       ),
     );
     this.subscriptions.push(
-      this.attachmentService.customAttachments$.subscribe(
-        (a) => (this.customAttachments = a),
-      ),
+      this.attachmentService.customAttachments$.subscribe((a) => {
+        this.customAttachments = a;
+        this.cdRef.markForCheck();
+      }),
     );
   }
 
@@ -67,8 +75,4 @@ export class AttachmentPreviewListComponent implements OnInit, OnDestroy {
   attachmentDeleted(upload: AttachmentUpload) {
     this.deleteAttachment.emit(upload);
   }
-
-  trackByFile(_: number, item: AttachmentUpload) {
-    return item.file;
-  }
 }

projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.spec.ts

@@ -4,6 +4,7 @@ import { Channel } from 'stream-chat';
 import { AvatarComponent } from '../avatar/avatar.component';
 
 import { AvatarPlaceholderComponent } from './avatar-placeholder.component';
+import { ChangeDetectionStrategy } from '@angular/core';
 
 describe('AvatarPlaceholderComponent', () => {
   let component: AvatarPlaceholderComponent;
@@ -12,7 +13,11 @@ describe('AvatarPlaceholderComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [AvatarPlaceholderComponent, AvatarComponent],
-    }).compileComponents();
+    })
+      .overrideComponent(AvatarPlaceholderComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents();
   });
 
   beforeEach(() => {

projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts

@@ -1,4 +1,9 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+} from '@angular/core';
 import { Channel, User } from 'stream-chat';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { AvatarContext, AvatarLocation, AvatarType } from '../types';
@@ -10,6 +15,7 @@ import { AvatarContext, AvatarLocation, AvatarType } from '../types';
   selector: 'stream-avatar-placeholder',
   templateUrl: './avatar-placeholder.component.html',
   styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AvatarPlaceholderComponent implements OnChanges {
   /**

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

@@ -1,4 +1,4 @@
-import { SimpleChange } from '@angular/core';
+import { ChangeDetectionStrategy, SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Observable, Subject, of } from 'rxjs';
 import { ChatClientService, ClientEvent } from '../chat-client.service';
@@ -33,6 +33,10 @@ describe('AvatarComponent', () => {
       providers: [
         { provide: ChatClientService, useValue: chatClientServiceMock },
       ],
+    }).overrideComponent(AvatarComponent, {
+      set: {
+        changeDetection: ChangeDetectionStrategy.Default,
+      },
     });
     fixture = TestBed.createComponent(AvatarComponent);
     component = fixture.componentInstance;
@@ -230,6 +234,9 @@ describe('AvatarComponent', () => {
     expect(queryImg()?.src).toContain('url/to/img');
 
     component.imageUrl = 'channel/img';
+    component.ngOnChanges({
+      imageUrl: {} as SimpleChange,
+    });
     fixture.detectChanges();
 
     expect(queryImg()?.src).toContain('channel/img');

projects/stream-chat-angular/src/lib/avatar/avatar.component.ts

@@ -1,9 +1,9 @@
 import {
   AfterViewInit,
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   Input,
-  NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -22,6 +22,7 @@ import { AvatarLocation, AvatarType } from '../types';
   selector: 'stream-avatar',
   templateUrl: './avatar.component.html',
   styleUrl: './avatar.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AvatarComponent
   implements OnChanges, OnInit, AfterViewInit, OnDestroy
@@ -71,14 +72,18 @@ export class AvatarComponent
 
   constructor(
     private chatClientService: ChatClientService,
-    private ngZone: NgZone,
     private cdRef: ChangeDetectorRef,
   ) {}
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes['channel']) {
       this.updateIsOnlineSubscription();
     }
+
+    if (changes['imageUrl'] || changes['channel']) {
+      this.isError = false;
+    }
+
     if (changes.type || changes.name || changes.channel) {
       this.setInitials();
     }
@@ -99,7 +104,7 @@ export class AvatarComponent
             this.updateIsOnlineSubscription();
           }
           if (this.isViewInited) {
-            this.cdRef.detectChanges();
+            this.cdRef.markForCheck();
           }
         }
       }),
@@ -163,7 +168,13 @@ export class AvatarComponent
           .pipe(filter((e) => e.eventType === 'user.presence.changed'))
           .subscribe((event) => {
             if (event.event.user?.id === otherMember.id) {
-              this.isOnline = event.event.user?.online || false;
+              const isOnline = event.event.user?.online || false;
+              if (isOnline !== this.isOnline) {
+                this.isOnline = isOnline;
+                if (this.isViewInited) {
+                  this.cdRef.markForCheck();
+                }
+              }
             }
           });
       } else {