pixel-react 1.1.3 → 1.1.5

package/src/components/MenuOption/MenuOption.stories.tsx

@@ -256,4 +256,25 @@ export const MenuOptionPlacementRight: Story = {
   },
 };
 
+
+export const MenuOptionCustom: Story = {
+  args: {
+    iconName: 'more',
+    dropdownPlacement: 'bottom',
+    variant:'dark',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
 export default meta;

package/src/components/MenuOption/MenuOption.tsx

@@ -51,6 +51,7 @@ const MenuOption = ({
   iconButtonSize = 20,
   iconButtonBorderRadius = 7,
   iconSize = 16,
+  variant = 'light',
 }: MenuOptionProps) => {
   const [isClicked, setIsClicked] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -90,6 +91,7 @@ const MenuOption = ({
           <div
             className={classNames('ff-menuicon-container', {
               'ff-menuicon-container-clicked': isClicked,
+              dark: variant === 'dark',
             })}
             onClick={onIconClickHandler}
             style={{
@@ -103,9 +105,9 @@ const MenuOption = ({
               width={iconSize}
               name={iconName}
               color={
-                isClicked
-                  ? 'var(--menu-option-icon-color)'
-                  : 'var(--menu-option-icon-clicked)'
+                isClicked === (variant === 'dark')
+                ? 'var(--menu-option-icon-clicked)'
+                : 'var(--menu-option-icon-color)'
               }
             />
           </div>

package/src/components/MenuOption/types.ts

@@ -110,6 +110,15 @@ interface MenuOptionProps {
    * @type {function}
    * @optional
    */
+
+  variant?: 'dark' | 'light';
+  /**
+   * The variant of the menu option, either 'dark' or 'light'.
+   * @type {'dark' | 'light'}
+   * @default 'light'
+   * @optional
+   */
+
   onClick?: () => void;
 
   /**

package/src/components/MiniModal/MiniModal.tsx

@@ -182,7 +182,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
           }}
         >
           {headerProps ? (
-            <Typography as="p">{headerProps}</Typography>
+            <Typography as="div">{headerProps}</Typography>
           ) : (
             <Typography as="header">
               <Typography as="h2">Header text</Typography>

package/src/components/Modal/Modal.tsx

@@ -20,6 +20,7 @@ const Modal: React.FC<ModalProps> = ({
   customWidth = '660px', // default width
   customHeight = 'auto', // default height
   children,
+  zIndex = 999,
 }) => {
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -49,6 +50,7 @@ const Modal: React.FC<ModalProps> = ({
   return createPortal(
     <div
       className={`ff-modal-overlay ${overlayClassName || ''}`}
+      style={{ zIndex: zIndex }}
       onClick={shouldCloseOnOverlayClick ? onClose : undefined}
     >
       <div

package/src/components/Modal/modal.scss

@@ -15,8 +15,8 @@
   background: var(--ff-mini-modal-border);
   position: relative;
   max-width: 100%;
-  border-radius: 12px;
-  padding: 16px;
+  border-radius: 12px 12px 0 0;
+  padding: 8px;
   
   .ff-modal-header {
     height: 32px;

package/src/components/Modal/types.ts

@@ -36,4 +36,5 @@ export interface ModalProps {
   isFooterDisplayed: boolean;
   customWidth: string;
   customHeight?: string;
+  zIndex?: number;
 }

package/src/components/Select/Select.tsx

@@ -283,7 +283,7 @@ const Select = ({
           >
             {required && (
               <Typography
-                color="var(--$error-light)"
+                color="var(--error-light)"
                 className="ff-select-label--required"
               >
                 *
@@ -327,7 +327,7 @@ const Select = ({
               {required && (
                 <Typography
                   fontSize={8}
-                  color={'var(--$error-light)'}
+                  color={'var(--error-light)'}
                   className="ff-select-legend--required"
                 >
                   *

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss

@@ -0,0 +1,117 @@
+.ff-sequential-connecting-branch-wrapper {
+  .ff-connecting-select-branch-wrapper {
+    height: 66px;
+    box-sizing: border-box;
+    width: fit-content;
+    margin-bottom: 16px;
+
+    .ff-select-branch-wrapper {
+      position: relative;
+      display: flex;
+      box-sizing: border-box;
+
+      .ff-sequential-select-branch {
+        width: 240px;
+      }
+
+      .ff-select-branch-arrow {
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        .ff-branch-arrow-wrapper {
+          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;
+            right: -1px;
+            top: -3px;
+          }
+        }
+
+        .ff-select-branch-point {
+          width: 5px;
+          height: 5px;
+          border-radius: 50%;
+          background-color:  var(--ff-connecting-branch-color);
+          position: absolute;
+          left: -3px;
+          z-index: 102;
+          top: 50%;
+        }
+
+        .branch-button {
+          margin-top: 4px;
+        }
+      }
+
+      .ff-select-branch-arrow-down {
+        position: absolute;
+        height: 38px;
+
+        .ff-select-branch-point {
+          position: absolute;
+          height: 5px;
+          width: 5px;
+          background-color:  var(--ff-connecting-branch-color);
+          border-radius: 50%;
+          top: 50%;
+          left: -2px;
+          z-index: 102;
+        }
+
+        .ff-select-branch-arrow {
+          width: 0px;
+          height: 62px;
+          top: calc(50% + 1px);
+          border-left: 1px solid  var(--ff-connecting-branch-color);
+          z-index: 102;
+        }
+      }
+    }
+
+    .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;
+        }
+      }
+
+      .ff-datalist-wrapper {
+        display: flex;
+
+        .ff-dataset-icon,
+        .ff-run-delete-icon,
+        .ff-datalist-text {
+          cursor: pointer;
+        }
+
+        .ff-datalist-text {
+          margin: 0px 12px 0px 4px;
+        }
+      }
+    }
+  }
+
+  .ff-sequential-branches-wrapper {
+    box-sizing: border-box;
+    width: fit-content;
+    height: fit-content;
+  }
+}

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SequentialConnectingBranch from './SequentialConnectingBranch';
+import {ffid} from '../../utils/ffID/ffid';
+
+const meta: Meta<typeof SequentialConnectingBranch> = {
+  title: 'Components/SequentialConnectingBranch',
+  component: SequentialConnectingBranch,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof SequentialConnectingBranch>;
+
+export const Primary: Story = {
+  args: {
+    machineInstances: [
+      {
+        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',
+      },
+    ],
+    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',
+      },
+      deviceInfo: [],
+      headless: false,
+      peVariableSetId: 'UUID',
+      globalVariableSetId: 'UUID',
+      testDataSetId: 'UUID',
+    },
+    selectedMachine: 'test',
+  },
+};
+
+export default meta;

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx

@@ -0,0 +1,210 @@
+import classNames from 'classnames';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import Button from '../Button';
+import Icon from '../Icon';
+import Select from '../Select';
+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 = '',
+  machineOptionsList = [],
+  onMachineSelectionChange = () => {},
+}: 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() };
+    console.log(newMachineInstance);
+    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),
+        ]);
+      }
+    }
+  };
+
+  useEffect(() => {
+    setMachineBranchInstances([...machineBranchInstances, {}]);
+  }, []);
+
+  return (
+    <div className="ff-sequential-connecting-branch-wrapper">
+      <div className="ff-connecting-select-branch-wrapper">
+        <div className="ff-select-branch-wrapper">
+          <Select
+            onChange={onHandleSelect}
+            optionsList={machineOptionsList}
+            required={true}
+            label="Choose Machine"
+            showLabel={true}
+            className="ff-sequential-select-branch"
+          />
+          {/* {isBrowserDetails && !!selectedMachine && ( */}
+          {!!selectedMachine && (
+            <div
+              className={classNames({
+                'ff-select-branch-arrow': isBrowserDetails,
+                'ff-select-branch-arrow-down': !isBrowserDetails,
+              })}
+            >
+              <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>}
+                </div>
+                {addBrowserModal && (
+                  <>
+                    <Button
+                      variant="tertiary"
+                      label="Browser / Device"
+                      size="small"
+                      className="branch-button"
+                      ref={selectButtonRef}
+                      onClick={onAddBrowser}
+                    />
+
+                    <AddBrowserModal
+                      ref={selectButtonRef}
+                      onUpdateAddBrowser={onUpdateAddBrowser}
+                    />
+                  </>
+                )}
+              </div>
+            </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>
+
+          <div className="ff-datalist-wrapper">
+            <Icon
+              name="datalist_icon"
+              className="ff-dataset-icon"
+              ref={dataListRef}
+            />
+            {datasetListModal && (
+              <DatasetListModal
+                ref={dataListRef}
+                onUpdateDatasetList={onUpdateDatasetList}
+              />
+            )}
+            <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>
+        </div>
+      </div>
+      <div className="ff-sequential-branches-wrapper">
+        {!isBrowserDetails && (
+          <ConnectingBranches
+            machineBranchInstances={machineBranchInstances}
+            machineColumnCount={defaultMachineColumnCount}
+            machineColumnWidth={defaultMachineColumnWidth}
+            onAddBrowser={onAddBrowser}
+            onDeleteBrowser={onDeleteBrowser}
+            onAddRunBrowser={onAddRunBrowser}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SequentialConnectingBranch;

package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss

@@ -0,0 +1,51 @@
+.ff-connecting-datalist-modal-header-wrapper,
+.ff-connecting-modal-child-wrapper {
+  width: 534px;
+  padding: 0 4px;
+}
+
+.ff-connecting-datalist-modal-header-wrapper {
+  border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
+  margin-bottom: 4px;
+}
+
+.ff-connecting-modal-child-wrapper {
+  .ff-branch-select-input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .ff-select-browser {
+      width: 263px;
+    }
+
+    .ff-branch-input-wrapper {
+      display: flex;
+      align-items: flex-end;
+      height: 38px;
+
+      .ff-input-browser {
+        width: 245px;
+      }
+    }
+  }
+}
+
+.ff-connecting-modal-footer-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+  margin-top: 8px;
+  border-top: 1px solid var(--ff-connecting-branch-modal-border);
+
+  .ff-branch-toggle-wrapper,
+  .ff-datalist-button-wrapper {
+    display: flex;
+    gap: 8px;
+  }
+
+  .ff-branch-toggle-wrapper {
+    gap: 4px;
+  }
+}

package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx

@@ -0,0 +1,107 @@
+import { forwardRef, RefObject } from 'react';
+import MiniModal from '../../../MiniModal';
+import Typography from '../../../Typography';
+import './AddBrowserModal.scss';
+import Select from '../../../Select';
+import Button from '../../../Button';
+import Toggle from '../../../Toggle';
+import Input from '../../../Input/Input';
+import { AddBrowserModalProps } from './types';
+
+const AddBrowserModal = forwardRef<HTMLButtonElement, AddBrowserModalProps>(
+  (props, ref) => {
+    // TODO: WILL BE REMOVE IN THE FUTURE
+    const selectOptions = [
+      { label: 'Execution Environment', inputName: 'number of runs' },
+      { label: 'Browser', inputName: 'Browser Version' },
+      { label: 'Android Device', inputName: 'os version' },
+      { label: 'IOS Device', inputName: 'os version-1' },
+    ];
+
+    const renderSelectOptions = () => (
+      <div>
+        {selectOptions.map(({ label, inputName }, index) => (
+          <div className="ff-branch-select-input-wrapper" key={index}>
+            <Select
+              optionsList={[]}
+              onChange={() => {}}
+              label={label}
+              className="ff-select-browser"
+            />
+            <div className="ff-branch-input-wrapper">
+              <Input
+                value="0"
+                label="Number of Runs"
+                type="number"
+                onChange={() => {}}
+                name={inputName}
+                className="ff-input-browser"
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+
+    const renderFooterContent = () => (
+      <div className="ff-connecting-modal-footer-wrapper">
+        <div className="ff-branch-toggle-wrapper">
+          <Typography as="span" lineHeight="32px">
+            Run in Headless Mode
+          </Typography>
+          <Toggle />
+        </div>
+        <div className="ff-datalist-button-wrapper">
+          <Button label="Cancel" variant="tertiary" />
+          <Button label="Update" variant="primary" />
+        </div>
+      </div>
+    );
+
+    return (
+      <div>
+        <MiniModal
+          anchorRef={ref as RefObject<HTMLButtonElement>}
+          headerProps={
+            <div className="ff-connecting-datalist-modal-header-wrapper">
+              <Typography
+                as="span"
+                color="var(--ff-connecting-branch-modal-header)"
+                fontWeight="semi-bold"
+                fontSize={12}
+                lineHeight="38px"
+              >
+                Add Browser / Device
+              </Typography>
+            </div>
+          }
+          childContent={
+            <div className="ff-connecting-modal-child-wrapper">
+              {renderSelectOptions()}
+            </div>
+          }
+          footerContent={renderFooterContent()}
+          cancelButtonProps={{
+            text: 'Cancel',
+
+            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
+            onClick: props.onUpdateAddBrowser,
+          }}
+          proceedButtonProps={{
+            text: 'Proceed',
+            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
+            onClick: props.onUpdateAddBrowser,
+          }}
+          modalPosition="right"
+          isPopOver
+          leftTopArrow
+          extraRightSpace={{ leftTopArrow: 45 }}
+          extraLeftSpace={{ rightAlignModal: 115 }}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+
+export default AddBrowserModal;

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

@@ -0,0 +1,5 @@
+export interface AddBrowserModalProps {
+
+  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
+  onUpdateAddBrowser: () => void;
+}