@scality/core-ui 0.122.0 → 0.123.0

package/src/lib/organisms/attachments/AttachmentTable.tsx

@@ -32,6 +32,7 @@ import {
 } from './AttachmentTypes';
 import { useQuery, UseQueryOptions } from 'react-query';
 import { EmptyCell } from '../../components/tablev2/Tablev2.component';
+import { tableRowHeight } from '../../components/tablev2/TableUtils';
 
 type AttachableEntityWithPendingStatus<ENTITY_TYPE> = {
   isPending?: boolean;
@@ -104,11 +105,7 @@ const MenuContainer = styled.ul<{
 `;
 
 const SearchBoxContainer = styled.div`
-  margin-bottom: ${spacing.r24};
-  width: 78%;
-  .sc-tooltip {
-    width: 100%;
-  }
+  padding: ${spacing.r16};
 `;
 
 const StyledSearchInput = styled(SearchInput)`
@@ -134,6 +131,7 @@ const StyledTable = styled.div`
 const CenterredSecondaryText = styled(SecondaryText)`
   display: block;
   text-align: center;
+  line-height: ${tableRowHeight[rowHeight]}rem;
 `;
 
 const PrivateAttachmentContext = createContext<{
@@ -477,8 +475,12 @@ export const AttachmentTable = <ENTITY_TYPE,>({
       <SearchBoxContainer
         {...{
           ref: (element) => {
-            if (element) {
-              setSearchWidth(element.getBoundingClientRect().width - 2 + 'px');
+            if (element?.firstElementChild) {
+              setSearchWidth(
+                element.firstElementChild.getBoundingClientRect().width -
+                  2 +
+                  'px',
+              );
             }
           },
         }}
@@ -489,7 +491,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
               <>We failed to load the entities, hence search is disabled</>
             }
           >
-            <Box display="flex" alignItems="center" width="100%" gap={8}>
+            <Stack>
               <StyledSearchInput
                 placeholder={searchEntityPlaceholder}
                 {...getInputProps({
@@ -508,7 +510,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
                 disabled={filteredEntities.status === 'error'}
               />
               <Loader />
-            </Box>
+            </Stack>
           </Tooltip>
         ) : (
           <StyledSearchInput
@@ -595,7 +597,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
         <Table
           columns={[
             {
-              Header: <Box flex={1.5}>Name</Box>,
+              Header: 'Name',
               accessor: 'name',
               cellStyle: {
                 flex: 1.5,
@@ -639,7 +641,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
               },
             },
             {
-              Header: <Box flex={0.5}>Attachment status</Box>,
+              Header: 'Attachment',
               accessor: 'isPending',
               cellStyle: {
                 flex: 0.5,
@@ -690,7 +692,6 @@ export const AttachmentTable = <ENTITY_TYPE,>({
           defaultSortingKey="name"
         >
           <Table.SingleSelectableContent
-            backgroundVariant="backgroundLevel4"
             rowHeight={rowHeight}
             separationLineVariant="backgroundLevel2"
           >
@@ -698,7 +699,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
               <>
                 {initiallyAttachedEntitiesStatus === 'idle' ||
                 initiallyAttachedEntitiesStatus === 'loading' ? (
-                  <Wrap>
+                  <Wrap style={{ height: `${tableRowHeight[rowHeight]}rem` }}>
                     <p></p>
                     <Stack>
                       <Loader />
@@ -707,9 +708,17 @@ export const AttachmentTable = <ENTITY_TYPE,>({
                     <p></p>
                   </Wrap>
                 ) : initiallyAttachedEntitiesStatus === 'error' ? (
-                  <CenterredSecondaryText>
-                    Failed to load {entityName.plural}
-                  </CenterredSecondaryText>
+                  <Stack
+                    style={{
+                      justifyContent: 'center',
+                      height: `${tableRowHeight[rowHeight]}rem`,
+                    }}
+                  >
+                    <Icon name="Exclamation-circle" color="statusWarning" />
+                    <Text color="textSecondary">
+                      Failed to load attached {entityName.plural}.
+                    </Text>
+                  </Stack>
                 ) : (
                   desiredAttachedEntities.length === 0 && (
                     <CenterredSecondaryText>

package/stories/Hooks/useMutationsHandler.mdx

@@ -0,0 +1,121 @@
+# useMutationsHandler
+
+The `useMutationsHandler` hook is a powerful utility designed to manage and handle the results of multiple mutations using `react-query`.
+It provides a unified way to handle success and error states, display toast notifications,
+and manage side effects after mutation completions.
+
+## Usage
+
+```jsx
+import { useMutationsHandler } from '@scality/core-ui';
+import { Button } from '@scality/core-ui/dist/next';
+import { useMutation } from 'react-query';
+
+function useMainMutation() {
+  return useMutation({
+    mutationFn: () => {
+      return Promise.resolve('mainMutation');
+    },
+  });
+}
+
+function useDependantMutation() {
+  return useMutation({
+    mutationFn: () => {
+      return Promise.resolve('dependantMutation');
+    },
+  });
+}
+
+export const ExampleComponent = () => {
+  const useMainM = useMainMutation();
+  const useDependantM = useDependantMutation();
+  const { mutate: mainMutate } = useMainM;
+  const { mutate: dependantMutate } = useDependantM;
+
+  const mainMutation = {
+    mutation: useMainM,
+    name: 'mainMutation',
+  };
+
+  const dependantMutations = [
+    {
+      mutation: useDependantM,
+      name: 'depandantMutation',
+    },
+  ];
+
+  useMutationsHandler({
+    mainMutation,
+    dependantMutations,
+    messageDescriptionBuilder: (mutations) => {
+      const mutationsStatus = mutations.map(({ status }) => status);
+      const mutationsAllSuccess = mutationsStatus.every(
+        (status) => status === 'success',
+      );
+
+      if (mutationsAllSuccess) {
+        return `All mutations were successful`;
+      } else {
+        return `Some mutations failed`;
+      }
+    },
+    onAllMutationsSuccess: () => {
+      // do something after success of all mutations
+    },
+  });
+
+  const handleClick = () => {
+    mainMutate(null, {
+      onSuccess: () => dependantMutate(),
+    });
+  };
+
+  return (
+    <Button label={'Click me'} onClick={() => handleClick()} type="button" />
+  );
+};
+```
+
+## Props
+
+### `mainMutation`
+
+- Type: MutationConfig
+- Description: The primary mutation that needs to be executed and monitored
+
+For more information on useMutation, see [here](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation)
+
+### `messageDescriptionBuilder`
+
+- Type: () => React Node
+- Description: Define the element that will be rendered inside the toast
+
+### `dependentMutations`
+
+- Type: MutationConfig[]
+- Description: The secondary mutations that need to be executed and monitored after the success of the main mutation
+- Optional
+
+### `toastProps`
+
+- Type: Pick<
+  ToastContextState,
+  'style' | 'autoDismiss' | 'position' | 'duration' | 'withProgressBar'
+  >
+- Description: Props from the `Toast` component, allow the customization of the toast displayed by `useMutationsHandler`
+- Optional
+
+For more information on toastProps, see [here](?path=/docs/components-feedback-toast--stories)
+
+### onMainMutationSuccess
+
+- Type: () => void
+- Description: The callback to call after the main mutation succeeded
+- Optional
+
+### onAllMutationsSuccess
+
+- Type: () => void
+- Description: The callback to call after all the mutations succeeded
+- Optional

package/stories/attachment.stories.tsx

@@ -0,0 +1,78 @@
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+import {
+  AttachmentProvider,
+  AttachmentTable,
+} from '../src/lib/organisms/attachments/AttachmentTable';
+
+import { Box } from '../src/lib/next';
+import { useTheme } from 'styled-components';
+
+export default {
+  title: 'Components/AttachmentTable',
+  component: AttachmentTable,
+};
+
+export const Playground = {
+  render: () => {
+    const theme = useTheme();
+    return (
+      <Box
+        style={{ height: '100%', backgroundColor: theme.backgroundLevel4 }}
+        p={'2rem'}
+      >
+        <AttachmentProvider>
+          <AttachmentTable
+            entityName={{ plural: 'users', singular: 'user' }}
+            filteredEntities={{
+              status: 'success',
+              data: {
+                number: 1,
+                entities: [{ name: 'User A', id: 'test', type: 'USER' }],
+              },
+            }}
+            initialAttachmentOperations={[]}
+            onEntitySearchChange={action('onEntitySearchChange')}
+            searchEntityPlaceholder="Search user by name"
+            initiallyAttachedEntities={[
+              { name: 'User A', id: 'test', type: 'USER' },
+            ]}
+            initiallyAttachedEntitiesStatus={'success'}
+            onAttachmentsOperationsChanged={() => {
+              console.log('changed');
+            }}
+          />
+        </AttachmentProvider>
+      </Box>
+    );
+  },
+};
+
+export const FailToLoad = {
+  render: () => {
+    const theme = useTheme();
+    return (
+      <Box
+        style={{ height: '100%', backgroundColor: theme.backgroundLevel4 }}
+        p={'2rem'}
+      >
+        <AttachmentProvider>
+          <AttachmentTable
+            entityName={{ plural: 'users', singular: 'user' }}
+            filteredEntities={{
+              status: 'error',
+            }}
+            initialAttachmentOperations={[]}
+            onEntitySearchChange={action('onEntitySearchChange')}
+            searchEntityPlaceholder="Search user by name"
+            initiallyAttachedEntities={[]}
+            initiallyAttachedEntitiesStatus={'error'}
+            onAttachmentsOperationsChanged={() => {
+              console.log('changed');
+            }}
+          />
+        </AttachmentProvider>
+      </Box>
+    );
+  },
+};

package/stories/common.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { getThemePropSelector } from '../src/lib/utils';
 const StyledWrapper = styled.div`
-  padding: 3rem;
-  height: 100%;
-  background-color: ${(props) => props.theme.backgroundLevel1};
-  color: ${(props) => props.theme.textPrimary};
-  box-sizing: border-box;
+  ${(props) => {
+    const { style, theme } = props;
+    return css`
+      padding: 3rem;
+      height: 100%;
+      background-color: ${theme[style?.backgroundColor || 'backgroundLevel3']};
+      color: ${theme.textPrimary};
+      box-sizing: border-box;
+      overflow: scroll;
+    `;
+  }}
 `;
 const StyledTitle = styled.h3`
   color: ${getThemePropSelector('textPrimary')};

package/stories/emptystate.stories.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { EmptyState } from '../src/lib/components/emptystate/Emptystate.component';
-import { Wrapper } from './common';
+
 export default {
   title: 'Components/Data Display/EmptyState',
   component: EmptyState,

package/stories/form.stories.tsx

@@ -236,9 +236,7 @@ export const AllRequiredPageForm = {
 export const TabForm = {
   ...PageForm,
   args: {
-    layout: {
-      kind: 'tab',
-    },
+    kind: 'tab',
   },
 };
 

package/stories/modal.stories.tsx

@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import { Modal } from '../src/lib/components/modal/Modal.component';
 import { action } from '@storybook/addon-actions';
 import { Wrapper } from './common';
@@ -164,7 +163,6 @@ export const WithinTable = {
           <Table.SingleSelectableContent
             rowHeight="h32"
             separationLineVariant="backgroundLevel3"
-            backgroundVariant="backgroundLevel1"
           />
         </Table>
       </div>

package/stories/tablev2.stories.tsx

@@ -5,7 +5,7 @@ import {
   EmptyCell,
   Table,
 } from '../src/lib/components/tablev2/Tablev2.component';
-import { Wrapper, Title } from './common';
+import { Title } from './common';
 import {
   BrowserRouter,
   BrowserRouter as Router,
@@ -65,51 +65,49 @@ type Entry = {
   health: string;
 };
 
+const columns: Column<Entry>[] = [
+  {
+    Header: 'First Name',
+    accessor: 'firstName',
+    cellStyle: {
+      textAlign: 'left',
+    },
+    Cell: ({ value }) => {
+      if (value) return <>{value}</>;
+      return <EmptyCell />;
+    },
+  },
+  {
+    Header: 'Last Name',
+    accessor: 'lastName',
+    cellStyle: {
+      textAlign: 'left',
+    },
+    // disable the sorting on this column
+    disableSortBy: true,
+  },
+  {
+    Header: 'Age',
+    accessor: 'age',
+    cellStyle: {
+      width: '50px',
+      textAlign: 'left',
+    },
+  },
+  {
+    Header: 'Health',
+    accessor: 'health',
+    sortType: 'health',
+    cellStyle: {
+      textAlign: 'left',
+    },
+  },
+];
+const getRowId = (row: Entry, relativeIndex: number) => {
+  return row.lastName + ' ' + row.firstName;
+};
 export const SimpleContentTable = {
   render: ({}) => {
-    const columns: Column<Entry>[] = [
-      {
-        Header: 'First Name',
-        accessor: 'firstName',
-        cellStyle: {
-          textAlign: 'left',
-        },
-        Cell: ({ value }) => {
-          if (value) return <>{value}</>;
-          return <EmptyCell />;
-        },
-      },
-      {
-        Header: 'Last Name',
-        accessor: 'lastName',
-        cellStyle: {
-          textAlign: 'left',
-        },
-        // disable the sorting on this column
-        disableSortBy: true,
-      },
-      {
-        Header: 'Age',
-        accessor: 'age',
-        cellStyle: {
-          width: '50px',
-          textAlign: 'left',
-        },
-      },
-      {
-        Header: 'Health',
-        accessor: 'health',
-        sortType: 'health',
-        cellStyle: {
-          textAlign: 'left',
-        },
-      },
-    ];
-
-    const getRowId = (row: Entry, relativeIndex: number) => {
-      return row.lastName + ' ' + row.firstName;
-    };
-
     const TableWithQueryParams = ({}) => {
       const location = useLocation();
       return (
@@ -148,7 +146,7 @@ export const SimpleContentTable = {
     };
 
     return (
-      <Wrapper>
+      <>
         <Title>Non Selectable Table</Title>
         <div
           style={{
@@ -230,6 +228,7 @@ export const SimpleContentTable = {
             data={data}
             defaultSortingKey={'health'}
             getRowId={getRowId}
+            status="loading"
           >
             <Table.MultiSelectableContent
               rowHeight="h40"
@@ -241,7 +240,7 @@ export const SimpleContentTable = {
             />
           </Table>
         </div>
-      </Wrapper>
+      </>
     );
   },
 };
@@ -320,7 +319,7 @@ export const asyncTable = {
     ];
 
     return (
-      <Wrapper>
+      <>
         <Title>async cell Table</Title>
         <div
           style={{
@@ -347,7 +346,7 @@ export const asyncTable = {
             </Table>
           </BrowserRouter>
         </div>
-      </Wrapper>
+      </>
     );
   },
 };
@@ -384,7 +383,7 @@ export const OnBottomCallback = {
     };
 
     return (
-      <Wrapper>
+      <>
         <Title>async cell Table</Title>
         <div
           style={{
@@ -406,7 +405,7 @@ export const OnBottomCallback = {
             />
           </Table>
         </div>
-      </Wrapper>
+      </>
     );
   },
 };
@@ -492,7 +491,7 @@ export const MultiTable = {
     };
 
     return (
-      <Wrapper>
+      <>
         <Title>Several Multiselect</Title>
         <Flex justifyContent="center" gap="2rem">
           <Box width="500px" height="200px">
@@ -546,7 +545,87 @@ export const MultiTable = {
             </Table>
           </Box>
         </Flex>
-      </Wrapper>
+      </>
+    );
+  },
+};
+
+export const EmptyTable = {
+  render: (args) => {
+    const { background } = args;
+    return (
+      <Table columns={columns} data={[]} defaultSortingKey={'firstName'}>
+        <Table.SingleSelectableContent
+          rowHeight="h40"
+          separationLineVariant={background}
+          backgroundVariant="backgroundLevel1"
+          onRowSelected={action('Table Row Clicked')}
+        />
+      </Table>
+    );
+  },
+  argTypes: {
+    background: {
+      control: {
+        type: 'select',
+        description: 'Background color',
+        defaultValue: 'backgroundLevel3',
+      },
+      options: [
+        'backgroundLevel1',
+        'backgroundLevel2',
+        'backgroundLevel3',
+        'backgroundLevel4',
+      ],
+    },
+  },
+};
+
+export const LoadingTable = {
+  render: ({}) => {
+    return (
+      <Box width="500px" height="200px">
+        <Table
+          columns={columns}
+          data={data}
+          defaultSortingKey={'health'}
+          getRowId={getRowId}
+          status="loading"
+        >
+          <Table.SingleSelectableContent
+            rowHeight="h40"
+            separationLineVariant="backgroundLevel3"
+            backgroundVariant="backgroundLevel1"
+          />
+        </Table>
+      </Box>
+    );
+  },
+};
+
+export const ErrorTable = {
+  render: ({}) => {
+    return (
+      <Box width="50rem" height="200px">
+        <Table
+          columns={columns}
+          data={data}
+          defaultSortingKey={'health'}
+          getRowId={getRowId}
+          status="error"
+          entityName={{
+            en: { singular: 'user', plural: 'users' },
+            fr: { singular: 'utilisateur', plural: 'utilisateurs' },
+          }}
+        >
+          <Table.SingleSelectableContent
+            rowHeight="h40"
+            separationLineVariant="backgroundLevel4"
+            backgroundVariant="backgroundLevel1"
+            locale="en"
+          />
+        </Table>
+      </Box>
     );
   },
 };