refactor(entities-plugins): free form store

packages/entities/entities-plugins/src/components/free-form/Datakit/CodeEditor.vue

@@ -38,11 +38,11 @@ import * as examples from './examples'
 
 import type { YAMLException } from 'js-yaml'
 import type { DatakitConfig, DatakitPluginData } from './types'
-import { useFormShared } from '../shared/composables'
+import { useFreeformStore } from '../shared/composables'
 
 const { t } = createI18n<typeof english>('en-us', english)
 
-const { formData } = useFormShared<DatakitPluginData>()
+const { formData, setFormData } = useFreeformStore<DatakitPluginData>()
 
 defineProps<{
   editing: boolean
@@ -137,7 +137,7 @@ onMounted(() => {
       })
 
       monaco.editor.setModelMarkers(model!, LINT_SOURCE, [])
-      formData.config = config as DatakitConfig
+      setFormData({ ...formData, config: config as DatakitConfig })
       emit('change', config)
     } catch (error: unknown) {
       const { message, mark } = error as YAMLException

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/FlowEditor.vue

@@ -29,7 +29,7 @@ import { ExpandIcon } from '@kong/icons'
 import { watch } from 'vue'
 
 import english from '../../../../locales/en.json'
-import { useFormShared } from '../../shared/composables'
+import { useFreeformStore } from '../../shared/composables'
 import { provideEditorStore } from '../composables'
 import FlowPanels from './FlowPanels.vue'
 import EditorModal from './modal/EditorModal.vue'
@@ -38,7 +38,7 @@ import type { ConfigNode, DatakitConfig, DatakitPluginData, DatakitUIData, UINod
 
 const { t } = createI18n<typeof english>('en-us', english)
 
-const { formData } = useFormShared<DatakitPluginData>()
+const { formData, setFormData } = useFreeformStore<DatakitPluginData>()
 
 const { isEditing } = defineProps<{
   isEditing?: boolean
@@ -53,12 +53,15 @@ function onChange(configNodes: ConfigNode[], uiNodes: UINode[], resources: Datak
   const nextConfig = { ...formData.config, nodes: configNodes }
   if (resources !== undefined) nextConfig.resources = resources
   const nextUIData = { ...formData.__ui_data, nodes: uiNodes }
-  formData.config = nextConfig
-  formData.__ui_data = nextUIData
-  emit('change', nextConfig, nextUIData)
+  setFormData({
+    ...formData,
+    config: nextConfig,
+    __ui_data: nextUIData,
+  })
+  emit('change', nextConfig as DatakitConfig, nextUIData)
 }
 
-const { modalOpen, setPendingFitView } = provideEditorStore(formData, {
+const { modalOpen, setPendingFitView } = provideEditorStore(formData as DatakitPluginData, {
   onChange,
   isEditing,
 })

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/composables/useNodeForm.ts

@@ -4,7 +4,7 @@ import { buildAdjacency, hasCycle } from '../store/validation'
 import type { EdgeInstance, FieldName, IdConnection, NameConnection, NodeId, NodeName, NodeType } from '../../types'
 import { findFieldById, findFieldByName, getNodeMeta, parseIdConnection } from '../store/helpers'
 import { isReadableProperty } from '../node/property'
-import { useFormShared } from '../../../shared/composables'
+import { useFreeformStore } from '../../../shared/composables'
 import type { ArrayLikeFieldSchema, RecordFieldSchema } from '../../../../../types/plugins/form-schema'
 import { isImplicitType } from '../node/node'
 import { ResponseSchema, ServiceRequestSchema } from '../node/schemas'
@@ -413,7 +413,7 @@ export function useNodeForm<T extends BaseFormData = BaseFormData>(
 }
 
 export function useSubSchema(subSchemaName: Exclude<NodeType, 'request' | 'service_response'>) {
-  const { getSchema } = useFormShared()
+  const { getSchema } = useFreeformStore()
   return computed(() => {
 
     // Implicit nodes do not have schema, we hardcoded schemas for them

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/InputsField.vue

@@ -47,7 +47,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { KLabel } from '@kong/kongponents'
-import { useFormShared } from '../../../shared/composables'
+import { useFreeformStore } from '../../../shared/composables'
 import EnumField from '../../../shared/EnumField.vue'
 import InputsRecordField from './InputsRecordField.vue'
 import InputsMapField from './InputsMapField.vue'
@@ -69,7 +69,7 @@ const emit = defineEmits<{
   'rename:field': [oldName: FieldName, newName: FieldName]
 }>()
 
-const { getSchema } = useFormShared()
+const { getSchema } = useFreeformStore()
 const { i18n: { t } } = useI18n()
 
 const inputsSchema = computed(() => getSchema('inputs'))

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/InputsRecordField.vue

@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useFormShared } from '../../../shared/composables'
+import { useFreeformStore } from '../../../shared/composables'
 import ObjectField from '../../../shared/ObjectField.vue'
 import type { RecordFieldSchema } from '../../../../../types/plugins/form-schema'
 import EnumField from '../../../shared/EnumField.vue'
@@ -36,7 +36,7 @@ defineEmits<{
   'change:inputs': [fieldName: FieldName, fieldValue: IdConnection | null]
 }>()
 
-const { getSchema } = useFormShared()
+const { getSchema } = useFreeformStore()
 const { i18n } = useI18n()
 
 const childFieldNames = computed(() => {

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/PropertiesField.vue

@@ -58,7 +58,7 @@
 <script setup lang="ts">
 import type { SelectItem } from '@kong/kongponents'
 import useI18n from '../../../../../composables/useI18n'
-import { useFormShared } from '../../../shared/composables'
+import { useFreeformStore } from '../../../shared/composables'
 import { computed, ref, watch } from 'vue'
 import {
   extractKeyFromProperty,
@@ -84,7 +84,7 @@ const emit = defineEmits<{
   (e: 'update:property-key', value: string): void
 }>()
 
-const { formData } = useFormShared<{ property: string | null }>()
+const { formData, setFormData } = useFreeformStore<{ property: string | null }>()
 
 const lastPropertyValueWithoutKey = ref<string | null>(getPropertyWithoutKey(formData.property))
 
@@ -117,9 +117,10 @@ function handleKeyChange(value: string | undefined) {
 
   if (!prefix) return
 
-  formData.property = prefix + value
-  props.validators.key.handleChange(formData.property)
-  emit('update:property-key', formData.property)
+  const newProperty = prefix + value
+  setFormData({ ...formData, property: newProperty })
+  props.validators.key.handleChange(newProperty)
+  emit('update:property-key', newProperty)
 }
 
 function handleSelectChange(item: SelectItem<string> | null) {
@@ -128,7 +129,7 @@ function handleSelectChange(item: SelectItem<string> | null) {
   if (lastPropertyValueWithoutKey.value === getPropertyWithoutKey(item?.value)) {
     return
   }
-  formData.property = item?.value || null
+  setFormData({ ...formData, property: item?.value || null })
   lastPropertyValueWithoutKey.value = getPropertyWithoutKey(formData.property)
   props.validators.property.handleBlur(() => formData.property)
   emit('update:model-value', formData.property)

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

@@ -39,7 +39,7 @@
 import { computed, watch } from 'vue'
 
 import { toSelectItems } from '../shared/utils'
-import { useFormShared } from '../shared/composables'
+import { useFreeformStore } from '../shared/composables'
 import EnumField from '../shared/EnumField.vue'
 import ObjectField from '../shared/ObjectField.vue'
 
@@ -51,7 +51,7 @@ const props = defineProps<{
   fieldName: string
 }>()
 
-const { formData } = useFormShared<RequestCalloutPlugin>()
+const { formData, setFormData } = useFreeformStore<RequestCalloutPlugin>()
 
 const dependableCallouts = computed(() => {
   const { callouts } = formData.config!
@@ -67,14 +67,23 @@ const dependsOnItems = computed<SelectItem[]>(() => {
   return dependableCallouts.value.map(({ [CalloutId]: id, name }) => ({ value: id as string, label: name }))
 })
 
-const callout = computed(() => formData.config!.callouts[props.index])
-
 // remove depends_on values that are not in the dependsOnItems
-// try to mutate the array instead of replacing it
 watch(dependsOnItems, () => {
-  callout.value.depends_on = callout.value.depends_on.filter((name) =>
-    dependsOnItems.value.some((item) => item.value === name),
-  )
+  setFormData({
+    ...formData,
+    config: {
+      ...formData.config,
+      callouts: formData.config!.callouts.map((c, i) => {
+        if (i !== props.index) return c
+        return {
+          ...c,
+          depends_on: c.depends_on?.filter((name) =>
+            dependsOnItems.value.some((item) => item.value === name),
+          ),
+        }
+      }),
+    },
+  })
 })
 
 </script>

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

@@ -18,19 +18,25 @@
 
 <script setup lang="ts">
 import { getCalloutId } from './utils'
-import { useFormShared } from '../shared/composables'
+import { useFreeformStore } from '../shared/composables'
 import ArrayField from '../shared/ArrayField.vue'
 import CalloutForm from './CalloutForm.vue'
 
 import { type RequestCalloutPlugin, type Callout, CalloutId } from './types'
 
-const { formData } = useFormShared<RequestCalloutPlugin>()
+const { formData, setFormData } = useFreeformStore<RequestCalloutPlugin>()
 
 function addCallout() {
   const latest = formData.config!.callouts[formData.config!.callouts.length - 1]
 
   if (latest) {
-    latest[CalloutId] = getCalloutId()
+    setFormData({
+      ...formData,
+      config: {
+        ...formData.config,
+        callouts: [...formData.config!.callouts, { ...latest, [CalloutId]: getCalloutId() }],
+      },
+    })
   }
 }
 </script>

packages/entities/entities-plugins/src/components/free-form/ServiceProtection/RedisField.vue

@@ -11,12 +11,12 @@
 import { watchEffect } from 'vue'
 
 import RedisSelector from '../shared/RedisSelector.vue'
-import { useFormShared } from '../shared/composables'
+import { useFreeformStore } from '../shared/composables'
 import SlideTransition from '../shared/SlideTransition.vue'
 import type { FreeFormPluginData } from '../../../types/plugins/free-form'
 import type { GlobalAction } from '../shared/types'
 
-const { formData } = useFormShared<FreeFormPluginData>()
+const { formData, setFormData } = useFreeformStore<FreeFormPluginData>()
 
 defineEmits<{
   globalAction: [name: GlobalAction, payload: any]
@@ -26,7 +26,10 @@ watchEffect(() => {
   if (formData.config) {
     // reset partials if strategy not redis
     if (formData.config.strategy !== 'redis') {
-      formData.partials = undefined
+      setFormData({
+        ...formData,
+        partials: undefined,
+      })
     }
   }
 })

packages/entities/entities-plugins/src/components/free-form/ServiceProtection/RequestLimitsForm.vue

@@ -108,7 +108,7 @@ import { get } from 'lodash-es'
 import { createI18n } from '@kong-ui-public/i18n'
 import english from '../../../locales/en.json'
 import { computed, nextTick, ref } from 'vue'
-import { useFormShared, useItemKeys } from '../shared/composables'
+import { useFreeformStore, useItemKeys } from '../shared/composables'
 import RadioField from '../shared/RadioField.vue'
 import NumberField from '../shared/NumberField.vue'
 
@@ -138,7 +138,7 @@ interface UseCase {
   }
 }
 
-const { formData, getSelectItems, getSchema } = useFormShared<FormData>()
+const { formData, setFormData, getSelectItems, getSchema } = useFreeformStore<FormData>()
 
 const requestLimits = computed<RequestLimit[]>(() => {
   const modelValue = formData.config?.limit?.map((limit, index) => {
@@ -160,20 +160,38 @@ const { getKey } = useItemKeys('request-limits', requestLimits)
 const addRequestLimit = (index: number) => {
   selectedUseCase.value = undefined
   if (!formData.config) return
-  if (!formData.config.limit?.length) {
-    formData.config.limit = [null]
-  }
-  if (!formData.config.window_size?.length) {
-    formData.config.window_size = [null]
-  }
-  formData.config.limit.splice(index + 1, 0, null)
-  formData.config.window_size.splice(index + 1, 0, null)
+  setFormData(() => {
+    const newLimit = formData.config!.limit
+      ? [...formData.config!.limit]
+      : []
+    newLimit.splice(index + 1, 0, null)
+
+    const newWindowSize = formData.config!.window_size
+      ? [...formData.config!.window_size]
+      : []
+    newWindowSize.splice(index + 1, 0, null)
+
+    return {
+      ...formData,
+      config: {
+        ...formData.config,
+        limit: newLimit,
+        window_size: newWindowSize,
+      },
+    }
+  })
 }
 
 const removeRequestLimit = (index: number) => {
   if (!formData.config) return
-  formData.config.limit!.splice(index, 1)
-  formData.config.window_size!.splice(index, 1)
+  setFormData({
+    ...formData,
+    config: {
+      ...formData.config,
+      limit: formData.config.limit!.filter((_, i) => i !== index),
+      window_size: formData.config.window_size!.filter((_, i) => i !== index),
+    },
+  })
 }
 
 const windowTypePath = 'config.window_type'
@@ -258,15 +276,27 @@ const toggleUseCase = (useCase: UseCase, useCaseKey: string) => {
     nextTick(() => {
       selectedUseCase.value = undefined
     })
-    formData.config!.limit = []
-    formData.config!.window_size = []
+    setFormData({
+      ...formData,
+      config: {
+        ...formData.config,
+        limit: [],
+        window_size: [],
+      },
+    })
     return
   }
   nextTick(() => {
     selectedUseCase.value = useCaseKey
   })
-  formData.config!.limit = [useCase.config.limit]
-  formData.config!.window_size = [useCase.config.window_size]
+  setFormData({
+    ...formData,
+    config: {
+      ...formData.config,
+      limit: formData.config!.limit,
+      window_size: formData.config!.window_size,
+    },
+  })
 }
 </script>
 

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

@@ -30,12 +30,12 @@ import { ref } from 'vue'
 import { createI18n } from '@kong-ui-public/i18n'
 import { KCollapse } from '@kong/kongponents'
 import english from '../../../locales/en.json'
-import { useFormShared } from './composables'
+import { useFreeformStore } from './composables'
 import StringArrayField from './StringArrayField.vue'
 
 const { t } = createI18n<typeof english>('en-us', english)
 
-const { getSchema } = useFormShared()
+const { getSchema } = useFreeformStore()
 
 const advancedCollapsed = ref(true)
 </script>