Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove unused editor + drop version on save

This commit is contained in:
Nate Kelley 2025-09-22 21:36:25 -06:00
parent 87376682cb
commit 75e7506dde
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
5 changed files with 31 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web/src/api/buster_rest/dashboards/mutations/useSaveDashboard.ts
View File

@ -1,8 +1,7 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useNavigate } from '@tanstack/react-router';
import last from 'lodash/last';
import { create } from 'mutative';
import { dashboardQueryKeys } from '@/api/query_keys/dashboard';
import { metricsQueryKeys } from '@/api/query_keys/metric';
import { setOriginalDashboard } from '@/context/Dashboards/useOriginalDashboardStore';
import { initializeMetrics } from '../dashboardQueryHelpers';
import { dashboardsUpdateDashboard } from '../requests';
@ -14,6 +13,7 @@ import { dashboardsUpdateDashboard } from '../requests';
export const useSaveDashboard = (params?: { updateOnSave?: boolean }) => {
const updateOnSave = params?.updateOnSave || false;
const queryClient = useQueryClient();
const navigate = useNavigate();
return useMutation({
mutationFn: dashboardsUpdateDashboard,
@ -55,6 +55,11 @@ export const useSaveDashboard = (params?: { updateOnSave?: boolean }) => {
const isLatestVersion = data.dashboard.version_number === last(data.versions)?.version_number;
if (isLatestVersion) setOriginalDashboard(data.dashboard);
navigate({
to: '.',
ignoreBlocker: true,
search: (prev) => ({ ...prev, dashboard_version_number: undefined }),
});
},
});
};

85
apps/web/src/components/ui/layouts/AppVerticalCodeSplitter/AppVerticalCodeSplitter.stories.tsx
View File

@ -1,85 +0,0 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { AppVerticalCodeSplitter } from './AppVerticalCodeSplitter';
const meta: Meta<typeof AppVerticalCodeSplitter> = {
title: 'Features/Layout/AppVerticalCodeSplitter',
component: AppVerticalCodeSplitter,
parameters: {
layout: 'fullscreen',
},
tags: ['autodocs'],
args: {
className: 'min-h-[600px] min-w-[600px]',
},
decorators: [
(Story) => (
<div className="" style={{ height: '500px' }}>
<Story />
</div>
),
],
};
export default meta;
type Story = StoryObj<typeof AppVerticalCodeSplitter>;
const mockData: Record<string, string | number | null>[] = [
{ id: 1, name: 'Sample Data 1' },
{ id: 2, name: 'Sample Data 2' },
];
export const Default: Story = {
args: {
sql: 'SELECT * FROM sample_table',
setSQL: (sql: string) => alert('SQL changed: ' + sql),
runSQLError: '',
onRunQuery: async () => alert('Running query...'),
data: mockData,
fetchingData: false,
defaultLayout: ['50%', 'auto'],
autoSaveId: 'default-split-for-code-splitter',
},
};
export const WithError: Story = {
args: {
...Default.args,
runSQLError: 'Invalid SQL syntax',
},
};
export const Loading: Story = {
args: {
...Default.args,
fetchingData: true,
},
};
export const TopHidden: Story = {
args: {
...Default.args,
topHidden: true,
},
};
export const CustomGap: Story = {
args: {
...Default.args,
gapAmount: 6,
},
};
export const WithSaveButton: Story = {
args: {
...Default.args,
onSaveSQL: async () => alert('Saving SQL...'),
},
};
export const DisabledSave: Story = {
args: {
...Default.args,
onSaveSQL: async () => alert('Saving SQL...'),
disabledSave: true,
},
};

104
apps/web/src/components/ui/layouts/AppVerticalCodeSplitter/AppVerticalDiffCodeSplitter.tsx
View File

@ -1,104 +0,0 @@
import type { DataResult } from '@buster/server-shared/metrics';
import { forwardRef } from 'react';
import {
AppSplitter,
type AppSplitterRef,
type LayoutSize,
} from '@/components/ui/layouts/AppSplitter';
import { DataContainer } from './DataContainer';
import { DiffSQLContainer } from './DiffSQLContainer';
const DEFAULT_LAYOUT: LayoutSize = ['auto', '300px'];
export interface AppVerticalDiffCodeSplitterProps {
originalValue: string;
value: string;
setValue: (value: string) => void;
language: 'sql' | 'yaml';
runSQLError: string | undefined;
onRunQuery: () => Promise<void>;
data: DataResult;
fetchingData: boolean;
defaultLayout?: LayoutSize;
initialLayout?: LayoutSize | null;
autoSaveId: string;
topHidden?: boolean;
onSaveSQL?: () => Promise<void>;
disabledSave?: boolean;
gapAmount?: number;
className?: string;
fileName?: string;
versionNumber?: number;
}
export const AppVerticalDiffCodeSplitter = forwardRef<
AppSplitterRef,
AppVerticalDiffCodeSplitterProps
>(
(
{
originalValue,
value,
setValue,
language,
runSQLError,
onRunQuery,
onSaveSQL,
data,
initialLayout = null,
fetchingData,
defaultLayout = DEFAULT_LAYOUT,
autoSaveId,
fileName,
versionNumber,
disabledSave = false,
topHidden = false,
gapAmount = 3,
className,
},
ref
) => {
//tailwind might not like this, but yolo
const sqlContainerClassName = !topHidden ? `mb-${gapAmount}` : '';
const dataContainerClassName = !topHidden ? `mt-${gapAmount}` : '';
return (
<AppSplitter
ref={ref}
leftChildren={
<DiffSQLContainer
className={sqlContainerClassName}
originalValue={originalValue}
value={value}
setValue={setValue}
language={language}
error={runSQLError}
onRunQuery={onRunQuery}
onSaveSQL={onSaveSQL}
disabledSave={disabledSave}
fileName={fileName}
versionNumber={versionNumber}
/>
}
rightChildren={
<DataContainer
className={dataContainerClassName}
data={data}
fetchingData={fetchingData}
/>
}
split="horizontal"
defaultLayout={defaultLayout}
initialLayout={initialLayout}
autoSaveId={autoSaveId}
preserveSide="left"
rightPanelMinSize={'80px'}
leftPanelMinSize={'120px'}
leftHidden={topHidden}
className={className}
/>
);
}
);
AppVerticalDiffCodeSplitter.displayName = 'AppVerticalDiffCodeSplitter';

61
apps/web/src/components/ui/layouts/AppVerticalCodeSplitter/DiffSQLContainer.tsx
View File

@ -1,61 +0,0 @@
import React, { useMemo, useState } from 'react';
import { Button } from '@/components/ui/buttons/Button';
import { FileCard } from '@/components/ui/card/FileCard';
import { Copy2 } from '@/components/ui/icons';
import { AppDiffCodeEditor } from '@/components/ui/inputs/AppDiffCodeEditor';
import { TextAndVersionPill } from '@/components/ui/typography/TextAndVersionPill';
import { useBusterNotifications } from '@/context/BusterNotifications';
import { useMemoizedFn } from '@/hooks/useMemoizedFn';
import type { AppVerticalCodeSplitterProps } from './AppVerticalCodeSplitter';
export const DiffSQLContainer: React.FC<{
className?: string;
originalValue: string | undefined;
value: string | undefined;
setValue: (value: string) => void;
onRunQuery: () => Promise<void>;
onSaveSQL?: AppVerticalCodeSplitterProps['onSaveSQL'];
disabledSave?: AppVerticalCodeSplitterProps['disabledSave'];
error?: string | null;
language: 'sql' | 'yaml';
fileName?: string;
versionNumber?: number;
}> = React.memo(({ language, originalValue, value, setValue, fileName, versionNumber }) => {
// const [isRunning, setIsRunning] = useState(false);
const { openInfoMessage } = useBusterNotifications();
const onCopySQL = useMemoizedFn(() => {
navigator.clipboard.writeText(value || '');
openInfoMessage('Copied to clipboard');
});
// const onRunQueryPreflight = useMemoizedFn(async () => {
// setIsRunning(true);
// await onRunQuery();
// setIsRunning(false);
// });
return (
<FileCard
headerButtons={useMemo(
() => <Button prefix={<Copy2 />} variant="ghost" onClick={onCopySQL} />,
[onCopySQL]
)}
fileName={useMemo(
() => <TextAndVersionPill fileName={fileName || ''} versionNumber={versionNumber || 0} />,
[fileName, versionNumber]
)}
>
<AppDiffCodeEditor
className="overflow-hidden"
modified={value || ''}
original={originalValue || ''}
language={language}
onChange={setValue}
readOnly={true}
/>
</FileCard>
);
});
DiffSQLContainer.displayName = 'DiffSQLContainer';

26
apps/web/src/controllers/DatasetsControllers/DatasetEditorController/DatasetEditorController.tsx
View File

@ -7,7 +7,10 @@ import { useMemo, useRef, useState } from 'react';
import { useGetDatasetData } from '@/api/buster_rest/datasets';
import { useRunSQL } from '@/api/buster_rest/sql';
import type { AppSplitterRef, LayoutSize } from '@/components/ui/layouts/AppSplitter';
import { AppVerticalCodeSplitter } from '@/components/ui/layouts/AppVerticalCodeSplitter';
import {
AppVerticalCodeSplitter,
type AppVerticalCodeSplitterProps,
} from '@/components/ui/layouts/AppVerticalCodeSplitter';
import { useMemoizedFn } from '@/hooks/useMemoizedFn';
import { useRequest } from '@/hooks/useRequest';
import { cn } from '@/lib/classMerge';
@ -74,6 +77,24 @@ export const DatasetEditorController: React.FC<{
}
});
const runButton: AppVerticalCodeSplitterProps['runButton'] = useMemo(() => {
return {
label: 'Run',
onClick: onRunQuery,
loading: fetchingTempData,
disabled: false,
};
}, [onRunQuery, fetchingTempData]);
const saveButton: AppVerticalCodeSplitterProps['saveButton'] = useMemo(() => {
return {
label: 'Save',
onClick: onRunQuery,
loading: fetchingInitialData,
disabled: false,
};
}, [onRunQuery, fetchingInitialData]);
return (
<div className="flex h-full w-full flex-col overflow-hidden" ref={ref}>
<EditorContainerSubHeader selectedApp={selectedApp} setSelectedApp={setSelectedApp} />
@ -85,7 +106,8 @@ export const DatasetEditorController: React.FC<{
sql={sql}
setSQL={setSQL}
runSQLError={runSQLError?.message}
onRunQuery={onRunQuery}
runButton={runButton}
saveButton={saveButton}
data={shownData}
fetchingData={fetchingInitialData || fetchingTempData}
defaultLayout={defaultLayout}