Improvement: give option to refresh namespace dropdown (#8442)

* move manage and add refresh action

* move title of current namespace

* finish menu redesign

* conditionally hide or show manage namespaces

* fix quotes

ui/app/components/namespace-picker.js

@@ -17,7 +17,7 @@ export default Component.extend({
   store: service(),
   namespace: null,
   listCapability: null,
-  canList: alias('listCapability.canList'),
+  canList: false,
 
   init() {
     this._super(...arguments);
@@ -38,14 +38,13 @@ export default Component.extend({
 
   fetchListCapability: task(function*() {
     try {
-      if (this.listCapability) {
-        yield this.listCapability.reload();
-        return;
-      }
       let capability = yield this.store.findRecord('capabilities', 'sys/namespaces/');
       this.set('listCapability', capability);
+      this.set('canList', true);
     } catch (e) {
-      //do nothing here
+      // If error out on findRecord call it's because you don't have permissions
+      // and therefor don't have permission to manage namespaces
+      this.set('canList', false);
     }
   }),
   setForAnimation: task(function*() {
@@ -157,4 +156,10 @@ export default Component.extend({
     let parts = namespace.split('/');
     return parts[parts.length - 1];
   }),
+
+  actions: {
+    refreshNamespaceList() {
+      this.get('namespaceService.findNamespacesForUser').perform();
+    },
+  },
 });

ui/app/styles/components/namespace-picker.scss

@@ -82,17 +82,14 @@
 }
 
 .namespace-header-bar {
-  padding: $size-11 $size-10;
-  box-shadow: $box-shadow;
+  padding: $size-11 $size-9;
+  border-bottom: 1px solid rgba($black, 0.1);
   font-weight: $font-weight-semibold;
   min-height: 32px;
-  .namespace-manage-link {
-    text-decoration: none;
-  }
 }
 
-.current-namespace {
-  border-bottom: 1px solid rgba($black, 0.1);
+.namespace-manage-link {
+  border-top: 1px solid rgba($black, 0.1);
 }
 
 .namespace-list {
@@ -104,10 +101,16 @@
   color: $black;
   text-decoration: none;
   font-weight: $font-weight-semibold;
-  padding: $size-10 $size-9;
+  padding: $size-10 $size-9 $size-10 0;
+}
+
+.namespace-link.is-current {
+  margin-top: $size-8;
+  margin-right: -$size-10;
 }
 
 .leaf-panel {
+  padding: $size-11 $size-9;
   transition: transform ease-in-out 250ms;
   will-change: transform;
   transform: translateX(0);

ui/app/templates/components/namespace-picker.hbs

@@ -23,35 +23,41 @@
         />
       </D.trigger>
       <D.content @class="namespace-picker-content">
+        <div class="is-mobile level-left">
+          {{#if (not isUserRootNamespace)}}
+            <NamespaceLink @targetNamespace={{or (object-at (dec 2 menuLeaves.length) lastMenuLeaves) auth.authData.userRootNamespace}} @class="namespace-link is-current button is-ghost icon">
+              <Chevron
+                @direction="left"
+                @class="has-text-grey"
+              />
+            </NamespaceLink>
+          {{/if}}
+          <h5 class="list-header">Current namespace</h5>
+        </div>
         <div class="namespace-header-bar level is-mobile">
           <div class="level-left">
-            {{#if (not isUserRootNamespace)}}
-              <NamespaceLink @targetNamespace={{or (object-at (dec 2 menuLeaves.length) lastMenuLeaves) auth.authData.userRootNamespace}} @class="namespace-link button is-ghost icon">
-                <Chevron
-                  @direction="left"
-                  @class="has-text-info"
-                />
-              </NamespaceLink>
-            {{/if}}
-          </div>
-          <div class="level-right">
-            {{#if canList}}
-              {{#link-to "vault.cluster.access.namespaces" class="namespace-manage-link"}}
-                Manage
-              {{/link-to}}
-            {{/if}}
+            <header >
+              <div class="level is-mobile namespace-link">
+                <span class="level-left" data-test-current-namespace>{{if namespacePath (concat namespacePath "/") "root"}}</span>
+                <span class="level-right">
+                  <Icon @glyph="check-circle-outline" class="has-text-success" />
+                </span>
+              </div>
+            </header>
           </div>
         </div>
-        <header class="current-namespace">
-          <h5 class="list-header">Current namespace</h5>
-          <div class="level is-mobile namespace-link">
-            <span class="level-left" data-test-current-namespace>{{if namespacePath (concat namespacePath "/") "root"}}</span>
-            <span class="level-right">
-              <Icon @glyph="check-circle-outline" class="has-text-success" />
-            </span>
-          </div>
-        </header>
         <div class="namespace-list {{if isAnimating "animated-list"}}">
+          <div class="is-mobile level-left">
+          {{#if (not isUserRootNamespace)}}
+            <NamespaceLink @targetNamespace={{or (object-at (dec 2 menuLeaves.length) lastMenuLeaves) auth.authData.userRootNamespace}} @class="namespace-link is-current button is-ghost icon">
+              <Chevron
+                @direction="left"
+                @class="has-text-grey"
+              />
+            </NamespaceLink>
+          {{/if}}
+          <h5 class="list-header">Namespaces</h5>
+        </div>
           {{#if (contains '' lastMenuLeaves)}}
             {{!-- leaf is '' which is the root namespace, and then we need to iterate the root leaves --}}
             <div class="leaf-panel
@@ -69,6 +75,23 @@
               <NamespaceLink @targetNamespace={{concat leaf "/" leafName}} @class="namespace-link" @showLastSegment={{true}} />
                 {{/each-in~}}</div>
           {{/each}}
+          {{#if canList}}
+            <div class="leaf-panel leaf-panel-current ">
+              <LinkTo
+                @params={{array "vault.cluster.access.namespaces"}}
+                class="is-block namespace-link namespace-manage-link"
+                >
+                  <div class="level is-mobile">
+                    <span class="level-left">Manage namespaces</span>
+                    <span class="level-right">
+                      <button type="button" class="button is-ghost icon" onclick={{action "refreshNamespaceList"}}>
+                        <Icon @glyph="refresh-default" class="has-text-grey" />
+                      </button>
+                    </span>
+                  </div>
+                </LinkTo>
+              </div>
+          {{/if}}
         </div>
       </D.content>
     </BasicDropdown>