Merge pull request #549 from pagopa/feat/OI-249-idps-loading-status

feat: [OI-249] login data status

src/oneid/oneid-ecs-core/src/main/webui/package.json

@@ -10,6 +10,7 @@
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.20",
     "@pagopa/mui-italia": "^1.4.2",
+    "@tanstack/react-query": "^5.62.2",
     "@types/node": "^20.14.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

src/oneid/oneid-ecs-core/src/main/webui/src/App.test.tsx

@@ -19,7 +19,7 @@ vi.mock('./services/analyticsService', () => ({
 }));
 
 // Mock the components
-vi.mock('./pages/login/Login', () => ({
+vi.mock('./pages/login', () => ({
   default: () => <div>Mocked Login Component</div>,
 }));
 vi.mock('./pages/logout/Logout', () => ({

src/oneid/oneid-ecs-core/src/main/webui/src/App.tsx

@@ -1,4 +1,3 @@
-import Login from './pages/login/Login';
 import {
   ROUTE_LOGIN,
   ROUTE_LOGIN_ERROR,
@@ -7,6 +6,7 @@ import {
 import { redirectToLogin } from './utils/utils';
 import Logout from './pages/logout/Logout';
 import { LoginError } from './pages/loginError/LoginError';
+import Login from './pages/login';
 
 const onLogout = () => <Logout />;
 const onLoginError = () => <LoginError />;

src/oneid/oneid-ecs-core/src/main/webui/src/hooks/useLoginData.test.tsx

@@ -0,0 +1,110 @@
+import { describe, it, expect, vi, Mock } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useLoginData } from './useLoginData';
+import { ENV } from '../utils/env';
+import { fetchBannerContent, getIdpList, getClientData } from '../services/api';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Mock API functions
+vi.mock('../services/api', () => ({
+  fetchBannerContent: vi.fn(),
+  getIdpList: vi.fn(),
+  getClientData: vi.fn(),
+}));
+
+// Mock ENV
+vi.mock('../utils/env', () => ({
+  ENV: {
+    JSON_URL: {
+      ALERT: 'mock-alert-url',
+      IDP_LIST: 'mock-idp-list-url',
+      CLIENT_BASE_URL: 'mock-client-base-url',
+    },
+  },
+}));
+
+describe('useLoginData', () => {
+  const wrapper = ({ children }: { children: React.ReactNode }) => {
+    const queryClient = new QueryClient();
+    return (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('fetches banner content successfully', async () => {
+    const mockBannerContent = [
+      { title: 'Test Banner', description: 'Test Description' },
+    ];
+    (fetchBannerContent as Mock).mockResolvedValue(mockBannerContent);
+
+    const { result } = renderHook(useLoginData, { wrapper });
+
+    await waitFor(() =>
+      expect(result.current.bannerQuery.isSuccess).toBe(true)
+    );
+    expect(fetchBannerContent).toHaveBeenCalledWith(ENV.JSON_URL.ALERT);
+    expect(result.current.bannerQuery.data).toEqual(mockBannerContent);
+  });
+
+  it('fetches identity providers list successfully', async () => {
+    const mockIdpList = {
+      providers: [{ name: 'Test IDP', url: 'test-idp-url' }],
+    };
+    (getIdpList as Mock).mockResolvedValue(mockIdpList);
+
+    const { result } = renderHook(useLoginData, { wrapper });
+
+    await waitFor(() => expect(result.current.idpQuery.isSuccess).toBe(true));
+    expect(getIdpList).toHaveBeenCalledWith(ENV.JSON_URL.IDP_LIST);
+    expect(result.current.idpQuery.data).toEqual(mockIdpList);
+  });
+
+  it('fetches client data successfully', async () => {
+    const mockClientData = {
+      clientId: 'test-client-id',
+      clientSecret: 'test-client-secret',
+    };
+    (getClientData as Mock).mockResolvedValue(mockClientData);
+
+    const { result } = renderHook(useLoginData, { wrapper });
+
+    await waitFor(() =>
+      expect(result.current.clientQuery.isSuccess).toBe(true)
+    );
+    expect(getClientData).toHaveBeenCalledWith(ENV.JSON_URL.CLIENT_BASE_URL);
+    expect(result.current.clientQuery.data).toEqual(mockClientData);
+  });
+
+  it('handles errors correctly', async () => {
+    (fetchBannerContent as Mock).mockRejectedValue(
+      new Error('Banner content error')
+    );
+    (getIdpList as Mock).mockRejectedValue(new Error('IDP list error'));
+    (getClientData as Mock).mockRejectedValue(new Error('Client data error'));
+
+    const { result } = renderHook(useLoginData, { wrapper });
+
+    await waitFor(() => expect(result.current.bannerQuery.isError).toBe(true), {
+      timeout: 10000,
+    });
+    expect(result.current.bannerQuery.error).toEqual(
+      new Error('Banner content error')
+    );
+
+    await waitFor(() => expect(result.current.idpQuery.isError).toBe(true), {
+      timeout: 10000,
+    });
+    expect(result.current.idpQuery.error).toEqual(new Error('IDP list error'));
+
+    await waitFor(() => expect(result.current.clientQuery.isError).toBe(true), {
+      timeout: 10000,
+    });
+    expect(result.current.clientQuery.error).toEqual(
+      new Error('Client data error')
+    );
+  });
+});

src/oneid/oneid-ecs-core/src/main/webui/src/hooks/useLoginData.tsx

@@ -0,0 +1,38 @@
+import { useQuery } from '@tanstack/react-query';
+import { ENV } from '../utils/env';
+import { IdentityProviders } from '../utils/IDPS';
+import {
+  type BannerContent,
+  type Client,
+  fetchBannerContent,
+  getIdpList,
+  getClientData,
+} from '../services/api';
+
+const staleTime = 5 * 60 * 1000;
+const retry = 2;
+
+export const useLoginData = () => {
+  const bannerQuery = useQuery<Array<BannerContent>, Error>({
+    queryKey: ['bannerContent'],
+    queryFn: () => fetchBannerContent(ENV.JSON_URL.ALERT),
+    staleTime,
+    retry,
+  });
+
+  const idpQuery = useQuery<IdentityProviders, Error>({
+    queryKey: ['idpList'],
+    queryFn: () => getIdpList(ENV.JSON_URL.IDP_LIST),
+    staleTime,
+    retry,
+  });
+
+  const clientQuery = useQuery<Client, Error>({
+    queryKey: ['clientData'],
+    queryFn: () => getClientData(ENV.JSON_URL.CLIENT_BASE_URL),
+    staleTime,
+    retry,
+  });
+
+  return { bannerQuery, idpQuery, clientQuery };
+};

src/oneid/oneid-ecs-core/src/main/webui/src/index.tsx

@@ -5,16 +5,20 @@ import { theme } from '@pagopa/mui-italia';
 
 import App from './App';
 import './locale';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const rootEl = document.getElementById('root');
 
 if (rootEl) {
   const root = createRoot(rootEl);
+  const queryClient = new QueryClient();
 
   root.render(
     <ThemeProvider theme={theme}>
       <React.StrictMode>
-        <App />
+        <QueryClientProvider client={queryClient}>
+          <App />
+        </QueryClientProvider>
       </React.StrictMode>
     </ThemeProvider>
   );