pixel-react-excel-sheet 1.0.31 → 1.0.32

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

@@ -1,8 +1,9 @@
-import Button from '../../Button';
 import Typography from '../../Typography';
 import { indexType, MachineData, MachineInstancesProps } from '../types';
 
 const MachineInstances: React.FC<MachineInstancesProps> = ({
+  getChildNodeComponent,
+  parentNode,
   data,
   verticalLineHeight,
   datasetHeight,
@@ -20,106 +21,120 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
               <div className="ff-right-icon"></div>
             </div>
           </div>
-          <div className="ff-machine-instance">
-            <Button
-              className="ff-add-browser-device"
-              variant="secondary"
-              label="Add Machine"
-            />
+          <div className="ff-machine-instance ff-machine-env-button">
+            {getChildNodeComponent(true, data, parentNode)}
           </div>
         </>
       ) : (
-        data?.machineInstances?.map((instance: MachineData, idx: indexType) => {
-          const isFirstLine = idx === 0;
-          return (
-            <div
-              className="ff-machine-instance-row"
-              key={instance.clientId || idx}
-            >
+        data?.machineInstances?.map(
+          (instance: MachineData, machineInstanceIndex: indexType) => {
+            const isFirstLine = machineInstanceIndex === 0;
+            return (
               <div
-                className={`ff-selectedMachines-connecting-line ${
-                  !isFirstLine ? 'ff-second-line' : ''
-                }`}
+                className="ff-machine-instance-row"
+                key={instance.clientId || machineInstanceIndex}
               >
-                <div className="ff-line">
-                  <div className="ff-left-icon"></div>
-                  <div className="ff-right-icon"></div>
-                </div>
-
-                {isFirstLine && (
-                  <div
-                    className="ff-vertical-line"
-                    style={{ height: `${verticalLineHeight}px` }}
-                  ></div>
-                )}
-              </div>
+                <div
+                  className={`ff-selectedMachines-connecting-line ${
+                    !isFirstLine ? 'ff-second-line' : ''
+                  }`}
+                >
+                  <div className="ff-line">
+                    <div className="ff-left-icon"></div>
+                    <div className="ff-right-icon"></div>
+                  </div>
 
-              <div className="ff-machine-instance">
-                {instance.runLevelExecutionDataSets.map(
-                  (dataSet: MachineData, index: indexType) => (
+                  {isFirstLine && (
                     <div
-                      key={index}
-                      className="ff-run-level-execution-dataset"
-                      ref={index === 0 ? datasetRef : null}
-                    >
+                      className="ff-vertical-line"
+                      style={{ height: `${verticalLineHeight}px` }}
+                    ></div>
+                  )}
+                </div>
+
+                <div className="ff-machine-instance">
+                  {instance.runLevelExecutionDataSets.map(
+                    (
+                      dataSet: MachineData,
+                      runLevelExecutionDataIndex: indexType
+                    ) => (
                       <div
-                        className="ff-execution-item"
-                        key={dataSet.peVariableSetId}
-                        ref={(el) => (itemRefs.current[index] = el)}
+                        key={runLevelExecutionDataIndex}
+                        className="ff-run-level-execution-dataset"
+                        ref={
+                          runLevelExecutionDataIndex === 0 ? datasetRef : null
+                        }
                       >
                         <div
-                          className="ff-curved-connector"
-                          style={{ top: `${-datasetHeight + 5}px` }}
+                          className="ff-execution-item"
+                          key={dataSet.executionDataSetId}
+                          ref={(element) =>
+                            (itemRefs.current[runLevelExecutionDataIndex] =
+                              element)
+                          }
                         >
                           <div
-                            className={`ff-curve ff-connector-${index}`}
-                            style={{
-                              height: `${curveHeights[index]}px`,
-                            }}
+                            className="ff-curved-connector"
+                            style={{ top: `${-datasetHeight}px` }}
                           >
                             <div
-                              className={`ff-curve-right-icon ff-curve-right-icon-${index}`}
-                            ></div>
-                            {dataSet?.runScriptCount && (
-                              <div className="ff-selectedMachines-connecting-line-text">
-                                <Typography fontSize={8} fontWeight="regular">
-                                  {dataSet.runScriptCount} Script
-                                </Typography>
-                              </div>
+                              className={`ff-curve ff-connector-${runLevelExecutionDataIndex}`}
+                              style={{
+                                height: `${curveHeights[runLevelExecutionDataIndex]}px`,
+                              }}
+                            >
+                              <div
+                                className={`ff-curve-right-icon ff-curve-right-icon-${runLevelExecutionDataIndex}`}
+                              ></div>
+                              {dataSet?.runScriptCount && (
+                                <div className="ff-selectedMachines-connecting-line-text">
+                                  <Typography fontSize={8} fontWeight="regular">
+                                    {dataSet.runScriptCount} Script
+                                  </Typography>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+
+                          <div className="ff-run-data-box">
+                            {getChildNodeComponent(
+                              false,
+                              instance,
+                              machineInstanceIndex,
+                              dataSet,
+                              runLevelExecutionDataIndex,
+                              parentNode
                             )}
                           </div>
                         </div>
+                      </div>
+                    )
+                  )}
+                </div>
 
-                        <div className="ff-run-data-box">
-                          {/* Todo: this is data set container  will add the components later */}
-                        </div>
+                {machineInstanceIndex === data.machineInstances.length - 1 && (
+                  <>
+                    <div className="ff-selectedMachines-connecting-line ff-second-line">
+                      <div className="ff-line">
+                        <div className="ff-left-icon"></div>
+                        <div className="ff-right-icon"></div>
                       </div>
                     </div>
-                  )
-                )}
-              </div>
 
-              {idx === data.machineInstances.length - 1 && (
-                <>
-                  <div className="ff-selectedMachines-connecting-line ff-second-line">
-                    <div className="ff-line">
-                      <div className="ff-left-icon"></div>
-                      <div className="ff-right-icon"></div>
+                    <div className="ff-machine-instance ff-machine-env-button">
+                      {getChildNodeComponent(
+                        true,
+                        data,
+                        parentNode,
+                        machineInstanceIndex + 1
+                      )}
                     </div>
-                  </div>
-
-                  <div className="ff-machine-instance">
-                    <Button
-                      className="ff-add-browser-device"
-                      variant="secondary"
-                      label="Browser/Devices"
-                    />
-                  </div>
-                </>
-              )}
-            </div>
-          );
-        })
+                  </>
+                )}
+              </div>
+            );
+          }
+        )
       )}
     </>
   );

package/src/components/ConnectingBranch/ConnectingBranch.scss

@@ -1,7 +1,6 @@
 .ff-grid-container {
   display: grid;
-  grid-template-columns: 1fr 4fr 1fr 6fr;
-  padding: 24px 0;
+  grid-template-columns: 1fr 1.5fr 0.8fr 5fr;
   grid-auto-rows: auto;
 
   .ff-selectedMachines {
@@ -14,9 +13,9 @@
   }
 
   .ff-input-box-container {
-    border: 1px solid  var(--description-text); //Todo: will remove once components integrate
+    margin-bottom: 24px;
+    border-radius: 4px;
     width: 100%;
-    height: 32px;
   }
 
   .ff-machine-instance-row {
@@ -73,7 +72,7 @@
     }
     .ff-vertical-line {
       position: absolute;
-      left: 22px;
+      left: 24px;
       top: 0;
       width: 1px;
       height: auto;
@@ -83,18 +82,17 @@
 
   .ff-machine-instance {
     grid-column: 4 / 5;
-
-    .ff-add-browser-device {
-      margin-bottom: 16px;
-    }
   }
-
+  .ff-machine-env-button {
+    padding: 4px 0;
+    margin-bottom: 16px;
+  }
   .ff-selectedMachines-connecting-line {
-    margin-top: 20px;
+    margin-top: 16px;
   }
 
   .ff-selectedMachines-connecting-line.ff-no-instance-line {
-    margin-top: 20px;
+    margin-top: 16px;
   }
 
   .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-line {
@@ -104,30 +102,8 @@
     position: relative;
   }
 
-  .ff-selectedMachines-connecting-line.ff-no-instance-line
-    .ff-selectedMachines-connecting-line-text {
-    position: absolute;
-    top: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: var(--brand-color);
-    color: var(--tooltip-text-color);
-    font-weight: bold;
-    font-size: 8px;
-    padding: 4px;
-    border-radius: 12px;
-    text-align: center;
-  }
-
-  .ff-run-level-execution-dataset p {
-    margin: 0;
-    font-size: 12px;
-  }
-
   .ff-run-level-execution-dataset {
-    min-height: 70px;
-    max-width: 600px;
-    border: 1px solid  var(--description-text); //Todo: will remove once components integrate
+    height: 66px;
     margin-bottom: 8px;
     border-radius: 4px;
     margin-bottom: 16px;
@@ -135,14 +111,14 @@
 
     .ff-curved-connector {
       position: absolute;
-      left: -12%;
+      left: -70px;
       transform: translateX(-50%);
       width: 40px;
       height: 0;
 
       .ff-curve {
         position: relative;
-        width: 88px;
+        width: 80px;
         height: 0;
         border: 1px dashed var(--brand-color);
         border-top: none;
@@ -157,7 +133,7 @@
           border-top: 4px solid transparent;
           border-bottom: 4px solid transparent;
           border-left: 8px solid var(--brand-color);
-          margin-left: 84px;
+          margin-left: 81px;
           position: absolute;
           bottom: -4px;
         }
@@ -165,7 +141,7 @@
         .ff-selectedMachines-connecting-line-text {
           position: absolute;
           left: 50%;
-          top: 85px;
+          top: 75px;
           transform: translateX(-50%);
           background-color: var(--brand-color);
           color: var(--tooltip-text-color);
@@ -179,8 +155,8 @@
       }
 
       .ff-connector-0 {
-        bottom: 8px;
         border: none;
+        bottom: 3px;
       }
 
       .ff-curve-right-icon-0 {
@@ -191,11 +167,6 @@
 
   .ff-select-machine-input {
     grid-column: 2 / 3;
-
-    input {
-      width: 430px;
-      height: 32px;
-    }
   }
 
   .ff-grid-item.ff-dynamic-item {
@@ -231,3 +202,18 @@
     }
   }
 }
+
+// Styles for stories
+.ff-parent-node-container {
+  border: 1px solid green;
+  height: 30px;
+  border-radius: 10px;
+  padding: 2px;
+}
+.ff-child-node-container {
+  border: 1px solid red;
+  height: 40px;
+  width: 300px;
+  border-radius: 10px;
+  padding: 8px;
+}

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

@@ -1,6 +1,9 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import ConnectingBranch from './ConnectingBranch';
 import machineData from './data';
+import Button from '../Button/Button';
+
 const meta: Meta<typeof ConnectingBranch> = {
   title: 'Components/ConnectingBranch',
   component: ConnectingBranch,
@@ -14,8 +17,37 @@ export default meta;
 
 type Story = StoryObj<typeof ConnectingBranch>;
 
+const getChildNodeComponent = (isButton: boolean) => {
+  if (isButton) {
+    return (
+      <div>
+        {' '}
+        <Button variant="primary" label="Add execution Env" />
+      </div>
+    );
+  } else {
+    return (
+      <div className="ff-child-node-container"> Execution Env details</div>
+    );
+  }
+};
+
+const getParentNodeComponentActionItems = () => {
+  return <div> Machine Action Items</div>;
+};
+
+const getParentNodeComponent = (isMultiSelect: boolean) => (
+  <div className="ff-parent-node-container">
+    {' '}
+    {isMultiSelect ? 'MultiSelect' : 'Select'} DropDown
+  </div>
+);
+
 export const Default: Story = {
   args: {
-    machineData,
+    data: machineData,
+    getParentNodeComponent,
+    getParentNodeComponentActionItems,
+    getChildNodeComponent,
   },
 };

package/src/components/ConnectingBranch/ConnectingBranch.tsx

@@ -1,11 +1,22 @@
 import React, { useEffect, useRef, useState } from 'react';
 import './ConnectingBranch.scss';
-import { MachineData, MachineInstance, indexType } from './types';
+import {
+  ConnectBranchProps,
+  MachineData,
+  MachineInstance,
+  indexType,
+} from './types';
 import { ArcherContainer, ArcherElement } from 'react-archer';
 import MachineInstances from './BranchComponents/MachineInstances';
 import Typography from '../Typography';
 
-const ConnectingBranch: React.FC = ({ machineData }: MachineData) => {
+const ConnectingBranch: React.FC<ConnectBranchProps> = ({
+  data: machineData,
+  getChildNodeComponent,
+  getParentNodeComponent,
+  getParentNodeComponentActionItems,
+  childNodeCurveHeight = 1.28,
+}) => {
   const datasetRef = useRef<HTMLDivElement | null>(null);
   const [datasetHeight, setDatasetHeight] = useState<number>(0);
   const [curveHeights, setCurveHeights] = useState<number[]>([]);
@@ -31,7 +42,7 @@ const ConnectingBranch: React.FC = ({ machineData }: MachineData) => {
   const calculateCurveHeight = () => {
     const heights = itemRefs.current.map((_, index) => {
       if (index === 0) return 0;
-      return datasetHeight * 1.3;
+      return datasetHeight * childNodeCurveHeight;
     });
     setCurveHeights(heights);
   };
@@ -90,7 +101,7 @@ const ConnectingBranch: React.FC = ({ machineData }: MachineData) => {
                 {/* Show ff-script-count-box only for the middle index */}
                 {((!isOddMachineCount && index === middleIndex) ||
                   (isOddMachineCount && index === 0)) && (
-                  <ArcherElement id="rootMachine">
+                  <ArcherElement id="rootNode">
                     <div
                       className="ff-grid-item ff-dynamic-item"
                       style={{
@@ -123,29 +134,33 @@ const ConnectingBranch: React.FC = ({ machineData }: MachineData) => {
                   }}
                 >
                   <div className="ff-selectedMachines-input">
-                    <ArcherElement
-                      id={`machine${index}`}
-                      key={index}
-                      relations={[
-                        {
-                          targetId: 'rootMachine',
-                          targetAnchor: 'left',
-                          sourceAnchor: 'left',
-                        },
-                      ]}
-                    >
-                      <div className="ff-input-box-container">
+                    <div className="ff-input-box-container">
+                      <ArcherElement
+                        id={`parentnode${index}`}
+                        key={index}
+                        relations={[
+                          {
+                            targetId: 'rootNode',
+                            targetAnchor: 'left',
+                            sourceAnchor: 'left',
+                          },
+                        ]}
+                      >
                         {/* Todo: here  we will add select dropdown */}
-                      </div>
-                    </ArcherElement>
+                        {getParentNodeComponent(false, machine, index)}
+                      </ArcherElement>
+                      {getParentNodeComponentActionItems(machine, index)}
+                    </div>
                   </div>
                   <MachineInstances
+                    parentNode={index}
                     data={machine}
                     verticalLineHeight={verticalLineHeight}
                     datasetHeight={datasetHeight}
                     curveHeights={curveHeights}
                     itemRefs={itemRefs}
                     datasetRef={datasetRef}
+                    getChildNodeComponent={getChildNodeComponent}
                   />
                 </div>
               </React.Fragment>
@@ -160,18 +175,16 @@ const ConnectingBranch: React.FC = ({ machineData }: MachineData) => {
           }}
         >
           <ArcherElement
-            id="footerInput"
+            id="lastNode"
             relations={[
               {
-                targetId: 'rootMachine',
+                targetId: 'rootNode',
                 targetAnchor: 'left',
                 sourceAnchor: 'left',
               },
             ]}
           >
-            <div className="ff-input-box-container">
-              {/* Todo: here  we will add multi select dropdown */}
-            </div>
+            <div>{getParentNodeComponent(true)}</div>
           </ArcherElement>
         </div>
       </div>