feat: awakened data sources

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui/components/dashboard/settings/DataSources.vue

@@ -16,7 +16,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const emits = defineEmits(['update:state', 'update:reload'])
+const emits = defineEmits(['update:state', 'update:reload', 'awaken'])
 
 const vState = useVModel(props, 'state', emits)
 const vReload = useVModel(props, 'reload', emits)
@@ -29,6 +29,7 @@ let activeBaseId = $ref('')
 let metadiffbases = $ref<string[]>([])
 let clientType = $ref<ClientType>(ClientType.MYSQL)
 let isReloading = $ref(false)
+let forceAwakened = $ref(false)
 
 async function loadBases() {
   try {
@@ -138,6 +139,11 @@ const moveBase = async (e: any) => {
   }
 }
 
+const forceAwaken = () => {
+  forceAwakened = !forceAwakened
+  emits('awaken', forceAwakened)
+}
+
 onMounted(async () => {
   if (sources.length === 0) {
     await loadBases()
@@ -155,6 +161,18 @@ watch(
   },
 )
 
+watch(
+  () => sources.length,
+  (l) => {
+    if (l > 1 && !forceAwakened) {
+      emits('awaken', false)
+    } else {
+      emits('awaken', true)
+    }
+  },
+  { immediate: true },
+)
+
 watch(
   vState,
   (newState) => {
@@ -175,6 +193,11 @@ watch(
         clientType = ClientType.MSSQL
         vState.value = DataSourcesSubTab.New
         break
+      case DataSourcesSubTab.New:
+        if (sources.length > 1 && !forceAwakened) {
+          vState.value = ''
+        }
+        break
     }
   },
   { immediate: true },
@@ -189,7 +212,7 @@ watch(
           <div class="ds-table-row">
             <div class="ds-table-col ds-table-name">Name</div>
             <div class="ds-table-col ds-table-actions">Actions</div>
-            <div class="ds-table-col ds-table-enabled">Show / Hide</div>
+            <div class="ds-table-col ds-table-enabled cursor-pointer" @dblclick="forceAwaken">Show / Hide</div>
           </div>
         </div>
         <div class="ds-table-body">
@@ -269,7 +292,7 @@ watch(
             <template #item="{ element: base, index }">
               <div v-if="index !== 0" class="ds-table-row border-gray-200">
                 <div class="ds-table-col ds-table-name">
-                  <MdiDragVertical small class="ds-table-handle" />
+                  <MdiDragVertical v-if="sources.length > 2" small class="ds-table-handle" />
                   <div class="flex items-center gap-1">
                     <GeneralBaseLogo :base-type="base.type" />
                     {{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span>

packages/nc-gui/components/dashboard/settings/Modal.vue

@@ -53,6 +53,8 @@ const { $e } = useNuxtApp()
 
 const dataSourcesReload = ref(false)
 
+const dataSourcesAwakened = ref(false)
+
 const tabsInfo: TabGroup = {
   teamAndAuth: {
     title: t('title.teamAndAuth'),
@@ -156,6 +158,10 @@ const selectedTab = $computed(() => tabsInfo[selectedTabKeys[0]])
 let selectedSubTabKeys = $ref<string[]>([firstKeyOfObject(selectedTab.subTabs)])
 const selectedSubTab = $computed(() => selectedTab.subTabs[selectedSubTabKeys[0]])
 
+const handleAwaken = (val: boolean) => {
+  dataSourcesAwakened.value = val
+}
+
 watch(
   () => selectedTabKeys[0],
   (newTabKey) => {
@@ -239,7 +245,11 @@ watch(
               <a-breadcrumb-item v-if="vDataState !== ''">{{ vDataState }}</a-breadcrumb-item>
             </a-breadcrumb>
             <div v-if="vDataState === ''" class="flex flex-row justify-end items-center w-full gap-1">
-              <a-button class="self-start nc-btn-new-datasource" @click="vDataState = DataSourcesSubTab.New">
+              <a-button
+                v-if="dataSourcesAwakened"
+                class="self-start nc-btn-new-datasource"
+                @click="vDataState = DataSourcesSubTab.New"
+              >
                 <div v-if="vDataState === ''" class="flex items-center gap-2 text-primary font-light">
                   <MdiDatabasePlusOutline class="text-lg group-hover:text-accent" />
                   New
@@ -269,6 +279,7 @@ watch(
             v-model:reload="dataSourcesReload"
             class="px-2 pb-2"
             :data-testid="`nc-settings-subtab-${selectedSubTab.title}`"
+            @awaken="handleAwaken"
           />
           <component
             :is="selectedSubTab?.body"