From f9dab63b67680ed1820e16ac4779b9a14b59ea78 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Fri, 21 Mar 2025 13:37:28 -0600 Subject: [PATCH] implement add and remove logic --- .../api/buster_rest/dashboards/queryRequests.ts | 9 ++++++--- .../buttons/SaveMetricToDashboardButton.tsx | 4 ++-- .../features/modal/AddToDashboardModal.tsx | 17 +++++++++++------ .../MetricThreeDotMenu.tsx | 4 ++-- 4 files changed, 21 insertions(+), 13 deletions(-) diff --git a/web/src/api/buster_rest/dashboards/queryRequests.ts b/web/src/api/buster_rest/dashboards/queryRequests.ts index 1902ab7b2..8f77b7044 100644 --- a/web/src/api/buster_rest/dashboards/queryRequests.ts +++ b/web/src/api/buster_rest/dashboards/queryRequests.ts @@ -330,12 +330,15 @@ export const useUpdateDashboardShare = () => { }); }; -export const useSaveMetricsToDashboard = () => { +/** + * Hook for adding metrics to a dashboard. This function also supports removing metrics via the addMetricToDashboardConfig + */ +export const useAddMetricsToDashboard = () => { const queryClient = useQueryClient(); const prefetchDashboard = useGetDashboardAndInitializeMetrics(); const { openErrorMessage } = useBusterNotifications(); - const saveMetricToDashboard = useMemoizedFn( + const addMetricToDashboard = useMemoizedFn( async ({ metricIds, dashboardId }: { metricIds: string[]; dashboardId: string }) => { const options = dashboardQueryKeys.dashboardGetDashboard(dashboardId); let dashboardResponse = queryClient.getQueryData(options.queryKey); @@ -363,7 +366,7 @@ export const useSaveMetricsToDashboard = () => { ); return useMutation({ - mutationFn: saveMetricToDashboard, + mutationFn: addMetricToDashboard, onSuccess: (data, variables) => { queryClient.invalidateQueries({ queryKey: dashboardQueryKeys.dashboardGetDashboard(variables.dashboardId).queryKey diff --git a/web/src/components/features/buttons/SaveMetricToDashboardButton.tsx b/web/src/components/features/buttons/SaveMetricToDashboardButton.tsx index b010f0ee3..5247a4984 100644 --- a/web/src/components/features/buttons/SaveMetricToDashboardButton.tsx +++ b/web/src/components/features/buttons/SaveMetricToDashboardButton.tsx @@ -6,7 +6,7 @@ import { Button } from '@/components/ui/buttons'; import { ASSET_ICONS } from '../config/assetIcons'; import { useRemoveMetricsFromDashboard, - useSaveMetricsToDashboard + useAddMetricsToDashboard } from '@/api/buster_rest/dashboards'; const EMPTY_SELECTED_DASHBOARDS: BusterMetric['dashboards'] = []; @@ -17,7 +17,7 @@ export const SaveMetricToDashboardButton: React.FC<{ selectedDashboards?: BusterMetric['dashboards']; }> = React.memo( ({ metricIds, disabled = false, selectedDashboards = EMPTY_SELECTED_DASHBOARDS }) => { - const { mutateAsync: saveMetricsToDashboard } = useSaveMetricsToDashboard(); + const { mutateAsync: saveMetricsToDashboard } = useAddMetricsToDashboard(); const { mutateAsync: removeMetricsFromDashboard } = useRemoveMetricsFromDashboard(); const onSaveToDashboard = useMemoizedFn(async (dashboardIds: string[]) => { diff --git a/web/src/components/features/modal/AddToDashboardModal.tsx b/web/src/components/features/modal/AddToDashboardModal.tsx index e940ca027..5b06c12b6 100644 --- a/web/src/components/features/modal/AddToDashboardModal.tsx +++ b/web/src/components/features/modal/AddToDashboardModal.tsx @@ -4,8 +4,7 @@ import React, { useLayoutEffect, useMemo, useState } from 'react'; import { InputSelectModal, InputSelectModalProps } from '@/components/ui/modal/InputSelectModal'; import { formatDate } from '@/lib'; import { Button } from '@/components/ui/buttons'; -import { useGetDashboard } from '@/api/buster_rest/dashboards'; -import { useQueryClient } from '@tanstack/react-query'; +import { useAddMetricsToDashboard, useGetDashboard } from '@/api/buster_rest/dashboards'; export const AddToDashboardModal: React.FC<{ open: boolean; @@ -14,6 +13,8 @@ export const AddToDashboardModal: React.FC<{ }> = React.memo(({ open, onClose, dashboardId }) => { const { data: dashboard, isFetched: isFetchedDashboard } = useGetDashboard(dashboardId); const { data: metrics, isFetched: isFetchedMetrics } = useGetMetricsList({}); + const { mutateAsync: addMetricsToDashboard } = useAddMetricsToDashboard(); + const [selectedMetrics, setSelectedMetrics] = useState([]); const columns: InputSelectModalProps['columns'] = [ @@ -41,8 +42,11 @@ export const AddToDashboardModal: React.FC<{ })); }, [metrics.length]); - const handleAddMetrics = useMemoizedFn(async () => { - // TODO: Implement the API call to add metrics to dashboard + const handleAddAndRemoveMetrics = useMemoizedFn(async () => { + await addMetricsToDashboard({ + dashboardId: dashboardId, + metricIds: selectedMetrics + }); onClose(); }); @@ -80,14 +84,14 @@ export const AddToDashboardModal: React.FC<{ }, primaryButton: { text: `Update metrics`, - onClick: handleAddMetrics, + onClick: handleAddAndRemoveMetrics, disabled: !isSelectedChanged, tooltip: isSelectedChanged ? `Adding ${selectedMetrics.length} metrics` : 'No changes to update' } }; - }, [selectedMetrics.length, isSelectedChanged, handleAddMetrics]); + }, [selectedMetrics.length, isSelectedChanged, handleAddAndRemoveMetrics]); useLayoutEffect(() => { if (isFetchedDashboard) { @@ -98,6 +102,7 @@ export const AddToDashboardModal: React.FC<{ return ( { - const { mutateAsync: saveMetricsToDashboard } = useSaveMetricsToDashboard(); + const { mutateAsync: saveMetricsToDashboard } = useAddMetricsToDashboard(); const { mutateAsync: removeMetricsFromDashboard } = useRemoveMetricsFromDashboard(); const { data: dashboards } = useGetMetric({ id: metricId }, (x) => x.dashboards);