akeneo · tseho · Apr 8, 2024 · Apr 8, 2024
diff --git a/...ual-tests-renders-components-table-warning-and-locked-rows-correctly-1-snap.png b/...ual-tests-renders-components-table-warning-and-locked-rows-correctly-1-snap.png
diff --git a/front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx b/front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx
@@ -161,11 +161,9 @@ const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
       <ProgressBarContainer ref={forwardedRef} {...rest}>
         {(title || progressLabel) && (
           <Header>
-            {title && (
-              <Title title={title} id={labelId} htmlFor={progressBarId}>
-                {title}
-              </Title>
-            )}
+            <Title title={title} id={labelId} htmlFor={progressBarId}>
+              {title}
+            </Title>
             {progressLabel && <ProgressLabel title={progressLabel}>{progressLabel}</ProgressLabel>}
           </Header>
         )}

diff --git a/front-packages/akeneo-design-system/src/components/SwitcherButton/SwitcherButton.tsx b/front-packages/akeneo-design-system/src/components/SwitcherButton/SwitcherButton.tsx
@@ -112,7 +112,7 @@ const SwitcherButton = forwardRef<HTMLDivElement, SwitcherButtonProps>(
 
     return (
       <SwitcherButtonContainer ref={forwardedRef} {...rest}>
-        <LabelAndValueContainer id={buttonId} onClick={onClick} $inline={inline}>
+        <LabelAndValueContainer type="button" id={buttonId} onClick={onClick} $inline={inline}>
           <Label htmlFor={buttonId} $inline={inline}>
             {label ? (inline ? `${label}:` : label) : ''}
           </Label>

diff --git a/front-packages/akeneo-design-system/src/components/Table/Table.stories.mdx b/front-packages/akeneo-design-system/src/components/Table/Table.stories.mdx
@@ -487,14 +487,14 @@ If you want your `Table.Header` to stay on top when scrolling in the Table, just
   </Story>
 </Canvas>
 
-## Table with warning rows
+## Table with warning and locked rows
 
 <Canvas>
-    <Story name="Warning rows">
+    <Story name="Warning and locked rows">
         {args => {
             return (
                 <Scrollable height={250}>
-                    <Table hasWarningRows={true}>
+                    <Table hasWarningRows={true} hasLockedRows={true}>
                         <Table.Header sticky={0}>
                             <Table.HeaderCell>Name</Table.HeaderCell>
                             <Table.HeaderCell>Family</Table.HeaderCell>
@@ -504,6 +504,20 @@ If you want your `Table.Header` to stay on top when scrolling in the Table, just
                             <Table.HeaderCell>Actions</Table.HeaderCell>
                         </Table.Header>
                         <Table.Body>
+                            <Table.Row level="tertiary">
+                                <Table.Cell rowTitle={args.displayRowTitle}>Giant panda</Table.Cell>
+                                <Table.Cell>Ursidae</Table.Cell>
+                                <Table.Cell>Carnivora</Table.Cell>
+                                <Table.Cell>Ursus</Table.Cell>
+                                <Table.Cell>
+                                    <Badge level="warning">vu</Badge>
+                                </Table.Cell>
+                                <Table.ActionCell>
+                                    <Button level="primary" ghost>
+                                        Button
+                                    </Button>
+                                </Table.ActionCell>
+                            </Table.Row>
                             <Table.Row level="warning">
                                 <Table.Cell rowTitle={args.displayRowTitle}>Giant panda</Table.Cell>
                                 <Table.Cell>Ursidae</Table.Cell>

diff --git a/front-packages/akeneo-design-system/src/components/Table/Table.tsx b/front-packages/akeneo-design-system/src/components/Table/Table.tsx
@@ -27,6 +27,11 @@ type TableProps = Override<
      */
     hasWarningRows?: boolean;
 
+    /**
+     * Define if the table has some locked rows.
+     */
+    hasLockedRows?: boolean;
+
     /**
      * Define if the checkbox should be always displayed or displayed on hover.
      * This props should be true when one element is checked.
@@ -66,15 +71,16 @@ type TableProps = Override<
 const Table = ({
   isSelectable = false,
   hasWarningRows = false,
+  hasLockedRows = false,
   displayCheckbox = false,
   isDragAndDroppable = false,
   onReorder = undefined,
   children,
   ...rest
 }: TableProps) => {
   const providerValue = useMemo(
-    () => ({isSelectable, hasWarningRows, displayCheckbox, isDragAndDroppable, onReorder}),
-    [isSelectable, hasWarningRows, displayCheckbox, isDragAndDroppable, onReorder]
+    () => ({isSelectable, hasWarningRows, hasLockedRows, displayCheckbox, isDragAndDroppable, onReorder}),
+    [isSelectable, hasWarningRows, hasLockedRows, displayCheckbox, isDragAndDroppable, onReorder]
   );
 
   return (

diff --git a/front-packages/akeneo-design-system/src/components/Table/TableContext.ts b/front-packages/akeneo-design-system/src/components/Table/TableContext.ts
@@ -3,6 +3,7 @@ import {createContext} from 'react';
 type TableContextType = {
   isSelectable: boolean;
   hasWarningRows: boolean;
+  hasLockedRows: boolean;
   displayCheckbox: boolean;
   isDragAndDroppable: boolean;
   onReorder: ((reorderedIndices: number[]) => void) | undefined;
@@ -11,6 +12,7 @@ type TableContextType = {
 const TableContext = createContext<TableContextType>({
   isSelectable: false,
   hasWarningRows: false,
+  hasLockedRows: false,
   displayCheckbox: false,
   isDragAndDroppable: false,
   onReorder: undefined,

diff --git a/front-packages/akeneo-design-system/src/components/Table/TableHeader/TableHeader.tsx b/front-packages/akeneo-design-system/src/components/Table/TableHeader/TableHeader.tsx
@@ -23,6 +23,10 @@ const HasWarningColumn = styled.th`
   width: 20px;
   background: linear-gradient(to top, ${getColor('grey', 120)} 1px, ${getColor('white')} 0px);
 `;
+const HasLockedColumn = styled.th`
+  width: 20px;
+  background: linear-gradient(to top, ${getColor('grey', 120)} 1px, ${getColor('white')} 0px);
+`;
 const OrderColumn = styled.th`
   width: 40px;
   background: linear-gradient(to top, ${getColor('grey', 120)} 1px, ${getColor('white')} 0px);
@@ -42,7 +46,7 @@ type TableHeaderProps = {
 
 const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(
   ({children, sticky, ...rest}: TableHeaderProps, forwardedRef: Ref<HTMLTableSectionElement>) => {
-    const {isSelectable, isDragAndDroppable, hasWarningRows} = React.useContext(TableContext);
+    const {isSelectable, isDragAndDroppable, hasWarningRows, hasLockedRows} = React.useContext(TableContext);
 
     return (
       <TableHead sticky={sticky} ref={forwardedRef}>
@@ -52,6 +56,7 @@ const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(
           {hasWarningRows && <HasWarningColumn />}
           {isDragAndDroppable && <OrderColumn />}
           {children}
+          {hasLockedRows && <HasLockedColumn />}
         </tr>
       </TableHead>
     );

diff --git a/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.tsx b/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.tsx
@@ -14,10 +14,10 @@ import {Checkbox} from '../../../components';
 import {Override} from '../../../shared';
 import {TableContext} from '../TableContext';
 import {TableCell} from '../TableCell/TableCell';
-import {RowIcon, DangerIcon} from '../../../icons';
+import {RowIcon, DangerIcon, LockIcon} from '../../../icons';
 import {PlaceholderPosition, usePlaceholderPosition} from '../../../hooks/usePlaceholderPosition';
 
-type Level = 'warning';
+type Level = 'warning' | 'tertiary';
 
 const RowContainer = styled.tr<
   {
@@ -78,15 +78,22 @@ const RowContainer = styled.tr<
   }
 
   ${({level}) =>
-    level === 'warning' &&
-    css`
-      > td {
-        :first-child {
-          padding: 0 0 0 5px;
-        }
-        background-color: ${getColor('yellow', 10)};
-      }
-    `};
+    level === 'warning'
+      ? css`
+          > td {
+            :first-child {
+              padding: 0 0 0 5px;
+            }
+            background-color: ${getColor('yellow', 10)};
+          }
+        `
+      : level === 'tertiary' &&
+        css`
+          > td {
+            background-color: ${getColor('grey', 20)};
+            color: ${getColor('grey', 120)};
+          }
+        `};
 `;
 
 const CheckboxContainer = styled.td<{isVisible: boolean}>`
@@ -112,6 +119,15 @@ const HandleCell = styled(TableCell)`
   }
 `;
 
+const getIcon = (level: Level) => {
+  switch (level) {
+    case 'warning':
+      return <WarningIcon />;
+    case 'tertiary':
+      return <LockIcon />;
+  }
+};
+
 const WarningIcon = styled(DangerIcon)`
   color: ${getColor('yellow', 120)};
 `;
@@ -180,7 +196,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
     const [placeholderPosition, placeholderDragEnter, placeholderDragLeave, placeholderDragEnd] =
       usePlaceholderPosition(rowIndex);
 
-    const {isSelectable, displayCheckbox, isDragAndDroppable, hasWarningRows} = useContext(TableContext);
+    const {isSelectable, displayCheckbox, isDragAndDroppable, hasWarningRows, hasLockedRows} = useContext(TableContext);
     if (isSelectable && (undefined === isSelected || undefined === onSelectToggle)) {
       throw Error('A row in a selectable table should have the prop "isSelected" and "onSelectToggle"');
     }
@@ -240,8 +256,17 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
             <RowIcon size={16} />
           </HandleCell>
         )}
-        {hasWarningRows && <TableCell>{level === 'warning' && <WarningIcon size={16} />}</TableCell>}
+        {hasWarningRows && (
+          <TableCell>
+            {level === 'warning' && React.cloneElement(getIcon(level), {size: 16, 'data-testid': 'warning-icon'})}
+          </TableCell>
+        )}
         {children}
+        {hasLockedRows && (
+          <TableCell>
+            {level === 'tertiary' && React.cloneElement(getIcon(level), {size: 16, 'data-testid': 'lock-icon'})}
+          </TableCell>
+        )}
       </RowContainer>
     );
   }

diff --git a/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.unit.tsx b/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.unit.tsx
@@ -101,3 +101,33 @@ test('Table.Row supports ...rest props', () => {
 
   expect(screen.getByTestId('my_value')).toBeInTheDocument();
 });
+
+test('it renders warning icon when row has a warning', () => {
+  render(
+    <Table hasWarningRows>
+      <Table.Body>
+        <Table.Row level="warning">
+          <Table.Cell>A value</Table.Cell>
+          <Table.Cell>Another value</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  );
+
+  expect(screen.getByTestId('warning-icon')).toBeInTheDocument();
+});
+
+test('it renders lock icon when row is locked', () => {
+  render(
+    <Table hasLockedRows>
+      <Table.Body>
+        <Table.Row level="tertiary">
+          <Table.Cell>A value</Table.Cell>
+          <Table.Cell>Another value</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  );
+
+  expect(screen.getByTestId('lock-icon')).toBeInTheDocument();
+});
diff --git a/front-packages/akeneo-design-system/src/icons/ChecklistIcon.tsx b/front-packages/akeneo-design-system/src/icons/ChecklistIcon.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import {IconProps} from './IconProps';
+
+const ChecklistIcon = ({title, size = 24, color = 'currentColor', ...props}: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} {...props}>
+    {title && <title>{title}</title>}
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
+      <path
+        d="M9.48723 4.21967C9.78012 4.51256 9.78012 4.98744 9.48723 5.28033L6.0564 8.71115C5.37299 9.39457 4.26495 9.39457 3.58153 8.71115L2.21967 7.3493C1.92678 7.0564 1.92678 6.58153 2.21967 6.28864C2.51256 5.99574 2.98744 5.99574 3.28033 6.28864L4.64219 7.65049C4.73982 7.74812 4.89811 7.74813 4.99574 7.65049L8.42657 4.21967C8.71946 3.92678 9.19433 3.92678 9.48723 4.21967ZM12 6.68066C12 6.40452 12.2239 6.18066 12.5 6.18066H21.5C21.7761 6.18066 22 6.40452 22 6.68066C22 6.95681 21.7761 7.18066 21.5 7.18066H12.5C12.2239 7.18066 12 6.95681 12 6.68066ZM10 12.6807C10 12.4045 10.2239 12.1807 10.5 12.1807H21.5C21.7761 12.1807 22 12.4045 22 12.6807C22 12.9568 21.7761 13.1807 21.5 13.1807H10.5C10.2239 13.1807 10 12.9568 10 12.6807ZM10 18.6807C10 18.4045 10.2239 18.1807 10.5 18.1807H21.5C21.7761 18.1807 22 18.4045 22 18.6807C22 18.9568 21.7761 19.1807 21.5 19.1807H10.5C10.2239 19.1807 10 18.9568 10 18.6807ZM6.47409 18.681C6.47409 17.9954 5.91831 17.4396 5.23271 17.4396C4.54712 17.4396 3.99133 17.9954 3.99133 18.681C3.99133 19.3666 4.54712 19.9224 5.23271 19.9224C5.91831 19.9224 6.47409 19.3666 6.47409 18.681ZM6.47409 12.6807C6.47409 11.9951 5.91831 11.4393 5.23271 11.4393C4.54712 11.4393 3.99133 11.9951 3.99133 12.6807C3.99133 13.3663 4.54712 13.922 5.23271 13.922C5.91831 13.922 6.47409 13.3663 6.47409 12.6807Z"
+        stroke={color}
+      />
+    </g>
+  </svg>
+);
+
+export {ChecklistIcon};
diff --git a/front-packages/akeneo-design-system/src/icons/WorkflowIcon.tsx b/front-packages/akeneo-design-system/src/icons/WorkflowIcon.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import {IconProps} from './IconProps';
+
+const WorkflowIcon = ({title, size = 24, color = 'currentColor', ...props}: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.1379 5.49999H8V4.49999H17.1379C19.2709 4.49999 21 6.29085 21 8.49999C21 10.7091 19.2709 12.5 17.1379 12.5H14V11.5H17.1379C18.7377 11.5 20.0345 10.1568 20.0345 8.49999C20.0345 6.84313 18.7377 5.49999 17.1379 5.49999Z"
+      fill={color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.88571 18H19.3408L19.83 18.5L19.3408 19H5.88571C3.73969 19 2 17.7091 2 15.5C2 13.2908 3.73969 11.5 5.88571 11.5H8V12.5H5.88571C4.2762 12.5 2.97143 13.8431 2.97143 15.5C2.97143 17.1568 4.2762 18 5.88571 18Z"
+      fill={color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7 3H3L3 7H7V3ZM3 2C2.44772 2 2 2.44772 2 3V7C2 7.55228 2.44772 8 3 8H7C7.55228 8 8 7.55228 8 7V3C8 2.44772 7.55228 2 7 2H3Z"
+      fill={color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13 10.2H9V13.8H13V10.2ZM9 9C8.44772 9 8 9.53726 8 10.2V13.8C8 14.4627 8.44772 15 9 15H13C13.5523 15 14 14.4627 14 13.8V10.2C14 9.53726 13.5523 9 13 9H9Z"
+      fill={color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20.8731 18.1966C21.0423 18.3695 21.0423 18.6305 20.8731 18.8034L18.8731 20.8476C18.6893 21.0355 18.3733 21.0519 18.1672 20.8843C17.9611 20.7168 17.9431 20.4286 18.1269 20.2407L19.83 18.5L18.1269 16.7593C17.9431 16.5714 17.9611 16.2832 18.1672 16.1157C18.3733 15.9481 18.6893 15.9645 18.8731 16.1524L20.8731 18.1966Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export {WorkflowIcon};
diff --git a/front-packages/akeneo-design-system/src/icons/index.ts b/front-packages/akeneo-design-system/src/icons/index.ts
@@ -51,6 +51,7 @@ export * from './DownloadIcon';
 export * from './DragDropIcon';
 export * from './EditIcon';
 export * from './EntityIcon';
+export * from './ChecklistIcon';
 export * from './EntityMultiIcon';
 export * from './EraseIcon';
 export * from './ExpandIcon';
@@ -119,3 +120,4 @@ export * from './UserIcon';
 export * from './ValueIcon';
 export * from './ViewIcon';
 export * from './WaveIcon';
+export * from './WorkflowIcon';