pixel-react 1.6.9 → 1.7.0

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

@@ -1,68 +1,76 @@
-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,
+  onUpdateAddBrowserInstance,
+  addInstanceLabel = '',
+  scriptType = '',
+  projectType = 'Web',
+}: 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}
+            onUpdateAddBrowserInstance={onUpdateAddBrowserInstance}
+            addInstanceLabel={addInstanceLabel}
+            scriptType={scriptType}
+            projectType={projectType}
+          />
+        </Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default ConnectingBranches;

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

@@ -1,17 +1,24 @@
-import { dataSetValues, ExecutionContext } from '../../types';
-
-export interface ConnectingBranchesProps {
-  machineBranchInstances: ExecutionContext[] | {}[];
-  machineColumnCount: number;
-  machineColumnWidth: number;
-  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;
-}
+import { dataSetValues, ExecutionContext } from '../../types';
+
+export interface ConnectingBranchesProps {
+  machineBranchInstances: ExecutionContext[] | {}[];
+  machineColumnCount: number;
+  machineColumnWidth: number;
+  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;
+  addInstanceLabel?: string;
+  scriptType?: string;
+  projectType?: string;
+  onUpdateAddBrowserInstance: (
+    modalId: string,
+    machineInstance: ExecutionContext
+  ) => void;
+}

package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss

@@ -1,31 +1,31 @@
-.ff-datalist-modal-header-wrapper,
-.ff-datalist-modal-child-wrapper,
-.ff-datalist-modal-footer-wrapper {
-  margin: 0 8px;
-}
-
-.ff-datalist-modal-header-wrapper {
-  width: 255px;
-  border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
-  display: flex;
-  align-items: center;
-}
-
-.ff-datalist-modal-child-wrapper {
-  .variable {
-    margin: 8px 0;
-  }
-}
-
-.ff-datalist-modal-footer-wrapper {
-  display: flex;
-  justify-content: space-between;
-  border-top: 1px solid var(--ff-connecting-branch-modal-border);
-
-  .datalist-button-wrapper {
-    display: flex;
-    gap: 10px;
-    margin-top: 4px;
-    justify-content: flex-end;
-  }
-}
+.ff-datalist-modal-header-wrapper,
+.ff-datalist-modal-child-wrapper,
+.ff-datalist-modal-footer-wrapper {
+  margin: 0 8px;
+}
+
+.ff-datalist-modal-header-wrapper {
+  width: 255px;
+  border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
+  display: flex;
+  align-items: center;
+}
+
+.ff-datalist-modal-child-wrapper {
+  .variable {
+    margin: 8px 0;
+  }
+}
+
+.ff-datalist-modal-footer-wrapper {
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid var(--ff-connecting-branch-modal-border);
+
+  .datalist-button-wrapper {
+    display: flex;
+    gap: 10px;
+    margin-top: 4px;
+    justify-content: flex-end;
+  }
+}

package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx

@@ -1,85 +1,85 @@
-import { forwardRef, RefObject } from 'react';
-import MiniModal from '../../../MiniModal';
-import Typography from '../../../Typography';
-import './DatasetListModal.scss';
-import Select from '../../../Select';
-import Checkbox from '../../../Checkbox';
-import Button from '../../../Button';
-import { DatasetListModalProps } from './types';
-
-const DatasetListModal = forwardRef<HTMLButtonElement, DatasetListModalProps>(
-  (props, ref) => {
-    const selectOptions = [
-      { label: 'Project Environment Variable' },
-      { label: 'Global Variables' },
-      { label: 'Test Data Set' },
-    ];
-
-    const renderSelectOptions = () =>
-      selectOptions.map(({ label }, idx) => (
-        <Select
-          key={idx}
-          optionsList={[]}
-          onChange={() => {}}
-          label={label}
-          className="variable"
-        />
-      ));
-
-    const renderFooterContent = () => (
-      <div className="ff-datalist-modal-footer-wrapper">
-        <Checkbox checked={false} label="Set as Default" />
-        <div className="datalist-button-wrapper">
-          <Button label="Cancel" variant="tertiary" />
-          <Button label="Update" variant="primary" />
-        </div>
-      </div>
-    );
-
-    return (
-      <div>
-        <MiniModal
-          anchorRef={ref as RefObject<HTMLButtonElement>}
-          headerProps={
-            <div className="ff-datalist-modal-header-wrapper">
-              <Typography
-                as="span"
-                color="var(--ff-connecting-branch-modal-header)"
-                fontWeight="semi-bold"
-                fontSize={12}
-                lineHeight="38px"
-              >
-                Data Sets
-              </Typography>
-            </div>
-          }
-          childContent={
-            <div className="ff-datalist-modal-child-wrapper">
-              {renderSelectOptions()}
-            </div>
-          }
-          footerContent={renderFooterContent()}
-          cancelButtonProps={{
-            text: 'Cancel',
-
-            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-            onClick: props?.onUpdateDatasetList,
-          }}
-          proceedButtonProps={{
-            text: 'Proceed',
-            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-            onClick: props?.onUpdateDatasetList,
-          }}
-          modalPosition="right"
-          isPopOver
-          leftTopArrow
-          extraRightSpace={{ leftTopArrow: 40 }}
-          extraLeftSpace={{ rightAlignModal: 110 }}
-          {...props}
-        />
-      </div>
-    );
-  }
-);
-
-export default DatasetListModal;
+import { forwardRef, RefObject } from 'react';
+import MiniModal from '../../../MiniModal';
+import Typography from '../../../Typography';
+import './DatasetListModal.scss';
+import Select from '../../../Select';
+import Checkbox from '../../../Checkbox';
+import Button from '../../../Button';
+import { DatasetListModalProps } from './types';
+
+const DatasetListModal = forwardRef<HTMLButtonElement, DatasetListModalProps>(
+  (props, ref) => {
+    const selectOptions = [
+      { label: 'Project Environment Variable' },
+      { label: 'Global Variables' },
+      { label: 'Test Data Set' },
+    ];
+
+    const renderSelectOptions = () =>
+      selectOptions.map(({ label }, idx) => (
+        <Select
+          key={idx}
+          optionsList={[]}
+          onChange={() => {}}
+          label={label}
+          className="variable"
+        />
+      ));
+
+    const renderFooterContent = () => (
+      <div className="ff-datalist-modal-footer-wrapper">
+        <Checkbox checked={false} label="Set as Default" />
+        <div className="datalist-button-wrapper">
+          <Button label="Cancel" variant="tertiary" />
+          <Button label="Update" variant="primary" />
+        </div>
+      </div>
+    );
+
+    return (
+      <div>
+        <MiniModal
+          anchorRef={ref as RefObject<HTMLButtonElement>}
+          headerProps={
+            <div className="ff-datalist-modal-header-wrapper">
+              <Typography
+                as="span"
+                color="var(--ff-connecting-branch-modal-header)"
+                fontWeight="semi-bold"
+                fontSize={12}
+                lineHeight="38px"
+              >
+                Data Sets
+              </Typography>
+            </div>
+          }
+          childContent={
+            <div className="ff-datalist-modal-child-wrapper">
+              {renderSelectOptions()}
+            </div>
+          }
+          footerContent={renderFooterContent()}
+          cancelButtonProps={{
+            text: 'Cancel',
+
+            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
+            onClick: props?.onUpdateDatasetList,
+          }}
+          proceedButtonProps={{
+            text: 'Proceed',
+            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
+            onClick: props?.onUpdateDatasetList,
+          }}
+          modalPosition="right"
+          isPopOver
+          leftTopArrow
+          extraRightSpace={{ leftTopArrow: 40 }}
+          extraLeftSpace={{ rightAlignModal: 110 }}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+
+export default DatasetListModal;

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

@@ -1,4 +1,4 @@
-export interface DatasetListModalProps {
-  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-  onUpdateDatasetList: () => void;
-}
+export interface DatasetListModalProps {
+  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
+  onUpdateDatasetList: () => void;
+}

package/src/components/SequentialConnectingBranch/index.ts

@@ -1 +1 @@
-export { default } from './SequentialConnectingBranch';
+export { default } from './SequentialConnectingBranch';

package/src/components/SequentialConnectingBranch/types.ts

@@ -1,60 +1,62 @@
-import { Option } from '../Select/types';
-
-export interface SequentialConnectingBranchProps {
-  machineInstances?: ExecutionContext[] | {}[];
-  machineColumnWidth?: number;
-  machineColumnCount?: number;
-  selectedMachine?: Option;
-  machineOptionsList?: Option[];
-  onHandleSelect?: (option: Option) => void;
-  onAddBrowserInstance?: (modalId: string) => void;
-  onUpdateAddBrowserInstance?: () => void;
-  onDeleteBrowserInstance?: (id: string, runCount: number) => 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
-export interface MachineInfo {
-  osName: string;
-  osVersion: string;
-  hostName: string;
-}
-
-// Type for device information
-export interface DeviceInfo {
-  // Define properties as needed; assuming it can have various structures.
-  // For example:
-  // deviceName: string;
-  // deviceType: string;
-}
-
-export interface ExecutionContext {
-  machineInstanceId: string;
-  clientId: string;
-  numberOfRuns: number;
-  executionEnv?: 'Local'; // Change to specific enum if more environments exist
-  browserName?: 'Local' | 'mac' | 'android' | 'Google Chrome';
-  browserVersion: string;
-  systemUrl: string;
-  machineInfo: MachineInfo;
-  deviceInfo: DeviceInfo[];
-  headless: boolean;
-  peVariableSetId: string;
-  globalVariableSetId: string;
-  testDataSetId: string;
-}
-
-export interface dataSetValues {
-  peVariableSetId: string;
-  globalVariableSetId: string;
-  testDataSetId: string;
-}
+import { Option } from '../Select/types';
+
+export interface SequentialConnectingBranchProps {
+  machineInstances?: ExecutionContext[] | {}[];
+  machineColumnWidth?: number;
+  machineColumnCount?: number;
+  selectedMachine?: Option;
+  machineOptionsList?: Option[];
+  onHandleSelect?: (option: Option) => void;
+  onAddBrowserInstance?: (modalId: string) => void;
+  onUpdateAddBrowserInstance: (modalId: string, machineInstance: ExecutionContext) => void;
+  onDeleteBrowserInstance?: (id: string, runCount: number) => void;
+  onAddRunBrowserInstance?: (machineInstanceId: string) => void;
+  onDeleteMachineInstance?: () => void;
+  onUpdateDataSetList: (
+    id: string,
+    dataSetObject: dataSetValues,
+    isInstance?: boolean,
+    noOfRuns?: number,
+    machineInstanceId?: string
+  ) => void;
+  dataSetValues: dataSetValues;
+  addInstanceLabel?: string;
+  scriptType?: string;
+  projectType?: string;
+}
+
+// Type for machine information
+export interface MachineInfo {
+  osName: string;
+  osVersion: string;
+  hostName: string;
+  iconName: string;
+}
+
+// Type for device information
+export interface DeviceInfo {
+  name: string;
+  platform: string;
+}
+
+export interface ExecutionContext {
+  machineInstanceId: string;
+  clientId: string;
+  numberOfRuns: number;
+  executionEnv?: 'Local'; // Change to specific enum if more environments exist
+  browserName?: 'Local' | 'mac' | 'android' | 'Google Chrome';
+  browserVersion: string;
+  systemUrl: string;
+  machineInfo: MachineInfo;
+  deviceInfo: DeviceInfo[];
+  headless: boolean;
+  peVariableSetId: string;
+  globalVariableSetId: string;
+  testDataSetId: string;
+}
+
+export interface dataSetValues {
+  peVariableSetId: string;
+  globalVariableSetId: string;
+  testDataSetId: string;
+}