key-value-editor.html

<ng-form name="forms.keyValueEditor" novalidate ng-if="entries" ng-class="{ 'has-sort' : (!cannotSort) && (entries.length > 1)}">
  <div ng-if="showHeader" class="row form-row-has-controls input-labels">
    <div class="col-xs-6">
      <label class="input-label">
        {{keyPlaceholder}}
      </label>
    </div>
    <div class="col-xs-6">
      <label class="input-label">
        {{valuePlaceholder}}
      </label>
    </div>
  </div>
  <div ng-model="entries" class="key-value-editor" as-sortable="dragControlListeners">
    <div
      class="key-value-editor-entry row form-row-has-controls"
      ng-class-odd="'odd'"
      ng-class-even="'even'"
      ng-repeat="entry in entries"
      as-sortable-item>

      <!-- The name/key block -->
      <div
        class="form-group col-xs-6 key-value-editor-input"
        ng-class="{ 'has-error' :  (forms.keyValueEditor[uniqueForKey(unique, $index)].$invalid && forms.keyValueEditor[uniqueForKey(unique, $index)].$touched) }">

        <label for="uniqueForKey(unique, $index)" class="sr-only">{{keyPlaceholder}}</label>

        <input
          type="text"
          class="form-control"
          ng-class="{ '{{setFocusKeyClass}}' : $last  }"
          id="{{uniqueForKey(unique, $index)}}"
          name="{{uniqueForKey(unique, $index)}}"
          ng-attr-placeholder="{{ (!isReadonlyAny) && keyPlaceholder || ''}}"
          ng-minlength="{{keyMinlength}}"
          maxlength="{{keyMaxlength}}"
          ng-model="entry.name"
          ng-readonly="isReadonlyAny || isReadonlySome(entry.name) || entry.isReadonlyKey || entry.isReadonly"
          ng-pattern="validation.key"
          ng-value
          ng-required="!allowEmptyKeys && (entry.value || entry.valueFrom)"
          ng-attr-key-value-editor-focus="{{grabFocus && $last}}"
          autocorrect="off"
          autocapitalize="none"
          spellcheck="false">

        <!-- name/key help block -->
        <span ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$touched)">
          <span
            class="help-block key-validation-error"
            ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.pattern)">
            <span class="validation-text">{{ entry.keyValidatorError || keyValidatorError }}</span>
            <span ng-if="entry.keyValidatorErrorTooltip || keyValidatorErrorTooltip" class="help action-inline">
              <a
                aria-hidden="true"
                data-toggle="tooltip"
                data-placement="top"
                data-original-title="{{entry.keyValidatorErrorTooltip || keyValidatorErrorTooltip}}">
                <i class="{{entry.keyValidatorErrorTooltipIcon || keyValidatorErrorTooltipIcon}}"></i>
              </a>
            </span>
          </span>
          <span
            class="help-block key-min-length"
            ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.minlength)">
            <span class="validation-text">Minimum character count is {{keyMinlength}}</span>
          </span>
          <span
            class="help-block key-validation-error"
            ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.required)">
            <span class="validation-text">{{keyRequiredError}}</span>
          </span>
        </span>
      </div>

      <!-- the value block -->
      <div
        class="form-group col-xs-6 key-value-editor-input"
        ng-class="{ 'has-error': (forms.keyValueEditor[uniqueForValue(unique, $index)].$invalid && forms.keyValueEditor[uniqueForValue(unique, $index)].$touched) }">

        <label for="uniqueForValue(unique, $index)" class="sr-only">{{valuePlaceholder}}</label>

        <div ng-if="(!entry.valueFrom)">
          <input
            type="text"
            class="form-control"
            ng-class="{ '{{setFocusValClass}}' : $last  }"
            id="{{uniqueForValue(unique, $index)}}"
            name="{{uniqueForValue(unique, $index)}}"
            ng-attr-placeholder="{{ (!isReadonlyAny) && valuePlaceholder || ''}}"
            ng-minlength="{{valueMinlength}}"
            maxlength="{{valueMaxlength}}"
            ng-model="entry.value"
            ng-readonly="isReadonlyAny || isReadonlySome(entry.name) || entry.isReadonly"
            ng-pattern="validation.val"
            ng-required="!allowEmptyKeys && entry.value"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false">
        </div>

        <div ng-if="entry.valueFrom">
          <div ng-if="isValueFromReadonly(entry)" class="faux-input-group">
            <span
              class="faux-form-control-addon {{entry.valueIcon}}"
              aria-hidden="true"
              data-toggle="tooltip"
              data-placement="top"
              data-original-title="{{entry.valueIconTooltip || valueIconTooltip}}"></span>
            <div
              class="faux-form-control readonly">
              <span ng-switch="entry.refType">
                <span ng-switch-when="configMapKeyRef">
                  Set to the key {{entry.valueFrom.configMapKeyRef.key}} in config map
                  <span
                    ng-if="!(configMapVersion | canI : 'get')">
                    {{entry.valueFrom.configMapKeyRef.name}}
                  </span>
                  <a
                    ng-if="configMapVersion | canI : 'get'"
                    ng-href="{{entry.apiObj | navigateResourceURL}}">
                    {{entry.valueFrom.configMapKeyRef.name}}
                  </a>
                </span>
                <span ng-switch-when="secretKeyRef">
                  Set to the key {{entry.valueFrom.secretKeyRef.key}} in secret
                  <span
                    ng-if="!(secretsVersion | canI : 'get')">
                    {{entry.valueFrom.secretKeyRef.name}}
                  </span>
                  <a
                    ng-if="secretsVersion | canI : 'get'"
                    ng-href="{{entry.apiObj | navigateResourceURL}}">
                    {{entry.valueFrom.secretKeyRef.name}}
                  </a>
                </span>
                <span ng-switch-when="fieldRef">
                  {{entry.valueAlt}}
                </span>
                <span ng-switch-default>
                  {{entry.valueAlt}}
                </span>
              </span>
            </div>
          </div>
          <div ng-if="!isValueFromReadonly(entry)">
            <div class="ui-select key-value-editor-select">
              <ui-select ng-model="entry.selectedValueFrom" ng-required="true" on-select="valueFromObjectSelected(entry, $select.selected)">
                <ui-select-match placeholder="Select a resource">
                  <span>
                    {{$select.selected.metadata.name}}
                    <small class="text-muted">&ndash; {{$select.selected.kind | humanizeKind : true}}</small>
                  </span>
                </ui-select-match>
                <ui-select-choices
                  repeat="source in valueFromSelectorOptions | filter : { metadata: { name: $select.search } } track by (source | uid)"
                  group-by="groupByKind">
                  <span ng-bind-html="source.metadata.name | highlight : $select.search"></span>
                </ui-select-choices>
              </ui-select>
            </div>
            <div class="ui-select key-value-editor-select">
              <ui-select ng-model="entry.selectedValueFromKey" ng-required="true" on-select="valueFromKeySelected(entry, $select.selected)">
                <ui-select-match placeholder="Select key">
                  {{$select.selected}}
                </ui-select-match>
                <ui-select-choices repeat="key in entry.selectedValueFrom.data | keys">
                  <span ng-bind-html="key | highlight : $select.search"></span>
                </ui-select-choices>
              </ui-select>
            </div>
          </div>
        </div>

        <!-- value help block -->
        <span ng-show="(forms.keyValueEditor[uniqueForValue(unique, $index)].$touched)">
          <span
            class="help-block value-validation-error"
            ng-show="(forms.keyValueEditor[uniqueForValue(unique, $index)].$error.pattern)">
            <span class="validation-text">{{ entry.valueValidatorError || valueValidatorError}}</span>
            <span ng-if="entry.valueValidatorErrorTooltip || valueValidatorErrorTooltip" class="help action-inline">
              <a
                aria-hidden="true"
                data-toggle="tooltip"
                data-placement="top"
                data-original-title="{{entry.valueValidatorErrorTooltip || valueValidatorErrorTooltip}}">
                <i class="{{entry.valueValidatorErrorTooltipIcon || valueValidatorErrorTooltipIcon}}"></i>
              </a>
            </span>
          </span>
          <span
            class="help-block value-min-length"
            ng-show="(forms.keyValueEditor[uniqueForValue(unique, $index)].$error.minlength)">
            <span class="validation-text">Minimum character count is {{valueMinlength}}</span>
          </span>
        </span>
      </div>

      <div class="key-value-editor-buttons form-row-controls">
        <button ng-if="(!cannotSort) && (entries.length > 1)"
          class="sort-row"
          type="button"
          aria-hidden="true"
          aria-grabbed="false"
          as-sortable-item-handle>
          <span class="fa fa-bars"></span>
          <span class="sr-only">Move row</span>
        </button>
        <button
          class="btn-remove close delete-row as-sortable-item-delete"
          type="button"
          aria-hidden="true"
          ng-hide="cannotDeleteAny || cannotDeleteSome(entry.name) || entry.cannotDelete"
          ng-click="deleteEntry($index, 1)">
          <span class="pficon pficon-close" aria-hidden="true"></span>
          <span class="sr-only">Delete row</span>
        </button>
      </div>
    </div>

    <div
      class="key-value-editor-entry form-group"
      ng-if="(!cannotAdd)">
      <a
        href=""
        class="add-row-link"
        role="button"
        ng-click="onAddRow()">{{ addRowLink }}</a>
      <span ng-if="valueFromSelectorOptions.length">
        <span
          class="action-divider"
          aria-hidden="true">|</span>
        <a
          href=""
          class="add-row-link"
          role="button"
          ng-click="onAddRowWithSelectors()">{{ addRowWithSelectorsLink }}</a>
      </span>
    </div>

  </div>
</ng-form>