From 05dbf3b3bb8e4a51e3ed75f9c14b0dd99f4f457b Mon Sep 17 00:00:00 2001 From: DarkPhoenix2704 Date: Mon, 19 Feb 2024 05:09:32 +0000 Subject: [PATCH 1/9] fix(nc-gui): cmd l update --- .../nc-gui/assets/nc-icons/project-gray.svg | 9 + packages/nc-gui/components/cmd-l/index.vue | 155 +++++++++--------- .../nc-gui/components/dlg/TableRename.vue | 6 +- packages/nc-gui/store/views.ts | 2 + packages/nc-gui/utils/iconUtils.ts | 2 + 5 files changed, 90 insertions(+), 84 deletions(-) create mode 100644 packages/nc-gui/assets/nc-icons/project-gray.svg diff --git a/packages/nc-gui/assets/nc-icons/project-gray.svg b/packages/nc-gui/assets/nc-icons/project-gray.svg new file mode 100644 index 0000000000..fd278c5551 --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/project-gray.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/nc-gui/components/cmd-l/index.vue b/packages/nc-gui/components/cmd-l/index.vue index 57e99cd02c..e9ddade3c9 100644 --- a/packages/nc-gui/components/cmd-l/index.vue +++ b/packages/nc-gui/components/cmd-l/index.vue @@ -1,5 +1,5 @@ @@ -209,30 +185,45 @@ onMounted(() => { selected: selected === cmdOption.tableID + cmdOption.viewName, }" class="cmdk-action" - @click="changeView({ viewId: cmdOption.viewId, tableId: cmdOption.tableID, baseId: cmdOption.baseId })" + @click="changeView({ viewId: cmdOption.viewId!, tableId: cmdOption.tableID, baseId: cmdOption.baseId })" > -
-
- - - - - {{ cmdOption.isDefault ? $t('title.defaultView') : cmdOption.viewName }} - - +
+
+
+ + + + + {{ cmdOption.viewName }} + + +
-
- - - - - {{ cmdOption.baseName }} - - +
+
+ + + + + {{ cmdOption.baseName }} + + + / + + + + + + {{ cmdOption.tableName }} + + +
diff --git a/packages/nc-gui/components/dlg/TableRename.vue b/packages/nc-gui/components/dlg/TableRename.vue index 1b5dd6fc7e..d8550d56ea 100644 --- a/packages/nc-gui/components/dlg/TableRename.vue +++ b/packages/nc-gui/components/dlg/TableRename.vue @@ -162,8 +162,10 @@ const renameTable = async (undo = false, disableTitleDiffCheck?: boolean | undef // update recent views if default view is renamed allRecentViews.value = allRecentViews.value.map((v) => { - if (v.tableID === tableMeta.id && v.isDefault) { - v.viewName = formState.title + if (v.tableID === tableMeta.id) { + if (v.isDefault) v.viewName = formState.title + + v.tableName = formState.title } return v }) diff --git a/packages/nc-gui/store/views.ts b/packages/nc-gui/store/views.ts index 7783be8a7a..f32ca96271 100644 --- a/packages/nc-gui/store/views.ts +++ b/packages/nc-gui/store/views.ts @@ -11,6 +11,7 @@ export const useViewsStore = defineStore('viewsStore', () => { tableID: string isDefault: boolean baseName: string + tableName: string workspaceId: string baseId: string } @@ -293,6 +294,7 @@ export const useViewsStore = defineStore('viewsStore', () => { viewName: view.is_default ? (tableName as string) : view.title, viewType: view.type, workspaceId: activeWorkspaceId.value, + tableName: tableName as string, baseName: baseName as string, }, ...allRecentViews.value.filter((f) => f.viewId !== view.id || f.tableID !== view.fk_model_id), diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts index 519c261e75..7de4ac2005 100644 --- a/packages/nc-gui/utils/iconUtils.ts +++ b/packages/nc-gui/utils/iconUtils.ts @@ -120,6 +120,7 @@ import NcArrowUp from '~icons/nc-icons/arrow-up' import NcArrowDown from '~icons/nc-icons/arrow-down' import NcUpload from '~icons/nc-icons/upload' import NcDownload from '~icons/nc-icons/download' +import NcProjectGray from '~icons/nc-icons/project-gray' // keep it for reference // todo: remove it after all icons are migrated @@ -269,6 +270,7 @@ import NcDownload from '~icons/nc-icons/download' } as const */ export const iconMap = { + projectGray: NcProjectGray, sort: Sort, group: Group, filter: Filter, From fa390d01c07a201560c948488c8bc2125ca312e1 Mon Sep 17 00:00:00 2001 From: DarkPhoenix2704 Date: Mon, 19 Feb 2024 05:09:32 +0000 Subject: [PATCH 2/9] fix(nc-gui): cmd l search --- packages/nc-gui/components/cmd-l/index.vue | 66 ++++++++++++++-------- 1 file changed, 44 insertions(+), 22 deletions(-) diff --git a/packages/nc-gui/components/cmd-l/index.vue b/packages/nc-gui/components/cmd-l/index.vue index e9ddade3c9..020668896f 100644 --- a/packages/nc-gui/components/cmd-l/index.vue +++ b/packages/nc-gui/components/cmd-l/index.vue @@ -1,6 +1,6 @@ From 9c701b1332a8cdf54bf7771f68e590a7f5e0505b Mon Sep 17 00:00:00 2001 From: DarkPhoenix2704 Date: Mon, 19 Feb 2024 05:09:32 +0000 Subject: [PATCH 4/9] fix(nc-gui): cmd l tests --- packages/nc-gui/components/cmd-l/index.vue | 9 +- .../pages/Dashboard/Command/CmdJPage.ts | 2 +- .../pages/Dashboard/Command/CmdKPage.ts | 3 +- .../pages/Dashboard/Command/CmdLPage.ts | 9 +- .../tests/db/features/command.spec.ts | 98 +++++++++++++++++++ 5 files changed, 108 insertions(+), 13 deletions(-) create mode 100644 tests/playwright/tests/db/features/command.spec.ts diff --git a/packages/nc-gui/components/cmd-l/index.vue b/packages/nc-gui/components/cmd-l/index.vue index 632ce4cff5..ca72de7859 100644 --- a/packages/nc-gui/components/cmd-l/index.vue +++ b/packages/nc-gui/components/cmd-l/index.vue @@ -137,7 +137,6 @@ onClickOutside(modalEl, () => { }) useEventListener('keydown', (e: KeyboardEvent) => { - console.log(e.key) if (e.key === 'Escape') { hide() } else if (e.key === 'Enter') { @@ -152,21 +151,21 @@ useEventListener('keydown', (e: KeyboardEvent) => { if (!vOpen.value) return e.preventDefault() moveDown() - } else if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'l') { + } else if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'l') { if (!user.value) return if (!vOpen.value) { vOpen.value = true } else { moveUp() } - } else if ((e.metaKey || e.ctrlKey) && e.key === 'l') { + } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'l') { if (!user.value) return if (!vOpen.value) { vOpen.value = true } else moveDown() - } else if ((e.ctrlKey || e.metaKey) && e.key === 'k') { + } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') { hide() - } else if ((e.ctrlKey || e.metaKey) && e.key === 'j') { + } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'j') { hide() } else if (vOpen.value) { cmdInputEl.value?.focus() diff --git a/tests/playwright/pages/Dashboard/Command/CmdJPage.ts b/tests/playwright/pages/Dashboard/Command/CmdJPage.ts index e7a4fcb15e..3e20117581 100644 --- a/tests/playwright/pages/Dashboard/Command/CmdJPage.ts +++ b/tests/playwright/pages/Dashboard/Command/CmdJPage.ts @@ -14,7 +14,7 @@ export class CmdJ extends BasePage { } async openCmdJ() { - await this.dashboardPage.rootPage.keyboard.press(this.isMacOs() ? 'Meta+J' : 'Control+J'); + await this.dashboardPage.rootPage.keyboard.press((await this.isMacOs()) ? 'Meta+J' : 'Control+J'); // await this.dashboardPage.rootPage.waitForSelector('.DocSearch-Input'); } diff --git a/tests/playwright/pages/Dashboard/Command/CmdKPage.ts b/tests/playwright/pages/Dashboard/Command/CmdKPage.ts index 0457243a5b..10d786ae6a 100644 --- a/tests/playwright/pages/Dashboard/Command/CmdKPage.ts +++ b/tests/playwright/pages/Dashboard/Command/CmdKPage.ts @@ -14,8 +14,7 @@ export class CmdK extends BasePage { } async openCmdK() { - await this.dashboardPage.rootPage.keyboard.press(this.isMacOs() ? 'Meta+K' : 'Control+K'); - // await this.dashboardPage.rootPage.waitForSelector('.DocSearch-Input'); + await this.dashboardPage.rootPage.keyboard.press((await this.isMacOs()) ? 'Meta+K' : 'Control+K'); } async searchText(text: string) { diff --git a/tests/playwright/pages/Dashboard/Command/CmdLPage.ts b/tests/playwright/pages/Dashboard/Command/CmdLPage.ts index 3c9768323c..c6136552e5 100644 --- a/tests/playwright/pages/Dashboard/Command/CmdLPage.ts +++ b/tests/playwright/pages/Dashboard/Command/CmdLPage.ts @@ -1,5 +1,6 @@ import BasePage from '../../Base'; import { DashboardPage } from '..'; +import { expect } from '@playwright/test'; export class CmdL extends BasePage { readonly dashboardPage: DashboardPage; @@ -14,17 +15,15 @@ export class CmdL extends BasePage { } async openCmdL() { - await this.dashboardPage.rootPage.keyboard.press(this.isMacOs() ? 'Meta+L' : 'Control+L'); + await this.dashboardPage.rootPage.keyboard.press((await this.isMacOs()) ? 'Meta+l' : 'Control+l'); } async isCmdLVisible() { - const isVisible = this.get(); - return await isVisible.count(); + await expect(this.get()).toBeVisible(); } async isCmdLNotVisible() { - const isNotVisible = this.get(); - return await isNotVisible.count(); + await expect(this.get()).toBeHidden(); } async moveDown() { diff --git a/tests/playwright/tests/db/features/command.spec.ts b/tests/playwright/tests/db/features/command.spec.ts new file mode 100644 index 0000000000..6bbefb04e1 --- /dev/null +++ b/tests/playwright/tests/db/features/command.spec.ts @@ -0,0 +1,98 @@ +import { expect, test } from '@playwright/test'; +import { DashboardPage } from '../../../pages/Dashboard'; +import setup, { unsetup } from '../../../setup'; + +test.describe('Command Shortcuts', () => { + let dashboard: DashboardPage; + let context: any; + + test.beforeEach(async ({ page }) => { + context = await setup({ page, isEmptyProject: false, isSuperUser: true }); + dashboard = new DashboardPage(page, context.base); + }); + + test.afterEach(async () => { + await unsetup(context); + }); + + test('Verify Command J Docs', async ({ page }) => { + await page.waitForTimeout(1000); + await dashboard.cmdJ.openCmdJ(); + + await expect(dashboard.cmdJ.get()).toBeVisible(); + + await dashboard.cmdJ.searchText('Column'); + await page.keyboard.press('Escape'); + await expect(dashboard.cmdJ.get()).toBeHidden(); + + await dashboard.signOut(); + + await page.waitForTimeout(2000); + + await dashboard.cmdJ.openCmdJ(); + await expect(dashboard.cmdJ.get()).toBeHidden(); + }); + + test('Verify Command K', async ({ page }) => { + await page.waitForTimeout(1000); + await dashboard.cmdK.openCmdK(); + + await expect(dashboard.cmdK.get()).toBeVisible(); + + await page.keyboard.press('Escape'); + await expect(dashboard.cmdK.get()).toBeHidden(); + + await dashboard.cmdK.openCmdK(); + + await dashboard.cmdK.searchText('CustomerList'); + + await expect(dashboard.get().locator('.nc-active-view-title')).toContainText('Default View'); + + await dashboard.signOut(); + + await page.waitForTimeout(1000); + + await dashboard.cmdK.openCmdK(); + await expect(dashboard.cmdK.get()).toBeHidden(); + }); + + test('Verify Command L Recent Switch', async ({ page }) => { + await page.waitForTimeout(1000); + + await dashboard.cmdL.openCmdL(); + + await dashboard.cmdL.isCmdLVisible(); + + await page.keyboard.press('Escape'); + + await dashboard.cmdL.isCmdLNotVisible(); + + await dashboard.treeView.openTable({ title: 'Actor' }); + await dashboard.treeView.openTable({ title: 'Address' }); + await dashboard.treeView.openTable({ title: 'Category' }); + await dashboard.treeView.openTable({ title: 'City' }); + await dashboard.treeView.openTable({ title: 'Country' }); + + await page.waitForTimeout(1000); + + await dashboard.cmdL.openCmdL(); + + await page.waitForTimeout(1000); + await dashboard.cmdL.moveDown(); + await dashboard.cmdL.moveDown(); + await dashboard.cmdL.moveDown(); + + await dashboard.cmdL.openRecent(); + + await page.waitForTimeout(1000); + + expect(await dashboard.cmdL.getActiveViewTitle()).toBe('Default View'); + + expect(await dashboard.cmdL.getActiveTableTitle()).toBe('Address'); + + await dashboard.signOut(); + + await dashboard.cmdL.openCmdL(); + await dashboard.cmdL.isCmdLNotVisible(); + }); +}); From f0bd7e4b25561c27c71d41e6deb887bd96beea92 Mon Sep 17 00:00:00 2001 From: DarkPhoenix2704 Date: Mon, 19 Feb 2024 05:09:33 +0000 Subject: [PATCH 5/9] fix(nc-gui): failing grid tests --- packages/nc-gui/components/cmd-l/index.vue | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/nc-gui/components/cmd-l/index.vue b/packages/nc-gui/components/cmd-l/index.vue index ca72de7859..211b51e57b 100644 --- a/packages/nc-gui/components/cmd-l/index.vue +++ b/packages/nc-gui/components/cmd-l/index.vue @@ -26,21 +26,22 @@ const { recentViews, activeView } = storeToRefs(viewStore) const selected: Ref = ref('') -const newView: Ref< +const newView = ref< | { viewId: string | null tableId: string baseId: string } | undefined -> = ref() +>() const filteredViews = computed(() => { const filteredList = recentViews.value.filter((v) => { + if (!v.viewName || !v.tableName || !v.baseName) return false return v.viewName.toLowerCase().includes(search.value.toLowerCase()) }) - if (!filteredList.find((v) => v.tableID + v.viewName === selected.value) && filteredList.length) { + if (filteredList.find((v) => v.tableID + v.viewName === selected.value) && filteredList.length) { selected.value = filteredList[0].tableID + filteredList[0].viewName } return filteredList @@ -174,7 +175,7 @@ useEventListener('keydown', (e: KeyboardEvent) => { onMounted(() => { document.querySelector('.cmdOpt-list')?.focus() - if (!activeView.value) return + if (!activeView.value || !filteredViews.value.length) return const index = filteredViews.value.findIndex( (v) => v.viewName === filteredViews.value?.title && v.tableID === filteredViews.value?.fk_model_id, ) From ef8a8469175ae6206cb8d6d2166da3b79d280481 Mon Sep 17 00:00:00 2001 From: DarkPhoenix2704 Date: Mon, 19 Feb 2024 05:09:33 +0000 Subject: [PATCH 6/9] fix(nc-gui): fix test --- tests/playwright/tests/db/features/command.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/playwright/tests/db/features/command.spec.ts b/tests/playwright/tests/db/features/command.spec.ts index 6bbefb04e1..b2ef034d05 100644 --- a/tests/playwright/tests/db/features/command.spec.ts +++ b/tests/playwright/tests/db/features/command.spec.ts @@ -88,7 +88,7 @@ test.describe('Command Shortcuts', () => { expect(await dashboard.cmdL.getActiveViewTitle()).toBe('Default View'); - expect(await dashboard.cmdL.getActiveTableTitle()).toBe('Address'); + expect(await dashboard.cmdL.getActiveTableTitle()).toBe('City'); await dashboard.signOut(); From 86f9cbfec29ba8a05788f2f5cf2a14cdc0a6acc7 Mon Sep 17 00:00:00 2001 From: DarkPhoenix2704 Date: Mon, 19 Feb 2024 05:09:33 +0000 Subject: [PATCH 7/9] fix(nc-gui): cmd L --- packages/nc-gui/components/cmd-l/index.vue | 18 ++++++++++-------- .../tests/db/features/command.spec.ts | 2 +- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/nc-gui/components/cmd-l/index.vue b/packages/nc-gui/components/cmd-l/index.vue index 211b51e57b..bb622449a1 100644 --- a/packages/nc-gui/components/cmd-l/index.vue +++ b/packages/nc-gui/components/cmd-l/index.vue @@ -36,15 +36,15 @@ const newView = ref< >() const filteredViews = computed(() => { - const filteredList = recentViews.value.filter((v) => { - if (!v.viewName || !v.tableName || !v.baseName) return false + if (!recentViews.value) return [] + const filtered = recentViews.value.filter((v) => { + if (search.value === '') return true return v.viewName.toLowerCase().includes(search.value.toLowerCase()) }) - - if (filteredList.find((v) => v.tableID + v.viewName === selected.value) && filteredList.length) { - selected.value = filteredList[0].tableID + filteredList[0].viewName + if (filtered[0]) { + selected.value = filtered[0]?.tableID + filtered[0]?.viewName } - return filteredList + return filtered }) const changeView = useDebounceFn( @@ -130,6 +130,7 @@ const moveDown = () => { const hide = () => { vOpen.value = false + search.value = '' } onClickOutside(modalEl, () => { @@ -177,11 +178,12 @@ onMounted(() => { document.querySelector('.cmdOpt-list')?.focus() if (!activeView.value || !filteredViews.value.length) return const index = filteredViews.value.findIndex( - (v) => v.viewName === filteredViews.value?.title && v.tableID === filteredViews.value?.fk_model_id, + (v) => v.viewName === activeView.value?.title && v.tableID === activeView.value?.fk_model_id, ) if (index + 1 > filteredViews.value.length) { selected.value = filteredViews.value[0].tableID + filteredViews.value[0].viewName } else { + if (!filteredViews.value[index + 1]) return selected.value = filteredViews.value[index + 1].tableID + filteredViews.value[index + 1].viewName } }) @@ -192,7 +194,7 @@ onMounted(() => {
- +
Recent Views
diff --git a/tests/playwright/tests/db/features/command.spec.ts b/tests/playwright/tests/db/features/command.spec.ts index b2ef034d05..6bbefb04e1 100644 --- a/tests/playwright/tests/db/features/command.spec.ts +++ b/tests/playwright/tests/db/features/command.spec.ts @@ -88,7 +88,7 @@ test.describe('Command Shortcuts', () => { expect(await dashboard.cmdL.getActiveViewTitle()).toBe('Default View'); - expect(await dashboard.cmdL.getActiveTableTitle()).toBe('City'); + expect(await dashboard.cmdL.getActiveTableTitle()).toBe('Address'); await dashboard.signOut(); From e2288c794ef8ff7e53c4b14b1de7d00970c42c2c Mon Sep 17 00:00:00 2001 From: DarkPhoenix2704 Date: Mon, 19 Feb 2024 05:09:33 +0000 Subject: [PATCH 8/9] fix(nc-gui): cmd L right alignment --- packages/nc-gui/components/cmd-l/index.vue | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/nc-gui/components/cmd-l/index.vue b/packages/nc-gui/components/cmd-l/index.vue index bb622449a1..a077a02df1 100644 --- a/packages/nc-gui/components/cmd-l/index.vue +++ b/packages/nc-gui/components/cmd-l/index.vue @@ -214,9 +214,9 @@ onMounted(() => { @click="changeView({ viewId: cmdOption.viewId!, tableId: cmdOption.tableID, baseId: cmdOption.baseId })" >
-
+
- +