pixel-react 1.1.4 → 1.1.5

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;
+}

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

@@ -0,0 +1,184 @@
+@mixin arrow-style(
+  $size: 7px,
+  $color: var(--ff-connecting-branch-color),
+  $z-index: 2
+) {
+  position: absolute;
+  height: $size;
+  width: $size;
+  background-color: $color;
+  z-index: $z-index;
+}
+
+@mixin container-style(
+  $width: 100%,
+  $height: 25%,
+  $color: var(--ff-connecting-branch-color)
+) {
+  width: $width;
+  height: $height;
+  border: 1px solid $color;
+  border-top: none;
+}
+
+@mixin branch-point(
+  $size: 5px,
+  $color: var(--ff-connecting-branch-color),
+  $position: right,
+  $offset: -4px
+) {
+  position: absolute;
+  height: $size;
+  width: $size;
+  background-color: $color;
+  border-radius: 50%;
+  z-index: 2;
+  #{$position}: $offset;
+  top: calc(50% - 1px);
+}
+
+@mixin branch-arrow(
+  $clip: polygon(0 0, 0% 100%, 100% 50%),
+  $horizontal-pos: right,
+  $offset: -1px
+) {
+  position: absolute;
+  height: 7px;
+  width: 7px;
+  background-color: var(--ff-connecting-branch-color);
+  clip-path: $clip;
+  top: calc(25% - 4px);
+  #{$horizontal-pos}: $offset;
+  z-index: 2;
+}
+
+@mixin datalist-style($reverse: false) {
+  display: flex;
+  padding-top: 4px;
+  height: 24px;
+  justify-content: flex-end;
+  width: 100%;
+  align-items: center;
+  flex-direction: if($reverse, row-reverse, row);
+
+  .ff-connecting-icon {
+    margin-right: 4px;
+    cursor: pointer;
+  }
+
+  .ff-connecting-text {
+    margin-right: 8px;
+  }
+
+  .ff-connecting-delete-icon {
+    cursor: pointer;
+  }
+}
+
+@mixin end-arrow-styles($direction: right) {
+  width: 100%;
+  height: 100%;
+  margin-top: 17px;
+  border-top: 1px solid var(--ff-connecting-branch-color);
+  border-#{$direction}: 1px solid var(--ff-connecting-branch-color);
+}
+
+.ff-connecting-branch-grid,
+.ff-connecting-branch-grid-reverse {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 24px 180px 40px 180px 24px;
+  height: 66px;
+  margin-bottom: 16px;
+  position: relative;
+
+  .ff-connecting-branch-start-wrapper {
+    position: relative;
+
+    .ff-connecting-branch-arrow {
+      @include arrow-style();
+      clip-path: polygon(0 0, 0% 100%, 100% 50%);
+      top: calc(25% - 3px);
+      right: -2px;
+    }
+
+    .ff-connecting-branch-arrow-reverse {
+      @include arrow-style();
+      left: -2px;
+      top: calc(25% - 3px);
+      clip-path: polygon(0 50%, 100% 100%, 100% 0);
+    }
+
+    .ff-connecting-branch-container {
+      @include container-style();
+      border-right: none;
+      border-bottom-left-radius: 8px;
+    }
+
+    .ff-connecting-branch-container-reverse {
+      @include container-style();
+      border-left: none;
+      border-bottom-right-radius: 8px;
+    }
+  }
+
+  .ff-connecting-branch-datalist {
+    @include datalist-style();
+  }
+
+  .ff-connecting-branch-datalist-reverse {
+    @include datalist-style(true);
+  }
+
+  .ff-connecting-branch-input-point-wrapper {
+    position: relative;
+
+    .ff-connecting-branch-point {
+      @include branch-point();
+    }
+
+    .ff-connecting-branch-point-reverse {
+      @include branch-point($position: left, $offset: -4px);
+    }
+  }
+
+  .ff-connecting-branch-middle-arrow {
+    height: 0px;
+    width: 100%;
+    margin-top: calc(50% - 3px);
+    position: relative;
+
+    .ff-connecting-branch-arrow {
+      @include branch-arrow();
+    }
+
+    .ff-connecting-branch-arrow-reverse {
+      @include branch-arrow(
+        $clip: polygon(0 50%, 100% 100%, 100% 0),
+        $horizontal-pos: left,
+        $offset: -1px
+      );
+    }
+  }
+
+  .ff-connecting-branch-end-arrow {
+    @include end-arrow-styles(right);
+    border-top-right-radius: 8px;
+  }
+
+  .ff-connecting-branch-end-arrow-reverse {
+    @include end-arrow-styles(left);
+    border-top-left-radius: 8px;
+  }
+
+  .ff-connecting-branch-browser-button {
+    height: 32px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.ff-connecting-branch-grid-reverse {
+  direction: rtl;
+  margin-left: 1px;
+}