implement add and remove logic

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

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[]) => {

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 { useAddMetricsToDashboard, useGetDashboard } from '@/api/buster_rest/dashboards';
-import { useQueryClient } from '@tanstack/react-query';
 
 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<string[]>([]);
 
   const columns: InputSelectModalProps['columns'] = [
@@ -41,8 +42,11 @@ export const AddToDashboardModal: React.FC<{
     }));
   }, [metrics.length]);
 
-  const handleAddMetrics = useMemoizedFn(async () => {
+  const handleAddAndRemoveMetrics = useMemoizedFn(async () => {
-    // TODO: Implement the API call to add metrics to dashboard
+    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 (
     <InputSelectModal
+      width={650}
       open={open}
       onClose={onClose}
       columns={columns}

web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx

@@ -7,7 +7,7 @@ import {
   useUpdateMetric
 } from '@/api/buster_rest/metrics';
 import {
-  useSaveMetricsToDashboard,
+  useAddMetricsToDashboard,
   useRemoveMetricsFromDashboard
 } from '@/api/buster_rest/dashboards';
 import { DropdownContent, DropdownItem, DropdownItems } from '@/components/ui/dropdown';
@@ -125,7 +125,7 @@ export const ThreeDotMenuButton = React.memo(({ metricId }: { metricId: string }
 ThreeDotMenuButton.displayName = 'ThreeDotMenuButton';
 
 const useDashboardSelectMenu = ({ metricId }: { metricId: string }) => {
-  const { mutateAsync: saveMetricsToDashboard } = useSaveMetricsToDashboard();
+  const { mutateAsync: saveMetricsToDashboard } = useAddMetricsToDashboard();
   const { mutateAsync: removeMetricsFromDashboard } = useRemoveMetricsFromDashboard();
   const { data: dashboards } = useGetMetric({ id: metricId }, (x) => x.dashboards);