pixel-react 1.5.9 → 1.6.1

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -40,6 +40,8 @@ interface MultiSelectProps {
   labelAccessor?: string;
 
   valueAccessor?: string;
+
+  onEnter?:(newOption:string)=>void
 }
 
 export { Option, MultiSelectProps };

package/src/components/PopUpModal/PopUpModal.scss

@@ -0,0 +1,36 @@
+.warning_modal_container {
+  height: 100%;
+}
+.warning_modal_content {
+  display: flex;
+  height: 80%;
+  width: 100%;
+}
+.warning_modal_icon {
+  position: relative;
+  bottom: 16px;
+  right: 4px;
+}
+.warning_modal_title_wrapper {
+  line-height: 30px;
+}
+.warning_modal_message_wrapper {
+  padding-top: 8px;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.warning_modal_message {
+  display: flex;
+  flex-direction: column;
+  line-height: 24px;
+}
+.warning_modal_footer_button {
+  height: 20%;
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: 8px;
+}

package/src/components/PopUpModal/PopUpModal.stories.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import PopUpModal from './PopUpModal';
+import Button from '../Button';
+
+const meta: Meta<typeof PopUpModal> = {
+  title: 'Components/PopUpModal',
+  component: PopUpModal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof PopUpModal>;
+
+const defaultArgs = {
+    iconName:"license_warning",
+    titleMessage:"Warning!",
+    subTitleMessage:"Unsaved Changes.",
+    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)'
+}
+
+export const DefaultModal: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => alert('Closed'),
+    onContinue: () => alert('Continued'),
+    iconName: 'license_warning',
+    titleMessage: 'Warning!',
+    subTitleMessage: 'Unsaved Changes.',
+  },
+};
+
+export const ControlledPopUp: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleContinue = () => {
+        alert('Continued!');
+        setIsOpen(false);
+      };
+    return (
+      <>
+        <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp'/>
+        <PopUpModal
+          {...defaultArgs}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          onContinue={handleContinue}
+        />
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/PopUpModal/PopUpModal.tsx

@@ -0,0 +1,85 @@
+import { FC } from 'react';
+import './PopUpModal.scss';
+import Modal from '../Modal';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import Button from '../Button';
+import { PopUpModalProps } from './types';
+
+const PopUpModal: FC<PopUpModalProps> = ({
+  isOpen,
+  onClose,
+  onContinue,
+  titleMessage = 'Warning!',
+  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)',
+}) => {
+  return (
+    <Modal
+      overlayClassName="custom-overlay"
+      isOpen={isOpen}
+      onClose={onClose}
+      isHeaderDisplayed={false}
+      children={
+        <div className={'warning_modal_container'}>
+          <div className={'warning_modal_content'}>
+            <Icon
+              name={iconName}
+              className={'warning_modal_icon'}
+              width={94}
+              height={94}
+            />
+            <div className={'warning_modal_message'}>
+              <Typography
+                fontSize={20}
+                fontWeight="semi-bold"
+                className="warning_modal_title_wrapper"
+              >
+                {' '}
+                <Typography
+                  color="var(--status-button-bg-warning)"
+                  fontSize={20}
+                  fontWeight="semi-bold"
+                >
+                  {' '}
+                  {titleMessage}{' '}
+                </Typography>{' '}
+                {subTitleMessage}
+              </Typography>
+              <div className="warning_modal_message_wrapper">
+                <Typography fontSize={16}>{modalMessage}</Typography>
+                <Typography fontSize={16}>{footerMessage}</Typography>
+              </div>
+            </div>
+          </div>
+          <div className={'warning_modal_footer_button'}>
+            <Button
+              variant="secondary"
+              label={firstButtonLabel}
+              onClick={onClose}
+            />
+            <Button
+              variant={buttonVariant || 'warning'}
+              label={secondButtonLabel}
+              onClick={onContinue}
+            />
+          </div>
+        </div>
+      }
+      ariaHideApp
+      isFooterDisplayed={false}
+      customWidth="420px"
+      customHeight="226px"
+      boxShadow="0px 1px 4px 0px var(--toaster-boxshadow)"
+      border={border}
+    />
+  );
+};
+
+export default PopUpModal;

package/src/components/PopUpModal/types.ts

@@ -0,0 +1,14 @@
+export interface PopUpModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onContinue?: () => void;
+    titleMessage:string,
+    subTitleMessage?:string,
+    iconName:string,
+    modalMessage:string,
+    footerMessage:string,
+    firstButtonLabel?:string,
+    secondButtonLabel:string,
+    buttonVariant:any,
+    border:string,
+  }

package/src/components/RadioGroup/RadioGroup.scss

@@ -3,3 +3,10 @@
   flex-direction: row;
   gap: 12px;
 }
+.ff-radio-label-wrapper {
+  position: relative;
+  top: 2px;
+}
+.ff-required-asterisk {
+  color: var(--input-error-text-color);
+}

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -121,4 +121,30 @@ export const WithToolTipIcon: Story = {
   },
 };
 
+export const WithLabelled: Story = {
+  render: () => {
+    const [selectedOption, setSelectedOption] = useState('restApi');
+    const radioOptions = [
+      { value: 'restApi', label: 'RestAPI' },
+      { value: 'snippets', label: 'Snippet' },
+      { value: 'history', label: 'History' },
+    ];
+    const handleOptionChange = (option: Option) => {
+      setSelectedOption(option.value);
+    };
+    return (
+      <RadioGroup
+        options={radioOptions}
+        onChange={handleOptionChange}
+        name="option"
+        selectedValue={selectedOption}
+        isAsteriskRequired
+        isLabel
+        label={'Web Services'}
+        classNameForLabel='ff-radio-label-wrapper'
+      />
+    );
+  },
+};
+
 export default meta;

package/src/components/RadioGroup/RadioGroup.tsx

@@ -2,16 +2,32 @@ import React from 'react';
 import RadioButton from '../RadioButton/RadioButton'; // Adjust the import path as necessary
 import './RadioGroup.scss';
 import classNames from 'classnames';
+import Typography from '../Typography';
 
 const RadioGroup: React.FC<RadioGroupProps> = ({
   options,
   name,
   selectedValue,
   onChange,
+  label,
+  isLabel = false,
+  isAsteriskRequired = false,
   className,
+  classNameForLabel,
 }) => {
   return (
     <div className={classNames('ff-radio-group', className)}>
+      {isLabel && (
+        <Typography fontWeight='semi-bold' className={classNames(classNameForLabel)}>
+          {' '}
+          {isAsteriskRequired && (
+            <Typography className={classNames('ff-required-asterisk')}>
+              *{' '}
+            </Typography>
+          )}
+          {label}{' '}
+        </Typography>
+      )}
       {options.map((option) => (
         <RadioButton
           key={option.value}

package/src/components/RadioGroup/radioGroupTypes.tsx

@@ -64,9 +64,33 @@ interface RadioGroupProps {
    */
   onChange?: (option: Option) => void;
 
+   /**
+   * Provides a label at starting position when the string is passed.
+   * Optional.
+   */
+  label?: string,
+
+  /**
+   * if isLabel is true then we can display label if not then extra space is not added.
+   * Optional.
+   */
+  isLabel?: boolean,
+
+  /**
+   * if isAsteriskRequired is true then we can display asterisk if not then extra space is not added.
+   * Optional. 
+   */
+  isAsteriskRequired?:boolean,
+
   /**
    * Additional class names to apply to the radio group for custom styling.
    * Optional.
    */
   className?: string;
+
+  /**
+   * Additional class names to apply to the radio group Label for custom styling.
+   * Optional.
+   */
+  classNameForLabel?:string;
 }

package/src/components/Select/Select.tsx

@@ -142,7 +142,6 @@ const Select: FC<SelectProps> = ({
   }, [showDropdownOptions]);
 
   useEffect(() => {
-    if (checkEmpty(getValue(selectedOption, valueAccessor))) return;
     setSearchedOption(getValue(selectedOption, valueAccessor));
   }, [selectedOption]);
 
@@ -205,8 +204,8 @@ const Select: FC<SelectProps> = ({
             className={classNames('ff-select-labels', {
               'ff-select-labels__active': searchedOption,
             })}
-            fontSize={searchedOption && 8}
-            lineHeight={searchedOption && '8px'}
+            fontSize={searchedOption || showDropdownOptions ? 8 : 12}
+            lineHeight={searchedOption || showDropdownOptions ? '8px' : '12px'}
             required={required}
           >
             {label}
@@ -216,7 +215,7 @@ const Select: FC<SelectProps> = ({
       {errorMsg && (
         <Typography
           as="div"
-          lineHeight="15px"
+          lineHeight="12px"
           fontSize={10}
           color="var(--error_light)"
           className="ff-select-error-msg"

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

@@ -51,7 +51,7 @@ const Dropdown: FC<DropdownProps> = ({
       return {
         left: positionX,
         top: positionY + heightFromTop,
-        width: width + 28,
+        width: width + 30,
         zIndex: optionZIndex,
         marginLeft: '-2px',
       };
@@ -59,7 +59,7 @@ const Dropdown: FC<DropdownProps> = ({
     return {
       zIndex: optionZIndex,
       left: positionX,
-      width: width + 28,
+      width: width + 30,
       top: positionY - selectInputHeight - dropdownContainerHeight + 4 * margin,
       marginLeft: '-2px',
     };
@@ -67,10 +67,8 @@ const Dropdown: FC<DropdownProps> = ({
 
   const getOptionLabel = (label: any) => {
     if (React.isValidElement(label)) {
-      console.log('test');
       return label;
     }
-    console.log('test112');
     return (
       <Typography
         as="div"
@@ -88,37 +86,39 @@ const Dropdown: FC<DropdownProps> = ({
       ref={optionsWrapperRef}
       style={updateDropdownPosition()}
     >
-      {!checkEmpty(options) ? (
-        options.map((option) => (
-          <div
-            className={classNames(
-              'ff-select-dropdown-option',
-              {
-                'ff-select-dropdown-option__selected':
-                  getValue(option, valueAccessor) === selectedOption,
-              },
-              currentTheme
-            )}
-            key={ffid()}
-            onClick={() => {
-              if ('disable' in option && option['disable']) return;
-              onSelectOptionSelector(option);
-            }}
+      <div>
+        {!checkEmpty(options) ? (
+          options.map((option) => (
+            <div
+              className={classNames(
+                'ff-select-dropdown-option',
+                {
+                  'ff-select-dropdown-option__selected':
+                    getValue(option, valueAccessor) === selectedOption,
+                },
+                currentTheme
+              )}
+              key={ffid()}
+              onClick={() => {
+                if ('disable' in option && option['disable']) return;
+                onSelectOptionSelector(option);
+              }}
+            >
+              {getOptionLabel(getLabel(option, labelAccessor))}
+            </div>
+          ))
+        ) : (
+          <Typography
+            textAlign="center"
+            as="div"
+            lineHeight="32px"
+            color="var(--ff-select-text-color)"
+            className={classNames('ff-select-no-option', currentTheme)}
           >
-            {getOptionLabel(getLabel(option, labelAccessor))}
-          </div>
-        ))
-      ) : (
-        <Typography
-          textAlign="center"
-          as="div"
-          lineHeight="32px"
-          color="var(--ff-select-text-color)"
-          className={classNames('ff-select-no-option', currentTheme)}
-        >
-          No Results found
-        </Typography>
-      )}
+            No Results found
+          </Typography>
+        )}
+      </div>
     </div>
   );
 };

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss

@@ -93,11 +93,20 @@
       .ff-scope-wrapper {
         @include item-center;
         margin-right: 12px;
+
+        .ff-scope-text {
+          text-transform: capitalize;
+          margin: 0;
+        }
       }
 
       .ff-datalist-wrapper {
         @include item-center;
 
+        #ff-sequential-machine-datalist {
+          @include item-center
+        }
+
         .ff-dataset-icon,
         .ff-run-delete-icon,
         .ff-datalist-text {

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx

@@ -5,11 +5,11 @@ import Icon from '../Icon';
 import Select from '../Select';
 import Typography from '../Typography';
 import './SequentialConnectingBranch.scss';
-import { useEffect, useRef, useState } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 import ConnectingBranches from './components/ConnectingBranches/ConnectingBranches';
 import { ExecutionContext, SequentialConnectingBranchProps } from './types';
 
-const SequentialConnectingBranch = ({
+const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
   machineInstances = [],
   machineColumnWidth = 180,
   machineColumnCount = 1,
@@ -19,8 +19,15 @@ const SequentialConnectingBranch = ({
   onAddBrowserInstance = () => {},
   onAddRunBrowserInstance = () => {},
   onDeleteBrowserInstance = () => {},
-}: SequentialConnectingBranchProps) => {
-  const dataListRef = useRef<HTMLButtonElement>(null);
+  onUpdateDataSetList = () => {},
+  onDeleteMachineInstance = () => {},
+  dataSetValues = {
+    testDataSetId: '',
+    globalVariableSetId: '',
+    peVariableSetId: '',
+  },
+}) => {
+  const [selectedMachineInstance, setSelectedMachineInstance] = useState({});
   const selectButtonRef = useRef<HTMLButtonElement>(null);
   const defaultMachineColumnCount = Math.max(machineColumnCount, 1);
   const defaultMachineColumnWidth = Math.max(machineColumnWidth, 180);
@@ -30,13 +37,25 @@ const SequentialConnectingBranch = ({
   >([]);
 
   const isMachineInstances = checkEmpty(machineInstances);
-  const isMachineSelected = checkEmpty(selectedMachine);
+  const isMachineSelected = checkEmpty(selectedMachine.value?.clientId);
+
+  const getMachineStatusColor = (machineStatus: string = '') => {
+    if (machineStatus.toLowerCase().includes('inactive'))
+      return 'var(--ff-machine-inactive-status-color)';
+    if (machineStatus.toLowerCase().includes('running'))
+      return 'var(--ff-machine-running-status-color)';
+    if (machineStatus.toLowerCase().includes('active'))
+      return 'var(--ff-machine-active-status-color)';
+    return 'var(--ff-machine-active-status-color))';
+  };
+
+  useEffect(() => {
+    setSelectedMachineInstance(selectedMachine);
+  }, [selectedMachine]);
 
   useEffect(() => {
     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">
@@ -44,12 +63,12 @@ const SequentialConnectingBranch = ({
           <Select
             onChange={onHandleSelect}
             optionsList={machineOptionsList}
-            required={true}
             label="Choose Machine"
+            required={false}
             showLabel={true}
             className="ff-sequential-select-branch"
             width={'240px'}
-            selectedOption={selectedMachine}
+            selectedOption={selectedMachineInstance}
             valueAccessor={'name'}
           />
           {!isMachineSelected && (
@@ -70,11 +89,14 @@ const SequentialConnectingBranch = ({
                   <>
                     <Button
                       variant="tertiary"
-                      label="Browser / Device"
+                      label="Add Environment"
                       size="small"
                       className="branch-button"
                       ref={selectButtonRef}
-                      onClick={onAddBrowserInstance}
+                      onClick={() =>
+                        onAddBrowserInstance('ff-sequential-branch-button')
+                      }
+                      id="ff-sequential-branch-button"
                     />
                   </>
                 )}
@@ -82,40 +104,48 @@ const SequentialConnectingBranch = ({
             </div>
           )}
         </div>
-        <div className="ff-select-scope-datalist">
-          <div className="ff-scope-wrapper">
-            <Icon name="windows" />
-            <Typography
-              as="span"
-              fontSize={12}
-              color="var(--ff-connecting-branch-scope-color)"
-              className="ff-scope-text"
-            >
-              Private
-            </Typography>
-          </div>
+        {!isMachineSelected && (
+          <div className="ff-select-scope-datalist">
+            <div className="ff-scope-wrapper">
+              <Typography
+                as="span"
+                fontSize={12}
+                color={getMachineStatusColor(selectedMachine.values?.status)}
+                className="ff-scope-text"
+              >
+                {selectedMachine.values?.status}
+              </Typography>
+            </div>
 
-          <div className="ff-datalist-wrapper">
-            <Icon
-              name="datalist_icon"
-              className="ff-dataset-icon"
-              ref={dataListRef}
-            />
-            <Typography
-              as="span"
-              fontSize={12}
-              color="var(--ff-connecting-branch-color)"
-              className="ff-datalist-text"
-            >
-              Dataset List
-            </Typography>
-            <Icon
-              name="delete"
-              className="ff-run-delete-icon"
-              color="var(--ff-connecting-branch-delete-color)"
-            />
+            <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"
+                >
+                  Dataset List
+                </Typography>
+              </div>
+              <Icon
+                name="delete"
+                className="ff-run-delete-icon"
+                color="var(--ff-connecting-branch-delete-color)"
+                onClick={onDeleteMachineInstance}
+              />
+            </div>
           </div>
-        </div>
+        )}
       </div>
       <div className="ff-sequential-branches-wrapper">
         {!isMachineInstances && (
@@ -126,6 +156,7 @@ const SequentialConnectingBranch = ({
             onAddBrowser={onAddBrowserInstance}
             onDeleteBrowser={onDeleteBrowserInstance}
             onAddRunBrowser={onAddRunBrowserInstance}
+            onUpdateDataSetList={onUpdateDataSetList}
           />
         )}
       </div>

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

@@ -61,6 +61,12 @@
   align-items: center;
   flex-direction: if($reverse, row-reverse, row);
 
+  .ff-dataset-list-branch {
+    display: flex;
+    align-items: center;
+    flex-direction: if($reverse, row-reverse, row);
+  }
+
   .ff-connecting-icon {
     margin-right: 4px;
     cursor: pointer;
@@ -154,9 +160,9 @@
 
     .ff-connecting-branch-arrow-reverse {
       @include branch-arrow(
-        $clip: polygon(0 50%, 100% 100%, 100% 0),
-        $horizontal-pos: left,
-        $offset: -1px
+              $clip: polygon(0 50%, 100% 100%, 100% 0),
+              $horizontal-pos: left,
+              $offset: -1px
       );
     }
   }