pixel-react 1.9.6 → 1.9.7

package/src/components/SequentialConnectingBranch/components/DatasetTooltip/types.ts

@@ -0,0 +1,9 @@
+export interface DataSetTooltipProps {
+  datSetToolTip: DataSetToolTip;
+}
+
+export interface DataSetToolTip {
+  testDataSetName: string;
+  globalVariableSetName: string;
+  peVariableSetName: string;
+}

package/src/components/SequentialConnectingBranch/types.ts

@@ -1,32 +1,38 @@
 import { Option } from '../Select/types';
 
 export interface SequentialConnectingBranchProps {
-  machineInstances?: ExecutionContext[] | {}[];
+  machineInstances: ExecutionContext[] | {}[];
   machineColumnWidth?: number;
   machineColumnCount?: number;
   selectedMachine?: Option;
   machineOptionsList?: Option[];
   onHandleSelect?: (option: Option) => void;
   onAddBrowserInstance?: (modalId: string) => void;
-  onUpdateAddBrowserInstance: (
+  onUpdateAddBrowserInstance?: (
     modalId: string,
     machineInstance: ExecutionContext
   ) => void;
   onDeleteBrowserInstance?: (id: string, runCount: number) => void;
   onAddRunBrowserInstance?: (machineInstanceId: string) => void;
   onDeleteMachineInstance?: () => void;
-  onUpdateDataSetList: (
+  onUpdateDataSetList?: (
     id: string,
-    dataSetObject: dataSetValues,
+    dataSetObject?: dataSetValues,
     isInstance?: boolean,
     noOfRuns?: number,
     machineInstanceId?: string
   ) => void;
-  dataSetValues: dataSetValues;
+  dataSetValues?: dataSetValues;
   addInstanceLabel?: string;
   scriptType?: string;
   projectType?: string;
   readOnly?: boolean;
+  integrationInstance?: IntegrationInstance
+}
+
+export interface IntegrationInstance {
+  usename: string,
+  accessKey: string
 }
 
 // Type for machine information
@@ -47,6 +53,7 @@ export interface ExecutionContext {
   machineInstanceId: string;
   clientId: string;
   numberOfRuns: number;
+  runCount: number;
   executionEnv?: 'Local'; // Change to specific enum if more environments exist
   browserName?: 'Local' | 'mac' | 'android' | 'Google Chrome';
   browserVersion: string;
@@ -55,12 +62,19 @@ export interface ExecutionContext {
   deviceInfo: DeviceInfo[];
   headless: boolean;
   peVariableSetId: string;
+  testDataSetName: string;
+  globalVariableSetName: string;
+  peVariableSetName: string;
   globalVariableSetId: string;
   testDataSetId: string;
+  integrationInstance: IntegrationInstance;
 }
 
 export interface dataSetValues {
   peVariableSetId: string;
   globalVariableSetId: string;
   testDataSetId: string;
+  testDataSetName: string;
+  globalVariableSetName: string;
+  peVariableSetName: string;
 }

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

@@ -16,7 +16,7 @@ const TableBody = React.memo(
     checkEmpty(flattenedTreeData) ? null : (
       <tbody className="ff-table-tree-body">
         <tr id="ff-table-tree-first-node" />
-        {flattenedTreeData?.map((node) => {
+        {flattenedTreeData?.map((node, index) => {
           return (
             <TableRow
               key={node.searchKey}
@@ -25,7 +25,7 @@ const TableBody = React.memo(
               selected={selected}
               select={select}
               onRowClick={onRowClick}
-              onToggleExpand={onToggleExpand}
+              onToggleExpand={(node) => onToggleExpand(node, index)}
               onCheckBoxChange={onCheckBoxChange}
             />
           );

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

@@ -44,7 +44,7 @@ const TableCell = React.memo(
     onCheckBoxChange,
     onToggleExpand,
   }: TableCellProps) => (
-    <td>
+    <td className={`${col.isTree && node.folder ? 'folder' : ''}`}>
       {col.isTree &&
         renderSpaces(node.hierarchy + 1, node.parentSiblings, node.last)}
       <div className="tree-title-container">
@@ -55,10 +55,20 @@ const TableCell = React.memo(
             } ${node.container ? '' : 'no-folder'}`}
             onClick={() => onToggleExpand(node)}
           >
-            {node.container && node?.totalResourceCount > 0 && <Arrow />}
+            {node.container &&
+              node?.resourceCount + node?.subContainerCount > 0 && (
+                <span onClick={() => onToggleExpand(node)}>
+                  {' '}
+                  <Arrow />
+                </span>
+              )}
           </span>
         )}
-        <span className="tree-table-td-content">
+        <span
+          className={`tree-table-td-content ${
+            col.isTree && node.folder ? 'folder' : ''
+          }`}
+        >
           {col.isTree && select === 'checkbox' && (
             <Checkbox
               checked={selected.includes(node.id)}
@@ -73,7 +83,9 @@ const TableCell = React.memo(
               onChange={(e) => onCheckBoxChange(e, node)}
             />
           )}
-          {prepareData(node, col)}
+          <span className="tree-table-td-content-text">
+            {prepareData(node, col)}
+          </span>
         </span>
       </div>
       {col.actions && (

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

@@ -10,8 +10,10 @@ const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
   return (
     <thead>
       <tr>
-        {columnsData.map(({ name }) => (
-          <th key={name}>{name}</th>
+        {columnsData.map(({ name, width }) => (
+          <th key={name} style={{ width: width }}>
+            {name}
+          </th>
         ))}
       </tr>
       {hasDefaultValues && (
@@ -19,7 +21,7 @@ const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
           {columnsData.map(({ defaultValue, defaultActions }, index) => (
             <td key={index}>
               {defaultValue && (
-                <span className="">
+                <span className="tree-table-default-content">
                   {defaultValue}
                   {defaultActions && (
                     <div className="table-tree-row-action">

package/src/components/TableTree/TableTree.scss

@@ -99,107 +99,144 @@
 
 .tree-table-wrap {
   width: 100%;
+  padding-left: 4px; // padding size need to check
   overflow: hidden;
   overflow-x: auto;
 }
 
 .table-scrollable {
-  max-height: var(--table-height); /* Adjust height as needed */
+  height: var(--table-height); /* Adjust height as needed */
   overflow-y: auto;
+  position: relative;
 }
 
 .ff-table-tree-body {
   overflow: scroll;
 }
 
+tr {
+  &:hover {
+    background-color: var(--hover-color);
+  }
+}
+
 .tree-table {
-  border: 1px solid #f1f1f1;
+  // border: 1px solid #f1f1f1;
   table-layout: fixed;
   width: 100%;
   border-collapse: collapse;
   overflow: scroll;
 
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+
   tr {
+    background-color: var(--base-bg-color);
     .table-tree-row-action {
       display: none;
     }
 
-    &:hover {
-      background-color: var(--hover-color);
-      td {
-        &:first-child {
-          background-color: var(--hover-color);
-        }
-      }
+    // &:hover {
+    //   background-color: var(--hover-color);
+    //   td {
+    //     &:first-child {
+    //       background-color: var(--hover-color);
+    //     }
+    //   }
 
-      .table-tree-row-action {
-        display: inline-flex;
-        align-items: center;
-      }
+    .table-tree-row-action {
+      display: inline-flex;
+      align-items: center;
     }
+  }
 
-    &::after {
-      content: '';
-      display: block;
-      visibility: hidden;
-      clear: both;
-    }
+  &::after {
+    content: '';
+    display: block;
+    visibility: hidden;
+    clear: both;
   }
+}
 
-  th,
-  td {
-    text-align: left;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+th,
+td {
+  text-align: left;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+th {
+  color: var(--brand-color);
+  background: var(--slider-table-color);
+  font-size: 13px;
+  width: 400px;
+  height: 32px;
+  box-sizing: border-box;
+
+  &:first-child {
+    width: 400px !important;
+    position: sticky;
+    left: 0;
   }
+}
 
-  th {
-    color: var(--brand-color);
-    background: var(--slider-table-color);
-    font-size: 13px;
-    width: 400px;
+td {
+  font-size: 14px;
+  color: var(--brand-color);
+  height: 18px;
 
-    &:first-child {
-      position: sticky;
-      left: 0;
+  &:first-child {
+    overflow: initial;
+    position: sticky;
+    left: 0;
+    background-color: white;
+
+    &:hover {
+      background-color: var(--hover-color);
     }
-  }
 
-  td {
-    font-size: 14px;
-    color: var(--brand-color);
-    height: 18px;
+    .tree-table-default-content {
+      margin-left: 8px;
+    }
 
-    &:first-child {
-      overflow: initial;
-      position: sticky;
-      left: 0;
-      background-color: white;
+    .tree-table-td-content {
+      padding-left: 4px;
 
-      &:hover {
-        background-color: var(--hover-color);
+      .tree-table-td-content-text {
+        margin-left: 4px;
       }
     }
   }
+  &.folder {
+    height: 28px;
+  }
 }
 
 .tree-table-td-content {
   display: inline-flex;
   align-items: center;
-  padding-left: 8px;
   font-size: 12px;
   font-family: 'Poppins', sans-serif;
+
+  &.folder {
+    font-weight: 600;
+  }
 }
 
 .tree-row-expanded,
 .tree-row-collapsed {
-  svg {
-    height: 12px;
-    width: 12px;
+  span {
+    svg {
+      height: 12px;
+      width: 12px;
 
-    path {
-      fill: var(--brand-color);
+      path {
+        fill: var(--brand-color);
+      }
     }
   }
 }

package/src/components/TableTree/TableTree.stories.tsx

@@ -37,7 +37,7 @@ const colData = [
   {
     name: 'Module Path',
     accessor: 'createdBy',
-    width: '200px',
+    width: '300px',
     isClickable: true,
   },
 
@@ -109,8 +109,8 @@ export const Default: Story = {
     loadMore: (node) => {
       console.log(node);
     },
-    onExpand: (isExpand, node) => {
-      console.log(isExpand, node);
+    onExpand: (node, index) => {
+      console.log(node, index);
     },
     select: 'checkbox',
     onChange: (node: string[]) => {
@@ -130,8 +130,8 @@ export const ControlledCheckBox: Story = {
     const [selected, setSelected] = useState<string[]>([]);
     return (
       <TableTree
-        onExpand={(isExpand, node) => {
-          console.log(isExpand, node);
+        onExpand={(node, index) => {
+          console.log(node, index);
         }}
         select="checkbox"
         onChange={(e, nodes: string[]) => {
@@ -146,6 +146,7 @@ export const ControlledCheckBox: Story = {
         loadMore={(direction) => {
           console.log(direction, '-------------------');
         }}
+        tableBorder="1px solid #f1f1f1"
       />
     );
   },
@@ -155,8 +156,8 @@ export const ControlledRadio: Story = {
     const [selected, setSelected] = useState<string[]>([]);
     return (
       <TableTree
-        onExpand={(isExpand, node) => {
-          console.log(isExpand, node);
+        onExpand={(node, index) => {
+          console.log(node, index);
         }}
         select="radio"
         onChange={(nodes: string[]) => {

package/src/components/TableTree/TableTree.tsx

@@ -1,10 +1,11 @@
-import React, { useCallback, memo, useRef } from 'react';
+import React, { useCallback, memo } from 'react';
 import './TableTree.scss';
 import { TreeTableProps } from './types';
 import TableHead from './Components/TableHead';
 import TableBody from './Components/TableBody';
 import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 import functionCheck from '../../utils/functionCheck/functionCheck';
+import { TreeNodeProps } from '../../ComponentProps/TreeNodeProps';
 
 const TreeTable: React.FC<TreeTableProps> = ({
   treeData,
@@ -15,14 +16,15 @@ const TreeTable: React.FC<TreeTableProps> = ({
   onClick,
   onExpand,
   loadMore = () => {},
+  tableBorder,
   height = 'auto',
 }) => {
-  const treeRef = useRef(null);
+  // const treeRef = useRef(null);
   useIntersectionObserver(
     ['ff-table-tree-last-node', 'ff-table-tree-first-node'],
     {
-      root: treeRef?.current || null,
-      rootMargin: '0px',
+      root: document.getElementById('ff-table-tree-scroll-container'),
+      rootMargin: '8px',
       threshold: 0.1,
       onIntersect: (entry) => {
         if (entry.isIntersecting) {
@@ -40,7 +42,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
   );
 
   const handleToggleExpand = useCallback(
-    (node: any) => onExpand?.(node),
+    (node: TreeNodeProps, index: number) => onExpand?.(node, index),
     [onExpand]
   );
 
@@ -61,10 +63,11 @@ const TreeTable: React.FC<TreeTableProps> = ({
       <div
         className="table-scrollable"
         id="ff-table-tree-scroll-container"
-        ref={treeRef}
+        // ref={treeRef}
         style={
           {
             '--table-height': `${height !== 'auto' ? height + 'px' : height}`,
+            border: tableBorder,
           } as React.CSSProperties
         }
       >

package/src/components/TableTree/data.ts

@@ -133,7 +133,7 @@ const data = [
     totalResourceCount: 4,
     totalProjectElementCount: 0,
     totalSharedElementCount: 0,
-    container: false,
+    container: true,
     localDelete: false,
     defaultEntity: false,
     lastResource: true,

package/src/components/TableTree/types.ts

@@ -22,7 +22,7 @@ export interface TableBodyProps {
   selected: string[];
   select: string | null;
   onRowClick: (e: any, node: any) => void;
-  onToggleExpand: (node: any) => void;
+  onToggleExpand: (node: TreeNode, _index: number) => void;
   onCheckBoxChange: (e: any, node: string[] | any) => void;
 }
 
@@ -32,7 +32,7 @@ export interface TableRowProps {
   selected: string[];
   select: string | null;
   onRowClick: (e: any, node: any) => void;
-  onToggleExpand: (node: any) => void;
+  onToggleExpand: (node: TreeNode) => void;
   onCheckBoxChange: (e: any, node: string[] | any) => void;
 }
 
@@ -55,7 +55,8 @@ export interface TreeTableProps {
   select?: 'radio' | 'checkbox' | 'none';
   onChange?: (e: any, node: string[] | any) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
-  onExpand?: (node: TreeNode) => void;
+  onExpand?: (node: TreeNode, _index: number) => void;
   loadMore?: (_direction?: string) => void;
+  tableBorder?: string;
   height?: number | string;
 }

package/src/components/Tabs/Tabs.scss

@@ -17,7 +17,7 @@
           position: relative;
           border: none;
           background: none;
-          padding: 0 4px;
+          padding: 0 8px;
           display: flex;
           flex-direction: column;
           gap: 4px;

package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx

@@ -44,6 +44,7 @@ export const Primary: Story = {
           osName: 'Windows 11 Home Single Language',
           osVersion: '10.0.22000',
           hostName: 'LAPTOP-T793RVQN',
+          iconName: 'chrome'
         },
         deviceInfo: [],
         headless: false,

package/src/utils/getSequentialPayload/getSequentialPayload.ts

@@ -9,7 +9,7 @@ export const getSequentialPayload = (
       return {
         ...rest,
         ...runLevel,
-        numberOfRuns: index + 1,
+        runCount: index + 1,
       };
     })
   );

package/src/utils/getSequentialPayload/types.ts

@@ -7,8 +7,11 @@ export interface OperatingSystemInfo {
 
 export interface RunLevelExecutionDataSet {
   peVariableSetId: string;
+  peVariableSetName: string;
   globalVariableSetId: string;
+  globalVariableSetName: string;
   testDataSetId: string;
+  testDataSetName: string;
 }
 
 export interface MachineExecutionInstance {
@@ -30,4 +33,7 @@ export interface SequentialMachineInstance
   peVariableSetId: string;
   globalVariableSetId: string;
   testDataSetId: string;
+  peVariableSetName: string;
+  globalVariableSetName: string;
+  testDataSetName: string;
 }