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

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

<div class="namespace-picker side-padding-4" ...attributes>
  <Hds::Dropdown @enableCollisionDetection={{true}} as |D|>

    <D.ToggleButton
      @icon="org"
      {{! Displays the node of the current namespace context in the toggle }}
      {{! For example, if a user navigates to 'parent/child' the toggle just displays 'child' }}
      @text={{this.namespace.currentNamespace}}
      @isFullWidth={{true}}
      data-test-button="namespace-picker"
      {{on "click" this.toggleNamespacePicker}}
    />

    {{#if this.errorLoadingNamespaces}}

      <D.Header>
        <MessageError @errorMessage={{this.errorLoadingNamespaces}} />
      </D.Header>

    {{else}}

      <D.Header class="is-paddingless" @hasDivider={{true}}>
        <div class="has-padding-8">
          <Hds::Form::TextInput::Field
            @value={{this.searchInput}}
            @type="search"
            aria-label="Search namespaces"
            placeholder="Search"
            data-test-input="Search namespaces"
            {{on "keydown" this.onKeyDown}}
            {{on "input" this.onSearchInput}}
            {{did-insert this.focusSearchInput}}
          />
        </div>
      </D.Header>

      <D.Header class="is-paddingless">
        {{#if (and this.hasSearchInput (not this.showNoNamespacesMessage))}}
          <div class="sub-text is-marginless has-top-padding-xs left-padding-16" {{did-insert this.adjustElementWidth}}>
            {{this.searchInputHelpText}}
          </div>
        {{/if}}

        <div class="is-size-8 has-text-black has-text-weight-semibold left-padding-16 top-padding-10">
          {{this.namespaceLabel}}
          <Hds::BadgeCount @text={{or this.namespaceCount 0}} />
        </div>
      </D.Header>

      {{#if this.showNoNamespacesMessage}}
        <D.Generic class="sub-text is-marginless" {{did-insert this.adjustElementWidth}} data-test-help-text="no namespaces">
          {{this.noNamespacesMessage}}
        </D.Generic>
      {{/if}}

      <div class="is-overflow-y-auto is-max-drawer-height" {{did-insert this.setupScrollListener}}>
        {{#each this.visibleNamespaceOptions as |option|}}
          <D.Checkmark
            @selected={{eq option.path this.selectedNamespace.path}}
            {{on "click" (fn this.onChange option)}}
            data-test-button={{option.label}}
          >
            <span class="is-fullwidth is-word-break right-padding-4">{{option.label}}</span>
          </D.Checkmark>
        {{/each}}
      </div>

    {{/if}}

    <D.Footer @hasDivider={{true}} class="is-flex-center">
      <Hds::ButtonSet class="is-fullwidth">
        <Hds::Button
          @color="secondary"
          @text="Refresh list"
          @isFullWidth={{not this.canManageNamespaces}}
          @icon="reload"
          @size="small"
          {{on "click" this.refreshList}}
          data-test-button="Refresh list"
        />
        {{#if this.canManageNamespaces}}
          <Hds::Button
            @color="tertiary"
            @text="Manage"
            @icon="settings"
            @size="small"
            @route="vault.cluster.access.namespaces"
            data-test-button="Manage"
          />
        {{/if}}
      </Hds::ButtonSet>

    </D.Footer>

  </Hds::Dropdown>
</div>