Better SecretsListHeader toolbar

ui/app/components/secret-list-header.js

@@ -1,4 +1,5 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
 
 export default Component.extend({
   tagName: '',
@@ -9,4 +10,15 @@ export default Component.extend({
   baseKey: null,
   backendCrumb: null,
   model: null,
+  options: null,
+  hasItems: computed('model.meta.total', function() {
+    return this.get('model.meta.total');
+  }),
+  isConfigurable: computed('model.type', function() {
+    const configurableEngines = ['aws', 'ssh', 'pki'];
+    return configurableEngines.includes(this.get('model.type'));
+  }),
+  isConfigurableTab: computed('isCertTab', 'isConfigure', function() {
+    return this.get('isCertTab') || this.get('isConfigure');
+  }),
 });

ui/app/templates/components/secret-list-header.hbs

@@ -75,3 +75,60 @@
     </div>
   {{/if}}
 {{/with}}
+
+{{#if (or hasItems (or isConfigurable (not isConfigurableTab)))}}
+  <Toolbar>
+    {{#if hasItems}}
+      <ToolbarFilters>
+        {{navigate-input
+          enterpriseProduct="vault"
+          filterFocusDidChange=(action "setFilterFocus")
+          filterDidChange=(action "setFilter")
+          filter=filter
+          filterMatchesKey=filterMatchesKey
+          firstPartialMatch=firstPartialMatch
+          baseKey=(get baseKey "id")
+          shouldNavigateTree=options.navigateTree
+          placeholder=options.searchPlaceholder
+          mode=(if (eq tab 'certs') 'secrets-cert' 'secrets')
+          data-test-nav-input=true
+        }}
+        {{#if filterFocused}}
+          {{#if filterMatchesKey}}
+            {{#unless filterIsFolder}}
+              <p class="input-hint">
+                <kbd>Enter</kbd> to view {{filter}}
+              </p>
+            {{/unless}}
+          {{/if}}
+          {{#if firstPartialMatch}}
+            <p class="input-hint">
+              <kbd>Tab</kbd> to autocomplete
+            </p>
+          {{/if}}
+        {{/if}}
+      </ToolbarFilters>
+    {{/if}}
+
+    <ToolbarActions>
+      {{#if (and isConfigurable isConfigurableTab)}}
+        <ToolbarLink
+          @params={{array 'vault.cluster.settings.configure-secret-backend' model.id}}
+          @data-test-secret-backend-configure=true
+        >
+          Configure
+        </ToolbarLink>
+      {{else}}
+        <ToolbarSecretLink
+          @secret=''
+          @mode="create"
+          @type="add"
+          @queryParams={{query-params initialKey=(or filter baseKey.id)}}
+          @data-test-secret-create=true
+        >
+          {{options.create}}
+        </ToolbarSecretLink>
+      {{/if}}
+    </ToolbarActions>
+  </Toolbar>
+{{/if}}

ui/app/templates/vault/cluster/secrets/backend/configuration.hbs

@@ -1,17 +1,8 @@
-{{secret-list-header model=model isConfigure=true backendCrumb=(hash label=model.id text=model.id path="vault.cluster.secrets.backend.list-root" model=model.id)}}
-
-{{#if (or (eq model.type "aws") (eq model.type "ssh") (eq model.type "pki"))}}
-  <Toolbar>
-    <ToolbarActions>
-      <ToolbarLink
-        @params={{array 'vault.cluster.settings.configure-secret-backend' model.id}}
-        @data-test-secret-backend-configure=true
-      >
-        Configure
-      </ToolbarLink>
-    </ToolbarActions>
-  </Toolbar>
-{{/if}}
+<SecretListHeader
+  @model={{model}}
+  @backendCrumb={{hash label=model.id text=model.id path="vault.cluster.secrets.backend.list-root" model=model.id}}
+  @isConfigure=true
+/>
 
 <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
   {{#each model.attrs as |attr|}}

ui/app/templates/vault/cluster/secrets/backend/list.hbs

@@ -1,54 +1,13 @@
-{{secret-list-header isCertTab=(eq tab "certs") model=backendModel baseKey=baseKey backendCrumb=backendCrumb filter=filter}}
-
 {{#with (options-for-backend backendType tab) as |options|}}
-  {{#if (or model.meta.total (or (or (eq model.type "aws") (eq model.type "ssh") (eq model.type "pki")) (not (or isCertTab isConfigure))))}}
-    <Toolbar>
-      {{#if model.meta.total}}
-        <ToolbarFilters>
-          {{navigate-input
-            enterpriseProduct="vault"
-            filterFocusDidChange=(action "setFilterFocus")
-            filterDidChange=(action "setFilter")
-            filter=filter
-            filterMatchesKey=filterMatchesKey
-            firstPartialMatch=firstPartialMatch
-            baseKey=(get baseKey "id")
-            shouldNavigateTree=options.navigateTree
-            placeholder=options.searchPlaceholder
-            mode=(if (eq tab 'certs') 'secrets-cert' 'secrets')
-            data-test-nav-input=true
-          }}
-          {{#if filterFocused}}
-            {{#if filterMatchesKey}}
-              {{#unless filterIsFolder}}
-                <p class="input-hint">
-                  <kbd>Enter</kbd> to view {{filter}}
-                </p>
-              {{/unless}}
-            {{/if}}
-            {{#if firstPartialMatch}}
-              <p class="input-hint">
-                <kbd>Tab</kbd> to autocomplete
-              </p>
-            {{/if}}
-          {{/if}}
-        </ToolbarFilters>
-      {{/if}}
-      <ToolbarActions>
-        {{#unless (or isCertTab isConfigure)}}
-          <ToolbarSecretLink
-            @secret=''
-            @mode="create"
-            @type="add"
-            @queryParams={{query-params initialKey=(or filter baseKey.id)}}
-            @data-test-secret-create=true
-          >
-            {{options.create}}
-          </ToolbarSecretLink>
-        {{/unless}}
-      </ToolbarActions>
-    </Toolbar>
-  {{/if}}
+  <SecretListHeader
+    @isCertTab={{eq tab "certs"}}
+    @model={{backendModel}}
+    @baseKey={{baseKey}}
+    @backendCrumb={{backendCrumb}}
+    @filter={{filter}}
+    @options={{options}}
+  />
+
   {{#if model.meta.total}}
     {{#each model as |item|}}
       {{partial options.listItemPartial}}