pixel-react 1.10.15 → 1.10.16

package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx

@@ -1,167 +0,0 @@
-import { ffid } from '../../../utils/ffID/ffid';
-import Typography from '../../Typography';
-import {
-  indexType,
-  MachineData,
-  MachineInstancesProps,
-  RunLevelExecutionDataSet,
-} from '../types';
-
-const MachineInstances: React.FC<MachineInstancesProps> = ({
-  getChildNodeComponent,
-  parentNodeIndex,
-  parentNodeData,
-  verticalLineHeight,
-  datasetHeight,
-  curveHeights,
-  itemRefs,
-  datasetRef,
-  isReadOnlyMode,
-}) => {
-  return (
-    <>
-      {parentNodeData?.machineInstances?.length === 0 ? (
-        <>
-          {!isReadOnlyMode && (
-            <>
-              <div className="ff-selectedMachines-connecting-line">
-                <div className="ff-line">
-                  <div className="ff-left-icon"></div>
-                  <div className="ff-right-icon"></div>
-                </div>
-              </div>
-              <div className="ff-machine-instance ff-machine-env-button">
-                {getChildNodeComponent({
-                  isButton: true,
-                  parentNodeData,
-                  parentNodeIndex,
-                })}
-              </div>
-            </>
-          )}
-        </>
-      ) : (
-        parentNodeData?.machineInstances?.map(
-          (childNodeData: MachineData, childNodeIndex: indexType) => {
-            const isFirstLine = childNodeIndex === 0;
-            return (
-              <div className="ff-machine-instance-row" key={ffid()}>
-                <div
-                  className={`ff-selectedMachines-connecting-line ${
-                    !isFirstLine ? 'ff-second-line' : ''
-                  }`}
-                >
-                  <div className="ff-line">
-                    <div className="ff-left-icon"></div>
-                    <div className="ff-right-icon"></div>
-                  </div>
-
-                  {isFirstLine && (
-                    <div
-                      className="ff-vertical-line"
-                      style={{ height: `${verticalLineHeight}px` }}
-                    ></div>
-                  )}
-                </div>
-
-                <div className="ff-machine-instance">
-                  {childNodeData.runLevelExecutionDataSets.map(
-                    (
-                      runLevelExecutionDataSet: RunLevelExecutionDataSet,
-                      runLevelExecutionDataSetIndex: indexType
-                    ) => (
-                      <div
-                        key={
-                          runLevelExecutionDataSet?.runLevelExecutionDataSetId +
-                          ffid()
-                        }
-                        className="ff-run-level-execution-dataset"
-                        ref={
-                          runLevelExecutionDataSetIndex === 0
-                            ? datasetRef
-                            : null
-                        }
-                      >
-                        <div
-                          className="ff-execution-item"
-                          key={ffid()}
-                          ref={(element) =>
-                            (itemRefs.current[runLevelExecutionDataSetIndex] =
-                              element)
-                          }
-                        >
-                          <div
-                            className="ff-curved-connector"
-                            style={{ top: `${-datasetHeight}px` }}
-                          >
-                            <div
-                              className={`ff-curve ff-connector-${runLevelExecutionDataSetIndex}`}
-                              style={{
-                                height: `${curveHeights[runLevelExecutionDataSetIndex]}px`,
-                              }}
-                            >
-                              <div
-                                className={`ff-curve-right-icon ff-curve-right-icon-${runLevelExecutionDataSetIndex}`}
-                              ></div>
-                              {runLevelExecutionDataSet?.runScriptCount && (
-                                <div className="ff-selectedMachines-connecting-line-text">
-                                  <Typography fontSize={8} fontWeight="regular">
-                                    {runLevelExecutionDataSet.runScriptCount}{' '}
-                                    Script
-                                  </Typography>
-                                </div>
-                              )}
-                            </div>
-                          </div>
-
-                          <div className="ff-run-data-box">
-                            {getChildNodeComponent({
-                              isButton: false,
-                              childNodeData,
-                              childNodeIndex,
-                              runLevelExecutionDataSet,
-                              runLevelExecutionDataSetIndex,
-                              parentNodeData,
-                              parentNodeIndex,
-                            })}
-                          </div>
-                        </div>
-                      </div>
-                    )
-                  )}
-                </div>
-
-                {childNodeIndex ===
-                  parentNodeData.machineInstances.length - 1 && (
-                  <>
-                    {!isReadOnlyMode && (
-                      <>
-                        <div className="ff-selectedMachines-connecting-line ff-second-line">
-                          <div className="ff-line">
-                            <div className="ff-left-icon"></div>
-                            <div className="ff-right-icon"></div>
-                          </div>
-                        </div>
-
-                        <div className="ff-machine-instance ff-machine-env-button">
-                          {getChildNodeComponent({
-                            isButton: true,
-                            parentNodeData,
-                            parentNodeIndex,
-                            childNodeIndex: childNodeIndex + 1,
-                          })}
-                        </div>
-                      </>
-                    )}
-                  </>
-                )}
-              </div>
-            );
-          }
-        )
-      )}
-    </>
-  );
-};
-
-export default MachineInstances;

package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import ConnectingBranch from './ConnectingBranch';
-import machineData from './data';
-import Button from '../Button/Button';
-import { ConnectingNodeConfig } from './types';
-
-const meta: Meta<typeof ConnectingBranch> = {
-  title: 'Components/ConnectingBranch',
-  component: ConnectingBranch,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ConnectingBranch>;
-
-const getChildNodeComponent = ({ isButton }: ConnectingNodeConfig) => {
-  if (isButton) {
-    return (
-      <div>
-        {' '}
-        <Button variant="primary" label="Add execution Env" />
-      </div>
-    );
-  } else {
-    return (
-      <div className="ff-child-node-container"> Execution Env details</div>
-    );
-  }
-};
-
-const getParentNodeComponentActionItems = () => {
-  return <div> Machine Action Items</div>;
-};
-
-const getParentNodeComponent = ({ isMultiSelect }: ConnectingNodeConfig) => (
-  <div className="ff-parent-node-container">
-    {' '}
-    {isMultiSelect ? 'MultiSelect' : 'Select'} DropDown
-  </div>
-);
-
-export const Default: Story = {
-  args: {
-    data: machineData,
-    getParentNodeComponent,
-    getParentNodeComponentActionItems,
-    getChildNodeComponent,
-  },
-};
-
-export const readOnly: Story = {
-  args: {
-    data: machineData,
-    getParentNodeComponent,
-    getParentNodeComponentActionItems,
-    getChildNodeComponent,
-    isReadOnlyMode: true,
-  },
-};

package/src/components/ConnectingBranch/ConnectingBranch.tsx

@@ -1,213 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import './ConnectingBranch.scss';
-import {
-  ConnectBranchProps,
-  MachineData,
-  MachineInstance,
-  indexType,
-} from './types';
-import { ArcherContainer, ArcherElement } from 'react-archer';
-import MachineInstances from './BranchComponents/MachineInstances';
-import Typography from '../Typography';
-import { ffid } from '../../utils/ffID/ffid';
-
-const ConnectingBranch: React.FC<ConnectBranchProps> = ({
-  data: machineData,
-  getChildNodeComponent,
-  getParentNodeComponent,
-  getParentNodeComponentActionItems,
-  childNodeCurveHeight = 1.28,
-  isReadOnlyMode = false,
-}) => {
-  const datasetRef = useRef<HTMLDivElement | null>(null);
-  const [datasetHeight, setDatasetHeight] = useState<number>(0);
-  const [curveHeights, setCurveHeights] = useState<number[]>([]);
-  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const calculateVerticalLineHeight = (
-    machineInstances: MachineInstance[],
-    datasetHeight: number,
-    gap: number
-  ): number => {
-    if (machineInstances.length === 1 && isReadOnlyMode) {
-      return 0;
-    }
-
-    const totalDataSets = machineInstances.reduce(
-      (acc, instance, index) =>
-        acc +
-        (index !== machineInstances.length - 1 || !isReadOnlyMode
-          ? instance.runLevelExecutionDataSets?.length || 0
-          : 0),
-      0
-    );
-
-    return totalDataSets * (datasetHeight + gap);
-  };
-
-  useEffect(() => {
-    if (datasetRef.current) {
-      setDatasetHeight(datasetRef.current.offsetHeight);
-    }
-  }, [machineData]);
-
-  const calculateCurveHeight = () => {
-    const heights = itemRefs.current.map((_, index) => {
-      if (index === 0) return 0;
-      return datasetHeight * childNodeCurveHeight;
-    });
-    setCurveHeights(heights);
-  };
-
-  useEffect(() => {
-    calculateCurveHeight();
-  }, [datasetHeight, machineData]);
-
-  const calculateRowSpan = (machine: MachineData): number => {
-    const baseRows = 1;
-    const childrenRows = machine.machineInstances?.length || 0;
-    return Math.max(baseRows + childrenRows, 1);
-  };
-
-  const machineCount = machineData?.machines?.selectedMachines?.length;
-  const isOddMachineCount = machineCount % 2 !== 0;
-
-  let currentRow = 1;
-
-  const calculateTotalRows = (): number => {
-    return machineData.machines.selectedMachines.reduce(
-      (totalRows: indexType, machine: MachineData) =>
-        totalRows + calculateRowSpan(machine),
-      1
-    );
-  };
-
-  const oddCountRow = Math.round(calculateTotalRows() / 2);
-  const middleIndex = Math.floor(
-    machineData.machines.selectedMachines.length / 2
-  );
-  return (
-    <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?.machines?.selectedMachines.map(
-            (parentNodeData: MachineData, parentNodeIndex: indexType) => {
-              const rowStart = currentRow;
-              const rowSpan = calculateRowSpan(parentNodeData);
-              currentRow += rowSpan;
-              const gap = 16;
-              const verticalLineHeight = calculateVerticalLineHeight(
-                parentNodeData?.machineInstances,
-                datasetHeight,
-                gap
-              );
-              return (
-                <React.Fragment key={ffid()}>
-                  {/* Show ff-script-count-box only for the middle index */}
-                  {((!isOddMachineCount && parentNodeIndex === middleIndex) ||
-                    (isOddMachineCount && parentNodeIndex === 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?.machines?.totalNoScript}
-                            </Typography>
-                            <Typography fontSize={12} fontWeight="regular">
-                              Scripts
-                            </Typography>
-                          </div>
-                        </div>
-                      </div>
-                    </ArcherElement>
-                  )}
-                  {/* Selected Machine */}
-                  <div
-                    className="ff-selectedMachines"
-                    style={{
-                      gridRow: `${rowStart} / span ${rowSpan}`,
-                    }}
-                  >
-                    <div className="ff-selectedMachines-input">
-                      <div className="ff-input-box-container">
-                        <ArcherElement
-                          id={`parentnode${parentNodeIndex}`}
-                          key={ffid()}
-                          relations={[
-                            {
-                              targetId: 'rootNode',
-                              targetAnchor: 'left',
-                              sourceAnchor: 'left',
-                            },
-                          ]}
-                        >
-                          {/* Todo: here  we will add select dropdown */}
-                          {getParentNodeComponent({
-                            isMultiSelect: false,
-                            parentNodeData,
-                            parentNodeIndex,
-                          })}
-                        </ArcherElement>
-                        {getParentNodeComponentActionItems({
-                          parentNodeData,
-                          parentNodeIndex,
-                        })}
-                      </div>
-                    </div>
-                    <MachineInstances
-                      parentNodeIndex={parentNodeIndex}
-                      parentNodeData={parentNodeData}
-                      verticalLineHeight={verticalLineHeight}
-                      datasetHeight={datasetHeight}
-                      curveHeights={curveHeights}
-                      itemRefs={itemRefs}
-                      datasetRef={datasetRef}
-                      getChildNodeComponent={getChildNodeComponent}
-                      isReadOnlyMode={isReadOnlyMode}
-                    />
-                  </div>
-                </React.Fragment>
-              );
-            }
-          )}
-          {/* Select Machine Input */}
-          {!isReadOnlyMode && (
-            <div
-              className="ff-select-machine-input"
-              style={{
-                gridRow: `${currentRow}`,
-              }}
-            >
-              <ArcherElement
-                id="lastNode"
-                relations={[
-                  {
-                    targetId: 'rootNode',
-                    targetAnchor: 'left',
-                    sourceAnchor: 'left',
-                  },
-                ]}
-              >
-                <div>{getParentNodeComponent({ isMultiSelect: true })}</div>
-              </ArcherElement>
-            </div>
-          )}
-        </div>
-      </ArcherContainer>
-    </div>
-  );
-};
-
-export default ConnectingBranch;

package/src/components/ConnectingBranch/data.tsx

@@ -1,220 +0,0 @@
-const machineData = {
-  machines: {
-    multiple: true,
-    totalNoScript: 250,
-    selectedMachines: [
-      {
-        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',
-        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',
-              },
-              {
-                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>`,
-              },
-            ],
-          },
-        ],
-      },
-      {
-        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',
-              },
-              {
-                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>`,
-              },
-            ],
-          },
-          {
-            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',
-              },
-              {
-                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',
-              },
-            ],
-          },
-        ],
-      },
-      {
-        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',
-              },
-              {
-                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>`,
-              },
-            ],
-          },
-        ],
-      },
-    ],
-    executionType: 'SEND_SUITE_TO_ALL',
-  },
-};
-
-export default machineData;

package/src/components/ConnectingBranch/index.ts

@@ -1 +0,0 @@
-export { default } from './ConnectingBranch';