Merge branch 'staging' into big-nate-bus-1647-make-report-top-level-button

apps/web/src/components/ui/metric/MetricCard.tsx

@@ -9,8 +9,7 @@ import type { DropdownItems } from '../dropdown';
 import Link from 'next/link';
 import { PreparingYourRequestLoader } from '../charts/LoadingComponents';
 
-export const MetricCard = React.memo(
-  React.forwardRef<
+export const MetricCard = React.forwardRef<
   HTMLDivElement,
   {
     className?: string;
@@ -19,9 +18,7 @@ export const MetricCard = React.memo(
     isDragOverlay: boolean;
     readOnly: boolean;
     metricData: BusterMetricData | undefined;
-      metric:
-        | Pick<BusterMetric, 'name' | 'time_frame' | 'chart_config' | 'description'>
-        | undefined;
+    metric: Pick<BusterMetric, 'name' | 'time_frame' | 'chart_config' | 'description'> | undefined;
     renderChart: boolean;
     loading: boolean;
     error: string | undefined;
@@ -31,7 +28,7 @@ export const MetricCard = React.memo(
     listeners?: DraggableSyntheticListeners;
     threeDotMenuItems: DropdownItems;
   }
-  >(
+>(
   (
     {
       className = '',
@@ -109,5 +106,4 @@ export const MetricCard = React.memo(
       </Card>
     );
   }
-  )
 );

apps/web/src/components/ui/metric/MetricCardThreeMenuContainer.tsx

@@ -2,16 +2,15 @@ import { cn } from '@/lib/classMerge';
 import React, { useState } from 'react';
 import { Dropdown, type DropdownItems } from '../dropdown';
 
-export const MetricCardThreeMenuContainer = React.memo(
-  ({
+export const MetricCardThreeMenuContainer = ({
   children,
   dropdownItems,
   className
-  }: {
+}: {
   className?: string;
   children: React.ReactNode;
   dropdownItems: DropdownItems;
-  }) => {
+}) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -22,19 +21,16 @@ export const MetricCardThreeMenuContainer = React.memo(
       }}
       className={cn(
         // Use opacity and pointer-events instead of display:none to maintain positioning context
-          'w-8.5 rounded transition-opacity duration-75',
-          'pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100',
-          className,
-          isOpen && 'pointer-events-auto opacity-100'
+        '-mr-2 hidden group-hover:block',
+        'group-hover:pointer-events-auto',
+        isOpen && 'pointer-events-auto block',
+        className
       )}>
-        <div className="absolute top-3 right-1.5">
       <Dropdown items={dropdownItems} side="top" align="end" onOpenChange={setIsOpen}>
         {children}
       </Dropdown>
     </div>
-      </div>
   );
-  }
-);
+};
 
 MetricCardThreeMenuContainer.displayName = 'MetricCardThreeMenuContainer';

apps/web/src/components/ui/metric/MetricTitle.tsx

@@ -20,8 +20,7 @@ export const MetricTitle: React.FC<{
   isDragOverlay: boolean;
   readOnly?: boolean;
   threeDotMenuItems: DropdownItems;
-}> = React.memo(
-  ({
+}> = ({
   readOnly = true,
   name,
   description,
@@ -29,7 +28,7 @@ export const MetricTitle: React.FC<{
   metricLink,
   timeFrame,
   threeDotMenuItems
-  }) => {
+}) => {
   const router = useRouter();
 
   useMount(() => {
@@ -37,8 +36,8 @@ export const MetricTitle: React.FC<{
   });
 
   return (
-      <>
-        <div className={'flex h-full cursor-pointer flex-col space-y-0.5 overflow-hidden'}>
+    <div className="group flex h-full min-h-0 w-full flex-1 flex-nowrap space-x-0.5">
+      <div className={'flex h-full flex-1 cursor-pointer flex-col space-y-0.5 overflow-hidden'}>
         <div className="flex w-full justify-between space-x-0.5 overflow-hidden">
           <Title
             as="h4"
@@ -66,11 +65,10 @@ export const MetricTitle: React.FC<{
 
       {isDragOverlay || readOnly ? null : (
         <MetricCardThreeMenuContainer dropdownItems={threeDotMenuItems}>
-            <Button variant="ghost" className="bg-item-hover!" prefix={<DotsVertical />} />
+          <Button variant="ghost" className="hover:bg-item-active" prefix={<DotsVertical />} />
         </MetricCardThreeMenuContainer>
       )}
-      </>
+    </div>
   );
-  }
-);
+};
 MetricTitle.displayName = 'MetricTitle';

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo,useContext } from 'react';
+import React, { useMemo, useContext } from 'react';
 import { useMemoizedFn } from '@/hooks';
 import { useDashboardMetric } from './useDashboardMetric';
 import { assetParamsToRoute } from '@/lib/assets';
@@ -47,10 +47,8 @@ const DashboardMetricItemBase: React.FC<{
   const animate =
     !initialAnimationEnded && !isDragOverlay && dataLength < 125 && numberOfMetrics <= 30;
 
-  const error: string | undefined = useMemo(
-    () => metric?.error || metricDataError?.message || metricError?.message || undefined,
-    [metric?.error, metricDataError, metricError]
-  );
+  const error: string | undefined =
+    metric?.error || metricDataError?.message || metricError?.message || undefined;
 
   const metricLink = useMemo(() => {
     return assetParamsToRoute({
@@ -92,4 +90,4 @@ const DashboardMetricItemBase: React.FC<{
   );
 };
 
-export const DashboardMetricItem = React.memo(DashboardMetricItemBase);
+export const DashboardMetricItem = DashboardMetricItemBase;