[ACA-4709] ensure all components have encapsulation set to none (#3271)

* ACA-4709 Added use-none-component-view-encapsulation eslint rule and correct part of components

* ACA-4709 More changes for encapsulation

* ACA-4709 Installed eslint-plugin-eslint-angular dependency

* ACA-4709 Corrected rest places with did not use none encapsulation

* ACA-4709 Exclude process inline templates plugin from spec files

.eslintrc.json

@@ -5,6 +5,15 @@
   ],
   "plugins": ["@nrwl/nx"],
   "overrides": [
+    {
+      "files": ["*.ts"],
+      "plugins": ["@alfresco/eslint-angular"],
+      "extends": ["plugin:@angular-eslint/template/process-inline-templates"],
+      "excludedFiles": ["*.spec.ts"],
+      "rules": {
+        "@alfresco/eslint-angular/use-none-component-view-encapsulation": "error"
+      }
+    },
     {
       "files": [
         "*.ts"
@@ -15,7 +24,6 @@
       "extends": [
         "plugin:@nrwl/nx/typescript",
         "plugin:@nrwl/nx/angular",
-        "plugin:@angular-eslint/template/process-inline-templates",
         "plugin:@cspell/recommended"
       ],
       "plugins": [

app/src/app/app.component.scss

@@ -1,4 +1,4 @@
-:host {
+app-root {
   display: flex;
   flex: 1;
 

app/src/app/app.components.ts

@@ -22,14 +22,15 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { AppService } from '@alfresco/aca-shared';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
   onDestroy$: Subject<boolean> = new Subject<boolean>();

app/src/app/components/login/login.component.ts

@@ -23,12 +23,13 @@
  */
 
 import { AppConfigModule, LoginModule } from '@alfresco/adf-core';
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   standalone: true,
   imports: [LoginModule, AppConfigModule, TranslateModule],
-  templateUrl: './login.component.html'
+  templateUrl: './login.component.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class LoginComponent {}

package-lock.json

@@ -13,6 +13,7 @@
         "@alfresco/adf-content-services": "6.1.0-5145838719",
         "@alfresco/adf-core": "6.1.0-5145838719",
         "@alfresco/adf-extensions": "6.1.0-5145838719",
+        "@alfresco/eslint-plugin-eslint-angular": "6.2.0-5201142775",
         "@alfresco/js-api": "6.1.0",
         "@angular/animations": "14.1.3",
         "@angular/cdk": "14.1.3",
@@ -230,6 +231,11 @@
         "tslib": "^2.0.0"
       }
     },
+    "node_modules/@alfresco/eslint-plugin-eslint-angular": {
+      "version": "6.2.0-5201142775",
+      "resolved": "https://registry.npmjs.org/@alfresco/eslint-plugin-eslint-angular/-/eslint-plugin-eslint-angular-6.2.0-5201142775.tgz",
+      "integrity": "sha512-3rqok28L8paBXjgADymgZh8aHUeA26CBz/GpatXhkDCmZ92tiwFGpL3Q5/ArRn34CxCWeWgCI/xJzaLVrQxCQg=="
+    },
     "node_modules/@alfresco/js-api": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-6.1.0.tgz",

package.json

@@ -41,6 +41,7 @@
     "@alfresco/adf-content-services": "6.1.0-5145838719",
     "@alfresco/adf-core": "6.1.0-5145838719",
     "@alfresco/adf-extensions": "6.1.0-5145838719",
+    "@alfresco/eslint-plugin-eslint-angular": "6.2.0-5201142775",
     "@alfresco/js-api": "6.1.0",
     "@angular/animations": "14.1.3",
     "@angular/cdk": "14.1.3",

projects/aca-content/about/src/about.component.scss

@@ -1,4 +1,6 @@
-adf-about {
+app-about-page {
-  padding: 10px;
+  adf-about {
-  width: 100%;
+    padding: 10px;
+    width: 100%;
+  }
 }

projects/aca-content/about/src/about.component.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { DEV_MODE_TOKEN } from './dev-mode.tokens';
 import { AppExtensionService } from '@alfresco/adf-extensions';
 import { AboutModule, AppConfigService, AuthenticationService, RepositoryInfo } from '@alfresco/adf-core';
@@ -40,7 +40,8 @@ import { MatButtonModule } from '@angular/material/button';
   imports: [CommonModule, TranslateModule, AboutModule, PageLayoutModule, RouterModule, MatIconModule, MatButtonModule],
   selector: 'app-about-page',
   templateUrl: './about.component.html',
-  styleUrls: ['./about.component.scss']
+  styleUrls: ['./about.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class AboutComponent implements OnInit {
   private authService = inject(AuthenticationService);

projects/aca-content/src/lib/components/common/language-picker/language-picker.component.ts

@@ -23,7 +23,7 @@
  */
 
 import { LanguageMenuModule } from '@alfresco/adf-core';
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { TranslateModule } from '@ngx-translate/core';
@@ -40,6 +40,7 @@ import { TranslateModule } from '@ngx-translate/core';
     <mat-menu #langMenu="matMenu">
       <adf-language-menu></adf-language-menu>
     </mat-menu>
-  `
+  `,
+  encapsulation: ViewEncapsulation.None
 })
 export class LanguagePickerComponent {}

projects/aca-content/src/lib/components/common/logout/logout.component.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { SetSelectedNodesAction } from '@alfresco/aca-shared/store';
 import { TranslateModule } from '@ngx-translate/core';
@@ -39,7 +39,8 @@ import { DirectiveModule } from '@alfresco/adf-core';
       <mat-icon>exit_to_app</mat-icon>
       <span>{{ 'APP.SIGN_OUT' | translate }}</span>
     </button>
-  `
+  `,
+  encapsulation: ViewEncapsulation.None
 })
 export class LogoutComponent {
   constructor(private store: Store) {}

projects/aca-content/src/lib/components/common/toggle-shared/toggle-shared.component.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { SelectionState } from '@alfresco/adf-extensions';
@@ -38,7 +38,8 @@ import { takeUntil } from 'rxjs/operators';
   standalone: true,
   imports: [CommonModule, MatMenuModule, MatIconModule, TranslateModule, MatButtonModule],
   selector: 'app-toggle-shared',
-  templateUrl: './toggle-shared.component.html'
+  templateUrl: './toggle-shared.component.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class ToggleSharedComponent implements OnInit, OnDestroy {
   @Input()

projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { SiteEntry, FavoritePaging, Pagination } from '@alfresco/js-api';
 import { AppHookService, ContentApiService, PageComponent } from '@alfresco/aca-shared';
 import { NavigateLibraryAction } from '@alfresco/aca-shared/store';
@@ -30,7 +30,8 @@ import { UserPreferencesService } from '@alfresco/adf-core';
 import { DocumentListPresetRef } from '@alfresco/adf-extensions';
 
 @Component({
-  templateUrl: './favorite-libraries.component.html'
+  templateUrl: './favorite-libraries.component.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class FavoriteLibrariesComponent extends PageComponent implements OnInit {
   pagination: Pagination = new Pagination({

projects/aca-content/src/lib/components/favorites/favorites.component.ts

@@ -24,12 +24,13 @@
 
 import { ContentApiService, PageComponent } from '@alfresco/aca-shared';
 import { MinimalNodeEntity, MinimalNodeEntryEntity, PathElementEntity, PathInfo } from '@alfresco/js-api';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { debounceTime, map } from 'rxjs/operators';
 import { DocumentListPresetRef } from '@alfresco/adf-extensions';
 
 @Component({
-  templateUrl: './favorites.component.html'
+  templateUrl: './favorites.component.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class FavoritesComponent extends PageComponent implements OnInit {
   columns: DocumentListPresetRef[] = [];

projects/aca-content/src/lib/components/files/files.component.ts

@@ -23,7 +23,7 @@
  */
 
 import { ShowHeaderMode } from '@alfresco/adf-core';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { MinimalNodeEntity, MinimalNodeEntryEntity, PathElement, PathElementEntity } from '@alfresco/js-api';
 import { NodeActionsService } from '../../services/node-actions.service';
@@ -34,7 +34,8 @@ import { FilterSearch, ShareDataRow, FileUploadEvent } from '@alfresco/adf-conte
 import { DocumentListPresetRef } from '@alfresco/adf-extensions';
 
 @Component({
-  templateUrl: './files.component.html'
+  templateUrl: './files.component.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
   isValidPath = true;

projects/aca-content/src/lib/components/home/home.component.ts

@@ -22,12 +22,13 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { Router } from '@angular/router';
 import { AppConfigService } from '@alfresco/adf-core';
 
 @Component({
-  template: ''
+  template: '',
+  encapsulation: ViewEncapsulation.None
 })
 export class HomeComponent implements OnInit {
   readonly DEFAULT_LANDING_PAGE = '/personal-files';

projects/aca-content/src/lib/components/info-drawer/comments-tab/comments-tab.component.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { MinimalNodeEntryEntity } from '@alfresco/js-api';
 import { NodePermissionService, isLocked } from '@alfresco/aca-shared';
 import { MatCardModule } from '@angular/material/card';
@@ -32,7 +32,8 @@ import { NodeCommentsModule } from '@alfresco/adf-content-services';
   standalone: true,
   imports: [MatCardModule, NodeCommentsModule],
   selector: 'app-comments-tab',
-  template: `<mat-card><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments></mat-card>`
+  template: `<mat-card><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments></mat-card>`,
+  encapsulation: ViewEncapsulation.None
 })
 export class CommentsTabComponent implements OnInit {
   @Input()

projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, OnInit, OnChanges, OnDestroy } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { UntypedFormGroup, UntypedFormControl, Validators, FormGroupDirective, NgForm, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { QueriesApi, SiteEntry, SitePaging } from '@alfresco/js-api';
 import { Store } from '@ngrx/store';
@@ -63,7 +63,8 @@ export class InstantErrorStateMatcher implements ErrorStateMatcher {
     MatButtonModule
   ],
   selector: 'app-library-metadata-form',
-  templateUrl: './library-metadata-form.component.html'
+  templateUrl: './library-metadata-form.component.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestroy {
   private _queriesApi: QueriesApi;

projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-tab.component.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { SiteEntry } from '@alfresco/js-api';
 import { LibraryMetadataFormComponent } from './library-metadata-form.component';
 
@@ -31,7 +31,8 @@ import { LibraryMetadataFormComponent } from './library-metadata-form.component'
   imports: [LibraryMetadataFormComponent],
   selector: 'app-library-metadata-tab',
   template: '<app-library-metadata-form [node]="node"></app-library-metadata-form>',
-  host: { class: 'app-metadata-tab' }
+  host: { class: 'app-metadata-tab' },
+  encapsulation: ViewEncapsulation.None
 })
 export class LibraryMetadataTabComponent {
   @Input()

projects/aca-content/src/lib/components/info-drawer/versions-tab/versions-tab.component.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
 import { MinimalNodeEntryEntity } from '@alfresco/js-api';
 import { CommonModule } from '@angular/common';
 import { VersionManagerModule } from '@alfresco/adf-content-services';
@@ -50,7 +50,8 @@ import { TranslateModule } from '@ngx-translate/core';
         {{ 'VERSION.SELECTION.EMPTY' | translate }}
       </div>
     </ng-template>
-  `
+  `,
+  encapsulation: ViewEncapsulation.None
 })
 export class VersionsTabComponent implements OnInit, OnChanges {
   @Input()

projects/aca-content/src/lib/components/libraries/libraries.component.ts

@@ -24,12 +24,13 @@
 
 import { NavigateLibraryAction } from '@alfresco/aca-shared/store';
 import { SiteEntry } from '@alfresco/js-api';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { AppHookService, PageComponent } from '@alfresco/aca-shared';
 import { DocumentListPresetRef } from '@alfresco/adf-extensions';
 
 @Component({
-  templateUrl: './libraries.component.html'
+  templateUrl: './libraries.component.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class LibrariesComponent extends PageComponent implements OnInit {
   columns: DocumentListPresetRef[] = [];

projects/aca-content/src/lib/components/recent-files/recent-files.component.ts

@@ -22,14 +22,15 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { MinimalNodeEntity } from '@alfresco/js-api';
 import { debounceTime } from 'rxjs/operators';
 import { PageComponent } from '@alfresco/aca-shared';
 import { DocumentListPresetRef } from '@alfresco/adf-extensions';
 
 @Component({
-  templateUrl: './recent-files.component.html'
+  templateUrl: './recent-files.component.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class RecentFilesComponent extends PageComponent implements OnInit {
   columns: DocumentListPresetRef[] = [];

projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.scss

@@ -1,45 +1,47 @@
 @import '../../../ui/mixins';
 
-.adf-search-results {
+aca-search-results {
-  @include flex-row;
+  .adf-search-results {
-
-  &__content {
-    @include flex-column;
-
-    border-left: 1px solid #eee;
-  }
-
-  &__content-header {
-    display: flex;
-    padding: 0 25px;
-    flex-direction: row;
-    align-items: center;
-    border-bottom: 1px solid #eee;
-  }
-
-  &--info-text {
-    flex: 1;
-    font-size: 16px;
-    color: rgba(0, 0, 0, 0.54);
-  }
-
-  .text--bold {
-    font-weight: 600;
-  }
-
-  .content {
     @include flex-row;
 
-    flex: unset;
+    &__content {
-    height: unset;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    flex-wrap: wrap;
-
-    &__side--left {
       @include flex-column;
 
+      border-left: 1px solid #eee;
+    }
+
+    &__content-header {
+      display: flex;
+      padding: 0 25px;
+      flex-direction: row;
+      align-items: center;
+      border-bottom: 1px solid #eee;
+    }
+
+    &--info-text {
+      flex: 1;
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.54);
+    }
+
+    .text--bold {
+      font-weight: 600;
+    }
+
+    .content {
+      @include flex-row;
+
+      flex: unset;
       height: unset;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      flex-wrap: wrap;
+
+      &__side--left {
+        @include flex-column;
+
+        height: unset;
+      }
     }
   }
 }

projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.ts

@@ -24,7 +24,7 @@
 
 import { NavigateLibraryAction } from '@alfresco/aca-shared/store';
 import { NodePaging, Pagination, SiteEntry } from '@alfresco/js-api';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { SearchLibrariesQueryBuilderService } from './search-libraries-query-builder.service';
 import { AppHookService, AppService, PageComponent } from '@alfresco/aca-shared';
@@ -33,7 +33,8 @@ import { DocumentListPresetRef } from '@alfresco/adf-extensions';
 @Component({
   selector: 'aca-search-results',
   templateUrl: './search-libraries-results.component.html',
-  styleUrls: ['./search-libraries-results.component.scss']
+  styleUrls: ['./search-libraries-results.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class SearchLibrariesResultsComponent extends PageComponent implements OnInit {
   searchedWord: string;

projects/aca-content/src/lib/components/shared-files/shared-files.component.ts

@@ -22,13 +22,15 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { debounceTime } from 'rxjs/operators';
 import { MinimalNodeEntity } from '@alfresco/js-api';
 import { AppHookService, PageComponent } from '@alfresco/aca-shared';
 import { DocumentListPresetRef } from '@alfresco/adf-extensions';
+
 @Component({
-  templateUrl: './shared-files.component.html'
+  templateUrl: './shared-files.component.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class SharedFilesComponent extends PageComponent implements OnInit {
   columns: DocumentListPresetRef[] = [];

projects/aca-content/src/lib/components/trashcan/trashcan.component.ts

@@ -24,7 +24,7 @@
 
 import { getUserProfile } from '@alfresco/aca-shared/store';
 import { DocumentListPresetRef, ExtensionsModule } from '@alfresco/adf-extensions';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { PageComponent, PageLayoutModule, SharedToolbarModule } from '@alfresco/aca-shared';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
@@ -48,7 +48,8 @@ import { DirectivesModule } from '../../directives/directives.module';
     DataTableModule,
     ExtensionsModule
   ],
-  templateUrl: './trashcan.component.html'
+  templateUrl: './trashcan.component.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class TrashcanComponent extends PageComponent implements OnInit {
   user$ = this.store.select(getUserProfile);

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, HostListener, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostListener, Input, OnChanges, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { MinimalNodeEntity, MinimalNodeEntryEntity, SiteEntry } from '@alfresco/js-api';
 import { ContentActionRef, ExtensionsModule, SidebarTabRef } from '@alfresco/adf-extensions';
 import { Store } from '@ngrx/store';
@@ -37,11 +37,13 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { InfoDrawerModule, ToolbarModule } from '@alfresco/adf-core';
 import { SharedToolbarModule } from '../tool-bar/shared-toolbar.module';
 import { TranslateModule } from '@ngx-translate/core';
+
 @Component({
   standalone: true,
   imports: [CommonModule, TranslateModule, MatProgressBarModule, InfoDrawerModule, SharedToolbarModule, ExtensionsModule, ToolbarModule],
   selector: 'aca-info-drawer',
-  templateUrl: './info-drawer.component.html'
+  templateUrl: './info-drawer.component.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
   @Input()