pixel-react 1.7.8 → 1.8.0

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

package/src/components/Excel/ExcelFile/ExcelFile.tsx

@@ -430,7 +430,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     setContextMenu({
       open: true,
       position: {
-        x: event.pageX - 50,
+        x: event.pageX - 200,
         y: event.pageY - 250,
       },
       options: options,

package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx

@@ -38,11 +38,19 @@ const ActiveCell: React.FC<Props> = (props) => {
   const cell = useSelector((state) =>
     state.active ? Matrix.get(state.active, state.model.data) : undefined
   );
-  const dimensions = useSelector((state) =>
-    active
+  const dimensions = useSelector((state) => {
+    let dimensionValue = active
       ? getCellDimensions(active, state.rowDimensions, state.columnDimensions)
-      : undefined
-  );
+      : undefined;
+    dimensionValue = {
+      top: dimensionValue?.top ?? 0,
+      height: (dimensionValue?.height ?? 0) + 1,
+      left: dimensionValue?.left ?? 0,
+      width: (dimensionValue?.width ?? 0) + 1,
+    };
+    return dimensionValue;
+  });
+
   const hidden = React.useMemo(
     () => !active || !dimensions,
     [active, dimensions]
@@ -132,10 +140,7 @@ const ActiveCell: React.FC<Props> = (props) => {
           exitEditMode={view}
         />
       )}
-      <div
-        onMouseDown={handleMouseDown}
-        className="select_dot"
-      ></div>
+      <div onMouseDown={handleMouseDown} className="select_dot"></div>
     </div>
   );
 };

package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx

@@ -48,7 +48,12 @@ const FloatingRect: React.FC<Props> = ({
         'ff-spreadsheet-floating-rect--dragging': dragging,
         'ff-spreadsheet-floating-rect--hidden': hidden,
       })}
-      style={{ width: adjustedWidth, height: adjustedHeight, top, left }}
+      style={{
+        width: (adjustedWidth ?? 0) + 1,
+        height: (adjustedHeight ?? 0) + 1,
+        top,
+        left,
+      }}
     />
   );
 };

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss

@@ -3,6 +3,7 @@
 .ff-excel {
   display: flex;
   flex-direction: column;
+  height: 100%;
 
   .ff-excel-toolbar-container {
     position: relative;
@@ -12,7 +13,7 @@
     margin-bottom: 20px;
   }
 
-  .ff-spreadsheet {
+  .ff-excel-spreadsheet {
     --background-color: var(--drawer-footer-bg);
     --text-color: var(--text-color);
     --readonly-text-color: var(--toggle-strip-active);
@@ -30,10 +31,29 @@
     display: inline-block;
   }
 
+  .ff-excel-header-hider {
+    position: absolute;
+    background-color: var(--excel-header-border);
+    z-index: 500;
+    left: -1px;
+    top: 59px;
+  }
+
+  .ff-excel-header-column-hider {
+    height: 34px;
+    width: 100%;
+  }
+
+  .ff-excel-header-row-hider {
+    bottom: 0px;
+    width: 60px;
+  }
+
   .ff-spreadsheet-active-cell {
     position: absolute;
-    border: 2px solid var(--outline-color);
+    border: 1px solid var(--outline-color);
     box-sizing: border-box;
+    z-index: 100;
   }
 
   .ff-spreadsheet-active-cell--edit {
@@ -87,7 +107,6 @@
   }
 
   .ff-spreadsheet-header {
-    border: 0.1px solid var(--border-color);
     background-color: var(--header-background-color);
     color: var(--readonly-text-color);
     text-align: center;
@@ -99,7 +118,8 @@
 
   .ff-spreadsheet-corner-header {
     position: fixed;
-    z-index: 3000;
+    z-index: 2000;
+    border: 2px solid var(--border-color);
   }
 
   .ff-spreadsheet-row-header {
@@ -107,16 +127,15 @@
   }
 
   .corner-header {
-    border: 1px solid var(--border-color);
     background-color: var(--header-background-color);
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 1100;
-    top: -1px;
-    width: 60px;
-    height: 34px;
+    z-index: 1500;
+    top: -2px;
+    width: 58px;
+    height: 32px;
     left: -1px;
   }
 
@@ -169,7 +188,7 @@
 
   .ff-spreadsheet-floating-rect--selected {
     background: var(--outline-background-color);
-    border: 2px var(--outline-color) solid;
+    border: 1px var(--outline-color) solid;
   }
 
   .ff-spreadsheet-floating-rect--dragging {
@@ -177,6 +196,6 @@
   }
 
   .ff-spreadsheet-floating-rect--copied {
-    border: 2px var(--outline-color) dashed;
+    border: 1px var(--outline-color) dashed;
   }
 }