ui: Add new Help menu with links to docs, learn and GH (#7310)

ui-v2/app/components/popover-menu.js

@@ -9,6 +9,9 @@ export default Component.extend(Slotted, {
   expanded: false,
   keyboardAccess: true,
   onchange: function() {},
+  // TODO: this needs to be made dynamic/auto detect
+  // for now use this to set left/right explicitly
+  position: '',
   init: function() {
     this._super(...arguments);
     this.guid = this.dom.guid(this);

ui-v2/app/styles/base/components/menu-panel/layout.scss

@@ -15,6 +15,9 @@
   /* or be hardcoded */
   /* min-height: 143px; */
 }
+%menu-panel [role='menuitem']::after {
+  float: right;
+}
 %menu-panel-sub-panel {
   position: absolute;
   top: 0;
@@ -28,6 +31,7 @@
 }
 %menu-panel:not(.left) {
   right: 0px;
+  left: auto;
 }
 %menu-panel.left {
   left: 0px;

ui-v2/app/styles/components/main-nav-horizontal/index.scss

@@ -18,6 +18,9 @@
 %main-nav-horizontal > ul > li.is-active > label > * {
   @extend %main-nav-horizontal-action-active;
 }
+%main-nav-horizontal label + div {
+  @extend %main-nav-horizontal-drop-nav;
+}
 %main-nav-horizontal-drop-nav {
   @extend %menu-panel;
 }

ui-v2/app/styles/components/main-nav-horizontal/skin.scss

@@ -32,7 +32,7 @@
   color: inherit;
 }
 %main-nav-horizontal-toggle,
-%main-nav-horizontal input {
+%main-nav-horizontal input[type='checkbox'] {
   display: none;
 }
 %main-nav-horizontal [type='checkbox'] + label > *::after {

ui-v2/app/styles/components/product.scss

@@ -3,6 +3,16 @@
 html body > svg {
   display: none;
 }
+%main-nav-horizontal .docs-link a::after {
+  @extend %with-learn-icon, %as-pseudo;
+}
+
+%main-nav-horizontal .learn-link a::after {
+  @extend %with-docs-icon, %as-pseudo;
+}
+%main-nav-horizontal .feedback-link a::after {
+  @extend %with-logo-github-monochrome-icon, %as-pseudo;
+}
 html.ember-loading body > svg {
   @extend %brand-loader;
 }

ui-v2/app/styles/components/product/index.scss

@@ -24,9 +24,6 @@
 %secondary-nav {
   @extend %main-nav-horizontal;
 }
-%primary-nav label + div {
-  @extend %main-nav-horizontal-drop-nav;
-}
 @media #{$--lt-horizontal-nav} {
   %primary-nav {
     margin-top: 65px;

ui-v2/app/templates/components/hashicorp-consul.hbs

@@ -16,7 +16,7 @@
     {{#if (and (eq nspaces.length 1) (not canManageNspaces)) }}
                         <span data-test-nspace-selected={{nspace.Name}}>{{nspace.Name}}</span>
     {{ else }}
-                        {{#popover-menu}}
+                        {{#popover-menu position='left'}}
                           {{#block-slot name='trigger'}}
                             {{nspace.Name}}
                           {{/block-slot}}
@@ -51,7 +51,7 @@
   {{#if (or (not dcs) (eq dcs.length 1)) }}
                         <span data-test-datacenter-selected={{dc.Name}}>{{dc.Name}}</span>
   {{ else }}
-                        {{#popover-menu}}
+                        {{#popover-menu position='left'}}
                           {{#block-slot name='trigger'}}
                             {{dc.Name}}
                           {{/block-slot}}
@@ -90,7 +90,23 @@
             <nav>
                 <ul>
                     <li data-test-main-nav-docs>
-                        <a href="{{ env 'CONSUL_DOCS_URL'}}" rel="help noopener noreferrer" target="_blank">Documentation</a>
+                      {{#popover-menu position='right'}}
+                        {{#block-slot name='trigger'}}
+                          Help
+                        {{/block-slot}}
+                        {{#block-slot name='menu'}}
+                          <li role="none" class="docs-link">
+                            <a tabindex="-1" role="menuitem" href={{env 'CONSUL_DOCS_URL'}} rel="noopener noreferrer" target="_blank">Documentation</a>
+                          </li>
+                          <li role="none" class="learn-link">
+                            <a tabindex="-1" role="menuitem" href={{env 'CONSUL_DOCS_LEARN_URL'}} rel="noopener noreferrer" target="_blank">HashiCorp Learn</a>
+                          </li>
+                          <li role="separator"></li>
+                          <li role="none" class="feedback-link">
+                            <a tabindex="-1" role="menuitem" href={{env 'CONSUL_REPO_ISSUES_URL'}} target="_blank" rel="noopener noreferrer">Provide Feedback</a>
+                          </li>
+                        {{/block-slot}}
+                      {{/popover-menu}}
                     </li>
                     <li data-test-main-nav-settings class={{if (is-href 'settings') 'is-active'}}>
                         <a href={{href-to 'settings'}}>Settings</a>

ui-v2/app/templates/components/popover-menu.hbs

@@ -7,7 +7,7 @@
       {{/yield-slot}}
     </button>
   {{/toggle-button}}
-  <div>
+  <div class={{position}}>
     <input type="checkbox" id={{concat 'popover-menu-' guid '-'}} />
     {{#each submenus as |sub|}}
       <input type="checkbox" id={{concat 'popover-menu-' guid '-' sub}} />

ui-v2/config/environment.js

@@ -71,6 +71,7 @@ module.exports = function(environment, $ = process.env) {
     CONSUL_NSPACES_ENABLED: false,
 
     CONSUL_HOME_URL: 'https://www.consul.io',
+    CONSUL_REPO_ISSUES_URL: 'https://github.com/hashicorp/consul/issues/new/choose',
     CONSUL_DOCS_URL: 'https://www.consul.io/docs',
     CONSUL_DOCS_LEARN_URL: 'https://learn.hashicorp.com/consul',
     CONSUL_DOCS_API_URL: 'https://www.consul.io/api',