Nuxt3 builder fixes and cleanup (baserow#4657)

* Fix preview error with page parameter

* Fix OIDC form support

* Fix input border color

* Fix some builder inputs

* Clear some TODO MIGs

* Clean comments

* Update snapshot

* Fix page title

* Fix reactivity issue

* refactor: replace individual RadioButtons with a RadioGroup component for choice option type selection.

* Fix domain

---------

Co-authored-by: Jonathan Adeline <jonathan@baserow.io>

Author: jrmi

enterprise/web-frontend/modules/baserow_enterprise/integrations/common/components/CommonOIDCSettingForm.vue

@@ -123,7 +123,11 @@ export default {
       this.$emit('values-changed', values)
     },
     checkValidity() {
-      if (!this.$refs.form.isFormValid() && this.$refs.form.v$.$anyDirty) {
+      if (
+        this.$refs.form &&
+        !this.$refs.form.isFormValid() &&
+        this.$refs.form.v$.$anyDirty
+      ) {
         this.inError = true
       } else {
         this.inError = false

enterprise/web-frontend/modules/baserow_enterprise/plugin.js

@@ -20,13 +20,6 @@ import {
 } from '@baserow_enterprise/authProviderTypes'
 import { TeamsWorkspaceSettingsPageType } from '@baserow_enterprise/workspaceSettingsPageTypes'
 import { EnterpriseMembersPagePluginType } from '@baserow_enterprise/membersPagePluginTypes'
-import en from '@baserow_enterprise/locales/en.json'
-import fr from '@baserow_enterprise/locales/fr.json'
-import nl from '@baserow_enterprise/locales/nl.json'
-import de from '@baserow_enterprise/locales/de.json'
-import es from '@baserow_enterprise/locales/es.json'
-import it from '@baserow_enterprise/locales/it.json'
-import ko from '@baserow_enterprise/locales/ko.json'
 import {
   AdvancedLicenseType,
   EnterpriseLicenseType,
@@ -100,18 +93,6 @@ export default defineNuxtPlugin({
 
     const context = { app: nuxtApp }
 
-    // Allow locale file hot reloading
-    /*if (isDev && app.i18n) {
-      const { i18n } = app
-      i18n.mergeLocaleMessage('en', en)
-      i18n.mergeLocaleMessage('fr', fr)
-      i18n.mergeLocaleMessage('nl', nl)
-      i18n.mergeLocaleMessage('de', de)
-      i18n.mergeLocaleMessage('es', es)
-      i18n.mergeLocaleMessage('it', it)
-      i18n.mergeLocaleMessage('ko', ko)
-    }*/
-
     $registry.register('plugin', new EnterprisePlugin(context))
 
     $registry.register(

web-frontend/modules/automation/locales/en.json

@@ -1,4 +1,7 @@
 {
+  "automationWorkflow": {
+    "title": "Worflow"
+  },
   "automationWelcomeGuidedTourStep": {
     "title": "Welcome to Baserow Automations!",
     "content": "Let's take a quick tour. You'll see how to set up triggers, add actions, test your workflow, and publish it — no coding required."

web-frontend/modules/automation/pages/automationWorkflow.vue

@@ -63,6 +63,12 @@ definePageMeta({
   ],
 })
 
+const { t } = useI18n()
+
+useHead(() => ({
+  title: t('automationWorkflow.title'),
+}))
+
 const route = useRoute()
 const { $store, $registry } = useNuxtApp()
 

web-frontend/modules/builder/components/domain/CustomDomainForm.vue

@@ -27,7 +27,7 @@ export default {
   mixins: [domainForm],
   emits: ['error'],
   setup() {
-    return { v$: useVuelidate() }
+    return { v$: useVuelidate({ $lazy: true }) }
   },
   data() {
     return {
@@ -47,9 +47,6 @@ export default {
         : ''
     },
   },
-  mounted() {
-    this.$refs.domainName.focus()
-  },
   methods: {
     handleInput() {
       this.serverErrors.domain_name = null

web-frontend/modules/builder/components/elements/baseComponents/ABRadio.vue

@@ -2,7 +2,7 @@
   <div class="ab-radio" @click="toggle">
     <input
       type="radio"
-      :checked="value"
+      :checked="modelValue"
       :required="required"
       class="ab-radio__input"
       :disabled="disabled"
@@ -25,7 +25,7 @@ export default {
     /**
      * The state of the radio.
      */
-    value: {
+    modelValue: {
       type: Boolean,
       required: false,
       default: false,
@@ -63,7 +63,7 @@ export default {
       default: false,
     },
   },
-  emits: ['input'],
+  emits: ['update:modelValue'],
   computed: {
     hasSlot() {
       return !!this.$slots.default
@@ -72,7 +72,7 @@ export default {
   methods: {
     toggle() {
       if (this.disabled || this.readOnly) return
-      this.$emit('input', !this.value)
+      this.$emit('update:modelValue', !this.value)
     },
   },
 }

web-frontend/modules/builder/components/elements/components/ChoiceElement.vue

@@ -31,8 +31,8 @@
             :key="option.id"
             :read-only="isEditMode"
             :error="displayFormDataError"
-            :value="inputValue.includes(option.value)"
-            @input="onOptionChange(option, $event)"
+            :model-value="inputValue.includes(option.value)"
+            @update:model-value="onOptionChange(option, $event)"
           >
             {{ option.name || option.value }}
           </ABCheckbox>
@@ -43,8 +43,8 @@
             :key="option.id"
             :read-only="isEditMode"
             :error="displayFormDataError"
-            :value="option.value === inputValue"
-            @input="onOptionChange(option, $event)"
+            :model-value="option.value === inputValue"
+            @update:model-value="onOptionChange(option, $event)"
           >
             {{ option.name || option.value }}
           </ABRadio>

web-frontend/modules/builder/components/elements/components/forms/general/ChoiceElementForm.vue

@@ -76,20 +76,11 @@
       required
       class="margin-bottom-2"
     >
-      <RadioButton
-        v-model="values.option_type"
-        :value="CHOICE_OPTION_TYPES.MANUAL"
-        icon="iconoir-open-select-hand-gesture"
-      >
-        {{ $t('choiceOptionSelector.manual') }}
-      </RadioButton>
-      <RadioButton
+      <RadioGroup
         v-model="values.option_type"
-        :value="CHOICE_OPTION_TYPES.FORMULAS"
-        icon="iconoir-sigma-function"
-      >
-        {{ $t('choiceOptionSelector.formulas') }}
-      </RadioButton>
+        :options="optionTypeOptions"
+        type="button"
+      />
     </FormGroup>
     <template v-if="values.option_type === CHOICE_OPTION_TYPES.MANUAL">
       <template v-if="values.options.length">
@@ -252,6 +243,20 @@ export default {
         },
       ]
     },
+    optionTypeOptions() {
+      return [
+        {
+          label: this.$t('choiceOptionSelector.manual'),
+          value: CHOICE_OPTION_TYPES.MANUAL,
+          icon: 'iconoir-open-select-hand-gesture',
+        },
+        {
+          label: this.$t('choiceOptionSelector.formulas'),
+          value: CHOICE_OPTION_TYPES.FORMULAS,
+          icon: 'iconoir-sigma-function',
+        },
+      ]
+    },
   },
   watch: {
     'element.options'(options) {

web-frontend/modules/builder/components/userSource/UpdateUserSourceForm.vue

@@ -29,7 +29,6 @@
         />
       </FormGroup>
     </FormRow>
-
     <component
       :is="userSourceType.formComponent"
       v-if="integration"
@@ -104,11 +103,11 @@
 import { useVuelidate } from '@vuelidate/core'
 import form from '@baserow/modules/core/mixins/form'
 import IntegrationDropdown from '@baserow/modules/core/components/integrations/IntegrationDropdown'
-import AuthProviderWithModal from '@baserow/modules/builder/components/userSource/AuthProviderWithModal'
 import { required, maxLength, helpers } from '@vuelidate/validators'
+import _ from 'lodash'
 
 export default {
-  components: { IntegrationDropdown, AuthProviderWithModal },
+  components: { IntegrationDropdown },
   mixins: [form],
   props: {
     builder: {

web-frontend/modules/builder/locales/en.json

@@ -494,7 +494,7 @@
     "numericName": "Numeric"
   },
   "pageEditor": {
-    "title": "Baserow | Application Builder",
+    "title": "Application Builder",
     "pageNotFound": "Page not found"
   },
   "publicPage": {