Add new formula editor

Author: bram2w

premium/web-frontend/modules/baserow_premium/components/field/FieldAISubForm.vue

@@ -69,11 +69,12 @@
       <div style="max-width: 366px">
         <FormulaInputField
           :value="formulaStr"
-          :data-providers="dataProviders"
-          :application-context="applicationContext"
+          :mode="localMode"
+          :nodes-hierarchy="nodesHierarchy"
           :placeholder="$t('fieldAISubForm.promptPlaceholder')"
           @input="updatedFormulaStr"
-        ></FormulaInputField>
+          @update:mode="updateMode"
+        />
       </div>
       <template #error> {{ $t('error.requiredField') }}</template>
     </FormGroup>
@@ -99,6 +100,8 @@ import fieldSubForm from '@baserow/modules/database/mixins/fieldSubForm'
 import FormulaInputField from '@baserow/modules/core/components/formula/FormulaInputField'
 import SelectAIModelForm from '@baserow/modules/core/components/ai/SelectAIModelForm'
 import { TextAIFieldOutputType } from '@baserow_premium/aiFieldOutputTypes'
+import { buildFormulaFunctionNodes } from '@baserow/modules/core/formula'
+import { getDataNodesFromDataProvider } from '@baserow/modules/core/utils/dataProviders'
 
 export default {
   name: 'FieldAISubForm',
@@ -111,11 +114,12 @@ export default {
     return {
       allowedValues: ['ai_prompt', 'ai_file_field_id', 'ai_output_type'],
       values: {
-        ai_prompt: { formula: '' },
+        ai_prompt: { formula: '', mode: 'simple' },
         ai_output_type: TextAIFieldOutputType.getType(),
         ai_file_field_id: null,
       },
       fileFieldSupported: false,
+      localMode: 'simple',
     }
   },
   computed: {
@@ -146,6 +150,29 @@ export default {
     dataProviders() {
       return [this.$registry.get('databaseDataProvider', 'fields')]
     },
+    nodesHierarchy() {
+      const hierarchy = []
+
+      const filteredDataNodes = getDataNodesFromDataProvider(
+        this.dataProviders,
+        this.applicationContext
+      )
+
+      if (filteredDataNodes.length > 0) {
+        hierarchy.push({
+          name: this.$t('runtimeFormulaTypes.formulaTypeData'),
+          type: 'data',
+          icon: 'iconoir-database',
+          nodes: filteredDataNodes,
+        })
+      }
+
+      // Add functions and operators from the registry
+      const formulaNodes = buildFormulaFunctionNodes(this)
+      hierarchy.push(...formulaNodes)
+
+      return hierarchy
+    },
     isDeactivated() {
       return this.$registry
         .get('field', this.fieldType)
@@ -171,6 +198,16 @@ export default {
       )
     },
   },
+  watch: {
+    'values.ai_prompt.mode': {
+      handler(newMode) {
+        if (newMode && newMode !== this.localMode) {
+          this.localMode = newMode
+        }
+      },
+      immediate: true,
+    },
+  },
   methods: {
     /**
      * When `FormulaInputField` emits a new formula string, we need to emit the
@@ -181,6 +218,17 @@ export default {
       this.v$.values.ai_prompt.formula.$model = newFormulaStr
       this.$emit('input', { formula: newFormulaStr })
     },
+    /**
+     * When the mode changes, update the local mode value
+     * @param {String} newMode The new mode value
+     */
+    updateMode(newMode) {
+      this.localMode = newMode
+      this.values.ai_prompt = {
+        ...this.values.ai_prompt,
+        mode: newMode,
+      }
+    },
     setFileFieldSupported(generativeAIType) {
       if (generativeAIType) {
         const modelType = this.$registry.get(

web-frontend/locales/en.json

@@ -675,12 +675,25 @@
     "ifDescription": "If the first argument is true, returns the second argument, otherwise returns the third argument.",
     "andDescription": "Returns true if all arguments are true, otherwise returns false.",
     "orDescription": "Returns true if any argument is true, otherwise returns false.",
-    "formulaTypeFormula": "Formula",
-    "formulaTypeOperator": "Operator",
+    "formulaTypeFormula": "Function | Functions",
+    "formulaTypeOperator": "Operator | Operators",
+    "formulaTypeData": "Data",
+    "formulaTypeDataEmpty": "No data sources available",
     "categoryText": "Text",
     "categoryNumber": "Number",
     "categoryBoolean": "Boolean",
     "categoryDate": "Date",
-    "caregoryCondition": "Condition"
+    "categoryCondition": "Condition"
+  },
+  "formulaInputContext": {
+    "useRegularInput": "Use regular input",
+    "useRegularInputModalTitle": "Switch to regular input?",
+    "useAdvancedInputModalTitle": "Switch to advanced input?",
+    "useAdvancedInput": "Use advanced input",
+    "modalMessage": "Switching to a different input mode will clear the current formula. Are you sure you want to continue?"
+  },
+  "nodeExplorer": {
+    "noResults": "No results found",
+    "resetSearch": "Reset search"
   }
 }

web-frontend/modules/automation/components/AutomationBuilderFormulaInput.vue

@@ -3,44 +3,80 @@
     v-bind="$attrs"
     required
     :value="formulaStr"
-    :data-providers="dataProviders"
-    :application-context="applicationContext"
-    enable-advanced-mode
-    :mode="currentMode"
+    :nodes-hierarchy="nodesHierarchy"
+    context-position="left"
+    :mode="localMode"
+    @update:mode="updateMode"
     @input="updatedFormulaStr"
-    @mode-changed="updateMode"
   />
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
-import { inject, computed, useContext } from '@nuxtjs/composition-api'
+import {
+  inject,
+  computed,
+  useContext,
+  ref,
+  watch,
+} from '@nuxtjs/composition-api'
 import FormulaInputField from '@baserow/modules/core/components/formula/FormulaInputField'
+import { buildFormulaFunctionNodes } from '@baserow/modules/core/formula'
+import { getDataNodesFromDataProvider } from '@baserow/modules/core/utils/dataProviders'
 
 const props = defineProps({
   value: { type: [Object, String], required: false, default: () => ({}) },
   dataProvidersAllowed: { type: Array, required: false, default: () => [] },
 })
 
 const applicationContext = inject('applicationContext')
-const currentMode = ref(props.value.mode)
 
+const emit = defineEmits(['input'])
+
+// Local mode state
+const localMode = ref(props.value.mode || 'simple')
+
+// Watch for external changes to the mode
 watch(
   () => props.value.mode,
   (newMode) => {
-    if (newMode) {
-      currentMode.value = newMode
+    if (newMode !== undefined && newMode !== localMode.value) {
+      localMode.value = newMode
     }
   }
 )
 
 const { app } = useContext()
+
 const dataProviders = computed(() => {
   return props.dataProvidersAllowed.map((dataProviderName) =>
     app.$registry.get('automationDataProvider', dataProviderName)
   )
 })
 
+const nodesHierarchy = computed(() => {
+  const hierarchy = []
+
+  const filteredDataNodes = getDataNodesFromDataProvider(
+    dataProviders.value,
+    applicationContext
+  )
+
+  hierarchy.push({
+    name: app.i18n.t('runtimeFormulaTypes.formulaTypeData'),
+    type: 'data',
+    icon: 'iconoir-database',
+    nodes: filteredDataNodes,
+    empty: filteredDataNodes.length === 0,
+    emptyText: app.i18n.t('runtimeFormulaTypes.formulaTypeDataEmpty'),
+  })
+
+  // Add functions and operators from the registry
+  const formulaNodes = buildFormulaFunctionNodes(app)
+  hierarchy.push(...formulaNodes)
+
+  return hierarchy
+})
+
 /**
  * Extract the formula string from the value object, the FormulaInputField
  * component only needs the formula string itself.
@@ -55,16 +91,19 @@ const formulaStr = computed(() => {
  * entire value object with the updated formula string.
  * @param {String} newFormulaStr The new formula string.
  */
-const emit = defineEmits(['input'])
 const updatedFormulaStr = (newFormulaStr) => {
   emit('input', {
     ...props.value,
     formula: newFormulaStr,
-    mode: currentMode.value,
+    mode: localMode.value,
   })
 }
 
+/**
+ * When the mode changes, update the local mode value only
+ * @param {String} newMode The new mode value
+ */
 const updateMode = (newMode) => {
-  currentMode.value = newMode
+  localMode.value = newMode
 }
 </script>