create useBetaFeatureToggle composable...

and use it for geo feature and Mobile Mode

packages/nc-gui/components.d.ts

@@ -239,6 +239,7 @@ declare module '@vue/runtime-core' {
     MdiTableColumnPlusBefore: typeof import('~icons/mdi/table-column-plus-before')['default']
     MdiTableKey: typeof import('~icons/mdi/table-key')['default']
     MdiTableLarge: typeof import('~icons/mdi/table-large')['default']
+    MdiTestTube: typeof import('~icons/mdi/test-tube')['default']
     MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']

packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@@ -41,6 +41,8 @@ const { $e } = useNuxtApp()
 
 const { appInfo } = useGlobal()
 
+const { betaFeatureToggleState } = useBetaFeatureToggle()
+
 const meta = inject(MetaInj, ref())
 
 const isForm = inject(IsFormInj, ref(false))
@@ -58,7 +60,7 @@ const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 const onlyNameUpdateOnEditColumns = [UITypes.LinkToAnotherRecord, UITypes.Lookup, UITypes.Rollup]
 
 const geoDataToggleCondition = (t) => {
-  return geodataToggleState.show ? geodataToggleState.show : !t.name.includes(UITypes.GeoData)
+  return betaFeatureToggleState.show ? betaFeatureToggleState.show : !t.name.includes(UITypes.GeoData)
 }
 
 const uiTypesOptions = computed<typeof uiTypes>(() => {

packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue

@@ -12,6 +12,8 @@ const { $e } = useNuxtApp()
 
 const { isSqlView } = useSmartsheetStoreOrThrow()
 
+const { betaFeatureToggleState } = useBetaFeatureToggle()
+
 function onOpenModal(type: ViewTypes, title = '') {
   $e('c:view:create', { view: type })
   emits('openModal', { type, title })
@@ -113,7 +115,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       </a-tooltip>
     </a-menu-item>
     <a-menu-item
-      v-if="geodataToggleState.show"
+      v-if="betaFeatureToggleState.show"
       key="map"
       class="group !flex !items-center !my-0 !h-2.5rem nc-create-map-view"
       @click="onOpenModal(ViewTypes.MAP)"

packages/nc-gui/components/smartsheet/sidebar/index.vue

@@ -10,7 +10,6 @@ import {
   resolveComponent,
   storeToRefs,
   useDialog,
-  useGlobal,
   useNuxtApp,
   useRoute,
   useRouter,
@@ -24,8 +23,6 @@ const meta = inject(MetaInj, ref())
 
 const activeView = inject(ActiveViewInj, ref())
 
-const { isMobileMode } = useGlobal()
-
 const { activeTab } = storeToRefs(useTabs())
 
 const { views, loadViews, isLoading } = useViews(meta)

packages/nc-gui/components/smartsheet/sidebar/toolbar/BetaFeatureToggle.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const { toggleBetaFeature } = useBetaFeatureToggle()
+</script>
+
+<template>
+  <a-tooltip placement="bottomRight">
+    <template #title>
+      <span> Toggle Beta Features </span>
+    </template>
+    <mdi-test-tube class="cursor-pointer" data-testid="beta-feature-toggle-icon" @click="toggleBetaFeature" />
+  </a-tooltip>
+</template>

packages/nc-gui/components/smartsheet/sidebar/toolbar/GeodataSwitcher.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-function toggleGeodataFeature() {
-  geodataToggleState.show = !geodataToggleState.show
-  localStorage.setItem('geodataToggleState', JSON.stringify(geodataToggleState.show))
-}
-</script>
-
-<template>
-  <a-tooltip placement="bottomRight">
-    <template #title>
-      <span> Toggle GeoData </span>
-    </template>
-    <mdi-map-marker class="cursor-pointer" data-testid="toggle-geodata-feature-icon" @click="toggleGeodataFeature" />
-  </a-tooltip>
-</template>

packages/nc-gui/components/smartsheet/sidebar/toolbar/index.vue

@@ -30,7 +30,7 @@ const onClick = () => {
 
       <div class="dot" />
 
-      <LazySmartsheetSidebarToolbarGeodataSwitcher />
+      <LazySmartsheetSidebarToolbarBetaFeatureToggle />
 
       <div class="dot" />
     </template>

packages/nc-gui/composables/useBetaFeatureToggle.ts

@@ -0,0 +1,22 @@
+import { reactive } from 'vue'
+
+const storedValue = localStorage.getItem('betaFeatureToggleState')
+
+const initialToggleState = storedValue ? JSON.parse(storedValue) : false
+
+const betaFeatureToggleState = reactive({ show: initialToggleState })
+
+const toggleBetaFeature = () => {
+  betaFeatureToggleState.show = !betaFeatureToggleState.show
+  localStorage.setItem('betaFeatureToggleState', JSON.stringify(betaFeatureToggleState.show))
+}
+
+const _useBetaFeatureToggle = () => {
+  return {
+    betaFeatureToggleState,
+    toggleBetaFeature,
+  }
+}
+
+const useBetaFeatureToggle = createSharedComposable(_useBetaFeatureToggle)
+export { useBetaFeatureToggle }

packages/nc-gui/composables/useMapViewDataStore.ts

@@ -1,15 +1,9 @@
-import { reactive } from 'vue'
+// import { reactive } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import type { ColumnType, MapType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import { IsPublicInj, ref, storeToRefs, useInjectionState, useMetas, useProject } from '#imports'
 import type { Row } from '~/lib'
 
-const storedValue = localStorage.getItem('geodataToggleState')
-
-const initialState = storedValue ? JSON.parse(storedValue) : false
-
-export const geodataToggleState = reactive({ show: initialState })
-
 const formatData = (list: Record<string, any>[]) =>
   list.map(
     (row) =>
@@ -161,7 +155,6 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
       geoDataFieldColumn,
       addEmptyRow,
       insertRow,
-      geodataToggleState,
       syncCount,
       paginationData,
     }

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -42,6 +42,8 @@ const { t } = useI18n()
 
 const { $e } = useNuxtApp()
 
+const { betaFeatureToggleState } = useBetaFeatureToggle()
+
 const route = useRoute()
 
 const router = useRouter()
@@ -399,7 +401,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     </a-menu-item>
 
                     <!-- Mobile Mode -->
-                    <a-menu-item key="mobile-mode">
+                    <a-menu-item v-if="betaFeatureToggleState.show || isMobileMode" key="mobile-mode">
                       <div
                         v-e="['e:set-mobile-mode']"
                         class="nc-project-menu-item group"