@scality/core-ui 0.165.0 → 0.167.0

package/src/lib/components/chartlegend/ChartLegend.test.tsx

@@ -0,0 +1,235 @@
+import { render, screen } from '@testing-library/react';
+import { ChartLegend } from './ChartLegend';
+import React from 'react';
+import { ChartLegendWrapper } from './ChartLegendWrapper';
+import userEvent from '@testing-library/user-event';
+
+const colorSet = {
+  CPU: 'red',
+  Memory: 'blue',
+  Disk: 'green',
+};
+
+describe('ChartLegend', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render all legend items', () => {
+    render(
+      <ChartLegendWrapper colorSet={colorSet}>
+        <ChartLegend shape="line" />
+      </ChartLegendWrapper>,
+    );
+    expect(screen.getByText('CPU')).toBeInTheDocument();
+    expect(screen.getByText('Memory')).toBeInTheDocument();
+    expect(screen.getByText('Disk')).toBeInTheDocument();
+  });
+
+  it('should have all items selected by default', () => {
+    render(
+      <ChartLegendWrapper colorSet={colorSet}>
+        <ChartLegend shape="line" />
+      </ChartLegendWrapper>,
+    );
+
+    expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+  });
+  it('should not respond to clicks when disabled', () => {
+    render(
+      <ChartLegendWrapper colorSet={colorSet}>
+        <ChartLegend shape="line" disabled />
+      </ChartLegendWrapper>,
+    );
+
+    userEvent.click(screen.getByText('CPU'));
+    // If disabled, should not select any items
+    expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+
+    userEvent.click(screen.getByText('Memory'), { metaKey: true });
+    // If disabled, should not select any items
+    expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+  });
+  describe('Normal Click Behavior', () => {
+    it('should select only clicked item when all are selected', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+
+      // Click on CPU should select only CPU
+      userEvent.click(screen.getByLabelText('CPU selected'));
+
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+
+    it('should select all items when clicking on the only selected item', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // First click to select only CPU
+      userEvent.click(screen.getByLabelText('CPU selected'));
+
+      // Second click should select all
+      userEvent.click(screen.getByLabelText('CPU selected'));
+
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+    });
+
+    it('should select only clicked item when clicking unselected item', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Select only CPU first
+      userEvent.click(screen.getByLabelText('CPU selected'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+
+      // Click on unselected Memory should select only Memory
+      userEvent.click(screen.getByText('Memory'));
+      expect(screen.getByLabelText('CPU not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+  });
+
+  describe('Cmd+Click Behavior', () => {
+    it('should add unselected item to selection when cmd+clicking', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Select only CPU first
+      userEvent.click(screen.getByText('CPU'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+
+      // Cmd+click Memory should add it to selection
+      userEvent.click(screen.getByText('Memory'), { metaKey: true });
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+
+    it('should remove selected item from selection when cmd+clicking with multiple selected', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Start with all selected, select only CPU, then add Memory
+      userEvent.click(screen.getByText('CPU'));
+      userEvent.click(screen.getByText('Memory'), { metaKey: true });
+
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+
+      // Cmd+click CPU should remove it
+      userEvent.click(screen.getByText('CPU'), { metaKey: true });
+      expect(screen.getByLabelText('CPU not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+
+    it('should select all when cmd+clicking the only selected item', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Select only CPU
+      userEvent.click(screen.getByText('CPU'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+
+      // Cmd+click the only selected item should select all
+      userEvent.click(screen.getByText('CPU'), { metaKey: true });
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+    });
+
+    it('should work with ctrl+click on Windows/Linux', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Select only CPU first
+      userEvent.click(screen.getByText('CPU'));
+
+      // Ctrl+click Memory should add it to selection
+      userEvent.click(screen.getByText('Memory'), { ctrlKey: true });
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+
+    it('should handle mixed normal and cmd+clicks correctly', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Normal click to select CPU only
+      userEvent.click(screen.getByText('CPU'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+
+      // Cmd+click to add Memory
+      userEvent.click(screen.getByText('Memory'), { metaKey: true });
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+
+      // Normal click on Disk should select only Disk
+      userEvent.click(screen.getByText('Disk'));
+      expect(screen.getByLabelText('CPU not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+    });
+    it('should select one item when clicking on selected item and other items are selected', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+      userEvent.click(screen.getByText('CPU'));
+      userEvent.click(screen.getByText('Memory'), { metaKey: true });
+
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+      userEvent.click(screen.getByText('CPU'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+  });
+});

package/src/lib/components/chartlegend/ChartLegend.tsx

@@ -18,7 +18,10 @@ const Legend = styled.div<{ direction: 'horizontal' | 'vertical' }>`
   flex-wrap: wrap;
 `;
 
-const LegendItem = styled.div<{ disabled?: boolean; selected?: boolean }>`
+export const LegendItem = styled.div<{
+  disabled?: boolean;
+  selected?: boolean;
+}>`
   display: flex;
   align-items: center;
   gap: 8px;
@@ -31,7 +34,7 @@ const LegendItem = styled.div<{ disabled?: boolean; selected?: boolean }>`
   }
 `;
 
-const LegendShape = styled.div<{
+export const LegendShape = styled.div<{
   color?: string;
   shape: 'line' | 'rectangle';
   chartColors: Record<string, string>;
@@ -69,21 +72,45 @@ export const ChartLegend = ({
     isSelected,
     addSelectedResource,
     removeSelectedResource,
+    selectAllResources,
+    selectOnlyResource,
+    isOnlyOneSelected,
   } = useChartLegend();
 
   const resources = listResources();
 
   const handleLegendClick = useCallback(
-    (resource: string) => {
+    (resource: string, event: React.MouseEvent) => {
       if (disabled) return;
 
-      if (isSelected(resource)) {
-        removeSelectedResource(resource);
+      const isModifierClick = event.metaKey || event.ctrlKey;
+      const itemIsSelected = isSelected(resource);
+
+      if (isModifierClick) {
+        if (itemIsSelected) {
+          if (isOnlyOneSelected()) {
+            selectAllResources();
+          } else {
+            removeSelectedResource(resource);
+          }
+        } else {
+          addSelectedResource(resource);
+        }
+      } else if (itemIsSelected && isOnlyOneSelected()) {
+        selectAllResources();
       } else {
-        addSelectedResource(resource);
+        selectOnlyResource(resource);
       }
     },
-    [disabled, isSelected, addSelectedResource, removeSelectedResource],
+    [
+      disabled,
+      isSelected,
+      addSelectedResource,
+      removeSelectedResource,
+      selectAllResources,
+      selectOnlyResource,
+      isOnlyOneSelected,
+    ],
   );
 
   return (
@@ -97,7 +124,8 @@ export const ChartLegend = ({
             key={resource}
             disabled={disabled}
             selected={selected}
-            onClick={() => handleLegendClick(resource)}
+            aria-label={`${resource} ${selected ? 'selected' : 'not selected'}`}
+            onClick={(event) => handleLegendClick(resource, event)}
           >
             <LegendShape
               color={color}

package/src/lib/components/chartlegend/ChartLegendWrapper.tsx

@@ -1,13 +1,23 @@
-import { createContext, useContext, useState, ReactNode, useMemo, useCallback } from 'react';
+import {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useMemo,
+  useCallback,
+} from 'react';
 import { ChartColors } from '../../style/theme';
 
 export type ChartLegendState = {
   selectedResources: string[];
   addSelectedResource: (resource: string) => void;
   removeSelectedResource: (resource: string) => void;
+  selectAllResources: () => void;
+  selectOnlyResource: (resource: string) => void;
   isSelected: (resource: string) => boolean;
   getColor: (resource: string) => string | undefined;
   listResources: () => string[];
+  isOnlyOneSelected: () => boolean;
 };
 
 const ChartLegendContext = createContext<ChartLegendState | null>(null);
@@ -21,7 +31,9 @@ export const ChartLegendWrapper = ({
   children,
   colorSet,
 }: ChartLegendWrapperProps) => {
-  const [selectedResources, setSelectedResources] = useState<string[]>([]);
+  const allResources = Object.keys(colorSet);
+  const [selectedResources, setSelectedResources] =
+    useState<string[]>(allResources);
 
   const addSelectedResource = useCallback((resource: string) => {
     setSelectedResources((prev) =>
@@ -33,40 +45,66 @@ export const ChartLegendWrapper = ({
     setSelectedResources((prev) => prev.filter((r) => r !== resource));
   }, []);
 
-  const isSelected = useCallback((resource: string) => {
-    return selectedResources.includes(resource);
+  const selectAllResources = useCallback(() => {
+    setSelectedResources(allResources);
+  }, [allResources]);
+
+  const selectOnlyResource = useCallback((resource: string) => {
+    setSelectedResources([resource]);
+  }, []);
+
+  const isOnlyOneSelected = useCallback(() => {
+    return selectedResources.length === 1;
   }, [selectedResources]);
+  const isSelected = useCallback(
+    (resource: string) => {
+      return selectedResources.includes(resource);
+    },
+    [selectedResources],
+  );
 
-  const getColor = useCallback((resource: string) => {
-    const color = colorSet[resource];
-    if (!color) {
-      console.warn(
-        `ChartLegendWrapper: No color defined for resource "${resource}"`,
-      );
-      return undefined;
-    }
-    return color;
-  }, [colorSet]);
+  const getColor = useCallback(
+    (resource: string) => {
+      const color = colorSet[resource];
+      if (!color) {
+        console.warn(
+          `ChartLegendWrapper: No color defined for resource "${resource}"`,
+        );
+        return undefined;
+      }
+      return color;
+    },
+    [colorSet],
+  );
 
   const listResources = useCallback(() => {
     return Object.keys(colorSet);
   }, [colorSet]);
 
-  const chartLegendState = useMemo(() => ({
-    selectedResources,
-    addSelectedResource,
-    removeSelectedResource,
-    isSelected,
-    getColor,
-    listResources,
-  }), [
-    selectedResources,
-    addSelectedResource,
-    removeSelectedResource,
-    isSelected,
-    getColor,
-    listResources,
-  ]);
+  const chartLegendState = useMemo(
+    () => ({
+      selectedResources,
+      addSelectedResource,
+      removeSelectedResource,
+      selectAllResources,
+      selectOnlyResource,
+      isSelected,
+      getColor,
+      listResources,
+      isOnlyOneSelected,
+    }),
+    [
+      selectedResources,
+      addSelectedResource,
+      removeSelectedResource,
+      selectAllResources,
+      selectOnlyResource,
+      isSelected,
+      getColor,
+      listResources,
+      isOnlyOneSelected,
+    ],
+  );
 
   return (
     <ChartLegendContext.Provider value={chartLegendState}>

package/src/lib/components/constants.ts

@@ -40,29 +40,40 @@ export type QueryTimeSpan = {
   label: string;
   // the label display in the timespan selector
   duration: number;
+  // time difference between two samples in second
+  interval: number;
   // time span in second
+  /** @deprecated Use `interval` instead */
   frequency: number;
 };
+
 export const queryTimeSpansCodes: QueryTimeSpan[] = [
   {
     query: QUERY_LAST_SEVEN_DAYS,
     label: LAST_SEVEN_DAYS,
     duration: SAMPLE_DURATION_LAST_SEVEN_DAYS,
+    interval: SAMPLE_FREQUENCY_LAST_SEVEN_DAYS,
+    /** @deprecated Use `interval` instead */
     frequency: SAMPLE_FREQUENCY_LAST_SEVEN_DAYS,
   },
   {
     query: QUERY_LAST_TWENTY_FOUR_HOURS,
     label: LAST_TWENTY_FOUR_HOURS,
     duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
+    interval: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
+    /** @deprecated Use `interval` instead */
     frequency: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
   },
   {
     query: QUERY_LAST_ONE_HOUR,
     label: LAST_ONE_HOUR,
     duration: SAMPLE_DURATION_LAST_ONE_HOUR,
+    interval: SAMPLE_FREQUENCY_LAST_ONE_HOUR,
+    /** @deprecated Use `interval` instead */
     frequency: SAMPLE_FREQUENCY_LAST_ONE_HOUR,
   },
 ];
+
 export const NAN_STRING = 'NAN';
 
 export const STATUS_CRITICAL = 'critical';

package/src/lib/components/constrainedtext/Constrainedtext.component.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import { Tooltip } from '../tooltip/Tooltip.component';
 import { Props as TooltipProps } from '../tooltip/Tooltip.component';
 import { Text } from '../text/Text.component';
+import { CoreUITheme } from '../../style/theme';
 
 type Props = {
   text: string | number | JSX.Element | JSX.Element[];
@@ -13,6 +14,7 @@ type Props = {
   tooltipPlacement?: $PropertyType<TooltipProps, 'placement'>;
   lineClamp?: number;
   centered?: boolean;
+  color?: keyof CoreUITheme;
 };
 // for lineClamp cf https://css-tricks.com/almanac/properties/l/line-clamp/
 // it should work on all major navigator, despite the --webkit prefix
@@ -74,6 +76,7 @@ function ConstrainedText({
   tooltipStyle,
   tooltipPlacement,
   lineClamp = 1,
+  color,
   centered = false,
 }: Props): JSX.Element {
   const [displayToolTip, setDisplayToolTip] = useState(false);
@@ -91,7 +94,7 @@ function ConstrainedText({
           overlayStyle={tooltipStyle}
           placement={tooltipPlacement}
         >
-          <Text>
+          <Text color={color}>
             {getConstrainedTextContainer(
               constrainedTextRef,
               lineClamp,
@@ -101,7 +104,7 @@ function ConstrainedText({
           </Text>
         </Tooltip>
       ) : (
-        <Text>
+        <Text color={color}>
           {getConstrainedTextContainer(
             constrainedTextRef,
             lineClamp,

package/src/lib/components/date/FormattedDateTime.tsx

@@ -1,6 +1,13 @@
 import { getDateDaysDiff } from './dateDiffer';
 import { Tooltip } from '../tooltip/Tooltip.component';
 
+export const LONG_DATE_FORMATER = Intl.DateTimeFormat('en-GB', {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+});
+
 export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
   year: 'numeric',
   month: '2-digit',
@@ -56,7 +63,10 @@ type FormattedDateTimeProps = {
     | 'time-second'
     | 'relative'
     | 'day-month-abbreviated-hour-minute'
-    | 'day-month-abbreviated-hour-minute-second';
+    | 'day-month-abbreviated-hour-minute-second'
+    | 'long-date'
+    | 'chart-date';
+
   value: Date;
 };
 
@@ -184,6 +194,10 @@ export const FormattedDateTime = ({
           )}
         </>
       );
+    case 'long-date':
+      return <>{LONG_DATE_FORMATER.format(value)}</>;
+    case 'chart-date':
+      return <>{DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '')}</>;
     default:
       return <></>;
   }

package/src/lib/components/icon/Icon.component.tsx

@@ -142,7 +142,15 @@ export const iconTable = {
   Mail: 'fas faEnvelope',
 };
 
-export const customIcons = {
+type IconProps = {
+  'aria-label'?: string;
+  color?: string;
+  size?: string;
+  icon?: string;
+  title?: string;
+};
+
+export const customIcons: Record<string, ((props: IconProps) => JSX.Element) & { displayName?: string }> = {
   'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (
     <RemoteUser ariaLabel={ariaLabel} color={color} size={size} />
   ),
@@ -151,6 +159,9 @@ export const customIcons = {
   ),
 };
 
+customIcons['Remote-user'].displayName = 'RemoteUser';
+customIcons['Remote-group'].displayName = 'RemoteGroup';
+
 const IconStyled = styled(FontAwesomeIcon)`
   ${(props) => {
     const theme = props.theme;

package/src/lib/components/linetemporalchart/ChartUtil.test.ts

@@ -165,33 +165,33 @@ it('returns the unit label GiB/Sec', () => {
   expect(valueBase).toEqual(1024 * 1024 * 1024);
 });
 // test for addMissingDataPoint function
-const originalValue = [
-  [0, 0],
-  [1, 1],
-  [2, 2],
-  [3, 3],
-  [4, 4],
-  [5, 5],
-  [6, 6],
-  [8, 8],
-  [9, 9],
-  [10, 10],
+const originalValue: [number, number | string | null][] = [
+  [0, '0'],
+  [1, '1'],
+  [2, '2'],
+  [3, '3'],
+  [4, '4'],
+  [5, '5'],
+  [6, '6'],
+  [8, '8'],
+  [9, '9'],
+  [10, '10'],
 ];
 const startingTimeStamp = 0;
 const sampleDuration = 10;
 const sampleFrequency = 1;
 const newValues = [
-  [0, 0],
-  [1, 1],
-  [2, 2],
-  [3, 3],
-  [4, 4],
-  [5, 5],
-  [6, 6],
+  [0, '0'],
+  [1, '1'],
+  [2, '2'],
+  [3, '3'],
+  [4, '4'],
+  [5, '5'],
+  [6, '6'],
   [7, 'NAN'],
-  [8, 8],
-  [9, 9],
-  [10, 10],
+  [8, '8'],
+  [9, '9'],
+  [10, '10'],
 ];
 it('should add missing data point with null', () => {
   const result = addMissingDataPoint(
@@ -210,19 +210,7 @@ it('should return the array with string NAN when the original dataset is empty',
     sampleDuration,
     sampleFrequency,
   );
-  expect(result).toEqual([
-    [0, 'NAN'],
-    [1, 'NAN'],
-    [2, 'NAN'],
-    [3, 'NAN'],
-    [4, 'NAN'],
-    [5, 'NAN'],
-    [6, 'NAN'],
-    [7, 'NAN'],
-    [8, 'NAN'],
-    [9, 'NAN'],
-    [10, 'NAN'],
-  ]);
+  expect(result).toEqual([]);
 });
 it('should return an empty array when the starting timestamp is undefined', () => {
   const result = addMissingDataPoint(
@@ -259,4 +247,4 @@ it('should return an empty array when sample frequency is undefined', () => {
     undefined,
   );
   expect(result).toEqual([]);
-});
+});