[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
Alfresco · Jun 13, 2023 · cc13551 · cc13551
1 parent 2244474
commit cc13551
Show file tree

Hide file tree

Showing 26 changed files with 117 additions and 76 deletions.
diff --git a/.eslintrc.json b/.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": [

diff --git a/app/src/app/app.component.scss b/app/src/app/app.component.scss
@@ -1,4 +1,4 @@
-:host {
+app-root {
   display: flex;
   flex: 1;
 

diff --git a/app/src/app/app.components.ts b/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>();

diff --git a/app/src/app/components/login/login.component.ts b/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 {}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/projects/aca-content/about/src/about.component.scss b/projects/aca-content/about/src/about.component.scss
@@ -1,4 +1,6 @@
-adf-about {
-  padding: 10px;
-  width: 100%;
+app-about-page {
+  adf-about {
+    padding: 10px;
+    width: 100%;
+  }
 }
diff --git a/projects/aca-content/about/src/about.component.ts b/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);

diff --git a/projects/aca-content/src/lib/components/common/language-picker/language-picker.component.ts b/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 {}
diff --git a/projects/aca-content/src/lib/components/common/logout/logout.component.ts b/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) {}

diff --git a/projects/aca-content/src/lib/components/common/toggle-shared/toggle-shared.component.ts b/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()

diff --git a/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.ts b/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.ts
@@ -22,15 +22,16 @@
  * 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';
 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({

diff --git a/projects/aca-content/src/lib/components/favorites/favorites.component.ts b/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[] = [];

diff --git a/projects/aca-content/src/lib/components/files/files.component.ts b/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;

diff --git a/projects/aca-content/src/lib/components/home/home.component.ts b/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';

diff --git a/projects/aca-content/src/lib/components/info-drawer/comments-tab/comments-tab.component.ts b/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()

diff --git a/...nt/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts b/...nt/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;

diff --git a/...ent/src/lib/components/info-drawer/library-metadata-tab/library-metadata-tab.component.ts b/...ent/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()

diff --git a/projects/aca-content/src/lib/components/info-drawer/versions-tab/versions-tab.component.ts b/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()

diff --git a/projects/aca-content/src/lib/components/libraries/libraries.component.ts b/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[] = [];

diff --git a/projects/aca-content/src/lib/components/recent-files/recent-files.component.ts b/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[] = [];