Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added an environment alert that displays what environment is passed in (DEV, TEST, or SANDBOX) #357

Merged
merged 2 commits into from
May 22, 2024
Merged

Added an environment alert that displays what environment is passed in (DEV, TEST, or SANDBOX) #357

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5d114de
Added environment alert to the header. Header needs to be passed an e…
EPortman May 17, 2024
374c4fe
Made banner nonexistant when environment passed in is not one of thes…
EPortman May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 39 additions & 14 deletions vue/sbc-common-components/src/components/SbcHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
<template>
<div class="d-flex">
<header class="app-header" id="appHeader">
<v-container class="justify-space-between">
<a @click="goToHome()" class="brand">
<picture>
<source media="(min-width: 601px)"
srcset="../assets/img/gov_bc_logo_horiz.png">
<source media="(max-width: 600px)"
srcset="../assets/img/gov_bc_logo_vert.png">
<img class="brand__image"
src="../assets/img/gov_bc_logo_vert.png"
alt="Government of British Columbia Logo"
title="Government of British Columbia">
</picture>
<span class="brand__title">BC Registries <span class="brand__title--wrap">and Online Services</span></span>
</a>
<v-container class="justify-space-between">
<!-- Group for logo and alert -->
<div class="header-group d-flex align-center">
<!-- Brand/logo link -->
<a @click="goToHome()" class="brand d-flex align-center">
<picture>
<source media="(min-width: 601px)" srcset="../assets/img/gov_bc_logo_horiz.png">
<source media="(max-width: 600px)" srcset="../assets/img/gov_bc_logo_vert.png">
<img class="brand__image" src="../assets/img/gov_bc_logo_vert.png" alt="Government of British Columbia Logo" title="Government of British Columbia">
</picture>
<span class="brand__title">BC Registries <span class="brand__title--wrap">and Online Services</span></span>
</a>
<!-- Environment Alert -->
<v-alert v-if="environment" :color="alertColor" dense class="env-distinction">
{{environment}} Environment
</v-alert>
</div>
<div v-if="showActions" class="app-header__actions">

<!-- Product Selector -->
Expand Down Expand Up @@ -439,6 +442,7 @@ export default class SbcHeader extends Mixins(NavigationMixin) {
@Prop({ default: true }) showActions!: boolean;
@Prop({ default: true }) showLoginMenu!: boolean;
@Prop({ default: '' }) dashboardReturnUrl !: string;
@Prop({ default: '' }) environment!: string;

private readonly loginOptions = [
{
Expand All @@ -458,6 +462,21 @@ export default class SbcHeader extends Mixins(NavigationMixin) {
}
]

@Watch
get alertColor(): string {
switch (this.environment) {
case 'DEV':
return 'success';
case 'TEST':
return 'error';
case 'SANDBOX':
return 'warning';
default:
this.environment = ''
return '';
}
}

// only for internal staff who belongs to bcreg
get isStaff (): boolean {
return this.currentUser && this.currentUser.roles.includes(Role.Staff)
Expand Down Expand Up @@ -669,6 +688,12 @@ $app-header-font-color: #ffffff;
}
}

.env-distinction {
padding: 0px 10px;
font-size: 0.875rem;
margin: 0;
}

.brand {
display: flex;
align-items: center;
Expand Down
Loading