Add classification header (#700)

* Add classification header to player.ui

* Moved common header bar component outside of router outlet

* Added classification header

* layout fixes

* migrate to application builder

* fix dockerfile path

* add localNPM configuration

* update layout

* fix application bar scrolling

* fix admin roles scrollbars

* Added settings.shared.json to gitignore

* Add classification banner 2 (#699)

* Improve Player View Edit Form UX and Fix Application Settings (#689)

* Simplify application field labels in view edit

- Change application field labels to simple titles
- Application Name, Application URL, Icon Path, etc.

* Improve view edit form labels and file upload UX

- Simplify view information field labels to basic titles
- Add DEFAULT badge to default team in team list
- Add team selection validation for file uploads
- Show red warning when no teams selected for files
- Change upload button to 'Save Changes and Upload File'
- Disable upload button when no teams selected
- Allow clearing teams in UI without server errors
- Only save to server when at least one team is selected

* Fix application settings dropdowns toggling each other

- Remove [(value)]="selected" binding from all dropdowns
- Each dropdown now only uses [(ngModel)] for its specific property
- Fixes issue where changing Embeddable would affect Load in Background
- Simplify save methods to avoid change detection errors
- Fix NG0100 ExpressionChangedAfterItHasBeenCheckedError

* Improve file upload UX to match team section pattern

- Restructure upload section as expansion panel (like teams)
- Add file icon before filename in panel title
- Move 'Add New File' button to always be visible at top
- Match team selection layout to existing uploaded files
- Change label to 'Teams with Access'
- Add validation warning when no teams selected
- Position Cancel and Upload buttons at bottom

* Convert application template fields to use mat-label

- Change from placeholder to mat-label for Name, URL, Icon Path
- Consistent with other form fields across the application

* labels added (#692)

* Chore/auto version update (#694)

* chore: configure automatic version updates via reusable workflow

Migrate to the cmu-sei/Crucible-Github-Actions docker-build reusable
workflow @docker-v1 and add versionMode/versionFiles inputs to enable
automatic version bumping on release.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* migrate to cmu-sei/Crucible-Github-Actions/.github/workflows/docker-build.yaml@docker-v1.1.2

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

* Use v1 tag for docker-build action (#695)

* point to 0.6.0

* lock file

---------

Co-authored-by: Adam Welle <arwelle@cert.org>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Jarrett Booz <89405171+sei-jbooz@users.noreply.github.com>

* remove --resources-output-path=assets/fonts

---------

Co-authored-by: Robert Kemerer <rkemerer@cert.org>
Co-authored-by: Andrew Schlackman <72105194+sei-aschlackman@users.noreply.github.com>
Co-authored-by: Tim Spencer <72101647+sei-tspencer@users.noreply.github.com>
Co-authored-by: Adam Welle <arwelle@cert.org>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Jarrett Booz <89405171+sei-jbooz@users.noreply.github.com>
Co-authored-by: sei-tspencer <trspencer@sei.cmu.edu>

Author: 7 people

.gitignore

@@ -301,6 +301,8 @@ __pycache__/
 *.xsd.cs
 
 */assets/config/settings.env.json*
+*/assets/config/settings.shared.json*
 
 /dist
 /docker
+tsconfig.local-npm.json

Dockerfile

@@ -13,7 +13,7 @@ WORKDIR /ng-app
 
 COPY . .
 
-RUN npx ng build --resources-output-path=assets/fonts --configuration production
+RUN npx ng build --configuration production
 
 ### Stage 2: Setup ###
 
@@ -23,7 +23,7 @@ USER root
 RUN rm -rf /usr/share/nginx/html/*
 COPY default.conf /etc/nginx/conf.d/default.conf
 COPY nginx-basehref.sh /docker-entrypoint.d/90-basehref.sh
-COPY --from=builder /ng-app/dist /usr/share/nginx/html
+COPY --from=builder /ng-app/dist/browser /usr/share/nginx/html
 RUN chown -R nginx:nginx /usr/share/nginx/html
 USER nginx
 

angular.json

@@ -9,13 +9,14 @@
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["src/polyfills.ts"],
             "allowedCommonJsDependencies": [
               "crypto-js/core.js",
               "crypto-js/enc-base64.js",
@@ -26,7 +27,7 @@
               "src/assets",
               {
                 "glob": "auth-callback-silent.html",
-                "input": "node_modules/@cmusei/crucible-common/src/lib/comn-auth/assets/",
+                "input": "../../libraries/Crucible.Common.Ui/projects/@crucible-common/src/lib/comn-auth/assets/",
                 "output": "/"
               }
             ],
@@ -35,11 +36,11 @@
               "./node_modules/bootstrap/dist/css/bootstrap-utilities.min.css"
             ],
             "stylePreprocessorOptions": {
-              "includePaths": [
-                "src/styles"
-              ]
+              "includePaths": ["src/styles"]
             },
-            "scripts": []
+            "scripts": [],
+            "preserveSymlinks": true,
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -65,13 +66,17 @@
               ]
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true,
-              "preserveSymlinks": true
+              "sourceMap": {
+                "scripts": true,
+                "styles": true,
+                "vendor": true
+              },
+              "namedChunks": true
+            },
+            "localNPM": {
+              "tsConfig": "tsconfig.local-npm.json"
             }
           },
           "defaultConfiguration": "production"
@@ -87,6 +92,9 @@
             },
             "development": {
               "buildTarget": "player-ui:build:development"
+            },
+            "localNPM": {
+              "buildTarget": "player-ui:build:development,localNPM"
             }
           },
           "defaultConfiguration": "development"

package-lock.json

@@ -37,10 +37,10 @@
     "@angular/platform-browser": "^21.2.1",
     "@angular/platform-browser-dynamic": "^21.2.1",
     "@angular/router": "^21.2.1",
-    "@cmusei/crucible-common": "0.4.2",
-    "@material/material-color-utilities": "^0.4.0",
+    "@cmusei/crucible-common": "^0.6.0",
     "@datorama/akita": "^8.0.1",
     "@datorama/akita-ng-router-store": "^8.0.0",
+    "@material/material-color-utilities": "^0.4.0",
     "@mdi/font": "^7.4.47",
     "@microsoft/signalr": "^10.0.0",
     "@popperjs/core": "^2.11.8",

package.json

@@ -3,4 +3,10 @@
 Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 -->
 
-<router-outlet></router-outlet>
+<div class="app-layout">
+  <comn-header-bar></comn-header-bar>
+
+  <main class="main-content">
+    <router-outlet></router-outlet>
+  </main>
+</div>

src/app/app.component.html

@@ -1,32 +1,46 @@
 // Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
+.app-layout {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.main-content {
+  overflow: auto;
+}
+
 @font-face {
   font-family: 'open_sansregular';
   /*
    Note about src: url() and BaseHref:
    When using BaseHref SCSS and angular pre-processors do not like relative paths
-   We can escape the angular pre-processors by adding `^` to the start of the URL
-  
+   We can escape the angular pre-processors by adding `../` to the start of the URL
+
   */
-  src: url('^assets/fonts/opensans-regular.woff2') format('woff2'),
-    url('^assets/fonts/opensans-regular.woff') format('woff');
+  src:
+    url('../assets/fonts/opensans-regular.woff2') format('woff2'),
+    url('../assets/fonts/opensans-regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'open_sansbold';
-  src: url('^assets/fonts/opensans-bold.woff2') format('woff2'),
-    url('^assets/fonts/opensans-bold.woff') format('woff');
+  src:
+    url('../assets/fonts/opensans-bold.woff2') format('woff2'),
+    url('../assets/fonts/opensans-bold.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'open_sansitalic';
-  src: url('^assets/fonts/opensans-italic.woff2') format('woff2'),
-    url('^assets/fonts/opensans-italic.woff') format('woff');
+  src:
+    url('../assets/fonts/opensans-italic.woff2') format('woff2'),
+    url('../assets/fonts/opensans-italic.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }

src/app/app.component.scss

@@ -48,6 +48,7 @@ import {
   ComnAuthModule,
   ComnSettingsModule,
   ComnSettingsService,
+  ComnHeaderBarModule,
 } from '@cmusei/crucible-common';
 import { AkitaNgRouterStoreModule } from '@datorama/akita-ng-router-store';
 import { AkitaNgDevtools } from '@datorama/akita-ngdevtools';
@@ -220,6 +221,7 @@ export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
         AkitaNgRouterStoreModule,
         ComnSettingsModule.forRoot(),
         ComnAuthModule.forRoot(),
+        ComnHeaderBarModule,
         TableVirtualScrollModule,
         ResizableModule], providers: [
         AppService,

src/app/app.module.ts

@@ -1,6 +1,5 @@
 // Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
-
 .appitems-container .mat-list-item {
   height: auto;
 }
@@ -15,12 +14,15 @@
   cursor: pointer;
 }
 
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .appcontent-container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  flex: 1;
+  overflow: hidden;
 }
 
 .appbarmenu-container {

src/app/components/admin-app/admin-app.component.scss

@@ -1,7 +1,7 @@
 // Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, ElementRef, AfterViewInit, Renderer2 } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import { Router } from '@angular/router';
 import {
@@ -25,6 +25,7 @@ import { SystemPermission } from '../../generated/player-api';
 })
 export class AdminAppComponent implements OnInit, OnDestroy {
   @ViewChild('sidenav') sidenav: MatSidenav;
+
   public TopbarView = TopbarView;
   public queryParams: any;
   Section = Section;
@@ -96,7 +97,7 @@ export class AdminAppComponent implements OnInit, OnDestroy {
     private routerQuery: RouterQuery,
     private authQuery: ComnAuthQuery,
     public loggedInUserService: LoggedInUserService,
-    public permissionsService: UserPermissionsService
+    public permissionsService: UserPermissionsService,
   ) {
     this.theme$ = this.authQuery.userTheme$;
   }