open-vault/ui/app/templates/partials/transit-form-show.hbs

<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
  <nav class="tabs">
    <ul>
      <li class="{{if (eq tab 'actions') 'is-active'}}">
        {{#secret-link
          secret=key.id
          mode="show"
          replace=true
          queryParams=(query-params tab='actions')
          data-test-transit-key-actions-link=true
          }}
          Key Actions
        {{/secret-link}}
      </li>

      <li class="{{if (eq tab 'details') 'is-active'}}">
        {{#secret-link
          secret=key.id
          mode="show"
          replace=true
          queryParams=(query-params tab='details')
          data-test-transit-link="details"
          }}
          Details
        {{/secret-link}}
      </li>

      <li class="{{if (eq tab 'versions') 'is-active'}}">
        {{#secret-link
          secret=key.id
          mode="show"
          replace=true
          queryParams=(query-params tab='versions')
          data-test-transit-link="versions"
          }}
          Versions
        {{/secret-link}}
      </li>
    </ul>
  </nav>
</div>

{{#unless (eq tab 'actions')}}
  <Toolbar>
    <ToolbarActions>
      {{#if (eq tab 'versions')}}
        <TransitKeyActions
          @key={{key}}
          @selectedAction="rotate"
          @capabilities={{capabilities}}
          @onRefresh={{action "refresh"}}
        />
      {{/if}}
      {{#if (eq mode "show") }}
        {{#if (or capabilities.canUpdate capabilities.canDelete)}}
          <ToolbarSecretLink
            @secret={{key.id}}
            @mode="edit"
            replace=true
          >
            Edit encryption key
          </ToolbarSecretLink>
        {{/if}}
      {{/if}}
    </ToolbarActions>
  </Toolbar>
{{/unless}}


{{#if (eq tab 'actions')}}
  <div class="transit-card-container">
    {{#each model.supportedActions as |supportedAction|}}
      {{#linked-block
        "vault.cluster.secrets.backend.actions"
        model.id
        queryParams=(hash action=supportedAction.name)
        class="transit-card"
        data-test-transit-card=supportedAction.name
      }}
        <div class="transit-icon">
          <Icon
            @glyph={{supportedAction.glyph}}
            @size="l"
            class="has-text-grey auto-width"
            aria-label={{concat backend.path " options"}} />
        </div>
        <div class="transit-description">
          <h2 class="title is-6" data-test-transit-action-title={{supportedAction.name}}>
            {{#if (eq supportedAction.name 'export')}}
              Export Key
            {{else if (eq supportedAction.name 'hmac')}}
              HMAC
            {{else}}
              {{humanize supportedAction.name}}
            {{/if}}
          </h2>
          <p class="transit-action-description">{{supportedAction.description}}</p>
        </div>
      {{/linked-block}}
    {{/each}}
  </div>
{{else if (eq tab 'versions')}}
  {{#if (or
      (eq key.type "aes256-gcm96")
      (eq key.type "chacha20-poly1305")
      (eq key.type "aes128-gcm96")
    )
  }}
    {{#each-in key.keys as |version creationTimestamp|}}
      <div class="linked-block list-item-row no-destination" data-test-transit-key-version-row={{version}}>
        <div class="columns is-mobile">
          <div class="column is-3">
            <div class="level level-left">
              <Icon @glyph="history" class="has-text-grey-light is-padded" @size="l" />
              <strong class="has-padding is-size-5">Version {{version}}</strong>
            </div>
          </div>
          <div class="column is-4">
            <div class="td is-borderless">
              <small class="help has-text-grey">
                {{date-from-now creationTimestamp addSuffix=true }}
              </small>
            </div>
          </div>
          <div class="column is-5">
            <div class="td is-borderless">
              {{#if (coerce-eq key.minDecryptionVersion version)}}
                <p class="help level level-left">
                  <Icon @glyph="check-circle-fill" class="has-text-success" />
                  Current minimum decryption version
                </p>
              {{/if}}
            </div>
          </div>
        </div>
      </div>
    {{/each-in}}
  {{else}}
    {{#each-in key.keys as |version meta|}}
    <div class="linked-block list-item-row" data-test-transit-key-version-row={{version}}>
        <div class="columns is-mobile">
          <div class="column is-3">
            <div class="level level-left">
              <Icon @glyph="history" class="has-text-grey-light is-padded" @size="l" />
              <strong class="has-padding is-size-5">Version {{version}}</strong>
            </div>
          </div>
          <div class="column is-4">
            <div class="td is-borderless">
              <small class="help has-text-grey">
                {{date-from-now meta.creation_time addSuffix=true }}
              </small>
            </div>
          </div>
          <div class="column is-4">
            <div class="td is-borderless">
              {{#if (coerce-eq key.minDecryptionVersion version)}}
                <p class="help level level-left">
                  <Icon @glyph="check-circle-fill" class="has-text-success" />
                  Current minimum decryption version
                </p>
              {{/if}}
            </div>
          </div>
          <div class="column is-1 is-flex-end">
            <PopupMenu name="secret-menu">
              <nav class="menu">
                <ul class="menu-list">
                  <li class="action">
                    {{#copy-button
                      clipboardText=meta.public_key
                      class="link button is-transparent"
                      buttonType="button"
                      success=(action (set-flash-message 'Public key copied!'))
                    }}
                      Copy Public Key
                    {{/copy-button}}
                  </li>
                </ul>
              </nav>
            </PopupMenu>
          </div>
        </div>
      </div>
    {{/each-in}}
  {{/if}}
{{else}}
  {{info-table-row label="Type" value=key.type}}
  {{info-table-row label="Deletion allowed" value=(stringify key.deletionAllowed)}}

  {{#if key.derived}}
    {{info-table-row label="Derived" value=key.derived}}
    {{info-table-row label="Convergent encryption" value=key.convergentEncryption}}
  {{/if}}
{{/if}}