Nuxt migration: Fix guided tour and remove TODOs (baserow#4551)

* Fix TODOs

* Add TODO MIG to add skeleton loader. Remove unused router.

Author: paljort

web-frontend/modules/builder/pageActionTypes.js

@@ -67,7 +67,6 @@ export class PublishPageActionType extends PageActionType {
   }
 
   isActive({ workspace, page }) {
-    if (!page || !workspace) return false // TODO MIG remove this
     return this.app.$hasPermission('builder.domain.publish', page, workspace.id)
   }
 
@@ -98,8 +97,6 @@ export class PreviewPageActionType extends PageActionType {
      * @param page        The Page object.
      */
 
-    if (!page || !page.path) return '' // TODO MIG remove this
-
     const toPath = compile(page.path, { encode: encodeURIComponent })
     const pageParams = Object.fromEntries(
       page.path_params.map(({ name, value }) => [name, page.parameters[name]])
@@ -120,7 +117,6 @@ export class PreviewPageActionType extends PageActionType {
   }
 
   isActive({ workspace, page }) {
-    if (!page || !workspace) return false // TODO MIG remove this
     return this.app.$hasPermission('builder.domain.publish', page, workspace.id)
   }
 

web-frontend/modules/builder/pages/pageEditor.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="page-editor">
+  <!-- TODO MIG add a skeleton loader while the page is loading. -->
+  <div v-if="builder && currentPage && sharedPage" class="page-editor">
     <PageHeader />
     <div class="layout__col-2-2 page-editor__content">
       <div :style="{ width: `calc(100% - ${panelWidth}px)` }">
@@ -41,7 +42,6 @@ definePageMeta({
 
 const mode = 'editing'
 const route = useRoute()
-const router = useRouter()
 const { $store, $registry, $i18n } = useNuxtApp()
 
 const panelWidth = ref(360)
@@ -129,7 +129,6 @@ const currentPage = computed(() => pageData.value?.page ?? null)
 
 // Computed properties
 const dataSources = computed(() => {
-  if (!currentPage.value) return []
   return $store.getters['dataSource/getPageDataSources'](currentPage.value)
 })
 
@@ -139,7 +138,6 @@ const sharedPage = computed(() => {
 })
 
 const sharedDataSources = computed(() => {
-  if (!sharedPage.value) return []
   return $store.getters['dataSource/getPageDataSources'](sharedPage.value)
 })
 
@@ -219,19 +217,16 @@ watch(
 
 // Navigation guards
 onBeforeRouteUpdate((to, from) => {
-  // TODO MIG Somehow this hook is called when we leave the route for another component
-  // This tests avoid navigation errors.
-  if (from.params.builderId === undefined) {
-    return
-  }
   // Unselect previously selected element
   const currentBuilder = $store.getters['application/get'](
     parseInt(from.params.builderId)
   )
-  $store.dispatch('element/select', {
-    builder: currentBuilder,
-    element: null,
-  })
+  if (currentBuilder) {
+    $store.dispatch('element/select', {
+      builder: currentBuilder,
+      element: null,
+    })
+  }
   if (from.params.builderId !== to.params?.builderId) {
     // When we switch from one application to another we want to logoff the current user
     if (currentBuilder) {

web-frontend/modules/builder/pages/publicPage.vue

@@ -80,7 +80,6 @@ const { data: asyncDataResult, error } = await useAsyncData(
   `publicPage_${requestHostname}_${route.fullPath}`,
   async () => {
     let mode = 'public'
-    //const params = route.params
     const query = route.query
 
     const builderId = route.params.builderId
@@ -119,13 +118,10 @@ const { data: asyncDataResult, error } = await useAsyncData(
           )
         }
       } catch (e) {
-        console.log(e)
-        throw e
-        // TODO MIG doesn't work
-        /*throw createError({
+        throw createError({
           statusCode: 404,
           statusMessage: $i18n.t('publicPage.siteNotFound'),
-        })*/
+        })
       }
 
       needPostBuilderLoading = true
@@ -215,7 +211,6 @@ const { data: asyncDataResult, error } = await useAsyncData(
 
     // Handle 404
     if (!found) {
-      // TODO MIG this doesn't work
       throw createError({
         statusCode: 404,
         statusMessage: $i18n.t('publicPage.pageNotFound'),
@@ -226,7 +221,6 @@ const { data: asyncDataResult, error } = await useAsyncData(
     // Handle 404
     if (pageFound.shared) {
       throw createError({
-        // TODO MIG this doesn't work
         statusCode: 404,
         statusMessage: $i18n.t('publicPage.pageNotFound'),
       })
@@ -404,10 +398,6 @@ const sharedPage = computed(() =>
   store.getters['page/getSharedPage'](builder.value)
 )
 
-const sharedDataSources = computed(() =>
-  store.getters['dataSource/getPageDataSources'](sharedPage.value)
-)
-
 const sharedElements = computed(() =>
   store.getters['element/getRootElements'](sharedPage.value)
 )
@@ -443,8 +433,6 @@ const headConfig = computed(() => {
     bodyAttrs: {
       class: 'public-page',
     },
-    // TODO MIG it shouldn't be necessary anymore but need to check
-    //__dangerouslyDisableSanitizers: ['style'],
     style: [{ children: `:root { ${cssVars} }`, type: 'text/css' }],
   }
 

web-frontend/modules/builder/store/dataSource.js

@@ -388,19 +388,10 @@ const actions = {
 
 const getters = {
   getPageDataSources: (state) => (page) => {
-    if (!page || !page.dataSources) return [] // TODO MIG: remove this
     return page.dataSources
   },
   getPagesDataSources: (state) => (pages) => {
-    if (!pages) return [] // TODO MIG: remove this
-    // TODO MIG: this is a fix for the fact that pages.dataSources is not an array, might not be useful at the.
-    // Replace it with the original return below
-    return pages
-      .filter((page) => page && page.dataSources)
-      .map(({ dataSources }) => dataSources)
-      .flat()
-    // TODO MIG: original return is the following
-    // return pages.map(({ dataSources }) => dataSources).flat()
+    return pages.map(({ dataSources }) => dataSources).flat()
   },
   getPagesDataSourceById: (state, getters) => (pages, id) => {
     return getters
@@ -411,7 +402,6 @@ const getters = {
     return getters.getPagesDataSourceById([page], id)
   },
   getLoading: (state) => (page) => {
-    if (!page || !page._) return false // TODO MIG: remove this
     return page._.dataSourceLoading
   },
 }

web-frontend/modules/builder/store/element.js

@@ -504,7 +504,6 @@ const actions = {
 
 const getters = {
   getElementById: (state, getters) => (page, id) => {
-    if (!page || !page.elementMap) return null // TODO MIG remove this
     if (id && Object.prototype.hasOwnProperty.call(page.elementMap, `${id}`)) {
       return page.elementMap[`${id}`]
     }
@@ -520,7 +519,6 @@ const getters = {
     return null
   },
   getElementsOrdered: (state, getters) => (page) => {
-    if (!page || !page.orderedElements) return [] // TODO MIG remove this
     return page.orderedElements
   },
   getRootElements: (state, getters) => (page) => {

web-frontend/modules/builder/store/page.js

@@ -182,7 +182,6 @@ const actions = {
 
 const getters = {
   getAllPages: (state) => (builder) => {
-    if (!builder || !builder.pages) return [] // TODO MIG remove this
     return builder.pages
   },
   getById: (state, getters) => (builder, pageId) => {
@@ -205,9 +204,7 @@ const getters = {
       .sort((a, b) => a.order - b.order)
   },
   getSharedPage: (state, getters) => (builder) => {
-    return (
-      getters.getAllPages(builder).find((page) => page.shared === true) || null // TODO MIG remove the || null
-    )
+    return getters.getAllPages(builder).find((page) => page.shared === true)
   },
   getSelected(state) {
     return state.selected

web-frontend/modules/core/assets/scss/colors.scss

@@ -240,5 +240,5 @@ $colors: (
   'darker-gray': $color-neutral-400,
 
   'deep-dark-green': $color-success-500,
-  'deep-dark-orange': $color-warning-500
+  'deep-dark-orange': $color-warning-500,
 );

web-frontend/modules/core/plugins/routeMounted.js

@@ -52,13 +52,5 @@ export default defineNuxtPlugin((nuxtApp) => {
         })
       }
     },
-    beforeUnmount() {
-      if (this.$route && this.$route.meta.layout !== undefined) {
-        this.$store.commit('routeMounted/SET_ROUTE_MOUNTED', {
-          mounted: false,
-          route: null,
-        })
-      }
-    },
   })
 })