portainer/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html

<ng-form name="kubernetesConfigurationDataCreationForm">
  <div class="col-sm-12 form-section-title" style="margin-top: 10px;">
    Data
  </div>

  <div class="form-group" ng-if="$ctrl.isCreation">
    <div class="col-sm-12">
      <p>
        <a class="small interactive" ng-if="$ctrl.formValues.IsSimple" ng-click="$ctrl.showAdvancedMode()">
          <i class="fa fa-list-ol space-right" aria-hidden="true"></i> Advanced mode
        </a>
        <a class="small interactive" ng-if="!$ctrl.formValues.IsSimple" ng-click="$ctrl.showSimpleMode()">
          <i class="fa fa-edit space-right" aria-hidden="true"></i> Simple mode
        </a>
      </p>
    </div>
    <div class="col-sm-12 small text-muted" ng-if="$ctrl.formValues.IsSimple">
      <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
      Switch to advanced mode to copy and paste multiple key/values
    </div>
    <div class="col-sm-12 small text-muted" ng-if="!$ctrl.formValues.IsSimple">
      <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
      Generate a configuration entry per line, use YAML format
    </div>
  </div>

  <div class="form-group" ng-if="$ctrl.formValues.IsSimple">
    <div class="col-sm-12">
      <button type="button" class="btn btn-sm btn-default" style="margin-left: 0;" ng-click="$ctrl.addEntry()" data-cy="k8sConfigCreate-createEntryButton">
        <i class="fa fa-plus-circle" aria-hidden="true"></i> Create entry
      </button>
      <button type="button" class="btn btn-sm btn-default" ngf-select="$ctrl.addEntryFromFile($file)" style="margin-left: 0;" data-cy="k8sConfigCreate-createConfigsFromFileButton">
        <i class="fa fa-file-upload" aria-hidden="true"></i> Create key/value from file
      </button>
    </div>
  </div>

  <div ng-repeat="(index, entry) in $ctrl.formValues.Data" ng-if="$ctrl.formValues.IsSimple">
    <div class="form-group">
      <label for="configuration_data_key_{{ index }}" class="col-sm-1 control-label text-left">Key</label>
      <div class="col-sm-11">
        <input
          type="text"
          class="form-control"
          id="configuration_data_key_{{ index }}"
          name="configuration_data_key_{{ index }}"
          ng-model="$ctrl.formValues.Data[index].Key"
          ng-disabled="entry.Used"
          required
          ng-change="$ctrl.onChangeKey(entry)"
        />
      </div>
      <div
        class="col-sm-11 small text-warning"
        style="margin-top: 5px;"
        ng-show="
          kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$invalid ||
          (!entry.Used && $ctrl.state.duplicateKeys[index] !== undefined) ||
          $ctrl.state.invalidKeys[index]
        "
      >
        <ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$error">
          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
        </ng-messages>
        <p ng-if="$ctrl.state.duplicateKeys[index] !== undefined"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This key is already defined.</p>
        <p ng-if="$ctrl.state.invalidKeys[index]"
          ><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This key is invalid. A valid key must consist of alphanumeric characters, '-', '_' or '.'</p
        >
      </div>
    </div>

    <div class="form-group" ng-if="$ctrl.formValues.IsSimple && !entry.IsBinary">
      <label for="configuration_data_value_{{ index }}" class="col-sm-1 control-label text-left">Value</label>
      <div class="col-sm-11">
        <textarea
          class="form-control"
          rows="5"
          id="configuration_data_value_{{ index }}"
          name="configuration_data_value_{{ index }}"
          ng-model="$ctrl.formValues.Data[index].Value"
          required
        ></textarea>
      </div>
      <div class="col-sm-11 small text-warning" style="margin-top: 5px;" ng-show="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$invalid">
        <ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$error">
          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
        </ng-messages>
      </div>
    </div>

    <div class="form-group" ng-if="$ctrl.formValues.IsSimple && entry.IsBinary">
      <label for="configuration_data_value_{{ index }}" class="col-sm-1 control-label text-left">Value</label>
      <div class="col-sm-11 control-label small text-muted text-left"
        >Binary data <portainer-tooltip position="bottom" message="This key holds binary data and cannot be displayed."></portainer-tooltip
      ></div>
    </div>

    <div class="form-group" ng-if="$ctrl.formValues.IsSimple">
      <div class="col-sm-1"></div>
      <div class="col-sm-11">
        <button
          type="button"
          class="btn btn-sm btn-danger space-right"
          style="margin-left: 0;"
          ng-disabled="entry.Used"
          ng-click="$ctrl.removeEntry(index, entry)"
          data-cy="k8sConfigDetail-removeEntryButton{{ index }}"
        >
          <i class="fa fa-trash-alt" aria-hidden="true"></i> Remove entry
        </button>
        <span class="small text-muted" ng-if="entry.Used">
          <i class="fa fa-info-circle blue-icon space-right" aria-hidden="true"></i>
          This key is currently used by one or more applications
        </span>
      </div>
    </div>
  </div>

  <div class="form-group" ng-if="!$ctrl.formValues.IsSimple">
    <input type="text" ng-model="$ctrl.formValues.DataYaml" required style="display: none;" />
    <code-editor identifier="kubernetes-configuration-editor" value="$ctrl.formValues.DataYaml" read-only="false" yml="true" on-change="($ctrl.editorUpdate)"></code-editor>
  </div>
</ng-form>