Merge request: translations fixed + Tests messages fixed + em to rem fixed

Author: JulienMeziere

ui/src/components/DashboardPlane.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-
 import {
   useAlertLibrary,
   useHighestSeverityAlerts,
   highestAlertToStatus,
 } from '../containers/AlertProvider';
-import { PageSubtitle } from '../components/style/CommonLayoutStyle';
+import { PageSubtitle } from './style/CommonLayoutStyle';
 import { PanelActions, NetworkContainer } from './DashboardNetwork';
 import HealthItem from './HealthItem.js';
 import { spacing } from '@scality/core-ui/dist/style/theme';
@@ -44,13 +43,15 @@ const DashboardPlane = () => {
             label={intl.formatMessage({ id: 'control_plane' })}
             status={planesStatus}
             alerts={planesHighestSecurityAlert}
+            showArrow={false}
           />
         </PlaneContainer>
         <PlaneContainer>
           <HealthItem
             label={intl.formatMessage({ id: 'workload_plane' })}
             status={planesStatus}
             alerts={planesHighestSecurityAlert}
+            showArrow={false}
           />
         </PlaneContainer>
       </PlanesContainer>

ui/src/components/DashboardPlane.test.js

@@ -39,17 +39,34 @@ jest.mock('../containers/AlertProvider', () => ({
   },
 }));
 
+jest.mock('../containers/ConfigProvider', () => ({
+  __esModule: true,
+  default: ({ children }) => <>{children}</>,
+  useLinkOpener: () => ({
+    openLink: jest.fn(),
+  }),
+  useDiscoveredViews: () => [
+    {
+      app: {
+        kind: '',
+        name: '',
+        version: '',
+        url: '',
+        appHistoryBasePath: '',
+      },
+      isFederated: true,
+      view: { path: '/alerts' },
+    },
+  ],
+}));
+
 const NB_ITEMS = 2;
 
 describe("the dashboard network's plane panel", () => {
   test('displays 2 green statuses when no alerts are present', async () => {
     // Have to any type jest.fn function to avoid Flow warning for mockImplementation()
     (useHighestSeverityAlerts: any).mockImplementation(() => noAlerts);
-
-    // Render
     render(<DashboardPlane />);
-
-    // Verify
     expect(screen.getAllByLabelText(`status ${STATUS_HEALTH}`)).toHaveLength(
       NB_ITEMS,
     );
@@ -59,10 +76,7 @@ describe("the dashboard network's plane panel", () => {
     // Have to any type jest.fn function to avoid Flow warning for mockImplementation()
     (useHighestSeverityAlerts: any).mockImplementation(() => alertsWarning);
 
-    // Render
     render(<DashboardPlane />);
-
-    // Verify
     expect(screen.getAllByLabelText(`status ${STATUS_WARNING}`)).toHaveLength(
       NB_ITEMS,
     );
@@ -73,10 +87,7 @@ describe("the dashboard network's plane panel", () => {
     // Have to any type jest.fn function to avoid Flow warning for mockImplementation()
     (useHighestSeverityAlerts: any).mockImplementation(() => alertsCritical);
 
-    // Render
     render(<DashboardPlane />);
-
-    // Verify
     expect(screen.getAllByLabelText(`status ${STATUS_CRITICAL}`)).toHaveLength(
       NB_ITEMS,
     );

ui/src/components/DashboardServices.test.js

@@ -46,6 +46,27 @@ jest.mock('../containers/AlertProvider', () => ({
   },
 }));
 
+jest.mock('../containers/ConfigProvider', () => ({
+  __esModule: true,
+  default: ({ children }) => <>{children}</>,
+  useLinkOpener: () => ({
+    openLink: jest.fn(),
+  }),
+  useDiscoveredViews: () => [
+    {
+      app: {
+        kind: '',
+        name: '',
+        version: '',
+        url: '',
+        appHistoryBasePath: '',
+      },
+      isFederated: true,
+      view: { path: '/alerts' },
+    },
+  ],
+}));
+
 describe('the dashboard inventory panel', () => {
   test('displays the services panel and display all 8 green statuses when no alerts are present', async () => {
     // Have to any type jest.fn function to avoid Flow warning for mockImplementation()

ui/src/components/HealthItem.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { Tooltip, StatusText } from '@scality/core-ui';
 import {
@@ -14,6 +13,11 @@ import type { Status } from '../containers/AlertProvider';
 import CircleStatus from './CircleStatus';
 import { STATUS_HEALTH } from '../constants.js';
 import { formatDateToMid1 } from '../services/utils';
+import {
+  useDiscoveredViews,
+  useLinkOpener,
+} from '../containers/ConfigProvider';
+import { useHistory } from 'react-router';
 
 const ServiceItemLabelWrapper = styled.div`
   display: flex;
@@ -87,12 +91,19 @@ const HealthItem = ({
   label,
   status,
   alerts,
+  showArrow = true,
 }: {
   label: string,
   status: Status,
   alerts: Alert[],
 }) => {
   const intl = useIntl();
+  const { openLink } = useLinkOpener();
+  const history = useHistory();
+  const discoveredViews = useDiscoveredViews();
+  const alertView = discoveredViews.find(
+    (view) => view.view.path === '/alerts',
+  );
 
   if (!alerts.length && status === STATUS_HEALTH)
     return (
@@ -132,15 +143,21 @@ const HealthItem = ({
             </NonHealthyPopUp>
           }
         >
-          <Link to="/alerts" data-testid="alert-link">
+          <div
+            onClick={() => {
+              history.push('/alerts');
+              openLink(alertView);
+            }}
+            data-testid="alert-link"
+          >
             <ClickableServiceItemElement aria-label={label}>
               <ServiceItemLabelWrapper>
                 <CircleStatus status={status} />
                 <ServiceItemLabel>{label}</ServiceItemLabel>
               </ServiceItemLabelWrapper>
-              <ClickableIcon className="fas fa-angle-right" />
+              {showArrow && <ClickableIcon className="fas fa-angle-right" />}
             </ClickableServiceItemElement>
-          </Link>
+          </div>
         </Tooltip>
       </NonHealthyServiceItemElement>
     );