pixel-react 1.6.8 → 1.6.9

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

@@ -1,17 +1,17 @@
-import { dataSetValues, ExecutionContext } from '../../types';
-
-export interface ConnectingBranchesProps {
-  machineBranchInstances: ExecutionContext[] | {}[];
-  machineColumnCount: number;
-  machineColumnWidth: number;
-  onAddBrowser: (modalId: string) => void;
-  onDeleteBrowser: (id: string, runCount: number) => void;
-  onAddRunBrowser: (id: string) => void;
-  onUpdateDataSetList: (
-    id: string,
-    dataSetObject: dataSetValues,
-    isInstance?: boolean,
-    noOfRuns?: number,
-    machineInstanceId?: string
-  ) => void;
-}
+import { dataSetValues, ExecutionContext } from '../../types';
+
+export interface ConnectingBranchesProps {
+  machineBranchInstances: ExecutionContext[] | {}[];
+  machineColumnCount: number;
+  machineColumnWidth: number;
+  onAddBrowser: (modalId: string) => void;
+  onDeleteBrowser: (id: string, runCount: number) => void;
+  onAddRunBrowser: (id: string) => void;
+  onUpdateDataSetList: (
+    id: string,
+    dataSetObject: dataSetValues,
+    isInstance?: boolean,
+    noOfRuns?: number,
+    machineInstanceId?: string
+  ) => void;
+}

package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss

@@ -1,31 +1,31 @@
-.ff-datalist-modal-header-wrapper,
-.ff-datalist-modal-child-wrapper,
-.ff-datalist-modal-footer-wrapper {
-  margin: 0 8px;
-}
-
-.ff-datalist-modal-header-wrapper {
-  width: 255px;
-  border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
-  display: flex;
-  align-items: center;
-}
-
-.ff-datalist-modal-child-wrapper {
-  .variable {
-    margin: 8px 0;
-  }
-}
-
-.ff-datalist-modal-footer-wrapper {
-  display: flex;
-  justify-content: space-between;
-  border-top: 1px solid var(--ff-connecting-branch-modal-border);
-
-  .datalist-button-wrapper {
-    display: flex;
-    gap: 10px;
-    margin-top: 4px;
-    justify-content: flex-end;
-  }
-}
+.ff-datalist-modal-header-wrapper,
+.ff-datalist-modal-child-wrapper,
+.ff-datalist-modal-footer-wrapper {
+  margin: 0 8px;
+}
+
+.ff-datalist-modal-header-wrapper {
+  width: 255px;
+  border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
+  display: flex;
+  align-items: center;
+}
+
+.ff-datalist-modal-child-wrapper {
+  .variable {
+    margin: 8px 0;
+  }
+}
+
+.ff-datalist-modal-footer-wrapper {
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid var(--ff-connecting-branch-modal-border);
+
+  .datalist-button-wrapper {
+    display: flex;
+    gap: 10px;
+    margin-top: 4px;
+    justify-content: flex-end;
+  }
+}

package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx

@@ -1,85 +1,85 @@
-import { forwardRef, RefObject } from 'react';
-import MiniModal from '../../../MiniModal';
-import Typography from '../../../Typography';
-import './DatasetListModal.scss';
-import Select from '../../../Select';
-import Checkbox from '../../../Checkbox';
-import Button from '../../../Button';
-import { DatasetListModalProps } from './types';
-
-const DatasetListModal = forwardRef<HTMLButtonElement, DatasetListModalProps>(
-  (props, ref) => {
-    const selectOptions = [
-      { label: 'Project Environment Variable' },
-      { label: 'Global Variables' },
-      { label: 'Test Data Set' },
-    ];
-
-    const renderSelectOptions = () =>
-      selectOptions.map(({ label }, idx) => (
-        <Select
-          key={idx}
-          optionsList={[]}
-          onChange={() => {}}
-          label={label}
-          className="variable"
-        />
-      ));
-
-    const renderFooterContent = () => (
-      <div className="ff-datalist-modal-footer-wrapper">
-        <Checkbox checked={false} label="Set as Default" />
-        <div className="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-datalist-modal-header-wrapper">
-              <Typography
-                as="span"
-                color="var(--ff-connecting-branch-modal-header)"
-                fontWeight="semi-bold"
-                fontSize={12}
-                lineHeight="38px"
-              >
-                Data Sets
-              </Typography>
-            </div>
-          }
-          childContent={
-            <div className="ff-datalist-modal-child-wrapper">
-              {renderSelectOptions()}
-            </div>
-          }
-          footerContent={renderFooterContent()}
-          cancelButtonProps={{
-            text: 'Cancel',
-
-            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-            onClick: props?.onUpdateDatasetList,
-          }}
-          proceedButtonProps={{
-            text: 'Proceed',
-            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-            onClick: props?.onUpdateDatasetList,
-          }}
-          modalPosition="right"
-          isPopOver
-          leftTopArrow
-          extraRightSpace={{ leftTopArrow: 40 }}
-          extraLeftSpace={{ rightAlignModal: 110 }}
-          {...props}
-        />
-      </div>
-    );
-  }
-);
-
-export default DatasetListModal;
+import { forwardRef, RefObject } from 'react';
+import MiniModal from '../../../MiniModal';
+import Typography from '../../../Typography';
+import './DatasetListModal.scss';
+import Select from '../../../Select';
+import Checkbox from '../../../Checkbox';
+import Button from '../../../Button';
+import { DatasetListModalProps } from './types';
+
+const DatasetListModal = forwardRef<HTMLButtonElement, DatasetListModalProps>(
+  (props, ref) => {
+    const selectOptions = [
+      { label: 'Project Environment Variable' },
+      { label: 'Global Variables' },
+      { label: 'Test Data Set' },
+    ];
+
+    const renderSelectOptions = () =>
+      selectOptions.map(({ label }, idx) => (
+        <Select
+          key={idx}
+          optionsList={[]}
+          onChange={() => {}}
+          label={label}
+          className="variable"
+        />
+      ));
+
+    const renderFooterContent = () => (
+      <div className="ff-datalist-modal-footer-wrapper">
+        <Checkbox checked={false} label="Set as Default" />
+        <div className="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-datalist-modal-header-wrapper">
+              <Typography
+                as="span"
+                color="var(--ff-connecting-branch-modal-header)"
+                fontWeight="semi-bold"
+                fontSize={12}
+                lineHeight="38px"
+              >
+                Data Sets
+              </Typography>
+            </div>
+          }
+          childContent={
+            <div className="ff-datalist-modal-child-wrapper">
+              {renderSelectOptions()}
+            </div>
+          }
+          footerContent={renderFooterContent()}
+          cancelButtonProps={{
+            text: 'Cancel',
+
+            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
+            onClick: props?.onUpdateDatasetList,
+          }}
+          proceedButtonProps={{
+            text: 'Proceed',
+            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
+            onClick: props?.onUpdateDatasetList,
+          }}
+          modalPosition="right"
+          isPopOver
+          leftTopArrow
+          extraRightSpace={{ leftTopArrow: 40 }}
+          extraLeftSpace={{ rightAlignModal: 110 }}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+
+export default DatasetListModal;

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

@@ -1,4 +1,4 @@
-export interface DatasetListModalProps {
-  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-  onUpdateDatasetList: () => void;
-}
+export interface DatasetListModalProps {
+  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
+  onUpdateDatasetList: () => void;
+}

package/src/components/SequentialConnectingBranch/index.ts

@@ -1 +1 @@
-export { default } from './SequentialConnectingBranch';
+export { default } from './SequentialConnectingBranch';

package/src/components/SequentialConnectingBranch/types.ts

@@ -1,60 +1,60 @@
-import { Option } from '../Select/types';
-
-export interface SequentialConnectingBranchProps {
-  machineInstances?: ExecutionContext[] | {}[];
-  machineColumnWidth?: number;
-  machineColumnCount?: number;
-  selectedMachine?: Option;
-  machineOptionsList?: Option[];
-  onHandleSelect?: (option: Option) => void;
-  onAddBrowserInstance?: (modalId: string) => void;
-  onUpdateAddBrowserInstance?: () => void;
-  onDeleteBrowserInstance?: (id: string, runCount: number) => void;
-  onAddRunBrowserInstance?: (machineInstanceId: string) => void;
-  onDeleteMachineInstance?: () => void;
-  onUpdateDataSetList: (
-    id: string,
-    dataSetObject: dataSetValues,
-    isInstance?: boolean,
-    noOfRuns?: number,
-    machineInstanceId?: string
-  ) => void;
-  dataSetValues: dataSetValues;
-}
-
-// Type for machine information
-export interface MachineInfo {
-  osName: string;
-  osVersion: string;
-  hostName: string;
-}
-
-// Type for device information
-export interface DeviceInfo {
-  // Define properties as needed; assuming it can have various structures.
-  // For example:
-  // deviceName: string;
-  // deviceType: string;
-}
-
-export interface ExecutionContext {
-  machineInstanceId: string;
-  clientId: string;
-  numberOfRuns: number;
-  executionEnv?: 'Local'; // Change to specific enum if more environments exist
-  browserName?: 'Local' | 'mac' | 'android' | 'Google Chrome';
-  browserVersion: string;
-  systemUrl: string;
-  machineInfo: MachineInfo;
-  deviceInfo: DeviceInfo[];
-  headless: boolean;
-  peVariableSetId: string;
-  globalVariableSetId: string;
-  testDataSetId: string;
-}
-
-export interface dataSetValues {
-  peVariableSetId: string;
-  globalVariableSetId: string;
-  testDataSetId: string;
-}
+import { Option } from '../Select/types';
+
+export interface SequentialConnectingBranchProps {
+  machineInstances?: ExecutionContext[] | {}[];
+  machineColumnWidth?: number;
+  machineColumnCount?: number;
+  selectedMachine?: Option;
+  machineOptionsList?: Option[];
+  onHandleSelect?: (option: Option) => void;
+  onAddBrowserInstance?: (modalId: string) => void;
+  onUpdateAddBrowserInstance?: () => void;
+  onDeleteBrowserInstance?: (id: string, runCount: number) => void;
+  onAddRunBrowserInstance?: (machineInstanceId: string) => void;
+  onDeleteMachineInstance?: () => void;
+  onUpdateDataSetList: (
+    id: string,
+    dataSetObject: dataSetValues,
+    isInstance?: boolean,
+    noOfRuns?: number,
+    machineInstanceId?: string
+  ) => void;
+  dataSetValues: dataSetValues;
+}
+
+// Type for machine information
+export interface MachineInfo {
+  osName: string;
+  osVersion: string;
+  hostName: string;
+}
+
+// Type for device information
+export interface DeviceInfo {
+  // Define properties as needed; assuming it can have various structures.
+  // For example:
+  // deviceName: string;
+  // deviceType: string;
+}
+
+export interface ExecutionContext {
+  machineInstanceId: string;
+  clientId: string;
+  numberOfRuns: number;
+  executionEnv?: 'Local'; // Change to specific enum if more environments exist
+  browserName?: 'Local' | 'mac' | 'android' | 'Google Chrome';
+  browserVersion: string;
+  systemUrl: string;
+  machineInfo: MachineInfo;
+  deviceInfo: DeviceInfo[];
+  headless: boolean;
+  peVariableSetId: string;
+  globalVariableSetId: string;
+  testDataSetId: string;
+}
+
+export interface dataSetValues {
+  peVariableSetId: string;
+  globalVariableSetId: string;
+  testDataSetId: string;
+}

package/src/components/StateDropdown/StateDropdown.stories.tsx

@@ -1,104 +1,104 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import StateDropdown from './StateDropdown';
-import React from 'react';
-
-const meta: Meta<typeof StateDropdown> = {
-  title: 'Components/StateDropdown',
-  component: StateDropdown,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof StateDropdown>;
-
-export const Disable: Story = {
-  args: {
-    value: 'New',
-    handleStateValueClick: () => {},
-    handleDropdownOptionsClick: () => {},
-    isOnlyReviewer: false,
-    nodeObj: { label: 'New', value: 'New' },
-    isReviewer: true,
-    isApprovePage: false,
-    disabled: true,
-    userHasOnlyViewAccess: true,
-    showBorder: true,
-    height:24,
-  },
-};
-
-export const Review: Story = {
-  args: {
-    value: 'Review',
-    handleStateValueClick: () => {},
-    handleDropdownOptionsClick: () => {},
-    isOnlyReviewer: false,
-    nodeObj: { label: 'Review', value: 'Review' },
-    isReviewer: true,
-    isApprovePage: true,
-    disabled: false,
-    userHasOnlyViewAccess: false,
-  },
-};
-
-export const Reject: Story = {
-  args: {
-    value: 'Rejected',
-    handleStateValueClick: () => {},
-    handleDropdownOptionsClick: () => {},
-    isOnlyReviewer: false,
-    nodeObj: { label: 'Rejected', value: 'Rejected' },
-    isReviewer: false,
-    isApprovePage: false,
-    disabled: false,
-    userHasOnlyViewAccess: false,
-  },
-};
-
-export const Approved: Story = {
-  args: {
-    value: 'Approved',
-    handleStateValueClick: () => {},
-    handleDropdownOptionsClick: () => {},
-    isOnlyReviewer: false,
-    nodeObj: { label: 'Approved', value: 'Approved' },
-    isReviewer: false,
-    isApprovePage: false,
-    disabled: false,
-    userHasOnlyViewAccess: true,
-  },
-};
-
-export const NewState: Story = {
-  render: () => {
-    const value = 'New';
-    const state = {
-      label: 'New',
-      value: 'New',
-    };
-
-    const handleDropdownOptionsClick = () => {};
-
-    const handleStateValueClick = () => {};
-
-    return (
-      <StateDropdown
-        value={value}
-        nodeObj={state}
-        isReviewer={false}
-        isApprovePage={false}
-        handleStateValueClick={handleStateValueClick}
-        handleDropdownOptionsClick={handleDropdownOptionsClick}
-        disabled={false}
-        isOnlyReviewer={false}
-        userHasOnlyViewAccess={false}
-        showBorder={true}
-        height={24}
-      />
-    );
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import StateDropdown from './StateDropdown';
+import React from 'react';
+
+const meta: Meta<typeof StateDropdown> = {
+  title: 'Components/StateDropdown',
+  component: StateDropdown,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof StateDropdown>;
+
+export const Disable: Story = {
+  args: {
+    value: 'New',
+    handleStateValueClick: () => {},
+    handleDropdownOptionsClick: () => {},
+    isOnlyReviewer: false,
+    nodeObj: { label: 'New', value: 'New' },
+    isReviewer: true,
+    isApprovePage: false,
+    disabled: true,
+    userHasOnlyViewAccess: true,
+    showBorder: true,
+    height:24,
+  },
+};
+
+export const Review: Story = {
+  args: {
+    value: 'Review',
+    handleStateValueClick: () => {},
+    handleDropdownOptionsClick: () => {},
+    isOnlyReviewer: false,
+    nodeObj: { label: 'Review', value: 'Review' },
+    isReviewer: true,
+    isApprovePage: true,
+    disabled: false,
+    userHasOnlyViewAccess: false,
+  },
+};
+
+export const Reject: Story = {
+  args: {
+    value: 'Rejected',
+    handleStateValueClick: () => {},
+    handleDropdownOptionsClick: () => {},
+    isOnlyReviewer: false,
+    nodeObj: { label: 'Rejected', value: 'Rejected' },
+    isReviewer: false,
+    isApprovePage: false,
+    disabled: false,
+    userHasOnlyViewAccess: false,
+  },
+};
+
+export const Approved: Story = {
+  args: {
+    value: 'Approved',
+    handleStateValueClick: () => {},
+    handleDropdownOptionsClick: () => {},
+    isOnlyReviewer: false,
+    nodeObj: { label: 'Approved', value: 'Approved' },
+    isReviewer: false,
+    isApprovePage: false,
+    disabled: false,
+    userHasOnlyViewAccess: true,
+  },
+};
+
+export const NewState: Story = {
+  render: () => {
+    const value = 'New';
+    const state = {
+      label: 'New',
+      value: 'New',
+    };
+
+    const handleDropdownOptionsClick = () => {};
+
+    const handleStateValueClick = () => {};
+
+    return (
+      <StateDropdown
+        value={value}
+        nodeObj={state}
+        isReviewer={false}
+        isApprovePage={false}
+        handleStateValueClick={handleStateValueClick}
+        handleDropdownOptionsClick={handleDropdownOptionsClick}
+        disabled={false}
+        isOnlyReviewer={false}
+        userHasOnlyViewAccess={false}
+        showBorder={true}
+        height={24}
+      />
+    );
+  },
+};
+
+export default meta;