pixel-react 1.6.0 → 1.6.2

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx

@@ -5,11 +5,11 @@ import Icon from '../Icon';
 import Select from '../Select';
 import Typography from '../Typography';
 import './SequentialConnectingBranch.scss';
-import { useEffect, useRef, useState } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 import ConnectingBranches from './components/ConnectingBranches/ConnectingBranches';
 import { ExecutionContext, SequentialConnectingBranchProps } from './types';
 
-const SequentialConnectingBranch = ({
+const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
   machineInstances = [],
   machineColumnWidth = 180,
   machineColumnCount = 1,
@@ -19,8 +19,15 @@ const SequentialConnectingBranch = ({
   onAddBrowserInstance = () => {},
   onAddRunBrowserInstance = () => {},
   onDeleteBrowserInstance = () => {},
-}: SequentialConnectingBranchProps) => {
-  const dataListRef = useRef<HTMLButtonElement>(null);
+  onUpdateDataSetList = () => {},
+  onDeleteMachineInstance = () => {},
+  dataSetValues = {
+    testDataSetId: '',
+    globalVariableSetId: '',
+    peVariableSetId: '',
+  },
+}) => {
+  const [selectedMachineInstance, setSelectedMachineInstance] = useState({});
   const selectButtonRef = useRef<HTMLButtonElement>(null);
   const defaultMachineColumnCount = Math.max(machineColumnCount, 1);
   const defaultMachineColumnWidth = Math.max(machineColumnWidth, 180);
@@ -30,13 +37,25 @@ const SequentialConnectingBranch = ({
   >([]);
 
   const isMachineInstances = checkEmpty(machineInstances);
-  const isMachineSelected = checkEmpty(selectedMachine);
+  const isMachineSelected = checkEmpty(selectedMachine.value?.clientId);
+
+  const getMachineStatusColor = (machineStatus: string = '') => {
+    if (machineStatus.toLowerCase().includes('inactive'))
+      return 'var(--ff-machine-inactive-status-color)';
+    if (machineStatus.toLowerCase().includes('running'))
+      return 'var(--ff-machine-running-status-color)';
+    if (machineStatus.toLowerCase().includes('active'))
+      return 'var(--ff-machine-active-status-color)';
+    return 'var(--ff-machine-active-status-color))';
+  };
+
+  useEffect(() => {
+    setSelectedMachineInstance(selectedMachine);
+  }, [selectedMachine]);
 
   useEffect(() => {
     setMachineBranchInstances([...machineInstances, {}]);
   }, [machineInstances]);
-  console.log(machineInstances, 'machineInstances');
-  console.log(machineBranchInstances, 'machineBranchInstances');
   return (
     <div className="ff-sequential-connecting-branch-wrapper">
       <div className="ff-connecting-select-branch-wrapper">
@@ -44,12 +63,12 @@ const SequentialConnectingBranch = ({
           <Select
             onChange={onHandleSelect}
             optionsList={machineOptionsList}
-            required={true}
             label="Choose Machine"
+            required={false}
             showLabel={true}
             className="ff-sequential-select-branch"
             width={'240px'}
-            selectedOption={selectedMachine}
+            selectedOption={selectedMachineInstance}
             valueAccessor={'name'}
           />
           {!isMachineSelected && (
@@ -70,11 +89,14 @@ const SequentialConnectingBranch = ({
                   <>
                     <Button
                       variant="tertiary"
-                      label="Browser / Device"
+                      label="Add Environment"
                       size="small"
                       className="branch-button"
                       ref={selectButtonRef}
-                      onClick={onAddBrowserInstance}
+                      onClick={() =>
+                        onAddBrowserInstance('ff-sequential-branch-button')
+                      }
+                      id="ff-sequential-branch-button"
                     />
                   </>
                 )}
@@ -82,40 +104,48 @@ const SequentialConnectingBranch = ({
             </div>
           )}
         </div>
-        <div className="ff-select-scope-datalist">
-          <div className="ff-scope-wrapper">
-            <Icon name="windows" />
-            <Typography
-              as="span"
-              fontSize={12}
-              color="var(--ff-connecting-branch-scope-color)"
-              className="ff-scope-text"
-            >
-              Private
-            </Typography>
-          </div>
+        {!isMachineSelected && (
+          <div className="ff-select-scope-datalist">
+            <div className="ff-scope-wrapper">
+              <Typography
+                as="span"
+                fontSize={12}
+                color={getMachineStatusColor(selectedMachine.values?.status)}
+                className="ff-scope-text"
+              >
+                {selectedMachine.values?.status}
+              </Typography>
+            </div>
 
-          <div className="ff-datalist-wrapper">
-            <Icon
-              name="datalist_icon"
-              className="ff-dataset-icon"
-              ref={dataListRef}
-            />
-            <Typography
-              as="span"
-              fontSize={12}
-              color="var(--ff-connecting-branch-color)"
-              className="ff-datalist-text"
-            >
-              Dataset List
-            </Typography>
-            <Icon
-              name="delete"
-              className="ff-run-delete-icon"
-              color="var(--ff-connecting-branch-delete-color)"
-            />
+            <div className="ff-datalist-wrapper">
+              <div
+                id="ff-sequential-machine-datalist"
+                onClick={() =>
+                  onUpdateDataSetList(
+                    'ff-sequential-machine-datalist',
+                    dataSetValues
+                  )
+                }
+              >
+                <Icon name="datalist_icon" className="ff-dataset-icon" />
+                <Typography
+                  as="span"
+                  fontSize={12}
+                  color="var(--ff-connecting-branch-color)"
+                  className="ff-datalist-text"
+                >
+                  Dataset List
+                </Typography>
+              </div>
+              <Icon
+                name="delete"
+                className="ff-run-delete-icon"
+                color="var(--ff-connecting-branch-delete-color)"
+                onClick={onDeleteMachineInstance}
+              />
+            </div>
           </div>
-        </div>
+        )}
       </div>
       <div className="ff-sequential-branches-wrapper">
         {!isMachineInstances && (
@@ -126,6 +156,7 @@ const SequentialConnectingBranch = ({
             onAddBrowser={onAddBrowserInstance}
             onDeleteBrowser={onDeleteBrowserInstance}
             onAddRunBrowser={onAddRunBrowserInstance}
+            onUpdateDataSetList={onUpdateDataSetList}
           />
         )}
       </div>

package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss

@@ -61,6 +61,12 @@
   align-items: center;
   flex-direction: if($reverse, row-reverse, row);
 
+  .ff-dataset-list-branch {
+    display: flex;
+    align-items: center;
+    flex-direction: if($reverse, row-reverse, row);
+  }
+
   .ff-connecting-icon {
     margin-right: 4px;
     cursor: pointer;
@@ -154,9 +160,9 @@
 
     .ff-connecting-branch-arrow-reverse {
       @include branch-arrow(
-        $clip: polygon(0 50%, 100% 100%, 100% 0),
-        $horizontal-pos: left,
-        $offset: -1px
+              $clip: polygon(0 50%, 100% 100%, 100% 0),
+              $horizontal-pos: left,
+              $offset: -1px
       );
     }
   }

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;
+}