action configuration conversion

Author: ButteryCrumpet

src/cloud/components/Automations/EventInfo.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
+import { BoostType } from '../../lib/automations'
 
 interface EventSelectProps {
   name: string
-  typeDef: JsonTypeDef
+  typeDef: BoostType
 }
 
 const EventInfo = ({ typeDef }: EventSelectProps) => {

src/cloud/components/Automations/FilterBuilder.tsx

@@ -10,11 +10,11 @@ import FormSelect, {
 import FormRow from '../../../design/components/molecules/Form/templates/FormRow'
 import FormRowItem from '../../../design/components/molecules/Form/templates/FormRowItem'
 import { SerializedPipe } from '../../interfaces/db/automations'
-import { JsonTypeDef } from '../../lib/automations/events'
+import { BoostType } from '../../lib/automations'
 import { flattenObj } from '../../lib/utils/object'
 
 interface FilterBuilderProps {
-  typeDef: JsonTypeDef
+  typeDef: BoostType
   filter: SerializedPipe['filter']
   onChange: (filter: SerializedPipe['filter']) => void
 }

src/cloud/components/Automations/PipeBuilder.tsx

@@ -1,5 +1,5 @@
 import { mdiPlus } from '@mdi/js'
-import React, { useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import Button from '../../../design/components/atoms/Button'
 import Form from '../../../design/components/molecules/Form'
 import FormInput from '../../../design/components/molecules/Form/atoms/FormInput'
@@ -8,10 +8,10 @@ import FormRow from '../../../design/components/molecules/Form/templates/FormRow
 import FormRowItem from '../../../design/components/molecules/Form/templates/FormRowItem'
 import styled from '../../../design/lib/styled'
 import { SerializedPipe } from '../../interfaces/db/automations'
+import { OpNode, StructNode } from '../../lib/automations/ast'
 import supportedEvents from '../../lib/automations/events'
 import CreateDocActionConfigurator from './actions/CreateDocActionConfigurator'
 import UpdateDocActionConfigurator from './actions/UpdateDocActionConfigurator'
-import EventInfo from './EventInfo'
 import FilterBuilder from './FilterBuilder'
 
 const SUPPORTED_EVENT_NAMES = Object.keys(supportedEvents).map((key) => {
@@ -45,6 +45,13 @@ const PipeBuilder = ({ pipe, onChange }: PipeBuilderProps) => {
     )
   }, [pipe.configuration])
 
+  const updateConfig = useCallback(
+    (input: SerializedPipe['configuration']['input']) => {
+      onChange({ ...pipe, configuration: { ...pipe.configuration, input } })
+    },
+    [pipe, onChange]
+  )
+
   return (
     <Container>
       <FormRow>
@@ -100,14 +107,7 @@ const PipeBuilder = ({ pipe, onChange }: PipeBuilderProps) => {
               onChange={({ value }) =>
                 onChange({
                   ...pipe,
-                  configuration: {
-                    type: 'operation',
-                    identifier: value,
-                    input: {
-                      type: 'constructor',
-                      info: { type: 'struct', refs: {} },
-                    },
-                  },
+                  configuration: OpNode(value, StructNode({})),
                 })
               }
             />
@@ -116,15 +116,15 @@ const PipeBuilder = ({ pipe, onChange }: PipeBuilderProps) => {
         <FormRow>
           {action.value === 'boost.doc.create' && (
             <CreateDocActionConfigurator
-              configuration={pipe.configuration}
-              onChange={(configuration) => onChange({ ...pipe, configuration })}
+              configuration={pipe.configuration.input}
+              onChange={updateConfig}
               eventType={currentEvent}
             />
           )}
           {action.value === 'boost.doc.update' && (
             <UpdateDocActionConfigurator
-              configuration={pipe.configuration}
-              onChange={(configuration) => onChange({ ...pipe, configuration })}
+              configuration={pipe.configuration.input}
+              onChange={updateConfig}
               eventType={currentEvent}
             />
           )}

src/cloud/components/Automations/actions/CreateDocActionConfigurator.tsx

@@ -4,15 +4,18 @@ import FormEmoji from '../../../../design/components/molecules/Form/atoms/FormEm
 import FormInput from '../../../../design/components/molecules/Form/atoms/FormInput'
 import FormTextarea from '../../../../design/components/molecules/Form/atoms/FormTextArea'
 import FormRow from '../../../../design/components/molecules/Form/templates/FormRow'
-import { LiteralNode, StructNode } from '../../../lib/automations/ast'
+import { BoostAST } from '../../../lib/automations'
+import {
+  LiteralNode,
+  RecordNode,
+  StructNode,
+} from '../../../lib/automations/ast'
 import { flattenObj } from '../../../lib/utils/object'
 import { ActionConfiguratorProps } from './'
 import ActionConfigurationInput from './ActionConfigurationInput'
 import FolderSelect from './FolderSelect'
-import PropertySelect from './PropertySelect'
+import PropertySelect, { SupportedType } from './PropertySelect'
 
-// TODO: flatten type (bring from backend) ? do top level? 'declarations' || 'imports'
-// TODO: sort by type
 const CreateDocActionConfigurator = ({
   configuration,
   onChange,
@@ -115,14 +118,30 @@ const CreateDocActionConfigurator = ({
       </FormRow>
       <FormRow row={{ title: 'Props' }}></FormRow>
       <PropertySelect
-        value={constructorTree.props || {}}
+        value={
+          constructorTree.props != null &&
+          constructorTree.props.type === 'constructor' &&
+          constructorTree.props.info.type === 'record'
+            ? constructorTree.props.info.refs.filter(isSupportedType)
+            : []
+        }
         onChange={(props) =>
-          onChange(StructNode({ ...constructorTree, props }))
+          onChange(StructNode({ ...constructorTree, props: RecordNode(props) }))
         }
         eventDataOptions={eventDataOptions}
       />
     </div>
   )
 }
 
+function isSupportedType(x: {
+  key: BoostAST
+  val: BoostAST
+}): x is SupportedType {
+  return (
+    x.key.type === 'literal' &&
+    (x.val.type === 'operation' || x.val.type === 'literal')
+  )
+}
+
 export default CreateDocActionConfigurator

src/cloud/components/Automations/actions/PropertySelect.tsx

@@ -11,20 +11,15 @@ import ActionConfigurationInput from './ActionConfigurationInput'
 import { useModal } from '../../../../design/lib/stores/modal'
 import { PropData } from '../../../interfaces/db/props'
 import { BoostAST } from '../../../lib/automations'
-import {
-  LiteralNode,
-  OpNode,
-  RecordNode,
-  StructNode,
-} from '../../../lib/automations/ast'
+import { LiteralNode, OpNode, StructNode } from '../../../lib/automations/ast'
 
 export interface PropertySelectProps {
-  value: BoostAST
-  onChange: (props: BoostAST) => void
+  value: SupportedType[]
+  onChange: (props: SupportedType[]) => void
   eventDataOptions: Record<string, any>
 }
 
-type SupportedType = {
+export type SupportedType = {
   key: Extract<BoostAST, { type: 'literal' }>
   val: Extract<BoostAST, { type: 'operation' } | { type: 'literal' }>
 }
@@ -37,29 +32,17 @@ const PropertySelect = ({
   const { openContextModal } = useModal()
 
   const props = useMemo(() => {
-    if (value.type !== 'constructor' || value.info.type !== 'record') {
-      return []
-    }
-    return value.info.refs.filter(isSupported).map((ref) => {
+    return value.map((ref) => {
       return { key: ref.key.value, val: ref.val }
     })
   }, [value])
 
   const addProp = useCallback(
     (key: string, val: SupportedType['val']) => {
-      if (value.type !== 'constructor' || value.info.type !== 'record') {
-        onChange(RecordNode([{ key: LiteralNode('string', key), val }]))
-        return
-      }
-
       onChange(
-        RecordNode(
-          value.info.refs
-            .filter(
-              (ref) => ref.key.type === 'literal' && key !== ref.key.value
-            )
-            .concat([{ key: LiteralNode('string', key), val }])
-        )
+        value
+          .filter((ref) => key !== ref.key.value)
+          .concat([{ key: LiteralNode('string', key), val }])
       )
     },
     [value, onChange]
@@ -68,8 +51,6 @@ const PropertySelect = ({
   return (
     <>
       {props.map(({ key, val }, i) => {
-        // if literal get type + data from value
-        // else extrat type from subtype || type
         const [propType, subType] = getPropTypeFromAst(val)
         const iconPath = getIconPathOfPropType(subType || propType)
         return (
@@ -189,15 +170,6 @@ function getDataTypeForPropType(type: PropData['type']): string | undefined {
   }
 }
 
-function isSupported(x: any): x is SupportedType {
-  return (
-    x.key.type === 'literal' &&
-    x.key.def.def === 'string' &&
-    ((x.val.type === 'literal' && x.val.def.def === 'propData') ||
-      (x.val.type === 'operation' && x.val.identifier === 'boost.props.make'))
-  )
-}
-
 function getPropTypeFromAst(x: SupportedType['val']) {
   if (x.type === 'literal') {
     return [x.value.subType, x.value.subType]