Add authorization to New Data Catalog button

Author: tschaffter

client/app/data-catalog/data-catalog-authorization.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { filter, mapTo } from 'rxjs/operators';
+import { UserPermissionDataService } from 'components/auth/user-permission-data.service';
+import { EntityAuthorizationService } from 'components/authorization/entity-authorization.service';
+import config from '../app.constants';
+
+@Injectable()
+export class DataCatalogAuthorizationService extends EntityAuthorizationService {
+    // TODO Find a way to not have to inject the service in the child service, only the parent service.
+    static parameters = [UserPermissionDataService];
+    constructor(protected userPermissionDataService: UserPermissionDataService) {
+        super(userPermissionDataService);
+    }
+
+    getEntityType(): string {
+        return config.entityTypes.DATA_CATALOG.value;
+    }
+
+    getCreateActionPermissionType(): string {
+        return config.actionPermissionTypes.CREATE_DATA_CATALOG.value;
+    }
+
+    // TODO Remove when DataCatalog can be made private
+    /** @override */
+    canRead(catalogId: string): Observable<boolean> {
+        return this.userPermissionDataService.permissions().pipe(
+            filter(auth => !!auth),
+            mapTo(true)
+        );
+    }
+}

client/app/data-catalog/data-catalog-list/data-catalog-list.component.ts

@@ -1,34 +1,51 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
-import { PageTitleService } from 'components/page-title/page-title.service';
+import { Subscription } from 'rxjs';
 import { DataCatalog } from 'models/entities/data-catalog.model';
+import { NotificationService } from 'components/notification/notification.service';
+import { PageTitleService } from 'components/page-title/page-title.service';
 import { DataCatalogService } from '../data-catalog.service';
-import { UserPermissionDataService } from 'components/auth/user-permission-data.service';
+import { DataCatalogAuthorizationService } from './../data-catalog-authorization.service';
 
 @Component({
     selector: 'data-catalog-list',
     template: require('./data-catalog-list.html'),
     styles: [require('./data-catalog-list.scss')],
 })
-export class DataCatalogListComponent implements OnInit {
-    private canCreateDataCatalog = false; // used in html
+export class DataCatalogListComponent implements OnInit, OnDestroy {
+    private canCreateDataCatalog = false;
+    private canCreateDataCatalogSub: Subscription;
 
-    static parameters = [Router, PageTitleService, UserPermissionDataService, DataCatalogService];
+    static parameters = [
+        Router,
+        NotificationService,
+        PageTitleService,
+        DataCatalogService,
+        DataCatalogAuthorizationService,
+    ];
     constructor(
         private router: Router,
+        private notificationService: NotificationService,
         private pageTitleService: PageTitleService,
-        private permissionDataService: UserPermissionDataService,
-        private catalogService: DataCatalogService // used in html
+        private catalogService: DataCatalogService, // used in html
+        private catalogAuthorizationService: DataCatalogAuthorizationService
     ) {}
 
     ngOnInit() {
         this.pageTitleService.setTitle('Data Catalogs');
-        this.permissionDataService
-            .permissions()
-            .subscribe(
-                permissions => (this.canCreateDataCatalog = permissions.canCreateDataCatalog()),
-                err => console.error(err)
-            ); // unsubscribe in destructor
+
+        this.canCreateDataCatalogSub = this.catalogAuthorizationService.canCreate().subscribe(
+            canCreate => {
+                this.canCreateDataCatalog = canCreate;
+            },
+            err => console.error(err)
+        );
+    }
+
+    ngOnDestroy() {
+        if (this.canCreateDataCatalogSub) {
+            this.canCreateDataCatalogSub.unsubscribe();
+        }
     }
 
     onEntityClick(catalog: DataCatalog) {
@@ -37,9 +54,11 @@ export class DataCatalogListComponent implements OnInit {
         }
     }
 
-    onCreateNewDataCatalog(): void {
+    newDataCatalog(): void {
         if (this.canCreateDataCatalog) {
             this.router.navigate(['/', 'data-catalogs', 'new']);
+        } else {
+            this.notificationService.info('Not available to Users yet.');
         }
     }
 }

client/app/data-catalog/data-catalog-list/data-catalog-list.html

@@ -1,6 +1,13 @@
 <div class="app-primary-header app-data-catalog-list-header">
     <h1 class="app-primary-header-title">Data Catalogs</h1>
-    <a [disabled]="!canCreateDataCatalog" mat-raised-button color="warn" class="app-data-catalog-list-new-data-catalog-btn" (click)="onCreateNewDataCatalog()" aria-label="Create a new tool">New Data Catalog</a>
+    <a
+        mat-raised-button
+        color="warn"
+        class="app-data-catalog-list-new-data-catalog-btn"
+        (click)="newDataCatalog()"
+        aria-label="Create a new tool"
+        ><mat-icon class="app-data-catalog-list-new-data-catalog-btn-icon" *ngIf="!canCreateDataCatalog">lock</mat-icon>New Data Catalog</a
+    >
 </div>
 
 <div class="app-data-catalogs-list">

client/app/data-catalog/data-catalog-list/data-catalog-list.scss

@@ -1,3 +1,5 @@
+@import "../../../styles/general";
+
 .app-data-catalog-list {
     display: flex;
     flex-flow: row nowrap;
@@ -15,3 +17,8 @@
 .app-data-catalog-list-new-data-catalog-btn {
     margin-right: 20px;
 }
+
+.app-data-catalog-list-new-data-catalog-btn-icon {
+    @include mat-icon-size(20px);
+    padding-right: 5px;
+}

client/app/data-catalog/data-catalog.module.ts

@@ -20,6 +20,7 @@ import { ClipboardModule } from 'ngx-clipboard';
 import { MessagingModule } from 'components/messaging/messaging.module';
 import { DataCatalogThreadComponent } from './data-catalog-thread/data-catalog-thread.component';
 import { DataCatalogThreadNewComponent } from './data-catalog-thread-new/data-catalog-thread-new.component';
+import { DataCatalogAuthorizationService } from './data-catalog-authorization.service';
 
 export const ROUTES: Routes = [
     {
@@ -75,7 +76,7 @@ export const ROUTES: Routes = [
         DataCatalogThreadComponent,
         DataCatalogThreadNewComponent,
     ],
-    providers: [SocketService, DataCatalogService],
+    providers: [SocketService, DataCatalogService, DataCatalogAuthorizationService],
     exports: [],
 })
 export class DataCatalogModule {}

client/app/tool/tool-authorization.service.ts

@@ -21,6 +21,7 @@ export class ToolAuthorizationService extends EntityAuthorizationService {
         return config.actionPermissionTypes.CREATE_TOOL.value;
     }
 
+    // TODO Remove when Tool can be made private
     /** @override */
     canRead(toolId: string): Observable<boolean> {
         return this.userPermissionDataService.permissions().pipe(