feat: custom fields with state management

frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx

@@ -4,6 +4,8 @@ import type { ActionsType } from '@/types'
 
 interface ActionCustomFieldsProps {
   actionType?: ActionsType
+  value: any
+  setValue: (value: any) => void
 }
 
 const FieldWrapper = styled.div`
@@ -15,37 +17,37 @@ const FieldTitle = styled(Text)`
   margin-bottom: 12px;
 `
 
-const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType }) => {
+const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
   switch (actionType) {
     case 'AddClusterInfo':
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to add</FieldTitle>
-          <KeyValueInputsList required value={[]} onChange={(arr) => console.log(arr)} />
+          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
       )
 
     case 'DeleteAttribute':
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to delete</FieldTitle>
-          <InputList required value={[]} onChange={(arr) => console.log(arr)} />
+          <InputList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
       )
 
     case 'RenameAttribute':
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to rename</FieldTitle>
-          <KeyValueInputsList required value={[]} onChange={(arr) => console.log(arr)} />
+          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
       )
 
     case 'PiiMasking':
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to mask</FieldTitle>
-          <InputList required value={[]} onChange={(arr) => console.log(arr)} />
+          <InputList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
       )
 

frontend/webapp/containers/main/actions/choose-action-body/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect, useMemo } from 'react'
 import styled from 'styled-components'
 import { CheckboxList, DocsButton, Input, Text, TextArea } from '@/reuseable-components'
 import { MONITORING_OPTIONS } from '@/components/setup/destination/utils'
@@ -26,7 +26,13 @@ interface ChooseActionContentProps {
 }
 
 const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
-  const { actionName, setActionName, actionNotes, setActionNotes, exportedSignals, setExportedSignals } = useActionFormData()
+  const { formData, handleFormChange, resetFormData, exportedSignals, setExportedSignals } = useActionFormData()
+
+  useEffect(() => {
+    return () => {
+      resetFormData()
+    }
+  }, [])
 
   return (
     <Fragment>
@@ -49,14 +55,22 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
 
       <FieldWrapper>
         <FieldTitle>Action name</FieldTitle>
-        <Input placeholder='Use a name that describes the action' value={actionName} onChange={({ target: { value } }) => setActionName(value)} />
+        <Input
+          placeholder='Use a name that describes the action'
+          value={formData.name}
+          onChange={({ target: { value } }) => handleFormChange('name', value)}
+        />
       </FieldWrapper>
 
-      <ActionCustomFields actionType={action.type} />
+      <ActionCustomFields
+        actionType={action.type}
+        value={formData.details ? JSON.parse(formData.details) : undefined}
+        setValue={(val) => handleFormChange('details', JSON.stringify(val))}
+      />
 
       <FieldWrapper>
         <FieldTitle>Notes</FieldTitle>
-        <TextArea value={actionNotes} onChange={({ target: { value } }) => setActionNotes(value)} />
+        <TextArea value={formData.notes} onChange={({ target: { value } }) => handleFormChange('notes', value)} />
       </FieldWrapper>
     </Fragment>
   )

frontend/webapp/hooks/actions/useActionFormData.ts

@@ -1,21 +1,65 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+
+type Signal = 'TRACES' | 'METRICS' | 'LOGS'
+type FormData = {
+  type: string
+  name: string
+  notes: string
+  disable: boolean
+  signals: Signal[]
+  details: string
+}
+
+const INITIAL: FormData = {
+  type: '',
+  name: '',
+  notes: '',
+  disable: true,
+  signals: [],
+  details: '',
+}
 
 export function useActionFormData() {
-  const [actionName, setActionName] = useState('')
-  const [actionNotes, setActionNotes] = useState('')
+  const [formData, setFormData] = useState({ ...INITIAL })
   const [exportedSignals, setExportedSignals] = useState({
     logs: false,
     metrics: false,
     traces: false,
   })
 
+  const resetFormData = () => {
+    setFormData({ ...INITIAL })
+  }
+
+  const handleFormChange = (key: keyof typeof INITIAL, val: any) => {
+    setFormData((prev) => {
+      const prevVal = prev[key]
+
+      if (Array.isArray(prevVal)) {
+      }
+
+      return {
+        ...prev,
+        [key]: val,
+      }
+    })
+  }
+
+  useEffect(() => {
+    const signals: (typeof INITIAL)['signals'] = []
+
+    Object.entries(exportedSignals).forEach(([k, v]) => {
+      if (v) signals.push(k.toUpperCase() as Signal)
+    })
+
+    handleFormChange('signals', signals)
+  }, [exportedSignals])
+
   return {
-    actionName,
-    setActionName,
-    actionNotes,
-    setActionNotes,
+    formData,
+    handleFormChange,
+    resetFormData,
     exportedSignals,
     setExportedSignals,
-    // resetFormData,
   }
 }