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

add more 3 dot menu items

This commit is contained in:
Nate Kelley 2025-03-17 11:29:33 -06:00
parent 5f6ce012e2
commit 3999262ce8
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
9 changed files with 48 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/features/layouts/AppVerticalCodeSplitter/DataContainer.tsx
View File

@ -15,7 +15,7 @@ export const DataContainer: React.FC<{
return (
<div
className={cn(
'bg-background rounded border',
'bg-background rounded border shadow',
'relative h-full w-full overflow-hidden',
className
)}>

2
web/src/components/features/list/FavoriteStar.tsx
View File

@ -81,8 +81,6 @@ export const useFavoriteStar = ({
return userFavorites?.some((favorite) => favorite.id === id || favorite.collection_id === id);
}, [userFavorites, id]);
console.log('userFavorites', isFavorited, userFavorites);
const onFavoriteClick = useMemoizedFn(async (e?: React.MouseEvent<HTMLButtonElement>) => {
e?.stopPropagation();
e?.preventDefault();

4
web/src/components/ui/dropdown/DropdownBase.tsx
View File

@ -28,7 +28,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
'focus:bg-item-hover data-[state=open]:bg-item-hover flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
'focus:bg-item-hover data-[state=open]:bg-item-hover flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-base outline-none select-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
'dropdown-item mx-1 [&.dropdown-item:first-child]:mt-1! [&.dropdown-item:has(+.dropdown-separator)]:mb-1 [&.dropdown-item:has(~.dropdown-separator)]:mt-1 [&.dropdown-item:last-child]:mb-1!',
inset && 'pl-8',
className
@ -204,7 +204,7 @@ const DropdownMenuLabel = React.forwardRef<
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Label
ref={ref}
className={cn('text-gray-dark px-2 py-1.5 text-sm', inset && 'pl-8', className)}
className={cn('text-gray-dark px-2 py-1.5 text-base', inset && 'pl-8', className)}
{...props}
/>
));

2
web/src/components/ui/layouts/AppSplitter/splitterStyles.css
View File

@ -10,7 +10,7 @@
position: absolute;
white-space: normal;
width: 100%;
overflow: hidden;
overflow: visible;
}
.react-split__sash {

5
web/src/components/ui/typography/EditableTitle.tsx
View File

@ -35,10 +35,12 @@ export const EditableTitle = React.memo(
placeholder?: string;
style?: React.CSSProperties;
inputClassName?: string;
id?: string;
} & VariantProps<typeof editableTitleVariants>
>(
(
{
id,
style,
disabled,
className = '',
@ -76,10 +78,11 @@ export const EditableTitle = React.memo(
<Input
placeholder={placeholder}
ref={inputRef}
id={id}
disabled={disabled}
variant="ghost"
className={cn(
'w-full cursor-text! px-0! py-0! leading-1',
'w-full cursor-text! rounded-none! px-0! py-0! leading-1',
editableTitleVariants({ level }),
inputClassName
)}

9
web/src/controllers/MetricController/MetricViewChart/MetricViewChartHeader.tsx
View File

@ -3,6 +3,8 @@ import { Text } from '@/components/ui/typography';
import { EditableTitle } from '@/components/ui/typography/EditableTitle';
import { cn } from '@/lib/classMerge';
export const METRIC_CHART_TITLE_INPUT_ID = 'metric-chart-title-input';
export const MetricViewChartHeader: React.FC<{
className?: string;
title: string | undefined;
@ -20,7 +22,12 @@ export const MetricViewChartHeader: React.FC<{
)}>
{hasTitleOrDescription ? (
<>
<EditableTitle level={4} className="" inputClassName="h-auto!" onChange={onSetTitle}>
<EditableTitle
id={METRIC_CHART_TITLE_INPUT_ID}
level={4}
className=""
inputClassName="h-auto!"
onChange={onSetTitle}>
{title}
</EditableTitle>
<div className="flex items-center space-x-1 whitespace-nowrap">

1
web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx
View File

@ -83,7 +83,6 @@ export const MetricViewResults: React.FC<MetricViewProps> = React.memo(({ metric
return (
<div ref={containerRef} className="h-full w-full p-5">
<AppVerticalCodeSplitter
className="shadow"
ref={appSplitterRef}
autoSaveId={autoSaveId}
sql={sql}

2
web/src/hooks/useSetInterval.ts
View File

@ -15,7 +15,7 @@ import { useMemoizedFn } from './useMemoizedFn';
* @example
* ```tsx
* const { start, stop, isActive } = useSetInterval(() => {
* console.log('This runs every second');
* //
* }, 1000);
* ```
*/

44
web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx
View File

@ -17,7 +17,6 @@ import {
Download4,
History,
SquareCode,
Table,
SquareChartPen,
Star,
ShareRight
@ -43,6 +42,8 @@ import { StatusBadgeIndicator } from '@/components/features/metrics/StatusBadgeI
import { useFavoriteStar } from '@/components/features/list/FavoriteStar';
import { downloadElementToImage, exportElementToImage, exportJSONToCSV } from '@/lib/exportUtils';
import { METRIC_CHART_CONTAINER_ID } from '@/controllers/MetricController/MetricViewChart/config';
import { timeout } from '@/lib';
import { METRIC_CHART_TITLE_INPUT_ID } from '@/controllers/MetricController/MetricViewChart/MetricViewChartHeader';
export const ThreeDotMenuButton = React.memo(({ metricId }: { metricId: string }) => {
const { mutateAsync: deleteMetric, isPending: isDeletingMetric } = useDeleteMetric();
@ -61,15 +62,11 @@ export const ThreeDotMenuButton = React.memo(({ metricId }: { metricId: string }
const downloadPNGMenu = useDownloadPNGSelectMenu({ metricId });
const deleteMetricMenu = useDeleteMetricSelectMenu({ metricId });
const renameMetricMenu = useRenameMetricSelectMenu({ metricId });
const shareMenu = useShareMenuSelectMenu({ metricId });
const items: DropdownItems = useMemo(
() => [
{
label: 'Share',
value: 'share',
icon: <ShareRight />,
items: []
},
shareMenu,
statusSelectMenu,
{ type: 'divider' },
dashboardSelectMenu,
@ -87,6 +84,7 @@ export const ThreeDotMenuButton = React.memo(({ metricId }: { metricId: string }
deleteMetricMenu
],
[
renameMetricMenu,
dashboardSelectMenu,
deleteMetricMenu,
downloadCSVMenu,
@ -101,7 +99,8 @@ export const ThreeDotMenuButton = React.memo(({ metricId }: { metricId: string }
collectionSelectMenu,
editChartMenu,
resultsViewMenu,
sqlEditorMenu
sqlEditorMenu,
shareMenu
]
);
@ -312,7 +311,7 @@ const useResultsViewSelectMenu = () => {
return useMemo(
() => ({
label: 'Results view',
value: 'edit-chart',
value: 'results-view',
onClick: onClickButton,
icon: <SquareChartPen />
}),
@ -354,7 +353,7 @@ const useDownloadCSVSelectMenu = ({ metricId }: { metricId: string }) => {
const data = metricData?.data;
if (data && title) {
setIsDownloading(true);
await exportJSONToCSV(data, `${title}.csv`);
await exportJSONToCSV(data, title);
setIsDownloading(false);
}
}
@ -414,6 +413,7 @@ const useDeleteMetricSelectMenu = ({ metricId }: { metricId: string }) => {
const useRenameMetricSelectMenu = ({ metricId }: { metricId: string }) => {
const { mutateAsync: updateMetric } = useUpdateMetric();
const onSetFileView = useChatLayoutContextSelector((x) => x.onSetFileView);
return useMemo(
() => ({
@ -421,11 +421,29 @@ const useRenameMetricSelectMenu = ({ metricId }: { metricId: string }) => {
value: 'rename-metric',
icon: <Pencil />,
onClick: async () => {
console.log('rename');
alert('TODO: Implement rename metric');
// await updateMetric({ id: metricId, title: 'New title' });
onSetFileView({ fileView: 'chart' });
await timeout(125);
const input = document.getElementById(METRIC_CHART_TITLE_INPUT_ID) as HTMLInputElement;
if (input) {
input.focus();
input.select();
}
}
}),
[metricId]
);
};
export const useShareMenuSelectMenu = ({ metricId }: { metricId: string }) => {
const { mutateAsync: updateMetric } = useUpdateMetric();
return useMemo(
() => ({
label: 'Share metric',
value: 'share-metric',
icon: <ShareRight />,
items: [<div className="bg-red-200 p-2">SWAG</div>]
}),
[]
);
};