Repository: hashicorp/vault
File: ui/lib/core/addon/components/form-field.js (JavaScript)

Code before:
 * @param {boolean} [disabled=false] - whether the field is disabled
 * @param {boolean} [showHelpText=true] - whether to show the tooltip with help text from OpenAPI
 * @param {string} [mode] - used when editType is 'kv'
 * @param {object} [modelValidations] - Object of errors.  If attr.name is in object and has error message display in AlertInline.
 * @param {function} [onChange] - called whenever a value on the model changes via the component
 * @param {function} [onKeyUp] - function passed through into MaskedInput to handle validation. It is also handled for certain form-field types here in the action handleKeyUp.
 *
 */

export default class FormFieldComponent extends Component {
  emptyData = '{\n}';
  shouldHideLabel = [
    'boolean',
    'file',
    'json',
    'kv',
    'mountAccessor',
    'optionalText',
    'regex',
    'searchSelect',
    'stringArray',
    'ttl',
    'toggleButton',
  ];
  @tracked showToggleTextInput = false;
  @tracked toggleInput = false;

  constructor() {
    super(...arguments);
    const { attr, model } = this.args;
    const valuePath = attr.options?.fieldValue || attr.name;
    assert(
      'Form is attempting to modify an ID. Ember-data does not allow this.',
      valuePath.toLowerCase() !== 'id'
    );
    const modelValue = model[valuePath];
    this.showToggleTextInput = !!modelValue;
    this.toggleInput = !!modelValue;
  }

  get hasRadioSubText() {
    // for 'radio' editType, check to see if every of the possibleValues has a subText and label
    return this.args?.attr?.options?.possibleValues?.any((v) => v.subText);
  }

  get hideLabel() {
    const { type, options } = this.args.attr;
    if (type === 'boolean' || type === 'object' || options?.isSectionHeader) {
      return true;
    }
    // falsey values render a <FormFieldLabel>

Review comment (suggestion):
nit: could we rename this to be more explicit?
```suggestion
  @tracked showToggle = false;
```

Code after:
 * @param {boolean} [disabled=false] - whether the field is disabled
 * @param {boolean} [showHelpText=true] - whether to show the tooltip with help text from OpenAPI
 * @param {string} [mode] - used when editType is 'kv'
 * @param {object} [modelValidations] - Object of errors.  If attr.name is in object and has error message display in AlertInline.
 * @param {function} [onChange] - called whenever a value on the model changes via the component
 * @param {function} [onKeyUp] - function passed through into MaskedInput to handle validation. It is also handled for certain form-field types here in the action handleKeyUp.
 *
 */

export default class FormFieldComponent extends Component {
  emptyData = '{\n}';
  shouldHideLabel = [
    'boolean',
    'file',
    'json',
    'kv',
    'mountAccessor',
    'optionalText',
    'regex',
    'searchSelect',
    'stringArray',
    'ttl',
    'toggleButton',
  ];
  @tracked showToggleTextInput = false;
  @tracked toggleInputEnabled = false;

  constructor() {
    super(...arguments);
    const { attr, model } = this.args;
    const valuePath = attr.options?.fieldValue || attr.name;
    assert(
      'Form is attempting to modify an ID. Ember-data does not allow this.',
      valuePath.toLowerCase() !== 'id'
    );
    const modelValue = model[valuePath];
    this.showToggleTextInput = !!modelValue;
    this.toggleInputEnabled = !!modelValue;
  }

  get hasRadioSubText() {
    // for 'radio' editType, check to see if every of the possibleValues has a subText and label
    return this.args?.attr?.options?.possibleValues?.any((v) => v.subText);
  }

  get hideLabel() {
    const { type, options } = this.args.attr;
    if (type === 'boolean' || type === 'object' || options?.isSectionHeader) {
      return true;
    }
    // falsey values render a <FormFieldLabel>