make dashboard more dynamic

web/src/api/buster_rest/metrics/queryRequests.ts

@@ -301,6 +301,7 @@ export const useSaveMetricToDashboard = () => {
 export const useRemoveMetricFromDashboard = () => {
   const { openConfirmModal } = useBusterNotifications();
   const { mutateAsync: saveMetric } = useSaveMetric();
+  const queryClient = useQueryClient();
   const removeMetricFromDashboard = useMemoizedFn(
     async ({
       metricId,
@@ -329,7 +330,26 @@ export const useRemoveMetricFromDashboard = () => {
   );
 
   return useMutation({
-    mutationFn: removeMetricFromDashboard
+    mutationFn: removeMetricFromDashboard,
+    onMutate: async (variables) => {
+      const currentDashboard = queryClient.getQueryData(
+        dashboardQueryKeys.dashboardGetDashboard(variables.dashboardId).queryKey
+      );
+      if (currentDashboard) {
+        queryClient.setQueryData(
+          dashboardQueryKeys.dashboardGetDashboard(variables.dashboardId).queryKey,
+          (currentDashboard) => {
+            if (currentDashboard?.dashboard.config.rows) {
+              currentDashboard.dashboard.config.rows.forEach((row) => {
+                row.items = row.items.filter((item) => item.id !== variables.metricId);
+              });
+            }
+            delete currentDashboard!.metrics[variables.metricId];
+            return currentDashboard;
+          }
+        );
+      }
+    }
   });
 };
 

web/src/components/features/dropdowns/SaveToCollectionsDropdown.tsx

@@ -40,7 +40,7 @@ export const SaveToCollectionsDropdown: React.FC<{
         footerContent={footerContent}
         emptyStateText="No collections found"
         items={items}>
-        <AppTooltip title={showDropdown ? '' : 'Save to collection'}>{children} </AppTooltip>
+        {children}
       </Dropdown>
 
       <>{modal}</>

web/src/components/ui/list/BusterList/ListSelectedOptionPopup/ListSelectedOptionPopup.tsx

@@ -38,12 +38,12 @@ const SelectedButton: React.FC<{
       className={cn(
         'flex items-center',
         'bg-bg-container rounded pl-2',
-        'min-h-[28px]',
+        'min-h-[24px]',
         'border-border-default border border-dashed'
       )}>
       <Text>{text}</Text>
 
-      <div className="border-border-default ml-1.5 min-h-[28px] border-l border-dashed" />
+      <div className="border-border-default ml-1.5 min-h-[24px] border-l border-dashed" />
 
       <div
         onClick={() => {

web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx

@@ -43,8 +43,6 @@ export const MetricTitle: React.FC<{
       };
     }, [title, useEllipsis]);
 
-    console.log(readOnly, isDragOverlay);
-
     return (
       <Link href={metricLink}>
         <div
@@ -64,7 +62,7 @@ export const MetricTitle: React.FC<{
               <></>
             ) : (
               <ThreeDotMenu
-                className="absolute top-[5px] right-[12px] opacity-0 transition group-hover:opacity-100"
+                className="absolute top-[10px] right-[12px] opacity-0 transition group-hover:opacity-100"
                 dashboardId={dashboardId}
                 metricId={metricId}
               />
@@ -137,7 +135,7 @@ const ThreeDotMenu: React.FC<{
 
   return (
     <div onClick={onClick} className={`w-[24px] ${className}`}>
-      <Dropdown items={dropdownItems}>
+      <Dropdown items={dropdownItems} side="bottom">
         <Button variant="ghost" prefix={<DotsVertical />} />
       </Dropdown>
     </div>