pixel-react 1.9.6 → 1.9.8

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -55,6 +55,7 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
                 showBorder={false}
                 onChange={onDropdownChangeHandler}
                 disabled={disabled || !optionsRequired}
+                optionZIndex={999999}
                 optionsRequired={optionsRequired}
                 className={classNames('ff-floating-dropdown', {
                   'ff-floating-dropdown--disabled': !!disabled,

package/src/components/MobileSkin/MobileSkin.scss

@@ -37,14 +37,6 @@
     }
   }
 
-  .ff-notch {
-    background-color: var(--text-color);
-    border-radius: 24px;
-    position: absolute;
-    &.android-notch {
-      border-radius: 50%;
-    }
-  }
   .ff-nav-bar {
     height: 32px;
     padding: 8px;

package/src/components/MobileSkin/MobileSkin.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import MobileSkin from './MobileSkin';
+import React from 'react';
 
 const meta: Meta<typeof MobileSkin> = {
   title: 'Components/MobileSkin',
@@ -56,38 +57,38 @@ const defaultArgs = {
   navBarIcons: navBarIcons,
   mobileWidth: 220,
   mobileHeight: 448,
-  children: randomImage,
+  children: <p>No Data Found</p>,
 };
 
-export const iosPortraitView: Story = {
+export const PortraitView: Story = {
   args: {
     ...defaultArgs,
     orientation: 'portrait',
-    type: 'ios',
   },
 };
 
-export const iosLandscapeView: Story = {
+export const LandscapeView: Story = {
   args: {
     ...defaultArgs,
     orientation: 'landscape',
-    type: 'ios',
   },
 };
 
-export const androidPortraitView: Story = {
+export const PortraitViewWithNavbar: Story = {
   args: {
     ...defaultArgs,
     orientation: 'portrait',
-    type: 'android',
+    UtilityBar: true,
+    navBarIcons: navBarIcons,
   },
 };
 
-export const androidLandscapeView: Story = {
+export const LandscapeViewWithNavbar: Story = {
   args: {
     ...defaultArgs,
     orientation: 'landscape',
-    type: 'android',
+    UtilityBar: true,
+    navBarIcons: navBarIcons,
   },
 };
 export default meta;

package/src/components/MobileSkin/MobileSkin.tsx

@@ -7,16 +7,12 @@ import { MobileSkinProps } from './MobileSkinInterface';
 const MobileSkin: React.FC<MobileSkinProps> = ({
   children,
   orientation = '',
-  type = '',
   navBarIcons,
   mobileHeight = 448,
   mobileWidth = 220,
+  UtilityBar,
 }) => {
-  const notchHeight = (mobileHeight / 448) * 20;
-  const notchWidth = (mobileWidth / 220) * 60;
-
   const isPortrait = orientation === 'portrait';
-  const isIos = type === 'ios';
   const containerHeight = isPortrait ? mobileHeight : mobileWidth;
   const containerWidth = isPortrait ? mobileWidth : mobileHeight;
 
@@ -55,33 +51,22 @@ const MobileSkin: React.FC<MobileSkinProps> = ({
             )}
           </div>
         </div>
-
-        <div
-          className={`ff-notch ${!isIos ? 'android-notch' : ''}`}
-          style={{
-            height: !isIos ? 15 : isPortrait ? notchHeight : notchWidth,
-            width: !isIos ? 15 : isPortrait ? notchWidth : notchHeight,
-            transform: isPortrait
-              ? `translate(${mobileWidth * 0.01}px, ${mobileHeight * -0.43}px)`
-              : `translate(${containerWidth * -0.46}px, ${
-                  containerHeight * -0.01
-                }px)`,
-          }}
-        ></div>
-      </div>
-      <div className="ff-nav-bar">
-        {navBarIcons.map((icon, index) => (
-          <div
-            key={index}
-            className={`ff-nav-bar-icon ${icon?.className || ''} ${
-              index === navBarIcons.length - 1 ? 'last-icon' : ''
-            }`}
-            onClick={icon.onClick}
-          >
-            <Tooltip title={icon?.title} children={<Icon {...icon} />} />
-          </div>
-        ))}
       </div>
+      {UtilityBar && (
+        <div className="ff-nav-bar">
+          {navBarIcons?.map((icon, index) => (
+            <div
+              key={index}
+              className={`ff-nav-bar-icon ${icon?.className || ''} ${
+                index === navBarIcons.length - 1 ? 'last-icon' : ''
+              }`}
+              onClick={icon.onClick}
+            >
+              <Tooltip title={icon?.title} children={<Icon {...icon} />} />
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 };

package/src/components/MobileSkin/MobileSkinInterface.ts

@@ -6,8 +6,8 @@ interface NavBarIcon {
 export interface MobileSkinProps {
   children: React.ReactNode | string;
   orientation?: 'portrait' | 'landscape';
-  type: 'ios' | 'android';
-  navBarIcons: NavBarIcon[];
+  UtilityBar?: boolean;
+  navBarIcons?: NavBarIcon[];
   mobileHeight?: number;
   mobileWidth?: number;
 }

package/src/components/MobileSkin/types.ts

@@ -1,7 +1,8 @@
 export interface iconDetails {
   /**
-   * details of each icon
+   * details of each icon in which name must be there
    */
+  name: string;
   [key: string]: any;
 }
 export interface MobileSkinProps {
@@ -12,11 +13,7 @@ export interface MobileSkinProps {
   /**
    *    Portrait or landScape View of the Mobile
    */
-  orientation: "portrait" | "landscape";
-  /**
-   * type either it will be ios or android
-   */
-  type: string;
+  orientation: 'portrait' | 'landscape';
   /**
    *   height of the MobileSkin
    */
@@ -26,7 +23,11 @@ export interface MobileSkinProps {
    */
   mobileWidth?: number;
   /**
-   * takes the icons details like icon name , title, onClick event, height , width, etc
+   * if you need the lower navbar below the mobileSkin you pass this prop
+   */
+  UtilityBar?: boolean;
+  /**
+   * takes the icons details like icon name , title, onClick event, height , width, etc but name is must
    */
-  navbarIcons: Array<iconDetails>;
+  navbarIcons?: Array<iconDetails>;
 }

package/src/components/RadioButton/RadioButton.tsx

@@ -33,7 +33,11 @@ const RadioButton: React.FC<RadioButtonProps> = ({
         <span className="ff-radio-custom" />
         <Typography color="var(--text-color)" children={label} />
       </label>
-      {showTooltip && <Tooltip title={tooltipTitle}>{tooltipChildren}</Tooltip>}
+      {showTooltip && (
+        <Tooltip title={tooltipTitle} placement="right">
+          {tooltipChildren}
+        </Tooltip>
+      )}
     </div>
   );
 };

package/src/components/Select/Select.stories.tsx

@@ -347,6 +347,8 @@ export const IconOptionSelection: Story = {
         onChange={handleChange}
         showIcon={true}
         width={200}
+        optionsRequired={false}
+        disabled
       />
     );
   },

package/src/components/Select/Select.tsx

@@ -9,6 +9,7 @@ import Dropdown from './components/Dropdown';
 import { getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
 import usePortalPosition from '../../hooks/usePortalPosition';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import Tooltip from '../Tooltip';
 
 const Select: FC<SelectProps> = ({
   label = 'Default Label',
@@ -192,7 +193,9 @@ const Select: FC<SelectProps> = ({
         })}
       >
         {showIcon && (
-          <Icon name={searchedIcon} className="ff-select-input-icon" />
+          <Tooltip placement="bottom" title={searchedText}>
+            <Icon name={searchedIcon} className="ff-select-input-icon" />
+          </Tooltip>
         )}
         <input
           type="text"

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

@@ -8,7 +8,6 @@ import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
 import {
   getLabel,
-  getValue,
 } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
 import useClickOutside from '../../../hooks/useClickOutside';
 import Icon from '../../Icon';
@@ -113,7 +112,7 @@ const Dropdown: FC<DropdownProps> = ({
                 'ff-select-dropdown-option',
                 {
                   'ff-select-dropdown-option__selected':
-                    getValue(option, valueAccessor) === selectedOption,
+                    getLabel(option, valueAccessor) === selectedOption,
                 },
                 currentTheme
               )}

package/src/components/Select/types.ts

@@ -117,7 +117,12 @@ export interface SelectProps {
   /**
    * Provide the boolean value if tooltip is reuired or not
    */
-  showToolTip?: boolean
+  showToolTip?: boolean;
+
+  /**
+   * Provide the background color for the select label on the hover state
+   */
+  labelBackgroundColor?: string;
 }
 
 export interface DropdownPosition {

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import SequentialConnectingBranch from './SequentialConnectingBranch';
 import { useState } from 'react';
 import React from 'react';
+import { Option } from '../Select/types';
 
 const meta: Meta<typeof SequentialConnectingBranch> = {
   title: 'Components/SequentialConnectingBranch',
@@ -16,48 +17,54 @@ type Story = StoryObj<typeof SequentialConnectingBranch>;
 
 export const Primary: Story = {
   render: () => {
-    const machineList = [
-      {
-        label: 'FFE 123',
-        value: 'FFE 123',
-      },
-      {
-        label: 'FFE 234',
-        value: 'FFE 234',
+    const [machineSelect, setMachineSelect] = useState<Option>({
+      label: 'ffe-Mahesh',
+      value: {
+        status: 'running',
       },
+      name: 'ffe-Mahesh',
+    });
+    const [machineInstance, setMachineInstance] = useState<Option>({});
+
+    const machineOptionList = [
       {
-        label: 'FFE 345',
-        value: 'FFE 345',
+        label: 'ffe-Ganesh',
+        value: {
+          status: 'running',
+        },
+        name: 'ffe-Ganesh',
       },
       {
-        label: 'FFE 456',
-        value: 'FFE 456',
+        label: 'ffe-Mahesh',
+        value: {
+          status: 'running',
+        },
+        name: 'ffe-Mahesh',
       },
     ];
-    const [selectedMachine, setSelectedMachine] = useState({});
-    const [machineInstances, setMachineInstances] = useState<any>([]);
+
+    const onMachineHandleSelect = (option: Option) => {
+      setMachineSelect(option);
+    };
+
+    const onAddMachine = () => {};
+
     return (
       <>
         <SequentialConnectingBranch
-          machineOptionsList={machineList}
-          machineInstances={machineInstances}
-          selectedMachine={selectedMachine}
-          onHandleSelect={(option) => {
-            setSelectedMachine(option);
-          }}
-          onAddBrowserInstance={() => {}}
-          onUpdateAddBrowserInstance={() => {}}
-          onAddRunBrowserInstance={() => {}}
-          onDeleteMachineInstance={() => {}}
-          onDeleteBrowserInstance={() => {}}
+          projectType="web"
           dataSetValues={{
             peVariableSetId: 'Test dev',
             globalVariableSetId: 'Test dev',
             testDataSetId: 'Test dev',
           }}
-          onUpdateDataSetList={() => {}}
-          machineColumnWidth={500}
-          machineColumnCount={3}
+          machineColumnWidth={340}
+          machineColumnCount={2}
+          machineOptionsList={machineOptionList}
+          machineInstances={[]}
+          selectedMachine={machineSelect}
+          onHandleSelect={onMachineHandleSelect}
+          scriptType="Manual"
         />
       </>
     );

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx

@@ -7,7 +7,14 @@ import Typography from '../Typography';
 import './SequentialConnectingBranch.scss';
 import { FC, useEffect, useRef, useState } from 'react';
 import ConnectingBranches from './components/ConnectingBranches/ConnectingBranches';
-import { ExecutionContext, SequentialConnectingBranchProps } from './types';
+import {
+  dataSetValues,
+  ExecutionContext,
+  SequentialConnectingBranchProps,
+} from './types';
+import Tooltip from '../Tooltip';
+import DataSetTooltip from './components/DatasetTooltip/DataSetTooltip';
+import { DataSetToolTip } from './components/DatasetTooltip/types';
 
 const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
   machineInstances = [],
@@ -25,12 +32,15 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
     testDataSetId: '',
     globalVariableSetId: '',
     peVariableSetId: '',
+    globalVariableSetName: '',
+    peVariableSetName: '',
+    testDataSetName: '',
   },
   onUpdateAddBrowserInstance = () => {},
   addInstanceLabel = 'Add Environment',
   scriptType = 'Automation',
   projectType = 'Web',
-  readOnly = true,
+  readOnly = false,
 }) => {
   const [selectedMachineInstance, setSelectedMachineInstance] = useState({});
   const selectButtonRef = useRef<HTMLButtonElement>(null);
@@ -63,11 +73,29 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
   }, [selectedMachine]);
 
   useEffect(() => {
-    setMachineBranchInstances([...machineInstances, {}]);
+    if (readOnly) {
+      setMachineBranchInstances(machineInstances);
+    } else {
+      setMachineBranchInstances([...machineInstances, {}]);
+    }
   }, [machineInstances]);
 
   const hideDataSet = scriptType.toLowerCase() !== 'manual';
 
+  const removeKeysContainingSubstring = (
+    obj: dataSetValues,
+    substring: string
+  ) => {
+    return Object.fromEntries(
+      Object.entries(obj).filter(([key]) => !key.includes(substring))
+    );
+  };
+
+  const filteredDataSetValues = removeKeysContainingSubstring(
+    dataSetValues,
+    'Id'
+  );
+
   return (
     <div className="ff-sequential-connecting-branch-wrapper">
       <div className="ff-connecting-select-branch-wrapper">
@@ -82,6 +110,8 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
             width={'240px'}
             selectedOption={selectedMachineInstance}
             valueAccessor={'name'}
+            optionsRequired={!readOnly}
+            disableInput={readOnly}
           />
           {!isMachineSelected && (
             <div
@@ -121,11 +151,10 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
             <div className="ff-scope-wrapper">
               <Typography
                 as="span"
-                fontSize={12}
-                color={getMachineStatusColor(selectedMachine.values?.status)}
+                color={getMachineStatusColor(selectedMachine.value?.status)}
                 className="ff-scope-text"
               >
-                {selectedMachine.values?.status}
+                {selectedMachine.value?.status}
               </Typography>
             </div>
 
@@ -140,10 +169,22 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
                     )
                   }
                 >
-                  <Icon name="datalist_icon" className="ff-dataset-icon" />
+                  <Tooltip
+                    placement="bottom"
+                    title={
+                      <DataSetTooltip
+                        datSetToolTip={filteredDataSetValues as DataSetToolTip}
+                      />
+                    }
+                  >
+                    <Icon
+                      name="datalist_icon"
+                      className="ff-dataset-icon"
+                      hoverEffect
+                    />
+                  </Tooltip>
                   <Typography
                     as="span"
-                    fontSize={12}
                     color="var(--ff-connecting-branch-color)"
                     className="ff-datalist-text"
                   >
@@ -151,12 +192,15 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
                   </Typography>
                 </div>
               )}
-              <Icon
-                name="delete"
-                className="ff-run-delete-icon"
-                color="var(--ff-connecting-branch-delete-color)"
-                onClick={onDeleteMachineInstance}
-              />
+              {!readOnly && (
+                <Icon
+                  name="delete"
+                  className="ff-run-delete-icon"
+                  color="var(--ff-connecting-branch-delete-color)"
+                  onClick={onDeleteMachineInstance}
+                  hoverEffect
+                />
+              )}
             </div>
           </div>
         )}

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

@@ -10,6 +10,8 @@ import Typography from '../../../Typography';
 import Button from '../../../Button';
 import './Branches.scss';
 import { MachineType } from '../../../MachineInputField/types';
+import Tooltip from '../../../Tooltip';
+import DataSetTooltip from '../DatasetTooltip/DataSetTooltip';
 
 const Branches = ({
   machineInstances,
@@ -163,13 +165,17 @@ const Branches = ({
       </div>
       {machineInstances?.map((machineInstance, index) => {
         const {
-          numberOfRuns = 'numberOfRuns' in machineInstance
-            ? machineInstance.numberOfRuns
+          runCount = 'runCount' in machineInstance
+            ? machineInstance.runCount
             : 0,
+          numberOfRuns = 0,
           machineInstanceId = '',
           peVariableSetId = '',
           globalVariableSetId = '',
           testDataSetId = '',
+          testDataSetName = '',
+          peVariableSetName = '',
+          globalVariableSetName = '',
         } = machineInstance as ExecutionContext;
         return (
           <Fragment key={ffid()}>
@@ -184,7 +190,7 @@ const Branches = ({
                   ></div>
                   <MachineInputField
                     width={`${machineColumnWidth}px`}
-                    runCount={numberOfRuns}
+                    runCount={runCount}
                     key={ffid()}
                     options={
                       getMachineLabelOptionList(
@@ -193,9 +199,7 @@ const Branches = ({
                       ) as MachineType[]
                     }
                     contentReverse={!evenRow}
-                    modalId={`${machineInstanceId}-runCount-${
-                      numberOfRuns - 1
-                    }`}
+                    modalId={`${machineInstanceId}-runCount-${runCount - 1}`}
                     onClick={() =>
                       onUpdateAddBrowserInstance(
                         `${machineInstanceId}-runCount-0`,
@@ -214,15 +218,18 @@ const Branches = ({
                     {hideDataSet && (
                       <>
                         <div
-                          id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
+                          id={`ff-sequential-branch-dataset-${machineInstanceId}-${runCount}`}
                           className="ff-dataset-list-branch"
                           onClick={() =>
                             onUpdateDataSetList(
-                              `ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
+                              `ff-sequential-branch-dataset-${machineInstanceId}-${runCount}`,
                               {
                                 peVariableSetId: peVariableSetId,
                                 globalVariableSetId: globalVariableSetId,
                                 testDataSetId: testDataSetId,
+                                testDataSetName: testDataSetName,
+                                globalVariableSetName: globalVariableSetName,
+                                peVariableSetName: peVariableSetName,
                               },
                               true,
                               numberOfRuns,
@@ -230,10 +237,24 @@ const Branches = ({
                             )
                           }
                         >
-                          <Icon
-                            name="datalist_icon"
-                            className="ff-connecting-icon"
-                          />
+                          <Tooltip
+                            placement="bottom"
+                            title={
+                              <DataSetTooltip
+                                datSetToolTip={{
+                                  peVariableSetName,
+                                  globalVariableSetName,
+                                  testDataSetName,
+                                }}
+                              />
+                            }
+                          >
+                            <Icon
+                              name="datalist_icon"
+                              className="ff-connecting-icon"
+                              hoverEffect
+                            />
+                          </Tooltip>
                           <Typography
                             className="ff-connecting-text"
                             color="var(--ff-connecting-branch-color)"
@@ -247,6 +268,7 @@ const Branches = ({
                           className="ff-connecting-icon"
                           onClick={() => onAddRunBrowser(machineInstanceId)}
                           color="var(--ff-connecting-branch-color)"
+                          hoverEffect
                         />
                         <Typography
                           className="ff-connecting-text"
@@ -256,14 +278,17 @@ const Branches = ({
                         </Typography>
                       </>
                     )}
-                    <Icon
-                      name="delete"
-                      className="ff-connecting-delete-icon"
-                      onClick={() =>
-                        onDeleteBrowser(machineInstanceId, numberOfRuns)
-                      }
-                      color="var(--ff-connecting-branch-delete-color)"
-                    />
+                    {!readOnly && (
+                      <Icon
+                        name="delete"
+                        className="ff-connecting-delete-icon"
+                        onClick={() =>
+                          onDeleteBrowser(machineInstanceId, runCount)
+                        }
+                        color="var(--ff-connecting-branch-delete-color)"
+                        hoverEffect
+                      />
+                    )}
                   </div>
                 )}
               </div>

package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import Tooltip from '../../../Tooltip';
+import Typography from '../../../Typography';
+import { DataSetTooltipProps } from './types';
+
+const DataSetTooltip: FC<DataSetTooltipProps> = ({
+  datSetToolTip: {
+    globalVariableSetName = '',
+    peVariableSetName = '',
+    testDataSetName = '',
+  },
+}) => {
+  const toolTipTitleValue = {
+    'Test Data Set': testDataSetName,
+    'Global Variable Set': globalVariableSetName,
+    'Project Environment Set': peVariableSetName,
+  };
+
+  return (
+    <>
+      <Tooltip placement="bottom">
+        {Object.entries(toolTipTitleValue).map(([key, value], index) => (
+          <div key={index}>
+            <Typography
+              as="div"
+              fontSize={10}
+              lineHeight="15px"
+            >
+              {key}
+            </Typography>
+            <Typography as="div" lineHeight="18px">
+              {value}
+            </Typography>
+          </div>
+        ))}
+      </Tooltip>
+    </>
+  );
+};
+
+export default DataSetTooltip;