Global tech preview indicator for service catalog

app/scripts/app.js

@@ -495,6 +495,15 @@ angular
  // content (e.g. using :before pseudo-elements).
  $('body').addClass('ios');
  }
+ })
+ .run(function($rootScope){
+ // if the service catalog landing page is enabled,
+ // set global variable for use in views
+ // and add class to body
+ if (_.get(window, 'OPENSHIFT_CONSTANTS.ENABLE_TECH_PREVIEW_FEATURE.service_catalog_landing_page')) {
+ $rootScope.globalTechPreviewIndicator = true;
+ $('body').addClass('tech-preview');
+ }
  });
 
 hawtioPluginLoader.addModule('openshiftConsole');

app/styles/_catalog.less

@@ -45,7 +45,11 @@
 }
 
 @media(min-width: @screen-sm-min) {
- .catalog-search, .landing-side-bar {
+ .catalog-search,
+ .landing-side-bar {
  top: @navbar-os-header-height-desktop + 1; // add 1 for the bottom border
+ .tech-preview & {
+ top: @navbar-os-header-height-desktop + 1 + @tech-preview-banner-height; // add 1 for the bottom border
+ }
  }
 }

app/styles/_log.less

@@ -123,6 +123,9 @@
  @media (min-width: @screen-sm-min) {
  right: @log-scroll-top-offset-right-sm;
  top: (@log-scroll-offset-top + @navbar-os-header-height-desktop);
+ .tech-preview & {
+ top: (@log-scroll-offset-top + @navbar-os-header-height-desktop + @tech-preview-banner-height);
+ }
  }
  @media (min-width: @screen-md-min) {
  right: @log-scroll-top-offset-right-lg;

app/styles/_navbar-alt.less

@@ -27,6 +27,9 @@
  top: 0;
  z-index: @zindex-navbar-fixed;
  }
+ .layout-pf-alt-fixed .tech-preview & {
+ top: @tech-preview-banner-height;
+ }
  .navbar-toggle {
  float: none;
  margin: 0;
@@ -350,3 +353,17 @@
  }
  }
 }
+
+
+.tech-preview-banner {
+ background: @brand-warning;
+ color: @color-pf-white;
+ font-size: 12px;
+ text-align: center;
+ text-transform: uppercase;
+ width: 100%;
+ z-index: @zindex-navbar-fixed;
+ @media (min-width: @screen-sm-min) {
+ position: fixed;
+ }
+}

app/styles/_substructure.less

@@ -11,10 +11,14 @@ html,body {
 }
 .console-os {
  background-color: @body-bg;
+ &.tech-preview .top-header {
+ height: @navbar-os-header-height-mobile + @tech-preview-banner-height;
+ }
  .top-header {
  display: flex;
- position:relative;
+ position: relative;
  height: @navbar-os-header-height-mobile;
+
  }
  .wrap {
  display: flex;
@@ -106,11 +110,20 @@ html,body {
  /* width: inherit; used if parent is using width: can't use 100% or auto */
  }
  .console-os {
+ &.tech-preview {
+ .top-header {
+ height: @navbar-os-header-height-desktop + @tech-preview-banner-height;
+ }
+ .wrap {
+ margin-top: -(@navbar-os-header-height-desktop + @tech-preview-banner-height); /* top offset height */
+ padding-top: @navbar-os-header-height-desktop + @tech-preview-banner-height; /* top offset height */
+ }
+ }
  .wrap {
  flex-direction: row;
- margin-top:-@navbar-os-header-height-desktop; /* top offset height */
- overflow:hidden;
- padding-top:@navbar-os-header-height-desktop; /* top offset height */
+ margin-top: -@navbar-os-header-height-desktop; /* top offset height */
+ overflow: hidden;
+ padding-top: @navbar-os-header-height-desktop; /* top offset height */
  &.no-sidebar {
  .sidebar-left {
  display: none !important;

app/styles/_variables.less

@@ -105,6 +105,7 @@
 @scrollbar-width: 15px;
 @status-bg-color: #E6ECF1;
 @status-border-color: #BFCEDB;
+@tech-preview-banner-height: 20px;
 @tileHeadingIconFontSize: 33px;
 @tooltip-bg: #111;
 

app/views/directives/header/_tech-preview-banner.html

@@ -0,0 +1 @@
+Technology preview is enabled

app/views/directives/header/default-header.html

@@ -1,3 +1,4 @@
+<ng-include ng-if="globalTechPreviewIndicator" src="'views/directives/header/_tech-preview-banner.html'" class="tech-preview-banner"></ng-include>
 <nav class="navbar navbar-pf-alt" role="navigation">
  <div row>
  <div class="navbar-header">

app/views/directives/header/project-header.html

@@ -1,3 +1,4 @@
+<ng-include ng-if="globalTechPreviewIndicator" src="'views/directives/header/_tech-preview-banner.html'" class="tech-preview-banner"></ng-include>
 <nav class="navbar navbar-pf-alt" role="navigation">
  <div class="navbar-header hidden-xs">
  <a class="navbar-home" href="./"><span class="fa-fw pficon pficon-home" aria-hidden="true"></span>

dist/scripts/scripts.js

@@ -1166,6 +1166,8 @@ return h ? b(e, null) || d :a(e, null, f, g) || d;
 }, 1e3);
 } ]).run([ "IS_IOS", function(a) {
 a && $("body").addClass("ios");
+} ]).run([ "$rootScope", function(a) {
+_.get(window, "OPENSHIFT_CONSTANTS.ENABLE_TECH_PREVIEW_FEATURE.service_catalog_landing_page") && (a.globalTechPreviewIndicator = !0, $("body").addClass("tech-preview"));
 } ]), hawtioPluginLoader.addModule("openshiftConsole"), angular.module("openshiftConsole").factory("APIDiscovery", [ "LOGGING_URL", "METRICS_URL", "$q", function(a, b, c) {
 return {
 getLoggingURL:function() {

dist/scripts/templates.js

@@ -7021,7 +7021,13 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
  );
 
 
+ $templateCache.put('views/directives/header/_tech-preview-banner.html',
+ "Technology preview is enabled"
+ );
+
+
  $templateCache.put('views/directives/header/default-header.html',
+ "<ng-include ng-if=\"globalTechPreviewIndicator\" src=\"'views/directives/header/_tech-preview-banner.html'\" class=\"tech-preview-banner\"></ng-include>\n" +
  "<nav class=\"navbar navbar-pf-alt\" role=\"navigation\">\n" +
  "<div row>\n" +
  "<div class=\"navbar-header\">\n" +
@@ -7048,6 +7054,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
 
  $templateCache.put('views/directives/header/project-header.html',
+ "<ng-include ng-if=\"globalTechPreviewIndicator\" src=\"'views/directives/header/_tech-preview-banner.html'\" class=\"tech-preview-banner\"></ng-include>\n" +
  "<nav class=\"navbar navbar-pf-alt\" role=\"navigation\">\n" +
  "<div class=\"navbar-header hidden-xs\">\n" +
  "<a class=\"navbar-home\" href=\"./\"><span class=\"fa-fw pficon pficon-home\" aria-hidden=\"true\"></span>\n" +