From 2781a22df45e9002254e17595fa4ba14a27772ae Mon Sep 17 00:00:00 2001 From: Vlad Ilyushchenko Date: Fri, 4 Oct 2024 17:56:08 +0100 Subject: [PATCH 1/5] fix(web-console): tab state update issues that lead to visual side effects --- .../src/components/ReactChromeTabs/hooks.tsx | 7 ++++++- .../src/scenes/Editor/Monaco/tabs.tsx | 20 ------------------- 2 files changed, 6 insertions(+), 21 deletions(-) diff --git a/packages/web-console/src/components/ReactChromeTabs/hooks.tsx b/packages/web-console/src/components/ReactChromeTabs/hooks.tsx index 06f9aee88..1816ee100 100644 --- a/packages/web-console/src/components/ReactChromeTabs/hooks.tsx +++ b/packages/web-console/src/components/ReactChromeTabs/hooks.tsx @@ -27,7 +27,6 @@ import React, { forwardRef, useCallback, useEffect, - useMemo, useRef, } from "react" import ChromeTabsClz, { TabProperties } from "./chrome-tabs" @@ -194,6 +193,12 @@ export function useChromeTabs(listeners: Listeners, limit?: number) { }, []) const updateTab = useCallback((tabId: string, tab: TabProperties) => { + if (tabId !== tab.id) { + // tabs component is liable to call this to "update" already initialized + // tab to use different ID. This messes things up quite badly, so it is + // aborted here. + return + } const ele = ref.current?.querySelector( `[data-tab-id="${tabId}"]`, ) as HTMLDivElement diff --git a/packages/web-console/src/scenes/Editor/Monaco/tabs.tsx b/packages/web-console/src/scenes/Editor/Monaco/tabs.tsx index 03c18dbf6..83c66b032 100644 --- a/packages/web-console/src/scenes/Editor/Monaco/tabs.tsx +++ b/packages/web-console/src/scenes/Editor/Monaco/tabs.tsx @@ -97,25 +97,6 @@ export const Tabs = () => { } } - const reorder = async ( - tabId: string, - _fromIndex: number, - toIndex: number, - ) => { - const beforeTab = buffers.find((tab) => tab.id === parseInt(tabId)) - if (!beforeTab) { - return - } - let newTabs = buffers - .filter((tab) => tab.id !== parseInt(tabId) && !tab.archived) - .sort((a, b) => a.position - b.position) - newTabs.splice(toIndex, 0, beforeTab) - newTabs.forEach(async (tab, index) => { - await updateBuffer(tab.id as number, { position: index }) - }) - await setActiveBuffer(newTabs[toIndex]) - } - const rename = async (id: string, title: string) => { await updateBuffer(parseInt(id), { label: title }) } @@ -140,7 +121,6 @@ export const Tabs = () => { limit={40} darkMode={true} onTabClose={close} - onTabReorder={reorder} onTabActive={active} onTabRename={rename} onNewTab={addBuffer} From 238a5259c7387506c245224df62d2f2e2cbc95a1 Mon Sep 17 00:00:00 2001 From: Maciej Bodek Date: Fri, 4 Oct 2024 19:08:01 +0200 Subject: [PATCH 2/5] submodule update --- packages/browser-tests/questdb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb index 7442c9913..f5b0ff333 160000 --- a/packages/browser-tests/questdb +++ b/packages/browser-tests/questdb @@ -1 +1 @@ -Subproject commit 7442c991312cb408d473bf7e7ae8a536bcf718de +Subproject commit f5b0ff3331194700879ea6dc4835237828981d94 From 8d1e1ad052678f2395bf0a1dc535b16d199af123 Mon Sep 17 00:00:00 2001 From: Vlad Ilyushchenko Date: Fri, 4 Oct 2024 18:33:41 +0100 Subject: [PATCH 3/5] fix tab add --- .../src/components/ReactChromeTabs/hooks.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/web-console/src/components/ReactChromeTabs/hooks.tsx b/packages/web-console/src/components/ReactChromeTabs/hooks.tsx index 1816ee100..bbca4ba51 100644 --- a/packages/web-console/src/components/ReactChromeTabs/hooks.tsx +++ b/packages/web-console/src/components/ReactChromeTabs/hooks.tsx @@ -193,16 +193,16 @@ export function useChromeTabs(listeners: Listeners, limit?: number) { }, []) const updateTab = useCallback((tabId: string, tab: TabProperties) => { - if (tabId !== tab.id) { - // tabs component is liable to call this to "update" already initialized - // tab to use different ID. This messes things up quite badly, so it is - // aborted here. - return - } const ele = ref.current?.querySelector( `[data-tab-id="${tabId}"]`, ) as HTMLDivElement if (ele) { + if (tabId !== tab.id) { + // tabs component is liable to call this to "update" already initialized + // tab to use different ID. This messes things up quite badly, so it is + // aborted here. + return + } chromeTabsRef.current?.updateTab(ele, { ...tab }) } else { chromeTabsRef.current?.addTab(tab) From 78d78ee8af4fcff2dae7d31c88d6d5714d1264dd Mon Sep 17 00:00:00 2001 From: Vlad Ilyushchenko Date: Fri, 4 Oct 2024 19:32:48 +0100 Subject: [PATCH 4/5] something works, something doesn't --- .../components/ReactChromeTabs/chrome-tabs.ts | 6 +----- .../src/components/ReactChromeTabs/hooks.tsx | 6 ------ .../src/scenes/Editor/Monaco/tabs.tsx | 19 +++++++++++++++++++ 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/packages/web-console/src/components/ReactChromeTabs/chrome-tabs.ts b/packages/web-console/src/components/ReactChromeTabs/chrome-tabs.ts index be127ccf1..5e7ee2270 100644 --- a/packages/web-console/src/components/ReactChromeTabs/chrome-tabs.ts +++ b/packages/web-console/src/components/ReactChromeTabs/chrome-tabs.ts @@ -27,9 +27,6 @@ import Draggabilly from "draggabilly" const TAB_CONTENT_MARGIN = 10 const TAB_CONTENT_OVERLAP_DISTANCE = 1 -const TAB_OVERLAP_DISTANCE = - TAB_CONTENT_MARGIN * 2 + TAB_CONTENT_OVERLAP_DISTANCE - const TAB_CONTENT_MIN_WIDTH = 24 const TAB_CONTENT_MAX_WIDTH = 240 @@ -64,7 +61,7 @@ const tabTemplate = `
- +
@@ -392,7 +389,6 @@ class ChromeTabs { updateTab(tabEl: HTMLElement, tabProperties: TabProperties) { tabEl.setAttribute("data-tab-title", tabProperties.title) - tabEl.setAttribute("title", tabProperties.title) tabEl.querySelector(".chrome-tab-title")!.textContent = tabProperties.title const input = tabEl.querySelector(".chrome-tab-rename")! input.setAttribute("value", tabProperties.title) diff --git a/packages/web-console/src/components/ReactChromeTabs/hooks.tsx b/packages/web-console/src/components/ReactChromeTabs/hooks.tsx index bbca4ba51..9700850f6 100644 --- a/packages/web-console/src/components/ReactChromeTabs/hooks.tsx +++ b/packages/web-console/src/components/ReactChromeTabs/hooks.tsx @@ -197,12 +197,6 @@ export function useChromeTabs(listeners: Listeners, limit?: number) { `[data-tab-id="${tabId}"]`, ) as HTMLDivElement if (ele) { - if (tabId !== tab.id) { - // tabs component is liable to call this to "update" already initialized - // tab to use different ID. This messes things up quite badly, so it is - // aborted here. - return - } chromeTabsRef.current?.updateTab(ele, { ...tab }) } else { chromeTabsRef.current?.addTab(tab) diff --git a/packages/web-console/src/scenes/Editor/Monaco/tabs.tsx b/packages/web-console/src/scenes/Editor/Monaco/tabs.tsx index 38c4d3401..53ba79809 100644 --- a/packages/web-console/src/scenes/Editor/Monaco/tabs.tsx +++ b/packages/web-console/src/scenes/Editor/Monaco/tabs.tsx @@ -72,6 +72,24 @@ export const Tabs = () => { } } + const reorder = async ( + tabId: string, + _fromIndex: number, + toIndex: number, + ) => { + const beforeTab = buffers.find((tab) => tab.id === parseInt(tabId)) + if (!beforeTab) { + return + } + let newTabs = buffers + .filter((tab) => tab.id !== parseInt(tabId) && !tab.archived) + .sort((a, b) => a.position - b.position) + newTabs.splice(toIndex, 0, beforeTab) + newTabs.forEach(async (tab, index) => { + await updateBuffer(tab.id as number, { position: index }) + }) + } + const repositionActiveBuffers = async (excludedId: string) => { const sortedActiveBuffers = buffers .filter( @@ -129,6 +147,7 @@ export const Tabs = () => { limit={40} darkMode={true} onTabClose={close} + onTabReorder={reorder} onTabActive={active} onTabRename={rename} onNewTab={addBuffer} From 60982596222b6de3514ba3e7a3a3891a3a5bb3b6 Mon Sep 17 00:00:00 2001 From: Vlad Ilyushchenko Date: Fri, 4 Oct 2024 19:34:59 +0100 Subject: [PATCH 5/5] reorder methods --- .../src/scenes/Editor/Monaco/tabs.tsx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/web-console/src/scenes/Editor/Monaco/tabs.tsx b/packages/web-console/src/scenes/Editor/Monaco/tabs.tsx index 53ba79809..0fce3632f 100644 --- a/packages/web-console/src/scenes/Editor/Monaco/tabs.tsx +++ b/packages/web-console/src/scenes/Editor/Monaco/tabs.tsx @@ -72,24 +72,6 @@ export const Tabs = () => { } } - const reorder = async ( - tabId: string, - _fromIndex: number, - toIndex: number, - ) => { - const beforeTab = buffers.find((tab) => tab.id === parseInt(tabId)) - if (!beforeTab) { - return - } - let newTabs = buffers - .filter((tab) => tab.id !== parseInt(tabId) && !tab.archived) - .sort((a, b) => a.position - b.position) - newTabs.splice(toIndex, 0, beforeTab) - newTabs.forEach(async (tab, index) => { - await updateBuffer(tab.id as number, { position: index }) - }) - } - const repositionActiveBuffers = async (excludedId: string) => { const sortedActiveBuffers = buffers .filter( @@ -123,6 +105,24 @@ export const Tabs = () => { } } + const reorder = async ( + tabId: string, + _fromIndex: number, + toIndex: number, + ) => { + const beforeTab = buffers.find((tab) => tab.id === parseInt(tabId)) + if (!beforeTab) { + return + } + let newTabs = buffers + .filter((tab) => tab.id !== parseInt(tabId) && !tab.archived) + .sort((a, b) => a.position - b.position) + newTabs.splice(toIndex, 0, beforeTab) + newTabs.forEach(async (tab, index) => { + await updateBuffer(tab.id as number, { position: index }) + }) + } + const rename = async (id: string, title: string) => { await updateBuffer(parseInt(id), { label: title }) }