consul/ui/packages/consul-ui/app/templates/dc/acls/tokens/index.hbs

<Route
  @name={{routeName}}
as |route|>
  <DataLoader
    @src={{
      uri '/${partition}/${nspace}/${dc}/tokens'
      (hash
        partition=route.params.partition
        nspace=route.params.nspace
        dc=route.params.dc
      )}}
    as |loader|>

    <BlockSlot @name="error">
    {{#if (eq loader.error.status '401')}}
      <Consul::Acl::Disabled />
    {{else}}
      <AppError
        @error={{loader.error}}
        @login={{route.model.app.login.open}}
      />
    {{/if}}
    </BlockSlot>

    <BlockSlot @name="loaded">
  {{#let

    (hash
      value=(or sortBy "CreateTime:desc")
      change=(action (mut sortBy) value="target.selected")
    )

    (hash
      kind=(hash
        value=(if kind (split kind ',') undefined)
        change=(action (mut kind) value="target.selectedItems")
      )
      searchproperty=(hash
        value=(if (not-eq searchproperty undefined)
          (split searchproperty ',')
          searchProperties
        )
        change=(action (mut searchproperty) value="target.selectedItems")
        default=searchProperties
      )
    )

    loader.data

  as |sort filters items|}}

    <AppView
      @login={{route.model.app.login.open}}
      >
      <BlockSlot @name="header">
        <h1>
          <route.Title @title="Tokens" />
        </h1>
      </BlockSlot>
      <BlockSlot @name="actions">
  {{#if (can "create tokens")}}
          <a data-test-create href="{{href-to 'dc.acls.tokens.create'}}" class="type-create">Create</a>
  {{/if}}
      </BlockSlot>
      <BlockSlot @name="toolbar">
    {{#if (gt items.length 0)}}
        <Consul::Token::SearchBar
          @search={{search}}
          @onsearch={{action (mut search) value="target.value"}}

          @sort={{sort}}

          @filter={{filters}}
        />
    {{/if}}
      </BlockSlot>
      <BlockSlot @name="content">
    {{#if (token/is-legacy items)}}
        <Notice
          @type="info"
        as |notice|>
          <notice.Header>
            <h2>Update</h2>
          </notice.Header>
          <notice.Body>
            <p data-test-notification-update>We have upgraded our ACL System to allow the creation of reusable policies that can be applied to tokens. Read more about the changes and how to upgrade legacy tokens in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.</p>
          </notice.Body>
        </Notice>
    {{/if}}
        <DataCollection
          @type="token"
          @sort={{sort.value}}
          @filters={{filters}}
          @search={{search}}
          @items={{items}}
        as |collection|>
          <collection.Collection>
            <Consul::Token::List
              @items={{collection.items}}
              @token={{route.model.user.token}}
              @onuse={{route-action 'use'}}
              @ondelete={{route-action 'delete'}}
              @onlogout={{route-action 'logout'}}
              @onclone={{route-action 'clone'}}
            />
          </collection.Collection>
          <collection.Empty>
            <EmptyState
              @login={{route.model.app.login.open}}
            >
              <BlockSlot @name="header">
                <h2>
                  {{t 'routes.dc.acls.tokens.index.empty.header'
                    items=items.length
                  }}
                </h2>
              </BlockSlot>
              <BlockSlot @name="body">
                {{t 'routes.dc.acls.tokens.index.empty.body'
                  items=items.length
                  htmlSafe=true
                }}
              </BlockSlot>
            </EmptyState>
          </collection.Empty>
        </DataCollection>
      </BlockSlot>
    </AppView>
  {{/let}}
    </BlockSlot>
  </DataLoader>
</Route>