remove teamid from url and add copy button (#645)

- remove unused and broken teamId from url - add functionality to the word "Team" in the topbar - tooltip that displays team id - copy team id to clipboard on click
cmu-sei · May 8, 2024 · cd443cc · cd443cc
1 parent 842d42e
commit cd443cc
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 114 deletions.
diff --git a/src/app/components/player/player.component.html b/src/app/components/player/player.component.html
@@ -4,102 +4,98 @@
 -->
 
 <ng-container *ngIf="data$ | async as data; else loading">
-  <ng-container *ngIf="loaded" ; else loading>
-    <mat-sidenav-container
-      class="appcontent-container"
-      [autosize]="autosizeSidenav"
+  <mat-sidenav-container
+    class="appcontent-container"
+    [autosize]="autosizeSidenav"
+  >
+    <mat-sidenav
+      #sidenav
+      class="appbarmenu-container"
+      mode="side"
+      [opened]="opened$ | async"
+      mwlResizable
+      (resizing)="resizingFn($event)"
+      (resizeEnd)="resizeEnd($event)"
+      [ngStyle]="resizeStyle"
     >
-      <mat-sidenav
-        #sidenav
-        class="appbarmenu-container"
-        mode="side"
-        [opened]="opened$ | async"
-        mwlResizable
-        (resizing)="resizingFn($event)"
-        (resizeEnd)="resizeEnd($event)"
-        [ngStyle]="resizeStyle"
-      >
-        <div class="grid">
-          <div>
-            <mat-list>
-              <mat-list-item
-                class="d-flex"
-                [ngClass]="
-                  (mini$ | async) ? 'player-title-mini' : 'player-title'
-                "
-              >
-                <a class="nolink" [routerLink]="['/']">
-                  <div class="d-flex align-items-center">
-                    <mat-icon
-                      [ngClass]="
-                        (mini$ | async) ? 'player-icon-mini' : 'player-icon'
-                      "
-                      svgIcon="ic_crucible_player"
-                    ></mat-icon>
-                    <h2 *ngIf="!(mini$ | async)">
-                      <b>{{ data.title }}</b>
-                    </h2>
-                  </div>
-                </a>
-              </mat-list-item>
-            </mat-list>
-            <mat-divider></mat-divider>
-            <app-application-list
-              [viewId]="data.view.id"
-              [teams]="data.teams"
-              [mini]="mini$ | async"
-            ></app-application-list>
-            <img
-              *ngIf="!(mini$ | async)"
-              alt="crucible logo"
-              class="crucible-logo"
-              [src]="
-                (theme$ | async) === 'light-theme'
-                  ? 'assets/img/crucible-logo-light.png'
-                  : 'assets/img/crucible-logo-dark.png'
-              "
-            />
-          </div>
-          <div
+      <div class="grid">
+        <div>
+          <mat-list>
+            <mat-list-item
+              class="d-flex"
+              [ngClass]="(mini$ | async) ? 'player-title-mini' : 'player-title'"
+            >
+              <a class="nolink" [routerLink]="['/']">
+                <div class="d-flex align-items-center">
+                  <mat-icon
+                    [ngClass]="
+                      (mini$ | async) ? 'player-icon-mini' : 'player-icon'
+                    "
+                    svgIcon="ic_crucible_player"
+                  ></mat-icon>
+                  <h2 *ngIf="!(mini$ | async)">
+                    <b>{{ data.title }}</b>
+                  </h2>
+                </div>
+              </a>
+            </mat-list-item>
+          </mat-list>
+          <mat-divider></mat-divider>
+          <app-application-list
+            [viewId]="data.view.id"
+            [teams]="data.teams"
+            [mini]="mini$ | async"
+          ></app-application-list>
+          <img
             *ngIf="!(mini$ | async)"
-            class="resize-handle-right"
-            mwlResizeHandle
-            [resizeEdges]="{ right: true }"
-          ></div>
+            alt="crucible logo"
+            class="crucible-logo"
+            [src]="
+              (theme$ | async) === 'light-theme'
+                ? 'assets/img/crucible-logo-light.png'
+                : 'assets/img/crucible-logo-dark.png'
+            "
+          />
         </div>
-      </mat-sidenav>
-      <mat-sidenav-content class="noscroll">
-        <app-topbar
-          [sidenav]="sidenav"
-          [title]="data.view.name"
-          [topbarColor]="topbarColor"
-          topbarView="player-player"
-          [teams]="data.teams"
-          [team]="data.team"
-          [viewId]="viewId"
-          [mini]="mini$ | async"
-          (setTeam)="setPrimaryTeam($event)"
-          (sidenavToggle)="sidenavToggleFn($event)"
-          (editView)="editViewFn($event)"
-          [topbarTextColor]="topbarTextColor"
-        ></app-topbar>
+        <div
+          *ngIf="!(mini$ | async)"
+          class="resize-handle-right"
+          mwlResizeHandle
+          [resizeEdges]="{ right: true }"
+        ></div>
+      </div>
+    </mat-sidenav>
+    <mat-sidenav-content class="noscroll">
+      <app-topbar
+        [sidenav]="sidenav"
+        [title]="data.view.name"
+        [topbarColor]="topbarColor"
+        topbarView="player-player"
+        [teams]="data.teams"
+        [team]="data.team"
+        [viewId]="viewId"
+        [mini]="mini$ | async"
+        (setTeam)="setPrimaryTeam($event)"
+        (sidenavToggle)="sidenavToggleFn($event)"
+        (editView)="editViewFn($event)"
+        [topbarTextColor]="topbarTextColor"
+      ></app-topbar>
 
-        <app-focused-app></app-focused-app>
+      <app-focused-app></app-focused-app>
 
-        <app-notifications
-          *ngIf="user$ | async as user; else loading"
-          [viewGuid]="data.view.id"
-          [teamGuid]="data.team.id"
-          [userGuid]="user.profile.id"
-          [userToken]="user.access_token"
-          [userName]="user.profile.name"
-          [topbarColor]="topbarColor"
-          class="notification-height"
-        >
-        </app-notifications>
-      </mat-sidenav-content>
-    </mat-sidenav-container>
-  </ng-container>
+      <app-notifications
+        *ngIf="user$ | async as user; else loading"
+        [viewGuid]="data.view.id"
+        [teamGuid]="data.team.id"
+        [userGuid]="user.profile.id"
+        [userToken]="user.access_token"
+        [userName]="user.profile.name"
+        [topbarColor]="topbarColor"
+        class="notification-height"
+      >
+      </app-notifications>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
 </ng-container>
 
 <ng-template #loading> LOADING </ng-template>
diff --git a/src/app/components/player/player.component.ts b/src/app/components/player/player.component.ts
@@ -47,7 +47,6 @@ import { AdminViewEditComponent } from '../admin-app/admin-view-search/admin-vie
 export class PlayerComponent implements OnInit, OnDestroy {
   @ViewChild('sidenav') sidenav: MatSidenav;
 
-  public loaded = false;
   public data$: Observable<any>;
 
   public openedSubject = new BehaviorSubject<boolean>(true);
@@ -88,12 +87,7 @@ export class PlayerComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.data$ = this.checkParam(['teamId']).pipe(
-      tap((paramsExist) =>
-        paramsExist ? (this.loaded = true) : (this.loaded = false)
-      ),
-      switchMap(() => this.loadData())
-    );
+    this.data$ = this.loadData();
 
     // Set the topbar color from config file.
     this.topbarColor = this.settingsService.settings.AppTopBarHexColor;
@@ -140,12 +134,6 @@ export class PlayerComponent implements OnInit, OnDestroy {
             'Not a Member',
             'You are not a member of any Teams in this View'
           );
-        } else if (!this.loaded) {
-          const params = {
-            teamId: team.id,
-          };
-          this.addParam(params);
-          this.loaded = true;
         }
 
         this.teamId = team.id;
@@ -155,14 +143,6 @@ export class PlayerComponent implements OnInit, OnDestroy {
     );
   }
 
-  addParam(params) {
-    this.queryParams = { ...this.queryParams, ...params };
-    return this.router.navigate([], {
-      queryParams: { ...this.queryParams },
-      queryParamsHandling: 'merge',
-    });
-  }
-
   /**
    * Set the primary team instance by the team Guid.  This is only valid when a user belongs to multiple
    * teams.  If a new primary team is set in the database, the page must be reloaded

diff --git a/src/app/components/shared/top-bar/topbar.component.html b/src/app/components/shared/top-bar/topbar.component.html
@@ -34,7 +34,15 @@
     </span>
     <span class="view-text">{{ title }}</span>
     <ng-container *ngIf="teams && team && teams.length > 0">
-      <div class="team-text">Team:</div>
+      <div
+        class="team-text copy-text"
+        ngxClipboard
+        [cbContent]="team.id"
+        (cbOnSuccess)="openSnackBar('Copied Team Id to clipboard')"
+        [matTooltip]="'Click to copy Team Id: ' + team.id"
+      >
+        Team:
+      </div>
       <span class="team-text">{{ team.name }}</span>
       <div *ngIf="teams.length > 1">
         <button

diff --git a/src/app/components/shared/top-bar/topbar.component.scss b/src/app/components/shared/top-bar/topbar.component.scss
@@ -16,6 +16,9 @@
   margin-right: 10px;
   font-weight: bold;
 }
+.copy-text {
+  cursor: pointer;
+}
 .view-text {
   font-size: large;
   margin-left: 50px;

diff --git a/src/app/components/shared/top-bar/topbar.component.ts b/src/app/components/shared/top-bar/topbar.component.ts
@@ -22,6 +22,8 @@ import { UserPresenceComponent } from '../../player/user-presence-page/user-pres
 import { TopbarView } from './topbar.models';
 import { Router } from '@angular/router';
 import { DialogService } from '../../../services/dialog/dialog.service';
+import { MatLegacySnackBar } from '@angular/material/legacy-snack-bar';
+
 @Component({
   selector: 'app-topbar',
   templateUrl: './topbar.component.html',
@@ -55,7 +57,8 @@ export class TopbarComponent implements OnInit, OnDestroy {
     private authQuery: ComnAuthQuery,
     private router: Router,
     private dialog: MatDialog,
-    private dialogService: DialogService
+    private dialogService: DialogService,
+    private snackbar: MatLegacySnackBar
   ) {}
 
   ngOnInit() {
@@ -127,6 +130,13 @@ export class TopbarComponent implements OnInit, OnDestroy {
       });
   }
 
+  openSnackBar(message: string) {
+    this.snackbar.open(message, '', {
+      verticalPosition: 'top',
+      duration: 2000,
+    });
+  }
+
   ngOnDestroy(): void {
     this.unsubscribe$.next(null);
     this.unsubscribe$.complete();