Preview Warning Banner Enhancements

src/app/home-page/dashboard/dashboard.component.html

@@ -5,7 +5,7 @@
     <app-header>My Dockstore: Dashboard</app-header>
     <app-news-notifications class="w-100"></app-news-notifications>
     <div fxLayout="column" fxLayoutAlign="start start" fxLayoutGap="2.5rem" class="p-4">
-      <app-preview-warning *ngIf="Dockstore.FEATURES.enableNotebooks" class="w-100"></app-preview-warning>
+      <app-preview-warning *ngIf="Dockstore.FEATURES.enableNotebooks" featureName="Notebooks" class="w-100"></app-preview-warning>
       <div fxFlex fxLayout fxLayout.lt-md="column" fxLayoutGap="2.5rem" class="w-100">
         <app-entry-box fxFlex="33" fxFlex.lt-md="100" class="entry-holder" entryType="WORKFLOW"></app-entry-box>
         <app-entry-box fxFlex="33" fxFlex.lt-md="100" class="entry-holder" entryType="TOOL"></app-entry-box>

src/app/navbar/navbar.component.html

@@ -133,7 +133,7 @@
   <mat-button
     [ngClass]="{ 'navbar-button-active': t.menuOpen === true }"
     data-cy="dropdown-main"
-    class="navbar-button"
+    class="navbar-button pointer"
     *ngIf="isLoggedIn"
     id="dropdown-main"
     #t="matMenuTrigger"

src/app/preview-warning/preview-warning.component.html

@@ -1,5 +1,5 @@
-<mat-card class="alert-info mat-elevation-z w-100" data-cy="preview-warning">
-  <mat-icon>warning</mat-icon>
-  <strong> Notice:</strong> This is an early access feature. Consider this a prototype that may be more likely to have breaking changes
-  going forward than other Dockstore features.
+<mat-card class="alert-warning mat-elevation-z w-100" data-cy="preview-warning">
+  <mat-icon class="alert-warning-icon">warning</mat-icon>
+  <strong> Notice:</strong> {{ featureName }} is an early access feature. Consider this a prototype that may be more likely to have breaking
+  changes going forward than other Dockstore features.
 </mat-card>

src/app/preview-warning/preview-warning.component.ts

@@ -1,7 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-preview-warning',
   templateUrl: './preview-warning.component.html',
 })
-export class PreviewWarningComponent {}
+export class PreviewWarningComponent {
+  @Input() featureName: string;
+}

src/app/search/search.component.html

@@ -322,7 +322,10 @@
             {{ query_size - 1 }} results are shown. We recommend that you narrow your search to find more relevant results.
           </p>
         </mat-card>
-        <app-preview-warning *ngIf="Dockstore.FEATURES.enableNotebooks && (selectedIndex$ | async) === 2"></app-preview-warning>
+        <app-preview-warning
+          *ngIf="Dockstore.FEATURES.enableNotebooks && (selectedIndex$ | async) === 2"
+          featureName="Notebooks"
+        ></app-preview-warning>
         <app-search-results></app-search-results>
       </div>
     </div>

src/app/sitemap/sitemap.component.html

@@ -8,7 +8,7 @@ <h3 class="available-containers">Sitemap</h3>
   </div>
 </div>
 <div class="container">
-  <div *ngIf="Dockstore.FEATURES.enableNotebooks" class="mt-5"><app-preview-warning></app-preview-warning></div>
+  <div *ngIf="Dockstore.FEATURES.enableNotebooks" class="mt-5"><app-preview-warning featureName="Notebooks"></app-preview-warning></div>
   <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="space-between start" class="mt-5">
     <div>
       <h3 class="documentation">Tools and Workflows</h3>

src/app/starredentries/starredentries.component.html

@@ -85,7 +85,7 @@
         </mat-tab>
 
         <mat-tab *ngIf="Dockstore.FEATURES.enableNotebooks">
-          <div class="mb-4"><app-preview-warning></app-preview-warning></div>
+          <div class="starred-header mb-4"><app-preview-warning featureName="Notebooks"></app-preview-warning></div>
           <ng-template mat-tab-label>
             <div fxLayoutGap="0.5rem">
               <img class="site-icons-tab" src="../../../assets/svg/sub-nav/notebook.svg" alt="notebook logo" />

src/app/workflows/workflows.component.html

@@ -42,6 +42,8 @@
   </ng-template>
 </app-header>
 <div class="container">
-  <div *ngIf="(entryType$ | async) === EntryType.Notebook" class="mt-4"><app-preview-warning></app-preview-warning></div>
+  <div *ngIf="(entryType$ | async) === EntryType.Notebook" class="mt-4">
+    <app-preview-warning featureName="Notebooks"></app-preview-warning>
+  </div>
   <router-outlet></router-outlet>
 </div>