Files
vault/ui/lib/core/addon/components/info-table-row.hbs
claire bontempo 42a337410f UI: add copyable paths for CLI and API commands to kv v2 (#22551)
* add paths route

* WIP copy secret path component

* wip component

* ad v1

* use each-in to iterate over info table row

* update copy

* add commands to kv paths page

* add comments

* WIP tests

* finish tests

* remove version, address comments and use path arg directly remove secret

* update copy

* fix typo for perms

* remove destructuring, that was confusing

* add changelog

* add secure protocal
2023-08-25 09:03:46 -07:00

114 lines
4.0 KiB
Handlebars

{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}
{{#if (or (has-block) this.isVisible)}}
<div class="info-table-row" data-test-component="info-table-row" ...attributes>
<div
class="column {{or @labelWidth 'is-one-quarter'}} {{if this.hasLabelOverflow 'label-overflow'}}"
data-test-label-div
{{did-insert this.calculateLabelOverflow}}
>
{{#if @label}}
{{#if this.hasLabelOverflow}}
<ToolTip @verticalPosition="below" @horizontalPosition="left" as |T|>
<T.Trigger @tabindex={{false}}>
<span class="is-label has-text-grey-dark" data-test-row-label={{@label}}>{{@label}}</span>
</T.Trigger>
<T.Content @defaultClass="tool-tip">
<div class="box fit-content" data-test-label-tooltip>
{{@label}}
</div>
</T.Content>
</ToolTip>
{{else}}
<span class="is-label has-text-grey-dark" data-test-row-label={{@label}}>{{@label}}</span>
{{/if}}
{{#if @helperText}}
<div>
<span class="is-label helper-text has-text-grey">{{@helperText}}</span>
</div>
{{/if}}
{{else}}
<Icon @name="minus" />
{{/if}}
</div>
<div class="column is-flex" data-test-value-div={{@label}}>
{{#if @addCopyButton}}
<div class="display-only">
<CopyButton
@clipboardText={{@value}}
@success={{action (set-flash-message "Data copied!")}}
class="button copy-button is-compact"
data-test-copy-button
>
<Icon @name="clipboard-copy" aria-label="Copy value" />
</CopyButton>
</div>
{{/if}}
{{#if (has-block)}}
{{yield}}
{{else if this.valueIsBoolean}}
{{#if @value}}
<Icon class="icon-true" @name="check-circle" data-test-boolean-true />
Yes
{{else}}
<Icon @name="x-square" class="icon-false" data-test-boolean-false />
No
{{/if}}
{{! @alwaysRender (this.isVisible) is still true }}
{{else if this.valueIsEmpty}}
{{#if @defaultShown}}
<span data-test-row-value={{@label}}>{{@defaultShown}}</span>
{{else}}
<Icon @name="minus" />
{{/if}}
{{else if @formatDate}}
{{date-format @value @formatDate}}
{{else if @formatTtl}}
{{format-duration @value}}
{{else}}
{{#if (eq @type "array")}}
<InfoTableItemArray
@label={{@label}}
@backend={{@backend}}
@displayArray={{@value}}
@isLink={{@isLink}}
@modelType={{@modelType}}
@queryParam={{@queryParam}}
@wildcardLabel={{@wildcardLabel}}
@rootRoute={{@rootRoute}}
@itemRoute={{@itemRoute}}
@doNotTruncate={{@doNotTruncate}}
@renderItemName={{@renderItemName}}
/>
{{else}}
{{#if @tooltipText}}
<ToolTip @verticalPosition="above" @horizontalPosition="left" as |T|>
<T.Trigger @tabindex={{false}}>
<span class="is-word-break has-text-black" data-test-row-value={{@label}}>{{@value}}</span>
</T.Trigger>
<T.Content @defaultClass="tool-tip">
<CopyButton
@clipboardText={{@tooltipText}}
@success={{action (set-flash-message "Data copied!")}}
@tagName="div"
disabled={{not @isTooltipCopyable}}
class={{if @isTooltipCopyable "has-pointer"}}
data-test-tooltip-copy
>
<div class="box">
{{@tooltipText}}
</div>
</CopyButton>
</T.Content>
</ToolTip>
{{else}}
<span class="is-word-break has-text-black" data-test-row-value={{@label}}>{{@value}}</span>
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
{{/if}}