pixel-react 1.5.9 → 1.6.1

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

@@ -20,6 +20,7 @@ const Branches = ({
   onAddBrowser,
   onDeleteBrowser,
   onAddRunBrowser,
+  onUpdateDataSetList,
 }: BranchesProps) => {
   const evenRow = rowIndex % 2 === 0;
   const lastMachineInstance = checkEmpty(
@@ -33,10 +34,12 @@ const Branches = ({
     if (
       currentBranch &&
       nextBranch &&
-      'id' in currentBranch &&
-      'id' in nextBranch
+      'machineInstanceId' in currentBranch &&
+      'machineInstanceId' in nextBranch
     ) {
-      return currentBranch.id === nextBranch.id ? 'dotted' : 'solid';
+      return currentBranch.machineInstanceId === nextBranch.machineInstanceId
+        ? 'dashed'
+        : 'solid';
     }
     return 'solid';
   };
@@ -94,7 +97,10 @@ const Branches = ({
           numberOfRuns = 'numberOfRuns' in machineInstance
             ? machineInstance.numberOfRuns
             : 0,
-          id = '',
+          machineInstanceId = '',
+          peVariableSetId = '',
+          globalVariableSetId = '',
+          testDataSetId = '',
         } = machineInstance as ExecutionContext;
         return (
           <Fragment key={ffid()}>
@@ -124,17 +130,35 @@ const Branches = ({
                     'ff-connecting-branch-datalist-reverse': !evenRow,
                   })}
                 >
-                  <Icon name="datalist_icon" className="ff-connecting-icon" />
-                  <Typography
-                    className="ff-connecting-text"
-                    color="var(--ff-connecting-branch-color)"
+                  <div
+                    id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
+                    className="ff-dataset-list-branch"
+                    onClick={() =>
+                      onUpdateDataSetList(
+                        `ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
+                        {
+                          peVariableSetId: peVariableSetId,
+                          globalVariableSetId: globalVariableSetId,
+                          testDataSetId: testDataSetId,
+                        },
+                        true,
+                        numberOfRuns,
+                        machineInstanceId
+                      )
+                    }
                   >
-                    Dataset List
-                  </Typography>
+                    <Icon name="datalist_icon" className="ff-connecting-icon" />
+                    <Typography
+                      className="ff-connecting-text"
+                      color="var(--ff-connecting-branch-color)"
+                    >
+                      Dataset List
+                    </Typography>
+                  </div>
                   <Icon
                     name="plus_icon"
                     className="ff-connecting-icon"
-                    onClick={() => onAddRunBrowser(id)}
+                    onClick={() => onAddRunBrowser(machineInstanceId)}
                     color="var(--ff-connecting-branch-color)"
                   />
                   <Typography
@@ -146,7 +170,9 @@ const Branches = ({
                   <Icon
                     name="delete"
                     className="ff-connecting-delete-icon"
-                    onClick={() => onDeleteBrowser(id, numberOfRuns)}
+                    onClick={() =>
+                      onDeleteBrowser(machineInstanceId, numberOfRuns)
+                    }
                     color="var(--ff-connecting-branch-delete-color)"
                   />
                 </div>
@@ -154,9 +180,14 @@ const Branches = ({
             ) : (
               <div className="ff-connecting-branch-browser-button">
                 <Button
+                  id={`ff-sequential-branch-add-${machineInstanceId}`}
                   variant="tertiary"
-                  label="Browser / Devices"
-                  onClick={onAddBrowser}
+                  label="Add Environrment"
+                  onClick={() =>
+                    onAddBrowser(
+                      `ff-sequential-branch-add-${machineInstanceId}`
+                    )
+                  }
                 />
               </div>
             )}

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

@@ -1,4 +1,4 @@
-import { ExecutionContext } from '../../types';
+import { dataSetValues, ExecutionContext } from '../../types';
 
 export interface BranchesProps {
   machineInstances: ExecutionContext[] | {}[];
@@ -7,9 +7,16 @@ export interface BranchesProps {
   machineColumnWidth: number;
   nextRowMachineInstance?: ExecutionContext | {} | undefined;
   previousRowMachineInstance?: ExecutionContext | {} | undefined;
-  onAddBrowser: () => void;
+  onAddBrowser: (modalId: string) => void;
   onDeleteBrowser: (id: string, runCount: number) => void;
   onAddRunBrowser: (id: string) => void;
+  onUpdateDataSetList: (
+    id: string,
+    dataSetObject: dataSetValues,
+    isInstance?: boolean,
+    noOfRuns?: number,
+    machineInstanceId?: string
+  ) => void;
 }
 
 export interface branchTypeProps {

package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { ExecutionContext } from '../../types';
 import { ConnectingBranchesProps } from './types';
 import { Fragment } from 'react/jsx-runtime';
-import {ffid} from '../../../../utils/ffID/ffid';
+import { ffid } from '../../../../utils/ffID/ffid';
 import Branches from '../Branches/Branches';
 import './ConnectingBranches.scss';
 
@@ -13,6 +13,7 @@ const ConnectingBranches = ({
   onAddBrowser,
   onDeleteBrowser,
   onAddRunBrowser,
+  onUpdateDataSetList,
 }: ConnectingBranchesProps) => {
   const [machineInstance, setMachineInstance] = useState<
     ExecutionContext[] | {}[]
@@ -56,6 +57,7 @@ const ConnectingBranches = ({
             previousRowMachineInstance={
               machineInstancesRow[index - 1]?.[machineColumnCount - 1]
             }
+            onUpdateDataSetList={onUpdateDataSetList}
           />
         </Fragment>
       ))}

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

@@ -1,10 +1,17 @@
-import { ExecutionContext } from '../../types';
+import { dataSetValues, ExecutionContext } from '../../types';
 
 export interface ConnectingBranchesProps {
   machineBranchInstances: ExecutionContext[] | {}[];
   machineColumnCount: number;
   machineColumnWidth: number;
-  onAddBrowser: () => void;
+  onAddBrowser: (modalId: string) => void;
   onDeleteBrowser: (id: string, runCount: number) => void;
   onAddRunBrowser: (id: string) => void;
+  onUpdateDataSetList: (
+    id: string,
+    dataSetObject: dataSetValues,
+    isInstance?: boolean,
+    noOfRuns?: number,
+    machineInstanceId?: string
+  ) => void;
 }

package/src/components/SequentialConnectingBranch/types.ts

@@ -7,10 +7,19 @@ export interface SequentialConnectingBranchProps {
   selectedMachine?: Option;
   machineOptionsList?: Option[];
   onHandleSelect?: (option: Option) => void;
-  onAddBrowserInstance?: () => void;
+  onAddBrowserInstance?: (modalId: string) => void;
   onUpdateAddBrowserInstance?: () => void;
   onDeleteBrowserInstance?: (id: string, runCount: number) => void;
-  onAddRunBrowserInstance?: (id: string) => void;
+  onAddRunBrowserInstance?: (machineInstanceId: string) => void;
+  onDeleteMachineInstance?: () => void;
+  onUpdateDataSetList: (
+    id: string,
+    dataSetObject: dataSetValues,
+    isInstance?: boolean,
+    noOfRuns?: number,
+    machineInstanceId?: string
+  ) => void;
+  dataSetValues: dataSetValues;
 }
 
 // Type for machine information
@@ -29,7 +38,7 @@ export interface DeviceInfo {
 }
 
 export interface ExecutionContext {
-  id: string;
+  machineInstanceId: string;
   clientId: string;
   numberOfRuns: number;
   executionEnv?: 'Local'; // Change to specific enum if more environments exist
@@ -43,3 +52,9 @@ export interface ExecutionContext {
   globalVariableSetId: string;
   testDataSetId: string;
 }
+
+export interface dataSetValues {
+  peVariableSetId: string;
+  globalVariableSetId: string;
+  testDataSetId: string;
+}

package/src/components/TableTree/TableTree.scss

@@ -1,171 +1,202 @@
-@use '../../assets/styles/fonts';
+html,
+* {
+  font-family: 'Open Sans';
+}
 
-.ff-tree-container {
-  width: 100%;
-  font-size: 12px;
-  color: var(--brand-color);
-  transition: all 0.3s ease;
-  @extend .fontSm;
+.tree-table-space-block {
+  display: inline-block;
+  width: 20px;
+}
 
-  table {
-    border-collapse: collapse;
-    width: 100%;
-    text-align: left;
-    position: relative; /* Ensure the table has a relative position for z-index to work */
-  }
+.hidden {
+  display: none;
+}
 
-  .ff-toggle-arrow-icon {
-    height: 12px;
-    width: 12px;
-    margin-left: 8px;
-    display: grid;
-    place-items: center;
-    transform: rotate(0deg);
-
-    svg {
-      path {
-        fill: var(--brand-color);
-      }
-    }
+.show {
+  display: table-row;
+}
 
-    &.ff-expanded {
-      transform: rotate(0deg);
-    }
+.btn-toggle {
+  &.expand {
+    cursor: pointer;
+  }
 
-    &.ff-collapsed {
-      transform: rotate(-90deg);
-    }
+  &.is-close {
+    background: #f1f1f1;
+    border: 1px solid transparent;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   }
 
-  th {
-    vertical-align: middle;
-    height: 32px;
-    background-color: var(--slider-table-color);
-    color: var(--text-color);
-    font-weight: 600;
-    text-transform: uppercase;
+  &::before {
+    display: none;
   }
 
+  &::after {
+    display: none;
+  }
+}
+
+.tree-table-wrap {
+  width: 100%;
+}
+
+.tree-table {
+  border: 1px solid #f1f1f1;
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  overflow: scroll;
   tr {
-    .ff-action-section {
+    .table-tree-row-action {
       display: none;
     }
-
     &:hover {
       background-color: var(--hover-color);
-
-      .ff-title-action-container {
-        display: flex;
+      .table-tree-row-action {
+        display: inline-flex;
+        align-items: center;
       }
     }
   }
 
-  .ff-title-container {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-
-    .ff-toggle-folder {
-      display: flex;
-      cursor: pointer;
-    }
-
-    &.ff-folder {
-      font-weight: 600;
-    }
-
-    &.ff-file {
-      font-weight: 400;
+  th {
+    color: var(--brand-color);
+    text-align: center;
+    padding: 10px 0;
+    background: var(--slider-table-color);
+    font-size: 13px;
+    width: 400px;
+    text-align: left;
+    &:first-child {
+      width: 400px;
+      position: sticky;
+      left: 0;
     }
+  }
 
-    .ff-title {
-      display: flex;
-      gap: 4px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      font-weight: 400;
-      cursor: pointer;
-
-      .ff-title-label {
-        display: flex;
-        align-items: center;
-      }
+  td {
+    font-size: 14px;
+    color: var(--brand-color);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: left;
+    height: 32px;
 
-      .ff-hover-icon {
-        display: none;
-        position: absolute;
-        right: 10px;
+    &:first-child {
+      overflow: initial;
+      width: 400px;
+      position: sticky;
+      left: 0;
+      background-color: white;
+      &:hover {
+        background-color: var(--hover-color);
       }
     }
-  }
 
-  .ff-node-li {
-    --indent-size: 18px;
-    --total-children-height: var(--node-height);
+    .tree-table-space-block {
+      border: 1px solid transparent;
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      line-height: 16px;
+      text-align: center;
+      vertical-align: top;
+      font-size: 19px;
+      position: relative;
+      box-sizing: border-box;
+      margin-top: 7px;
+      border-radius: 50%;
 
-    td {
-      padding: 0 8px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
       &:first-child {
-        padding-left: calc(var(--level) * var(--indent-size));
-        height: 32px;
-        z-index: 0;
+        margin-left: 7px;
       }
 
-      .first-div {
-        background-color: white;
-        display: flex;
-        width: 100%;
-        height: 32px;
+      &.btn-toggle {
+        // border: 1px solid var(--brand-color);
+        position: relative;
+        cursor: pointer;
+        width: 22px;
+        height: 22px;
+        z-index: 12;
 
-        &:hover {
-          background-color: var(--hover-color);
+        &::before {
+          display: none;
         }
+      }
+
+      &.last-block {
         &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: calc(var(--level) * var(--indent-size) - 4px);
-          width: 1px;
-          height: calc(var(--total-children-height));
-          background-color: var(--tree-connecting-lines-color);
-          z-index: 9999;
+          display: none;
         }
 
-        // Horizontal line connecting child node to parent
         &::after {
-          content: '';
           position: absolute;
-          top: 50%;
-          left: calc(var(--level) * var(--indent-size) - 4px);
+          content: '';
           width: 12px;
           height: 1px;
-          background-color: var(--tree-connecting-lines-color);
-          z-index: 10; /* Ensure it stays above the content */
+          background: var(--tree-connecting-lines-color);
+          top: 50%;
+          margin-top: -1px;
+          left: -10px;
         }
-
-        &.ff-is-last::before {
-          height: calc(var(--node-height) / 2);
+      }
+      &.no-folder {
+        width: 8px;
+        &::after {
+          position: absolute;
+          content: '';
+          width: 18px;
+          height: 1px;
+          background: var(--tree-connecting-lines-color);
+          top: 50%;
+          margin-top: -1px;
+          left: -10px;
         }
       }
-    }
 
-    // Remove the lines for root level
-    &[style*='--level: 0']::before,
-    &[style*='--level: 0']::after {
-      content: none;
+      &:not(.last-block)::before {
+        position: absolute;
+        content: '';
+        width: 1px;
+        height: 40px;
+        background: var(--tree-connecting-lines-color);
+        left: 50%;
+        top: -12px;
+        z-index: -1;
+      }
     }
   }
 }
 
-.ff-title-action-container {
-  display: none;
+.tree-table-td-content {
+  display: inline-flex;
   align-items: center;
+  padding: 7px;
+  font-size: 12px;
+  font-family: 'Poppins';
+}
+
+.hidden {
+  display: none;
+}
+
+.show {
+  visibility: visible;
 }
-th:first-child,
-td:first-child {
-  position: sticky;
-  left: 0;
+.tree-row-expanded,
+.tree-row-collapsed {
+  svg {
+    height: 12px;
+    width: 12px;
+    path {
+      fill: var(--brand-color);
+    }
+  }
+}
+.tree-row-collapsed {
+  svg {
+    transform: rotate(-90deg);
+    transition: all;
+  }
 }