Merge pull request #4106 from hashicorp/feature/ui-v1-notification

Add v2 notification banner at the top of the page

ui/index.html

@@ -140,6 +140,28 @@
   </script>
 
   <script type="text/x-handlebars" data-template-name="dc">
+    {{#if isNotificationVisible}}
+      <div id="v2-notification">
+        <input type="checkbox" id="v2-notification-toggle" checked="checked" {{action "hideNotification"}} />
+        <div class="container">
+            <div class="col-md-12">
+                <div class="row">
+                    <div class="col-md-9 col-sm-8 col-xs-8 col-sm-offset-0 col-xs-offset-1">
+                        <p>
+                            We've redesigned the web interface for Consul. <span>You may opt-in to the new interface with a simple environment variable. In a future release, the new UI will become the default and this UI will be deprecated.</span>
+                        </p>
+                    </div>
+                    <div class="col-md-1 col-sm-4 col-xs-6">
+                        <a href="https://www.consul.io/intro/getting-started/ui.html#how-to-use-the-new-ui" target="_blank" rel="noopener noreferrer" class="btn btn-default col-xs-6"> Learn more</a>
+                    </div>
+                    <div class="col-md-1 col-sm-1 col-md-offset-1">
+                        <label for="v2-notification-toggle"></label>
+                    </div>
+                </div>
+            </div>
+        </div>
+      </div>
+    {{/if}}
     <div class="row">
       <div {{ bind-attr class=":col-md-12 :col-sm-12 :col-xs-12 :topbar" }}>
 

ui/javascripts/app/controllers.js

@@ -8,6 +8,7 @@ App.DcController = Ember.Controller.extend({
   needs: ["application"],
   // Whether or not the dropdown menu can be seen
   isDropdownVisible: false,
+  isNotificationVisible: true,
 
   datacenter: Ember.computed.alias('content'),
 
@@ -58,12 +59,21 @@ App.DcController = Ember.Controller.extend({
   // Boolean if the datacenter has any failing checks.
   //
   hasFailingChecks: Ember.computed.gt('totalChecksFailing', 0),
-
+  
+  init: function() {
+    if(App.get('settings.v1-notification-hidden', true)) {
+      this.set('isNotificationVisible', false);
+    }
+  },
   actions: {
     // Hide and show the dropdown menu
     toggle: function(item){
       this.toggleProperty('isDropdownVisible');
     },
+    hideNotification: function(e) {
+      App.set('settings.v1-notification-hidden', true);
+      this.set('isNotificationVisible', false);
+    },
     // Just hide the dropdown menu
     hideDrop: function(item){
       this.set('isDropdownVisible', false);

ui/styles/_v2-notification.scss

@@ -0,0 +1,94 @@
+#v2-notification {
+  color: white;
+  background-color: #7c1d48;
+}
+#v2-notification a {
+  font-size: 10px;
+  border-width: 1px;
+}
+#v2-notification input,
+#v2-notification input + * {
+  display: none;
+}
+#v2-notification input:checked + * {
+  display: block;
+}
+#v2-notification {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  margin-left: -50vw;
+}
+#v2-notification label {
+  cursor: pointer;
+}
+#v2-notification label::after {
+  content: '';
+  display: block;
+  width: 21px;
+  height: 16px;
+  background-position: 5px 0px;
+  background-repeat: no-repeat;
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M7.894 9.956l-4.125 4.125-1.031 1.031-2.101-2.101 1.03-1.031 4.126-4.125-4.086-4.086-1.051-1.05L2.718.655l1.051 1.05 4.086 4.087 4.125-4.125L13.01.637l2.102 2.1-1.031 1.032-4.125 4.125 4.086 4.086 1.05 1.05-2.062 2.063-1.05-1.05-4.086-4.087z" fill="%23FFF" fill-rule="evenodd"/></svg>');
+
+}
+#v2-notification .col-md-12 > div {
+  padding: 15px;
+}
+#v2-notification p {
+  font-size: 15px;
+  font-weight: 500;
+  margin-left: 15px;
+  margin-right: 9px;
+}
+#v2-notification a {
+  min-width: 95px;
+}
+@media (min-width: 768px) {
+  #v2-notification .row > div:nth-child(2) {
+    padding-left: 10px;
+  }
+  #v2-notification a {
+    max-width: 106px;
+  }
+  #v2-notification .col-md-12 > div::before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    top: 50%;
+    margin-top: -20px;
+    margin-left: -13px;
+    background-image: url('tada.png');
+  }
+}
+@media (max-width: 767px) {
+  #v2-notification .row > div {
+    width: 100%;
+    margin-left: 0;
+    text-align: center;
+    padding: 0;
+  }
+  #v2-notification a {
+    width: 100%;
+  }
+  #v2-notification a {
+    margin: 0 auto;
+  }
+}
+@media (max-width: 991px) {
+  #v2-notification p span {
+    display: none;
+  }
+  #v2-notification .row > div:last-child {
+    position: absolute;
+    top: 15px;
+    right: 0;
+  }
+  #v2-notification label {
+    position: absolute;
+    top: 0;
+    right: 15px;
+  }
+}

ui/styles/base.scss

@@ -7,6 +7,7 @@
 @import "lists";
 @import "forms";
 @import "notifications";
+@import "v2-notification";
 
 html, body {
   height: 100%;