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

{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0
}}

<div
  class="search-bar"
  ...attributes
>
  <form
    class="filter-bar"
  >
    <div class="search">
      {{yield (hash
        Search=(component "freetext-filter")
        Select=(component "popover-select")
      ) to="search"}}
    </div>
    <div class="filters">
      {{yield (hash
        Search=(component "freetext-filter")
        Select=(component "popover-select")
      ) to="filter"}}
    </div>
    <div class="sort">
      {{yield (hash
        Search=(component "freetext-filter")
        Select=(component "popover-select")
      ) to="sort"}}
    </div>
  </form>
{{#if this.isFiltered}}
  <div class="search-bar-status">
    <dl>
      <dt>{{string-trim
            (t "component.search-bar.header"
                default="common.ui.filtered-by"
                  item=""
            )
        }}</dt>
      <dd>
        <ul>
{{#each this.filters as |filter|}}
          {{yield (hash
            RemoveFilter=(component "search-bar/remove-filter" onclick=(action
              (get (get @filter filter.key) "change")
              (hash
                target=(hash
                  selectedItems=(join filter.selected ',')
                )
              ))
            )
            status=(hash
              key=filter.key
              value=(lowercase filter.value)
            )
          )
            to="status"
          }}
{{/each}}
          <li class="remove-all">
            <Action
              {{on "click" this.removeAllFilters}}
            >
              Remove filters
            </Action>
          </li>
        </ul>
      </dd>
    </dl>
  </div>
{{/if}}
</div>