pixel-react 1.4.5 → 1.4.7

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>

package/src/components/SequentialConnectingBranch/types.ts

@@ -4,10 +4,13 @@ export interface SequentialConnectingBranchProps {
   machineInstances?: ExecutionContext[] | {}[];
   machineColumnWidth?: number;
   machineColumnCount?: number;
-  machineInstance: ExecutionContext;
-  selectedMachine?: string; // TODO: type will change in the future
-  onMachineSelectionChange?: (selectedMachine: Option) => void; // TODO: function will change in the future
+  selectedMachine?: Option;
   machineOptionsList?: Option[];
+  onHandleSelect?: (option: Option) => void;
+  onAddBrowserInstance?: () => void;
+  onUpdateAddBrowserInstance?: () => void;
+  onDeleteBrowserInstance?: (id: string, runCount: number) => void;
+  onAddRunBrowserInstance?: (id: string) => void;
 }
 
 // Type for machine information
@@ -28,7 +31,7 @@ export interface DeviceInfo {
 export interface ExecutionContext {
   id: string;
   clientId: string;
-  runCount: number;
+  numberOfRuns: number;
   executionEnv?: 'Local'; // Change to specific enum if more environments exist
   browserName?: 'Local' | 'mac' | 'android' | 'Google Chrome';
   browserVersion: string;

package/src/components/Tooltip/Tooltip.scss

@@ -18,6 +18,7 @@
   border-radius: 5px;
   padding: 6px 12px;
   opacity: 0;
+  z-index: 10000;
 
   &--visible {
     opacity: 1;

package/src/components/Tooltip/Tooltip.tsx

@@ -17,7 +17,6 @@ const Tooltip: React.FC<TooltipProps> = ({
   children,
   placement = 'bottom',
   disabled = false,
-  zIndex = 99,
 }) => {
   const [isVisible, setIsVisible] = useState(false);
   const titleRef: TitleRef = useRef(null);
@@ -179,7 +178,7 @@ const Tooltip: React.FC<TooltipProps> = ({
         createPortal(
           <div
             ref={titleRef}
-            style={{ ...styles[placement], zIndex }}
+            style={{ ...styles[placement] }}
             className={classNames('ff-tooltip', currentTheme, {
               'ff-tooltip--visible': isVisible,
             })}

package/src/utils/capitalize/capitalize.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { capitalize } from './capitalize';
+
+export default {
+  title: 'Utils/Capitalize', // Organize under the "Utils" category
+  component: capitalize,
+};
+
+export const Default = () => {
+  const examples = [
+    { input: 'hello', output: capitalize('hello') },
+    { input: 'world', output: capitalize('world') },
+    { input: '', output: capitalize('') },
+    { input: 'capitalize', output: capitalize('capitalize') },
+  ];
+
+  return (
+    <div>
+      <h3>Capitalize Function Examples</h3>
+      <table style={{ borderCollapse: 'collapse', width: '100%' }}>
+        <thead>
+          <tr>
+            <th style={{ border: '1px solid black', padding: '8px' }}>Input</th>
+            <th style={{ border: '1px solid black', padding: '8px' }}>
+              Output
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {examples.map((example, index) => (
+            <tr key={index}>
+              <td style={{ border: '1px solid black', padding: '8px' }}>
+                {example.input}
+              </td>
+              <td style={{ border: '1px solid black', padding: '8px' }}>
+                {example.output}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

package/src/utils/capitalize/capitalize.tsx

@@ -0,0 +1,4 @@
+export const capitalize = (text: string): string => {
+  if (!text) return '';
+  return text.charAt(0).toUpperCase() + text.slice(1);
+};

package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { getSequentialPayload } from './getSequentialPayload';
-import {
-  SequentialMachineInstance,
-  MachineExecutionInstanceDataSet,
-} from './types';
+import { MachineExecutionInstance, SequentialMachineInstance } from './types';
 import { ffid } from '../ffID/ffid';
 
 const SequentialPayloadComponent: React.FC<{
-  machineInstances: MachineExecutionInstanceDataSet[];
+  machineInstances: MachineExecutionInstance[];
 }> = ({ machineInstances }) => {
   const payload: SequentialMachineInstance[] =
     getSequentialPayload(machineInstances);

package/src/utils/getSequentialPayload/getSequentialPayload.ts

@@ -1,29 +1,16 @@
-import {
-  SequentialMachineInstance,
-  MachineExecutionInstanceDataSet,
-} from './types';
+import { MachineExecutionInstance, SequentialMachineInstance } from './types';
 
 export const getSequentialPayload = (
-  machineInstances: MachineExecutionInstanceDataSet[] = []
+  data: MachineExecutionInstance[]
 ): SequentialMachineInstance[] => {
-  return machineInstances.flatMap(
-    (machineInstance: MachineExecutionInstanceDataSet) =>
-      machineInstance.runLevelExecutionDataSets.map(
-        (runLevelExecutionDataSet) => ({
-          id: machineInstance.id,
-          clientId: machineInstance.clientId,
-          numberOfRuns: machineInstance.numberOfRuns,
-          executionEnv: machineInstance.executionEnv,
-          browserName: machineInstance.browserName,
-          browserVersion: machineInstance.browserVersion,
-          systemUrl: machineInstance.systemUrl,
-          machineInfo: machineInstance.machineInfo,
-          deviceInfo: machineInstance.deviceInfo,
-          headless: machineInstance.headless,
-          peVariableSetId: runLevelExecutionDataSet.peVariableSetId,
-          globalVariableSetId: runLevelExecutionDataSet.globalVariableSetId,
-          testDataSetId: runLevelExecutionDataSet.testDataSetId,
-        })
-      )
+  return data.flatMap((item) =>
+    item.runLevelExecutionDataSets.map((runLevel, index) => {
+      const { runLevelExecutionDataSets, ...rest } = item;
+      return {
+        ...rest,
+        ...runLevel,
+        numberOfRuns: index + 1,
+      };
+    })
   );
 };

package/src/utils/getSequentialPayload/types.ts

@@ -20,15 +20,12 @@ 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;