Add edit view in new tab for System Admin (#559)

* Added option to open admin edit view in new tab for system admins

* Bug fix

* Updated cli to v13

* Merge with dev package-lock.json fix

* Fixed package-lock.json

* Fix for package-lock.json

* Fix for package-lock.json

* Fix for package-lock.json

* package-lock.json merge

* package-lock version update

src/app/app.component.ts

@@ -1,4 +1,4 @@
-// Copyright 2021 Carnegie Mellon University. All Rights Reserved.
+// Copyright 2022 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
 import { OverlayContainer } from '@angular/cdk/overlay';
@@ -139,6 +139,12 @@ export class AppComponent implements OnDestroy {
         'assets/svg-icons/ic_add_24px.svg'
       )
     );
+    this.iconRegistry.addSvgIcon(
+      'ic_open_tab',
+      this.sanitizer.bypassSecurityTrustResourceUrl(
+        'assets/svg-icons/ic_open_tab.svg'
+      )
+    );
   }
 
   setTheme(theme: Theme) {

src/app/components/admin-app/admin-view-search/admin-view-search.component.ts

@@ -4,6 +4,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatSort, MatSortable } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router';
 import { View, ViewService, ViewStatus } from '../../../generated/player-api';
 import { DialogService } from '../../../services/dialog/dialog.service';
 import { LoggedInUserService } from '../../../services/logged-in-user/logged-in-user.service';
@@ -38,7 +39,8 @@ export class AdminViewSearchComponent implements OnInit {
   constructor(
     private viewService: ViewService,
     public loggedInUserService: LoggedInUserService,
-    public dialogService: DialogService
+    public dialogService: DialogService,
+    public route: ActivatedRoute
   ) {}
 
   /**
@@ -58,6 +60,12 @@ export class AdminViewSearchComponent implements OnInit {
     this.loggedInUserService.loggedInUser$.subscribe((user) => {
       this.refreshViews();
     });
+
+    // Check to see if a view was specified in the URL
+    const viewId = this.route.snapshot.queryParamMap.get('view');
+    if (viewId) {
+      this.executeViewAction('edit', viewId);
+    }
   }
 
   /**

src/app/components/player/player.component.ts

@@ -1,4 +1,4 @@
-// Copyright 2021 Carnegie Mellon University. All Rights Reserved.
+// Copyright 2022 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
 // TODO: Set sidnav status in query string.
@@ -164,17 +164,28 @@ export class PlayerComponent implements OnInit, OnDestroy {
    * Called to open the edit view dialog window
    */
   editViewFn(event) {
-    const dialogRef = this.dialog.open(AdminViewEditComponent);
-    this.data$.subscribe((data) => {
-      dialogRef.componentInstance.resetStepper();
-      dialogRef.componentInstance.updateApplicationTemplates();
-      dialogRef.componentInstance.updateView();
-      dialogRef.componentInstance.view = data.view;
-    });
-
-    dialogRef.componentInstance.editComplete.subscribe(() => {
-      dialogRef.close();
-    });
+    if (event.isNewBrowserTab === true) {
+      const url = this.router.serializeUrl(
+        this.router.createUrlTree(
+          ['/admin'],
+          { queryParams: { section: 'admin-views', view: this.routerQuery.getParams('id') }}
+          )
+        );
+      console.log('url', url);
+      window.open(url, '_blank');
+    } else {
+      const dialogRef = this.dialog.open(AdminViewEditComponent);
+      this.data$.subscribe((data) => {
+        dialogRef.componentInstance.resetStepper();
+        dialogRef.componentInstance.updateApplicationTemplates();
+        dialogRef.componentInstance.updateView();
+        dialogRef.componentInstance.view = data.view;
+      });
+
+      dialogRef.componentInstance.editComplete.subscribe(() => {
+        dialogRef.close();
+      });
+    }
   }
 
   sidenavToggleFn() {

src/app/components/shared/top-bar/topbar.component.html

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 Carnegie Mellon University. All Rights Reserved.
+Copyright 2022 Carnegie Mellon University. All Rights Reserved.
 Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 -->
 <mat-toolbar
@@ -71,13 +71,27 @@
         <mat-icon svgIcon="ic_expand_more_white_24px"></mat-icon>
       </button>
       <mat-menu #menu="matMenu" [overlapTrigger]="false">
-        <button
-          *ngIf="team && team.canManage"
-          (click)="editFn($event)"
+        <div fxLayout="row" fxLayoutAlign="start center">
+          <button
+            *ngIf="team && team.canManage"
+            (click)="editFn($event)"
+            [ngClass]="(currentUser.profile.isSystemAdmin !== null &&
+              currentUser.profile.isSystemAdmin) ? big-button : ''"
+            mat-menu-item
+          >
+            Edit View
+          </button>
+          <button 
+          title="Open in Browser Tab"
+          *ngIf="team && currentUser.profile.isSystemAdmin !== null &&
+            currentUser.profile.isSystemAdmin"
+          (click)="editFnNewTab($event)"
+          class="small-button"
           mat-menu-item
-        >
-          Edit View
-        </button>
+          >
+          <mat-icon svgIcon="ic_open_tab"></mat-icon>
+          </button>
+        </div>
         <button
           *ngIf="
             currentUser.profile.isSystemAdmin !== null &&

src/app/components/shared/top-bar/topbar.component.scss

@@ -1,4 +1,4 @@
-// Copyright 2021 Carnegie Mellon University. All Rights Reserved.
+// Copyright 2022 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 .margin-auto {
   margin: auto;
@@ -19,3 +19,10 @@
   margin-left: 50px;
   margin-right: 40px;
 }
+.big-button {
+  width: 75%;
+}
+.small-button {
+  width: 25%;
+  padding-right: 40px;
+}

src/app/components/shared/top-bar/topbar.component.ts

@@ -1,4 +1,4 @@
-// Copyright 2021 Carnegie Mellon University. All Rights Reserved.
+// Copyright 2022 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
 import {
@@ -75,6 +75,14 @@ export class TopbarComponent implements OnInit, OnDestroy {
     this.editView.emit(event);
   }
 
+  editFnNewTab(event) {
+    const newTabEvent = {
+      ...event,
+      isNewBrowserTab: true,
+    };
+    this.editView.emit(newTabEvent);
+  }
+
   sidenavToggleFn() {
     this.sidenavToggle.emit(!this.sidenav.opened);
   }