Support multi-provider FinOps benchmark banner on HomePage (#2169)

cezudas · web-flow · commit 39133030df8e · 2026-03-25T18:06:58.000+05:30
Fixes OPS-3991.
diff --git a/packages/react-ui/src/app/features/home/components/home-onboarding-view.tsx b/packages/react-ui/src/app/features/home/components/home-onboarding-view.tsx
@@ -18,7 +18,7 @@ import {
   FlowTemplateMetadataWithIntegrations,
   NoWorkflowsPlaceholder,
 } from '@openops/components/ui';
-import { Permission } from '@openops/shared';
+import { BenchmarkProviders, Permission } from '@openops/shared';
 import { t } from 'i18next';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -105,17 +105,17 @@ const HomeOnboardingView = ({
   const {
     isEnabled: isFinOpsBenchmarkEnabled,
     variation: benchmarkVariation,
-    provider: benchmarkProvider,
+    providers: benchmarkProviders,
   } = useBenchmarkBannerState();
-  const onViewBenchmarkReportClick = () =>
-    navigate(`/analytics?dashboard=${benchmarkProvider}_benchmark`);
+  const onViewBenchmarkReportClick = (provider: BenchmarkProviders) =>
+    navigate(`/analytics?dashboard=${provider}_benchmark`);
 
   return (
     <div className="flex flex-col gap-6 flex-1">
       {isFinOpsBenchmarkEnabled && (
         <FinOpsBenchmarkBanner
           variation={benchmarkVariation}
-          provider={benchmarkProvider}
+          providers={benchmarkProviders}
           onActionClick={openBenchmarkWizard}
           onViewReportClick={onViewBenchmarkReportClick}
           disabled={!hasBenchmarkPermissions}
diff --git a/packages/react-ui/src/app/features/home/components/home-operational-view.tsx b/packages/react-ui/src/app/features/home/components/home-operational-view.tsx
@@ -6,7 +6,7 @@ import {
 } from '@/app/features/home/lib/home-hooks';
 import { HomeRunsTable } from '@/app/features/home/runs-table';
 import { FinOpsBenchmarkBanner, OverviewCard } from '@openops/components/ui';
-import { Permission } from '@openops/shared';
+import { BenchmarkProviders, Permission } from '@openops/shared';
 import { subDays } from 'date-fns';
 import { t } from 'i18next';
 import {
@@ -47,16 +47,16 @@ const HomeOperationalView = ({
   const {
     isEnabled: isFinOpsBenchmarkEnabled,
     variation: benchmarkVariation,
-    provider: benchmarkProvider,
+    providers: benchmarkProviders,
   } = useBenchmarkBannerState();
   const { checkAccess } = useAuthorization();
   const hasBenchmarkPermissions =
     checkAccess(Permission.WRITE_FLOW) &&
     checkAccess(Permission.READ_APP_CONNECTION);
 
   const openBenchmarkWizard = useOpenBenchmarkWizard();
-  const onViewBenchmarkReportClick = () =>
-    navigate(`/analytics?dashboard=${benchmarkProvider}_benchmark`);
+  const onViewBenchmarkReportClick = (provider: BenchmarkProviders) =>
+    navigate(`/analytics?dashboard=${provider}_benchmark`);
 
   return (
     <>
@@ -110,7 +110,7 @@ const HomeOperationalView = ({
       {isFinOpsBenchmarkEnabled && (
         <FinOpsBenchmarkBanner
           variation={benchmarkVariation}
-          provider={benchmarkProvider}
+          providers={benchmarkProviders}
           onActionClick={openBenchmarkWizard}
           onViewReportClick={onViewBenchmarkReportClick}
           disabled={!hasBenchmarkPermissions}
diff --git a/packages/react-ui/src/app/features/home/components/useBenchmarkBannerState.test.ts b/packages/react-ui/src/app/features/home/components/useBenchmarkBannerState.test.ts
@@ -49,7 +49,7 @@ describe('useBenchmarkBannerState', () => {
 
     expect(result.current.isEnabled).toBe(false);
     expect(result.current.variation).toBe('default');
-    expect(result.current.provider).toBe(undefined);
+    expect(result.current.providers).toEqual([]);
   });
 
   it('does not call listBenchmarks when banner should not be shown', () => {
@@ -91,7 +91,7 @@ describe('useBenchmarkBannerState', () => {
 
     expect(result.current.isEnabled).toBe(true);
     expect(result.current.variation).toBe('default');
-    expect(result.current.provider).toBe(undefined);
+    expect(result.current.providers).toEqual([]);
   });
 
   it('returns default variation when banner is shown but benchmark is RUNNING', () => {
@@ -152,7 +152,7 @@ describe('useBenchmarkBannerState', () => {
     const { result } = renderHook(() => useBenchmarkBannerState());
 
     expect(result.current.variation).toBe('report');
-    expect(result.current.provider).toBe('aws');
+    expect(result.current.providers).toEqual(['aws']);
   });
 
   it('returns report variation when there are multiple benchmarks and one has SUCCEEDED', () => {
@@ -172,6 +172,59 @@ describe('useBenchmarkBannerState', () => {
     const { result } = renderHook(() => useBenchmarkBannerState());
 
     expect(result.current.variation).toBe('report');
-    expect(result.current.provider).toBe('azure');
+    expect(result.current.providers).toEqual(['azure']);
+  });
+
+  it('returns succeeded providers in API order', () => {
+    mockUseShowBenchmarkBanner.mockReturnValue({
+      showBanner: true,
+      isPending: false,
+    });
+    setupQueryMock([
+      {
+        benchmarkId: 'bm-1',
+        provider: 'azure',
+        status: BenchmarkStatus.SUCCEEDED,
+      },
+      {
+        benchmarkId: 'bm-2',
+        provider: 'aws',
+        status: BenchmarkStatus.SUCCEEDED,
+      },
+    ]);
+
+    const { result } = renderHook(() => useBenchmarkBannerState());
+
+    expect(result.current.variation).toBe('report');
+    expect(result.current.providers).toEqual(['azure', 'aws']);
+  });
+
+  it('dedupes providers when multiple succeeded benchmarks share provider', () => {
+    mockUseShowBenchmarkBanner.mockReturnValue({
+      showBanner: true,
+      isPending: false,
+    });
+    setupQueryMock([
+      {
+        benchmarkId: 'bm-1',
+        provider: 'aws',
+        status: BenchmarkStatus.SUCCEEDED,
+      },
+      {
+        benchmarkId: 'bm-2',
+        provider: 'aws',
+        status: BenchmarkStatus.SUCCEEDED,
+      },
+      {
+        benchmarkId: 'bm-3',
+        provider: 'azure',
+        status: BenchmarkStatus.SUCCEEDED,
+      },
+    ]);
+
+    const { result } = renderHook(() => useBenchmarkBannerState());
+
+    expect(result.current.variation).toBe('report');
+    expect(result.current.providers).toEqual(['aws', 'azure']);
   });
 });
diff --git a/packages/react-ui/src/app/features/home/components/useBenchmarkBannerState.ts b/packages/react-ui/src/app/features/home/components/useBenchmarkBannerState.ts
@@ -7,7 +7,7 @@ import { useShowBenchmarkBanner } from './useShowBenchmarkBanner';
 type BenchmarkBannerState = {
   isEnabled: boolean;
   variation: 'default' | 'report';
-  provider?: BenchmarkProviders;
+  providers: BenchmarkProviders[];
 };
 
 export const useBenchmarkBannerState = (): BenchmarkBannerState => {
@@ -19,13 +19,22 @@ export const useBenchmarkBannerState = (): BenchmarkBannerState => {
     enabled: isEnabled,
   });
 
-  const succeededBenchmark = benchmarks?.find(
-    (b) => b.status === BenchmarkStatus.SUCCEEDED,
-  );
+  const succeededProviders =
+    benchmarks?.reduce<BenchmarkProviders[]>((providers, benchmark) => {
+      if (benchmark.status !== BenchmarkStatus.SUCCEEDED) {
+        return providers;
+      }
+
+      if (!providers.includes(benchmark.provider)) {
+        providers.push(benchmark.provider);
+      }
+
+      return providers;
+    }, []) ?? [];
 
   return {
     isEnabled,
-    variation: succeededBenchmark ? 'report' : 'default',
-    provider: succeededBenchmark?.provider,
+    variation: succeededProviders.length > 0 ? 'report' : 'default',
+    providers: succeededProviders,
   };
 };
diff --git a/packages/ui-components/src/components/finops-benchmark-banner/finops-benchmark-banner.tsx b/packages/ui-components/src/components/finops-benchmark-banner/finops-benchmark-banner.tsx
@@ -1,3 +1,4 @@
+import { BenchmarkProviders } from '@openops/shared';
 import { cva } from 'class-variance-authority';
 import { t } from 'i18next';
 import { LucideBarChart2, Sparkles } from 'lucide-react';
@@ -21,40 +22,42 @@ const finOpsActionsVariants = cva('flex shrink-0 items-center', {
   },
 });
 
-const PROVIDER_LABELS: Record<string, string> = {
-  aws: 'AWS',
-  azure: 'Azure',
+const PROVIDER_LABELS: Record<BenchmarkProviders, string> = {
+  [BenchmarkProviders.AWS]: 'AWS',
+  [BenchmarkProviders.AZURE]: 'Azure',
 };
 
 type FinOpsBenchmarkBannerProps = {
   variation?: 'default' | 'report';
-  provider?: 'aws' | 'azure';
+  providers?: BenchmarkProviders[];
   onActionClick?: () => void;
-  onViewReportClick?: () => void;
+  onViewReportClick?: (provider: BenchmarkProviders) => void;
   className?: string;
   disabled?: boolean;
 };
 
 const FinOpsBenchmarkBanner = ({
   variation = 'default',
-  provider = 'aws',
+  providers = [BenchmarkProviders.AWS],
   onActionClick,
   onViewReportClick,
   className,
   disabled = false,
 }: FinOpsBenchmarkBannerProps) => {
   const permissionMessage = usePermissionMessage();
   const disabledTooltip = disabled ? permissionMessage : undefined;
-  const providerLabel = PROVIDER_LABELS[provider];
 
   const content =
     variation === 'report'
       ? {
           title: t('FinOps Benchmark'),
           description:
-            t('Your') + ` ${providerLabel} ` + t('benchmark report is ready.'),
+            providers.length > 1
+              ? t('Your benchmark reports are ready.')
+              : t('Your') +
+                ` ${PROVIDER_LABELS[providers[0]]} ` +
+                t('benchmark report is ready.'),
           actionLabel: t('Re-run a Benchmark'),
-          reportLabel: t('See') + ` ${providerLabel} ` + t('Benchmark Report'),
         }
       : {
           title: t('FinOps Benchmark'),
@@ -75,22 +78,25 @@ const FinOpsBenchmarkBanner = ({
         </p>
       </div>
       <div className={finOpsActionsVariants({ variation })}>
-        {variation === 'report' && (
-          <TooltipWrapper tooltipText={disabledTooltip}>
-            <span className={cn({ 'cursor-not-allowed': disabled })}>
-              <Button
-                type="button"
-                variant="ghost"
-                disabled={disabled}
-                className="h-auto gap-1 px-0 py-0 text-sm font-bold leading-5 text-primary-200 hover:bg-transparent hover:underline disabled:pointer-events-none disabled:opacity-50"
-                onClick={onViewReportClick}
-              >
-                <LucideBarChart2 className="size-[18px]" />
-                {content.reportLabel}
-              </Button>
-            </span>
-          </TooltipWrapper>
-        )}
+        {variation === 'report' &&
+          providers.map((provider) => (
+            <TooltipWrapper key={provider} tooltipText={disabledTooltip}>
+              <span className={cn({ 'cursor-not-allowed': disabled })}>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  disabled={disabled}
+                  className="h-auto gap-1 px-0 py-0 text-sm font-bold leading-5 text-primary-200 hover:bg-transparent hover:underline disabled:pointer-events-none disabled:opacity-50"
+                  onClick={() => onViewReportClick?.(provider)}
+                >
+                  <LucideBarChart2 className="size-[18px]" />
+                  {t('See') +
+                    ` ${PROVIDER_LABELS[provider]} ` +
+                    t('Benchmark Report')}
+                </Button>
+              </span>
+            </TooltipWrapper>
+          ))}
         <TooltipWrapper tooltipText={disabledTooltip}>
           <span className={cn({ 'cursor-not-allowed': disabled })}>
             <Button
diff --git a/packages/ui-components/src/stories/finops-benchmark-banner/finops-benchmark-banner.stories.tsx b/packages/ui-components/src/stories/finops-benchmark-banner/finops-benchmark-banner.stories.tsx
@@ -1,3 +1,4 @@
+import { BenchmarkProviders } from '@openops/shared';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemeAwareDecorator } from '../../../.storybook/decorators';
@@ -31,14 +32,21 @@ export const Default: Story = {};
 export const AwsReport: Story = {
   args: {
     variation: 'report',
-    provider: 'aws',
+    providers: [BenchmarkProviders.AWS],
   },
 };
 
 export const AzureReport: Story = {
   args: {
     variation: 'report',
-    provider: 'azure',
+    providers: [BenchmarkProviders.AZURE],
+  },
+};
+
+export const MultiProviderReport: Story = {
+  args: {
+    variation: 'report',
+    providers: [BenchmarkProviders.AWS, BenchmarkProviders.AZURE],
   },
 };
 
@@ -51,7 +59,7 @@ export const DisabledDefault: Story = {
 export const DisabledReport: Story = {
   args: {
     variation: 'report',
-    provider: 'aws',
+    providers: [BenchmarkProviders.AWS],
     disabled: true,
   },
 };
