[ACA-19] Toggle join request - library action (#800)

* [ACA-19] join/cancel join library actions

* [ACA-19] show the info drawer

* [ACA-19] custom icon for join library

* [ACA-19] css to 'see' custom icon for extension

* [ACA-19] reformat with prettier

* [ACA-19] better role display

* [ACA-19] simplify cancel request rule

* [ACA-19] refactor and use toggle join/cancel join component & directive

* [ACA-19] reformat with Prettier

* [ACA-19] fix title for svgIcon

* [ACA-19] fix translation

* [ACA-19] unit test

src/app/components/layout/app-layout/app-layout.component.ts

@@ -44,6 +44,8 @@ import { currentFolder } from '../../../store/selectors/app.selectors';
 import { AppStore } from '../../../store/states';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { SetSelectedNodesAction } from '../../../store/actions';
+import { MatIconRegistry } from '@angular/material';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-layout',
@@ -68,14 +70,25 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
   private minimizeConditions: string[] = ['search'];
   private hideConditions: string[] = ['preview'];
 
+  customIcon: any = {
+    join_library: './assets/images/join-library.svg'
+  };
+
   constructor(
     protected store: Store<AppStore>,
     private permission: NodePermissionService,
     private router: Router,
     private userPreferenceService: UserPreferencesService,
     private appConfigService: AppConfigService,
-    private breakpointObserver: BreakpointObserver
-  ) {}
+    private breakpointObserver: BreakpointObserver,
+    matIconRegistry: MatIconRegistry,
+    sanitizer: DomSanitizer
+  ) {
+    matIconRegistry.addSvgIcon(
+      'join_library',
+      sanitizer.bypassSecurityTrustResourceUrl(this.customIcon['join_library'])
+    );
+  }
 
   ngOnInit() {
     this.isSmallScreen$ = this.breakpointObserver

src/app/components/layout/layout.module.ts

@@ -36,6 +36,7 @@ import { PageLayoutComponent } from './page-layout/page-layout.component';
 import { PageLayoutHeaderComponent } from './page-layout/page-layout-header.component';
 import { PageLayoutContentComponent } from './page-layout/page-layout-content.component';
 import { PageLayoutErrorComponent } from './page-layout/page-layout-error.component';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   imports: [
@@ -45,7 +46,8 @@ import { PageLayoutErrorComponent } from './page-layout/page-layout-error.compon
     ContentModule.forChild(),
     AppCommonModule,
     AppSidenavModule,
-    AppHeaderModule
+    AppHeaderModule,
+    HttpClientModule
   ],
   declarations: [
     AppLayoutComponent,