pixel-react-excel-sheet 1.0.31 → 1.0.33

package/src/components/ConnectingBranch/ConnectingBranch.tsx

@@ -1,11 +1,22 @@
 import React, { useEffect, useRef, useState } from 'react';
 import './ConnectingBranch.scss';
-import { MachineData, MachineInstance, indexType } from './types';
+import {
+  ConnectBranchProps,
+  MachineData,
+  MachineInstance,
+  indexType,
+} from './types';
 import { ArcherContainer, ArcherElement } from 'react-archer';
 import MachineInstances from './BranchComponents/MachineInstances';
 import Typography from '../Typography';
 
-const ConnectingBranch: React.FC = ({ machineData }: MachineData) => {
+const ConnectingBranch: React.FC<ConnectBranchProps> = ({
+  data: machineData,
+  getChildNodeComponent,
+  getParentNodeComponent,
+  getParentNodeComponentActionItems,
+  childNodeCurveHeight = 1.28,
+}) => {
   const datasetRef = useRef<HTMLDivElement | null>(null);
   const [datasetHeight, setDatasetHeight] = useState<number>(0);
   const [curveHeights, setCurveHeights] = useState<number[]>([]);
@@ -31,7 +42,7 @@ const ConnectingBranch: React.FC = ({ machineData }: MachineData) => {
   const calculateCurveHeight = () => {
     const heights = itemRefs.current.map((_, index) => {
       if (index === 0) return 0;
-      return datasetHeight * 1.3;
+      return datasetHeight * childNodeCurveHeight;
     });
     setCurveHeights(heights);
   };
@@ -65,117 +76,120 @@ const ConnectingBranch: React.FC = ({ machineData }: MachineData) => {
     machineData.executionSettings.machines.selectedMachines.length / 2
   );
   return (
-    <ArcherContainer
-      strokeColor="var(--brand-color)"
-      strokeWidth={1}
-      startMarker={true}
-      endMarker={false}
-      noCurves
-    >
-      <div className="ff-grid-container">
-        {machineData?.executionSettings?.machines?.selectedMachines.map(
-          (machine: MachineData, index: indexType) => {
-            const rowStart = currentRow;
-            const rowSpan = calculateRowSpan(machine);
-            currentRow += rowSpan;
-            const gap = 16;
-            const verticalLineHeight = calculateVerticalLineHeight(
-              machine?.machineInstances,
-              datasetHeight,
-              gap
-            );
-
-            return (
-              <React.Fragment key={index}>
-                {/* Show ff-script-count-box only for the middle index */}
-                {((!isOddMachineCount && index === middleIndex) ||
-                  (isOddMachineCount && index === 0)) && (
-                  <ArcherElement id="rootMachine">
-                    <div
-                      className="ff-grid-item ff-dynamic-item"
-                      style={{
-                        gridRow: `${
-                          !isOddMachineCount ? rowStart : oddCountRow
-                        }`,
-                      }}
-                    >
-                      <div className="ff-script-count-container">
-                        <div className="ff-script-count-box">
-                          <Typography fontSize={12} fontWeight="regular">
-                            {
-                              machineData?.executionSettings?.machines
-                                ?.totalNoScript
-                            }
-                          </Typography>
-                          <Typography fontSize={12} fontWeight="regular">
-                            Scripts
-                          </Typography>
+    <div className="connecting-branch-container">
+      <ArcherContainer
+        strokeColor="var(--brand-color)"
+        strokeWidth={1}
+        startMarker={true}
+        endMarker={false}
+        noCurves
+      >
+        <div className="ff-connecting-branch-grid-container">
+          {machineData?.executionSettings?.machines?.selectedMachines.map(
+            (machine: MachineData, index: indexType) => {
+              const rowStart = currentRow;
+              const rowSpan = calculateRowSpan(machine);
+              currentRow += rowSpan;
+              const gap = 16;
+              const verticalLineHeight = calculateVerticalLineHeight(
+                machine?.machineInstances,
+                datasetHeight,
+                gap
+              );
+              return (
+                <React.Fragment key={index}>
+                  {/* Show ff-script-count-box only for the middle index */}
+                  {((!isOddMachineCount && index === middleIndex) ||
+                    (isOddMachineCount && index === 0)) && (
+                    <ArcherElement id="rootNode">
+                      <div
+                        className="ff-grid-item ff-dynamic-item"
+                        style={{
+                          gridRow: `${
+                            !isOddMachineCount ? rowStart : oddCountRow
+                          }`,
+                        }}
+                      >
+                        <div className="ff-script-count-container">
+                          <div className="ff-script-count-box">
+                            <Typography fontSize={12} fontWeight="regular">
+                              {
+                                machineData?.executionSettings?.machines
+                                  ?.totalNoScript
+                              }
+                            </Typography>
+                            <Typography fontSize={12} fontWeight="regular">
+                              Scripts
+                            </Typography>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  </ArcherElement>
-                )}
-                {/* Selected Machine */}
-                <div
-                  className="ff-selectedMachines"
-                  style={{
-                    gridRow: `${rowStart} / span ${rowSpan}`,
-                  }}
-                >
-                  <div className="ff-selectedMachines-input">
-                    <ArcherElement
-                      id={`machine${index}`}
-                      key={index}
-                      relations={[
-                        {
-                          targetId: 'rootMachine',
-                          targetAnchor: 'left',
-                          sourceAnchor: 'left',
-                        },
-                      ]}
-                    >
+                    </ArcherElement>
+                  )}
+                  {/* Selected Machine */}
+                  <div
+                    className="ff-selectedMachines"
+                    style={{
+                      gridRow: `${rowStart} / span ${rowSpan}`,
+                    }}
+                  >
+                    <div className="ff-selectedMachines-input">
                       <div className="ff-input-box-container">
-                        {/* Todo: here  we will add select dropdown */}
+                        <ArcherElement
+                          id={`parentnode${index}`}
+                          key={machine?.clientId}
+                          relations={[
+                            {
+                              targetId: 'rootNode',
+                              targetAnchor: 'left',
+                              sourceAnchor: 'left',
+                            },
+                          ]}
+                        >
+                          {/* Todo: here  we will add select dropdown */}
+                          {getParentNodeComponent(false, machine, index)}
+                        </ArcherElement>
+                        {getParentNodeComponentActionItems(machine, index)}
                       </div>
-                    </ArcherElement>
+                    </div>
+                    <MachineInstances
+                      parentNode={index}
+                      data={machine}
+                      verticalLineHeight={verticalLineHeight}
+                      datasetHeight={datasetHeight}
+                      curveHeights={curveHeights}
+                      itemRefs={itemRefs}
+                      datasetRef={datasetRef}
+                      getChildNodeComponent={getChildNodeComponent}
+                    />
                   </div>
-                  <MachineInstances
-                    data={machine}
-                    verticalLineHeight={verticalLineHeight}
-                    datasetHeight={datasetHeight}
-                    curveHeights={curveHeights}
-                    itemRefs={itemRefs}
-                    datasetRef={datasetRef}
-                  />
-                </div>
-              </React.Fragment>
-            );
-          }
-        )}
-        {/* Select Machine Input */}
-        <div
-          className="ff-select-machine-input"
-          style={{
-            gridRow: `${currentRow}`,
-          }}
-        >
-          <ArcherElement
-            id="footerInput"
-            relations={[
-              {
-                targetId: 'rootMachine',
-                targetAnchor: 'left',
-                sourceAnchor: 'left',
-              },
-            ]}
+                </React.Fragment>
+              );
+            }
+          )}
+          {/* Select Machine Input */}
+          <div
+            className="ff-select-machine-input"
+            style={{
+              gridRow: `${currentRow}`,
+            }}
           >
-            <div className="ff-input-box-container">
-              {/* Todo: here  we will add multi select dropdown */}
-            </div>
-          </ArcherElement>
+            <ArcherElement
+              id="lastNode"
+              relations={[
+                {
+                  targetId: 'rootNode',
+                  targetAnchor: 'left',
+                  sourceAnchor: 'left',
+                },
+              ]}
+            >
+              <div>{getParentNodeComponent(true)}</div>
+            </ArcherElement>
+          </div>
         </div>
-      </div>
-    </ArcherContainer>
+      </ArcherContainer>
+    </div>
   );
 };
 

package/src/components/ConnectingBranch/{data.ts → data.tsx}

@@ -11,7 +11,15 @@ const machineData = {
             globalVariableSetId: 'UUID',
             testDataSetId: 'UUID',
           },
-
+          machineInstances: [],
+        },
+        {
+          clientId: 'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
+          executionDataSet: {
+            peVariableSetId: 'UUID',
+            globalVariableSetId: 'UUID',
+            testDataSetId: 'UUID',
+          },
           machineInstances: [
             {
               clientId:
@@ -26,7 +34,22 @@ const machineData = {
                 osVersion: '10.0.22000',
                 hostName: 'LAPTOP-T793RVQN',
               },
-              deviceInfo: [],
+              deviceInfo: [
+                {
+                  version: '10.0',
+                  name: 'Samsung Galaxy Note 20 Ultra',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'android',
+                },
+                {
+                  version: '18',
+                  name: 'iPhone 14',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'ios',
+                },
+              ],
               headless: false,
               runLevelExecutionDataSets: [
                 {
@@ -34,18 +57,57 @@ const machineData = {
                   globalVariableSetId: 'UUID',
                   testDataSetId: 'UUID',
                   runScriptCount: 12,
+                  browserRenderer: `<div>browser</div>`,
+                },
+              ],
+            },
+          ],
+        },
+        {
+          clientId: 'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
+          executionDataSet: {
+            peVariableSetId: 'UUID',
+            globalVariableSetId: 'UUID',
+            testDataSetId: 'UUID',
+          },
+          machineInstances: [
+            {
+              clientId:
+                'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
+              numberOfRuns: '3',
+              executionEnv: 'Local',
+              browserName: 'Google Chrome',
+              browserVersion: '107.0.5304.88',
+              systemUrl: '',
+              machineInfo: {
+                osName: 'Windows 11 Home Single Language',
+                osVersion: '10.0.22000',
+                hostName: 'LAPTOP-T793RVQN',
+              },
+              deviceInfo: [
+                {
+                  version: '10.0',
+                  name: 'Samsung Galaxy Note 20 Ultra',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'android',
                 },
                 {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
-                  runScriptCount: 12,
+                  version: '18',
+                  name: 'iPhone 14',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'ios',
                 },
+              ],
+              headless: false,
+              runLevelExecutionDataSets: [
                 {
                   peVariableSetId: 'UUID_1',
                   globalVariableSetId: 'UUID',
                   testDataSetId: 'UUID',
                   runScriptCount: 12,
+                  browserRenderer: `<div>browser</div>`,
                 },
               ],
             },
@@ -62,13 +124,30 @@ const machineData = {
                 osVersion: '10.0.22000',
                 hostName: 'LAPTOP-T793RVQN',
               },
-              deviceInfo: [],
+              deviceInfo: [
+                {
+                  version: '10.0',
+                  name: 'Samsung Galaxy Note 20 Ultra',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'android',
+                },
+                {
+                  version: '18',
+                  name: 'iPhone 14',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'ios',
+                },
+              ],
               headless: false,
               runLevelExecutionDataSets: [
                 {
                   peVariableSetId: 'UUID_1',
                   globalVariableSetId: 'UUID',
                   testDataSetId: 'UUID',
+                  runScriptCount: 12,
+                  executionDataSetId: 'uuid',
                 },
               ],
             },
@@ -81,7 +160,6 @@ const machineData = {
             globalVariableSetId: 'UUID',
             testDataSetId: 'UUID',
           },
-          totalScript: 250,
           machineInstances: [
             {
               clientId:
@@ -96,33 +174,44 @@ const machineData = {
                 osVersion: '10.0.22000',
                 hostName: 'LAPTOP-T793RVQN',
               },
-              deviceInfo: [],
-              headless: false,
-              runLevelExecutionDataSets: [
+              deviceInfo: [
                 {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
+                  version: '10.0',
+                  name: 'Samsung Galaxy Note 20 Ultra',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'android',
                 },
                 {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
+                  version: '18',
+                  name: 'iPhone 14',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'ios',
                 },
+              ],
+              headless: false,
+              runLevelExecutionDataSets: [
                 {
                   peVariableSetId: 'UUID_1',
                   globalVariableSetId: 'UUID',
                   testDataSetId: 'UUID',
+                  runScriptCount: 12,
+                  browserRenderer: `<div>browser</div>`,
                 },
                 {
                   peVariableSetId: 'UUID_1',
                   globalVariableSetId: 'UUID',
                   testDataSetId: 'UUID',
+                  runScriptCount: 12,
+                  browserRenderer: `<div>browser</div>`,
                 },
                 {
                   peVariableSetId: 'UUID_1',
                   globalVariableSetId: 'UUID',
                   testDataSetId: 'UUID',
+                  runScriptCount: 12,
+                  browserRenderer: `<div>browser</div>`,
                 },
               ],
             },

package/src/components/ConnectingBranch/types.ts

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 type MachineInstanceData = any;
 export interface MachineInstance {
   [key: string]: MachineInstanceData;
@@ -9,13 +11,32 @@ export interface MachineData {
   [key: string]: machineDataObj;
 }
 export interface MachineInstancesProps {
+  parentNode: number;
   data: MachineData;
   verticalLineHeight: number;
   datasetHeight: number;
   curveHeights: number[];
   itemRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
   datasetRef: React.RefObject<HTMLDivElement>;
+  getChildNodeComponent: (
+    isButton: boolean,
+    ...args: any[]
+  ) => ReactElement<any, any>;
 }
 
 export type indexType = number;
 export type rowType = number;
+
+export interface ConnectBranchProps {
+  data: MachineData;
+  childNodeCurveHeight?: number;
+  getParentNodeComponent: (
+    isMultiSelect: boolean,
+    ...args: any[]
+  ) => ReactElement<any, any>;
+  getParentNodeComponentActionItems: (...args: any[]) => ReactElement<any, any>;
+  getChildNodeComponent: (
+    isButton: boolean,
+    ...args: any[]
+  ) => ReactElement<any, any>;
+}