Additional JSON schema property for UI

[EiffelFly]

This is the props UI needs right now

type AFormField = {
  /** The id of this field */
  id: string;

  /** We have these four kinds of component right now
   * - toggle can be boolean
   */
  component: "text" | "textarea" | "select" | "toggle" | "file";

  /** This is the type of text field */
  type?: "email" | "password" | "text";

  /** The label of the field
   * - e.g. Model Name
   */
  label: string;

  /**
   * The description of the field
   */
  description?: string;

  /** Whether this field is required before submitting */
  required: boolean;

  /** Whether this field is disabled 
   * The definition of disabled is the field is not editable and it will not be sent to server
   * while submitting
  */
  disabled: boolean;

  /** Whether this field is readOnly
   * The definition of readOnly at frontend side is the field is not editable, 
   * but it will be sent to server while submitting 
   */
  readonly: boolean;

  /** The placeholder of the field */
  placeholder: string;

  /** Validation pattern - regex */
  pattern?: string;

  /** Options 
   * - value - the value that will be submitted to server
   * - label - the value that will be displayed on the UI
  */
  options?: {
    label: string,
    value: string
  }[]

  /** The default value 
   * If the field is textField - default is string
   * If the field is select - default will be the value of the option
  */
  default?: string;

  /** The field's order on the screen */
  order: number;

  /** We have word counter at TextArea */
  enableCounter?: boolean;
};

Here are some necessary property

// Whether this field is disabled(frontend meaning)
ui_disabled: boolean 

// Whether this field is readOnly(frontend meaning)
ui_readOnly: boolean

// The order of field on the screen
ui_order: number

// The component type of the field
ui_component: "text_email" | "text_password" | "text" |  "textarea" | "select" | "toggle" | "file";

But I am quite hesitate about the disabled and the readOnly, they are conflict with JSON schema meaning which may cause some maintenance overhead in the future, here are some property I think worth discussing:

• description
• default
• enableCounter
• disabled
• readOnly

[EiffelFly]

Conclusion based on discussion

• ui_disabled: Used when this field is not editable
• ui_component: "text_email" | "text_password" | "text" | "textarea" | "textarea_enable_counter" | "select" | "toggle" | "file"
• ui_hidden: Used when this field won't be showed on UI
• ui_order: the order of the field
• ui_placeholder: the placeholder of the field
• enum: value, ui_enum: label
  • SPECIAL_CASE: If there has a UNSPECIFIC option, ui_enum will be empty string
  • enum: ["UNSPECIFIC"] -> ui_enum: [""]
• About Icon
  • To be discussed when we have need.

[linear]

INS-4611 Additional JSON schema property for UI