vault/ui/lib/sync/addon/components/secrets/page/destinations.hbs

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

<SyncHeader @title="Secrets Sync" />

<div class="tabs-container box is-bottomless is-marginless is-paddingless">
  <nav class="tabs" aria-label="destination tabs">
    <ul>
      <li><LinkTo @route="secrets.overview" data-test-tab="Overview">Overview</LinkTo></li>
      <li><LinkTo @route="secrets.destinations" data-test-tab="Destinations">Destinations</LinkTo></li>
    </ul>
  </nav>
</div>

<Toolbar>
  <ToolbarFilters>
    <SearchSelect
      @options={{this.destinationTypes}}
      @objectKeys={{array "id" "name"}}
      @passObject={{true}}
      @selectLimit={{1}}
      @disallowNewItems={{true}}
      @placeholder="Filter by type"
      @ariaLabel="Filter by type"
      @inputValue={{if this.typeFilterName (array this.typeFilterName)}}
      @onChange={{fn this.onFilterChange "type"}}
      @renderInPlace={{true}}
      class="is-marginless"
      data-test-filter="type"
    />
    <div class="has-left-margin-s">
      <FilterInput
        id="name-filter"
        aria-label="Filter by name"
        placeholder="Filter by name"
        value={{@nameFilter}}
        data-test-filter="name"
        @autofocus={{true}}
        @onInput={{fn this.onFilterChange "name"}}
      />
    </div>
  </ToolbarFilters>
  <ToolbarActions>
    <ToolbarLink @route="secrets.destinations.create" @type="add" data-test-create-destination>
      Create new destination
    </ToolbarLink>
  </ToolbarActions>
</Toolbar>

{{#if @destinations.meta.filteredTotal}}
  <div class="has-bottom-margin-s">
    {{#each @destinations as |destination index|}}
      <ListItem
        @linkPrefix={{this.mountPoint}}
        @linkParams={{array "secrets.destinations.destination.secrets" destination.type destination.name}}
        as |Item|
      >
        <Item.content>
          <div>
            <Icon @name={{destination.icon}} data-test-destination-icon={{index}} />
            <span data-test-destination-name={{index}}>
              {{destination.name}}
            </span>
          </div>
          <code class="has-text-grey is-size-8" data-test-destination-type={{index}}>
            {{destination.typeDisplayName}}
          </code>
        </Item.content>

        <Item.menu>
          <Hds::Dropdown @isInline={{true}} @listPosition="bottom-right" as |dd|>
            <dd.ToggleIcon
              @icon="more-horizontal"
              @text="Destinations popup menu"
              @hasChevron={{false}}
              data-test-popup-menu-trigger
            />
            {{#if destination.destinationPath.isLoading}}
              <dd.Generic class="has-text-center">
                <LoadingDropdownOption />
              </dd.Generic>
            {{else}}
              <dd.Interactive
                data-test-details
                @route="secrets.destinations.destination.details"
                @models={{array destination.type destination.name}}
                @disabled={{not destination.canRead}}
              >Details</dd.Interactive>
              {{#if destination.canEdit}}
                <dd.Interactive
                  data-test-edit
                  @route="secrets.destinations.destination.edit"
                  @models={{array destination.type destination.name}}
                >Edit</dd.Interactive>
              {{/if}}
              {{#if destination.canDelete}}
                <dd.Interactive
                  data-test-delete
                  @color="critical"
                  {{on "click" (fn (mut this.destinationToDelete) destination)}}
                >Delete</dd.Interactive>
              {{/if}}
            {{/if}}
          </Hds::Dropdown>
        </Item.menu>
      </ListItem>
    {{/each}}
    <Hds::Pagination::Numbered
      @currentPage={{@destinations.meta.currentPage}}
      @currentPageSize={{@destinations.meta.pageSize}}
      @route="secrets.destinations"
      @showSizeSelector={{false}}
      @totalItems={{@destinations.meta.filteredTotal}}
      @queryFunction={{this.paginationQueryParams}}
      data-test-pagination
    />
  </div>
{{else}}
  <EmptyState @title={{this.noResultsMessage}} />
{{/if}}

{{#if this.destinationToDelete}}
  <ConfirmModal
    @color="critical"
    @confirmMessage="The destination will be permanently deleted and all the secrets will be unsynced. This cannot be undone."
    @onClose={{fn (mut this.destinationToDelete) null}}
    @onConfirm={{fn this.onDelete this.destinationToDelete}}
  />
{{/if}}