nomad/ui/app/templates/variables/variable/index.hbs

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

<Hds::PageHeader class="variable-title" as |PH|>
  <PH.Title>{{this.model.path}}</PH.Title>
  <PH.IconTile @icon="file-text" />
  <PH.Actions>
    {{#unless this.isDeleting}}

    <Hds::Form::Toggle::Field
      @value="enable"
      {{keyboard-shortcut 
        label="Toggle View (JSON/List)"
        pattern=(array "j")
        action=(action this.toggleView)
      }}
      checked={{eq this.view "json"}}
      data-test-json-toggle
      {{on "change" (action this.toggleView)}}
    as |F|>
      <F.Label>JSON</F.Label>
    </Hds::Form::Toggle::Field>

    <div
      {{keyboard-shortcut 
        label="Copy Variable"
        pattern=(array "c" "v")
        action=(action this.copyVariable)}}
    >
      <Hds::Copy::Button
        @text="Copy"
        @textToCopy={{stringify-object this.model.items}}
        @isIconOnly={{true}}
        class="copy-variable"
      />
    </div>

      {{#if (can "write variable" path=this.model.path namespace=this.model.namespace)}}
        <Hds::Button
          @icon="edit"
          @text="Edit"
          @color="secondary"
          @route="variables.variable.edit"
          @model={{this.model}}
          @query={{hash view=this.view}}
          data-test-edit-button
          {{autofocus}}
        />
      {{/if}}
    {{/unless}}

    {{#if (can "destroy variable" path=this.model.path namespace=this.model.namespace)}}
      <TwoStepButton
        data-test-delete-button
        @alignRight={{true}}
        @idleText="Delete"
        @cancelText="Cancel"
        @confirmText="Yes, delete"
        @confirmationMessage="Are you sure you want to delete this variable and all its items?"
        @awaitingConfirmation={{this.deleteVariableFile.isRunning}}
        @onConfirm={{perform this.deleteVariableFile}}
        @onPrompt={{this.onDeletePrompt}}
        @onCancel={{this.onDeleteCancel}}
      />
    {{/if}}
  </PH.Actions>
</Hds::PageHeader>

{{#if this.shouldShowLinkedEntities}}
  <VariableForm::RelatedEntities
    @job={{this.model.pathLinkedEntities.job}}
    @group={{this.model.pathLinkedEntities.group}}
    @task={{this.model.pathLinkedEntities.task}}
    @namespace={{or this.model.namespace "default"}}
  />
{{/if}}

{{#if (eq this.view "json")}}
  <div class="boxed-section">
    <div class="boxed-section-head">
      Key/Value Data
    </div>
    <div class="boxed-section-body is-full-bleed">
      <JsonViewer @json={{this.model.items}} />
    </div>
  </div>
{{else}}
  <Hds::Table class="variable-items"
  @model={{this.sortedKeyValues}}
  @sortBy={{this.sortProperty}}
  @sortOrder={{if this.sortDescending "desc" "asc"}}
  @columns={{array
    (hash
      key="key"
      label="Key"
      isSortable=true
      width="200px"
    )
    (hash
      key="value"
      label="Value"
      isSortable=true
    )
  }}
  >
    <:body as |B|>
      <B.Tr data-test-var={{B.data.key}}>
        <B.Td>{{B.data.key}}</B.Td>
        <B.Td class="value-cell">
          <div>
            <CopyButton
              @compact={{true}}
              @clipboardText={{B.data.value}}
            />
            <button
              class="show-hide-values button is-borderless is-compact"
              type="button"
              {{on "click" (action this.toggleRowVisibility B.data)}}
              {{keyboard-shortcut 
                label="Toggle Variable Visibility"
                pattern=(array "v")
                action=(action this.toggleRowVisibility B.data)
              }}

            >
              <Hds::Icon @name={{if B.data.isVisible "eye" "eye-off"}} @title={{if B.data.isVisible "Hide Value" "Show Value"}} @isInline={{true}} />
            </button>

            {{#if B.data.isVisible}}
              <code>{{B.data.value}}</code>
            {{else}}
              ********
            {{/if}}
          </div>
        </B.Td>
      </B.Tr>
    </:body>
  </Hds::Table>

{{/if}}