feat: source inline rename

packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@@ -27,7 +27,9 @@ const basesStore = useBases()
 
 const { isMobileMode } = useGlobal()
 
-const { createProject: _createProject, updateProject, getProjectMetaInfo } = basesStore
+const { api } = useApi()
+
+const { createProject: _createProject, updateProject, getProjectMetaInfo, loadProject } = basesStore
 
 const { bases } = storeToRefs(basesStore)
 
@@ -49,6 +51,16 @@ const editMode = ref(false)
 
 const tempTitle = ref('')
 
+const sourceRenameHelpers = ref<
+  Record<
+    string,
+    {
+      editMode: boolean
+      tempTitle: string
+    }
+  >
+>({})
+
 const activeBaseId = ref('')
 
 const isErdModalOpen = ref<Boolean>(false)
@@ -102,6 +114,52 @@ const enableEditMode = () => {
   })
 }
 
+const enableEditModeForSource = (sourceId: string) => {
+  const source = base.value.sources?.find((s) => s.id === sourceId)
+  if (!source?.id) return
+  sourceRenameHelpers.value[source.id] = {
+    editMode: true,
+    tempTitle: source.alias || '',
+  }
+  nextTick(() => {
+    const input: HTMLInputElement | null = document.querySelector(`[data-source-rename-input-id="${sourceId}"]`)
+    if (!input) return
+    input?.focus()
+    input?.select()
+    input?.scrollIntoView()
+  })
+}
+
+const updateSourceTitle = async (sourceId: string) => {
+  const source = base.value.sources?.find((s) => s.id === sourceId)
+
+  if (!source?.id || !sourceRenameHelpers.value[source.id]) return
+
+  if (sourceRenameHelpers.value[source.id].tempTitle) {
+    sourceRenameHelpers.value[source.id].tempTitle = sourceRenameHelpers.value[source.id].tempTitle.trim()
+  }
+
+  if (!sourceRenameHelpers.value[source.id].tempTitle) return
+
+  try {
+    await api.source.update(source.base_id, source.id, {
+      alias: sourceRenameHelpers.value[source.id].tempTitle,
+    })
+
+    await loadProject(source.base_id, true)
+
+    delete sourceRenameHelpers.value[source.id]
+
+    $e('a:source:rename')
+
+    refreshViewTabTitle?.()
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    refreshCommandPalette()
+  }
+}
+
 const updateProjectTitle = async () => {
   if (tempTitle.value) {
     tempTitle.value = tempTitle.value.trim()
@@ -672,7 +730,20 @@ const onTableIdCopy = async () => {
                             <GeneralBaseLogo
                               class="flex-none min-w-4 !xs:(min-w-4.25 w-4.25 text-sm) !text-gray-600 !group-hover:text-gray-800"
                             />
+                            <input
+                              v-if="source.id && sourceRenameHelpers[source.id]?.editMode"
+                              ref="input"
+                              v-model="sourceRenameHelpers[source.id].tempTitle"
+                              class="flex-grow leading-1 outline-0 ring-none capitalize !text-inherit !bg-transparent flex-1 mr-4"
+                              :data-source-rename-input-id="source.id"
+                              @click.stop
+                              @keydown.enter.stop.prevent
+                              @keyup.enter="updateSourceTitle(source.id!)"
+                              @keyup.esc="updateSourceTitle(source.id!)"
+                              @blur="updateSourceTitle(source.id!)"
+                            />
                             <NcTooltip
+                              v-else
                               class="nc-sidebar-node-title capitalize text-ellipsis overflow-hidden select-none"
                               :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
                               :class="{
@@ -722,6 +793,17 @@ const onTableIdCopy = async () => {
                                   }"
                                   @click="isBasesOptionsOpen[source!.id!] = false"
                                 >
+                                  <NcMenuItem
+                                    v-if="isUIAllowed('baseRename')"
+                                    data-testid="nc-sidebar-source-rename"
+                                    @click="enableEditModeForSource(source.id!)"
+                                  >
+                                    <GeneralIcon icon="rename" class="group-hover:text-black" />
+                                    {{ $t('general.rename') }}
+                                  </NcMenuItem>
+
+                                  <NcDivider />
+
                                   <!-- ERD View -->
                                   <NcMenuItem key="erd" @click="openErdView(source)">
                                     <div v-e="['c:source:erd']" class="flex gap-2 items-center">