Add classification header

.github/workflows/main.yml

@@ -1,72 +1,23 @@
-name: Build
+name: Build and Publish Image
 
 on:
   pull_request:
     branches:
       - main
   push:
-    branches: [main]
+    branches:
+      - main
   release:
-    types: ['published']
-  workflow_dispatch:
-    inputs:
-      tagName:
-        description: 'Tag of the image you want to build and push'
-        required: true
+    types: ["published"]
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Prepare
-        id: prep
-        run: |
-          DOCKER_IMAGE=cmusei/player-ui
-          VERSION=development
-          if [[ ! -z "${{ github.event.inputs.tagName }}" ]]; then
-            VERSION=${{ github.event.inputs.tagName }}
-            TAGS="${DOCKER_IMAGE}:${VERSION}"
-          elif [[ $GITHUB_REF == refs/tags/* ]]; then
-            VERSION=${GITHUB_REF#refs/tags/}
-            MAJORMINORVERSION=$(echo $VERSION | grep -oP '(\d+)\.(\d+)')
-            TAGS="${DOCKER_IMAGE}:${VERSION},${DOCKER_IMAGE}:${MAJORMINORVERSION}"
-          elif [[ $GITHUB_REF == refs/heads/* ]]; then
-            VERSION=$(echo ${GITHUB_REF#refs/heads/} | sed -r 's#/+#-#g')
-            TAGS="${DOCKER_IMAGE}:${VERSION}"
-          fi
-          if [[ "${{ github.event_name }}" == "pull_request" ]]; then
-            echo ::set-output name=push::false
-            echo "event is pull_request, not pushing image"
-          else
-            echo ::set-output name=push::true
-            echo "event is not pull_request, pushing image"
-          fi
-          echo ::set-output name=version::${VERSION}
-          echo ::set-output name=tags::${TAGS}
-          echo ::set-output name=created::$(date -u +'%Y-%m-%dT%H:%M:%SZ')
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
-
-      - name: Login to DockerHub
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v1
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_PASSWORD }}
-
-      - name: Build and push
-        uses: docker/build-push-action@v2
-        with:
-          context: .
-          file: ./Dockerfile
-          push: ${{ steps.prep.outputs.push }}
-          pull: true
-          tags: ${{ steps.prep.outputs.tags }}
-          labels: |
-            org.opencontainers.image.source=${{ github.event.repository.clone_url }}
-            org.opencontainers.image.created=${{ steps.prep.outputs.created }}
-            org.opencontainers.image.revision=${{ github.sha }}
+  build-and-publish:
+    name: Build and Publish
+    uses: cmu-sei/Crucible-Github-Actions/.github/workflows/docker-build.yaml@docker-v1
+    with:
+      imageName: cmusei/player-ui
+      versionMode: npm
+      versionFiles: package.json
+    secrets:
+      DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+      DOCKERHUB_PASSWORD: ${{ secrets.DOCKERHUB_PASSWORD }}

.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.json

@@ -1,6 +1,6 @@
 {
   "name": "player.ui",
-  "version": "3.1.1",
+  "version": "0.0.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -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",

src/app/app.component.html

@@ -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.scss

@@ -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.module.ts

@@ -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,