Skip to content

[UI] Async query execution support #1865

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 21, 2025
+1,031 −906
Merged

[UI] Async query execution support #1865

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e410326
MVP
nikitastryuk Oct 19, 2025
d56e75b
revert 2 pckgs bump
nikitastryuk Oct 19, 2025
7053e65
Merge branch 'main' of https://github.com/Embucket/embucket into asyn…
nikitastryuk Oct 21, 2025
0a33fb7
more work
nikitastryuk Oct 21, 2025
1745c68
pnpm i
nikitastryuk Oct 21, 2025
20e472c
random improvements
nikitastryuk Oct 21, 2025
de4e9a0
transition-none
nikitastryuk Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"@codemirror/state": "^6.5.2",
"@codemirror/view": "^6.38.6",
"@hookform/resolvers": "^5.2.2",
"@lezer/highlight": "^1.2.1",
"@lezer/highlight": "1.2.1",
"@radix-ui/react-alert-dialog": "^1.1.15",
"@radix-ui/react-avatar": "^1.1.10",
"@radix-ui/react-collapsible": "^1.1.12",
Expand All @@ -46,10 +46,10 @@
"@radix-ui/react-tabs": "^1.1.13",
"@radix-ui/react-toggle": "^1.1.10",
"@radix-ui/react-tooltip": "^1.2.8",
"@tailwindcss/vite": "^4.1.14",
"@tanstack/react-query": "^5.90.2",
"@tailwindcss/vite": "^4.1.15",
"@tanstack/react-query": "^5.90.5",
"@tanstack/react-query-devtools": "^5.90.2",
"@tanstack/react-router": "1.132.47",
"@tanstack/react-router": "1.133.20",
"@tanstack/react-table": "^8.21.3",
"@tidbcloud/codemirror-extension-cur-sql-gutter": "^0.0.6",
"@tidbcloud/codemirror-extension-events": "^0.0.7",
Expand All @@ -61,12 +61,12 @@
"clsx": "^2.1.1",
"dayjs": "^1.11.18",
"i18next": "^25.6.0",
"lucide-react": "^0.545.0",
"lucide-react": "^0.546.0",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-dropzone": "^14.3.8",
"react-hook-form": "^7.65.0",
"react-i18next": "^16.0.0",
"react-i18next": "^16.1.3",
"react-intersection-observer": "^9.16.0",
"react-resizable-panels": "^3.0.6",
"sonner": "^2.0.7",
Expand All @@ -78,38 +78,38 @@
"zustand": "^5.0.8"
},
"devDependencies": {
"@eslint/js": "^9.37.0",
"@eslint/js": "^9.38.0",
"@ianvs/prettier-plugin-sort-imports": "^4.7.0",
"@julr/vite-plugin-validate-env": "^2.2.0",
"@orval/core": "^7.13.2",
"@tanstack/eslint-plugin-query": "^5.91.0",
"@tanstack/router-devtools": "^1.132.51",
"@tanstack/router-plugin": "^1.132.56",
"@types/node": "^24.7.2",
"@orval/core": "^7.14.0",
"@tanstack/eslint-plugin-query": "^5.91.2",
"@tanstack/router-devtools": "^1.133.20",
"@tanstack/router-plugin": "^1.133.20",
"@types/node": "^24.9.1",
"@types/react": "^19.2.2",
"@types/react-dom": "^19.2.1",
"@types/react-dom": "^19.2.2",
"@vitejs/plugin-react": "^5.0.4",
"eslint": "^9.37.0",
"eslint": "^9.38.0",
"eslint-plugin-check-file": "^3.3.0",
"eslint-plugin-n": "^17.23.1",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "6.0.0",
"eslint-plugin-react-refresh": "^0.4.23",
"knip": "^5.65.0",
"lint-staged": "^16.2.4",
"npm-check-updates": "^19.0.0",
"orval": "^7.13.2",
"eslint-plugin-react-refresh": "^0.4.24",
"knip": "^5.66.2",
"lint-staged": "^16.2.5",
"npm-check-updates": "^19.1.1",
"orval": "^7.14.0",
"prettier": "^3.6.2",
"prettier-plugin-packagejson": "^2.5.19",
"prettier-plugin-tailwindcss": "^0.6.14",
"prettier-plugin-tailwindcss": "^0.7.1",
"simple-git-hooks": "^2.13.1",
"tailwindcss": "^4.1.14",
"tailwindcss": "^4.1.15",
"typescript": "^5.9.3",
"typescript-eslint": "^8.46.0",
"vite": "^7.1.9",
"typescript-eslint": "^8.46.2",
"vite": "^7.1.11",
"vite-tsconfig-paths": "^5.1.4"
},
"packageManager": "[email protected].2",
"packageManager": "[email protected].3",
"engines": {
"node": ">=v22.16.0",
"npm": "Please, use pnpm",
Expand Down
1,275 changes: 615 additions & 660 deletions ui/pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions ui/src/lib/axios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@ const axiosInstance = axios.create({
withCredentials: true,
});

// axiosInstance.interceptors.response.use(async (response) => {
// // ⏳ add 3s delay
// await new Promise((resolve) => setTimeout(resolve, 3000));
// return response;
// });

// See request interceptor in AxiosInterceptors.tsx
// See response interceptor in AxiosInterceptors.tsx

Expand Down
3 changes: 1 addition & 2 deletions ui/src/modules/auth/AxiosInterceptors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ type InterceptorError = AxiosError<AuthErrorResponse>;

const isTokenExpiredError = (error: InterceptorError, originalRequest: OriginalRequest) => {
return (
error.response &&
error.response.status === UNAUTHORIZED_STATUS_CODE &&
error.response?.status === UNAUTHORIZED_STATUS_CODE &&
error.response.data.errorKind === 'expiredSignature' &&
!originalRequest._retry
);
Expand Down
9 changes: 8 additions & 1 deletion ...-center-panel/editor-center-panel-header/editor-center-panel-header-tabs-close-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@ import { useEditorSettingsStore } from '../../editor-settings-store';

interface EditorCenterPanelHeaderTabsCloseButtonProps {
tab: Worksheet;
disabled: boolean;
}

export function EditorCenterPanelHeaderTabsCloseButton({
disabled,
tab,
}: EditorCenterPanelHeaderTabsCloseButtonProps) {
const { worksheetId } = useParams({ from: '/sql-editor/$worksheetId/' });
Expand Down Expand Up @@ -45,7 +47,12 @@ export function EditorCenterPanelHeaderTabsCloseButton({
};

return (
<Button variant="ghost" onClick={(e) => handleTabClose(e, tab)} className="ml-auto size-6">
<Button
disabled={disabled}
variant="ghost"
onClick={(e) => handleTabClose(e, tab)}
className="ml-auto size-6 transition-none"
>
<X />
</Button>
);
Expand Down
9 changes: 7 additions & 2 deletions ...editor/editor-center-panel/editor-center-panel-header/editor-center-panel-header-tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,25 @@ import { EditorCenterPanelHeaderTabsCloseButton } from './editor-center-panel-he

export function EditorCenterPanelHeaderTabs() {
const tabs = useEditorSettingsStore((state) => state.tabs);
const createQueryPending = useEditorSettingsStore((state) => state.createQueryPending);

return (
<div className="relative flex items-center gap-1">
{tabs.map((tab) => (
<Link
key={tab.id}
disabled={createQueryPending}
to="/sql-editor/$worksheetId"
params={{ worksheetId: tab.id.toString() }}
activeOptions={{
includeSearch: false,
}}
>
{({ isActive }) => (
<div
className={cn(
'bg-muted relative flex h-9 w-[180px] items-center self-end rounded-tl-md rounded-tr-md rounded-b-none border border-b-0 px-3 text-xs',
'hover:bg-hover',
!createQueryPending && 'hover:bg-hover',
isActive
? 'text-primary-foreground bg-transparent hover:bg-transparent'
: 'border-none',
Expand All @@ -34,7 +39,7 @@ export function EditorCenterPanelHeaderTabs() {
)}
/>
<span className="mr-2 max-w-28 truncate">{tab.name}</span>
<EditorCenterPanelHeaderTabsCloseButton tab={tab} />
<EditorCenterPanelHeaderTabsCloseButton disabled={createQueryPending} tab={tab} />
</div>
)}
</Link>
Expand Down
5 changes: 3 additions & 2 deletions ...ules/editor/editor-center-panel/editor-center-panel-header/editor-center-panel-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const EditorCenterPanelHeader = () => {
const queryClient = useQueryClient();
const navigate = useNavigate();
const addTab = useEditorSettingsStore((state) => state.addTab);
const createQueryPending = useEditorSettingsStore((state) => state.createQueryPending);

const { mutate, isPending } = useCreateWorksheet({
mutation: {
Expand Down Expand Up @@ -49,11 +50,11 @@ export const EditorCenterPanelHeader = () => {
</ScrollArea>
</div>
<Button
disabled={isPending}
disabled={isPending || createQueryPending}
onClick={handleAddTab}
variant="outline"
size="icon"
className="hover:bg-hover! mt-auto mr-4 size-9 rounded-tl-md rounded-tr-md rounded-b-none border-b-0 border-none transition-all"
className="hover:bg-hover! mt-auto mr-4 size-9 rounded-tl-md rounded-tr-md rounded-b-none border-b-0 border-none transition-none"
>
+
</Button>
Expand Down
5 changes: 3 additions & 2 deletions ...es/editor/editor-center-panel/editor-center-panel-toolbar/editor-center-panel-toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ import { EditorCenterPanelToolbarShareButton } from './editor-center-panel-toolb

interface EditorToolbarProps {
onRunQuery: (query: string) => void;
isLoading: boolean;
}

export const EditorCenterPanelToolbar = ({ onRunQuery }: EditorToolbarProps) => {
export const EditorCenterPanelToolbar = ({ onRunQuery, isLoading }: EditorToolbarProps) => {
return (
<div>
<SidebarGroup className="flex justify-between border-b p-4">
<div className="flex items-center gap-2">
<EditorCenterPanelToolbarRunSqlButton onRunQuery={onRunQuery} />
<EditorCenterPanelToolbarRunSqlButton onRunQuery={onRunQuery} disabled={isLoading} />
<EditorContextDropdown />
<div className="ml-auto flex items-center gap-1">
<EditorCenterPanelToolbarBeautifyButton />
Expand Down
Loading