pixel-react 1.10.3 → 1.10.5

package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx

@@ -1,10 +1,16 @@
+import { ffid } from '../../../utils/ffID/ffid';
 import Typography from '../../Typography';
-import { indexType, MachineData, MachineInstancesProps } from '../types';
+import {
+  indexType,
+  MachineData,
+  MachineInstancesProps,
+  RunLevelExecutionDataSet,
+} from '../types';
 
 const MachineInstances: React.FC<MachineInstancesProps> = ({
   getChildNodeComponent,
-  parentNode,
-  data,
+  parentNodeIndex,
+  parentNodeData,
   verticalLineHeight,
   datasetHeight,
   curveHeights,
@@ -13,7 +19,7 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
 }) => {
   return (
     <>
-      {data?.machineInstances?.length === 0 ? (
+      {parentNodeData?.machineInstances?.length === 0 ? (
         <>
           <div className="ff-selectedMachines-connecting-line">
             <div className="ff-line">
@@ -22,18 +28,19 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
             </div>
           </div>
           <div className="ff-machine-instance ff-machine-env-button">
-            {getChildNodeComponent(true, data, parentNode)}
+            {getChildNodeComponent({
+              isButton: true,
+              parentNodeData,
+              parentNodeIndex,
+            })}
           </div>
         </>
       ) : (
-        data?.machineInstances?.map(
-          (instance: MachineData, machineInstanceIndex: indexType) => {
-            const isFirstLine = machineInstanceIndex === 0;
+        parentNodeData?.machineInstances?.map(
+          (childNodeData: MachineData, childNodeIndex: indexType) => {
+            const isFirstLine = childNodeIndex === 0;
             return (
-              <div
-                className="ff-machine-instance-row"
-                key={instance.clientId || machineInstanceIndex}
-              >
+              <div className="ff-machine-instance-row" key={ffid()}>
                 <div
                   className={`ff-selectedMachines-connecting-line ${
                     !isFirstLine ? 'ff-second-line' : ''
@@ -53,23 +60,28 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
                 </div>
 
                 <div className="ff-machine-instance">
-                  {instance.runLevelExecutionDataSets.map(
+                  {childNodeData.runLevelExecutionDataSets.map(
                     (
-                      dataSet: MachineData,
-                      runLevelExecutionDataIndex: indexType
+                      runLevelExecutionDataSet: RunLevelExecutionDataSet,
+                      runLevelExecutionDataSetIndex: indexType
                     ) => (
                       <div
-                        key={runLevelExecutionDataIndex}
+                        key={
+                          runLevelExecutionDataSet?.runLevelExecutionDataSetId +
+                          ffid()
+                        }
                         className="ff-run-level-execution-dataset"
                         ref={
-                          runLevelExecutionDataIndex === 0 ? datasetRef : null
+                          runLevelExecutionDataSetIndex === 0
+                            ? datasetRef
+                            : null
                         }
                       >
                         <div
                           className="ff-execution-item"
-                          key={dataSet.executionDataSetId}
+                          key={ffid()}
                           ref={(element) =>
-                            (itemRefs.current[runLevelExecutionDataIndex] =
+                            (itemRefs.current[runLevelExecutionDataSetIndex] =
                               element)
                           }
                         >
@@ -78,18 +90,19 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
                             style={{ top: `${-datasetHeight}px` }}
                           >
                             <div
-                              className={`ff-curve ff-connector-${runLevelExecutionDataIndex}`}
+                              className={`ff-curve ff-connector-${runLevelExecutionDataSetIndex}`}
                               style={{
-                                height: `${curveHeights[runLevelExecutionDataIndex]}px`,
+                                height: `${curveHeights[runLevelExecutionDataSetIndex]}px`,
                               }}
                             >
                               <div
-                                className={`ff-curve-right-icon ff-curve-right-icon-${runLevelExecutionDataIndex}`}
+                                className={`ff-curve-right-icon ff-curve-right-icon-${runLevelExecutionDataSetIndex}`}
                               ></div>
-                              {dataSet?.runScriptCount && (
+                              {runLevelExecutionDataSet?.runScriptCount && (
                                 <div className="ff-selectedMachines-connecting-line-text">
                                   <Typography fontSize={8} fontWeight="regular">
-                                    {dataSet.runScriptCount} Script
+                                    {runLevelExecutionDataSet.runScriptCount}{' '}
+                                    Script
                                   </Typography>
                                 </div>
                               )}
@@ -97,14 +110,15 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
                           </div>
 
                           <div className="ff-run-data-box">
-                            {getChildNodeComponent(
-                              false,
-                              instance,
-                              machineInstanceIndex,
-                              dataSet,
-                              runLevelExecutionDataIndex,
-                              parentNode
-                            )}
+                            {getChildNodeComponent({
+                              isButton: false,
+                              childNodeData,
+                              childNodeIndex,
+                              runLevelExecutionDataSet,
+                              runLevelExecutionDataSetIndex,
+                              parentNodeData,
+                              parentNodeIndex,
+                            })}
                           </div>
                         </div>
                       </div>
@@ -112,7 +126,8 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
                   )}
                 </div>
 
-                {machineInstanceIndex === data.machineInstances.length - 1 && (
+                {childNodeIndex ===
+                  parentNodeData.machineInstances.length - 1 && (
                   <>
                     <div className="ff-selectedMachines-connecting-line ff-second-line">
                       <div className="ff-line">
@@ -122,12 +137,12 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
                     </div>
 
                     <div className="ff-machine-instance ff-machine-env-button">
-                      {getChildNodeComponent(
-                        true,
-                        data,
-                        parentNode,
-                        machineInstanceIndex + 1
-                      )}
+                      {getChildNodeComponent({
+                        isButton: true,
+                        parentNodeData,
+                        parentNodeIndex,
+                        childNodeIndex: childNodeIndex + 1,
+                      })}
                     </div>
                   </>
                 )}

package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import ConnectingBranch from './ConnectingBranch';
 import machineData from './data';
 import Button from '../Button/Button';
+import { ConnectingNodeConfig } from './types';
 
 const meta: Meta<typeof ConnectingBranch> = {
   title: 'Components/ConnectingBranch',
@@ -17,7 +18,7 @@ export default meta;
 
 type Story = StoryObj<typeof ConnectingBranch>;
 
-const getChildNodeComponent = (isButton: boolean) => {
+const getChildNodeComponent = ({ isButton }: ConnectingNodeConfig) => {
   if (isButton) {
     return (
       <div>
@@ -36,7 +37,7 @@ const getParentNodeComponentActionItems = () => {
   return <div> Machine Action Items</div>;
 };
 
-const getParentNodeComponent = (isMultiSelect: boolean) => (
+const getParentNodeComponent = ({ isMultiSelect }: ConnectingNodeConfig) => (
   <div className="ff-parent-node-container">
     {' '}
     {isMultiSelect ? 'MultiSelect' : 'Select'} DropDown

package/src/components/ConnectingBranch/ConnectingBranch.tsx

@@ -9,6 +9,7 @@ import {
 import { ArcherContainer, ArcherElement } from 'react-archer';
 import MachineInstances from './BranchComponents/MachineInstances';
 import Typography from '../Typography';
+import { ffid } from '../../utils/ffID/ffid';
 
 const ConnectingBranch: React.FC<ConnectBranchProps> = ({
   data: machineData,
@@ -37,7 +38,7 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
     if (datasetRef.current) {
       setDatasetHeight(datasetRef.current.offsetHeight);
     }
-  }, []);
+  }, [machineData]);
 
   const calculateCurveHeight = () => {
     const heights = itemRefs.current.map((_, index) => {
@@ -49,7 +50,7 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
 
   useEffect(() => {
     calculateCurveHeight();
-  }, [datasetHeight]);
+  }, [datasetHeight, machineData]);
 
   const calculateRowSpan = (machine: MachineData): number => {
     const baseRows = 1;
@@ -57,14 +58,13 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
     return Math.max(baseRows + childrenRows, 1);
   };
 
-  const machineCount =
-    machineData?.executionSettings?.machines?.selectedMachines?.length;
+  const machineCount = machineData?.machines?.selectedMachines?.length;
   const isOddMachineCount = machineCount % 2 !== 0;
 
   let currentRow = 1;
 
   const calculateTotalRows = (): number => {
-    return machineData.executionSettings.machines.selectedMachines.reduce(
+    return machineData.machines.selectedMachines.reduce(
       (totalRows: indexType, machine: MachineData) =>
         totalRows + calculateRowSpan(machine),
       1
@@ -73,7 +73,7 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
 
   const oddCountRow = Math.round(calculateTotalRows() / 2);
   const middleIndex = Math.floor(
-    machineData.executionSettings.machines.selectedMachines.length / 2
+    machineData.machines.selectedMachines.length / 2
   );
   return (
     <div className="connecting-branch-container">
@@ -85,22 +85,22 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
         noCurves
       >
         <div className="ff-connecting-branch-grid-container">
-          {machineData?.executionSettings?.machines?.selectedMachines.map(
-            (machine: MachineData, index: indexType) => {
+          {machineData?.machines?.selectedMachines.map(
+            (parentNodeData: MachineData, parentNodeIndex: indexType) => {
               const rowStart = currentRow;
-              const rowSpan = calculateRowSpan(machine);
+              const rowSpan = calculateRowSpan(parentNodeData);
               currentRow += rowSpan;
               const gap = 16;
               const verticalLineHeight = calculateVerticalLineHeight(
-                machine?.machineInstances,
+                parentNodeData?.machineInstances,
                 datasetHeight,
                 gap
               );
               return (
-                <React.Fragment key={index}>
+                <React.Fragment key={ffid()}>
                   {/* Show ff-script-count-box only for the middle index */}
-                  {((!isOddMachineCount && index === middleIndex) ||
-                    (isOddMachineCount && index === 0)) && (
+                  {((!isOddMachineCount && parentNodeIndex === middleIndex) ||
+                    (isOddMachineCount && parentNodeIndex === 0)) && (
                     <ArcherElement id="rootNode">
                       <div
                         className="ff-grid-item ff-dynamic-item"
@@ -113,10 +113,7 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
                         <div className="ff-script-count-container">
                           <div className="ff-script-count-box">
                             <Typography fontSize={12} fontWeight="regular">
-                              {
-                                machineData?.executionSettings?.machines
-                                  ?.totalNoScript
-                              }
+                              {machineData?.machines?.totalNoScript}
                             </Typography>
                             <Typography fontSize={12} fontWeight="regular">
                               Scripts
@@ -136,8 +133,8 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
                     <div className="ff-selectedMachines-input">
                       <div className="ff-input-box-container">
                         <ArcherElement
-                          id={`parentnode${index}`}
-                          key={machine?.clientId}
+                          id={`parentnode${parentNodeIndex}`}
+                          key={ffid()}
                           relations={[
                             {
                               targetId: 'rootNode',
@@ -147,14 +144,21 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
                           ]}
                         >
                           {/* Todo: here  we will add select dropdown */}
-                          {getParentNodeComponent(false, machine, index)}
+                          {getParentNodeComponent({
+                            isMultiSelect: false,
+                            parentNodeData,
+                            parentNodeIndex,
+                          })}
                         </ArcherElement>
-                        {getParentNodeComponentActionItems(machine, index)}
+                        {getParentNodeComponentActionItems({
+                          parentNodeData,
+                          parentNodeIndex,
+                        })}
                       </div>
                     </div>
                     <MachineInstances
-                      parentNode={index}
-                      data={machine}
+                      parentNodeIndex={parentNodeIndex}
+                      parentNodeData={parentNodeData}
                       verticalLineHeight={verticalLineHeight}
                       datasetHeight={datasetHeight}
                       curveHeights={curveHeights}
@@ -184,7 +188,7 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
                 },
               ]}
             >
-              <div>{getParentNodeComponent(true)}</div>
+              <div>{getParentNodeComponent({ isMultiSelect: true })}</div>
             </ArcherElement>
           </div>
         </div>