@scality/core-ui 0.163.0 → 0.165.0

package/src/lib/components/inlineinput/InlineInput.test.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import {
   QueryClient,
   QueryClientProvider,
@@ -11,7 +11,6 @@ import {
   render,
   screen,
   waitFor,
-  waitForElementToBeRemoved,
   within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -77,9 +76,10 @@ describe('InlineInput', () => {
       /// Then press enter to edit the input
       await act(() => userEvent.keyboard('{enter}'));
       /// Then type a new value
-      await act(() => userEvent.type(document.activeElement, 'new value'));
+      await act(() => userEvent.type(document.activeElement!, 'new value'));
       /// Then press enter to confirm the new value
       await act(() => userEvent.keyboard('{enter}'));
+      await waitFor(() => screen.findByText('testnew value'));
       expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
 
       //V
@@ -115,13 +115,16 @@ describe('InlineInput', () => {
       /// Then press enter to edit the input
       await act(() => userEvent.keyboard('{enter}'));
       /// Then type a new value
-      await act(() => userEvent.type(document.activeElement, 'new value'));
+      await act(() => userEvent.type(document.activeElement!, 'new value'));
       /// Then press enter to confirm the new value
+      
       await act(() => userEvent.keyboard('{enter}'));
+      await waitFor(() => screen.findByRole('dialog', { name: /Confirm/i }));
       /// Expect the confirmation modal to be opened
       expect(selectors.confirmationModal()).toBeInTheDocument()
       /// Click the confirm button
       await act(() => userEvent.click(screen.getByRole('button', { name: /confirm/i })));
+
       /// modal should be closed
       expect(screen.queryByRole('dialog', { name: /Confirm/i })).not.toBeInTheDocument();
 
@@ -156,7 +159,7 @@ describe('InlineInput', () => {
       /// Then press enter to edit the input
       await act(() => userEvent.keyboard('{enter}'));
       /// Then type a new value
-      await act(() => userEvent.type(document.activeElement, 'new value'));
+      await act(() => userEvent.type(document.activeElement!, 'new value'));
       /// Then press escape to cancel the new value
       await act(() => userEvent.keyboard('{esc}'));
 
@@ -191,7 +194,7 @@ describe('InlineInput', () => {
       /// Then press enter to edit the input
       await act(() => userEvent.keyboard('{enter}'));
       /// Then type a new value
-      await act(() => userEvent.type(document.activeElement, 'new value'));
+      await act(() => userEvent.type(document.activeElement!, 'new value'));
       /// Then press enter to confirm the new value
       await act(() => userEvent.keyboard('{enter}'));
       /// Expect the confirmation modal to be opened
@@ -208,7 +211,7 @@ describe('InlineInput', () => {
       //V
       expect(mock).not.toHaveBeenCalled();
       expect(screen.getByRole('textbox')).toBeInTheDocument();
-      expect(screen.getByRole('textbox').value).toBe('testnew value');
+      expect((screen.getByRole('textbox') as HTMLInputElement).value).toBe('testnew value');
     });
   });
 });

package/src/lib/components/inputlist/InputList.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import { InputList, InputListProps } from './InputList.component';
 import { FormSection } from '../form/Form.component';
@@ -6,7 +5,7 @@ import { FormSection } from '../form/Form.component';
 describe('InputList', () => {
   const onChangeMock = jest.fn();
 
-  const renderInputList = (props: InputListProps<string[]>) => {
+  const renderInputList = (props: InputListProps<string>) => {
     render(
       <FormSection>
         <InputList

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

@@ -3,7 +3,8 @@ import {
   getUnitLabel,
   addMissingDataPoint,
 } from './ChartUtil';
-const series = [
+import { Serie } from './LineTemporalChart.component';
+const series: Serie[] = [
   {
     resource: 'node1',
     data: [
@@ -11,7 +12,7 @@ const series = [
       [1627460952, '18.73333333333335'],
     ],
     getTooltipLabel: (metricPrefix, resource) => {
-      return resource;
+      return `${resource}`;
     },
     isLineDashed: false,
   },
@@ -22,12 +23,12 @@ const series = [
       [1627460952, null],
     ],
     getTooltipLabel: (metricPrefix, resource) => {
-      return resource;
+      return `${resource}`;
     },
     isLineDashed: false,
   },
 ];
-const seriesSymmetrical = [
+const seriesSymmetrical: Serie[] = [
   {
     metricPrefix: 'read',
     resource: 'node1',

package/src/lib/components/selectv2/selectv2.test.tsx

@@ -2,6 +2,7 @@ import { act, screen, render as testingRender, waitFor } from '@testing-library/
 import userEvent from '@testing-library/user-event';
 import React, { useState, useRef } from 'react';
 import { Option, Select, SelectRef } from '../selectv2/Selectv2.component';
+import { GroupTypeBase, OptionTypeBase } from 'react-select';
 
 const render = (args) => {
   return testingRender(args);
@@ -66,7 +67,10 @@ describe('SelectV2', () => {
   };
 
   it('should throw error if <Option/> is outside <Select/>', () => {
+    // mock console.error as this is the only way to silent expected error thrown by the component
+    const consoleErrorFn = jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
     expect(() => render(<Option value="Option 1" />)).toThrowError();
+    consoleErrorFn.mockRestore();
   });
 
   it('should open/close on click', async () => {
@@ -458,7 +462,7 @@ describe('SelectV2', () => {
   describe('Ref API', () => {
     it('should expose focus method via ref', async () => {
       const RefTestComponent = () => {
-        const selectRef = useRef<SelectRef>(null);
+        const selectRef = useRef<SelectRef<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>>>(null);
         const [value, setValue] = useState<string>('');
 
         return (
@@ -486,7 +490,7 @@ describe('SelectV2', () => {
 
     it('should expose openMenu and closeMenu methods via ref', async () => {
       const RefTestComponent = () => {
-        const selectRef = useRef<SelectRef>(null);
+        const selectRef = useRef<SelectRef<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>>>(null);
         const [value, setValue] = useState<string>('');
 
         return (
@@ -529,7 +533,7 @@ describe('SelectV2', () => {
 
       const RefTestComponent = () => {
         const [value, setValue] = useState('');
-        const selectRef = useRef<SelectRef>(null);
+        const selectRef = useRef<SelectRef<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>>>(null);
 
         return (
           <div>
@@ -582,7 +586,7 @@ describe('SelectV2', () => {
 
     it('should expose blur method via ref', async () => {
       const RefTestComponent = () => {
-        const selectRef = useRef<SelectRef>(null);
+        const selectRef = useRef<SelectRef<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>>>(null);
         const [value, setValue] = useState<string>('');
 
         return (

package/src/lib/components/tablev2/TableSync.test.tsx

@@ -1,12 +1,11 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
 import { TableSync } from './TableSync';
 
 describe('TableSync', () => {
   it('should render correctly', async () => {
     const onSync = jest.fn();
     render(
-      <TableSync onSync={onSync} />
+      <TableSync onSync={onSync} tooltipOverlay='sync' />
     );
     await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
 
@@ -17,7 +16,7 @@ describe('TableSync', () => {
   it('should call onSync when clicked', async () => {
     const onSync = jest.fn();
     render(
-      <TableSync onSync={onSync} />
+      <TableSync onSync={onSync} tooltipOverlay='sync' />
     );
     await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
 

package/src/lib/components/tablev2/TableUtils.test.ts

@@ -9,9 +9,12 @@ it('should return -1 or 1 to sort the status', () => {
   expect(result).toEqual(1);
   expect(result2).toEqual(-1);
 });
-it('should return undefine for the unknown status', () => {
-  const result = compareHealth('invalidStatus', 'healthy');
-  const result2 = compareHealth('none', 'invalidStatus');
+it('should return undefined for the unknown status', () => {
+  const consoleErrorMockHandle = jest.spyOn(console, 'error').mockImplementation(() => {});
+  const result = compareHealth('invalidStatus' as any, 'healthy');
+  const result2 = compareHealth('none', 'invalidStatus' as any);
+  expect(consoleErrorMockHandle).toHaveBeenCalled();
+  consoleErrorMockHandle.mockRestore();
   expect(result).toEqual(undefined);
   expect(result2).toEqual(undefined);
 });

package/src/lib/components/tablev2/Tablev2.test.tsx

@@ -1,5 +1,4 @@
-import { Table } from './Tablev2.component';
-import React from 'react';
+import { Table, TableProps } from './Tablev2.component';
 import { render, screen, waitFor } from '@testing-library/react';
 
 jest.mock('./TableUtils', () => ({
@@ -42,7 +41,7 @@ const data = [
     health: 'healthy',
   },
 ];
-const columns = [
+const columns: TableProps['columns'] = [
   {
     Header: 'First Name',
     accessor: 'firstName',

package/src/lib/components/toggle/Toggle.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Props, Toggle } from './Toggle.component';
 import userEvent from '@testing-library/user-event';
 

package/src/lib/index.ts

@@ -82,4 +82,3 @@ export { InfoMessage } from './components/infomessage/InfoMessage.component';
 export { InputList } from './components/inputlist/InputList.component';
 export { InlineInput } from './components/inlineinput/InlineInput';
 export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
-export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';

package/src/lib/next.ts

@@ -22,3 +22,5 @@ export {
   BarchartTooltipFn,
 } from './components/barchartv2/Barchart.component';
 export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
+export { ChartLegend } from './components/chartlegend/ChartLegend';
+export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';

package/stories/BarChart/barchart.stories.tsx

@@ -360,7 +360,7 @@ export const CapacityWithUnitRange: Story = {
 
 const stackedData: BarchartProps<
   {
-    label: 'Success' | 'Failed';
+    label: 'Success' | 'Failed' | 'Warning';
     data: [string, number][];
   }[]
 >['bars'] = [
@@ -375,9 +375,17 @@ const stackedData: BarchartProps<
   {
     label: 'Failed',
     data: [
-      ['category1', 8],
-      ['category2', 10],
-      ['category3', 25],
+      ['category1', 0],
+      ['category2', 0],
+      ['category3', 0],
+    ],
+  },
+  {
+    label: 'Warning',
+    data: [
+      ['category1', 0],
+      ['category2', 0],
+      ['category3', 0],
     ],
   },
 ];
@@ -390,6 +398,7 @@ export const Stacked: Story = {
         colorSet={{
           Success: theme.statusHealthy,
           Failed: theme.statusCritical,
+          Warning: theme.statusWarning,
         }}
       >
         <Stack direction="vertical" gap="r16">
@@ -736,6 +745,88 @@ export const BarchartsWithSingleLegend: Story = {
     );
   },
 };
+
+export const ErrorState: Story = {
+  render: () => {
+    const theme = useTheme() as CoreUITheme;
+    return (
+      <ChartLegendWrapper
+        colorSet={{
+          Success: theme.statusHealthy,
+          Failed: theme.statusCritical,
+        }}
+      >
+        <Barchart
+          type="category"
+          bars={[]}
+          isError
+          title="Error State"
+          helpTooltip="This chart data could not be loaded"
+        />
+        <ChartLegend shape="rectangle" />
+      </ChartLegendWrapper>
+    );
+  },
+};
+
+export const StackedBarSort: Story = {
+  render: () => {
+    const theme = useTheme() as CoreUITheme;
+    const [sort, setSort] = useState<'default' | 'legend'>('default');
+    const statusesData = [
+      {
+        label: 'Success',
+        data: [
+          ['category1', 100],
+          ['category2', 80],
+          ['category3', 50],
+        ],
+      },
+      {
+        label: 'Warning',
+        data: [
+          ['category1', 10],
+          ['category2', 20],
+          ['category3', 30],
+        ],
+      },
+      {
+        label: 'Failed',
+        data: [
+          ['category1', 30],
+          ['category2', 40],
+          ['category3', 50],
+        ],
+      },
+    ] as const;
+    return (
+      <ChartLegendWrapper
+        colorSet={{
+          Success: theme.statusHealthy,
+          Warning: theme.statusWarning,
+          Failed: theme.statusCritical,
+        }}
+      >
+        <Barchart
+          type="category"
+          bars={statusesData}
+          stacked
+          stackedBarSort={sort}
+          title="Stacked Bar Chart"
+          helpTooltip="This chart data could not be loaded"
+          rightTitle={
+            <Button
+              label={sort === 'default' ? 'Sort by Legend' : 'Sort by Default'}
+              onClick={() => setSort(sort === 'default' ? 'legend' : 'default')}
+            />
+          }
+        />
+        <ChartLegend shape="rectangle" />
+      </ChartLegendWrapper>
+    );
+  },
+};
+
 export const CompleteExample: Story = {
   render: () => {
     const theme = useTheme() as CoreUITheme;
@@ -809,7 +900,7 @@ export const CompleteExample: Story = {
                 }}
               />
             }
-            bars={data || []}
+            bars={data}
             tooltip={customTooltip}
             isLoading={isLoading}
             height={200}

package/tsconfig.json

@@ -15,7 +15,6 @@
     "strictFunctionTypes": true,
     "noImplicitAny": false, //For now it is too costly to enable this one
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true
   }
 }