MK8S-176 - fix broken link in volumes

Author: MonPote

ui/src/components/ActiveAlertsCounter.spec.tsx

@@ -0,0 +1,88 @@
+import { CoreUiThemeProvider } from '@scality/core-ui/dist/next';
+import { coreUIAvailableThemes } from '@scality/core-ui/dist/style/theme';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { PropsWithChildren } from 'react';
+import { QueryClient } from 'react-query';
+import { MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
+import { STATUS_CRITICAL, STATUS_WARNING } from '../constants';
+import { QueryClientProvider } from '../QueryClientProvider';
+import ActiveAlertsCounter from './ActiveAlertsCounter';
+
+const AlertsPage = () => {
+  const location = useLocation();
+  return (
+    <div data-testid="alerts-page">
+      Alerts page
+      <span data-testid="alerts-search">{location.search}</span>
+    </div>
+  );
+};
+
+const defaultProps = {
+  criticalCounter: 3,
+  warningCounter: 5,
+};
+
+const initialPath = '/nodes/node1/overview';
+
+const wrapper = ({ children }: PropsWithChildren) => (
+  <QueryClientProvider client={new QueryClient()}>
+    <CoreUiThemeProvider theme={coreUIAvailableThemes.darkRebrand}>
+      <MemoryRouter initialEntries={[initialPath]}>{children}</MemoryRouter>
+    </CoreUiThemeProvider>
+  </QueryClientProvider>
+);
+
+const renderWithRoutes = () =>
+  render(
+    <Routes>
+      <Route path="/nodes/:nodeName/overview" element={<ActiveAlertsCounter {...defaultProps} />} />
+      <Route path="/nodes/:nodeName/alerts" element={<AlertsPage />} />
+      <Route path="/alerts" element={<AlertsPage />} />
+    </Routes>,
+    { wrapper },
+  );
+
+describe('ActiveAlertsCounter', () => {
+  it('displays critical and warning counts', () => {
+    renderWithRoutes();
+
+    expect(screen.getByText('Critical')).toBeInTheDocument();
+    expect(screen.getByText('Warning')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('navigates to alerts page with severity=critical when Critical counter is clicked', async () => {
+    const { container } = renderWithRoutes();
+
+    const criticalCounter = container.querySelector('[data-cy="critical_counter_node"]');
+    if (!criticalCounter) throw new Error('critical counter not found');
+    await act(async () => {
+      await userEvent.click(criticalCounter);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('alerts-page')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Alerts page')).toBeInTheDocument();
+    expect(screen.getByTestId('alerts-search')).toHaveTextContent(`?severity=${STATUS_CRITICAL}`);
+  });
+
+  it('navigates to alerts page with severity=warning when Warning counter is clicked', async () => {
+    const { container } = renderWithRoutes();
+
+    const warningCounter = container.querySelector('[data-cy="warning_counter_node"]');
+    if (!warningCounter) throw new Error('warning counter not found');
+    await act(async () => {
+      await userEvent.click(warningCounter);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('alerts-page')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Alerts page')).toBeInTheDocument();
+    expect(screen.getByTestId('alerts-search')).toHaveTextContent(`?severity=${STATUS_WARNING}`);
+  });
+});

ui/src/components/ActiveAlertsCounter.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
-import styled from 'styled-components';
-import { useLocation, useResolvedPath } from 'react-router';
 import { Icon } from '@scality/core-ui/dist/components/icon/Icon.component';
-import { padding, fontSize } from '@scality/core-ui/dist/style/theme';
-import { STATUS_WARNING, STATUS_CRITICAL } from '../constants';
-import { useBasenameRelativeNavigate } from '@scality/module-federation';
+import { fontSize, padding } from '@scality/core-ui/dist/style/theme';
+import { useLocation, useNavigate, useResolvedPath } from 'react-router';
+import styled from 'styled-components';
+import { STATUS_CRITICAL, STATUS_WARNING } from '../constants';
+
 export const CountersWrapper = styled.div`
   color: ${(props) => props.theme.textPrimary};
   display: flex;
@@ -48,7 +47,7 @@ const CounterIcon = ({ name, status }) => {
 
 const ActiveAlertsCounter = (props) => {
   const { criticalCounter, warningCounter } = props;
-  const navigate = useBasenameRelativeNavigate();
+  const navigate = useNavigate();
   const location = useLocation();
   let url = useResolvedPath('').pathname;
 
@@ -60,26 +59,20 @@ const ActiveAlertsCounter = (props) => {
       query.set('severity', status);
     }
 
-    url = url?.replace(/\/overview/, '/alerts');
+    url = '../alerts';
     return `${url}?${query.toString()}`;
   };
 
   return (
     <CountersWrapper>
-      <CounterWrapper
-        onClick={() => navigate(getLink(STATUS_CRITICAL))}
-        data-cy="critical_counter_node"
-      >
+      <CounterWrapper onClick={() => navigate(getLink(STATUS_CRITICAL))} data-cy="critical_counter_node">
         <CounterTitle>Critical</CounterTitle>
         <CounterValueWrapper>
           <CounterIcon name="Times-circle" status={STATUS_CRITICAL} />
           <CounterValue>{criticalCounter}</CounterValue>
         </CounterValueWrapper>
       </CounterWrapper>
-      <CounterWrapper
-        onClick={() => navigate(getLink(STATUS_WARNING))}
-        data-cy="warning_counter_node"
-      >
+      <CounterWrapper onClick={() => navigate(getLink(STATUS_WARNING))} data-cy="warning_counter_node">
         <CounterTitle>Warning</CounterTitle>
         <CounterValueWrapper>
           <CounterIcon name="Exclamation-circle" status={STATUS_WARNING} />