ui: Search/filtering 'Filtered by:' search status

.changelog/9442.txt

@@ -0,0 +1,4 @@
+```release-note:feature
+ui: Add additional search/filter status pills for viewing and removing current
+filters in listing views
+```

ui/packages/consul-ui/.template-lintrc.js

@@ -31,6 +31,8 @@ module.exports = {
 
     'no-unnecessary-component-helper': false,
     'link-href-attributes': false,
+    // we need to be able to say tabindex={{@tabindex}}
+    'no-positive-tabindex': false,
 
     'no-bare-strings': false,
   },

ui/packages/consul-ui/app/components/action/index.hbs

@@ -19,9 +19,9 @@
   {{~/if~}}
 {{~else~}}
   <button
-    tabindex="-1"
     type="button"
     {{on 'click' (optional @onclick)}}
+    tabindex={{@tabindex}}
     ...attributes
   >{{yield}}</button>
 {{~/if}}

ui/packages/consul-ui/app/components/confirmation-alert/index.hbs

@@ -14,6 +14,7 @@
       <YieldSlot @name="confirm" @params={{
           block-params (component 'action'
             onclick=(action @onclick)
+            tabindex="-1"
           )
         }}
       >

ui/packages/consul-ui/app/components/consul/acl/search-bar/index.hbs

@@ -1,59 +1,127 @@
-<form
-  class="consul-acl-search-bar filter-bar"
+<SearchBar
+  class="consul-acl-search-bar"
   ...attributes
+  @filter={{@filter}}
 >
-  <div class="search">
-    <FreetextFilter
-      @onsearch={{action @onsearch}}
-      @value={{@search}}
-      @placeholder="Search"
-    />
-  </div>
-  <div class="filters">
-    <PopoverSelect
-      @position="left"
-      @onchange={{action @onfilter.kind}}
-      @multiple={{true}}
-    as |components|>
-      <BlockSlot @name="selected">
-        <span>
-          Type
-        </span>
-      </BlockSlot>
-      <BlockSlot @name="options">
-{{#let components.Optgroup components.Option as |Optgroup Option|}}
-        <Option @value="management" @selected={{contains 'management' @filter.kinds}}>Management</Option>
-        <Option @value="client" @selected={{contains 'service' @filter.kinds}}>Client</Option>
+    <:status as |search|>
+
+{{#let
+
+  (t (concat "components.consul.acl.search-bar." search.status.key)
+      default=(array
+        (concat "common.search." search.status.key)
+        (concat "common.consul." search.status.key)
+      )
+  )
+
+  (t (concat "components.consul.acl.search-bar." search.status.value)
+      default=(array
+        (concat "common.search." search.status.value)
+        (concat "common.consul." search.status.value)
+        (concat "common.brand." search.status.value)
+      )
+  )
+
+as |key value|}}
+      <search.RemoveFilter
+        aria-label={{t "common.ui.remove" item=(concat key " " value)}}
+      >
+        <dl>
+          <dt>{{key}}</dt>
+          <dd>{{value}}</dd>
+        </dl>
+      </search.RemoveFilter>
 {{/let}}
-      </BlockSlot>
-    </PopoverSelect>
-  </div>
-  <div class="sort">
-    <PopoverSelect
-      class="type-sort"
-      data-test-sort-control
-      @position="right"
-      @onchange={{action @onsort}}
-      @multiple={{false}}
-    as |components|>
-      <BlockSlot @name="selected">
-        <span>
-          {{#let (from-entries (array
-                (array "Name:asc" "A to Z")
-                (array "Name:desc" "Z to A")
-              ))
-            as |selectable|
-          }}
-            {{get selectable @sort}}
-          {{/let}}
-        </span>
-      </BlockSlot>
-      <BlockSlot @name="options">
-{{#let components.Optgroup components.Option as |Optgroup Option|}}
-        <Option @value="Name:asc" @selected={{eq "Name:asc" @sort}}>A to Z</Option>
-        <Option @value="Name:desc" @selected={{eq "Name:desc" @sort}}>Z to A</Option>
-{{/let}}
-      </BlockSlot>
-    </PopoverSelect>
-  </div>
-</form>
+
+    </:status>
+    <:search as |search|>
+      <search.Search
+        @onsearch={{action @onsearch}}
+        @value={{@search}}
+        @placeholder={{t "common.search.search"}}
+      >
+{{#if @filter.searchproperty}}
+        <search.Select
+          class="type-search-properties"
+          @position="right"
+          @onchange={{action @filter.searchproperty.change}}
+          @multiple={{true}}
+          @required={{true}}
+        as |components|>
+          <BlockSlot @name="selected">
+            <span>
+              {{t "common.search.searchproperty"}}
+            </span>
+          </BlockSlot>
+          <BlockSlot @name="options">
+    {{#let components.Optgroup components.Option as |Optgroup Option|}}
+            {{#each @filter.searchproperty.default as |prop|}}
+              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+                {{t (concat "common.consul." (lowercase prop))}}
+              </Option>
+            {{/each}}
+    {{/let}}
+          </BlockSlot>
+        </search.Select>
+  {{/if}}
+      </search.Search>
+    </:search>
+    <:filter as |search|>
+      <search.Select
+        class="type-status"
+        @position="left"
+        @onchange={{action @filter.kind.change}}
+        @multiple={{true}}
+      as |components|>
+        <BlockSlot @name="selected">
+          <span>
+            {{t "components.consul.acl.search-bar.kind.name"}}
+          </span>
+        </BlockSlot>
+        <BlockSlot @name="options">
+  {{#let components.Optgroup components.Option as |Optgroup Option|}}
+    {{#each (array "management" "client") as |state|}}
+          <Option class="value-{{state}}" @value={{state}} @selected={{contains state @filter.status.value}}>
+            {{t (concat "components.acl.search-bar.kind.options." state)
+                default=(array
+                  (concat "common.search." state)
+                )
+            }}
+          </Option>
+    {{/each}}
+  {{/let}}
+        </BlockSlot>
+      </search.Select>
+    </:filter>
+    <:sort as |search|>
+      <search.Select
+        class="type-sort"
+        data-test-sort-control
+        @position="right"
+        @onchange={{action @sort.change}}
+        @multiple={{false}}
+        @required={{true}}
+      as |components|>
+        <BlockSlot @name="selected">
+          <span>
+            {{#let (from-entries (array
+                  (array "Name:asc" (t "common.sort.alpha.asc"))
+                  (array "Name:desc" (t "common.sort.alpha.desc"))
+                ))
+              as |selectable|
+            }}
+              {{get selectable @sort.value}}
+            {{/let}}
+          </span>
+        </BlockSlot>
+        <BlockSlot @name="options">
+  {{#let components.Optgroup components.Option as |Optgroup Option|}}
+          <Optgroup @label={{t "common.consul.name"}}>
+            <Option @value="Name:asc" @selected={{eq "Name:asc" @sort.value}}>{{t "common.sort.alpha.asc"}}</Option>
+            <Option @value="Name:desc" @selected={{eq "Name:desc" @sort.value}}>{{t "common.sort.alpha.desc"}}</Option>
+          </Optgroup>
+  {{/let}}
+        </BlockSlot>
+      </search.Select>
+    </:sort>
+</SearchBar>