Implement hiding messages component

src/app/config.ts

@@ -22,6 +22,7 @@ export const config = {
       'ide-only',
       'web-only'
     ]),
+    hide_messages: false
   },
   ide: {
     route: 'ide',

src/app/dashboard/dashboard.component.html

@@ -1,7 +1,7 @@
 <div [attr.class]="layout">
   <div class="tfw-grid-main-components">
     <div class="tfw-header"><app-header></app-header></div>
-    <div class="tfw-messages"><app-messages></app-messages></div>
+    <div [ngClass]="{ 'hide-attribute': hide_messages }" class="tfw-messages"><app-messages></app-messages></div>
     <div class="tfw-web tao-grid-top-left"
          [ngClass]="{ 'deploy-blur': deploying }">
       <div class="iframe-container">

src/app/dashboard/dashboard.component.ts

@@ -16,6 +16,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   deploymentNotificationSubscription: Subscription;
   enabledLayouts: Set<string> = config.dashboard.enabledLayouts;
   layout: string = config.dashboard.currentLayout;
+  hide_messages: boolean = config.dashboard.hide_messages;
   command_handlers = {'layout': this.layoutHandler.bind(this)};
 
   constructor(private deploymentNotificationService: DeploymentNotificationService,

src/assets/scss/mixins/_layout.scss

@@ -93,6 +93,17 @@ $layouts: (
   }
 }
 
+@mixin hide-component() {
+  // We need to make sure the DOM element is displayed but not visible
+  visibility: hidden;
+  position: absolute;
+  z-index: -10000000;
+}
+
+.hide-attribute {
+  @include hide-component();
+}
+
 @function get-layout($layouts-key){
   @return map_get($layouts, $layouts-key);
 }
@@ -103,10 +114,7 @@ $layouts: (
   @each $k, $v in $map {
     #{$sel}#{$k} {
       @if (length($v) == 0) {
-        // We need to make sure the DOM element is displayed but not visible
-        visibility: hidden;
-        position: absolute;
-        z-index: -10000000;
+        @include hide-component();
       }
       @else {
         grid-column-start: nth($v, 1);