pixel-react 1.8.2 → 1.8.3

package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx

@@ -26,6 +26,7 @@ const Branches = ({
   addInstanceLabel = '',
   scriptType = '',
   projectType = '',
+  readOnly,
 }: BranchesProps) => {
   const evenRow = rowIndex % 2 === 0;
   const lastMachineInstance = checkEmpty(
@@ -192,72 +193,79 @@ const Branches = ({
                       ) as MachineType[]
                     }
                     contentReverse={!evenRow}
-                    modalId={`${machineInstanceId}-runCount-${numberOfRuns}`}
+                    modalId={`${machineInstanceId}-runCount-${
+                      numberOfRuns - 1
+                    }`}
                     onClick={() =>
                       onUpdateAddBrowserInstance(
                         `${machineInstanceId}-runCount-0`,
-                          machineInstance as ExecutionContext
+                        machineInstance as ExecutionContext
                       )
                     }
                   />
                 </div>
-                <div
-                  className={classNames({
-                    'ff-connecting-branch-datalist': evenRow,
-                    'ff-connecting-branch-datalist-reverse': !evenRow,
-                  })}
-                >
-                  {hideDataSet && (
-                    <div
-                      id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
-                      className="ff-dataset-list-branch"
+                {!readOnly && (
+                  <div
+                    className={classNames({
+                      'ff-connecting-branch-datalist': evenRow,
+                      'ff-connecting-branch-datalist-reverse': !evenRow,
+                    })}
+                  >
+                    {hideDataSet && (
+                      <>
+                        <div
+                          id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
+                          className="ff-dataset-list-branch"
+                          onClick={() =>
+                            onUpdateDataSetList(
+                              `ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
+                              {
+                                peVariableSetId: peVariableSetId,
+                                globalVariableSetId: globalVariableSetId,
+                                testDataSetId: testDataSetId,
+                              },
+                              true,
+                              numberOfRuns,
+                              machineInstanceId
+                            )
+                          }
+                        >
+                          <Icon
+                            name="datalist_icon"
+                            className="ff-connecting-icon"
+                          />
+                          <Typography
+                            className="ff-connecting-text"
+                            color="var(--ff-connecting-branch-color)"
+                          >
+                            Dataset List
+                          </Typography>
+                        </div>
+
+                        <Icon
+                          name="plus_icon"
+                          className="ff-connecting-icon"
+                          onClick={() => onAddRunBrowser(machineInstanceId)}
+                          color="var(--ff-connecting-branch-color)"
+                        />
+                        <Typography
+                          className="ff-connecting-text"
+                          color="var(--ff-connecting-branch-color)"
+                        >
+                          Run
+                        </Typography>
+                      </>
+                    )}
+                    <Icon
+                      name="delete"
+                      className="ff-connecting-delete-icon"
                       onClick={() =>
-                        onUpdateDataSetList(
-                          `ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
-                          {
-                            peVariableSetId: peVariableSetId,
-                            globalVariableSetId: globalVariableSetId,
-                            testDataSetId: testDataSetId,
-                          },
-                          true,
-                          numberOfRuns,
-                          machineInstanceId
-                        )
+                        onDeleteBrowser(machineInstanceId, numberOfRuns)
                       }
-                    >
-                      <Icon
-                        name="datalist_icon"
-                        className="ff-connecting-icon"
-                      />
-                      <Typography
-                        className="ff-connecting-text"
-                        color="var(--ff-connecting-branch-color)"
-                      >
-                        Dataset List
-                      </Typography>
-                    </div>
-                  )}
-                  <Icon
-                    name="plus_icon"
-                    className="ff-connecting-icon"
-                    onClick={() => onAddRunBrowser(machineInstanceId)}
-                    color="var(--ff-connecting-branch-color)"
-                  />
-                  <Typography
-                    className="ff-connecting-text"
-                    color="var(--ff-connecting-branch-color)"
-                  >
-                    Run
-                  </Typography>
-                  <Icon
-                    name="delete"
-                    className="ff-connecting-delete-icon"
-                    onClick={() =>
-                      onDeleteBrowser(machineInstanceId, numberOfRuns)
-                    }
-                    color="var(--ff-connecting-branch-delete-color)"
-                  />
-                </div>
+                      color="var(--ff-connecting-branch-delete-color)"
+                    />
+                  </div>
+                )}
               </div>
             ) : (
               <div className="ff-connecting-branch-browser-button">

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

@@ -24,6 +24,7 @@ export interface BranchesProps {
     machineInstance: ExecutionContext
   ) => void;
   projectType?: string;
+  readOnly: boolean
 }
 
 export interface branchTypeProps {

package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx

@@ -18,6 +18,7 @@ const ConnectingBranches = ({
   addInstanceLabel = '',
   scriptType = '',
   projectType = 'Web',
+  readOnly = false
 }: ConnectingBranchesProps) => {
   const [machineInstance, setMachineInstance] = useState<
     ExecutionContext[] | {}[]
@@ -66,6 +67,7 @@ const ConnectingBranches = ({
             addInstanceLabel={addInstanceLabel}
             scriptType={scriptType}
             projectType={projectType}
+            readOnly={readOnly}
           />
         </Fragment>
       ))}

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

@@ -21,4 +21,5 @@ export interface ConnectingBranchesProps {
     modalId: string,
     machineInstance: ExecutionContext
   ) => void;
+  readOnly: boolean;
 }

package/src/components/SequentialConnectingBranch/types.ts

@@ -8,7 +8,10 @@ export interface SequentialConnectingBranchProps {
   machineOptionsList?: Option[];
   onHandleSelect?: (option: Option) => void;
   onAddBrowserInstance?: (modalId: string) => void;
-  onUpdateAddBrowserInstance: (modalId: string, machineInstance: ExecutionContext) => void;
+  onUpdateAddBrowserInstance: (
+    modalId: string,
+    machineInstance: ExecutionContext
+  ) => void;
   onDeleteBrowserInstance?: (id: string, runCount: number) => void;
   onAddRunBrowserInstance?: (machineInstanceId: string) => void;
   onDeleteMachineInstance?: () => void;
@@ -23,6 +26,7 @@ export interface SequentialConnectingBranchProps {
   addInstanceLabel?: string;
   scriptType?: string;
   projectType?: string;
+  readOnly?: boolean;
 }
 
 // Type for machine information

package/src/components/TableTree/Components/TableCell.tsx

@@ -15,7 +15,7 @@ const renderSpaces = (
       <span
         key={i}
         className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
-          isLast && i === level-1 ? 'last-node' : ''
+          isLast && i === level - 1 ? 'last-node' : ''
         }`}
       />
     ))}
@@ -51,7 +51,7 @@ const TableCell = React.memo(
           {col.isTree && select === 'checkbox' && (
             <Checkbox
               checked={selected.includes(node.id)}
-              onChange={() => onCheckBoxChange('checkbox', node)}
+              onChange={(e) => onCheckBoxChange(e, node)}
             />
           )}
           {col.isTree && select === 'radio' && (
@@ -59,7 +59,7 @@ const TableCell = React.memo(
               name={node.title}
               checked={selected.includes(node.id)}
               value={node.id}
-              onChange={() => onCheckBoxChange('radio', node)}
+              onChange={(e) => onCheckBoxChange(e, node)}
             />
           )}
           {prepareData(node, col)}

package/src/components/TableTree/TableTree.scss

@@ -199,13 +199,6 @@
   transition: transform 0.3s ease;
 }
 
-tr:after {
-  content: ' ';
-  display: block;
-  visibility: hidden;
-  clear: both;
-}
-
 .tree-table-space-container {
   display: inline-flex;
   // flex-direction: row-reverse;

package/src/components/TableTree/TableTree.tsx

@@ -4,7 +4,6 @@ import { TreeTableProps } from './types';
 import TableHead from './Components/TableHead';
 import TableBody from './Components/TableBody';
 import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
-import getAllChildIds from './Utils/getAllChildIds';
 import functionCheck from '../../utils/functionCheck/functionCheck';
 
 const TreeTable: React.FC<TreeTableProps> = ({
@@ -41,28 +40,10 @@ const TreeTable: React.FC<TreeTableProps> = ({
   );
 
   const handleCheckBoxChange = useCallback(
-    (type: string, node: any) => {
-      const nodeId = node.id;
-
-      if (type === 'radio') {
-        onChange?.('true', [nodeId]);
-      } else {
-        let updatedSelected = [...selected];
-
-        if (!updatedSelected.includes(nodeId)) {
-          const childIds = getAllChildIds(nodeId, treeData);
-          updatedSelected = [...new Set([...updatedSelected, ...childIds])]; // Add children
-        } else {
-          const childIds = getAllChildIds(nodeId, treeData);
-          updatedSelected = updatedSelected.filter(
-            (id) => !childIds.includes(id)
-          );
-        }
-
-        onChange?.('true', updatedSelected);
-      }
+    (e: any, node: any) => {
+      onChange?.(e, node);
     },
-    [selected, treeData, onChange]
+    [onChange]
   );
 
   const handleRowClick = useCallback(

package/src/components/TableTree/types.ts

@@ -15,7 +15,7 @@ export interface TableCellProps {
   level: number;
   selected: string[];
   select: string | null;
-  onCheckBoxChange: (type: string, node: any) => void;
+  onCheckBoxChange: (e: any, node: string[] | any) => void;
   onToggleExpand: (node: any) => void;
   parentSiblings: boolean[];
   isLast: boolean | undefined;
@@ -32,7 +32,7 @@ export interface TableBodyProps {
   select: string | null;
   onRowClick: (e: any, node: any) => void;
   onToggleExpand: (node: any) => void;
-  onCheckBoxChange: (type: string, node: any) => void;
+  onCheckBoxChange: (e: any, node: string[] | any) => void;
 }
 
 export interface TableRowProps {
@@ -43,7 +43,7 @@ export interface TableRowProps {
   select: string | null;
   onRowClick: (e: any, node: any) => void;
   onToggleExpand: (node: any) => void;
-  onCheckBoxChange: (type: string, node: any) => void;
+  onCheckBoxChange: (e: any, node: string[] | any) => void;
   parentSiblings: boolean[];
   isLast: boolean | undefined;
 }
@@ -65,7 +65,7 @@ export interface TreeTableProps {
   columnsData: Column[];
   selected?: string[];
   select?: 'radio' | 'checkbox' | 'none';
-  onChange?: (e: any, node: string[]) => void;
+  onChange?: (e: any, node: string[] | any) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
   onExpand?: (_isExpanded: boolean, node: string) => void;
   loadMore?: (_direction?: string) => void;

package/src/utils/formData/ConvertFormDataToObject.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { convertFormDataToObject } from './ConvertFormDataToObject';
+
+export default {
+  title: 'Utils/convertFormDataToObject',
+  component: convertFormDataToObject,
+};
+
+export const Default = () => {
+  const formData = new FormData();
+  formData.append('username', 'Md Imran');
+  formData.append('email', 'im@xyz.com');
+  formData.append('age', '23');
+
+  const result = convertFormDataToObject(formData);
+
+  return (
+    <div>
+      <h3>Test convertFormDataToObject</h3>
+      <pre>
+        Convertion to an Array to show existing FormData:
+        {JSON.stringify(Array.from(formData.entries()), null, 2)}
+      </pre>
+      <pre>Result: {JSON.stringify(result, null, 2)}</pre>
+    </div>
+  );
+};

package/src/utils/formData/ConvertFormDataToObject.ts

@@ -0,0 +1,14 @@
+export const convertFormDataToObject = (formData: FormData): Record<string, any> => {
+  const obj: Record<string, any> = {};
+  formData.forEach((value, key) => {
+    if (obj[key]) {
+      // If the key already exists, convert it to an array
+      obj[key] = Array.isArray(obj[key])
+        ? [...obj[key], value]
+        : [obj[key], value];
+    } else {
+      obj[key] = value;
+    }
+  });
+  return obj;
+};

package/src/utils/getExtension/getExtension.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { getExtension } from './getExtension';
 
 export default {

package/src/validations/regex.stories.tsx

@@ -46,6 +46,12 @@ import {
   CURRENCY_GENERIC_REGEX,
   LINKEDIN_PROFILE_REGEX,
   TWITTER_HANDLE_REGEX,
+  STEP_GROUP_NAME_REGEX,
+  NLP_DESCRIPTION_REGEX,
+  FILE_NAME_REGEX,
+  ELEMENTS_TRAILING_SPACE_REGEX,
+  ELEMENTS_WHITE_SPACE_REGEX,
+  PARAMETER_ALPHANUMERIC_REGEX,
 } from './regex';
 
 export default {
@@ -287,8 +293,41 @@ export const Playground = () => {
       regex: TWITTER_HANDLE_REGEX,
       description: 'Validates Twitter handle (e.g. @username)',
     },
+    {
+      name: 'STEP_GROUP_NAME_REGEX',
+      regex: STEP_GROUP_NAME_REGEX,
+      description:
+        'Step group name accept only ( ,) ,-,_ special characters(e.g,step-group_one(test))',
+    },
+    {
+      name: 'NLP_DESCRIPTION_REGEX',
+      regex: NLP_DESCRIPTION_REGEX,
+      description:
+        'NLP Description should allow _ and $ only (e.g ,$nlpName_test)',
+    },
+    {
+      name: 'FILE_NAME_REGEX',
+      regex: FILE_NAME_REGEX,
+      description: `It should include a valid file extension (e.g.,'.txt', '.jpg') without special characters like '@' or multiple dots after the extension.`,
+    },
+    {
+      name: 'ELEMENTS_TRAILING_SPACE_REGEX',
+      regex: ELEMENTS_TRAILING_SPACE_REGEX,
+      description: `Element Name should not have space in the initial and end.`,
+    },
+    {
+      name: 'ELEMENTS_WHITE_SPACE_REGEX',
+      regex: ELEMENTS_WHITE_SPACE_REGEX,
+      description: `Elements name should not have only white space.`,
+    },
+    {
+      name: 'PARAMETER_ALPHANUMERIC_REGEX,',
+      regex: PARAMETER_ALPHANUMERIC_REGEX,
+      description: `Parameter name should be alphanumeric.`,
+    },
   ];
 
+
   const validateInput = () => {
     const validator = validators.find(
       (validator) => validator.name === selectedRegex

package/src/validations/regex.ts

@@ -145,6 +145,19 @@ const LINKEDIN_PROFILE_REGEX =
 // Twitter Handle Validation
 const TWITTER_HANDLE_REGEX = /^@?([a-zA-Z0-9_]{1,15})$/;
 
+const STEP_GROUP_NAME_REGEX = /^[a-zA-Z0-9()\-_ ]+$/;
+
+const NLP_DESCRIPTION_REGEX = /^[a-zA-Z0-9_$\s]*$/;
+
+const FILE_NAME_REGEX = /\.([^.@]+)$/;
+
+const ELEMENTS_TRAILING_SPACE_REGEX = /^\S.*\S$/;
+
+const ELEMENTS_WHITE_SPACE_REGEX = /.*\S.*/;
+
+const PARAMETER_ALPHANUMERIC_REGEX =
+  /^[-_A-Za-z0-9 ]*$|^[-_A-Za-z0-9 ][A-Za-z0-9 ]*[-_A-Za-z-_]$/;
+
 export {
   EMAIL_REGEX,
   URL_REGEX,
@@ -191,4 +204,10 @@ export {
   CURRENCY_GENERIC_REGEX,
   LINKEDIN_PROFILE_REGEX,
   TWITTER_HANDLE_REGEX,
+  STEP_GROUP_NAME_REGEX,
+  NLP_DESCRIPTION_REGEX,
+  FILE_NAME_REGEX,
+  ELEMENTS_TRAILING_SPACE_REGEX,
+  ELEMENTS_WHITE_SPACE_REGEX,
+  PARAMETER_ALPHANUMERIC_REGEX,
 };