fix(gui-v2): prevent missing injection warnings

packages/nc-gui-v2/components.d.ts

@@ -137,6 +137,7 @@ declare module '@vue/runtime-core' {
     MdiFileEyeOutline: typeof import('~icons/mdi/file-eye-outline')['default']
     MdiFilePlusOutline: typeof import('~icons/mdi/file-plus-outline')['default']
     MdiFileUploadOutline: typeof import('~icons/mdi/file-upload-outline')['default']
+    MdiFilterOutline: typeof import('~icons/mdi/filter-outline')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']
     MdiFlashOutline: typeof import('~icons/mdi/flash-outline')['default']
     MdiFolder: typeof import('~icons/mdi/folder')['default']
@@ -163,6 +164,7 @@ declare module '@vue/runtime-core' {
     MdiNotebookCheckOutline: typeof import('~icons/mdi/notebook-check-outline')['default']
     MdiNumeric: typeof import('~icons/mdi/numeric')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
+    MdiPencil: typeof import('~icons/mdi/pencil')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusBoxOutline: typeof import('~icons/mdi/plus-box-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']

packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { watchEffect } from '@vue/runtime-core'
 import type ColumnFilter from './ColumnFilter.vue'
-import { ActiveViewInj, IsLockedInj, IsPublicInj } from '~/context'
+import { ActiveViewInj, IsLockedInj, IsPublicInj, computed, inject, ref, useGlobal, useViewFilters, watchEffect } from '#imports'
-import MdiFilterIcon from '~icons/mdi/filter-outline'
+
-import MdiMenuDownIcon from '~icons/mdi/menu-down'
+const isLocked = inject(IsLockedInj, ref(false))
 
-const isLocked = inject(IsLockedInj)
 const activeView = inject(ActiveViewInj)
-const isPublic = inject(IsPublicInj)
+
+const isPublic = inject(IsPublicInj, ref(false))
 
 const { filterAutoSave } = useGlobal()
 
+const filterComp = ref<typeof ColumnFilter>()
+
 // todo: avoid duplicate api call by keeping a filter store
 const { filters, loadFilters } = useViewFilters(
   activeView,
@@ -19,17 +20,16 @@ const { filters, loadFilters } = useViewFilters(
 )
 
 const filtersLength = ref(0)
+
 watchEffect(async () => {
   if (activeView?.value) {
     await loadFilters()
-    filtersLength.value = filters?.value?.length ?? 0
+
+    filtersLength.value = filters.value.length || 0
   }
 })
-const filterComp = ref<typeof ColumnFilter>()
 
-const applyChanges = async () => {
+const applyChanges = async () => await filterComp.value?.applyChanges()
-  await filterComp?.value?.applyChanges()
-}
 </script>
 
 <template>
@@ -37,10 +37,10 @@ const applyChanges = async () => {
     <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
       <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex align-center gap-1">
-          <MdiFilterIcon />
+          <MdiFilterOutline />
           <!-- Filter -->
           <span class="text-capitalize !text-sm font-weight-medium">{{ $t('activity.filter') }}</span>
-          <MdiMenuDownIcon class="text-grey" />
+          <MdiMenuDown class="text-grey" />
         </div>
       </a-button>
     </div>

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -1,14 +1,31 @@
 <script setup lang="ts">
 import Draggable from 'vuedraggable'
-import { ActiveViewInj, FieldsInj, IsLockedInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+import {
-import { computed, inject, useNuxtApp, useViewColumns, watch } from '#imports'
+  ActiveViewInj,
+  FieldsInj,
+  IsLockedInj,
+  IsPublicInj,
+  MetaInj,
+  ReloadViewDataHookInj,
+  computed,
+  inject,
+  ref,
+  useNuxtApp,
+  useViewColumns,
+  watch,
+} from '#imports'
 
 const meta = inject(MetaInj)!
+
 const activeView = inject(ActiveViewInj)!
+
 const reloadDataHook = inject(ReloadViewDataHookInj)!
+
 const rootFields = inject(FieldsInj)
-const isLocked = inject(IsLockedInj)
+
-const isPublic = inject(IsPublicInj)
+const isLocked = inject(IsLockedInj, ref(false))
+
+const isPublic = inject(IsPublicInj, ref(false))
 
 const { $e } = useNuxtApp()
 

packages/nc-gui-v2/components/smartsheet/Cell.vue

@@ -9,7 +9,9 @@ import {
   IsLockedInj,
   IsPublicInj,
   computed,
+  inject,
   provide,
+  ref,
   toRef,
   useColumn,
   useDebounceFn,
@@ -42,11 +44,11 @@ provide(EditModeInj, useVModel(props, 'editEnabled', emit))
 
 provide(ActiveCellInj, active)
 
-const isForm = inject(IsFormInj)
+const isForm = inject(IsFormInj, ref(false))
 
-const isPublic = inject(IsPublicInj)
+const isPublic = inject(IsPublicInj, ref(false))
 
-const isLocked = inject(IsLockedInj)
+const isLocked = inject(IsLockedInj, ref(false))
 
 let changed = $ref(false)
 

packages/nc-gui-v2/composables/useGlobal/actions.ts

@@ -1,11 +1,10 @@
 import { message } from 'ant-design-vue'
+import { Api } from 'nocodb-sdk'
 import type { Actions, State } from './types'
-import { useNuxtApp } from '#imports'
 
 export function useGlobalActions(state: State): Actions {
-  // todo replace with just `new Api()`? Would solve recursion issues
+  /** detached api instance, will not trigger global loading */
-  /** we have to use the globally injected api instance, otherwise we run into recursion as `useApi` calls `useGlobal` */
+  const api = new Api()
-  const { $api } = useNuxtApp()
 
   /** Sign out by deleting the token from localStorage */
   const signOut: Actions['signOut'] = () => {
@@ -30,7 +29,7 @@ export function useGlobalActions(state: State): Actions {
 
   /** manually try to refresh token */
   const refreshToken = async () => {
-    $api.instance
+    api.instance
       .post('/auth/refresh-token', null, {
         withCredentials: true,
       })

packages/nc-gui-v2/composables/useViewFilters.ts

@@ -1,6 +1,17 @@
 import type { ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
-import { IsPublicInj, ReloadViewDataHookInj, useMetas, useNuxtApp, useUIPermission } from '#imports'
+import {
+  IsPublicInj,
+  ReloadViewDataHookInj,
+  computed,
+  inject,
+  ref,
+  useMetas,
+  useNuxtApp,
+  useSharedView,
+  useUIPermission,
+  watch,
+} from '#imports'
 import type { Filter } from '~/lib'
 
 export function useViewFilters(
@@ -17,12 +28,15 @@ export function useViewFilters(
   const _filters = ref<Filter[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
+
   const { $api } = useNuxtApp()
+
   const { isUIAllowed } = useUIPermission()
+
   const { metas } = useMetas()
 
   const filters = computed({
-    get: () => (isPublic.value ? siblingFilters || nestedFilters.value : _filters.value),
+    get: () => (isPublic.value ? siblingFilters || nestedFilters.value : _filters.value) ?? [],
     set: (value) => {
       if (isPublic.value) {
         if (siblingFilters) {
@@ -94,6 +108,7 @@ export function useViewFilters(
     // if shared or sync permission not allowed simply remove it from array
     if (isPublic.value || !isUIAllowed('filterSync')) {
       filters.value.splice(i, 1)
+
       reloadData?.()
     } else {
       if (filter.id) {
@@ -103,7 +118,9 @@ export function useViewFilters(
           // if auto-apply enabled invoke delete api and remove from array
         } else {
           await $api.dbTableFilter.delete(filter.id)
+
           reloadData?.()
+
           filters.value.splice(i, 1)
         }
         // if not synced yet remove it from array
@@ -115,11 +132,14 @@ export function useViewFilters(
 
   const saveOrUpdate = async (filter: Filter, i: number, force = false) => {
     if (isPublic.value) {
-      filters.value[i] = { ...filter } as any
+      filters.value[i] = { ...filter }
+
       filters.value = [...filters.value]
+
       return
     }
     if (!view?.value) return
+
     if (!isUIAllowed('filterSync')) {
       // skip
     } else if (!autoApply?.value && !force) {
@@ -136,12 +156,11 @@ export function useViewFilters(
         fk_parent_id: parentId,
       })) as any
     }
+
     reloadData?.()
   }
 
-  const addFilter = () => {
+  const addFilter = () => filters.value.push(placeholderFilter)
-    filters.value.push(placeholderFilter)
-  }
 
   const addFilterGroup = async () => {
     const child = placeholderFilter
@@ -150,10 +169,13 @@ export function useViewFilters(
       status: 'create',
       logical_op: 'and',
     }
+
     if (isPublic.value) placeHolderGroupFilter.children = [child]
 
     filters.value.push(placeHolderGroupFilter)
+
     const index = filters.value.length - 1
+
     await saveOrUpdate(filters.value[index], index, true)
   }
 
@@ -167,9 +189,7 @@ export function useViewFilters(
       return metas?.value?.[view?.value?.fk_model_id as string]?.columns?.length || 0
     },
     async (nextColsLength, oldColsLength) => {
-      if (nextColsLength < oldColsLength) {
+      if (nextColsLength < oldColsLength) await loadFilters()
-        await loadFilters()
-      }
     },
   )