pixel-react 1.6.7 → 1.6.9

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

@@ -1,236 +1,236 @@
-import classNames from 'classnames';
-import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
-import { BranchesProps } from './types';
-import { Fragment } from 'react/jsx-runtime';
-import { ffid } from '../../../../utils/ffID/ffid';
-import { ExecutionContext } from '../../types';
-import MachineInputField from '../../../MachineInputField';
-import Icon from '../../../Icon';
-import Typography from '../../../Typography';
-import Button from '../../../Button';
-import './Branches.scss';
-
-const Branches = ({
-  machineInstances,
-  rowIndex,
-  machineColumnCount,
-  machineColumnWidth,
-  nextRowMachineInstance,
-  previousRowMachineInstance,
-  onAddBrowser,
-  onDeleteBrowser,
-  onAddRunBrowser,
-  onUpdateDataSetList,
-}: BranchesProps) => {
-  const evenRow = rowIndex % 2 === 0;
-  const lastMachineInstance = checkEmpty(
-    machineInstances[machineColumnCount - 1]
-  );
-
-  const getBorderStyle = (
-    currentBranch: ExecutionContext | {} | undefined,
-    nextBranch: ExecutionContext | {} | undefined
-  ) => {
-    if (
-      currentBranch &&
-      nextBranch &&
-      'machineInstanceId' in currentBranch &&
-      'machineInstanceId' in nextBranch
-    ) {
-      return currentBranch.machineInstanceId === nextBranch.machineInstanceId
-        ? 'dashed'
-        : 'solid';
-    }
-    return 'solid';
-  };
-
-  const showMiddleArrow = (index: number) =>
-    machineInstances.length - 1 !== index && machineColumnCount > 1;
-
-  const getGridTemplateColumnStyle = () => {
-    if (machineColumnCount === 1) {
-      return `24px ${machineColumnWidth}px 24px`;
-    }
-    return `24px ${machineColumnWidth}px repeat(${
-      machineColumnCount - 1
-    }, 40px ${machineColumnWidth}px) 24px`;
-  };
-
-  return (
-    <div
-      className={classNames({
-        'ff-connecting-branch-grid': evenRow,
-        'ff-connecting-branch-grid-reverse': !evenRow,
-      })}
-      style={{
-        gridTemplateColumns: getGridTemplateColumnStyle(),
-      }}
-    >
-      <div className="ff-connecting-branch-start-wrapper">
-        <div
-          className={classNames({
-            'ff-connecting-branch-arrow': evenRow,
-            'ff-connecting-branch-arrow-reverse': !evenRow,
-          })}
-        ></div>
-        <div
-          className={classNames({
-            'ff-connecting-branch-container': evenRow,
-            'ff-connecting-branch-container-reverse': !evenRow,
-          })}
-          style={{
-            border: `1px ${getBorderStyle(
-              machineInstances[0],
-              previousRowMachineInstance
-            )} var(--ff-connecting-branch-color)`,
-            borderTop: 'none',
-            borderLeft: `${!evenRow && 'none'}`,
-            borderRight: `${evenRow && 'none'}`,
-          }}
-        ></div>
-      </div>
-      {machineInstances?.map((machineInstance, index) => {
-        const {
-          executionEnv = 'Local',
-          browserName = 'Local',
-          browserVersion = '1',
-          numberOfRuns = 'numberOfRuns' in machineInstance
-            ? machineInstance.numberOfRuns
-            : 0,
-          machineInstanceId = '',
-          peVariableSetId = '',
-          globalVariableSetId = '',
-          testDataSetId = '',
-        } = machineInstance as ExecutionContext;
-        return (
-          <Fragment key={ffid()}>
-            {!checkEmpty(machineInstance) ? (
-              <div>
-                <div className="ff-connecting-branch-input-point-wrapper">
-                  <div
-                    className={classNames({
-                      'ff-connecting-branch-point': evenRow,
-                      'ff-connecting-branch-point-reverse': !evenRow,
-                    })}
-                  ></div>
-                  <MachineInputField
-                    width={`${machineColumnWidth}px`}
-                    runCount={numberOfRuns}
-                    key={ffid()}
-                    options={[
-                      { label: executionEnv, type: executionEnv },
-                      { label: browserVersion, type: browserName },
-                    ]}
-                    contentReverse={!evenRow}
-                  />
-                </div>
-                <div
-                  className={classNames({
-                    'ff-connecting-branch-datalist': evenRow,
-                    'ff-connecting-branch-datalist-reverse': !evenRow,
-                  })}
-                >
-                  <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
-                      )
-                    }
-                  >
-                    <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(machineInstanceId)}
-                    color="var(--ff-connecting-branch-color)"
-                  />
-                  <Typography
-                    className="ff-connecting-text"
-                    color="var(--ff-connecting-branch-color)"
-                  >
-                    Run
-                  </Typography>
-                  <Icon
-                    name="delete"
-                    className="ff-connecting-delete-icon"
-                    onClick={() =>
-                      onDeleteBrowser(machineInstanceId, numberOfRuns)
-                    }
-                    color="var(--ff-connecting-branch-delete-color)"
-                  />
-                </div>
-              </div>
-            ) : (
-              <div className="ff-connecting-branch-browser-button">
-                <Button
-                  id={`ff-sequential-branch-add-${machineInstanceId}`}
-                  variant="tertiary"
-                  label="Add Environrment"
-                  onClick={() =>
-                    onAddBrowser(
-                      `ff-sequential-branch-add-${machineInstanceId}`
-                    )
-                  }
-                />
-              </div>
-            )}
-            {showMiddleArrow(index) && (
-              <div
-                className="ff-connecting-branch-middle-arrow"
-                style={{
-                  borderTop: `1px ${getBorderStyle(
-                    machineInstance,
-                    machineInstances[index + 1]
-                  )} var(--ff-connecting-branch-color)`,
-                }}
-              >
-                <div
-                  className={classNames({
-                    'ff-connecting-branch-arrow': evenRow,
-                    'ff-connecting-branch-arrow-reverse': !evenRow,
-                  })}
-                ></div>
-              </div>
-            )}
-          </Fragment>
-        );
-      })}
-      {!lastMachineInstance && (
-        <div
-          className={classNames({
-            'ff-connecting-branch-end-arrow': evenRow,
-            'ff-connecting-branch-end-arrow-reverse': !evenRow,
-          })}
-          style={{
-            border: `1px ${getBorderStyle(
-              machineInstances[machineColumnCount - 1],
-              nextRowMachineInstance
-            )} var(--ff-connecting-branch-color)`,
-            borderBottom: 'none',
-            borderLeft: `${evenRow && 'none'}`,
-            borderRight: `${!evenRow && 'none'}`,
-          }}
-        ></div>
-      )}
-    </div>
-  );
-};
-
-export default Branches;
+import classNames from 'classnames';
+import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
+import { BranchesProps } from './types';
+import { Fragment } from 'react/jsx-runtime';
+import { ffid } from '../../../../utils/ffID/ffid';
+import { ExecutionContext } from '../../types';
+import MachineInputField from '../../../MachineInputField';
+import Icon from '../../../Icon';
+import Typography from '../../../Typography';
+import Button from '../../../Button';
+import './Branches.scss';
+
+const Branches = ({
+  machineInstances,
+  rowIndex,
+  machineColumnCount,
+  machineColumnWidth,
+  nextRowMachineInstance,
+  previousRowMachineInstance,
+  onAddBrowser,
+  onDeleteBrowser,
+  onAddRunBrowser,
+  onUpdateDataSetList,
+}: BranchesProps) => {
+  const evenRow = rowIndex % 2 === 0;
+  const lastMachineInstance = checkEmpty(
+    machineInstances[machineColumnCount - 1]
+  );
+
+  const getBorderStyle = (
+    currentBranch: ExecutionContext | {} | undefined,
+    nextBranch: ExecutionContext | {} | undefined
+  ) => {
+    if (
+      currentBranch &&
+      nextBranch &&
+      'machineInstanceId' in currentBranch &&
+      'machineInstanceId' in nextBranch
+    ) {
+      return currentBranch.machineInstanceId === nextBranch.machineInstanceId
+        ? 'dashed'
+        : 'solid';
+    }
+    return 'solid';
+  };
+
+  const showMiddleArrow = (index: number) =>
+    machineInstances.length - 1 !== index && machineColumnCount > 1;
+
+  const getGridTemplateColumnStyle = () => {
+    if (machineColumnCount === 1) {
+      return `24px ${machineColumnWidth}px 24px`;
+    }
+    return `24px ${machineColumnWidth}px repeat(${
+      machineColumnCount - 1
+    }, 40px ${machineColumnWidth}px) 24px`;
+  };
+
+  return (
+    <div
+      className={classNames({
+        'ff-connecting-branch-grid': evenRow,
+        'ff-connecting-branch-grid-reverse': !evenRow,
+      })}
+      style={{
+        gridTemplateColumns: getGridTemplateColumnStyle(),
+      }}
+    >
+      <div className="ff-connecting-branch-start-wrapper">
+        <div
+          className={classNames({
+            'ff-connecting-branch-arrow': evenRow,
+            'ff-connecting-branch-arrow-reverse': !evenRow,
+          })}
+        ></div>
+        <div
+          className={classNames({
+            'ff-connecting-branch-container': evenRow,
+            'ff-connecting-branch-container-reverse': !evenRow,
+          })}
+          style={{
+            border: `1px ${getBorderStyle(
+              machineInstances[0],
+              previousRowMachineInstance
+            )} var(--ff-connecting-branch-color)`,
+            borderTop: 'none',
+            borderLeft: `${!evenRow && 'none'}`,
+            borderRight: `${evenRow && 'none'}`,
+          }}
+        ></div>
+      </div>
+      {machineInstances?.map((machineInstance, index) => {
+        const {
+          executionEnv = 'Local',
+          browserName = 'Local',
+          browserVersion = '1',
+          numberOfRuns = 'numberOfRuns' in machineInstance
+            ? machineInstance.numberOfRuns
+            : 0,
+          machineInstanceId = '',
+          peVariableSetId = '',
+          globalVariableSetId = '',
+          testDataSetId = '',
+        } = machineInstance as ExecutionContext;
+        return (
+          <Fragment key={ffid()}>
+            {!checkEmpty(machineInstance) ? (
+              <div>
+                <div className="ff-connecting-branch-input-point-wrapper">
+                  <div
+                    className={classNames({
+                      'ff-connecting-branch-point': evenRow,
+                      'ff-connecting-branch-point-reverse': !evenRow,
+                    })}
+                  ></div>
+                  <MachineInputField
+                    width={`${machineColumnWidth}px`}
+                    runCount={numberOfRuns}
+                    key={ffid()}
+                    options={[
+                      { label: executionEnv, type: executionEnv },
+                      { label: browserVersion, type: browserName },
+                    ]}
+                    contentReverse={!evenRow}
+                  />
+                </div>
+                <div
+                  className={classNames({
+                    'ff-connecting-branch-datalist': evenRow,
+                    'ff-connecting-branch-datalist-reverse': !evenRow,
+                  })}
+                >
+                  <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
+                      )
+                    }
+                  >
+                    <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(machineInstanceId)}
+                    color="var(--ff-connecting-branch-color)"
+                  />
+                  <Typography
+                    className="ff-connecting-text"
+                    color="var(--ff-connecting-branch-color)"
+                  >
+                    Run
+                  </Typography>
+                  <Icon
+                    name="delete"
+                    className="ff-connecting-delete-icon"
+                    onClick={() =>
+                      onDeleteBrowser(machineInstanceId, numberOfRuns)
+                    }
+                    color="var(--ff-connecting-branch-delete-color)"
+                  />
+                </div>
+              </div>
+            ) : (
+              <div className="ff-connecting-branch-browser-button">
+                <Button
+                  id={`ff-sequential-branch-add-${machineInstanceId}`}
+                  variant="tertiary"
+                  label="Add Environrment"
+                  onClick={() =>
+                    onAddBrowser(
+                      `ff-sequential-branch-add-${machineInstanceId}`
+                    )
+                  }
+                />
+              </div>
+            )}
+            {showMiddleArrow(index) && (
+              <div
+                className="ff-connecting-branch-middle-arrow"
+                style={{
+                  borderTop: `1px ${getBorderStyle(
+                    machineInstance,
+                    machineInstances[index + 1]
+                  )} var(--ff-connecting-branch-color)`,
+                }}
+              >
+                <div
+                  className={classNames({
+                    'ff-connecting-branch-arrow': evenRow,
+                    'ff-connecting-branch-arrow-reverse': !evenRow,
+                  })}
+                ></div>
+              </div>
+            )}
+          </Fragment>
+        );
+      })}
+      {!lastMachineInstance && (
+        <div
+          className={classNames({
+            'ff-connecting-branch-end-arrow': evenRow,
+            'ff-connecting-branch-end-arrow-reverse': !evenRow,
+          })}
+          style={{
+            border: `1px ${getBorderStyle(
+              machineInstances[machineColumnCount - 1],
+              nextRowMachineInstance
+            )} var(--ff-connecting-branch-color)`,
+            borderBottom: 'none',
+            borderLeft: `${evenRow && 'none'}`,
+            borderRight: `${!evenRow && 'none'}`,
+          }}
+        ></div>
+      )}
+    </div>
+  );
+};
+
+export default Branches;

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

@@ -1,25 +1,25 @@
-import { dataSetValues, ExecutionContext } from '../../types';
-
-export interface BranchesProps {
-  machineInstances: ExecutionContext[] | {}[];
-  rowIndex: number;
-  machineColumnCount: number;
-  machineColumnWidth: number;
-  nextRowMachineInstance?: ExecutionContext | {} | undefined;
-  previousRowMachineInstance?: ExecutionContext | {} | undefined;
-  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 {
-  currentBranch: ExecutionContext | undefined | {};
-  nextBranch: ExecutionContext | undefined | {};
-}
+import { dataSetValues, ExecutionContext } from '../../types';
+
+export interface BranchesProps {
+  machineInstances: ExecutionContext[] | {}[];
+  rowIndex: number;
+  machineColumnCount: number;
+  machineColumnWidth: number;
+  nextRowMachineInstance?: ExecutionContext | {} | undefined;
+  previousRowMachineInstance?: ExecutionContext | {} | undefined;
+  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 {
+  currentBranch: ExecutionContext | undefined | {};
+  nextBranch: ExecutionContext | undefined | {};
+}

package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.scss

@@ -1,3 +1,3 @@
-.ff-connecting-branch-grid-wrapper {
-  box-sizing: border-box;
-}
+.ff-connecting-branch-grid-wrapper {
+  box-sizing: border-box;
+}

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

@@ -1,68 +1,68 @@
-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 Branches from '../Branches/Branches';
-import './ConnectingBranches.scss';
-
-const ConnectingBranches = ({
-  machineBranchInstances,
-  machineColumnCount,
-  machineColumnWidth,
-  onAddBrowser,
-  onDeleteBrowser,
-  onAddRunBrowser,
-  onUpdateDataSetList,
-}: ConnectingBranchesProps) => {
-  const [machineInstance, setMachineInstance] = useState<
-    ExecutionContext[] | {}[]
-  >(machineBranchInstances);
-
-  useEffect(() => {
-    setMachineInstance(machineBranchInstances);
-  }, [machineBranchInstances]);
-
-  const getMachineBranchInstancesChunk = (
-    machineBranchInstances: ExecutionContext[] | {}[],
-    chunkSize: number
-  ) => {
-    const machineBranchInstancesChunk = [];
-    for (let i = 0; i < machineBranchInstances.length; i += chunkSize) {
-      machineBranchInstancesChunk.push(
-        machineBranchInstances.slice(i, i + chunkSize)
-      );
-    }
-    return machineBranchInstancesChunk;
-  };
-
-  const machineInstancesRow = getMachineBranchInstancesChunk(
-    machineInstance,
-    machineColumnCount
-  );
-
-  return (
-    <div className="ff-connecting-branch-grid-wrapper">
-      {machineInstancesRow.map((machineInstances, index) => (
-        <Fragment key={ffid()}>
-          <Branches
-            machineInstances={machineInstances}
-            rowIndex={index}
-            machineColumnCount={machineColumnCount}
-            machineColumnWidth={machineColumnWidth}
-            onAddBrowser={onAddBrowser}
-            onDeleteBrowser={onDeleteBrowser}
-            onAddRunBrowser={onAddRunBrowser}
-            nextRowMachineInstance={machineInstancesRow[index + 1]?.[0]}
-            previousRowMachineInstance={
-              machineInstancesRow[index - 1]?.[machineColumnCount - 1]
-            }
-            onUpdateDataSetList={onUpdateDataSetList}
-          />
-        </Fragment>
-      ))}
-    </div>
-  );
-};
-
-export default ConnectingBranches;
+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 Branches from '../Branches/Branches';
+import './ConnectingBranches.scss';
+
+const ConnectingBranches = ({
+  machineBranchInstances,
+  machineColumnCount,
+  machineColumnWidth,
+  onAddBrowser,
+  onDeleteBrowser,
+  onAddRunBrowser,
+  onUpdateDataSetList,
+}: ConnectingBranchesProps) => {
+  const [machineInstance, setMachineInstance] = useState<
+    ExecutionContext[] | {}[]
+  >(machineBranchInstances);
+
+  useEffect(() => {
+    setMachineInstance(machineBranchInstances);
+  }, [machineBranchInstances]);
+
+  const getMachineBranchInstancesChunk = (
+    machineBranchInstances: ExecutionContext[] | {}[],
+    chunkSize: number
+  ) => {
+    const machineBranchInstancesChunk = [];
+    for (let i = 0; i < machineBranchInstances.length; i += chunkSize) {
+      machineBranchInstancesChunk.push(
+        machineBranchInstances.slice(i, i + chunkSize)
+      );
+    }
+    return machineBranchInstancesChunk;
+  };
+
+  const machineInstancesRow = getMachineBranchInstancesChunk(
+    machineInstance,
+    machineColumnCount
+  );
+
+  return (
+    <div className="ff-connecting-branch-grid-wrapper">
+      {machineInstancesRow.map((machineInstances, index) => (
+        <Fragment key={ffid()}>
+          <Branches
+            machineInstances={machineInstances}
+            rowIndex={index}
+            machineColumnCount={machineColumnCount}
+            machineColumnWidth={machineColumnWidth}
+            onAddBrowser={onAddBrowser}
+            onDeleteBrowser={onDeleteBrowser}
+            onAddRunBrowser={onAddRunBrowser}
+            nextRowMachineInstance={machineInstancesRow[index + 1]?.[0]}
+            previousRowMachineInstance={
+              machineInstancesRow[index - 1]?.[machineColumnCount - 1]
+            }
+            onUpdateDataSetList={onUpdateDataSetList}
+          />
+        </Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default ConnectingBranches;