pixel-react 1.9.8 → 1.10.0

package/src/components/StatusCard/StatusCard.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import './StatusCard.scss';
 import { CardProps } from './types';
 import Typography from '../Typography';
 import Icon from '../Icon';
+import './StatusCard.scss';
 
 const StatusCard: React.FC<CardProps> = ({
   icon,
@@ -15,7 +15,22 @@ const StatusCard: React.FC<CardProps> = ({
 }) => {
   const [isToggled, setIsToggled] = useState<boolean>(false);
 
+  const hideStatusText = [
+    'total defects',
+    'defect density',
+    'open defects',
+    'closed defects',
+    'quality score',
+  ];
+
+  const swapCountAndText = hideStatusText.includes(status.toLowerCase());
+
+  const redBackground = hideStatusText.includes(status.toLowerCase());
+
   const handleSelectStatus = (status: string) => {
+    if (hideStatusText.includes(status.toLowerCase())) {
+      return;
+    }
     setIsToggled(true);
     onSelectedStatus(status);
   };
@@ -26,10 +41,27 @@ const StatusCard: React.FC<CardProps> = ({
     }
   }, [resetToggle]);
 
+  const handleStaticCard = () => {
+    if (status.toLowerCase() === 'defect density') {
+      return (
+        <>
+          {count.toString().padStart(2, '0')}
+          <Typography fontSize="15px" fontWeight="semi-bold">
+            / Modules
+          </Typography>
+        </>
+      );
+    } else if (status.toLowerCase() === 'quality score') {
+      return `${parseFloat(count.toString()).toFixed(2)}%`;
+    } else {
+      return count.toString().padStart(2, '0');
+    }
+  };
+
   return (
     <div
       className={`ff-card-container ${status.toLowerCase()} ${
-        isToggled ? `toggled` : ''
+        isToggled ? 'toggled' : ''
       }`}
       style={style}
       onClick={() => handleSelectStatus(status)}
@@ -38,40 +70,62 @@ const StatusCard: React.FC<CardProps> = ({
         <div>
           <Icon name={icon} height={20} width={20} hoverEffect={false} />
         </div>
-        <Typography
-          fontWeight="semi-bold"
-          fontSize="10px"
-          textAlign="center"
-          lineHeight="15px"
-          className="ff-status-text"
-          as="div"
-        >
-          {status}
-        </Typography>
+        {!hideStatusText.includes(status.toLowerCase()) && (
+          <Typography
+            fontWeight="semi-bold"
+            fontSize="10px"
+            textAlign="center"
+            lineHeight="15px"
+            className="ff-status-text"
+            as="div"
+          >
+            {status.charAt(0).toUpperCase() + status.slice(1).toLowerCase()}
+          </Typography>
+        )}
       </div>
-      <div className="ff-content">
-        <Typography
-          fontWeight="semi-bold"
-          fontSize="24px"
-          className="ff-number"
-          lineHeight="36px"
-          color={isToggled ? 'var(--base-bg-color)' : ''}
-        >
-          {count}
-        </Typography>
-        <Typography
-          fontWeight="regular"
-          fontSize="10px"
-          className="ff-text"
-          lineHeight="15px"
-          color={
-            isToggled
-              ? 'var(--base-bg-color)'
-              : 'var(--ff-card-status-text-color)'
-          }
-        >
-          {text}
-        </Typography>
+      <div className={`ff-content ${redBackground ? 'red-background' : ''}`}>
+        {swapCountAndText ? (
+          <>
+            <Typography
+              fontWeight="semi-bold"
+              fontSize="10px"
+              className="ff-text"
+              lineHeight="15px"
+              color='var(--ff-chip-text-color)'
+            >
+              {text}
+            </Typography>
+            <Typography
+              fontWeight="semi-bold"
+              fontSize="24px"
+              className="ff-number"
+              lineHeight="36px"
+            >
+              {handleStaticCard()}
+            </Typography>
+          </>
+        ) : (
+          <>
+            <Typography
+              fontWeight="semi-bold"
+              fontSize="24px"
+              className="ff-number"
+              lineHeight="24px"
+              color={isToggled ? 'var(--base-bg-color)' : ''}
+            >
+              {count.toString().padStart(2, '0')}
+            </Typography>
+            <Typography
+              className="ff-text"
+              lineHeight="18px"
+              color={
+                isToggled ? 'var(--base-bg-color)' : 'var(--ff-chip-text-color)'
+              }
+            >
+              {text}
+            </Typography>
+          </>
+        )}
       </div>
     </div>
   );

package/src/components/StatusCard/types.ts

@@ -2,7 +2,7 @@ export interface CardProps {
   /** The icon to display in the card */
   icon: string;
   /** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
-  status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky' | 'PASSED' | 'FAIL' | 'WARNING' | 'SKIPPED' | 'FLAKY';
+  status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky' | 'Total Defects' | 'Defect Density' | 'Open Defects' | 'Closed Defects' | 'Quality Score';
   /** The number displayed in the card */
   count: number | string;
   /** The description text displayed at the bottom of the card */

package/src/components/Table/Table.tsx

@@ -31,7 +31,7 @@ const SortableRow = ({
 }: any) => {
   const { attributes, listeners, setNodeRef, transform, transition } =
     useSortable({
-      id: row.id,
+      id: row?._id || row?.id,
       disabled: row.disabled,
     });
 
@@ -242,4 +242,4 @@ const Table = ({
   );
 };
 
-export default Table;
+export default Table;

package/src/components/TableTree/Components/TableBody.tsx

@@ -19,7 +19,7 @@ const TableBody = React.memo(
         {flattenedTreeData?.map((node, index) => {
           return (
             <TableRow
-              key={node.searchKey}
+              key={node.key}
               node={node}
               columnsData={columnsData}
               selected={selected}
@@ -27,6 +27,7 @@ const TableBody = React.memo(
               onRowClick={onRowClick}
               onToggleExpand={(node) => onToggleExpand(node, index)}
               onCheckBoxChange={onCheckBoxChange}
+              index={index}
             />
           );
         })}

package/src/components/TableTree/Components/TableCell.tsx

@@ -5,6 +5,7 @@ import { TableCellProps } from '../types';
 import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
 import React from 'react';
 import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
+import LabelEditTextField from '../../LabelEditTextField';
 
 const renderSpaces = (
   level: number,
@@ -43,6 +44,7 @@ const TableCell = React.memo(
     select,
     onCheckBoxChange,
     onToggleExpand,
+    index,
   }: TableCellProps) => (
     <td className={`${col.isTree && node.folder ? 'folder' : ''}`}>
       {col.isTree &&
@@ -69,28 +71,37 @@ const TableCell = React.memo(
             col.isTree && node.folder ? 'folder' : ''
           }`}
         >
-          {col.isTree && select === 'checkbox' && (
-            <Checkbox
-              checked={node?.checked || false}
-              partial={node?.checked === 'partial'}
-              onChange={(e) => onCheckBoxChange(e, node)}
-            />
+          {!node?.showInput && (
+            <>
+              {col.isTree && select === 'checkbox' && (
+                <Checkbox
+                  checked={node?.checked || false}
+                  partial={node?.checked === 'partial'}
+                  onChange={(e) => onCheckBoxChange(e, node)}
+                />
+              )}
+              {col.isTree && select === 'radio' && (
+                <RadioButton
+                  name={node.title}
+                  checked={selected.includes(node.id)}
+                  value={node.id}
+                  onChange={(e) => onCheckBoxChange(e, node)}
+                />
+              )}
+            </>
           )}
-          {col.isTree && select === 'radio' && (
-            <RadioButton
-              name={node.title}
-              checked={selected.includes(node.id)}
-              value={node.id}
-              onChange={(e) => onCheckBoxChange(e, node)}
-            />
+          {node.showInput && col.isTree ? (
+            <LabelEditTextField isOpen={true} />
+          ) : (
+            <span className="tree-table-td-content-text">
+              {prepareData(node, col)}
+            </span>
           )}
-          <span className="tree-table-td-content-text">
-            {prepareData(node, col)}
-          </span>
         </span>
       </div>
-      {col.actions && (
-        <div className="table-tree-row-action">{col.actions(node)}</div>
+
+      {col.actions && !node?.showInput && (
+        <div className="table-tree-row-action">{col.actions(node, index)}</div>
       )}
     </td>
   )

package/src/components/TableTree/Components/TableRow.tsx

@@ -11,6 +11,7 @@ const TableRow = React.memo(
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
+    index,
   }: TableRowProps) => (
     <tr
       data-level={node.hierarchy}
@@ -26,6 +27,7 @@ const TableRow = React.memo(
           select={select}
           onCheckBoxChange={onCheckBoxChange}
           onToggleExpand={onToggleExpand}
+          index={index}
         />
       ))}
     </tr>

package/src/components/TableTree/types.ts

@@ -10,6 +10,7 @@ export interface TableCellProps {
   select: string | null;
   onCheckBoxChange: (e: any, node: string[] | any) => void;
   onToggleExpand: (node: any) => void;
+  index: number;
 }
 
 export interface TableHeadProps {
@@ -34,6 +35,7 @@ export interface TableRowProps {
   onRowClick: (e: any, node: any) => void;
   onToggleExpand: (node: TreeNode) => void;
   onCheckBoxChange: (e: any, node: string[] | any) => void;
+  index: number;
 }
 
 export interface Column {

package/src/components/TextArea/Textarea.scss

@@ -23,17 +23,16 @@
     outline: none;
     line-height: 18px;
     font-weight: 400;
-    overflow: auto; 
-    &--resize {
-      resize: none;
-    }
+    overflow: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 
     ::-webkit-scrollbar {
       display: none;
     }
-
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+    &--resize {
+      resize: none;
+    }
 
     &:disabled {
       opacity: 0.5;

package/src/utils/handleTreeNodeSelect/handleTreeNodeSelect.ts

@@ -47,13 +47,10 @@ export const handleTreeNodeSect = (
     }
   }
 
-  // Find the target node and update its state
   const targetNode = nodesMap.get(key);
   if (targetNode) {
     targetNode.checked = isChecked;
-    // Update children recursively
     updateChildren(key, isChecked);
-    // Update parents recursively
     updateParents(key);
   }