UI - web cli layout (#5909)

* move console/ui-panel into nav-header component

* notch-specific CSS

* add layout test in the application for the console

ui/app/components/console/ui-panel.js

@@ -19,6 +19,7 @@ export default Component.extend({
   router: service(),
   controlGroup: service(),
   store: service(),
+  'data-test-component': 'console/ui-panel',
 
   classNames: 'console-ui-panel',
   classNameBindings: ['isFullscreen:fullscreen'],

ui/app/components/nav-header.js

@@ -2,8 +2,10 @@ import Component from '@ember/component';
 
 export default Component.extend({
   'data-test-navheader': true,
+  classNameBindings: 'consoleFullscreen:panel-fullscreen',
   tagName: 'header',
   navDrawerOpen: false,
+  consoleFullscreen: false,
   actions: {
     toggleNavDrawer(isOpen) {
       if (isOpen !== undefined) {

ui/app/index.html

@@ -7,7 +7,7 @@
     <meta http-equiv="expires" content="0" />
     <meta http-equiv="pragma" content="no-cache" />
     <title>Vault</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 
     {{content-for "head"}}
 

ui/app/styles/components/console-ui-panel.scss

@@ -7,7 +7,6 @@
   overflow: scroll;
   right: 0;
   top: $header-height;
-  transform: translate3d(0, -100%, -1);
   transition: min-height $speed ease-out, transform $speed ease-in;
   will-change: transform, min-height;
   -webkit-overflow-scrolling: touch;
@@ -116,25 +115,13 @@
 
 .panel-open .console-ui-panel {
   box-shadow: $box-shadow-highest;
-  transform: translate3d($drawer-width, 0, 0);
   min-height: 400px;
-
-  @include from($mobile) {
-    transform: translate3d(0, 0, 0);
-  }
 }
 
 .panel-open .console-ui-panel.fullscreen {
   bottom: 0;
-  min-height: 100%;
-}
-
-.navbar-drawer .console-ui-panel {
-  transform: translate3d($drawer-width, 0, 0);
-
-  @include from($mobile) {
-    transform: translate3d(0, 0, 0);
-  }
+  top: 0;
+  min-height: 100vh;
 }
 
 .panel-open {
@@ -148,7 +135,7 @@
   .navbar,
   .navbar-sections {
     @include from($mobile) {
-      transform: translate3d(0, -100px, 0);
+      transform: translateY(-100px);
     }
   }
 }
@@ -156,7 +143,7 @@
 header .navbar,
 header .navbar-sections {
   z-index: 200;
-  transform: translate3d(0, 0, 0);
+  transform: translateY(0);
   will-change: transform;
 }
 

ui/app/styles/components/ui-wizard.scss

@@ -10,10 +10,13 @@
   flex-grow: 1;
   transition: padding $speed;
   will-change: padding;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
+    env(safe-area-inset-left);
 }
 
 .ui-wizard-container .app-content.wizard-open {
   padding-right: 324px;
+  padding-right: calc(324px + env(safe-area-inset-right));
 
   @include until($tablet) {
     padding-right: 0;

ui/app/styles/core/navbar.scss

@@ -30,6 +30,7 @@
 }
 
 .navbar-drawer-toggle {
+  font-size: $size-6;
   color: $vault-gray;
   cursor: pointer;
   font-weight: $font-weight-semibold;

ui/app/templates/components/nav-header.hbs

@@ -4,22 +4,22 @@
   </div>
 
   {{#unless navDrawerOpen}}
-    <div class="navbar-drawer-toggle is-hidden-tablet" onclick={{action "toggleNavDrawer"}}>
+  <button class="navbar-drawer-toggle is-hidden-tablet" {{action "toggleNavDrawer"}}>
       <ICon @glyph="more-vertical" @size="16" /> Menu
-    </div>
+    </button>
   {{/unless}}
 
   <div class="navbar-drawer{{if navDrawerOpen ' is-active'}}">
     <div class="navbar-drawer-scroll">
       <div data-test-navheader-main>
-        {{yield (hash 
+        {{yield (hash
           main=(component 'nav-header/main')
           closeDrawer=(action "toggleNavDrawer" false)
           )
         }}
       </div>
       <div class="navbar-end" data-test-navheader-items>
-        {{yield (hash 
+        {{yield (hash
           items=(component 'nav-header/items')
           closeDrawer=(action "toggleNavDrawer" false)
           )
@@ -34,5 +34,6 @@
     {{/if}}
   </div>
 
-  <div class="navbar-drawer-overlay{{if navDrawerOpen ' is-active'}}" onclick={{action "toggleNavDrawer"}}></div>
+  <div class="navbar-drawer-overlay{{if navDrawerOpen ' is-active'}}" onclick={{action "toggleNavDrawer" (not navDrawerOpen)}}></div>
 </nav>
+{{console/ui-panel isFullscreen=consoleFullscreen}}

ui/app/templates/vault/cluster.hbs

@@ -1,5 +1,5 @@
 {{#if showNav}}
-  <NavHeader data-test-header-with-nav @class="{{if consoleOpen 'panel-open'}} {{if consoleFullscreen ' panel-fullscreen'}}"
+  <NavHeader data-test-header-with-nav @class="{{if consoleOpen 'panel-open'}}"
     as |Nav|>
     <Nav.home>
       <HomeLink @class="navbar-item has-text-white has-current-color-fill">
@@ -77,7 +77,6 @@
       <div class="navbar-item nav-user-button {{if auth.allowExpiration "may-expire"}}" data-test-allow-expiration="{{auth.allowExpiration}}">
         <StatusMenu @type="user" @label="User" @onLinkClick={{action Nav.closeDrawer}} />
       </div>
-      {{console/ui-panel isFullscreen=consoleFullscreen}}
     </Nav.items>
   </NavHeader>
 {{/if}}

ui/tests/acceptance/console-test.js

@@ -1,7 +1,12 @@
 import { module, test } from 'qunit';
+import { create } from 'ember-cli-page-object';
+import { later } from '@ember/runloop';
 import { setupApplicationTest } from 'ember-qunit';
 import enginesPage from 'vault/tests/pages/secrets/backends';
 import authPage from 'vault/tests/pages/auth';
+import consoleClass from 'vault/tests/pages/components/console/ui-panel';
+
+const consoleComponent = create(consoleClass);
 
 module('Acceptance | console', function(hooks) {
   setupApplicationTest(hooks);
@@ -13,13 +18,31 @@ module('Acceptance | console', function(hooks) {
   test("refresh reloads the current route's data", async function(assert) {
     await enginesPage.visit();
     let numEngines = enginesPage.rows.length;
-    await enginesPage.consoleToggle();
+    await consoleComponent.toggle();
     let now = Date.now();
     for (let num of [1, 2, 3]) {
       let inputString = `write sys/mounts/${now + num} type=kv`;
-      await enginesPage.console.runCommands(inputString);
+      await consoleComponent.runCommands(inputString);
     }
-    await enginesPage.console.runCommands('refresh');
+    await consoleComponent.runCommands('refresh');
     assert.equal(enginesPage.rows.length, numEngines + 3, 'new engines were added to the page');
   });
+
+  test('fullscreen command expands the cli panel', async function(assert) {
+    await consoleComponent.toggle();
+    await consoleComponent.runCommands('fullscreen');
+
+    // have to wrap in a later so that we can wait for the CSS transition to finish
+    await later(() => {
+      let consoleEle = document.querySelector('[data-test-component="console/ui-panel"]');
+
+      assert.equal(
+        consoleEle.offsetHeight,
+        window.innerHeight,
+        'fullscreen is the same height as the window'
+      );
+
+      assert.equal(consoleEle.offsetTop, 0, 'fullscreen is aligned to the top of window');
+    }, 300);
+  });
 });