Merge pull request #886 from bcgov/banner-806

Banner 806

charts/traction/templates/ui/configmap.yaml

@@ -32,4 +32,7 @@ data:
   UX_COVERIMAGE_COPYRIGHT: {{ .Values.ui.ux.coverImageCopyright | quote }}
   UX_OWNER: {{ .Values.ui.ux.owner | quote }}
   UX_SIDEBAR_TITLE: {{ .Values.ui.ux.sidebarTitle | quote }}
+  UX_INFO_BANNER_MESSAGE: {{ .Values.ui.ux.infoBanner.message | quote }}
+  UX_INFO_BANNER_MESSAGE_LEVEL: {{ .Values.ui.ux.infoBanner.messageLevel | quote }}
+  UX_INFO_BANNER_SHOW_MESSAGE: {{ .Values.ui.ux.infoBanner.showMessage | quote }}
 {{- end -}}

charts/traction/values.yaml

@@ -612,6 +612,20 @@ ui:
     ## @param ui.ux.coverImageCopyright
     coverImageCopyright: "Photo by Kristoffer Fredriksson on StockSnap"
 
+    ## Information banner settings
+    ##
+    infoBanner:
+      ## @param ui.ux.infoBanner.message
+      message: ""
+      ## @param ui.ux.infoBanner.messageLevel <info|warn|error|success>
+      messageLevel: info
+      ## @param ui.ux.infoBanner.showMessage Show the info banner <boolean>
+      showMessage: false
+      ## @param ui.ux.infoBanner.environmentName Environment name to be displayed eg. "Development"
+      environmentName: ""
+      ## @param ui.ux.infoBanner.showEnvironmentName Show the environment name <boolean>
+      showEnvironmentName: false
+
   ariesDetails:
     ## @param ui.ariesDetails.ledgerDescription Ledger description
     ledgerDescription: "bcovrin-test"

services/tenant-ui/config/custom-environment-variables.json

@@ -29,6 +29,11 @@
         "linkTitle": "UX_ABOUT_LINK_TITLE",
         "linkText": "UX_ABOUT_LINK_TEXT",
         "imageUrl": "UX_ABOUT_IMAGE_URL"
+      },
+      "infoBanner": {
+        "message": "UX_INFO_BANNER_MESSAGE",
+        "messageLevel": "UX_INFO_BANNER_MESSAGE_LEVEL",
+        "showMessage": "UX_INFO_BANNER_SHOW_MESSAGE"
       }
     },
     "ariesDetails": {

services/tenant-ui/config/default.json

@@ -31,6 +31,13 @@
         "linkTitle": "BC Digital Trust Service Agreement",
         "link": "https://github.com/bcgov/bc-vcpedia/blob/main/agents/bc-gov-agent-service.md",
         "imageUrl": "/img/bc/bc_logo.png"
+      },
+      "infoBanner": {
+        "message": "",
+        "messageLevel": "info",
+        "showMessage": false,
+        "environmentName": "",
+        "showEnvironmentName": false
       }
     },
     "ariesDetails": {

services/tenant-ui/frontend/src/assets/layout.scss

@@ -7,14 +7,16 @@ body {
 }
 
 // The app layout
-.layout-container {
+.alert-container {
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
+  flex-direction: column;
   min-height: 100vh;
+}
+.layout-container {
+  flex-grow: 1;
+  display: flex;
   width: 100%;
   .layout-sidebar {
-    align-self: stretch;
     background-color: $tenant-ui-primary-color;
     color: $tenant-ui-text-on-primary;
     min-width: 20em;
@@ -27,13 +29,11 @@ body {
 
   .layout-page {
     width: 100%;
-    min-height: 100vh;
     display: flex;
     flex-direction: column;
   }
 
   .layout-header {
-    flex: 0;
     background-color: white;
   }
 

services/tenant-ui/frontend/src/components/Login.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="traction-login grid w-screen h-screen">
+  <!--TODO: This should eventually go somewhere else-->
+  <div class="traction-login grid w-screen flex-grow-1">
     <div class="col-12 md:col-6 xl:col-4">
       <div class="px-8">
         <div class="pt-4 pb-6">

services/tenant-ui/frontend/src/components/innkeeper/InnkeeperLogin.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="traction-login grid w-screen h-screen">
+  <div class="traction-login grid w-screen h-full">
     <div class="col-12 md:col-6 xl:col-4">
       <div class="px-8">
         <div class="pt-4 pb-6">

services/tenant-ui/frontend/src/components/layout/mainCard/MainCard.vue

@@ -27,6 +27,7 @@ const { cardExpanded } = storeToRefs(useCommonStore());
   height: calc(100% - 20px);
   width: calc(100% - 20px);
   overflow: auto;
+  z-index: 3;
 
   border: 1px solid lightgray;
 }

services/tenant-ui/frontend/src/components/notifications/Alert.vue

@@ -0,0 +1,16 @@
+<template>
+  <Message
+    v-if="stringOrBooleanTruthy(config.frontend.ux.infoBanner?.showMessage)"
+    :severity="config.frontend.ux.infoBanner.messageLevel"
+    :closable="false"
+  >
+    {{ config.frontend.ux.infoBanner.message }}
+  </Message>
+</template>
+<script setup lang="ts">
+import Message from 'primevue/message';
+import { storeToRefs } from 'pinia';
+import { useConfigStore } from '@/store/configStore';
+const { config } = storeToRefs(useConfigStore());
+import { stringOrBooleanTruthy } from '@/helpers';
+</script>

services/tenant-ui/frontend/src/views/TenantUi.vue

@@ -1,13 +1,25 @@
 <template>
-  <AppLayout v-if="tenantReady" />
-  <Login v-else />
+  <div class="alert-container">
+    <Alert class="z-2" />
+    <AppLayout v-if="tenantReady" />
+    <Login v-else />
+  </div>
 </template>
 
 <script setup lang="ts">
+import Alert from '@/components/notifications/Alert.vue';
 import AppLayout from '@/components/layout/AppLayout.vue';
 import Login from '@/components/Login.vue';
 import { storeToRefs } from 'pinia';
 import { useTenantStore } from '@/store';
 
 const { tenantReady } = storeToRefs(useTenantStore());
 </script>
+
+<style scoped lang="scss">
+// This is the info banner alert that is shown on all pages
+.p-message {
+  margin: 0;
+  border-radius: 0;
+}
+</style>