@scality/core-ui 0.162.0 → 0.164.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.162.0",
+  "version": "0.164.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -108,7 +108,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@fortawesome/react-fontawesome": "^0.2.3",
     "@js-temporal/polyfill": "^0.4.4",
     "@storybook/preview-api": "^8.3.6",
     "downshift": "^7.0.5",

package/src/lib/components/accordion/Accordion.test.tsx

@@ -1,8 +1,7 @@
-import { render, screen } from '@testing-library/react';
-import React, { useState } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { useState } from 'react';
 import { Accordion } from './Accordion.component';
 import userEvent from '@testing-library/user-event';
-import { QueryClient, QueryClientProvider } from 'react-query';
 
 describe('Accordion', () => {
   const selectors = {
@@ -11,20 +10,18 @@ describe('Accordion', () => {
     accordionContent: () => screen.queryByText(/Test content/i),
   };
   const SUT = ({ open = false }) => {
-    const queryClient = new QueryClient();
     return (
-      <QueryClientProvider client={queryClient}>
-        <Accordion title="Advanced Testings" id="test-accordion" open={open}>
-          <div>Test content</div>
-        </Accordion>
-      </QueryClientProvider>
+      <Accordion title="Advanced Testings" id="test-accordion" open={open}>
+        <div>Test content</div>
+      </Accordion>
     );
   };
   const renderAccordion = (open = false) => {
     render(<SUT open={open} />);
   };
-  it('should render the Accordion component with title and content', () => {
+  it('should render the Accordion component with title and content', async () => {
     renderAccordion();
+    await waitFor(() => screen.findByRole('img', { hidden: true }));
 
     const accordionToggle = selectors.accordionToggle();
     expect(accordionToggle).toBeInTheDocument();
@@ -54,7 +51,6 @@ describe('Accordion', () => {
   });
 
   it('should toggle the content when open prop changes', () => {
-    const queryClient = new QueryClient();
     const TestWrapper = () => {
       const [isOpen, setisOpen] = useState(false);
       return (
@@ -65,11 +61,7 @@ describe('Accordion', () => {
       );
     };
 
-    render(
-      <QueryClientProvider client={queryClient}>
-        <TestWrapper />
-      </QueryClientProvider>,
-    );
+    render(<TestWrapper />);
 
     userEvent.click(screen.getByRole('button', { name: /Test button/i }));
     expect(selectors.accordionContent()).toBeInTheDocument();

package/src/lib/components/barchartv2/Barchart.component.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
 import { getWrapper } from '../../testUtils';
 import { Barchart } from './Barchart.component';
+import { ChartLegendWrapper } from '../chartlegend/ChartLegendWrapper';
 
 const ONE_DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
 const ONE_HOUR_IN_MILLISECONDS = 60 * 60 * 1000;
@@ -14,7 +14,7 @@ jest.mock('recharts', () => {
     ...OriginalResponsiveContainerModule,
     ResponsiveContainer: ({ height, children }) => (
       <OriginalResponsiveContainerModule.ResponsiveContainer
-        width={800}
+        aspect={3}
         height={300}
         data-testid="responsive-container"
       >
@@ -48,19 +48,19 @@ const testTimeBars = [
   },
 ] as const;
 
+const testColorSet = {
+  Success: 'lineColor1',
+};
+
 describe('Barchart', () => {
   describe('Basic rendering', () => {
     it('should render the Barchart component with category data', async () => {
       const { Wrapper } = getWrapper();
       render(
         <Wrapper>
-          <Barchart
-            type="category"
-            bars={testBars}
-            colorSet={{
-              Success: 'lineColor1',
-            }}
-          />
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart type="category" bars={testBars} />
+          </ChartLegendWrapper>
         </Wrapper>,
       );
 
@@ -72,20 +72,19 @@ describe('Barchart', () => {
       const { Wrapper } = getWrapper();
       render(
         <Wrapper>
-          <Barchart
-            type={{
-              type: 'time',
-              timeRange: {
-                startDate: new Date('2024-07-05'),
-                endDate: new Date('2024-07-07'),
-                interval: ONE_DAY_IN_MILLISECONDS,
-              },
-            }}
-            bars={testTimeBars}
-            colorSet={{
-              Success: 'lineColor1',
-            }}
-          />
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart
+              type={{
+                type: 'time',
+                timeRange: {
+                  startDate: new Date('2024-07-05'),
+                  endDate: new Date('2024-07-07'),
+                  interval: ONE_DAY_IN_MILLISECONDS,
+                },
+              }}
+              bars={testTimeBars}
+            />
+          </ChartLegendWrapper>
         </Wrapper>,
       );
 
@@ -93,6 +92,43 @@ describe('Barchart', () => {
       expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
       expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
     });
+    it('should render the Barchart component with error state', async () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart type="category" bars={[]} isError />
+          </ChartLegendWrapper>
+        </Wrapper>,
+      );
+      expect(
+        screen.getByText('Chart data is not available'),
+      ).toBeInTheDocument();
+    });
+    it('should render the Barchart component with loading state', async () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart type="category" bars={[]} isLoading />
+          </ChartLegendWrapper>
+        </Wrapper>,
+      );
+      expect(screen.getByText('Loading Chart Data...')).toBeInTheDocument();
+    });
+    it('should render the Barchart component with undefined bars', async () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart type="category" bars={undefined} />
+          </ChartLegendWrapper>
+        </Wrapper>,
+      );
+      expect(
+        screen.getByText('Chart data is not available'),
+      ).toBeInTheDocument();
+    });
   });
 
   describe('Time data', () => {
@@ -100,21 +136,20 @@ describe('Barchart', () => {
       const { Wrapper } = getWrapper();
       render(
         <Wrapper>
-          <Barchart
-            type={{
-              type: 'time',
-              timeRange: {
-                startDate: new Date('2024-07-03'),
-                endDate: new Date('2024-07-07'),
-                interval: ONE_DAY_IN_MILLISECONDS,
-              },
-            }}
-            // data starts on 2024-07-05
-            bars={testTimeBars}
-            colorSet={{
-              Success: 'lineColor1',
-            }}
-          />
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart
+              type={{
+                type: 'time',
+                timeRange: {
+                  startDate: new Date('2024-07-03'),
+                  endDate: new Date('2024-07-07'),
+                  interval: ONE_DAY_IN_MILLISECONDS,
+                },
+              }}
+              // data starts on 2024-07-05
+              bars={testTimeBars}
+            />
+          </ChartLegendWrapper>
         </Wrapper>,
       );
       expect(screen.getByText('Wed03Jul')).toBeInTheDocument();
@@ -154,14 +189,14 @@ describe('Barchart', () => {
       const { Wrapper } = getWrapper();
       render(
         <Wrapper>
-          <Barchart
-            type={type}
-            bars={bars}
+          <ChartLegendWrapper
             colorSet={{
               Success: 'lineColor1',
               Failed: 'lineColor2',
             }}
-          />
+          >
+            <Barchart type={type} bars={bars} />
+          </ChartLegendWrapper>
         </Wrapper>,
       );
 
@@ -202,13 +237,9 @@ describe('Barchart', () => {
       const { Wrapper } = getWrapper();
       render(
         <Wrapper>
-          <Barchart
-            type={type}
-            bars={testTimeBars}
-            colorSet={{
-              Success: 'lineColor1',
-            }}
-          />
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart type={type} bars={testTimeBars} />
+          </ChartLegendWrapper>
         </Wrapper>,
       );
       await waitFor(() => {
@@ -236,20 +267,19 @@ describe('Barchart', () => {
       const { Wrapper } = getWrapper();
       render(
         <Wrapper>
-          <Barchart
-            type={{
-              type: 'time',
-              timeRange: {
-                startDate: new Date('2024-07-05T10:00:00'),
-                endDate: new Date('2024-07-05T12:00:00'),
-                interval: ONE_HOUR_IN_MILLISECONDS,
-              },
-            }}
-            bars={testHourlyBars}
-            colorSet={{
-              Success: 'lineColor1',
-            }}
-          />
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart
+              type={{
+                type: 'time',
+                timeRange: {
+                  startDate: new Date('2024-07-05T10:00:00'),
+                  endDate: new Date('2024-07-05T12:00:00'),
+                  interval: ONE_HOUR_IN_MILLISECONDS,
+                },
+              }}
+              bars={testHourlyBars}
+            />
+          </ChartLegendWrapper>
         </Wrapper>,
       );
 
@@ -284,15 +314,9 @@ describe('Barchart', () => {
     const { Wrapper } = getWrapper();
     render(
       <Wrapper>
-        <Barchart
-          type="category"
-          bars={testStackedBars}
-          stacked={true}
-          colorSet={{
-            Success: 'lineColor1',
-            Failed: 'lineColor2',
-          }}
-        />
+        <ChartLegendWrapper colorSet={{ ...testColorSet, Failed: 'red' }}>
+          <Barchart type="category" bars={testStackedBars} stacked={true} />
+        </ChartLegendWrapper>
       </Wrapper>,
     );
 
@@ -317,18 +341,17 @@ describe('Barchart', () => {
     const { Wrapper } = getWrapper();
     render(
       <Wrapper>
-        <Barchart
-          type="category"
-          bars={testBars}
-          defaultSort={(pointA, pointB) => {
-            const valueA = pointA.Success;
-            const valueB = pointB.Success;
-            return valueB - valueA > 0 ? 1 : valueB - valueA < 0 ? -1 : 0;
-          }}
-          colorSet={{
-            Success: 'lineColor1',
-          }}
-        />
+        <ChartLegendWrapper colorSet={testColorSet}>
+          <Barchart
+            type="category"
+            bars={testBars}
+            defaultSort={(pointA, pointB) => {
+              const valueA = pointA.Success;
+              const valueB = pointB.Success;
+              return valueB - valueA > 0 ? 1 : valueB - valueA < 0 ? -1 : 0;
+            }}
+          />
+        </ChartLegendWrapper>
       </Wrapper>,
     );
 
@@ -339,37 +362,20 @@ describe('Barchart', () => {
     expect(categories[2]).toHaveTextContent('category1'); // 10 (lowest)
   });
 
-  it('should render the Barchart component with loading state', () => {
-    const { Wrapper } = getWrapper();
-    render(
-      <Wrapper>
-        <Barchart
-          type="category"
-          bars={[]}
-          isLoading
-          colorSet={{
-            Success: 'lineColor1',
-          }}
-        />
-      </Wrapper>,
-    );
-    expect(screen.getByText('Loading Chart Data...')).toBeInTheDocument();
-  });
   it('should render header with title, secondary title, right title and help tooltip', async () => {
     const { Wrapper } = getWrapper();
     render(
       <Wrapper>
-        <Barchart
-          type="category"
-          bars={[]}
-          title="Test Title"
-          secondaryTitle="Test Secondary Title"
-          rightTitle="Test Right Title"
-          helpTooltip="Test Help Tooltip"
-          colorSet={{
-            Success: 'lineColor1',
-          }}
-        />
+        <ChartLegendWrapper colorSet={testColorSet}>
+          <Barchart
+            type="category"
+            bars={[]}
+            title="Test Title"
+            secondaryTitle="Test Secondary Title"
+            rightTitle="Test Right Title"
+            helpTooltip="Test Help Tooltip"
+          />
+        </ChartLegendWrapper>
       </Wrapper>,
     );
 

package/src/lib/components/barchartv2/Barchart.component.tsx

@@ -19,11 +19,12 @@ import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
 import { renderTooltipContent, UnitRange, useChartData } from './utils';
+import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 
 const CHART_CONSTANTS = {
   TICK_WIDTH_OFFSET: 5,
   BAR_SIZE: 12,
-  MIN_POINT_SIZE: 1,
+  MIN_POINT_SIZE: 3,
   DEFAULT_HEIGHT: 200,
   CHART_MARGIN: {
     left: 0,
@@ -69,18 +70,25 @@ export type BarchartSortFn<T extends BarchartBars> = (
 
 export type BarchartProps<T extends BarchartBars> = {
   type: 'category' | TimeType;
-  bars: T;
-  colorSet: Record<T[number]['label'], ChartColors | (string & {})>;
+  bars?: T;
   tooltip?: BarchartTooltipFn<T>;
   defaultSort?: BarchartSortFn<T>;
   unitRange?: UnitRange;
   helpTooltip?: string;
   stacked?: boolean;
+  /**
+   * Sort the bars by default or by legend order
+   * legend will sort the bars by the order of the colorSet property of the ChartLegendWrapper component
+   * default will sort the bars by average values in descending order (biggest values will be at bottom)
+   * @default 'default'
+   */
+  stackedBarSort?: 'default' | 'legend';
   title?: string;
   secondaryTitle?: string;
   rightTitle?: React.ReactNode;
   height?: number;
   isLoading?: boolean;
+  isError?: boolean;
 };
 
 interface CustomTickProps {
@@ -177,6 +185,21 @@ const ChartHeader = ({
   );
 };
 
+const Error = ({ height }: { height: number }) => {
+  return (
+    <Box
+      height={height}
+      style={{
+        alignItems: 'center',
+        justifyContent: 'center',
+        display: 'flex',
+      }}
+    >
+      <Text>Chart data is not available</Text>
+    </Box>
+  );
+};
+
 const Loading = ({ height }: { height: number }) => {
   return (
     <Box
@@ -196,15 +219,16 @@ const Loading = ({ height }: { height: number }) => {
 
 export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
   const theme = useTheme();
+  const { getColor } = useChartLegend();
   const [hoveredValue, setHoveredValue] = useState<string | undefined>();
 
   const {
     height = CHART_CONSTANTS.DEFAULT_HEIGHT,
     bars,
     type = 'category',
-    colorSet,
     unitRange,
     stacked,
+    stackedBarSort = 'default',
     defaultSort,
     tooltip,
     title,
@@ -212,10 +236,31 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
     helpTooltip,
     rightTitle,
     isLoading,
+    isError,
   } = props;
 
+  // Create colorSet from ChartLegendWrapper
+  const colorSet = bars?.reduce(
+    (acc, bar) => {
+      const color = getColor(bar.label);
+      if (color) {
+        acc[bar.label] = color;
+      }
+      return acc;
+    },
+    {} as Record<string, ChartColors | string>,
+  );
+
   const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } =
-    useChartData(bars, type, colorSet, stacked, defaultSort, unitRange);
+    useChartData(
+      bars || [],
+      type,
+      colorSet || {},
+      stacked,
+      defaultSort,
+      unitRange,
+      stackedBarSort,
+    );
 
   return (
     <Stack direction="vertical" gap="r8">
@@ -225,7 +270,9 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
         helpTooltip={helpTooltip}
         rightTitle={rightTitle}
       />
-      {isLoading ? (
+      {isError || (!bars && !isLoading) ? (
+        <Error height={height} />
+      ) : isLoading ? (
         <Loading height={height} />
       ) : (
         <StyledResponsiveContainer width="100%" height={height}>
@@ -248,7 +295,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
                   key={dataKey}
                   dataKey={dataKey}
                   fill={chartColors[fill] || fill}
-                  minPointSize={CHART_CONSTANTS.MIN_POINT_SIZE}
+                  minPointSize={stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE}
                   stackId={stackId}
                   onMouseOver={() => setHoveredValue(dataKey)}
                   onMouseLeave={() => setHoveredValue(undefined)}

package/src/lib/components/barchartv2/utils.test.ts

@@ -2,6 +2,7 @@ import { coreUIAvailableThemes } from '../../style/theme';
 import {
   applySortingToData,
   computeUnitLabelAndRoundReferenceValue,
+  filterChartDataAndBarsByLegendSelection,
   formatPrometheusDataToRechartsDataAndBars,
   getMaxBarValue,
   getRoundReferenceValue,
@@ -481,8 +482,8 @@ describe('applySortingToData', () => {
 
 describe('getRoundReferenceValue', () => {
   it('should return appropriate rounded values', () => {
-    expect(getRoundReferenceValue(1)).toBe(1);
-    expect(getRoundReferenceValue(2)).toBe(2.5);
+    expect(getRoundReferenceValue(1)).toBe(5);
+    expect(getRoundReferenceValue(2)).toBe(5);
     expect(getRoundReferenceValue(3)).toBe(5);
     expect(getRoundReferenceValue(7)).toBe(10);
     expect(getRoundReferenceValue(15)).toBe(25);
@@ -716,6 +717,14 @@ describe('sortStackedBars', () => {
       { dataKey: 'bar1', fill: 'blue' },
     ]);
   });
+  it('should sort bars by legend order when stacked is true and legendOrder is provided', () => {
+    const result = sortStackedBars(bars, data, true, ['bar3', 'bar2', 'bar1']);
+    expect(result).toEqual([
+      { dataKey: 'bar3', fill: 'green' },
+      { dataKey: 'bar2', fill: 'red' },
+      { dataKey: 'bar1', fill: 'blue' },
+    ]);
+  });
   it('should not sort bars when stacked is false', () => {
     const result = sortStackedBars(bars, data, false);
     expect(result).toEqual([
@@ -780,3 +789,119 @@ describe('renderTooltipContent', () => {
     });
   });
 });
+
+describe('filterChartDataAndBarsByLegendSelection', () => {
+  const mockChartData = [
+    { category: 'Jan', Success: 10, Failed: 5, Warning: 3, Pending: 2 },
+    { category: 'Feb', Success: 20, Failed: 8, Warning: 6, Pending: 4 },
+    { category: 'Mar', Success: 15, Failed: 12, Warning: 9, Pending: 7 },
+  ];
+
+  const mockRechartsBars = [
+    { dataKey: 'Success', fill: '#00D100', stackId: undefined },
+    { dataKey: 'Failed', fill: '#D10000', stackId: undefined },
+    { dataKey: 'Warning', fill: '#FFA500', stackId: 'stacked' },
+    { dataKey: 'Pending', fill: '#337FBD', stackId: 'stacked' },
+  ];
+
+  it('should return all data and bars when no resources are selected (empty array)', () => {
+    const result = filterChartDataAndBarsByLegendSelection(
+      mockChartData,
+      mockRechartsBars,
+      [],
+    );
+
+    expect(result.filteredData).toEqual(mockChartData);
+    expect(result.filteredRechartsBars).toEqual(mockRechartsBars);
+    expect(result.filteredData).toHaveLength(3);
+    expect(result.filteredRechartsBars).toHaveLength(4);
+    // Verify all properties are preserved
+    expect(Object.keys(result.filteredData[0])).toEqual([
+      'category',
+      'Success',
+      'Failed',
+      'Warning',
+      'Pending',
+    ]);
+  });
+
+  it('should return only selected resources in both data and bars when resources are selected', () => {
+    const selectedResources = ['Success', 'Warning'];
+    const result = filterChartDataAndBarsByLegendSelection(
+      mockChartData,
+      mockRechartsBars,
+      selectedResources,
+    );
+
+    expect(result.filteredData).toHaveLength(3);
+    expect(result.filteredData).toEqual([
+      { category: 'Jan', Success: 10, Warning: 3 },
+      { category: 'Feb', Success: 20, Warning: 6 },
+      { category: 'Mar', Success: 15, Warning: 9 },
+    ]);
+
+    expect(result.filteredRechartsBars).toHaveLength(2);
+    expect(result.filteredRechartsBars).toEqual([
+      { dataKey: 'Success', fill: '#00D100', stackId: undefined },
+      { dataKey: 'Warning', fill: '#FFA500', stackId: 'stacked' },
+    ]);
+  });
+
+  it('should return single resource when only one resource is selected', () => {
+    const selectedResources = ['Failed'];
+    const result = filterChartDataAndBarsByLegendSelection(
+      mockChartData,
+      mockRechartsBars,
+      selectedResources,
+    );
+
+    expect(result.filteredData).toHaveLength(3);
+    expect(result.filteredData).toEqual([
+      { category: 'Jan', Failed: 5 },
+      { category: 'Feb', Failed: 8 },
+      { category: 'Mar', Failed: 12 },
+    ]);
+
+    expect(result.filteredRechartsBars).toHaveLength(1);
+    expect(result.filteredRechartsBars).toEqual([
+      { dataKey: 'Failed', fill: '#D10000', stackId: undefined },
+    ]);
+  });
+
+  it('should handle empty data array', () => {
+    const result = filterChartDataAndBarsByLegendSelection(
+      [],
+      mockRechartsBars,
+      ['Success'],
+    );
+
+    expect(result.filteredData).toEqual([]);
+    expect(result.filteredRechartsBars).toHaveLength(1);
+    expect(result.filteredRechartsBars).toEqual([
+      { dataKey: 'Success', fill: '#00D100', stackId: undefined },
+    ]);
+  });
+
+  it('should preserve order of selected resources based on data object keys', () => {
+    const selectedResources = ['Pending', 'Success', 'Failed']; // Different order
+    const result = filterChartDataAndBarsByLegendSelection(
+      mockChartData,
+      mockRechartsBars,
+      selectedResources,
+    );
+
+    // Should maintain the order they appear in selectedResources
+    expect(Object.keys(result.filteredData[0])).toEqual([
+      'category',
+      'Pending',
+      'Success',
+      'Failed',
+    ]);
+
+    // Should maintain original bar order regardless of selection order
+    expect(result.filteredRechartsBars).toHaveLength(3);
+    expect(result.filteredRechartsBars[0].dataKey).toBe('Success');
+    expect(result.filteredRechartsBars[1].dataKey).toBe('Failed');
+    expect(result.filteredRechartsBars[2].dataKey).toBe('Pending');
+  });
+});