fix(*): required handling

Kong · Sep 20, 2024 · 396b8f3 · 396b8f3
1 parent 36a3969
commit 396b8f3
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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', () => {