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

Update MetricToolbar to support preselected metric and improve modal handling 

Co-authored-by: nate <nate@buster.so>
This commit is contained in:
Cursor Agent 2025-08-08 13:31:55 +00:00
parent dca78e9458
commit c97dc131f1
2 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/components/ui/report/elements/MetricElement/MetricElement.tsx
View File

@ -32,7 +32,7 @@ export const MetricElement = withHOC(
const readOnly = useReadOnly(); const readOnly = useReadOnly();
const content = metricId ? ( const content = metricId ? (
<MetricToolbar> <MetricToolbar selectedMetricId={metricId}>
<MetricResizeContainer> <MetricResizeContainer>
<MetricContent <MetricContent
metricId={metricId} metricId={metricId}

30
apps/web/src/components/ui/report/elements/MetricElement/MetricToolbar.tsx
View File

@ -9,7 +9,7 @@ import { NodeTypeLabels } from '../../config/labels';
import { AddMetricModal } from '@/components/features/modal/AddMetricModal'; import { AddMetricModal } from '@/components/features/modal/AddMetricModal';
import { MetricPlugin, type TMetricElement } from '../../plugins/metric-plugin'; import { MetricPlugin, type TMetricElement } from '../../plugins/metric-plugin';
export function MetricToolbar({ children }: { children: React.ReactNode }) { export function MetricToolbar({ children, selectedMetricId }: { children: React.ReactNode; selectedMetricId?: string }) {
const editor = useEditorRef(); const editor = useEditorRef();
const readOnly = useReadOnly(); const readOnly = useReadOnly();
const selected = useSelected(); const selected = useSelected();
@ -24,6 +24,10 @@ export function MetricToolbar({ children }: { children: React.ReactNode }) {
const [openEditModal, setOpenEditModal] = React.useState(false); const [openEditModal, setOpenEditModal] = React.useState(false);
const preselectedMetrics = React.useMemo(() => {
return selectedMetricId ? [{ id: selectedMetricId, name: '' }] : [];
}, [selectedMetricId]);
const onOpenEdit = React.useCallback(() => { const onOpenEdit = React.useCallback(() => {
editor.tf.select(); editor.tf.select();
setOpenEditModal(true); setOpenEditModal(true);
@ -33,6 +37,17 @@ export function MetricToolbar({ children }: { children: React.ReactNode }) {
setOpenEditModal(false); setOpenEditModal(false);
}, []); }, []);
const handleAddMetrics = React.useCallback(
async (metrics: { id: string; name: string }[]) => {
const id = metrics?.[0]?.id;
const at = editor.api.findPath(element);
if (!id || !at) return onCloseEdit();
plugin.api.metric.updateMetric(id, { at });
onCloseEdit();
},
[editor, element, onCloseEdit, plugin.api.metric]
);
return ( return (
<PopoverBase open={isOpen} modal={false}> <PopoverBase open={isOpen} modal={false}>
<PopoverAnchor>{children}</PopoverAnchor> <PopoverAnchor>{children}</PopoverAnchor>
@ -50,18 +65,9 @@ export function MetricToolbar({ children }: { children: React.ReactNode }) {
<AddMetricModal <AddMetricModal
open={openEditModal} open={openEditModal}
loading={false} loading={false}
selectedMetrics={[]} selectedMetrics={preselectedMetrics}
onClose={onCloseEdit} onClose={onCloseEdit}
onAddMetrics={async (metrics) => { onAddMetrics={handleAddMetrics}
const selectedMetricId = metrics?.[0]?.id;
if (!selectedMetricId) return onCloseEdit();
const at = editor.api.findPath(element);
if (!at) return onCloseEdit();
plugin.api.metric.updateMetric(selectedMetricId, { at });
onCloseEdit();
}}
selectionMode="single" selectionMode="single"
saveButtonText="Update metric" saveButtonText="Update metric"
/> />