From b1fee3f4c0e709d3ec71596b92180f3e398d72af Mon Sep 17 00:00:00 2001
From: tehkai <kai.arrowood@konghq.com>
Date: Tue, 27 Aug 2024 10:55:51 -0400
Subject: [PATCH 01/10] feat(vfg): convert field-select + more tests
 [khcp-11336]

---
 .../src/components/fields/FieldSelect.vue     | 246 ++++++++-------
 .../fields/__tests__/FieldCheckbox.cy.ts      |  15 +
 .../fields/__tests__/FieldInput.cy.ts         |  15 +
 .../fields/__tests__/FieldRadio.cy.ts         |  20 +-
 .../fields/__tests__/FieldSelect.cy.ts        | 294 ++++++++++++++++++
 .../fields/__tests__/FieldTextArea.cy.ts      |  15 +
 packages/core/forms/src/types/form-fields.ts  |   1 +
 7 files changed, 485 insertions(+), 121 deletions(-)
 create mode 100644 packages/core/forms/src/components/fields/__tests__/FieldSelect.cy.ts

diff --git a/packages/core/forms/src/components/fields/FieldSelect.vue b/packages/core/forms/src/components/fields/FieldSelect.vue
index 657d692e9b..bf73bfe7a7 100644
--- a/packages/core/forms/src/components/fields/FieldSelect.vue
+++ b/packages/core/forms/src/components/fields/FieldSelect.vue
@@ -1,138 +1,146 @@
-<template lang="pug">
-select.form-control(v-model="value", :disabled="disabled || null", :name="schema.inputName", :id="getFieldID(schema)", :class="schema.fieldClasses", v-attributes="'input'")
-    option(v-if="!selectOptions.hideNoneSelectedText", :disabled="schema.required || null", :value="null") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
-
-    template(v-for="item in items")
-      optgroup(v-if="item.group", :label="getGroupName(item)")
-        option(v-if="item.ops", v-for="i in item.ops", :value="getItemValue(i)") {{ getItemName(i) }}
-
-      option(v-if="!item.group", :value="getItemValue(item)") {{ getItemName(item) }}
+<template>
+  <KSelect
+    :id="getFieldID(schema)"
+    v-model="inputValue"
+    :class="schema.fieldClasses"
+    :disabled="disabled || undefined"
+    :items="items"
+    :label-attributes="{ info: schema.help }"
+    :name="schema.inputName"
+    :placeholder="!selectOptions.hideNoneSelectedText ? selectOptions.noneSelectedText || 'Nothing Selected' : undefined"
+    :required="schema.required || undefined"
+    width="100%"
+  />
 </template>
 
-<script>
+<script lang="ts" setup>
+import { computed, toRefs, type PropType } from 'vue'
+import type { SelectItem } from '@kong/kongponents'
 import isObject from 'lodash-es/isObject'
 import isNil from 'lodash-es/isNil'
-import find from 'lodash-es/find'
-import abstractField from './abstractField'
-
-export default {
-  mixins: [abstractField],
-
-  computed: {
-    selectOptions() {
-      return this.schema.selectOptions || {}
-    },
+import composables from '../../composables'
 
-    items() {
-      const values = this.schema.values
-      if (typeof values === 'function') {
-        return this.groupValues(values.apply(this, [this.model, this.schema]))
-      } else return this.groupValues(values)
-    },
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
   },
+  formOptions: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => undefined,
+  },
+  model: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => undefined,
+  },
+  schema: {
+    type: Object as PropType<Record<string, any>>,
+    required: true,
+  },
+  vfg: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * TODO: stronger type
+   * TODO: pass this down to KInput error and errorMessage
+   */
+  errors: {
+    type: Array,
+    default: () => [],
+  },
+  hint: {
+    type: String,
+    default: '',
+  },
+})
 
-  methods: {
-    formatValueToField(value) {
-      if (isNil(value)) {
-        return null
-      }
-      return value
-    },
-
-    groupValues(values) {
-      const array = []
-      let arrayElement = {}
-
-      values.forEach(item => {
-        arrayElement = null
-
-        if (item.group && isObject(item)) {
-          // There is in a group.
-
-          // Find element with this group.
-          arrayElement = find(array, i => i.group === item.group)
-
-          if (arrayElement) {
-            // There is such a group.
-
-            arrayElement.ops.push({
-              id: item.id,
-              name: item.name,
-            })
-          } else {
-            // There is not such a group.
-
-            // Initialising.
-            arrayElement = {
-              group: '',
-              ops: [],
-            }
-
-            // Set group.
-            arrayElement.group = item.group
-
-            // Set Group element.
-            arrayElement.ops.push({
-              id: item.id,
-              name: item.name,
-            })
+const emit = defineEmits<{
+  (event: 'modelUpdated', value: any, model: Record<string, any>): void
+}>()
 
-            // Add array.
-            array.push(arrayElement)
-          }
-        } else {
-          // There is not in a group.
-          array.push(item)
-        }
-      })
+const selectOptions = computed((): Record<string, any> => props.schema.selectOptions || {})
 
-      // With Groups.
-      return array
-    },
+const formatValueToField = (value: Record<string, any>) => {
+  if (isNil(value)) {
+    return null
+  }
+  return value
+}
 
-    getGroupName(item) {
-      if (item && item.group) {
-        return item.group
-      }
+const propsRefs = toRefs(props)
 
-      throw new Error('Group name is missing! https://icebob.gitbooks.io/vueformgenerator/content/fields/select.html#select-field-with-object-items')
-    },
+const { getFieldID, clearValidationErrors, value: inputValue } = composables.useAbstractFields({
+  model: propsRefs.model,
+  schema: props.schema,
+  formOptions: props.formOptions,
+  formatValueToField,
+  emitModelUpdated: (data: { value: any, model: Record<string, any> }): void => {
+    emit('modelUpdated', data.value, data.model)
+  },
+})
+
+defineExpose({
+  clearValidationErrors,
+})
+
+const items = computed((): SelectItem[] => {
+  // values to be used in the select items
+  const selectOptions = props.schema.values
+
+  if (typeof selectOptions === 'function') {
+    return getItemsFromValues(selectOptions.apply(this, [props.model, props.schema]))
+  } else {
+    return getItemsFromValues(selectOptions)
+  }
+})
+
+const getItemsFromValues = (values: Record<string, any>[] | string[] | number[]): SelectItem[] => {
+  const itemArray: SelectItem[] = []
+
+  values.forEach(item => {
+    itemArray.push({
+      label: getItemName(item),
+      value: getItemValue(item),
+      disabled: typeof item === 'object' ? item.disabled || undefined : undefined,
+      group: typeof item === 'object' ? item.group || undefined : undefined,
+    })
+  })
+
+  // With Groups.
+  return itemArray
+}
 
-    getItemValue(item) {
-      if (isObject(item)) {
-        if (typeof this.schema.selectOptions !== 'undefined' && typeof this.schema.selectOptions.value !== 'undefined') {
-          return item[this.schema.selectOptions.value]
-        } else {
-          // Use 'id' instead of 'value' cause of backward compatibility
-          if (typeof item.id !== 'undefined') {
-            return item.id
-          } else {
-            throw new Error('`id` is not defined. If you want to use another key name, add a `value` property under `selectOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/select.html#select-field-with-object-items')
-          }
-        }
+const getItemValue = (item: string | number | Record<string, any>): string | number => {
+  if (isObject(item)) {
+    if (selectOptions.value && typeof selectOptions.value.value !== 'undefined') {
+      return item[selectOptions.value.value]
+    } else {
+      // Use 'id' instead of 'value' cause of backward compatibility
+      if (typeof item.id !== 'undefined') {
+        return String(item.id)
       } else {
-        return item
+        throw new Error('`id` is not defined. If you want to use another key name, add a `value` property under `selectOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/select.html#select-field-with-object-items')
       }
-    },
+    }
+  } else {
+    return item
+  }
+}
 
-    getItemName(item) {
-      if (isObject(item)) {
-        if (typeof this.schema.selectOptions !== 'undefined' && typeof this.schema.selectOptions.name !== 'undefined') {
-          return item[this.schema.selectOptions.name]
-        } else {
-          if (typeof item.name !== 'undefined') {
-            return item.name
-          } else {
-            throw new Error('`name` is not defined. If you want to use another key name, add a `name` property under `selectOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/select.html#select-field-with-object-items')
-          }
-        }
+const getItemName = (item: string | number | Record<string, any>): string => {
+  if (isObject(item)) {
+    if (selectOptions.value && typeof selectOptions.value.name !== 'undefined') {
+      return item[selectOptions.value.name]
+    } else {
+      if (typeof item.name !== 'undefined') {
+        return String(item.name)
       } else {
-        return item
+        throw new Error('`name` is not defined. If you want to use another key name, add a `name` property under `selectOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/select.html#select-field-with-object-items')
       }
-    },
-  },
+    }
+  } else {
+    return String(item)
+  }
 }
 </script>
-
-<style lang="sass">
-</style>
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts
index baa55bf33b..d843855cbb 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts
@@ -11,6 +11,8 @@ describe('<FieldTester /> - FieldCheckbox', () => {
       model: fieldKey,
       id: fieldKey,
       label: fieldLabel,
+      help: 'Check if the cat is cool.',
+      required: true,
     }],
   }
 
@@ -33,6 +35,19 @@ describe('<FieldTester /> - FieldCheckbox', () => {
     // check VFG label is set correctly
     cy.get(`.form-group-label[for="${fieldKey}"]`).should('be.visible')
     cy.get(`.form-group-label[for="${fieldKey}"]`).should('contain.text', fieldLabel)
+
+    // check required state
+    if (schema.fields[0].required) {
+      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('exist')
+    } else {
+      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('not.exist')
+    }
+
+    // check help text
+    if (schema.fields[0].help) {
+      cy.get(`label[for="${fieldKey}"] .info-icon`).should('be.visible')
+      cy.get(`label[for="${fieldKey}"]`).should('contain.text', schema.fields[0].help)
+    }
   })
 
   it('renders default state correctly - with model', () => {
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts
index 844385a909..17ad24cbfa 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts
@@ -12,6 +12,8 @@ describe('<FieldTester /> - FieldInput', () => {
       id: fieldKey,
       inputType: 'text',
       label: fieldLabel,
+      help: 'The name of the cat.',
+      required: true,
     }],
   }
 
@@ -34,6 +36,19 @@ describe('<FieldTester /> - FieldInput', () => {
     // check VFG label is set correctly
     cy.get(`.form-group-label[for="${fieldKey}"]`).should('be.visible')
     cy.get(`.form-group-label[for="${fieldKey}"]`).should('contain.text', fieldLabel)
+
+    // check required state
+    if (schema.fields[0].required) {
+      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('exist')
+    } else {
+      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('not.exist')
+    }
+
+    // check help text
+    if (schema.fields[0].help) {
+      cy.get(`label[for="${fieldKey}"] .info-icon`).should('be.visible')
+      cy.get(`label[for="${fieldKey}"]`).should('contain.text', schema.fields[0].help)
+    }
   })
 
   it('renders default state correctly - with model', () => {
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
index 7874e80635..2e5618fc6f 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
@@ -5,7 +5,7 @@ describe('<FieldTester /> - FieldRadio', () => {
   const fieldKey = 'gender'
   const fieldLabel = 'Gender'
   const fieldValue = 'male'
-  const updatedFieldValue = 'female'
+  const updatedFieldValue = 'not_specified'
   const schema: FormSchema = {
     fields: [{
       type: 'radio',
@@ -13,9 +13,12 @@ describe('<FieldTester /> - FieldRadio', () => {
       id: fieldKey,
       name: fieldKey,
       label: fieldLabel,
+      required: true,
+      help: 'Specify a gender if it is known',
       values: [
         { name: 'Male', value: fieldValue },
-        { name: 'Female', value: updatedFieldValue },
+        { name: 'Female', value: 'female' },
+        { name: 'Not specified', value: updatedFieldValue },
       ],
     }],
   }
@@ -41,6 +44,19 @@ describe('<FieldTester /> - FieldRadio', () => {
     // check VFG label is set correctly
     cy.get(`.form-group-label[for="${fieldKey}"]`).should('be.visible')
     cy.get(`.form-group-label[for="${fieldKey}"]`).should('contain.text', fieldLabel)
+
+    // check required state
+    if (schema.fields[0].required) {
+      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('exist')
+    } else {
+      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('not.exist')
+    }
+
+    // check help text
+    if (schema.fields[0].help) {
+      cy.get(`label[for="${fieldKey}"] .info-icon`).should('be.visible')
+      cy.get(`label[for="${fieldKey}"]`).should('contain.text', schema.fields[0].help)
+    }
   })
 
   it('renders default state correctly - with model', () => {
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldSelect.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldSelect.cy.ts
new file mode 100644
index 0000000000..30aa5b8c63
--- /dev/null
+++ b/packages/core/forms/src/components/fields/__tests__/FieldSelect.cy.ts
@@ -0,0 +1,294 @@
+import type { FormSchema } from '../../../types'
+import FieldTester from '../../../../sandbox/FieldTester.vue'
+
+describe('<FieldTester /> - FieldSwitch', () => {
+  const fieldKeys = ['https_redirect_status_code', 'protocols']
+  const fieldLabels = ['HTTPS Redirect Status Code', 'Protocols']
+  const fieldValues = [307, 'http, https']
+  const updatedValues = [426, 'https']
+  const schema: FormSchema = {
+    fields: [
+      // with number[] and no groups
+      {
+        type: 'select',
+        label: fieldLabels[0],
+        id: fieldKeys[0],
+        model: fieldKeys[0],
+        name: fieldKeys[0],
+        selectOptions: {
+          hideNoneSelectedText: true,
+        },
+        values: [
+          426,
+          301,
+          302,
+          307,
+          308,
+        ],
+        help: 'The status code Kong responds with when all properties of a Route match except the protocol i.e. if the protocol of the request is `HTTP` instead of `HTTPS`. `Location` header is injected by Kong if the field is set to 301, 302, 307 or 308. ',
+      },
+      // with object[] and groups
+      {
+        type: 'select',
+        label: fieldLabels[1],
+        name: fieldKeys[1],
+        id: fieldKeys[1],
+        model: fieldKeys[1],
+        selectOptions: {
+          hideNoneSelectedText: true,
+        },
+        required: true,
+        values: [
+          {
+            name: 'grpc',
+            id: [
+              'grpc',
+            ],
+            group: 'grpc',
+          },
+          {
+            name: 'grpcs',
+            id: [
+              'grpcs',
+            ],
+            group: 'grpc',
+          },
+          {
+            name: 'grpc, grpcs',
+            id: [
+              'grpc',
+              'grpcs',
+            ],
+            group: 'grpc',
+          },
+          {
+            name: 'http',
+            id: [
+              'http',
+            ],
+            group: 'http',
+            checked: true,
+          },
+          {
+            name: 'https',
+            id: [
+              'https',
+            ],
+            group: 'http',
+          },
+          {
+            name: 'http, https',
+            id: [
+              'http',
+              'https',
+            ],
+            group: 'http',
+          },
+          {
+            name: 'tcp',
+            id: [
+              'tcp',
+            ],
+            group: 'tcp',
+          },
+          {
+            name: 'tls',
+            id: [
+              'tls',
+            ],
+            group: 'tcp',
+          },
+          {
+            name: 'tcp, tls',
+            id: [
+              'tcp',
+              'tls',
+            ],
+            group: 'tcp',
+          },
+          {
+            name: 'udp',
+            id: [
+              'udp',
+            ],
+            group: 'udp',
+          },
+          {
+            name: 'ws',
+            id: [
+              'ws',
+            ],
+            group: 'websocket',
+            checked: true,
+          },
+          {
+            name: 'wss',
+            id: [
+              'wss',
+            ],
+            group: 'websocket',
+          },
+          {
+            name: 'ws, wss',
+            id: [
+              'ws',
+              'wss',
+            ],
+            group: 'websocket',
+          },
+        ],
+        help: 'An array of the protocols this Route should allow. See the [Route Object](#route-object) section for a list of accepted protocols. When set to only `"https"`, HTTP requests are answered with an upgrade error. When set to only `"http"`, HTTPS requests are answered with an error. ',
+      }],
+  }
+
+  for (let i = 0; i < fieldKeys.length; i++) {
+    const fieldKey = fieldKeys[i]
+    const fieldLabel = fieldLabels[i]
+    const fieldValue = fieldValues[i]
+    const updatedValue = updatedValues[i]
+
+    it('renders default state correctly - without model', () => {
+      cy.mount(FieldTester, {
+        props: {
+          schema,
+        },
+      })
+
+      cy.get('.field-tester-container').should('exist')
+
+      // check VFG input value
+      cy.get(`#${fieldKey}`).should('exist')
+      cy.get(`#${fieldKey}`).should('have.value', '')
+
+      // initial model is empty after load
+      cy.getTestId(`field-tester-form-model-${fieldKey}-value`).should('not.exist')
+
+      // check VFG label is set correctly
+      cy.get(`.form-group-label[for="${fieldKey}"]`).should('be.visible')
+      cy.get(`.form-group-label[for="${fieldKey}"]`).should('contain.text', fieldLabel)
+
+      // check help text
+      if (schema.fields[i].help) {
+        cy.get(`label[for="${fieldKey}"] .info-icon`).should('be.visible')
+        cy.get(`label[for="${fieldKey}"]`).should('contain.text', schema.fields[i].help)
+      }
+
+      // check required state
+      if (schema.fields[i].required) {
+        cy.get(`.field-select.required label[for="${fieldKey}"]`).should('exist')
+      } else {
+        cy.get(`.field-select.required label[for="${fieldKey}"]`).should('not.exist')
+      }
+
+      // check all groups / options render
+      cy.get(`#${fieldKey}`).click()
+
+      const items = schema.fields[i].values
+      items.forEach((item: Record<string, any> | string | number) => {
+        if (typeof item === 'object') {
+          if (item.group) {
+            cy.get('.select-group-title').should('contain.text', item.group)
+            cy.get('.select-group').findTestId(`select-item-${item.name.replace(/ /g, '')}`).should('exist')
+          } else {
+            cy.getTestId(`select-item-${item.name}`).should('exist')
+          }
+        } else {
+          cy.getTestId(`select-item-${item}`).should('exist')
+        }
+      })
+    })
+
+    it('renders default state correctly - with model', () => {
+      const strippedVal = typeof fieldValue === 'number' ? fieldValue : String(fieldValue).replace(/ /g, '')
+      cy.mount(FieldTester, {
+        props: {
+          schema,
+          model: {
+            [fieldKey]: strippedVal,
+          },
+        },
+      })
+
+      cy.get('.field-tester-container').should('exist')
+
+      // check VFG input value
+      cy.get(`#${fieldKey}`).should('exist')
+      cy.get(`#${fieldKey}`).should('have.value', fieldValue)
+
+      // check field test form model matches
+      cy.getTestId(`field-tester-form-model-${fieldKey}-value`).should('be.visible')
+      cy.getTestId(`field-tester-form-model-${fieldKey}-value`).should('contain.text', strippedVal)
+    })
+
+    it('handles input changes', () => {
+      const tVal = typeof updatedValue === 'number' ? String(updatedValue) : updatedValue
+      cy.mount(FieldTester, {
+        props: {
+          schema,
+        },
+      })
+
+      cy.get('.field-tester-container').should('exist')
+
+      // edit the input value
+      cy.get(`#${fieldKey}`).should('exist')
+      cy.get(`#${fieldKey}`).click()
+      cy.getTestId(`select-item-${tVal}`).should('exist')
+      cy.getTestId(`select-item-${tVal}`).scrollIntoView()
+      cy.getTestId(`select-item-${tVal}`).click()
+
+      // check VFG input value
+      cy.get(`#${fieldKey}`).should('have.value', updatedValue)
+      // check field test form model
+      cy.getTestId(`field-tester-form-model-${fieldKey}-value`).should('contain.text', updatedValue)
+    })
+
+    it('handles programmatic input changes', () => {
+      cy.mount(FieldTester, {
+        props: {
+          schema,
+          model: {
+            [fieldKey]: fieldValue,
+          },
+          modifiedModel: {
+            [fieldKey]: updatedValue,
+          },
+        },
+      })
+
+      cy.get('.field-tester-container').should('exist')
+
+      // initial value loaded
+      cy.getTestId(`field-tester-form-model-${fieldKey}-value`).should('be.visible')
+      cy.getTestId(`field-tester-form-model-${fieldKey}-value`).should('contain.text', fieldValue)
+
+      // programmatic update
+      cy.getTestId('tester-update-button').should('be.visible')
+      cy.getTestId('tester-update-button').click()
+
+      // check VFG input value
+      cy.get(`#${fieldKey}`).should('have.value', updatedValue)
+      // check field test form model also matches
+      cy.getTestId(`field-tester-form-model-${fieldKey}-value`).should('contain.text', updatedValue)
+    })
+
+    it('handles schema.selectOptions.hideNoneSelectedText', () => {
+      schema.fields[i].selectOptions = {
+        hideNoneSelectedText: false,
+        noneSelectedText: 'why u no select bro?',
+      }
+
+      cy.mount(FieldTester, {
+        props: {
+          schema,
+        },
+      })
+
+      cy.get('.field-tester-container').should('exist')
+
+      // check VFG falsey label text
+      cy.get(`#${fieldKey}`).should('have.value', '')
+      cy.get(`#${fieldKey}`).should('have.attr', 'placeholder', schema.fields[i].selectOptions!.noneSelectedText)
+    })
+  }
+})
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts
index e03305b7cc..9478a7efa7 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts
@@ -11,6 +11,8 @@ describe('<FieldTester /> - FieldTextArea', () => {
       model: fieldKey,
       id: fieldKey,
       label: fieldLabel,
+      help: 'Describe the personality of the cat.',
+      required: true,
     }],
   }
 
@@ -33,6 +35,19 @@ describe('<FieldTester /> - FieldTextArea', () => {
     // check VFG label is set correctly
     cy.get(`.form-group-label[for="${fieldKey}"]`).should('be.visible')
     cy.get(`.form-group-label[for="${fieldKey}"]`).should('contain.text', fieldLabel)
+
+    // check required state
+    if (schema.fields[0].required) {
+      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('exist')
+    } else {
+      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('not.exist')
+    }
+
+    // check help text
+    if (schema.fields[0].help) {
+      cy.get(`label[for="${fieldKey}"] .info-icon`).should('be.visible')
+      cy.get(`label[for="${fieldKey}"]`).should('contain.text', schema.fields[0].help)
+    }
   })
 
   it('renders default state correctly - with model', () => {
diff --git a/packages/core/forms/src/types/form-fields.ts b/packages/core/forms/src/types/form-fields.ts
index a381645801..09b3a54f32 100644
--- a/packages/core/forms/src/types/form-fields.ts
+++ b/packages/core/forms/src/types/form-fields.ts
@@ -15,6 +15,7 @@ export interface FormFieldSchema extends Record<string, any> {
   help?: string
   hint?: string
   submitWhenNull?: boolean
+  selectOptions?: Record<string, any>
 }
 
 export interface FormSchema {

From 5bc433af47083b43c71b83f6d0b9706836312900 Mon Sep 17 00:00:00 2001
From: tehkai <kai.arrowood@konghq.com>
Date: Tue, 27 Aug 2024 15:51:50 -0400
Subject: [PATCH 02/10] fix(*): test selectors

---
 .../forms/src/components/fields/__tests__/FieldCheckbox.cy.ts | 4 ++--
 .../forms/src/components/fields/__tests__/FieldInput.cy.ts    | 4 ++--
 .../forms/src/components/fields/__tests__/FieldRadio.cy.ts    | 4 ++--
 .../forms/src/components/fields/__tests__/FieldTextArea.cy.ts | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts
index d843855cbb..3e616f2e58 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts
@@ -38,9 +38,9 @@ describe('<FieldTester /> - FieldCheckbox', () => {
 
     // check required state
     if (schema.fields[0].required) {
-      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('exist')
+      cy.get(`.form-group-label.required label[for="${fieldKey}"]`).should('exist')
     } else {
-      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('not.exist')
+      cy.get(`.form-group-label.required label[for="${fieldKey}"]`).should('not.exist')
     }
 
     // check help text
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts
index 17ad24cbfa..5fc52bab72 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts
@@ -39,9 +39,9 @@ describe('<FieldTester /> - FieldInput', () => {
 
     // check required state
     if (schema.fields[0].required) {
-      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('exist')
+      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('exist')
     } else {
-      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('not.exist')
+      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('not.exist')
     }
 
     // check help text
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
index 2e5618fc6f..64d90e0684 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
@@ -47,9 +47,9 @@ describe('<FieldTester /> - FieldRadio', () => {
 
     // check required state
     if (schema.fields[0].required) {
-      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('exist')
+      cy.get(`.form-group-label.required label[for="${fieldKey}"]`).should('exist')
     } else {
-      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('not.exist')
+      cy.get(`.form-group-label.required label[for="${fieldKey}"]`).should('not.exist')
     }
 
     // check help text
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts
index 9478a7efa7..cf779dd145 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts
@@ -38,9 +38,9 @@ describe('<FieldTester /> - FieldTextArea', () => {
 
     // check required state
     if (schema.fields[0].required) {
-      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('exist')
+      cy.get(`.form-group-label.required label[for="${fieldKey}"]`).should('exist')
     } else {
-      cy.get(`.field-select.required label[for="${fieldKey}"]`).should('not.exist')
+      cy.get(`.form-group-label.required label[for="${fieldKey}"]`).should('not.exist')
     }
 
     // check help text

From 522234b9d433cda6586c66da6b38572a9f3f11e3 Mon Sep 17 00:00:00 2001
From: tehkai <kai.arrowood@konghq.com>
Date: Tue, 27 Aug 2024 15:54:01 -0400
Subject: [PATCH 03/10] fix(*): groups

---
 packages/core/forms/src/components/fields/FieldSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/forms/src/components/fields/FieldSelect.vue b/packages/core/forms/src/components/fields/FieldSelect.vue
index bf73bfe7a7..2ddf9b6218 100644
--- a/packages/core/forms/src/components/fields/FieldSelect.vue
+++ b/packages/core/forms/src/components/fields/FieldSelect.vue
@@ -103,7 +103,7 @@ const getItemsFromValues = (values: Record<string, any>[] | string[] | number[])
       label: getItemName(item),
       value: getItemValue(item),
       disabled: typeof item === 'object' ? item.disabled || undefined : undefined,
-      group: typeof item === 'object' ? item.group || undefined : undefined,
+      group: typeof item === 'object' ? String(item.group || '').toUpperCase() || undefined : undefined,
     })
   })
 

From f2cecd0bb84aaf7af8cede7f959931315f4888b7 Mon Sep 17 00:00:00 2001
From: tehkai <kai.arrowood@konghq.com>
Date: Tue, 27 Aug 2024 15:56:09 -0400
Subject: [PATCH 04/10] fix(*): groups

---
 .../forms/src/components/fields/__tests__/FieldSelect.cy.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/forms/src/components/fields/__tests__/FieldSelect.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldSelect.cy.ts
index 30aa5b8c63..1c0c16111c 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldSelect.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldSelect.cy.ts
@@ -187,7 +187,7 @@ describe('<FieldTester /> - FieldSwitch', () => {
       items.forEach((item: Record<string, any> | string | number) => {
         if (typeof item === 'object') {
           if (item.group) {
-            cy.get('.select-group-title').should('contain.text', item.group)
+            cy.get('.select-group-title').should('contain.text', String(item.group || '').toUpperCase())
             cy.get('.select-group').findTestId(`select-item-${item.name.replace(/ /g, '')}`).should('exist')
           } else {
             cy.getTestId(`select-item-${item.name}`).should('exist')

From f7959824d1f99786f61a416de7a40756f7239b31 Mon Sep 17 00:00:00 2001
From: tehkai <kai.arrowood@konghq.com>
Date: Tue, 27 Aug 2024 16:13:23 -0400
Subject: [PATCH 05/10] fix(*): test selectors

---
 .../forms/src/components/fields/__tests__/FieldCheckbox.cy.ts | 4 ++--
 .../forms/src/components/fields/__tests__/FieldRadio.cy.ts    | 4 ++--
 .../forms/src/components/fields/__tests__/FieldTextArea.cy.ts | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts
index 3e616f2e58..77b414ae28 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts
@@ -38,9 +38,9 @@ describe('<FieldTester /> - FieldCheckbox', () => {
 
     // check required state
     if (schema.fields[0].required) {
-      cy.get(`.form-group-label.required label[for="${fieldKey}"]`).should('exist')
+      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('exist')
     } else {
-      cy.get(`.form-group-label.required label[for="${fieldKey}"]`).should('not.exist')
+      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('not.exist')
     }
 
     // check help text
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
index 64d90e0684..31495ab8e3 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
@@ -47,9 +47,9 @@ describe('<FieldTester /> - FieldRadio', () => {
 
     // check required state
     if (schema.fields[0].required) {
-      cy.get(`.form-group-label.required label[for="${fieldKey}"]`).should('exist')
+      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('exist')
     } else {
-      cy.get(`.form-group-label.required label[for="${fieldKey}"]`).should('not.exist')
+      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('not.exist')
     }
 
     // check help text
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts
index cf779dd145..cdcdf3d42f 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts
@@ -38,9 +38,9 @@ describe('<FieldTester /> - FieldTextArea', () => {
 
     // check required state
     if (schema.fields[0].required) {
-      cy.get(`.form-group-label.required label[for="${fieldKey}"]`).should('exist')
+      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('exist')
     } else {
-      cy.get(`.form-group-label.required label[for="${fieldKey}"]`).should('not.exist')
+      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('not.exist')
     }
 
     // check help text

From e466332406dfdee37e5bff8d817ea6f39c63701f Mon Sep 17 00:00:00 2001
From: tehkai <kai.arrowood@konghq.com>
Date: Tue, 27 Aug 2024 16:53:29 -0400
Subject: [PATCH 06/10] fix(*): radio test logic

---
 .../src/components/fields/__tests__/FieldRadio.cy.ts   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
index 31495ab8e3..d78983544f 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
@@ -93,12 +93,12 @@ describe('<FieldTester /> - FieldRadio', () => {
     cy.get('.field-tester-container').should('exist')
 
     // edit the input value, by clicking second radio button
-    cy.get(`#${fieldKey}-1`).should('be.visible')
-    cy.get(`#${fieldKey}-1`).click()
+    cy.get(`#${fieldKey}-2`).should('be.visible')
+    cy.get(`#${fieldKey}-2`).click()
 
     // check VFG input value
     cy.get(`#${fieldKey}-0`).should('not.be.checked')
-    cy.get(`#${fieldKey}-1`).should('be.checked')
+    cy.get(`#${fieldKey}-2`).should('be.checked')
     // check field test form model
     cy.getTestId(`field-tester-form-model-${fieldKey}-value`).should('contain.text', updatedFieldValue)
   })
@@ -129,7 +129,7 @@ describe('<FieldTester /> - FieldRadio', () => {
 
     // check VFG input value
     cy.get(`#${fieldKey}-0`).should('not.be.checked')
-    cy.get(`#${fieldKey}-1`).should('be.checked')
+    cy.get(`#${fieldKey}-2`).should('be.checked')
     // check field test form model also matches
     cy.getTestId(`field-tester-form-model-${fieldKey}-value`).should('contain.text', updatedFieldValue)
   })
@@ -161,7 +161,7 @@ describe('<FieldTester /> - FieldRadio', () => {
 
     // check VFG input value
     cy.get(`#${fieldKey}-0`).should('not.be.checked')
-    cy.get(`#${fieldKey}-1`).should('not.be.checked')
+    cy.get(`#${fieldKey}-2`).should('not.be.checked')
     // check field test form model also matches
     cy.getTestId(`field-tester-form-model-${fieldKey}-value`).should('not.contain.text', fieldValue)
     cy.getTestId(`field-tester-form-model-${fieldKey}-value`).should('not.contain.text', updatedFieldValue)

From fe2b44a0b64052ccc9c1ddf4e8aac92f1cd037fb Mon Sep 17 00:00:00 2001
From: tehkai <kai.arrowood@konghq.com>
Date: Tue, 27 Aug 2024 17:19:34 -0400
Subject: [PATCH 07/10] fix(*): required handling

---
 packages/core/forms/sandbox/model.json             |  5 +----
 .../forms/src/components/fields/FieldRadio.vue     |  2 ++
 .../forms/src/components/fields/FieldSwitch.vue    |  2 ++
 .../components/fields/__tests__/FieldInput.cy.ts   |  4 ++--
 .../components/fields/__tests__/FieldSwitch.cy.ts  | 14 ++++++++++++++
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/core/forms/sandbox/model.json b/packages/core/forms/sandbox/model.json
index fdbaa2c16c..a744412d7b 100644
--- a/packages/core/forms/sandbox/model.json
+++ b/packages/core/forms/sandbox/model.json
@@ -1,10 +1,7 @@
 {
   "service-id": null,
   "name": null,
-  "protocols": [
-    "http",
-    "https"
-  ],
+  "protocols": "http,https",
   "snis": null,
   "hosts": null,
   "sources": null,
diff --git a/packages/core/forms/src/components/fields/FieldRadio.vue b/packages/core/forms/src/components/fields/FieldRadio.vue
index 7afc8baccd..552bab2e01 100644
--- a/packages/core/forms/src/components/fields/FieldRadio.vue
+++ b/packages/core/forms/src/components/fields/FieldRadio.vue
@@ -6,7 +6,9 @@
       :key="option.value"
       v-model="inputValue"
       :label="option.name"
+      :label-attributes="{ info: schema.help }"
       :name="schema.name"
+      :required="schema.required || undefined"
       :selected-value="option.value"
       @change="onChange"
     />
diff --git a/packages/core/forms/src/components/fields/FieldSwitch.vue b/packages/core/forms/src/components/fields/FieldSwitch.vue
index fc45af3200..478eab1ef3 100644
--- a/packages/core/forms/src/components/fields/FieldSwitch.vue
+++ b/packages/core/forms/src/components/fields/FieldSwitch.vue
@@ -7,7 +7,9 @@
       :class="schema.fieldClasses"
       :disabled="disabled || undefined"
       :label="inputValue ? schema.textOn || t('vfg.labels.on') : schema.textOff || t('vfg.labels.off')"
+      :label-attributes="{ info: schema.help }"
       :name="schema.inputName"
+      :required="schema.required || undefined"
     />
   </div>
 </template>
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts
index 5fc52bab72..c2fc614434 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts
@@ -39,9 +39,9 @@ describe('<FieldTester /> - FieldInput', () => {
 
     // check required state
     if (schema.fields[0].required) {
-      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('exist')
+      cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('exist')
     } else {
-      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('not.exist')
+      cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('not.exist')
     }
 
     // check help text
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts
index 2c390a9e3b..56e6460b14 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts
@@ -12,6 +12,7 @@ describe('<FieldTester /> - FieldSwitch', () => {
       id: fieldKey,
       inputType: 'text',
       label: fieldLabel,
+      required: true,
     }],
   }
 
@@ -34,6 +35,19 @@ describe('<FieldTester /> - FieldSwitch', () => {
     // check VFG label is set correctly
     cy.get(`.form-group-label[for="${fieldKey}"]`).should('be.visible')
     cy.get(`.form-group-label[for="${fieldKey}"]`).should('contain.text', fieldLabel)
+
+    // check required state
+    if (schema.fields[0].required) {
+      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('exist')
+    } else {
+      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('not.exist')
+    }
+
+    // check help text
+    if (schema.fields[0].help) {
+      cy.get(`label[for="${fieldKey}"] .info-icon`).should('be.visible')
+      cy.get(`label[for="${fieldKey}"]`).should('contain.text', schema.fields[0].help)
+    }
   })
 
   it('renders default state correctly - with model', () => {

From 9bd6e65d3e410bb6de0e8dfe43070ff2f6c83423 Mon Sep 17 00:00:00 2001
From: tehkai <kai.arrowood@konghq.com>
Date: Tue, 27 Aug 2024 17:30:30 -0400
Subject: [PATCH 08/10] fix(*): test selectors

---
 .../forms/src/components/fields/__tests__/FieldCheckbox.cy.ts | 4 ++--
 .../forms/src/components/fields/__tests__/FieldRadio.cy.ts    | 4 ++--
 .../forms/src/components/fields/__tests__/FieldSwitch.cy.ts   | 4 ++--
 .../forms/src/components/fields/__tests__/FieldTextArea.cy.ts | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts
index 77b414ae28..22dabea83b 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldCheckbox.cy.ts
@@ -38,9 +38,9 @@ describe('<FieldTester /> - FieldCheckbox', () => {
 
     // check required state
     if (schema.fields[0].required) {
-      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('exist')
+      cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('exist')
     } else {
-      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('not.exist')
+      cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('not.exist')
     }
 
     // check help text
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
index d78983544f..fc94a34cbe 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldRadio.cy.ts
@@ -47,9 +47,9 @@ describe('<FieldTester /> - FieldRadio', () => {
 
     // check required state
     if (schema.fields[0].required) {
-      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('exist')
+      cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('exist')
     } else {
-      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('not.exist')
+      cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('not.exist')
     }
 
     // check help text
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts
index 56e6460b14..8ca4a997ed 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts
@@ -38,9 +38,9 @@ describe('<FieldTester /> - FieldSwitch', () => {
 
     // check required state
     if (schema.fields[0].required) {
-      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('exist')
+      cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('exist')
     } else {
-      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('not.exist')
+      cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('not.exist')
     }
 
     // check help text
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts
index cdcdf3d42f..9ca6a99f22 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldTextArea.cy.ts
@@ -38,9 +38,9 @@ describe('<FieldTester /> - FieldTextArea', () => {
 
     // check required state
     if (schema.fields[0].required) {
-      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('exist')
+      cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('exist')
     } else {
-      cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('not.exist')
+      cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('not.exist')
     }
 
     // check help text

From b465ed0e405983ab1d0e0d9ce1a36e5e678ed500 Mon Sep 17 00:00:00 2001
From: tehkai <kai.arrowood@konghq.com>
Date: Thu, 19 Sep 2024 12:42:32 -0400
Subject: [PATCH 09/10] fix(*): data-testid for items

---
 packages/core/forms/src/components/fields/FieldSelect.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/core/forms/src/components/fields/FieldSelect.vue b/packages/core/forms/src/components/fields/FieldSelect.vue
index 2ddf9b6218..1f372f642e 100644
--- a/packages/core/forms/src/components/fields/FieldSelect.vue
+++ b/packages/core/forms/src/components/fields/FieldSelect.vue
@@ -5,6 +5,7 @@
     :class="schema.fieldClasses"
     :disabled="disabled || undefined"
     :items="items"
+    :kpop-attributes="{ 'data-testid': `${getFieldID(schema)}-items` }"
     :label-attributes="{ info: schema.help }"
     :name="schema.inputName"
     :placeholder="!selectOptions.hideNoneSelectedText ? selectOptions.noneSelectedText || 'Nothing Selected' : undefined"

From 736b0587907630a7786f5a641129a5c1a46fd249 Mon Sep 17 00:00:00 2001
From: tehkai <kai.arrowood@konghq.com>
Date: Mon, 23 Sep 2024 09:15:38 -0400
Subject: [PATCH 10/10] fix(*): clearable if not required

---
 packages/core/forms/src/components/fields/FieldSelect.vue       | 1 +
 .../forms/src/components/fields/__tests__/FieldSelect.cy.ts     | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/core/forms/src/components/fields/FieldSelect.vue b/packages/core/forms/src/components/fields/FieldSelect.vue
index 1f372f642e..70c9d0f2b2 100644
--- a/packages/core/forms/src/components/fields/FieldSelect.vue
+++ b/packages/core/forms/src/components/fields/FieldSelect.vue
@@ -3,6 +3,7 @@
     :id="getFieldID(schema)"
     v-model="inputValue"
     :class="schema.fieldClasses"
+    :clearable="!schema.required"
     :disabled="disabled || undefined"
     :items="items"
     :kpop-attributes="{ 'data-testid': `${getFieldID(schema)}-items` }"
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldSelect.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldSelect.cy.ts
index 1c0c16111c..6284c3e8cd 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldSelect.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldSelect.cy.ts
@@ -1,7 +1,7 @@
 import type { FormSchema } from '../../../types'
 import FieldTester from '../../../../sandbox/FieldTester.vue'
 
-describe('<FieldTester /> - FieldSwitch', () => {
+describe('<FieldTester /> - FieldSelect', () => {
   const fieldKeys = ['https_redirect_status_code', 'protocols']
   const fieldLabels = ['HTTPS Redirect Status Code', 'Protocols']
   const fieldValues = [307, 'http, https']