pixel-react 1.6.8 → 1.7.0

package/src/components/PopUpModal/PopUpModal.tsx

@@ -14,12 +14,13 @@ const PopUpModal: FC<PopUpModalProps> = ({
   subTitleMessage = 'Unsaved Changes.',
   iconName,
   modalMessage = 'Your web service data will be lost. Are you sure you want to exit?',
-  footerMessage = 'How do you want to proceed?',
   firstButtonLabel = 'Cancel',
   secondButtonLabel = 'Continue',
   buttonVariant = 'warning',
   border = '1px solid var(--warning-modal-border-color)',
-  colorForTitleMessage = 'var(--status-button-bg-warning)'
+  popupWidth = '420',
+  colorForTitleMessage = 'var(--status-button-bg-warning)',
+  footerContent,
 }) => {
   return (
     <Modal
@@ -55,7 +56,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
               </Typography>
               <div className="warning_modal_message_wrapper">
                 <Typography fontSize={16}>{modalMessage}</Typography>
-                <Typography fontSize={16}>{footerMessage}</Typography>
+                <Typography as='div'>{footerContent}</Typography>
               </div>
             </div>
           </div>
@@ -75,7 +76,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
       }
       ariaHideApp
       isFooterDisplayed={false}
-      customWidth="420px"
+      customWidth={`${popupWidth}px`}
       customHeight="226px"
       boxShadow="0px 1px 4px 0px var(--toaster-boxshadow)"
       border={border}

package/src/components/PopUpModal/types.ts

@@ -6,10 +6,11 @@ export interface PopUpModalProps {
   subTitleMessage?: string;
   iconName: string;
   modalMessage: string;
-  footerMessage: string;
   firstButtonLabel?: string;
   secondButtonLabel: string;
   buttonVariant: any;
   border: string;
+    popupWidth?:string,
   colorForTitleMessage?: string;
+  footerContent?:React.ReactNode;
 }

package/src/components/ProgressBar/ProgressBar.scss

@@ -0,0 +1,46 @@
+.ff-progress-bar-container {
+  width: 100%;
+  min-width: 200px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  &.ff-has-label {
+    justify-content: space-between;
+  }
+
+  &:not(.ff-has-label) {
+    .ff-progress-bar-track {
+      flex: 1;
+    }
+  }
+}
+
+.ff-progress-bar-track {
+  flex: 1;
+  background-color: var(--ff-progress-bar-bg-color);
+  border-radius: 5px;
+  overflow: hidden;
+  position: relative;
+}
+
+.ff-progress-bar {
+  border-radius: 5px;
+  transition: width 0.3s ease;
+}
+
+.ff-progress-bar-percentage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.ff-progress-bar-label {
+  max-width: 50px;
+  font-size: 14px;
+  color: var(--ff-card-status-text-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+import ProgressBar from './ProgressBar';
+
+const meta: Meta<typeof ProgressBar> = {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ProgressBar>;
+
+export const DashBoardProgressBar: Story = {
+  args: {
+    progressPercentage: 75,
+    color: 'var(--brand-color)',
+    label: '200 MB',
+  },
+};

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import type { ProgressBarProps } from './types';
+import './ProgressBar.scss';
+import Typography from '../Typography';
+
+const ProgressBar: React.FC<ProgressBarProps> = ({
+  progressPercentage,
+  color = 'var(--brand-color)',
+  trackColor = '#f0f0f0',
+  height = 10,
+  label,
+  labelFontSize = 12,
+  labelTextColor = 'var(--ff-card-status-text-color)',
+  showPercentage = false,
+  percentageFontSize = 10,
+  percentageTextColor = 'var(--tooltip-text-color)',
+}) => {
+  // Ensure progress is between 0 and 100
+  const validProgress = Math.max(0, Math.min(progressPercentage, 100));
+
+  // Bar style for the filled part
+  const barStyle = {
+    width: `${validProgress}%`,
+    backgroundColor: color,
+    height: `${height}px`,
+  };
+
+  // Track style for the empty part of the progress bar
+  const trackStyle = {
+    backgroundColor: trackColor,
+    height: `${height}px`,
+  };
+
+  return (
+    <div className={`ff-progress-bar-container ${label ? 'ff-has-label' : ''}`}>
+      <div className="ff-progress-bar-track" style={trackStyle}>
+        <div className="ff-progress-bar" style={barStyle}>
+          {showPercentage && (
+            <Typography
+              className="ff-progress-bar-percentage"
+              fontSize={percentageFontSize}
+              color={percentageTextColor}
+            >{`${validProgress}%`}</Typography>
+          )}
+        </div>
+      </div>
+      {label && (
+        <Typography
+          as="div"
+          className="ff-progress-bar-label"
+          fontSize={labelFontSize}
+          color={labelTextColor}
+        >
+          {label}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default ProgressBar;

package/src/components/ProgressBar/index.ts

@@ -0,0 +1 @@
+export {default} from './ProgressBar';

package/src/components/ProgressBar/types.ts

@@ -0,0 +1,12 @@
+export interface ProgressBarProps {
+  progressPercentage: number; // The current progress value (0-100)
+  color?: string; // Custom color of the progress bar
+  trackColor?: string; // Custom color of the track (empty part)
+  height?: number;
+  label?: string; // Optional label to display inside or outside the progress bar
+  showPercentage?: boolean; // Whether to show the percentage inside the bar
+  percentageFontSize?: number;
+  percentageTextColor?: string;
+  labelFontSize?: number; // Font size of the label
+  labelTextColor?: string;
+}

package/src/components/Search/Search.tsx

@@ -55,6 +55,12 @@ const Search = ({
       onExpand?.(!isExpand);
     }
   };
+  const handleChange = (data: string) => {
+    setSearchValue(data);
+    if (data === '') {
+      onSearch('');
+    }
+  };
 
   return (
     <div
@@ -90,7 +96,9 @@ const Search = ({
         disabled={disabled}
         ref={inputRef}
         autoComplete="off"
-        onChange={(e) => setSearchValue(e.target.value)}
+        onChange={(e) => {
+          handleChange(e.target.value);
+        }}
         onKeyDown={handleKeyDown}
       />
 

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import SequentialConnectingBranch from './SequentialConnectingBranch';
 import { useState } from 'react';
+import React from 'react';
 
 const meta: Meta<typeof SequentialConnectingBranch> = {
   title: 'Components/SequentialConnectingBranch',
@@ -44,9 +45,19 @@ export const Primary: Story = {
           onHandleSelect={(option) => {
             setSelectedMachine(option);
           }}
-          onAddBrowserInstance={() => {
-            setMachineInstances([...machineInstances, {}]);
+          onAddBrowserInstance={() => {}}
+          onUpdateAddBrowserInstance={() => {}}
+          onAddRunBrowserInstance={() => {}}
+          onDeleteMachineInstance={() => {}}
+          onDeleteBrowserInstance={() => {}}
+          dataSetValues={{
+            peVariableSetId: 'Test dev',
+            globalVariableSetId: 'Test dev',
+            testDataSetId: 'Test dev',
           }}
+          onUpdateDataSetList={() => {}}
+          machineColumnWidth={500}
+          machineColumnCount={3}
         />
       </>
     );

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx

@@ -26,6 +26,10 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
     globalVariableSetId: '',
     peVariableSetId: '',
   },
+  onUpdateAddBrowserInstance = () => {},
+  addInstanceLabel = 'Add Environment',
+  scriptType = 'Automation',
+  projectType = 'Web',
 }) => {
   const [selectedMachineInstance, setSelectedMachineInstance] = useState({});
   const selectButtonRef = useRef<HTMLButtonElement>(null);
@@ -37,7 +41,11 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
   >([]);
 
   const isMachineInstances = checkEmpty(machineInstances);
-  const isMachineSelected = checkEmpty(selectedMachine.value?.clientId);
+  let isMachineSelected = checkEmpty(selectedMachine.value?.clientId);
+
+  if (scriptType === 'Manual') {
+    isMachineSelected = checkEmpty(selectedMachine.value);
+  }
 
   const getMachineStatusColor = (machineStatus: string = '') => {
     if (machineStatus.toLowerCase().includes('inactive'))
@@ -56,6 +64,9 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
   useEffect(() => {
     setMachineBranchInstances([...machineInstances, {}]);
   }, [machineInstances]);
+
+  const hideDataSet = scriptType.toLowerCase() !== 'manual';
+
   return (
     <div className="ff-sequential-connecting-branch-wrapper">
       <div className="ff-connecting-select-branch-wrapper">
@@ -118,25 +129,27 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
             </div>
 
             <div className="ff-datalist-wrapper">
-              <div
-                id="ff-sequential-machine-datalist"
-                onClick={() =>
-                  onUpdateDataSetList(
-                    'ff-sequential-machine-datalist',
-                    dataSetValues
-                  )
-                }
-              >
-                <Icon name="datalist_icon" className="ff-dataset-icon" />
-                <Typography
-                  as="span"
-                  fontSize={12}
-                  color="var(--ff-connecting-branch-color)"
-                  className="ff-datalist-text"
+              {hideDataSet && (
+                <div
+                  id="ff-sequential-machine-datalist"
+                  onClick={() =>
+                    onUpdateDataSetList(
+                      'ff-sequential-machine-datalist',
+                      dataSetValues
+                    )
+                  }
                 >
-                  Dataset List
-                </Typography>
-              </div>
+                  <Icon name="datalist_icon" className="ff-dataset-icon" />
+                  <Typography
+                    as="span"
+                    fontSize={12}
+                    color="var(--ff-connecting-branch-color)"
+                    className="ff-datalist-text"
+                  >
+                    Dataset List
+                  </Typography>
+                </div>
+              )}
               <Icon
                 name="delete"
                 className="ff-run-delete-icon"
@@ -157,6 +170,10 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
             onDeleteBrowser={onDeleteBrowserInstance}
             onAddRunBrowser={onAddRunBrowserInstance}
             onUpdateDataSetList={onUpdateDataSetList}
+            onUpdateAddBrowserInstance={onUpdateAddBrowserInstance}
+            addInstanceLabel={addInstanceLabel}
+            scriptType={scriptType}
+            projectType={projectType}
           />
         )}
       </div>

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

@@ -9,6 +9,7 @@ import Icon from '../../../Icon';
 import Typography from '../../../Typography';
 import Button from '../../../Button';
 import './Branches.scss';
+import { MachineType } from '../../../MachineInputField/types';
 
 const Branches = ({
   machineInstances,
@@ -21,6 +22,10 @@ const Branches = ({
   onDeleteBrowser,
   onAddRunBrowser,
   onUpdateDataSetList,
+  onUpdateAddBrowserInstance,
+  addInstanceLabel = '',
+  scriptType = '',
+  projectType = '',
 }: BranchesProps) => {
   const evenRow = rowIndex % 2 === 0;
   const lastMachineInstance = checkEmpty(
@@ -56,6 +61,78 @@ const Branches = ({
     }, 40px ${machineColumnWidth}px) 24px`;
   };
 
+  const getMachineLabelOptionList = (
+    type: string = '',
+    machineInstance: ExecutionContext | {}
+  ) => {
+    const {
+      executionEnv,
+      browserName,
+      browserVersion,
+      machineInfo: { osVersion, iconName },
+      deviceInfo,
+    } = machineInstance as ExecutionContext;
+    // Helper to handle device info safely
+    const getDeviceOption = (platform: string, defaultType: string = '', index = 0) =>
+      deviceInfo?.[index]?.platform?.toLowerCase().includes(platform ?? '')
+        ? defaultType
+        : undefined;
+
+    const getEnvironment = (environment: string = '') => {
+      if (environment.toLowerCase().includes('browserstack'))
+        return 'Browserstack';
+      if (environment.toLowerCase().includes('lambdatest')) return 'LambdaTest';
+      if (environment.toLowerCase().includes('saucelabs')) return 'SauceLabs';
+      return '';
+    };
+
+    // Base options
+    const baseOptions = [
+      {
+        label: executionEnv,
+        type: getEnvironment(executionEnv),
+      },
+    ];
+
+    // Web-specific options
+    const webOptions = [
+      {
+        label: osVersion,
+        type: iconName,
+      },
+      {
+        label: browserVersion,
+        type: browserName,
+      },
+    ];
+
+    // Mobile-specific options
+    const mobileOptions = [
+      {
+        label: deviceInfo?.[0]?.name,
+        type: getDeviceOption('android', 'android_icon', 0),
+      },
+      {
+        label: deviceInfo?.[1]?.name,
+        type: getDeviceOption('ios', 'mac_icon', 1),
+      },
+    ];
+
+    // Determine options based on the type
+    switch (type.toLowerCase()) {
+      case 'web':
+        return [...baseOptions, ...webOptions];
+      case 'web & mobile':
+        return [...baseOptions, ...webOptions, ...mobileOptions];
+      case 'mobile':
+        return [...baseOptions, ...mobileOptions];
+      default:
+        return [];
+    }
+  };
+
+  const hideDataSet = scriptType.toLowerCase() !== 'manual';
+
   return (
     <div
       className={classNames({
@@ -91,9 +168,6 @@ const Branches = ({
       </div>
       {machineInstances?.map((machineInstance, index) => {
         const {
-          executionEnv = 'Local',
-          browserName = 'Local',
-          browserVersion = '1',
           numberOfRuns = 'numberOfRuns' in machineInstance
             ? machineInstance.numberOfRuns
             : 0,
@@ -117,11 +191,20 @@ const Branches = ({
                     width={`${machineColumnWidth}px`}
                     runCount={numberOfRuns}
                     key={ffid()}
-                    options={[
-                      { label: executionEnv, type: executionEnv },
-                      { label: browserVersion, type: browserName },
-                    ]}
+                    options={
+                      getMachineLabelOptionList(
+                        projectType,
+                        machineInstance
+                      ) as MachineType[]
+                    }
                     contentReverse={!evenRow}
+                    modalId={`${machineInstanceId}-runCount-${numberOfRuns}`}
+                    onClick={() =>
+                      onUpdateAddBrowserInstance(
+                        `${machineInstanceId}-runCount-0`,
+                          machineInstance as ExecutionContext
+                      )
+                    }
                   />
                 </div>
                 <div
@@ -130,31 +213,36 @@ const Branches = ({
                     '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)"
+                  {hideDataSet && (
+                    <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
+                        )
+                      }
                     >
-                      Dataset List
-                    </Typography>
-                  </div>
+                      <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"
@@ -182,7 +270,7 @@ const Branches = ({
                 <Button
                   id={`ff-sequential-branch-add-${machineInstanceId}`}
                   variant="tertiary"
-                  label="Add Environrment"
+                  label={addInstanceLabel}
                   onClick={() =>
                     onAddBrowser(
                       `ff-sequential-branch-add-${machineInstanceId}`

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

@@ -17,6 +17,13 @@ export interface BranchesProps {
     noOfRuns?: number,
     machineInstanceId?: string
   ) => void;
+  addInstanceLabel?: string;
+  scriptType?: string;
+  onUpdateAddBrowserInstance: (
+    modalId: string,
+    machineInstance: ExecutionContext
+  ) => void;
+  projectType?: string;
 }
 
 export interface branchTypeProps {

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

@@ -14,6 +14,10 @@ const ConnectingBranches = ({
   onDeleteBrowser,
   onAddRunBrowser,
   onUpdateDataSetList,
+  onUpdateAddBrowserInstance,
+  addInstanceLabel = '',
+  scriptType = '',
+  projectType = 'Web',
 }: ConnectingBranchesProps) => {
   const [machineInstance, setMachineInstance] = useState<
     ExecutionContext[] | {}[]
@@ -58,6 +62,10 @@ const ConnectingBranches = ({
               machineInstancesRow[index - 1]?.[machineColumnCount - 1]
             }
             onUpdateDataSetList={onUpdateDataSetList}
+            onUpdateAddBrowserInstance={onUpdateAddBrowserInstance}
+            addInstanceLabel={addInstanceLabel}
+            scriptType={scriptType}
+            projectType={projectType}
           />
         </Fragment>
       ))}

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

@@ -14,4 +14,11 @@ export interface ConnectingBranchesProps {
     noOfRuns?: number,
     machineInstanceId?: string
   ) => void;
+  addInstanceLabel?: string;
+  scriptType?: string;
+  projectType?: string;
+  onUpdateAddBrowserInstance: (
+    modalId: string,
+    machineInstance: ExecutionContext
+  ) => void;
 }

package/src/components/SequentialConnectingBranch/types.ts

@@ -8,7 +8,7 @@ export interface SequentialConnectingBranchProps {
   machineOptionsList?: Option[];
   onHandleSelect?: (option: Option) => void;
   onAddBrowserInstance?: (modalId: string) => void;
-  onUpdateAddBrowserInstance?: () => void;
+  onUpdateAddBrowserInstance: (modalId: string, machineInstance: ExecutionContext) => void;
   onDeleteBrowserInstance?: (id: string, runCount: number) => void;
   onAddRunBrowserInstance?: (machineInstanceId: string) => void;
   onDeleteMachineInstance?: () => void;
@@ -20,6 +20,9 @@ export interface SequentialConnectingBranchProps {
     machineInstanceId?: string
   ) => void;
   dataSetValues: dataSetValues;
+  addInstanceLabel?: string;
+  scriptType?: string;
+  projectType?: string;
 }
 
 // Type for machine information
@@ -27,14 +30,13 @@ export interface MachineInfo {
   osName: string;
   osVersion: string;
   hostName: string;
+  iconName: string;
 }
 
 // Type for device information
 export interface DeviceInfo {
-  // Define properties as needed; assuming it can have various structures.
-  // For example:
-  // deviceName: string;
-  // deviceType: string;
+  name: string;
+  platform: string;
 }
 
 export interface ExecutionContext {

package/src/components/Table/Table.scss

@@ -9,6 +9,7 @@
   z-index: 100;
   cursor: pointer;
 }
+
 .ff-table {
   width: 100%;
   th,

package/src/components/TableTree/Components/TableBody.tsx

@@ -13,7 +13,8 @@ const TableBody = React.memo(
     onCheckBoxChange,
   }: TableBodyProps) => (
     <tbody>
-      {flattenedTreeData.map(({ node, level }) => {
+      <tr id="ff-table-tree-first-node" />
+      {flattenedTreeData?.map(({ node, level }) => {
         return (
           <TableRow
             key={node.id}
@@ -28,6 +29,7 @@ const TableBody = React.memo(
           />
         );
       })}
+      <tr id="ff-table-tree-last-node" />
     </tbody>
   )
 );