pixel-react 1.4.5 → 1.4.6

package/lib/utils/getSequentialPayload/getSequentialPayload.d.ts

@@ -1,2 +1,2 @@
-import { SequentialMachineInstance, MachineExecutionInstanceDataSet } from './types';
-export declare const getSequentialPayload: (machineInstances?: MachineExecutionInstanceDataSet[]) => SequentialMachineInstance[];
+import { MachineExecutionInstance, SequentialMachineInstance } from './types';
+export declare const getSequentialPayload: (data: MachineExecutionInstance[]) => SequentialMachineInstance[];

package/lib/utils/getSequentialPayload/types.d.ts

@@ -18,12 +18,10 @@ export interface MachineExecutionInstance {
     systemUrl: string;
     machineInfo: OperatingSystemInfo;
     deviceInfo: any[];
-    headless: boolean;
-}
-export interface MachineExecutionInstanceDataSet extends MachineExecutionInstance {
     runLevelExecutionDataSets: RunLevelExecutionDataSet[];
+    headless: boolean;
 }
-export interface SequentialMachineInstance extends MachineExecutionInstance {
+export interface SequentialMachineInstance extends Omit<MachineExecutionInstance, 'runLevelExecutionDataSets'> {
     peVariableSetId: string;
     globalVariableSetId: string;
     testDataSetId: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -26,10 +26,10 @@
     "@storybook/react": "^8.4.5",
     "@storybook/react-vite": "^8.4.5",
     "@storybook/test": "^8.4.5",
+    "@types/js-beautify": "^1.14.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-google-recaptcha": "^2.1.9",
-    "@types/js-beautify": "^1.14.3",
     "chromatic": "^11.16.5",
     "postcss": "^8.4.35",
     "react": "^18.2.0",

package/src/assets/icons/add_file.svg

@@ -1,14 +1,5 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_911_11481)">
-        <path fill-rule="evenodd" clip-rule="evenodd"
-            d="M19.1307 13.4822C19.6597 13.4822 20.0885 13.0534 20.0885 12.5243C20.0885 11.9953 19.6597 11.5665 19.1307 11.5665L12.9579 11.5665L12.9579 5.39368C12.9579 4.86467 12.529 4.43582 12 4.43582C11.471 4.43582 11.0421 4.86467 11.0421 5.39368L11.0421 11.5665L4.86934 11.5665C4.34033 11.5665 3.91148 11.9953 3.91148 12.5243C3.91148 13.0534 4.34032 13.4822 4.86934 13.4822L11.0421 13.4822V19.655C11.0421 20.184 11.471 20.6129 12 20.6129C12.529 20.6129 12.9579 20.184 12.9579 19.655V13.4822L19.1307 13.4822Z"
-            fill="currentColor" />
-    </g>
-    <defs>
-        <clipPath id="clip0_911_11481">
-            <path
-                d="M0 4.52441C0 2.31528 1.79086 0.524414 4 0.524414H20C22.2091 0.524414 24 2.31528 24 4.52441V20.5244C24 22.7336 22.2091 24.5244 20 24.5244H4C1.79086 24.5244 0 22.7336 0 20.5244V4.52441Z"
-                fill="currentColor" />
-        </clipPath>
-    </defs>
+<svg width="16" height="16" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M16.1307 9.4822C16.6597 9.4822 17.0885 9.05336 17.0885 8.52434C17.0885 7.99533 16.6597 7.56648 16.1307 7.56648L9.95786 7.56648L9.95786 1.39368C9.95786 0.864669 9.52901 0.435821 9 0.435821C8.47099 0.435821 8.04214 0.864669 8.04214 1.39368L8.04214 7.56648L1.86934 7.56648C1.34033 7.56648 0.911477 7.99533 0.911477 8.52434C0.911477 9.05336 1.34032 9.4822 1.86934 9.4822L8.04214 9.4822V15.655C8.04214 16.184 8.47099 16.6129 9 16.6129C9.52901 16.6129 9.95786 16.184 9.95786 15.655V9.4822L16.1307 9.4822Z"
+        fill="currentColor" />
 </svg>

package/src/assets/icons/eye_open_icon.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2947_11191)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8985 12.297C17.5046 14.8002 14.861 16.3552 12.0009 16.3552C9.13896 16.3552 6.49546 14.8002 5.10149 12.297C4.99413 12.1026 4.99413 11.8972 5.10149 11.703C6.49546 9.19978 9.13896 7.64494 12.0009 7.64494C14.861 7.64494 17.5045 9.19978 18.8985 11.703C19.0078 11.8972 19.0078 12.1026 18.8985 12.297ZM19.789 11.2067C18.2154 8.38043 15.2313 6.62494 12.0009 6.62494C8.76871 6.62494 5.78457 8.38043 4.21104 11.2067C3.92965 11.7109 3.92965 12.2891 4.21104 12.7929C5.78457 15.6192 8.76871 17.375 12.0009 17.375C15.2313 17.375 18.2154 15.6192 19.789 12.7929C20.0703 12.2891 20.0703 11.7109 19.789 11.2067ZM12.0009 14.0923C13.1542 14.0923 14.0928 13.1538 14.0928 11.9999C14.0928 10.8461 13.1542 9.9075 12.0009 9.9075C10.8458 9.9075 9.9072 10.8461 9.9072 11.9999C9.9072 13.1538 10.8458 14.0923 12.0009 14.0923ZM12.0009 8.88749C10.283 8.88749 8.8872 10.2839 8.8872 11.9999C8.8872 13.7164 10.283 15.1122 12.0009 15.1122C13.717 15.1122 15.1128 13.7164 15.1128 11.9999C15.1128 10.2839 13.717 8.88749 12.0009 8.88749Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_2947_11191">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/windows.svg

@@ -1,6 +1,10 @@
 <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.80888 12.0185L0.114433 11.3751L0.00422248 11.36L0.00421445 11.2489L0.00396729 7.39195V7.26428H0.131141H4.82583H4.95351V7.39195V11.8924V12.0384L4.80888 12.0185Z" fill="#00ADEF"/>
-<path d="M12.0003 7.39195L11.9987 12.8732V13.0197L11.8541 12.9993L5.59136 12.1182L5.48114 12.1028V11.9921V7.39195V7.26428H5.60882H11.8731H12.0003V7.39195Z" fill="#00ADEF"/>
-<path d="M5.59086 1.91281L11.8536 1.00154L11.9993 0.980347V1.12771V6.60891V6.73658H11.8715H5.60882H5.48114V6.60891V2.03899V1.92879L5.59086 1.91281Z" fill="#00ADEF"/>
-<path d="M0.00418431 6.60893L-0.000124334 2.79077L-0.000244141 2.67959L0.110094 2.6646L4.80836 2.02659L4.95299 2.00696V2.15276V6.60893V6.7366H4.82531H0.131358H0.00433601L0.00418431 6.60893Z" fill="#00ADEF"/>
+    <path d="M4.80888 12.0185L0.114433 11.3751L0.00422248 11.36L0.00421445 11.2489L0.00396729 7.39195V7.26428H0.131141H4.82583H4.95351V7.39195V11.8924V12.0384L4.80888 12.0185Z"
+          fill="currentColor"/>
+    <path d="M12.0003 7.39195L11.9987 12.8732V13.0197L11.8541 12.9993L5.59136 12.1182L5.48114 12.1028V11.9921V7.39195V7.26428H5.60882H11.8731H12.0003V7.39195Z"
+          fill="currentColor"/>
+    <path d="M5.59086 1.91281L11.8536 1.00154L11.9993 0.980347V1.12771V6.60891V6.73658H11.8715H5.60882H5.48114V6.60891V2.03899V1.92879L5.59086 1.91281Z"
+          fill="currentColor"/>
+    <path d="M0.00418431 6.60893L-0.000124334 2.79077L-0.000244141 2.67959L0.110094 2.6646L4.80836 2.02659L4.95299 2.00696V2.15276V6.60893V6.7366H4.82531H0.131358H0.00433601L0.00418431 6.60893Z"
+          fill="currentColor"/>
 </svg>

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx

@@ -141,7 +141,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <Typography
-                  fontSize={22}
+                  fontSize={20}
                   fontWeight="semi-bold"
                   className="ff-legend-value"
                   color={
@@ -152,7 +152,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                 >
                   {item.value} {showUnit && unit?.toUpperCase()}
                 </Typography>
-                <Typography fontSize={12} className="ff-legend-key">
+                <Typography fontSize={10} className="ff-legend-key">
                   {item.key}
                 </Typography>
               </div>

package/src/components/Checkbox/Checkbox.scss

@@ -14,7 +14,7 @@
     @include mixins.box(16px, 1px solid var(--checkbox-border-color));
     box-sizing: border-box;
     border-radius: 2px;
-    margin-right: 8px;
+    margin-right: 4px;
     background-color: var(--checkbox-bg-color);
     position: relative;
     @include mixins.center-content;

package/src/components/Icon/iconList.ts

@@ -202,6 +202,7 @@ import AddLabelIcon from '../../assets/icons/add_label_icon.svg?react';
 import QuickRunSettingIcon from '../../assets/icons/quick_run_setting_icon.svg?react';
 import RunManualTestcaseIcon from '../../assets/icons/run_manual_testcase_icon.svg?react';
 import RunAutomationScriptsIcon from '../../assets/icons/run_automation_scripts_icon.svg?react';
+import EyeOpenIcon from '../../assets/icons/eye_open_icon.svg?react';
 
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -402,6 +403,7 @@ Components['add_label_icon'] = AddLabelIcon;
 Components['quick_run_setting'] = QuickRunSettingIcon;
 Components['run_manual_testcase'] = RunManualTestcaseIcon;
 Components['run_automation_scripts'] = RunAutomationScriptsIcon;
+Components['eye_open_icon'] = EyeOpenIcon;
 
 
 export default Components;

package/src/components/MachineInputField/MachineInputField.scss

@@ -9,6 +9,7 @@
     height: 100%;
     width: 100%;
     border: 1px solid var(--ff-machine-input-field-border-color);
+    padding: 0 8px 0 0;
     border-radius: 4px;
     display: flex;
     align-items: center;
@@ -17,9 +18,10 @@
     .ff-machine-icon-text-wrapper,
     .ff-machine-icon-text-wrapper-reverse {
       display: flex;
+      align-items: center;
 
       .ff-machine-icon {
-        margin-right: 8px;
+        margin-left: 4px;
       }
     }
     
@@ -39,6 +41,6 @@
     background-color: var(--ff-machine-input-field-border-color);
     border-radius: 4px;
     padding: 1px 2px;
-    height: 10px;
+    height: 12px;
   }
 }

package/src/components/MachineInputField/MachineInputField.tsx

@@ -13,6 +13,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
       runCount = 0,
       className = '',
       contentReverse = false,
+      onClick = () => {},
     },
     ref
   ) => {
@@ -28,6 +29,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
         ref={ref}
         style={{ width: width }}
         className={classNames('ff-machine-input-field-wrapper', className)}
+        onClick={onClick}
       >
         <Typography
           as="span"

package/src/components/MachineInputField/types.ts

@@ -9,4 +9,5 @@ export interface MachineInputFieldProps {
   runCount: number;
   className?: string;
   contentReverse?: boolean;
+  onClick?: () => void;
 }

package/src/components/MenuOption/MenuOption.tsx

@@ -70,7 +70,7 @@ const OptionCard = ({
         };
       case 'down':
         return {
-          top: menuPosition.bottom,
+          top: menuPosition.bottom - 5,
           left: menuPosition.rightSpaceAvailable + 12,
         };
       case 'left':
@@ -131,13 +131,12 @@ const MenuOption = ({
     fromBottom: 0,
     rightSpaceAvailable: 0,
   });
-  useEffect(() => {
-    calculateDims();
-  });
+
   const closeDropDown = () => setIsClicked(false);
 
   const onIconClickHandler = () => {
     onClick();
+    calculateDims();
     setIsClicked((prev) => !prev);
   };
 

package/src/components/MultiSelect/MultiSelect.scss

@@ -79,59 +79,64 @@
           top: -6px;
           pointer-events: none;
         }
-        .ff-multiselect-chip-container {
+        .ff-multiselect-chip-parent-container{
+          width: 100%;
           display: flex;
-          flex-wrap: wrap;
-          align-items: center;
-          gap: 5px;
-          .ff-multiselect-chip {
-            @include flex-center;
-            box-sizing: border-box;
-            border: 0.5px solid #f1ebf2;
-            padding: 0 1px 0 4px;
-            gap: 4px;
-            height: 16px;
-            border-radius: 15px;
-            .ff-multiselect-chip-label {
-              @extend .fontXs;
-              line-height: 14px;
-              color: var(--tooltip-bg-color);
-              &.label-padding {
-                padding: 5px 2px;
+          justify-content: space-between;
+          .ff-multiselect-chip-container {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: 5px;
+            .ff-multiselect-chip {
+              @include flex-center;
+              box-sizing: border-box;
+              border: 0.5px solid #f1ebf2;
+              padding: 0 1px 0 4px;
+              gap: 4px;
+              height: 16px;
+              border-radius: 15px;
+              .ff-multiselect-chip-label {
+                @extend .fontXs;
+                line-height: 14px;
+                color: var(--tooltip-bg-color);
+                &.label-padding {
+                  padding: 5px 2px;
+                }
+              }
+              .ff-multiselect-chip-close-icon {
+                color: var(--brand-color);
+                cursor: pointer;
               }
             }
-            .ff-multiselect-chip-close-icon {
-              color: var(--brand-color);
-              cursor: pointer;
-            }
-          }
-          .ff-multiselect-input-container {
-            flex: 1;
-            min-width: 20px;
-            input {
-              width: 100%;
-              min-width: 30px;
-              max-width: calc(100% - 0px);
-              padding: 2px;
-              box-sizing: border-box;
-              border: none;
-              font-size: 12px;
-              &:focus {
-                outline: none;
+            .ff-multiselect-input-container {
+              flex: 1;
+              min-width: 20px;
+              input {
+                width: 100%;
+                min-width: 30px;
+                max-width: calc(100% - 0px);
+                padding: 2px;
+                box-sizing: border-box;
+                border: none;
+                font-size: 12px;
+                &:focus {
+                  outline: none;
+                }
               }
             }
           }
+          .ff-multiselect-more-chip {
+            display: flex;
+            align-items: center;
+            width: 16px;
+            @extend .fontSm;
+            font-weight: 600;
+            line-height: 16px;
+            color: var(--brand-color);
+          }
         }
       }
-      .ff-multiselect-more-chip {
-        display: flex;
-        align-items: center;
-        width: 16px;
-        @extend .fontSm;
-        font-weight: 600;
-        line-height: 16px;
-        color: var(--brand-color);
-      }
       &__toggle {
         display: flex;
         align-items: center;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -355,7 +355,7 @@ const MultiSelect = ({
             )}
 
             {!withSelectButton && (
-              <div>
+              <div className='ff-multiselect-chip-parent-container'>
                 <div className="ff-multiselect-chip-container">
                   {displayCount ? (
                     <>

package/src/components/Select/components/Dropdown.tsx

@@ -1,4 +1,4 @@
-import { type FC, useContext, useRef } from 'react';
+import React, { type FC, useContext, useRef } from 'react';
 import { dropdownDefaultCSSData, DropdownProps } from './types';
 import './Dropdown.scss';
 import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
@@ -65,6 +65,23 @@ const Dropdown: FC<DropdownProps> = ({
     };
   };
 
+  const getOptionLabel = (label: any) => {
+    if (React.isValidElement(label)) {
+      console.log('test');
+      return label;
+    }
+    console.log('test112');
+    return (
+      <Typography
+        as="div"
+        lineHeight="30px"
+        color="var(--ff-select-text-color)"
+      >
+        {label}
+      </Typography>
+    );
+  };
+
   return (
     <div
       className={classNames('ff-select-dropdown-wrapper', currentTheme)}
@@ -73,10 +90,7 @@ const Dropdown: FC<DropdownProps> = ({
     >
       {!checkEmpty(options) ? (
         options.map((option) => (
-          <Typography
-            key={ffid()}
-            as="div"
-            lineHeight="30px"
+          <div
             className={classNames(
               'ff-select-dropdown-option',
               {
@@ -85,14 +99,14 @@ const Dropdown: FC<DropdownProps> = ({
               },
               currentTheme
             )}
-            color="var(--ff-select-text-color)"
+            key={ffid()}
             onClick={() => {
               if ('disable' in option && option['disable']) return;
               onSelectOptionSelector(option);
             }}
           >
-            {getLabel(option, labelAccessor)}
-          </Typography>
+            {getOptionLabel(getLabel(option, labelAccessor))}
+          </div>
         ))
       ) : (
         <Typography

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss

@@ -1,3 +1,23 @@
+@mixin item-center {
+  display: flex;
+  align-items: center;
+}
+
+@mixin circle($size, $color) {
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+  background-color: $color;
+}
+
+@mixin arrow($color, $width, $height) {
+  width: $width;
+  height: $height;
+  background-color: $color;
+  clip-path: polygon(100% 50%, 0 100%, 0 0);
+  position: absolute;
+}
+
 .ff-sequential-connecting-branch-wrapper {
   .ff-connecting-select-branch-wrapper {
     height: 66px;
@@ -15,40 +35,29 @@
       }
 
       .ff-select-branch-arrow {
+        @include item-center;
         position: relative;
-        display: flex;
-        align-items: center;
 
         .ff-branch-arrow-wrapper {
+          margin: 0;
           width: 40px;
           border-top: 1px solid var(--ff-connecting-branch-color);
-          margin-top: 4px;
           position: relative;
 
           .ff-branch-arrow {
-            width: 6px;
-            height: 6px;
-            background-color:  var(--ff-connecting-branch-color);
-            clip-path: polygon(100% 50%, 0 100%, 0 0);
-            position: absolute;
+            @include arrow(var(--ff-connecting-branch-color), 6px, 6px);
             right: -1px;
             top: -3px;
           }
         }
 
         .ff-select-branch-point {
-          width: 5px;
-          height: 5px;
-          border-radius: 50%;
-          background-color:  var(--ff-connecting-branch-color);
+          @include circle(5px, var(--ff-connecting-branch-color));
           position: absolute;
           left: -3px;
           z-index: 102;
           top: 50%;
-        }
-
-        .branch-button {
-          margin-top: 4px;
+          transform: translateY(-50%);
         }
       }
 
@@ -57,21 +66,19 @@
         height: 38px;
 
         .ff-select-branch-point {
+          @include circle(5px, var(--ff-connecting-branch-color));
           position: absolute;
-          height: 5px;
-          width: 5px;
-          background-color:  var(--ff-connecting-branch-color);
-          border-radius: 50%;
-          top: 50%;
           left: -2px;
           z-index: 102;
+          top: 50%;
+          transform: translateY(-50%);
         }
 
         .ff-select-branch-arrow {
-          width: 0px;
+          width: 0;
           height: 62px;
           top: calc(50% + 1px);
-          border-left: 1px solid  var(--ff-connecting-branch-color);
+          border-left: 1px solid var(--ff-connecting-branch-color);
           z-index: 102;
         }
       }
@@ -80,21 +87,16 @@
     .ff-select-scope-datalist {
       box-sizing: border-box;
       width: 240px;
-      margin-top: 4px;
-      padding: 0px 4px;
       display: flex;
       justify-content: space-between;
 
       .ff-scope-wrapper {
-        display: flex;
-
-        .ff-scope-text {
-          margin-left: 4px;
-        }
+        @include item-center;
+        margin-right: 12px;
       }
 
       .ff-datalist-wrapper {
-        display: flex;
+        @include item-center;
 
         .ff-dataset-icon,
         .ff-run-delete-icon,
@@ -103,7 +105,7 @@
         }
 
         .ff-datalist-text {
-          margin: 0px 12px 0px 4px;
+          margin: 0 12px 0 0;
         }
       }
     }

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import SequentialConnectingBranch from './SequentialConnectingBranch';
-import {ffid} from '../../utils/ffID/ffid';
+import { useState } from 'react';
 
 const meta: Meta<typeof SequentialConnectingBranch> = {
   title: 'Components/SequentialConnectingBranch',
@@ -14,48 +14,42 @@ const meta: Meta<typeof SequentialConnectingBranch> = {
 type Story = StoryObj<typeof SequentialConnectingBranch>;
 
 export const Primary: Story = {
-  args: {
-    machineInstances: [
+  render: () => {
+    const machineList = [
       {
-        id: ffid(),
-        runCount: 1,
-        clientId: 'flinko-client-win-98ddb98f-2349-43ce-869e-c2d5350741a4',
-        executionEnv: 'Local',
-        browserName: 'Google Chrome',
-        browserVersion: '111.0.5563.112',
-        systemUrl: '',
-        machineInfo: {
-          osName: 'Windows 11 Pro',
-          osVersion: '10.0.22621',
-          hostName: 'TYSS-Kumuda',
-        },
-        deviceInfo: [],
-        headless: false,
-        peVariableSetId: 'UUID',
-        globalVariableSetId: 'UUID',
-        testDataSetId: 'UUID',
+        label: 'FFE 123',
+        value: 'FFE 123',
       },
-    ],
-    machineInstance: {
-      id: ffid(),
-      runCount: 1,
-      clientId: 'flinko-client-win-98ddb98f-2349-43ce-869e-c2d5350741a4',
-      executionEnv: 'Local',
-      browserName: 'Google Chrome',
-      browserVersion: '111.0.5563.112',
-      systemUrl: '',
-      machineInfo: {
-        osName: 'Windows 11 Pro',
-        osVersion: '10.0.22621',
-        hostName: 'TYSS-Kumuda',
+      {
+        label: 'FFE 234',
+        value: 'FFE 234',
+      },
+      {
+        label: 'FFE 345',
+        value: 'FFE 345',
+      },
+      {
+        label: 'FFE 456',
+        value: 'FFE 456',
       },
-      deviceInfo: [],
-      headless: false,
-      peVariableSetId: 'UUID',
-      globalVariableSetId: 'UUID',
-      testDataSetId: 'UUID',
-    },
-    selectedMachine: 'test',
+    ];
+    const [selectedMachine, setSelectedMachine] = useState({});
+    const [machineInstances, setMachineInstances] = useState<any>([]);
+    return (
+      <>
+        <SequentialConnectingBranch
+          machineOptionsList={machineList}
+          machineInstances={machineInstances}
+          selectedMachine={selectedMachine}
+          onHandleSelect={(option) => {
+            setSelectedMachine(option);
+          }}
+          onAddBrowserInstance={() => {
+            setMachineInstances([...machineInstances, {}]);
+          }}
+        />
+      </>
+    );
   },
 };