Various fixes for nuxt3 migration (baserow#4604)

Author: dimmur-brw

enterprise/web-frontend/modules/baserow_enterprise/components/crudTable/fields/HighestPaidRoleField.vue

@@ -46,7 +46,7 @@ export default {
     },
     roles() {
       // filters out role not for Team subject and not for workspace level
-      return this.workspace ? this.workspace._.roles : []
+      return this.workspace?._.roles || []
     },
     showBillable() {
       return this.$hasPermission(

enterprise/web-frontend/modules/baserow_enterprise/components/member-roles/MemberRolesModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal @show="onShow" @hidden="hideError">
+  <Modal ref="modal" @show="onShow" @hidden="hideError">
     <Error v-if="error.visible" :error="error"></Error>
     <Tabs
       v-else
@@ -20,7 +20,9 @@
           scope-type="application"
           @invite-members="inviteDatabaseMembers"
           @invite-teams="inviteDatabaseTeams"
-          @role-updated="updateRole(databaseRoleAssignments, ...arguments)"
+          @role-updated="
+            (ra, role) => updateRole(databaseRoleAssignments, ra, role)
+          "
         />
       </Tab>
       <Tab
@@ -36,7 +38,9 @@
           scope-type="database_table"
           @invite-members="inviteTableMembers"
           @invite-teams="inviteTableTeams"
-          @role-updated="updateRole(tableRoleAssignments, ...arguments)"
+          @role-updated="
+            (ra, role) => updateRole(tableRoleAssignments, ra, role)
+          "
         />
       </Tab>
       <Tab
@@ -52,7 +56,9 @@
           scope-type="database_view"
           @invite-members="inviteViewMembers"
           @invite-teams="inviteViewTeams"
-          @role-updated="updateRole(viewRoleAssignments, ...arguments)"
+          @role-updated="
+            (ra, role) => updateRole(viewRoleAssignments, ra, role)
+          "
         />
       </Tab>
     </Tabs>
@@ -313,8 +319,10 @@ export default {
       }
 
       try {
+        const subjectId =
+          roleAssignment.subject?.id ?? roleAssignment.subject_id
         await RoleAssignmentsService(this.$client).assignRole(
-          roleAssignment.subject.id,
+          subjectId,
           roleAssignment.subject_type,
           this.workspace.id,
           roleAssignment.scope_id,

enterprise/web-frontend/modules/baserow_enterprise/components/member-roles/RoleSelector.vue

@@ -1,19 +1,19 @@
 <template>
   <div>
     <span v-if="disabled">
-      {{ value.name }}
+      {{ currentValue.name }}
     </span>
     <a
       v-else
       ref="editRoleContextLink"
       @click="$refs.editRoleContext.toggle($refs.editRoleContextLink)"
     >
-      {{ value.name }}
+      {{ currentValue.name }}
       <i class="iconoir-nav-arrow-down"></i>
     </a>
     <EditRoleContext
       ref="editRoleContext"
-      :subject="value"
+      :subject="currentValue"
       :roles="roles"
       :allow-removing-role="allowRemovingRole"
       :workspace="workspace"
@@ -29,12 +29,16 @@ import EditRoleContext from '@baserow/modules/core/components/settings/members/E
 
 export default {
   name: 'RoleSelector',
-  emits: ['delete', 'input'],
+  emits: ['delete', 'input', 'update:modelValue'],
   components: { EditRoleContext },
   props: {
     value: {
       type: Object,
-      default: () => ({}),
+      default: undefined,
+    },
+    modelValue: {
+      type: Object,
+      default: undefined,
     },
     roles: {
       type: Array,
@@ -53,10 +57,16 @@ export default {
       required: true,
     },
   },
+  computed: {
+    currentValue() {
+      return this.modelValue !== undefined ? this.modelValue : this.value || {}
+    },
+  },
   methods: {
     roleUpdated({ uid }) {
       const role = this.roles.find((role) => role.uid === uid)
       this.$emit('input', role)
+      this.$emit('update:modelValue', role)
     },
   },
 }

enterprise/web-frontend/modules/baserow_enterprise/components/rbac/SelectMembersList.vue

@@ -19,6 +19,7 @@
     <List
       class="margin-top-2 select-members-list__items"
       :items="usersFiltered"
+      :selected-items="usersSelected"
       :attributes="['email']"
       selectable
       @selected="userSelected"

enterprise/web-frontend/modules/baserow_enterprise/components/rbac/SelectTeamsList.vue

@@ -19,6 +19,7 @@
     <List
       class="margin-top-2 select-teams-list__items"
       :items="teamsFiltered"
+      :selected-items="teamsSelected"
       :attributes="[]"
       selectable
       @selected="teamSelected"

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

@@ -177,7 +177,7 @@ export default {
         const { data: viewsData } = await ViewService(this.$client).fetchAll(
           this.table.id
         )
-        viewsData.forEach((v) => populateView(v))
+        viewsData.forEach((v) => populateView(v, this.$registry))
         this.views = viewsData
       } catch (error) {
         this.handleError(error, 'views')

premium/web-frontend/modules/baserow_premium/components/views/PremiumViewOptions.vue

@@ -12,7 +12,10 @@
         :disabled="!hasPremiumFeatures"
         @input="update('show_logo', !$event)"
       >
-        <img src="@baserow/modules/core/static/img/baserow-icon.svg?url" />
+        <img
+          class="switch__icon"
+          src="@baserow/modules/core/static/img/baserow-icon.svg?url"
+        />
         <span>
           {{ $t('shareLinkOptions.baserowLogo.label') }}
         </span>
@@ -39,7 +42,7 @@
         :disabled="!hasPremiumFeatures"
         @input="update('allow_public_export', $event)"
       >
-        <i class="iconoir iconoir-share-ios"></i>
+        <i class="switch__icon iconoir-share-ios"></i>
         <span>
           {{ $t('shareLinkOptions.allowPublicExportLabel') }}
         </span>

premium/web-frontend/modules/baserow_premium/components/views/form/FormViewModeSurvey.vue

@@ -173,7 +173,13 @@ export default {
 
       this.questionIndex++
     },
-    validateAndNext(fieldIndex) {
+    async validateAndNext(fieldIndex) {
+      const activeElement = document.activeElement
+      if (activeElement && activeElement !== document.body) {
+        activeElement.blur()
+      }
+      await this.$nextTick()
+
       const field = this.visibleFieldsWithoutHiddenViaQueryParam[fieldIndex]
       field._.touched = true
 

web-frontend/config/nuxt.config.base.ts

@@ -107,4 +107,9 @@ export default defineNuxtConfig({
   experimental: {
     appManifest: process.env.NODE_ENV !== 'development',
   },
+  vue: {
+    compilerOptions: {
+      comments: false,
+    },
+  },
 })

web-frontend/justfile

@@ -105,7 +105,7 @@ ci-test:
 # Update Jest snapshots
 [group('3 - testing')]
 update-snapshots:
-    yarn run jest --updateSnapshot
+    yarn test --update
 
 # =============================================================================
 # Development