Split formula input groups

2025-03-28 02:04:20 +00:00 · 2024-07-18 13:10:31 +00:00 · 2024-07-18 13:10:31 +00:00 · 1e83b93329
commit 1e83b93329
parent 79ec54a436
39 changed files with 448 additions and 457 deletions
--- a/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/AuthFormElementForm.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/AuthFormElementForm.vue
@ -27,26 +27,30 @@
      :config-block-types="['button']"
      :theme="builder.theme"
    />
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.login_button_label"
+    <FormGroup
+      small-label
      :label="$t('authFormElementForm.loginButtonLabel')"
-      :placeholder="$t('authFormElementForm.loginButtonLabelPlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
      class="margin-bottom-2"
-    />
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.login_button_label"
+        :placeholder="$t('authFormElementForm.loginButtonLabelPlaceholder')"
+      />
+    </FormGroup>
  </form>
 </template>

 <script>
 import elementForm from '@baserow/modules/builder/mixins/elementForm'
 import CustomStyle from '@baserow/modules/builder/components/elements/components/forms/style/CustomStyle'
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'

 export default {
  name: 'AuthFormElementForm',
  components: {
    CustomStyle,
-    ApplicationBuilderFormulaInputGroup,
+    InjectedFormulaInput,
  },
  mixins: [elementForm],
  inject: ['builder'],
--- a/web-frontend/modules/builder/components/ApplicationBuilderFormulaInputGroup.vue
+++ b/web-frontend/modules/builder/components/ApplicationBuilderFormulaInputGroup.vue
@ -1,7 +1,6 @@
 <template>
-  <FormulaInputGroup
+  <FormulaInputField
    v-bind="$attrs"
-    small-label
    required
    :data-explorer-loading="dataExplorerLoading"
    :data-providers="dataProviders"
@ -13,22 +12,17 @@
        ...applicationContextAdditions,
      }
    "
-    :small="small"
    v-on="$listeners"
-  >
-    <template #after-input>
-      <slot name="after-input"></slot>
-    </template>
-  </FormulaInputGroup>
+  />
 </template>

 <script>
-import FormulaInputGroup from '@baserow/modules/core/components/formula/FormulaInputGroup'
+import FormulaInputField from '@baserow/modules/core/components/formula/FormulaInputField'
 import { DataSourceDataProviderType } from '@baserow/modules/builder/dataProviderTypes'

 export default {
-  name: 'ApplicationBuilderFormulaInputGroup',
-  components: { FormulaInputGroup },
+  name: 'ApplicationBuilderFormulaInput',
+  components: { FormulaInputField },
  inject: {
    page: {
      from: 'page',
@ -55,11 +49,6 @@ export default {
      required: false,
      default: () => {},
    },
-    small: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
  },
  computed: {
    dataSourceLoading() {
@ -73,11 +62,6 @@ export default {
        this.$registry.get('builderDataProvider', dataProviderName)
      )
    },
-    dataExplorerLoading() {
-      return this.dataProvidersAllowed.some(
-        (dataProviderName) => this.dataProviderLoadingMap[dataProviderName]
-      )
-    },
    /**
     * This mapping defines which data providers are affected by what loading states.
     * Since not all data providers are always used in every data explorer we
@ -90,6 +74,11 @@ export default {
          this.dataSourceLoading || this.dataSourceContentLoading,
      }
    },
+    dataExplorerLoading() {
+      return this.dataProvidersAllowed.some(
+        (dataProviderName) => this.dataProviderLoadingMap[dataProviderName]
+      )
+    },
  },
 }
 </script>
--- a/web-frontend/modules/builder/components/dataSource/DataSourceForm.vue
+++ b/web-frontend/modules/builder/components/dataSource/DataSourceForm.vue
@ -60,11 +60,15 @@
 import IntegrationDropdown from '@baserow/modules/core/components/integrations/IntegrationDropdown'
 import form from '@baserow/modules/core/mixins/form'
 import { required, maxLength } from 'vuelidate/lib/validators'
+import { DATA_PROVIDERS_ALLOWED_DATA_SOURCES } from '@baserow/modules/builder/enums'

 export default {
  name: 'DataSourceContext',
  components: { IntegrationDropdown },
  mixins: [form],
+  provide() {
+    return { dataProvidersAllowed: DATA_PROVIDERS_ALLOWED_DATA_SOURCES }
+  },
  props: {
    builder: {
      type: Object,
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/BooleanFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/BooleanFieldForm.vue
@ -1,23 +1,27 @@
 <template>
  <form @submit.prevent @keydown.enter.prevent>
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.value"
+    <FormGroup
+      small-label
      :label="$t('textFieldForm.fieldValueLabel')"
-      :placeholder="$t('textFieldForm.fieldValuePlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
+      required
      horizontal
      class="margin-bottom-2"
-    />
+    >
+      <InjectedFormulaInput
+        v-model="values.value"
+        :placeholder="$t('textFieldForm.fieldValuePlaceholder')"
+      />
+    </FormGroup>
  </form>
 </template>

 <script>
 import collectionFieldForm from '@baserow/modules/builder/mixins/collectionFieldForm'
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'

 export default {
  name: 'BooleanFieldForm',
-  components: { ApplicationBuilderFormulaInputGroup },
+  components: { InjectedFormulaInput },
  mixins: [collectionFieldForm],
  data() {
    return {
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/ButtonFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/ButtonFieldForm.vue
@ -1,13 +1,17 @@
 <template>
  <form @submit.prevent @keydown.enter.prevent>
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.label"
+    <FormGroup
+      small-label
      :label="$t('generalForm.labelTitle')"
-      :placeholder="$t('buttonFieldForm.labelPlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
-      horizontal
      class="margin-bottom-2"
-    />
+      horizontal
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.label"
+        :placeholder="$t('buttonFieldForm.labelPlaceholder')"
+      />
+    </FormGroup>
    <Alert>
      {{ $t('buttonFieldForm.infoMessage') }}
    </Alert>
@ -16,11 +20,11 @@

 <script>
 import collectionFieldForm from '@baserow/modules/builder/mixins/collectionFieldForm'
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'

 export default {
  name: 'ButtonFieldForm',
-  components: { ApplicationBuilderFormulaInputGroup },
+  components: { InjectedFormulaInput },
  mixins: [collectionFieldForm],
  data() {
    return {
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/LinkFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/LinkFieldForm.vue
@ -1,13 +1,17 @@
 <template>
  <form @submit.prevent @keydown.enter.prevent>
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.link_name"
+    <FormGroup
+      small-label
      :label="$t('linkFieldForm.fieldLinkNameLabel')"
-      :placeholder="$t('linkFieldForm.fieldLinkNamePlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
-      horizontal
      class="margin-bottom-2"
-    />
+      required
+      horizontal
+    >
+      <InjectedFormulaInput
+        v-model="values.link_name"
+        :placeholder="$t('linkFieldForm.fieldLinkNamePlaceholder')"
+      />
+    </FormGroup>
    <LinkNavigationSelectionForm
      :default-values="defaultValues"
      @values-changed="emitChange($event)"
@ -17,13 +21,13 @@

 <script>
 import collectionFieldForm from '@baserow/modules/builder/mixins/collectionFieldForm'
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
 import LinkNavigationSelectionForm from '@baserow/modules/builder/components/elements/components/forms/general/LinkNavigationSelectionForm'

 export default {
  name: 'TextField',
  components: {
-    ApplicationBuilderFormulaInputGroup,
+    InjectedFormulaInput,
    LinkNavigationSelectionForm,
  },
  mixins: [collectionFieldForm],
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/TagsFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/TagsFieldForm.vue
@ -1,23 +1,31 @@
 <template>
  <form @submit.prevent @keydown.enter.prevent>
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.values"
+    <FormGroup
+      small-label
      :label="$t('tagsFieldForm.fieldValuesLabel')"
-      :placeholder="$t('tagsFieldForm.fieldValuesPlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
-      horizontal
      class="margin-bottom-2"
-    />
+      horizontal
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.values"
+        :placeholder="$t('tagsFieldForm.fieldValuesPlaceholder')"
+      />
+    </FormGroup>
+
    <div>
-      <ApplicationBuilderFormulaInputGroup
+      <FormGroup
        v-if="values.colors_is_formula"
-        v-model="values.colors"
+        small-label
        :label="$t('tagsFieldForm.fieldColorsLabel')"
-        :placeholder="$t('tagsFieldForm.fieldColorsPlaceholder')"
-        :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
        horizontal
        class="margin-bottom-2"
+        required
      >
+        <InjectedFormulaInput
+          v-model="values.colors"
+          :placeholder="$t('tagsFieldForm.fieldColorsPlaceholder')"
+        />
        <template #after-input>
          <ButtonIcon
            icon="iconoir-color-picker"
@ -25,7 +33,7 @@
            @click="setColorsToPicker"
          />
        </template>
-      </ApplicationBuilderFormulaInputGroup>
+      </FormGroup>
      <FormGroup
        v-else
        horizontal
@ -51,12 +59,12 @@
 </template>

 <script>
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
 import collectionFieldForm from '@baserow/modules/builder/mixins/collectionFieldForm'

 export default {
  name: 'TagsField',
-  components: { ApplicationBuilderFormulaInputGroup },
+  components: { InjectedFormulaInput },
  mixins: [collectionFieldForm],
  data() {
    return {
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/TextFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/TextFieldForm.vue
@ -1,24 +1,27 @@
 <template>
  <form @submit.prevent @keydown.enter.prevent>
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.value"
-      :label="$t('textFieldForm.fieldValueLabel')"
-      :placeholder="$t('textFieldForm.fieldValuePlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
-      horizontal
+    <FormGroup
      small-label
+      :label="$t('textFieldForm.fieldValueLabel')"
      class="margin-bottom-2"
-    />
+      horizontal
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.value"
+        :placeholder="$t('textFieldForm.fieldValuePlaceholder')"
+      />
+    </FormGroup>
  </form>
 </template>

 <script>
 import collectionFieldForm from '@baserow/modules/builder/mixins/collectionFieldForm'
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'

 export default {
  name: 'TextField',
-  components: { ApplicationBuilderFormulaInputGroup },
+  components: { InjectedFormulaInput },
  mixins: [collectionFieldForm],
  data() {
    return {
--- a/web-frontend/modules/builder/components/elements/components/forms/general/ButtonElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/ButtonElementForm.vue
@ -6,27 +6,29 @@
      :config-block-types="['button']"
      :theme="builder.theme"
    />
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.value"
-      class="margin-bottom-2"
+    <FormGroup
      small-label
-      required
      :label="$t('buttonElementForm.valueLabel')"
-      :placeholder="$t('buttonElementForm.valuePlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
-    />
+      class="margin-bottom-2"
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.value"
+        :placeholder="$t('buttonElementForm.valuePlaceholder')"
+      />
+    </FormGroup>
  </form>
 </template>

 <script>
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
 import CustomStyle from '@baserow/modules/builder/components/elements/components/forms/style/CustomStyle'
 import elementForm from '@baserow/modules/builder/mixins/elementForm'

 export default {
  name: 'ButtonElementForm',
  components: {
-    ApplicationBuilderFormulaInputGroup,
+    InjectedFormulaInput,
    CustomStyle,
  },
  mixins: [elementForm],
--- a/web-frontend/modules/builder/components/elements/components/forms/general/CheckboxElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/CheckboxElementForm.vue
@ -7,24 +7,29 @@
      :theme="builder.theme"
      :extra-args="{ onlyInput: true }"
    />
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.label"
-      class="margin-bottom-2"
+    <FormGroup
      small-label
-      required
      :label="$t('checkboxElementForm.labelTitle')"
-      :placeholder="$t('generalForm.labelPlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS"
-    ></ApplicationBuilderFormulaInputGroup>
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.default_value"
      class="margin-bottom-2"
-      small-label
      required
+    >
+      <InjectedFormulaInput
+        v-model="values.label"
+        :placeholder="$t('generalForm.labelPlaceholder')"
+      />
+    </FormGroup>
+
+    <FormGroup
+      small-label
      :label="$t('checkboxElementForm.valueTitle')"
-      :placeholder="$t('generalForm.valuePlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS"
-    ></ApplicationBuilderFormulaInputGroup>
+      class="margin-bottom-2"
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.default_value"
+        :placeholder="$t('generalForm.valuePlaceholder')"
+      />
+    </FormGroup>
    <FormGroup
      small-label
      required
@ -36,14 +41,14 @@
 </template>

 <script>
-import elementForm from '@baserow/modules/builder/mixins/elementForm'
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup.vue'
+import formElementForm from '@baserow/modules/builder/mixins/formElementForm'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput.vue'
 import CustomStyle from '@baserow/modules/builder/components/elements/components/forms/style/CustomStyle'

 export default {
  name: 'CheckboxElementForm',
-  components: { ApplicationBuilderFormulaInputGroup, CustomStyle },
-  mixins: [elementForm],
+  components: { InjectedFormulaInput, CustomStyle },
+  mixins: [formElementForm],
  data() {
    return {
      values: {
--- a/web-frontend/modules/builder/components/elements/components/forms/general/ChoiceElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/ChoiceElementForm.vue
@ -6,33 +6,39 @@
      :config-block-types="['input']"
      :theme="builder.theme"
    />
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.label"
-      class="margin-bottom-2"
+    <FormGroup
      small-label
-      required
      :label="$t('generalForm.labelTitle')"
-      :placeholder="$t('generalForm.labelPlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS"
-    ></ApplicationBuilderFormulaInputGroup>
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.default_value"
      class="margin-bottom-2"
-      small-label
      required
+    >
+      <InjectedFormulaInput
+        v-model="values.label"
+        :placeholder="$t('generalForm.labelPlaceholder')"
+      />
+    </FormGroup>
+    <FormGroup
+      small-label
      :label="$t('generalForm.valueTitle')"
-      :placeholder="$t('generalForm.valuePlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS"
-    ></ApplicationBuilderFormulaInputGroup>
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.placeholder"
      class="margin-bottom-2"
-      small-label
      required
+    >
+      <InjectedFormulaInput
+        v-model="values.default_value"
+        :placeholder="$t('generalForm.valuePlaceholder')"
+      />
+    </FormGroup>
+    <FormGroup
+      small-label
      :label="$t('generalForm.placeholderTitle')"
-      :placeholder="$t('generalForm.placeholderPlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS"
-    ></ApplicationBuilderFormulaInputGroup>
+      class="margin-bottom-2"
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.placeholder"
+        :placeholder="$t('generalForm.placeholderPlaceholder')"
+      />
+    </FormGroup>
    <FormGroup
      :label="$t('generalForm.requiredTitle')"
      class="margin-bottom-2"
@ -131,43 +137,45 @@
      </ButtonText>
    </template>
    <template v-else-if="values.option_type === CHOICE_OPTION_TYPES.FORMULAS">
-      <ApplicationBuilderFormulaInputGroup
-        v-model="values.formula_value"
-        class="margin-bottom-2"
+      <FormGroup
+        small-label
        :label="$t('choiceOptionSelector.value')"
-        :placeholder="$t('choiceOptionSelector.valuePlaceholder')"
-        :data-providers-allowed="DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS"
-      />
-      <ApplicationBuilderFormulaInputGroup
-        v-model="values.formula_name"
        class="margin-bottom-2"
+        required
+      >
+        <InjectedFormulaInput
+          v-model="values.formula_value"
+          :placeholder="$t('choiceOptionSelector.valuePlaceholder')"
+        />
+      </FormGroup>
+      <FormGroup
+        small-label
        :label="$t('choiceOptionSelector.name')"
-        :placeholder="$t('choiceOptionSelector.namePlaceholder')"
-        :data-providers-allowed="DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS"
-      />
-      <!-- temporary fix to show the context menu -->
-      <br />
+        class="margin-bottom-2"
+      >
+        <InjectedFormulaInput
+          v-model="values.formula_name"
+          :placeholder="$t('choiceOptionSelector.namePlaceholder')"
+        />
+      </FormGroup>
    </template>
  </form>
 </template>

 <script>
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup.vue'
-import {
-  CHOICE_OPTION_TYPES,
-  DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS,
-} from '@baserow/modules/builder/enums'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput.vue'
+import { CHOICE_OPTION_TYPES } from '@baserow/modules/builder/enums'
 import CustomStyle from '@baserow/modules/builder/components/elements/components/forms/style/CustomStyle'
-import elementForm from '@baserow/modules/builder/mixins/elementForm'
+import formElementForm from '@baserow/modules/builder/mixins/formElementForm'
 import { uuid } from '@baserow/modules/core/utils/string'

 export default {
  name: 'ChoiceElementForm',
  components: {
-    ApplicationBuilderFormulaInputGroup,
+    InjectedFormulaInput,
    CustomStyle,
  },
-  mixins: [elementForm],
+  mixins: [formElementForm],
  props: {
    loading: {
      type: Boolean,
@ -207,8 +215,6 @@ export default {
  },
  computed: {
    CHOICE_OPTION_TYPES: () => CHOICE_OPTION_TYPES,
-    DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS: () =>
-      DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS,
    element() {
      return this.$store.getters['element/getElementById'](
        this.page,
--- a/web-frontend/modules/builder/components/elements/components/forms/general/FormContainerElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/FormContainerElementForm.vue
@ -6,15 +6,17 @@
      :config-block-types="['button']"
      :theme="builder.theme"
    />
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.submit_button_label"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
-      class="margin-bottom-2"
+    <FormGroup
      small-label
-      required
      :label="$t('formContainerElementForm.submitButtonLabel')"
-      :placeholder="$t('formContainerElementForm.submitButtonPlaceholder')"
-    />
+      class="margin-bottom-2"
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.submit_button_label"
+        :placeholder="$t('formContainerElementForm.submitButtonPlaceholder')"
+      />
+    </FormGroup>
    <FormGroup
      :label="$t('formContainerElementForm.resetToInitialValuesTitle')"
      :helper-text="
@ -31,13 +33,13 @@
 </template>

 <script>
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup.vue'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput.vue'
 import elementForm from '@baserow/modules/builder/mixins/elementForm'
 import CustomStyle from '@baserow/modules/builder/components/elements/components/forms/style/CustomStyle'

 export default {
  name: 'FormContainerElementForm',
-  components: { ApplicationBuilderFormulaInputGroup, CustomStyle },
+  components: { InjectedFormulaInput, CustomStyle },
  mixins: [elementForm],
  data() {
    return {
--- a/web-frontend/modules/builder/components/elements/components/forms/general/HeadingElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/HeadingElementForm.vue
@ -25,20 +25,22 @@
        </DropdownItem>
      </Dropdown>
    </FormGroup>
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.value"
+    <FormGroup
      small-label
-      required
      :label="$t('headingElementForm.textTitle')"
-      :placeholder="$t('elementForms.textInputPlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
      class="margin-bottom-2"
-    />
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.value"
+        :placeholder="$t('elementForms.textInputPlaceholder')"
+      />
+    </FormGroup>
  </form>
 </template>

 <script>
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
 import elementForm from '@baserow/modules/builder/mixins/elementForm'
 import { HORIZONTAL_ALIGNMENTS } from '@baserow/modules/builder/enums'
 import CustomStyle from '../style/CustomStyle.vue'
@ -46,7 +48,7 @@ import CustomStyle from '../style/CustomStyle.vue'
 export default {
  name: 'HeaderElementForm',
  components: {
-    ApplicationBuilderFormulaInputGroup,
+    InjectedFormulaInput,
    CustomStyle,
  },
  mixins: [elementForm],
--- a/web-frontend/modules/builder/components/elements/components/forms/general/IFrameElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/IFrameElementForm.vue
@ -1,6 +1,7 @@
 <template>
  <form @submit.prevent @keydown.enter.prevent>
    <FormGroup
+      v-if="values.source_type === IFRAME_SOURCE_TYPES.EMBED"
      :label="$t('iframeElementForm.sourceTypeLabel')"
      small-label
      required
@ -14,27 +15,33 @@
      </RadioGroup>
    </FormGroup>

-    <ApplicationBuilderFormulaInputGroup
+    <FormGroup
      v-if="values.source_type === IFRAME_SOURCE_TYPES.URL"
      key="url"
-      v-model="values.url"
+      small-label
      :label="$t('iframeElementForm.urlLabel')"
-      :placeholder="$t('iframeElementForm.urlPlaceholder')"
-      :help-text="$t('iframeElementForm.urlHelp')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
      class="margin-bottom-2"
-    ></ApplicationBuilderFormulaInputGroup>
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.url"
+        :placeholder="$t('iframeElementForm.urlPlaceholder')"
+      />
+      <template #helper>{{ $t('iframeElementForm.urlHelp') }}</template>
+    </FormGroup>

-    <ApplicationBuilderFormulaInputGroup
-      v-if="values.source_type === IFRAME_SOURCE_TYPES.EMBED"
+    <FormGroup
      key="embed"
-      v-model="values.embed"
      :label="$t('iframeElementForm.embedLabel')"
-      :placeholder="$t('iframeElementForm.embedPlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
+      small-label
      class="margin-bottom-2"
-    ></ApplicationBuilderFormulaInputGroup>
-
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.embed"
+        :placeholder="$t('iframeElementForm.embedPlaceholder')"
+      />
+    </FormGroup>
    <FormGroup
      :label="$t('iframeElementForm.heightLabel')"
      small-label
@ -64,12 +71,12 @@
 <script>
 import elementForm from '@baserow/modules/builder/mixins/elementForm'
 import { IFRAME_SOURCE_TYPES } from '@baserow/modules/builder/enums'
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup.vue'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput.vue'
 import { required, integer, minValue, maxValue } from 'vuelidate/lib/validators'

 export default {
  name: 'IFrameElementForm',
-  components: { ApplicationBuilderFormulaInputGroup },
+  components: { InjectedFormulaInput },
  mixins: [elementForm],
  data() {
    return {
--- a/web-frontend/modules/builder/components/elements/components/forms/general/ImageElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/ImageElementForm.vue
@ -50,10 +50,9 @@
      :helper-text="$t('imageElementForm.urlWarning')"
      small-label
    >
-      <ApplicationBuilderFormulaInputGroup
+      <InjectedFormulaInput
        v-model="values.image_url"
        :placeholder="$t('elementForms.urlInputPlaceholder')"
-        :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
      />
    </FormGroup>
    <FormGroup
@ -63,10 +62,9 @@
      small-label
      required
    >
-      <ApplicationBuilderFormulaInputGroup
+      <InjectedFormulaInput
        v-model="values.alt_text"
        :placeholder="$t('elementForms.textInputPlaceholder')"
-        :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
      />
    </FormGroup>
  </form>
@ -77,14 +75,14 @@ import { IMAGE_SOURCE_TYPES } from '@baserow/modules/builder/enums'
 import { IMAGE_FILE_TYPES } from '@baserow/modules/core/enums'
 import UserFilesModal from '@baserow/modules/core/components/files/UserFilesModal'
 import { UploadFileUserFileUploadType } from '@baserow/modules/core/userFileUploadTypes'
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup.vue'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
 import elementForm from '@baserow/modules/builder/mixins/elementForm'
 import CustomStyle from '@baserow/modules/builder/components/elements/components/forms/style/CustomStyle'

 export default {
  name: 'ImageElementForm',
  components: {
-    ApplicationBuilderFormulaInputGroup,
+    InjectedFormulaInput,
    CustomStyle,
    UserFilesModal,
  },
--- a/web-frontend/modules/builder/components/elements/components/forms/general/InputTextElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/InputTextElementForm.vue
@ -6,28 +6,39 @@
      :config-block-types="['input']"
      :theme="builder.theme"
    />
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.label"
+    <FormGroup
      :label="$t('generalForm.labelTitle')"
-      :placeholder="$t('generalForm.labelPlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS"
      class="margin-bottom-2"
-    ></ApplicationBuilderFormulaInputGroup>
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.default_value"
+      required
+      small-label
+    >
+      <InjectedFormulaInput
+        v-model="values.label"
+        :placeholder="$t('generalForm.labelPlaceholder')"
+      />
+    </FormGroup>
+    <FormGroup
      :label="$t('generalForm.valueTitle')"
-      :placeholder="$t('generalForm.valuePlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS"
      class="margin-bottom-2"
-    ></ApplicationBuilderFormulaInputGroup>
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.placeholder"
+      required
+      small-label
+    >
+      <InjectedFormulaInput
+        v-model="values.default_value"
+        :placeholder="$t('generalForm.valuePlaceholder')"
+      />
+    </FormGroup>
+    <FormGroup
      :label="$t('generalForm.placeholderTitle')"
-      :placeholder="$t('generalForm.placeholderPlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS"
      class="margin-bottom-2"
-    ></ApplicationBuilderFormulaInputGroup>
-
+      required
+      small-label
+    >
+      <InjectedFormulaInput
+        v-model="values.placeholder"
+        :placeholder="$t('generalForm.placeholderPlaceholder')"
+      />
+    </FormGroup>
    <FormGroup
      :label="$t('generalForm.requiredTitle')"
      small-label
@ -118,15 +129,15 @@

 <script>
 import form from '@baserow/modules/core/mixins/form'
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup.vue'
-import elementForm from '@baserow/modules/builder/mixins/elementForm'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput.vue'
+import formElementForm from '@baserow/modules/builder/mixins/formElementForm'
 import CustomStyle from '@baserow/modules/builder/components/elements/components/forms/style/CustomStyle'
 import { required, integer, minValue, maxValue } from 'vuelidate/lib/validators'

 export default {
  name: 'InputTextElementForm',
-  components: { ApplicationBuilderFormulaInputGroup, CustomStyle },
-  mixins: [elementForm],
+  components: { InjectedFormulaInput, CustomStyle },
+  mixins: [formElementForm],
  data() {
    return {
      values: {
--- a/web-frontend/modules/builder/components/elements/components/forms/general/LinkElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/LinkElementForm.vue
@ -14,15 +14,17 @@
      :config-block-types="['link']"
      :theme="builder.theme"
    />
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.value"
-      class="margin-bottom-2"
-      :label="$t('linkElementForm.text')"
+    <FormGroup
      small-label
+      :label="$t('linkElementForm.text')"
+      class="margin-bottom-2"
      required
-      :placeholder="$t('linkElementForm.textPlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
-    />
+    >
+      <InjectedFormulaInput
+        v-model="values.value"
+        :placeholder="$t('linkElementForm.textPlaceholder')"
+      />
+    </FormGroup>
    <LinkNavigationSelectionForm
      :default-values="defaultValues"
      @values-changed="emitChange($event)"
@ -48,7 +50,7 @@ import {
  HORIZONTAL_ALIGNMENTS,
  WIDTHS_NEW,
 } from '@baserow/modules/builder/enums'
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
 import elementForm from '@baserow/modules/builder/mixins/elementForm'
 import LinkNavigationSelectionForm from '@baserow/modules/builder/components/elements/components/forms/general/LinkNavigationSelectionForm'

@ -57,7 +59,7 @@ import CustomStyle from '@baserow/modules/builder/components/elements/components
 export default {
  name: 'LinkElementForm',
  components: {
-    ApplicationBuilderFormulaInputGroup,
+    InjectedFormulaInput,
    LinkNavigationSelectionForm,
    CustomStyle,
  },
--- a/web-frontend/modules/builder/components/elements/components/forms/general/LinkNavigationSelectionForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/LinkNavigationSelectionForm.vue
@ -39,13 +39,17 @@
        ></DropdownItem>
      </Dropdown>
    </FormGroup>
-    <FormGroup v-if="navigateTo === 'custom'" class="margin-bottom-2" required>
-      <ApplicationBuilderFormulaInputGroup
+
+    <FormGroup
+      v-if="navigateTo === 'custom'"
+      class="margin-bottom-2"
+      :label="$t('linkNavigationSelection.url')"
+      required
+      small-label
+    >
+      <InjectedFormulaInput
        v-model="values.navigate_to_url"
-        :page="page"
-        :label="$t('linkNavigationSelection.url')"
        :placeholder="$t('linkNavigationSelection.urlPlaceholder')"
-        :data-providers-allowed="dataProvidersAllowed"
      />
    </FormGroup>
    <FormGroup v-if="destinationPage" class="margin-bottom-2" required>
@ -65,17 +69,20 @@
        </Alert>
      </template>
      <div v-else>
-        <div v-for="param in values.page_parameters" :key="param.name" required>
-          <ApplicationBuilderFormulaInputGroup
+        <FormGroup
+          v-for="param in values.page_parameters"
+          :key="param.name"
+          small-label
+          :label="param.name"
+          class="margin-bottom-2"
+          required
+          horizontal
+        >
+          <InjectedFormulaInput
            v-model="param.value"
-            :page="page"
-            :label="param.name"
-            horizontal
            :placeholder="$t('linkNavigationSelection.paramPlaceholder')"
-            :data-providers-allowed="dataProvidersAllowed"
-            class="margin-bottom-2"
          />
-        </div>
+        </FormGroup>
      </div>
    </FormGroup>
    <FormGroup
@ -94,24 +101,16 @@
 </template>

 <script>
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
 import elementForm from '@baserow/modules/builder/mixins/elementForm'
 import { pathParametersInError } from '@baserow/modules/builder/utils/params'
-import { DATA_PROVIDERS_ALLOWED_ELEMENTS } from '@baserow/modules/builder/enums'

 export default {
  name: 'LinkNavigationSelectionForm',
  components: {
-    ApplicationBuilderFormulaInputGroup,
+    InjectedFormulaInput,
  },
  mixins: [elementForm],
-  props: {
-    dataProvidersAllowed: {
-      type: Array,
-      required: false,
-      default: () => DATA_PROVIDERS_ALLOWED_ELEMENTS,
-    },
-  },
  data() {
    return {
      parametersInError: false,
--- a/web-frontend/modules/builder/components/elements/components/forms/general/RepeatElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/RepeatElementForm.vue
@ -37,22 +37,26 @@
        v-model="values.items_per_page"
        :placeholder="$t('repeatElementForm.itemsPerPagePlaceholder')"
        :to-value="(value) => parseInt(value)"
-        class="margin-bottom-2"
        type="number"
        @blur="$v.values.items_per_page.$touch()"
-      ></FormInput>
-
-      <CustomStyle
-        v-model="values.styles"
-        style-key="button"
-        :config-block-types="['button']"
-        :theme="builder.theme"
      />
-      <ApplicationBuilderFormulaInputGroup
+    </FormGroup>
+
+    <CustomStyle
+      v-model="values.styles"
+      style-key="button"
+      :config-block-types="['button']"
+      :theme="builder.theme"
+    />
+    <FormGroup
+      small-label
+      :label="$t('repeatElementForm.buttonLoadMoreLabel')"
+      class="margin-bottom-2"
+      required
+    >
+      <InjectedFormulaInput
        v-model="values.button_load_more_label"
-        :label="$t('repeatElementForm.buttonLoadMoreLabel')"
        :placeholder="$t('elementForms.textInputPlaceholder')"
-        :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
      />
    </FormGroup>
    <FormGroup
@ -111,14 +115,14 @@ import collectionElementForm from '@baserow/modules/builder/mixins/collectionEle
 import DeviceSelector from '@baserow/modules/builder/components/page/header/DeviceSelector.vue'
 import { mapActions, mapGetters } from 'vuex'
 import CustomStyle from '@baserow/modules/builder/components/elements/components/forms/style/CustomStyle'
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'

 export default {
  name: 'RepeatElementForm',
  components: {
    DeviceSelector,
    CustomStyle,
-    ApplicationBuilderFormulaInputGroup,
+    InjectedFormulaInput,
  },
  mixins: [elementForm, collectionElementForm],
  inject: ['applicationContext'],
--- a/web-frontend/modules/builder/components/elements/components/forms/general/TableElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/TableElementForm.vue
@ -40,13 +40,18 @@
      :config-block-types="['button']"
      :theme="builder.theme"
    />
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.button_load_more_label"
+
+    <FormGroup
+      small-label
      :label="$t('tableElementForm.buttonLoadMoreLabel')"
-      :placeholder="$t('elementForms.textInputPlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
      class="margin-bottom-2"
-    />
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.button_load_more_label"
+        :placeholder="$t('elementForms.textInputPlaceholder')"
+      />
+    </FormGroup>

    <FormSection class="margin-bottom-2" :title="$t('tableElementForm.fields')">
      <template v-if="values.data_source_id">
@ -197,7 +202,7 @@
 </template>

 <script>
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
 import {
  getNextAvailableNameInSequence,
  uuid,
@ -219,7 +224,7 @@ import CustomStyle from '@baserow/modules/builder/components/elements/components
 export default {
  name: 'TableElementForm',
  components: {
-    ApplicationBuilderFormulaInputGroup,
+    InjectedFormulaInput,
    DeviceSelector,
    CustomStyle,
  },
--- a/web-frontend/modules/builder/components/elements/components/forms/general/TextElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/TextElementForm.vue
@ -21,17 +21,22 @@
      :theme="builder.theme"
      :extra-args="{ onlyBody: values.format === TEXT_FORMAT_TYPES.PLAIN }"
    />
-    <ApplicationBuilderFormulaInputGroup
-      v-model="values.value"
+    <FormGroup
+      small-label
      :label="$t('textElementForm.textTitle')"
-      :placeholder="$t('textElementForm.textPlaceholder')"
-      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
-    />
+      class="margin-bottom-2"
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.value"
+        :placeholder="$t('textElementForm.textPlaceholder')"
+      />
+    </FormGroup>
  </form>
 </template>

 <script>
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
 import elementForm from '@baserow/modules/builder/mixins/elementForm'
 import { TEXT_FORMAT_TYPES } from '@baserow/modules/builder/enums'
 import CustomStyle from '@baserow/modules/builder/components/elements/components/forms/style/CustomStyle'
@ -39,7 +44,7 @@ import CustomStyle from '@baserow/modules/builder/components/elements/components
 export default {
  name: 'TextElementForm',
  components: {
-    ApplicationBuilderFormulaInputGroup,
+    InjectedFormulaInput,
    CustomStyle,
  },
  mixins: [elementForm],
--- a/web-frontend/modules/builder/components/page/PageTemplateContent.vue
+++ b/web-frontend/modules/builder/components/page/PageTemplateContent.vue
@ -19,7 +19,7 @@
 import PageHeader from '@baserow/modules/builder/components/page/header/PageHeader'
 import PagePreview from '@baserow/modules/builder/components/page/PagePreview'
 import PageSidePanels from '@baserow/modules/builder/components/page/PageSidePanels'
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
 import { DataProviderType } from '@baserow/modules/core/dataProviderTypes'
 import _ from 'lodash'

@ -34,7 +34,7 @@ export default {
      builder: this.builder,
      page: this.page,
      mode,
-      formulaComponent: ApplicationBuilderFormulaInputGroup,
+      formulaComponent: InjectedFormulaInput,
      applicationContext: { builder: this.builder, page: this.page, mode },
    }
  },
--- a/web-frontend/modules/builder/components/page/sidePanels/GeneralSidePanel.vue
+++ b/web-frontend/modules/builder/components/page/sidePanels/GeneralSidePanel.vue
@ -11,6 +11,7 @@

 <script>
 import elementSidePanel from '@baserow/modules/builder/mixins/elementSidePanel'
+import { DATA_PROVIDERS_ALLOWED_ELEMENTS } from '@baserow/modules/builder/enums'

 export default {
  name: 'GeneralSidePanel',
@ -22,6 +23,7 @@ export default {
        ...this.applicationContext,
        element: this.element,
      },
+      dataProvidersAllowed: DATA_PROVIDERS_ALLOWED_ELEMENTS,
    }
  },
 }
--- a/web-frontend/modules/builder/components/workflowAction/NotificationWorkflowActionForm.vue
+++ b/web-frontend/modules/builder/components/workflowAction/NotificationWorkflowActionForm.vue
@ -1,31 +1,39 @@
 <template>
  <form @submit.prevent="submit">
-    <InjectedFormulaInputGroup
-      v-model="values.title"
-      small
+    <FormGroup
      small-label
-      :placeholder="$t('notificationWorkflowActionForm.titlePlaceholder')"
      :label="$t('notificationWorkflowActionForm.titleLabel')"
      class="margin-bottom-2"
-    />
-    <InjectedFormulaInputGroup
-      v-model="values.description"
-      small
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.title"
+        :placeholder="$t('notificationWorkflowActionForm.titlePlaceholder')"
+      />
+    </FormGroup>
+    <FormGroup
      small-label
-      :placeholder="$t('notificationWorkflowActionForm.descriptionPlaceholder')"
      :label="$t('notificationWorkflowActionForm.descriptionLabel')"
      class="margin-bottom-2"
-    />
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.description"
+        :placeholder="
+          $t('notificationWorkflowActionForm.descriptionPlaceholder')
+        "
+      />
+    </FormGroup>
  </form>
 </template>

 <script>
 import form from '@baserow/modules/core/mixins/form'
-import InjectedFormulaInputGroup from '@baserow/modules/core/components/formula/InjectedFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'

 export default {
  name: 'NotificationWorkflowActionForm',
-  components: { InjectedFormulaInputGroup },
+  components: { InjectedFormulaInput },
  mixins: [form],
  data() {
    return {
--- a/web-frontend/modules/builder/components/workflowAction/OpenPageWorkflowActionForm.vue
+++ b/web-frontend/modules/builder/components/workflowAction/OpenPageWorkflowActionForm.vue
@ -2,7 +2,6 @@
  <form @submit.prevent="submit">
    <LinkNavigationSelectionForm
      :default-values="defaultValues"
-      :data-providers-allowed="dataProvidersAllowed"
      @values-changed="emitChange($event)"
    />
  </form>
@ -16,6 +15,5 @@ export default {
  name: 'OpenPageWorkflowActionForm',
  components: { LinkNavigationSelectionForm },
  mixins: [form],
-  inject: ['dataProvidersAllowed'],
 }
 </script>
--- a/web-frontend/modules/builder/components/workflowAction/RefreshDataSourceWorkflowActionForm.vue
+++ b/web-frontend/modules/builder/components/workflowAction/RefreshDataSourceWorkflowActionForm.vue
@ -1,6 +1,11 @@
 <template>
  <form @submit.prevent>
-    <FormGroup :label="$t('tableElementForm.dataSource')" small-label required>
+    <FormGroup
+      :label="$t('tableElementForm.dataSource')"
+      small-label
+      required
+      class="margin-bottom-2"
+    >
      <div class="control__elements">
        <Dropdown v-model="values.data_source_id" :show-search="false" small>
          <DropdownItem
--- a/web-frontend/modules/builder/mixins/elementForm.js
+++ b/web-frontend/modules/builder/mixins/elementForm.js
@ -1,10 +1,6 @@
 import { resolveColor } from '@baserow/modules/core/utils/colors'
 import { ThemeConfigBlockType } from '@baserow/modules/builder/themeConfigBlockTypes'
 import form from '@baserow/modules/core/mixins/form'
-import {
-  DATA_PROVIDERS_ALLOWED_ELEMENTS,
-  DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS,
-} from '@baserow/modules/builder/enums'

 export default {
  inject: ['workspace', 'builder', 'page', 'mode'],
@ -19,9 +15,6 @@ export default {
        this.builder.theme
      )
    },
-    DATA_PROVIDERS_ALLOWED_ELEMENTS: () => DATA_PROVIDERS_ALLOWED_ELEMENTS,
-    DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS: () =>
-      DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS,
  },
  methods: {
    resolveColor,
--- a/web-frontend/modules/builder/mixins/formElementForm.js
+++ b/web-frontend/modules/builder/mixins/formElementForm.js
@ -0,0 +1,12 @@
+import elementForm from '@baserow/modules/builder/mixins/elementForm'
+import { DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS } from '@baserow/modules/builder/enums'
+
+export default {
+  inject: ['workspace', 'builder', 'page', 'mode'],
+  mixins: [elementForm],
+  provide() {
+    return {
+      dataProvidersAllowed: DATA_PROVIDERS_ALLOWED_FORM_ELEMENTS,
+    }
+  },
+}
--- a/web-frontend/modules/builder/pages/pageEditor.vue
+++ b/web-frontend/modules/builder/pages/pageEditor.vue
@ -22,7 +22,7 @@ import PagePreview from '@baserow/modules/builder/components/page/PagePreview'
 import PageSidePanels from '@baserow/modules/builder/components/page/PageSidePanels'
 import { DataProviderType } from '@baserow/modules/core/dataProviderTypes'
 import { BuilderApplicationType } from '@baserow/modules/builder/applicationTypes'
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import ApplicationBuilderFormulaInput from '@baserow/modules/builder/components/ApplicationBuilderFormulaInput'
 import _ from 'lodash'

 const mode = 'editing'
@ -36,7 +36,7 @@ export default {
      builder: this.builder,
      page: this.page,
      mode,
-      formulaComponent: ApplicationBuilderFormulaInputGroup,
+      formulaComponent: ApplicationBuilderFormulaInput,
      applicationContext: this.applicationContext,
    }
  },
--- a/web-frontend/modules/builder/pages/publicPage.vue
+++ b/web-frontend/modules/builder/pages/publicPage.vue
@ -16,7 +16,7 @@ import { resolveApplicationRoute } from '@baserow/modules/builder/utils/routing'

 import { DataProviderType } from '@baserow/modules/core/dataProviderTypes'
 import Toasts from '@baserow/modules/core/components/toasts/Toasts'
-import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
+import ApplicationBuilderFormulaInput from '@baserow/modules/builder/components/ApplicationBuilderFormulaInput'
 import _ from 'lodash'

 import {
@ -44,7 +44,7 @@ export default {
      builder: this.builder,
      page: this.page,
      mode: this.mode,
-      formulaComponent: ApplicationBuilderFormulaInputGroup,
+      formulaComponent: ApplicationBuilderFormulaInput,
      applicationContext: this.applicationContext,
    }
  },
--- a/web-frontend/modules/core/assets/scss/components/formula_input_field.scss
+++ b/web-frontend/modules/core/assets/scss/components/formula_input_field.scss
@ -1,14 +1,14 @@
 .formula-input-field {
-  font-size: 13px;
-  line-height: 25px;
-  padding: 10px 12px;
-  min-height: 48px;
  height: auto;
+  font-size: 13px;
+  min-height: 38px;
+  padding: 5px 12px;
+  line-height: 25px;

-  &.formula-input-field--small {
-    min-height: 38px;
-    padding: 5px 12px;
+  &.formula-input-field--large {
    line-height: 25px;
+    padding: 10px 12px;
+    min-height: 48px;
  }
 }

--- a/web-frontend/modules/core/components/formula/FormulaInputGroup.vue
+++ b/web-frontend/modules/core/components/formula/FormulaInputGroup.vue
@ -1,91 +0,0 @@
-<template>
-  <FormGroup
-    :label="label"
-    :small-label="smallLabel"
-    :horizontal="horizontal"
-    :helper-text="helpText"
-    :required="required"
-  >
-    <FormulaInputField
-      :value="value"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :data-providers="dataProviders"
-      :data-explorer-loading="dataExplorerLoading"
-      :application-context="applicationContext"
-      :small="small"
-      @input="$emit('input', $event)"
-    />
-    <template #after-input>
-      <slot name="after-input"></slot>
-    </template>
-  </FormGroup>
-</template>
-
-<script>
-import FormulaInputField from '@baserow/modules/core/components/formula/FormulaInputField'
-
-export default {
-  components: { FormulaInputField },
-  props: {
-    value: {
-      type: String,
-      required: true,
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    label: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    placeholder: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    helpText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    small: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    smallLabel: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    horizontal: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    dataProviders: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    dataExplorerLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    applicationContext: {
-      type: Object,
-      required: true,
-    },
-  },
-}
-</script>
--- a/web-frontend/modules/core/components/formula/InjectedFormulaInputGroup.vue
+++ b/web-frontend/modules/core/components/formula/InjectedFormulaInputGroup.vue
@ -13,7 +13,7 @@

 <script>
 export default {
-  name: 'InjectedFormulaInputGroup',
+  name: 'InjectedFormulaInput',
  inject: ['formulaComponent', 'dataProvidersAllowed'],
 }
 </script>
--- a/web-frontend/modules/integrations/localBaserow/components/services/FieldMapping.vue
+++ b/web-frontend/modules/integrations/localBaserow/components/services/FieldMapping.vue
@ -1,37 +1,34 @@
 <template>
-  <div>
-    <InjectedFormulaInputGroup
+  <FormGroup required class="margin-bottom-2">
+    <InjectedFormulaInput
      v-model="fieldValue"
      :disabled="!fieldMapping.enabled"
      v-bind="$attrs"
-      class="margin-bottom-2"
-    >
-      <template #after-input>
-        <div ref="editFieldMappingOpener">
-          <Button
-            type="secondary"
-            size="regular"
-            icon="iconoir-more-vert"
-            @click="openContext"
-          ></Button>
-        </div>
-        <FieldMappingContext
-          ref="fieldMappingContext"
-          :field-mapping="fieldMapping"
-          @edit="$emit('change', $event)"
-        ></FieldMappingContext>
-      </template>
-    </InjectedFormulaInputGroup>
-  </div>
+    />
+    <template #after-input>
+      <div ref="editFieldMappingOpener">
+        <Button
+          type="secondary"
+          icon="iconoir-more-vert"
+          @click="openContext"
+        />
+      </div>
+      <FieldMappingContext
+        ref="fieldMappingContext"
+        :field-mapping="fieldMapping"
+        @edit="$emit('change', $event)"
+      />
+    </template>
+  </FormGroup>
 </template>

 <script>
-import InjectedFormulaInputGroup from '@baserow/modules/core/components/formula/InjectedFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
 import FieldMappingContext from '@baserow/modules/integrations/localBaserow/components/services/FieldMappingContext'

 export default {
  name: 'FieldMapping',
-  components: { FieldMappingContext, InjectedFormulaInputGroup },
+  components: { FieldMappingContext, InjectedFormulaInput },
  props: {
    fieldMapping: {
      type: Object,
--- a/web-frontend/modules/integrations/localBaserow/components/services/FieldMappingForm.vue
+++ b/web-frontend/modules/integrations/localBaserow/components/services/FieldMappingForm.vue
@ -1,15 +1,18 @@
 <template>
  <div>
-    <FieldMapping
+    <FormGroup
      v-for="field in fields"
      :key="field.id"
-      small
      small-label
      :label="field.name"
-      :field-mapping="getFieldMapping(field.id)"
-      :placeholder="$t('upsertRowWorkflowActionForm.fieldMappingPlaceholder')"
-      @change="updateFieldMapping(field.id, $event)"
-    ></FieldMapping>
+      required
+    >
+      <FieldMapping
+        :field-mapping="getFieldMapping(field.id)"
+        :placeholder="$t('upsertRowWorkflowActionForm.fieldMappingPlaceholder')"
+        @change="updateFieldMapping(field.id, $event)"
+      />
+    </FormGroup>
  </div>
 </template>

--- a/web-frontend/modules/integrations/localBaserow/components/services/LocalBaserowGetRowForm.vue
+++ b/web-frontend/modules/integrations/localBaserow/components/services/LocalBaserowGetRowForm.vue
@ -13,13 +13,18 @@
      </div>
      <div class="row">
        <div class="col col-6">
-          <InjectedFormulaInputGroup
-            v-model="values.row_id"
-            small
+          <FormGroup
+            small-label
            :label="$t('localBaserowGetRowForm.rowFieldLabel')"
-            :placeholder="$t('localBaserowGetRowForm.rowFieldPlaceHolder')"
-            :help-text="$t('localBaserowGetRowForm.rowFieldHelpText')"
-          />
+          >
+            <InjectedFormulaInput
+              v-model="values.row_id"
+              :placeholder="$t('localBaserowGetRowForm.rowFieldPlaceHolder')"
+            />
+            <template #helper>
+              {{ $t('localBaserowGetRowForm.rowFieldHelpText') }}
+            </template>
+          </FormGroup>
        </div>
      </div>
      <div class="row">
@ -45,13 +50,14 @@
              :title="$t('localBaserowGetRowForm.searchTabTitle')"
              class="data-source-form__search-form-tab"
            >
-              <InjectedFormulaInputGroup
-                v-model="values.search_query"
-                small
-                :placeholder="
-                  $t('localBaserowGetRowForm.searchFieldPlaceHolder')
-                "
-              />
+              <FormGroup>
+                <InjectedFormulaInput
+                  v-model="values.search_query"
+                  :placeholder="
+                    $t('localBaserowGetRowForm.searchFieldPlaceHolder')
+                  "
+                />
+              </FormGroup>
            </Tab>
          </Tabs>
        </div>
@ -62,22 +68,18 @@

 <script>
 import form from '@baserow/modules/core/mixins/form'
-import { DATA_PROVIDERS_ALLOWED_DATA_SOURCES } from '@baserow/modules/builder/enums'
 import LocalBaserowTableSelector from '@baserow/modules/integrations/localBaserow/components/services/LocalBaserowTableSelector'
 import LocalBaserowTableServiceConditionalForm from '@baserow/modules/integrations/localBaserow/components/services/LocalBaserowTableServiceConditionalForm'
-import InjectedFormulaInputGroup from '@baserow/modules/core/components/formula/InjectedFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'

 export default {
  components: {
-    InjectedFormulaInputGroup,
+    InjectedFormulaInput,
    LocalBaserowTableSelector,
    LocalBaserowTableServiceConditionalForm,
  },
  mixins: [form],
  inject: ['page'],
-  provide() {
-    return { dataProvidersAllowed: DATA_PROVIDERS_ALLOWED_DATA_SOURCES }
-  },
  props: {
    builder: {
      type: Object,
--- a/web-frontend/modules/integrations/localBaserow/components/services/LocalBaserowListRowsForm.vue
+++ b/web-frontend/modules/integrations/localBaserow/components/services/LocalBaserowListRowsForm.vue
@ -46,7 +46,7 @@
            :title="$t('localBaserowListRowsForm.searchTabTitle')"
            class="data-source-form__search-form-tab"
          >
-            <InjectedFormulaInputGroup
+            <InjectedFormulaInput
              v-model="values.search_query"
              small
              :placeholder="
@ -65,21 +65,17 @@ import form from '@baserow/modules/core/mixins/form'
 import LocalBaserowTableSelector from '@baserow/modules/integrations/localBaserow/components/services/LocalBaserowTableSelector'
 import LocalBaserowTableServiceConditionalForm from '@baserow/modules/integrations/localBaserow/components/services/LocalBaserowTableServiceConditionalForm'
 import LocalBaserowTableServiceSortForm from '@baserow/modules/integrations/localBaserow/components/services/LocalBaserowTableServiceSortForm'
-import { DATA_PROVIDERS_ALLOWED_DATA_SOURCES } from '@baserow/modules/builder/enums'
-import InjectedFormulaInputGroup from '@baserow/modules/core/components/formula/InjectedFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'

 export default {
  components: {
-    InjectedFormulaInputGroup,
+    InjectedFormulaInput,
    LocalBaserowTableSelector,
    LocalBaserowTableServiceSortForm,
    LocalBaserowTableServiceConditionalForm,
  },
  mixins: [form],
  inject: ['page'],
-  provide() {
-    return { dataProvidersAllowed: DATA_PROVIDERS_ALLOWED_DATA_SOURCES }
-  },
  props: {
    builder: {
      type: Object,
--- a/web-frontend/modules/integrations/localBaserow/components/services/LocalBaserowTableServiceConditionalForm.vue
+++ b/web-frontend/modules/integrations/localBaserow/components/services/LocalBaserowTableServiceConditionalForm.vue
@ -27,11 +27,10 @@
          slotProps: { filter, filterType: propFilterType },
        }"
      >
-        <InjectedFormulaInputGroup
+        <InjectedFormulaInput
          v-if="filter.value_is_formula && propFilterType.hasEditableValue"
          v-model="filter.value"
          class="filters__value--formula-input"
-          small
          :placeholder="
            $t(
              'localBaserowTableServiceConditionalForm.formulaFilterInputPlaceholder'
@ -83,18 +82,14 @@ import ViewFieldConditionsForm from '@baserow/modules/database/components/view/V
 import { hasCompatibleFilterTypes } from '@baserow/modules/database/utils/field'
 import { notifyIf } from '@baserow/modules/core/utils/error'
 import { v1 as uuidv1 } from 'uuid'
-import InjectedFormulaInputGroup from '@baserow/modules/core/components/formula/InjectedFormulaInputGroup.vue'
-import { DATA_PROVIDERS_ALLOWED_DATA_SOURCES } from '@baserow/modules/builder/enums'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'

 export default {
  name: 'LocalBaserowTableServiceConditionalForm',
  components: {
-    InjectedFormulaInputGroup,
+    InjectedFormulaInput,
    ViewFieldConditionsForm,
  },
-  provide() {
-    return { dataProvidersAllowed: DATA_PROVIDERS_ALLOWED_DATA_SOURCES }
-  },
  props: {
    value: {
      type: Array,
--- a/web-frontend/modules/integrations/localBaserow/components/services/LocalBaserowUpsertRowServiceForm.vue
+++ b/web-frontend/modules/integrations/localBaserow/components/services/LocalBaserowUpsertRowServiceForm.vue
@ -20,16 +20,18 @@
      :databases="databases"
      :display-view-dropdown="false"
    />
-
-    <InjectedFormulaInputGroup
+    <FormGroup
      v-if="enableRowId && values.integration_id"
-      v-model="values.row_id"
-      small
      small-label
-      class="margin-bottom-2"
-      :placeholder="$t('upsertRowWorkflowActionForm.rowIdPlaceholder')"
      :label="$t('upsertRowWorkflowActionForm.rowIdLabel')"
-    />
+      class="margin-bottom-2"
+      required
+    >
+      <InjectedFormulaInput
+        v-model="values.row_id"
+        :placeholder="$t('upsertRowWorkflowActionForm.rowIdPlaceholder')"
+      />
+    </FormGroup>
    <p v-if="selectedIntegration && !values.table_id">
      {{ $t('upsertRowWorkflowActionForm.noTableSelectedMessage') }}
    </p>
@ -46,7 +48,8 @@
 import LocalBaserowTableSelector from '@baserow/modules/integrations/localBaserow/components/services/LocalBaserowTableSelector'
 import { LocalBaserowIntegrationType } from '@baserow/modules/integrations/integrationTypes'
 import FieldMappingForm from '@baserow/modules/integrations/localBaserow/components/services/FieldMappingForm'
-import InjectedFormulaInputGroup from '@baserow/modules/core/components/formula/InjectedFormulaInputGroup'
+import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
+
 import IntegrationDropdown from '@baserow/modules/core/components/integrations/IntegrationDropdown'
 import form from '@baserow/modules/core/mixins/form'

@ -56,7 +59,7 @@ export default {
    IntegrationDropdown,
    FieldMappingForm,
    LocalBaserowTableSelector,
-    InjectedFormulaInputGroup,
+    InjectedFormulaInput,
  },
  mixins: [form],
  props: {