pixel-react 1.9.5 → 1.9.7

package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts

@@ -9,6 +9,7 @@ import {
   EntireColumnsSelection,
   EntireRowsSelection,
 } from './selection';
+import { createFormulaParser, Model } from './engine';
 
 export function applyBoldToCells(
   currentData: Matrix.Matrix<Types.CellBase<any>>,
@@ -557,19 +558,47 @@ export function edit(state: Types.StoreState): Types.StoreState {
   return { ...state, mode: 'edit' };
 }
 
+
+const canClearCell = (cell: Types.CellBase | undefined) =>
+  cell && !cell.readOnly;
+const clearCell = (cell: Types.CellBase | undefined) => {
+  if (!canClearCell(cell)) {
+    return cell;
+  }
+  return Object.assign({}, cell, { value: '', style: cell?.style });
+};
+
 export function clear(state: Types.StoreState): Types.StoreState {
   if (!state.active) {
     return state;
   }
 
-  const canClearCell = (cell: Types.CellBase | undefined) =>
-    cell && !cell.readOnly;
-  const clearCell = (cell: Types.CellBase | undefined) => {
-    if (!canClearCell(cell)) {
-      return cell;
-    }
-    return Object.assign({}, cell, { value: undefined });
+  const selectedRange = state.selected.toRange(state.model.data);
+
+  const changes: Types.CommitChanges = [];
+  let newData = state.model.data;
+
+  for (const point of selectedRange || []) {
+    const cell = Matrix.get(point, state.model.data);
+    const clearedCell = clearCell(cell);
+    changes.push({
+      prevCell: cell || null,
+      nextCell: clearedCell || null,
+    });
+    newData = Matrix.set(point, clearedCell, newData);
+  }
+
+  return {
+    ...state,
+    model: new Model(createFormulaParser, newData),
+    ...commit(changes),
   };
+}
+
+export function clearEditMode(state: Types.StoreState): Types.StoreState {
+  if (!state.active) {
+    return state;
+  }
 
   const selectedRange = state.selected.toRange(state.model.data);
 
@@ -588,6 +617,8 @@ export function clear(state: Types.StoreState): Types.StoreState {
 
   return {
     ...state,
+    mode: 'edit',
+    model: new Model(createFormulaParser, newData),
     ...commit(changes),
   };
 }
@@ -655,7 +686,7 @@ const keyDownHandlers: KeyDownHandlers = {
   ArrowRight: go(0, +1),
   Tab: go(0, +1),
   Enter: edit,
-  Backspace: clear,
+  Backspace: clearEditMode,
   Delete: clear,
   Escape: blur,
 };

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -187,10 +187,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       label: 'Courier',
       value: 'Courier',
     },
-    {
-      label: 'Helvetica',
-      value: 'Helvetica',
-    },
     {
       label: 'Arial Rounded MT Bold',
       value: '"Arial Rounded MT Bold"',

package/src/components/Input/Input.tsx

@@ -29,6 +29,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       transparentBackground = false,
       size = 'small',
       isLabelRequired = true,
+      onClick,
+      onKeyUp,
       ...props
     },
     ref
@@ -101,6 +103,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             autoFocus={autoFocus}
             min={minValue}
             max={maxValue}
+            onClick={onClick}
+            onKeyUp={onKeyUp}
             {...props}
           />
 

package/src/components/Input/types.ts

@@ -57,6 +57,11 @@ export interface InputProps {
   onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
 
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+
+  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+
+  onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+
   /**
    * id to select the input field uniquely
    */

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>
         )}