fix(entities-plugins): freeform - default card appearance for record array

Author: 2eha0

packages/entities/entities-plugins/fixtures/schemas/free-form-mocking.ts

@@ -216,20 +216,18 @@ export function buildEnumFieldCases(): Array<{ [name: string]: StringFieldSchema
         default: 'option2',
       },
     },
-    // fixme: this has a bug in number options
-    // {
-    //   enum_number: {
-    //     type: 'number',
-    //     one_of: [1, 2, 3],
-    //   },
-    // },
-    // fixme: this has a bug in boolean options
-    // {
-    //   enum_boolean: {
-    //     type: 'boolean',
-    //     one_of: [true, false],
-    //   },
-    // },
+    {
+      enum_number: {
+        type: 'number',
+        one_of: [1, 2, 3],
+      },
+    },
+    {
+      enum_boolean: {
+        type: 'boolean',
+        one_of: [true, false],
+      },
+    },
   ]
 }
 
@@ -278,23 +276,22 @@ export function buildArrayFieldCases(): Array<{ [name: string]: ArrayLikeFieldSc
         default: [0],
       },
     },
-    // fixme: should support `resetLabelPath` in tests
-    // {
-    //   array_of_records: {
-    //     type: 'array',
-    //     elements: {
-    //       type: 'record',
-    //       fields: [
-    //         {
-    //           foo: {
-    //             type: 'string',
-    //           },
-    //         },
-    //       ],
-    //     },
-    //     description: 'An array of records',
-    //   },
-    // },
+    {
+      array_of_records: {
+        type: 'array',
+        elements: {
+          type: 'record',
+          fields: [
+            {
+              foo: {
+                type: 'string',
+              },
+            },
+          ],
+        },
+        description: 'An array of records',
+      },
+    },
     {
       array_of_array: {
         type: 'array',

packages/entities/entities-plugins/src/components/free-form/RequestCallout/ConfigForm.vue

@@ -22,18 +22,6 @@
           :placeholder="t('plugins.free-form.request-callout.by_lua_placeholder')"
         />
       </FieldRenderer>
-
-      <!-- Set appearance to `cluster_nodes` and `sentinel_nodes` -->
-      <FieldRenderer
-        v-slot="props"
-        :match="({ path }) => ['cluster_nodes', 'sentinel_nodes']
-          .some(n => path.endsWith(n))"
-      >
-        <ArrayField
-          v-bind="props"
-          appearance="card"
-        />
-      </FieldRenderer>
     </template>
 
     <ObjectField
@@ -44,15 +32,11 @@
       <CalloutsForm />
 
       <ObjectField
-        appearance="card"
         :fields-order="['headers', 'query', 'body', 'by_lua']"
         name="upstream"
       />
 
-      <ObjectField
-        appearance="card"
-        name="cache"
-      >
+      <ObjectField name="cache">
         <template #[`redis`]="props">
           <ObjectField
             v-bind="props"
@@ -75,7 +59,6 @@
 import { cloneDeep } from 'lodash-es'
 import { FIELD_RENDERERS } from '../shared/composables'
 import { getCalloutId } from './utils'
-import ArrayField from '../shared/ArrayField.vue'
 import CalloutsForm from './CalloutsForm.vue'
 import FieldRenderer from '../shared/FieldRenderer.vue'
 import Form from '../shared/Form.vue'

packages/entities/entities-plugins/src/components/free-form/shared/ArrayField.vue

@@ -198,7 +198,14 @@ const realItems = computed(() => props.items ?? toValue(fieldValue) ?? [])
 
 const { getKey } = useItemKeys('ff-array-field', realItems)
 
-const ListTag = computed(() => props.appearance === 'card' ? KCard : 'div')
+const isRecordArray = computed(() => subSchema.value.type === 'record')
+const appearance = computed(() => {
+  if (props.appearance) return props.appearance
+  if (isRecordArray.value) return 'card'
+  return 'default'
+})
+
+const ListTag = computed(() => appearance.value === 'card' ? KCard : 'div')
 
 function getTabTitle(item: T, index: number) {
   return typeof props.itemLabel === 'function'
@@ -227,7 +234,7 @@ const addItem = async () => {
   fieldValue!.value.push(defaultItemValue)
   emit('add')
 
-  if (props.appearance === 'tabs') {
+  if (appearance.value === 'tabs') {
     await nextTick()
     activeTab.value = tabs.value[tabs.value.length - 1]?.hash
   }
@@ -242,7 +249,7 @@ const removeItem = async (index: number) => {
   }
   emit('remove', index)
 
-  if (props.appearance === 'tabs') {
+  if (appearance.value === 'tabs') {
     activeTab.value = tabs.value[Math.max(0, index - 1)]?.hash
   }
 }
@@ -261,8 +268,8 @@ function focus(index: number) {
 }
 
 const stickyTop = computed(() => {
-  const { appearance, stickyTabs } = props
-  if (appearance !== 'tabs' || stickyTabs == null || stickyTabs === false) {
+  const { stickyTabs } = props
+  if (appearance.value !== 'tabs' || stickyTabs == null || stickyTabs === false) {
     return null
   }
 

packages/entities/entities-plugins/src/components/free-form/shared/ObjectField.vue

@@ -10,7 +10,8 @@
 
   <!-- only render children, no wrapper -->
   <template v-else-if="asChild">
-    <div
+    <component
+      :is="wrapper"
       class="ff-object-field ff-object-field-as-child"
       v-bind="$attrs"
       :data-testid="`ff-object-${field.path.value}`"
@@ -22,11 +23,12 @@
           :name="Object.keys(cfield)[0]"
         />
       </slot>
-    </div>
+    </component>
   </template>
 
   <!-- render children with wrapper -->
-  <div
+  <component
+    :is="wrapper"
     v-else
     class="ff-object-field"
     :class="{ 'ff-object-field-collapsed': !realExpanded }"
@@ -99,7 +101,7 @@
         </slot>
       </div>
     </SlideTransition>
-  </div>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -120,7 +122,7 @@ defineOptions({
 const {
   defaultExpanded = true, defaultAdded = true, collapsible = true, omit,
   required = undefined, asChild: defaultAsChild = undefined, resetLabelPath,
-  fieldsOrder,
+  fieldsOrder, appearance,
   ...props
 } = defineProps<{
   name: string
@@ -164,6 +166,10 @@ const realResetLabelPath = computed(() => {
 
 const fieldAttrs = useFieldAttrs(field.path!, toRef(() => ({ required, ...props, resetLabelPath: realResetLabelPath.value })))
 const realAdded = computed(() => !fieldAttrs.value.required ? added.value ?? defaultAdded : true)
+const wrapper = computed(() => {
+  if (appearance === 'card') return 'KCard'
+  return 'div'
+})
 
 const asChild = computed(() => {
   if (defaultAsChild !== undefined) return defaultAsChild

packages/entities/entities-plugins/src/components/free-form/test/utils.ts

@@ -1,4 +1,4 @@
-import { isTagField, resolve } from '../shared/utils'
+import { getName, isTagField, resolve } from '../shared/utils'
 import { buildAncestor, buildSchemaMap, defaultLabelFormatter, generalizePath } from '../shared/composables'
 
 import type {
@@ -26,6 +26,7 @@ type AssertFieldFn<T extends UnionFieldSchema = UnionFieldSchema> = (option: Ass
 type AssertLabelOption = {
   hide?: boolean
   noAsterisk?: boolean
+  forcePrefix?: string
 }
 
 export function assertFormRendering(schema: FormSchema, options?: {
@@ -37,7 +38,7 @@ export function assertFormRendering(schema: FormSchema, options?: {
 
   const schemaMap = buildSchemaMap(schema)
 
-  function assertFields(fields: NamedFieldSchema[], prefix?: string) {
+  function assertFields(fields: NamedFieldSchema[], prefix?: string, labelOption?: AssertLabelOption) {
     for (const field of fields) {
       const fieldName = Object.keys(field)[0]
       const fieldKey = prefix ? resolve(prefix, fieldName) : fieldName
@@ -46,7 +47,7 @@ export function assertFormRendering(schema: FormSchema, options?: {
 
       assert(fieldSchema, `Field schema for "${fieldKey}" should exist in the schema map`)
 
-      assertField({ fieldSchema, fieldKey })
+      assertField({ fieldSchema, fieldKey, labelOption })
     }
   }
 
@@ -62,7 +63,11 @@ export function assertFormRendering(schema: FormSchema, options?: {
         assertStringField({ fieldKey, fieldSchema, labelOption })
       }
     } else if (fieldSchema.type === 'boolean') {
-      assertBooleanField({ fieldKey, fieldSchema, labelOption })
+      if (fieldSchema.one_of) {
+        assertEnumField({ fieldKey, fieldSchema, labelOption })
+      } else {
+        assertBooleanField({ fieldKey, fieldSchema, labelOption })
+      }
     } else if (fieldSchema.type === 'record') {
       assertRecordField({ fieldKey, fieldSchema, labelOption })
     } else if (fieldSchema.type === 'integer' || fieldSchema.type === 'number') {
@@ -220,15 +225,15 @@ export function assertFormRendering(schema: FormSchema, options?: {
     fieldSchema,
     labelOption,
   }: AssertFieldOption<RecordFieldSchema>) => {
-    const asChild = isArrayItem(fieldKey)
+    const isChildOfArray = isArrayItem(fieldKey)
+    const asChild = isChildOfArray
 
     // Wrapper element should exist
     cy.getTestId(`ff-object-${fieldKey}`).should('exist')
 
     // Check label
     assertLabel({
       fieldKey,
-      labelText: asChild ? '' : defaultLabelFormatter(fieldKey),
       fieldSchema,
       labelOption: {
         ...labelOption,
@@ -259,7 +264,7 @@ export function assertFormRendering(schema: FormSchema, options?: {
 
     // Assert child fields
     if (fieldSchema.fields && fieldSchema.fields.length > 0) {
-      assertFields(fieldSchema.fields, fieldKey)
+      assertFields(fieldSchema.fields, fieldKey, { forcePrefix: isChildOfArray ? '' : undefined })
     }
 
     // Click the 'fold/unfold' button
@@ -426,9 +431,11 @@ export function assertFormRendering(schema: FormSchema, options?: {
     fieldSchema: UnionFieldSchema
     labelOption?: AssertLabelOption
   }) {
+    const formattedLabelText = labelText || formatLabelText(fieldKey, labelOption)
+
     assertLabelBySelector({
       selector: () => cy.getTestId(`ff-label-${fieldKey}`),
-      labelText: labelText || defaultLabelFormatter(fieldKey),
+      labelText: formattedLabelText,
       fieldSchema,
       labelOption,
     })
@@ -493,3 +500,17 @@ function isStringArrayOfArray(fieldSchema: UnionFieldSchema) {
     && fieldSchema.elements.type === 'array'
     && fieldSchema.elements.elements.type === 'string'
 }
+
+function formatLabelText(fieldKey: string, labelOption?: AssertLabelOption): string {
+  let actualLabelText: string
+
+  if (labelOption?.forcePrefix !== undefined) {
+    const name = getName(fieldKey)
+    const newFieldKey = resolve(labelOption.forcePrefix, name)
+    actualLabelText = defaultLabelFormatter(newFieldKey)
+  } else {
+    actualLabelText = defaultLabelFormatter(fieldKey)
+  }
+
+  return actualLabelText
+}