Update frontend to respect benchmark permissions

packages/react-ui/src/app/features/home/components/useBenchmarkBannerState.test.ts

@@ -38,8 +38,11 @@ describe('useBenchmarkBannerState', () => {
     mockListBenchmarks.mockResolvedValue([]);
   });
 
-  it('returns isEnabled false and default variation when flag is disabled', () => {
-    mockUseShowBenchmarkBanner.mockReturnValue(false);
+  it('returns isEnabled false and default variation when banner should not be shown', () => {
+    mockUseShowBenchmarkBanner.mockReturnValue({
+      showBanner: false,
+      isPending: false,
+    });
     setupQueryMock(undefined);
 
     const { result } = renderHook(() => useBenchmarkBannerState());
@@ -49,8 +52,11 @@ describe('useBenchmarkBannerState', () => {
     expect(result.current.provider).toBe(undefined);
   });
 
-  it('does not call listBenchmarks when flag is disabled', () => {
-    mockUseShowBenchmarkBanner.mockReturnValue(false);
+  it('does not call listBenchmarks when banner should not be shown', () => {
+    mockUseShowBenchmarkBanner.mockReturnValue({
+      showBanner: false,
+      isPending: false,
+    });
     mockUseQuery.mockImplementation(({ enabled }) => {
       if (!enabled) return { data: undefined };
       benchmarkApi.listBenchmarks();
@@ -62,17 +68,23 @@ describe('useBenchmarkBannerState', () => {
     expect(mockListBenchmarks).not.toHaveBeenCalled();
   });
 
-  it('calls listBenchmarks when flag is enabled', () => {
-    mockUseShowBenchmarkBanner.mockReturnValue(true);
+  it('calls listBenchmarks when banner should be shown', () => {
+    mockUseShowBenchmarkBanner.mockReturnValue({
+      showBanner: true,
+      isPending: false,
+    });
     setupQueryMock([]);
 
     renderHook(() => useBenchmarkBannerState());
 
     expect(mockListBenchmarks).toHaveBeenCalledTimes(1);
   });
 
-  it('returns default variation when flag is enabled but no benchmarks exist', () => {
-    mockUseShowBenchmarkBanner.mockReturnValue(true);
+  it('returns default variation when banner is shown but no benchmarks exist', () => {
+    mockUseShowBenchmarkBanner.mockReturnValue({
+      showBanner: true,
+      isPending: false,
+    });
     setupQueryMock([]);
 
     const { result } = renderHook(() => useBenchmarkBannerState());
@@ -82,8 +94,11 @@ describe('useBenchmarkBannerState', () => {
     expect(result.current.provider).toBe(undefined);
   });
 
-  it('returns default variation when flag is enabled but benchmark is RUNNING', () => {
-    mockUseShowBenchmarkBanner.mockReturnValue(true);
+  it('returns default variation when banner is shown but benchmark is RUNNING', () => {
+    mockUseShowBenchmarkBanner.mockReturnValue({
+      showBanner: true,
+      isPending: false,
+    });
     setupQueryMock([
       { benchmarkId: 'bm-1', provider: 'aws', status: BenchmarkStatus.RUNNING },
     ]);
@@ -94,7 +109,10 @@ describe('useBenchmarkBannerState', () => {
   });
 
   it('returns default variation when benchmark is CREATED', () => {
-    mockUseShowBenchmarkBanner.mockReturnValue(true);
+    mockUseShowBenchmarkBanner.mockReturnValue({
+      showBanner: true,
+      isPending: false,
+    });
     setupQueryMock([
       { benchmarkId: 'bm-1', provider: 'aws', status: BenchmarkStatus.CREATED },
     ]);
@@ -105,7 +123,10 @@ describe('useBenchmarkBannerState', () => {
   });
 
   it('returns default variation when benchmark has FAILED status', () => {
-    mockUseShowBenchmarkBanner.mockReturnValue(true);
+    mockUseShowBenchmarkBanner.mockReturnValue({
+      showBanner: true,
+      isPending: false,
+    });
     setupQueryMock([
       { benchmarkId: 'bm-1', provider: 'aws', status: BenchmarkStatus.FAILED },
     ]);
@@ -116,7 +137,10 @@ describe('useBenchmarkBannerState', () => {
   });
 
   it('returns report variation and aws provider when aws benchmark has SUCCEEDED', () => {
-    mockUseShowBenchmarkBanner.mockReturnValue(true);
+    mockUseShowBenchmarkBanner.mockReturnValue({
+      showBanner: true,
+      isPending: false,
+    });
     setupQueryMock([
       {
         benchmarkId: 'bm-1',
@@ -132,7 +156,10 @@ describe('useBenchmarkBannerState', () => {
   });
 
   it('returns report variation when there are multiple benchmarks and one has SUCCEEDED', () => {
-    mockUseShowBenchmarkBanner.mockReturnValue(true);
+    mockUseShowBenchmarkBanner.mockReturnValue({
+      showBanner: true,
+      isPending: false,
+    });
     setupQueryMock([
       { benchmarkId: 'bm-1', provider: 'aws', status: BenchmarkStatus.RUNNING },
       {

packages/react-ui/src/app/features/home/components/useBenchmarkBannerState.ts

@@ -11,7 +11,7 @@ type BenchmarkBannerState = {
 };
 
 export const useBenchmarkBannerState = (): BenchmarkBannerState => {
-  const isEnabled = useShowBenchmarkBanner();
+  const { showBanner: isEnabled } = useShowBenchmarkBanner();
 
   const { data: benchmarks } = useQuery({
     queryKey: [QueryKeys.benchmarks],

packages/react-ui/src/app/features/home/components/useShowBenchmarkBanner.test.ts

@@ -0,0 +1,118 @@
+import { flagsHooks } from '@/app/common/hooks/flags-hooks';
+import { userHooks } from '@/app/common/hooks/user-hooks';
+import { renderHook } from '@testing-library/react';
+import { useShowBenchmarkBanner } from './useShowBenchmarkBanner';
+
+jest.mock('@/app/common/hooks/flags-hooks', () => ({
+  flagsHooks: {
+    useFlag: jest.fn(),
+  },
+}));
+
+jest.mock('@/app/common/hooks/user-hooks', () => ({
+  userHooks: {
+    useUserMeta: jest.fn(),
+  },
+}));
+
+const mockUseFlag = flagsHooks.useFlag as jest.Mock;
+const mockUseUserMeta = userHooks.useUserMeta as jest.Mock;
+
+describe('useShowBenchmarkBanner', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return showBanner false when flag is disabled', () => {
+    mockUseFlag.mockReturnValue({ data: false });
+    mockUseUserMeta.mockReturnValue({
+      userMeta: {
+        projectPermissions: {
+          benchmark: true,
+        },
+      },
+      isPending: false,
+    });
+
+    const { result } = renderHook(() => useShowBenchmarkBanner());
+
+    expect(result.current.showBanner).toBe(false);
+    expect(result.current.isPending).toBe(false);
+  });
+
+  it('should return showBanner false when user has no benchmark access', () => {
+    mockUseFlag.mockReturnValue({ data: true });
+    mockUseUserMeta.mockReturnValue({
+      userMeta: {
+        projectPermissions: {
+          benchmark: false,
+        },
+      },
+      isPending: false,
+    });
+
+    const { result } = renderHook(() => useShowBenchmarkBanner());
+
+    expect(result.current.showBanner).toBe(false);
+    expect(result.current.isPending).toBe(false);
+  });
+
+  it('should return showBanner false when userMeta is undefined', () => {
+    mockUseFlag.mockReturnValue({ data: true });
+    mockUseUserMeta.mockReturnValue({
+      userMeta: undefined,
+      isPending: false,
+    });
+
+    const { result } = renderHook(() => useShowBenchmarkBanner());
+
+    expect(result.current.showBanner).toBe(false);
+    expect(result.current.isPending).toBe(false);
+  });
+
+  it('should return showBanner true when flag is enabled and user has benchmark access', () => {
+    mockUseFlag.mockReturnValue({ data: true });
+    mockUseUserMeta.mockReturnValue({
+      userMeta: {
+        projectPermissions: {
+          benchmark: true,
+        },
+      },
+      isPending: false,
+    });
+
+    const { result } = renderHook(() => useShowBenchmarkBanner());
+
+    expect(result.current.showBanner).toBe(true);
+    expect(result.current.isPending).toBe(false);
+  });
+
+  it('should handle isPending from userMeta', () => {
+    mockUseFlag.mockReturnValue({ data: true });
+    mockUseUserMeta.mockReturnValue({
+      userMeta: undefined,
+      isPending: true,
+    });
+
+    const { result } = renderHook(() => useShowBenchmarkBanner());
+
+    expect(result.current.showBanner).toBe(false);
+    expect(result.current.isPending).toBe(true);
+  });
+
+  it('should handle undefined flag value', () => {
+    mockUseFlag.mockReturnValue({ data: undefined });
+    mockUseUserMeta.mockReturnValue({
+      userMeta: {
+        projectPermissions: {
+          benchmark: true,
+        },
+      },
+      isPending: false,
+    });
+
+    const { result } = renderHook(() => useShowBenchmarkBanner());
+
+    expect(result.current.showBanner).toBe(false);
+  });
+});

packages/react-ui/src/app/features/home/components/useShowBenchmarkBanner.ts

@@ -1,10 +1,21 @@
 import { flagsHooks } from '@/app/common/hooks/flags-hooks';
+import { userHooks } from '@/app/common/hooks/user-hooks';
 import { FlagId } from '@openops/shared';
+import { useMemo } from 'react';
 
 export const useShowBenchmarkBanner = () => {
   const { data: isFinOpsBenchmarkEnabled } = flagsHooks.useFlag<
     boolean | undefined
   >(FlagId.FINOPS_BENCHMARK_ENABLED);
 
-  return isFinOpsBenchmarkEnabled ?? false;
+  const { userMeta, isPending } = userHooks.useUserMeta();
+  const hasBenchmarkAccess = userMeta?.projectPermissions?.benchmark ?? false;
+
+  return useMemo(
+    () => ({
+      showBanner: Boolean(isFinOpsBenchmarkEnabled && hasBenchmarkAccess),
+      isPending,
+    }),
+    [isFinOpsBenchmarkEnabled, hasBenchmarkAccess, isPending],
+  );
 };