pixel-react 1.4.4 → 1.4.6

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, {}]);
+          }}
+        />
+      </>
+    );
   },
 };
 

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx

@@ -7,102 +7,36 @@ import Typography from '../Typography';
 import './SequentialConnectingBranch.scss';
 import { useEffect, useRef, useState } from 'react';
 import ConnectingBranches from './components/ConnectingBranches/ConnectingBranches';
-import DatasetListModal from './components/DatasetListModal/DatasetListModal';
-import AddBrowserModal from './components/AddBrowserModal/AddBrowserModal';
 import { ExecutionContext, SequentialConnectingBranchProps } from './types';
-import { Option } from '../Select/types';
-import { ffid } from '../../utils/ffID/ffid';
 
 const SequentialConnectingBranch = ({
   machineInstances = [],
   machineColumnWidth = 180,
   machineColumnCount = 1,
-  machineInstance,
-  selectedMachine = '',
+  selectedMachine = {},
   machineOptionsList = [],
-  onMachineSelectionChange = () => {},
+  onHandleSelect = () => {},
+  onAddBrowserInstance = () => {},
+  onAddRunBrowserInstance = () => {},
+  onDeleteBrowserInstance = () => {},
 }: SequentialConnectingBranchProps) => {
   const dataListRef = useRef<HTMLButtonElement>(null);
   const selectButtonRef = useRef<HTMLButtonElement>(null);
   const defaultMachineColumnCount = Math.max(machineColumnCount, 1);
   const defaultMachineColumnWidth = Math.max(machineColumnWidth, 180);
 
-  const isBrowserDetails = checkEmpty(machineInstances);
-  const [datasetListModal, setDatasetListModal] = useState(
-    !!selectedMachine && isBrowserDetails
-  );
-  const [addBrowserModal, setAddBrowserModal] = useState(false);
   const [machineBranchInstances, setMachineBranchInstances] = useState<
     ExecutionContext[] | {}[]
-  >(machineInstances);
-
-  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-  const onHandleSelect = (option: Option) => {
-    setDatasetListModal(true);
-    onMachineSelectionChange(option);
-  };
-
-  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-  const onUpdateDatasetList = () => {
-    setDatasetListModal(false);
-    setAddBrowserModal(true);
-  };
-
-  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-  const onUpdateAddBrowser = () => {
-    setAddBrowserModal(false);
-    setDatasetListModal(false);
-  };
-
-  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-  const onAddBrowser = () => {
-    const newMachineInstance = { ...machineInstance, id: ffid() };
-    setMachineBranchInstances((prevInstances) => [
-      ...prevInstances.slice(0, -1),
-      newMachineInstance,
-      {},
-    ]);
-  };
-
-  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-  const onDeleteBrowser = (id: string, runCount: number) => {
-    const machineInstance = machineBranchInstances.filter((instance) => {
-      if ('id' in instance && 'runCount' in instance) {
-        return instance.id !== id || instance.runCount !== runCount;
-      }
-      return true;
-    });
-    setMachineBranchInstances(machineInstance);
-  };
-
-  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-  const onAddRunBrowser = (id: string) => {
-    const index = machineBranchInstances.findLastIndex(
-      (instance) => 'id' in instance && instance.id === id
-    );
+  >([]);
 
-    if (index !== -1) {
-      const existingMachineInstance = machineBranchInstances[index];
-
-      if (existingMachineInstance && 'runCount' in existingMachineInstance) {
-        const newRunInstance = {
-          ...existingMachineInstance,
-          runCount: (existingMachineInstance.runCount ?? 0) + 1,
-        };
-
-        setMachineBranchInstances((prevInstances) => [
-          ...prevInstances.slice(0, index + 1),
-          newRunInstance,
-          ...prevInstances.slice(index + 1),
-        ]);
-      }
-    }
-  };
+  const isMachineInstances = checkEmpty(machineInstances);
+  const isMachineSelected = checkEmpty(selectedMachine);
 
   useEffect(() => {
-    setMachineBranchInstances([...machineBranchInstances, {}]);
-  }, []);
-
+    setMachineBranchInstances([...machineInstances, {}]);
+  }, [machineInstances]);
+  console.log(machineInstances, 'machineInstances');
+  console.log(machineBranchInstances, 'machineBranchInstances');
   return (
     <div className="ff-sequential-connecting-branch-wrapper">
       <div className="ff-connecting-select-branch-wrapper">
@@ -114,21 +48,25 @@ const SequentialConnectingBranch = ({
             label="Choose Machine"
             showLabel={true}
             className="ff-sequential-select-branch"
+            width={'240px'}
+            selectedOption={selectedMachine}
+            valueAccessor={'name'}
           />
-          {/* {isBrowserDetails && !!selectedMachine && ( */}
-          {!!selectedMachine && (
+          {!isMachineSelected && (
             <div
               className={classNames({
-                'ff-select-branch-arrow': isBrowserDetails,
-                'ff-select-branch-arrow-down': !isBrowserDetails,
+                'ff-select-branch-arrow': isMachineInstances,
+                'ff-select-branch-arrow-down': !isMachineInstances,
               })}
             >
               <div className="ff-select-branch-point"></div>
               <div className="ff-select-branch-arrow">
                 <div className="ff-branch-arrow-wrapper">
-                  {isBrowserDetails && <div className="ff-branch-arrow"></div>}
+                  {isMachineInstances && (
+                    <div className="ff-branch-arrow"></div>
+                  )}
                 </div>
-                {addBrowserModal && (
+                {isMachineInstances && (
                   <>
                     <Button
                       variant="tertiary"
@@ -136,12 +74,7 @@ const SequentialConnectingBranch = ({
                       size="small"
                       className="branch-button"
                       ref={selectButtonRef}
-                      onClick={onAddBrowser}
-                    />
-
-                    <AddBrowserModal
-                      ref={selectButtonRef}
-                      onUpdateAddBrowser={onUpdateAddBrowser}
+                      onClick={onAddBrowserInstance}
                     />
                   </>
                 )}
@@ -168,12 +101,6 @@ const SequentialConnectingBranch = ({
               className="ff-dataset-icon"
               ref={dataListRef}
             />
-            {datasetListModal && (
-              <DatasetListModal
-                ref={dataListRef}
-                onUpdateDatasetList={onUpdateDatasetList}
-              />
-            )}
             <Typography
               as="span"
               fontSize={12}
@@ -191,14 +118,14 @@ const SequentialConnectingBranch = ({
         </div>
       </div>
       <div className="ff-sequential-branches-wrapper">
-        {!isBrowserDetails && (
+        {!isMachineInstances && (
           <ConnectingBranches
             machineBranchInstances={machineBranchInstances}
             machineColumnCount={defaultMachineColumnCount}
             machineColumnWidth={defaultMachineColumnWidth}
-            onAddBrowser={onAddBrowser}
-            onDeleteBrowser={onDeleteBrowser}
-            onAddRunBrowser={onAddRunBrowser}
+            onAddBrowser={onAddBrowserInstance}
+            onDeleteBrowser={onDeleteBrowserInstance}
+            onAddRunBrowser={onAddRunBrowserInstance}
           />
         )}
       </div>

package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss

@@ -40,14 +40,14 @@
 @mixin branch-arrow(
   $clip: polygon(0 0, 0% 100%, 100% 50%),
   $horizontal-pos: right,
-  $offset: -1px
+  $offset: -2px
 ) {
   position: absolute;
   height: 5px;
   width: 5px;
   background-color: var(--ff-connecting-branch-color);
   clip-path: $clip;
-  top: calc(25% - 4px);
+  top: calc(25% - 3px);
   #{$horizontal-pos}: $offset;
   z-index: 2;
 }
@@ -138,12 +138,12 @@
     }
 
     .ff-connecting-branch-point-reverse {
-      @include branch-point($position: left, $offset: -4px);
+      @include branch-point($position: left, $offset: -2px);
     }
   }
 
   .ff-connecting-branch-middle-arrow {
-    height: 0px;
+    height: 0;
     width: 100%;
     margin-top: calc(50% - 3px);
     position: relative;
@@ -180,5 +180,5 @@
 
 .ff-connecting-branch-grid-reverse {
   direction: rtl;
-  margin: 0px 0px 16px 0px;
+  margin: 0 0 16px 0;
 }

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

@@ -91,7 +91,9 @@ const Branches = ({
           executionEnv = 'Local',
           browserName = 'Local',
           browserVersion = '1',
-          runCount = 0,
+          numberOfRuns = 'numberOfRuns' in machineInstance
+            ? machineInstance.numberOfRuns
+            : 0,
           id = '',
         } = machineInstance as ExecutionContext;
         return (
@@ -107,7 +109,7 @@ const Branches = ({
                   ></div>
                   <MachineInputField
                     width={`${machineColumnWidth}px`}
-                    runCount={runCount}
+                    runCount={numberOfRuns}
                     key={ffid()}
                     options={[
                       { label: executionEnv, type: executionEnv },
@@ -144,7 +146,7 @@ const Branches = ({
                   <Icon
                     name="delete"
                     className="ff-connecting-delete-icon"
-                    onClick={() => onDeleteBrowser(id, runCount)}
+                    onClick={() => onDeleteBrowser(id, numberOfRuns)}
                     color="var(--ff-connecting-branch-delete-color)"
                   />
                 </div>