Remove SpacedBox as it ill be removed from Core-UI

Author: JeanMarcMilletScality

ui/src/components/DashboardMetrics.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Button } from '@scality/core-ui/dist/next';
+import { Box, Button } from '@scality/core-ui/dist/next';
 import { padding } from '@scality/core-ui/dist/style/theme';
 import { useIntl } from 'react-intl';
 import { GRAFANA_DASHBOARDS } from '../constants';
@@ -14,7 +14,7 @@ import DashboardChartSystemLoad from './DashboardChartSystemLoad';
 import DashboardChartMemory from './DashboardChartMemory';
 import { useShowQuantileChart, useTypedSelector } from '../hooks';
 import { DashboardScrollableArea } from '../containers/DashboardPage';
-import { Tooltip, Icon, SmallerText, SpacedBox } from '@scality/core-ui';
+import { Icon, SmallerText, Stack, IconHelp, spacing } from '@scality/core-ui';
 const MetricsContainer = styled.div`
   padding: 2px ${padding.smaller};
   display: flex;
@@ -29,6 +29,29 @@ const PanelActions = styled.div`
   justify-content: space-between;
 `;
 
+export const QuantileHelpTooltip = () => {
+  const intl = useIntl();
+  return (
+    <IconHelp
+      placement="bottom"
+      tooltipMessage={
+        <Stack direction="vertical" gap="r8">
+          {intl
+            .formatMessage({
+              id: 'metric_quantile_explanation',
+            })
+            .split('\n')
+            .map((line, key) => (
+              <SmallerText key={`globalheathexplanation-${key}`}>
+                {line}
+              </SmallerText>
+            ))}
+        </Stack>
+      }
+    />
+  );
+};
+
 const DashboardMetrics = () => {
   const intl = useIntl();
   // App config, used to generated Advanced metrics button link
@@ -38,40 +61,12 @@ const DashboardMetrics = () => {
     <MetricsContainer id="dashboard-metrics-container">
       <PanelActions>
         <PageSubtitle>
-          <SpacedBox mr={8}>
-            {' '}
+          <Box mr={spacing.r8}>
             {intl.formatMessage({
               id: 'metrics',
             })}
-          </SpacedBox>
-          {isShowQuantileChart && (
-            <Tooltip
-              placement="bottom"
-              overlay={
-                <SmallerText
-                  // @ts-expect-error - FIXME when you are working on it
-                  style={{
-                    minWidth: '30rem',
-                    display: 'block',
-                    textAlign: 'left',
-                  }}
-                >
-                  {intl
-                    .formatMessage({
-                      id: 'metric_quantile_explanation',
-                    })
-                    .split('\n')
-                    .map((line, key) => (
-                      <SpacedBox key={`globalheathexplanation-${key}`} mb={8}>
-                        {line}
-                      </SpacedBox>
-                    ))}
-                </SmallerText>
-              }
-            >
-              <Icon name="Info" color="buttonSecondary" />
-            </Tooltip>
-          )}
+          </Box>
+          {isShowQuantileChart && <QuantileHelpTooltip />}
         </PageSubtitle>
 
         {url_grafana && (

ui/src/components/DashboardNetwork.tsx

@@ -1,27 +1,27 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { spacing } from '@scality/core-ui/dist/style/theme';
 import {
   PageSubtitle,
   GraphsWrapper,
 } from '../components/style/CommonLayoutStyle';
 import DashboardPlaneHealth from './DashboardPlaneHealth';
 import DashboardBandwidthChart from './DashboardBandwidthChart';
 import { DashboardScrollableArea } from '../containers/DashboardPage';
-import { SpacedBox } from '@scality/core-ui';
 import { useShowQuantileChart } from '../hooks';
-import { Tooltip, Icon, SmallerText } from '@scality/core-ui';
+import { QuantileHelpTooltip } from './DashboardMetrics';
+import { Box } from '@scality/core-ui/dist/next';
+import { spacing } from '@scality/core-ui';
 export const NetworkContainer = styled.div`
-  padding: ${spacing.sp2} ${spacing.sp4};
+  padding: ${spacing.r2} ${spacing.r4};
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   max-width: 100%;
 `;
 export const PanelActions = styled.div`
   display: flex;
-  padding: ${spacing.sp4};
+  padding: ${spacing.r4};
   align-items: center;
   justify-content: space-between;
 `;
@@ -37,40 +37,12 @@ const DashboardNetwork = () => {
     >
       <PanelActions>
         <PageSubtitle>
-          <SpacedBox mr={8}>
-            {' '}
+          <Box mr={spacing.r8}>
             {intl.formatMessage({
               id: 'network',
             })}
-          </SpacedBox>
-          {isShowQuantileChart && (
-            <Tooltip
-              placement="bottom"
-              overlay={
-                <SmallerText
-                  // @ts-expect-error - FIXME when you are working on it
-                  style={{
-                    minWidth: '30rem',
-                    display: 'block',
-                    textAlign: 'left',
-                  }}
-                >
-                  {intl
-                    .formatMessage({
-                      id: 'network_quantile_explanation',
-                    })
-                    .split('\n')
-                    .map((line, key) => (
-                      <SpacedBox key={`globalheathexplanation-${key}`} mb={8}>
-                        {line}
-                      </SpacedBox>
-                    ))}
-                </SmallerText>
-              }
-            >
-              <Icon name="Info" color="buttonSecondary" />
-            </Tooltip>
-          )}
+          </Box>
+          {isShowQuantileChart && <QuantileHelpTooltip />}
         </PageSubtitle>
       </PanelActions>