pixel-react 1.9.5 → 1.9.7

package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx

@@ -10,6 +10,8 @@ import Typography from '../../../Typography';
 import Button from '../../../Button';
 import './Branches.scss';
 import { MachineType } from '../../../MachineInputField/types';
+import Tooltip from '../../../Tooltip';
+import DataSetTooltip from '../DatasetTooltip/DataSetTooltip';
 
 const Branches = ({
   machineInstances,
@@ -163,13 +165,17 @@ const Branches = ({
       </div>
       {machineInstances?.map((machineInstance, index) => {
         const {
-          numberOfRuns = 'numberOfRuns' in machineInstance
-            ? machineInstance.numberOfRuns
+          runCount = 'runCount' in machineInstance
+            ? machineInstance.runCount
             : 0,
+          numberOfRuns = 0,
           machineInstanceId = '',
           peVariableSetId = '',
           globalVariableSetId = '',
           testDataSetId = '',
+          testDataSetName = '',
+          peVariableSetName = '',
+          globalVariableSetName = '',
         } = machineInstance as ExecutionContext;
         return (
           <Fragment key={ffid()}>
@@ -184,7 +190,7 @@ const Branches = ({
                   ></div>
                   <MachineInputField
                     width={`${machineColumnWidth}px`}
-                    runCount={numberOfRuns}
+                    runCount={runCount}
                     key={ffid()}
                     options={
                       getMachineLabelOptionList(
@@ -193,9 +199,7 @@ const Branches = ({
                       ) as MachineType[]
                     }
                     contentReverse={!evenRow}
-                    modalId={`${machineInstanceId}-runCount-${
-                      numberOfRuns - 1
-                    }`}
+                    modalId={`${machineInstanceId}-runCount-${runCount - 1}`}
                     onClick={() =>
                       onUpdateAddBrowserInstance(
                         `${machineInstanceId}-runCount-0`,
@@ -214,15 +218,18 @@ const Branches = ({
                     {hideDataSet && (
                       <>
                         <div
-                          id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
+                          id={`ff-sequential-branch-dataset-${machineInstanceId}-${runCount}`}
                           className="ff-dataset-list-branch"
                           onClick={() =>
                             onUpdateDataSetList(
-                              `ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
+                              `ff-sequential-branch-dataset-${machineInstanceId}-${runCount}`,
                               {
                                 peVariableSetId: peVariableSetId,
                                 globalVariableSetId: globalVariableSetId,
                                 testDataSetId: testDataSetId,
+                                testDataSetName: testDataSetName,
+                                globalVariableSetName: globalVariableSetName,
+                                peVariableSetName: peVariableSetName,
                               },
                               true,
                               numberOfRuns,
@@ -230,10 +237,24 @@ const Branches = ({
                             )
                           }
                         >
-                          <Icon
-                            name="datalist_icon"
-                            className="ff-connecting-icon"
-                          />
+                          <Tooltip
+                            placement="bottom"
+                            title={
+                              <DataSetTooltip
+                                datSetToolTip={{
+                                  peVariableSetName,
+                                  globalVariableSetName,
+                                  testDataSetName,
+                                }}
+                              />
+                            }
+                          >
+                            <Icon
+                              name="datalist_icon"
+                              className="ff-connecting-icon"
+                              hoverEffect
+                            />
+                          </Tooltip>
                           <Typography
                             className="ff-connecting-text"
                             color="var(--ff-connecting-branch-color)"
@@ -247,6 +268,7 @@ const Branches = ({
                           className="ff-connecting-icon"
                           onClick={() => onAddRunBrowser(machineInstanceId)}
                           color="var(--ff-connecting-branch-color)"
+                          hoverEffect
                         />
                         <Typography
                           className="ff-connecting-text"
@@ -256,14 +278,17 @@ const Branches = ({
                         </Typography>
                       </>
                     )}
-                    <Icon
-                      name="delete"
-                      className="ff-connecting-delete-icon"
-                      onClick={() =>
-                        onDeleteBrowser(machineInstanceId, numberOfRuns)
-                      }
-                      color="var(--ff-connecting-branch-delete-color)"
-                    />
+                    {!readOnly && (
+                      <Icon
+                        name="delete"
+                        className="ff-connecting-delete-icon"
+                        onClick={() =>
+                          onDeleteBrowser(machineInstanceId, runCount)
+                        }
+                        color="var(--ff-connecting-branch-delete-color)"
+                        hoverEffect
+                      />
+                    )}
                   </div>
                 )}
               </div>

package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import Tooltip from '../../../Tooltip';
+import Typography from '../../../Typography';
+import { DataSetTooltipProps } from './types';
+
+const DataSetTooltip: FC<DataSetTooltipProps> = ({
+  datSetToolTip: {
+    globalVariableSetName = '',
+    peVariableSetName = '',
+    testDataSetName = '',
+  },
+}) => {
+  const toolTipTitleValue = {
+    'Test Data Set': testDataSetName,
+    'Global Variable Set': globalVariableSetName,
+    'Project Environment Set': peVariableSetName,
+  };
+
+  return (
+    <>
+      <Tooltip placement="bottom">
+        {Object.entries(toolTipTitleValue).map(([key, value], index) => (
+          <div key={index}>
+            <Typography
+              as="div"
+              fontSize={10}
+              lineHeight="15px"
+            >
+              {key}
+            </Typography>
+            <Typography as="div" lineHeight="18px">
+              {value}
+            </Typography>
+          </div>
+        ))}
+      </Tooltip>
+    </>
+  );
+};
+
+export default DataSetTooltip;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TableBodyProps } from '../types';
 import TableRow from './TableRow';
+import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
 
 const TableBody = React.memo(
   ({
@@ -11,26 +12,27 @@ const TableBody = React.memo(
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
-  }: TableBodyProps) => (
-    <tbody className="ff-table-tree-body">
-      <tr id="ff-table-tree-first-node" />
-      {flattenedTreeData?.map((node) => {
-        return (
-          <TableRow
-            key={node.searchKey}
-            node={node}
-            columnsData={columnsData}
-            selected={selected}
-            select={select}
-            onRowClick={onRowClick}
-            onToggleExpand={onToggleExpand}
-            onCheckBoxChange={onCheckBoxChange}
-          />
-        );
-      })}
-      <tr id="ff-table-tree-last-node" />
-    </tbody>
-  )
+  }: TableBodyProps) =>
+    checkEmpty(flattenedTreeData) ? null : (
+      <tbody className="ff-table-tree-body">
+        <tr id="ff-table-tree-first-node" />
+        {flattenedTreeData?.map((node, index) => {
+          return (
+            <TableRow
+              key={node.searchKey}
+              node={node}
+              columnsData={columnsData}
+              selected={selected}
+              select={select}
+              onRowClick={onRowClick}
+              onToggleExpand={(node) => onToggleExpand(node, index)}
+              onCheckBoxChange={onCheckBoxChange}
+            />
+          );
+        })}
+        <tr id="ff-table-tree-last-node" />
+      </tbody>
+    )
 );
 
 export default TableBody;

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

@@ -44,21 +44,31 @@ 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">
         {col.isTree && (
           <span
             className={`tree-table-space-block last-block  ${
-              node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
-            } ${node.folder ? '' : 'no-folder'}`}
+              node.expand ? 'tree-row-expanded' : 'tree-row-collapsed'
+            } ${node.container ? '' : 'no-folder'}`}
             onClick={() => onToggleExpand(node)}
           >
-            {node.folder && <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/Components/TableRow.tsx

@@ -5,15 +5,12 @@ import TableCell from './TableCell';
 const TableRow = React.memo(
   ({
     node,
-    // level,
     columnsData,
     selected,
     select,
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
-    // parentSiblings,
-    // isLast,
   }: TableRowProps) => (
     <tr
       data-level={node.hierarchy}

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[]) => {