pixel-react-excel-sheet 1.0.31 → 1.0.33

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,233 +1,221 @@
-.ff-grid-container {
-  display: grid;
-  grid-template-columns: 1fr 4fr 1fr 6fr;
-  padding: 24px 0;
-  grid-auto-rows: auto;
-
-  .ff-selectedMachines {
-    display: contents;
-  }
-
-  .ff-selectedMachines-input {
-    grid-column: 2 / 3;
+.connecting-branch-container {
+  .ff-connecting-branch-grid-container {
     display: grid;
-  }
-
-  .ff-input-box-container {
-    border: 1px solid  var(--description-text); //Todo: will remove once components integrate
-    width: 100%;
-    height: 32px;
-  }
+    grid-template-columns:
+      minmax(100px, 0.5fr) minmax(240px, 1.5fr) minmax(130px, 0.8fr)
+      5fr;
+    grid-auto-rows: auto;
 
-  .ff-machine-instance-row {
-    display: contents;
-  }
-
-  .ff-selectedMachines-connecting-line {
-    grid-column: 3 / 4;
-    position: relative;
-
-    .ff-line {
-      position: absolute;
-      height: 1px;
-      background-color: var(--brand-color);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
+    .ff-selectedMachines {
+      display: contents;
     }
 
-    .ff-left-icon {
-      height: 8px;
-      width: 8px;
-      background-color: var(--brand-color);
-      border-radius: 50%;
-      margin-right: 5px;
+    .ff-selectedMachines-input {
+      grid-column: 2 / 3;
+      display: grid;
     }
 
-    .ff-selectedMachines-connecting-line-text {
-      position: absolute;
-      top: -10px;
-      left: 50%;
-      transform: translateX(-50%);
-      background-color: var(--brand-color);
-      color: var(--tooltip-text-color);
-      padding: 4px;
-      border-radius: 12px;
-      text-align: center;
+    .ff-input-box-container {
+      margin-bottom: 24px;
+      width: 100%;
     }
 
-    .ff-right-icon {
-      width: 0;
-      height: 0;
-      border-top: 4px solid transparent;
-      border-bottom: 4px solid transparent;
-      border-left: 8px solid var(--brand-color);
-      margin-left: 84px;
-      bottom: -4px;
+    .ff-machine-instance-row {
+      display: contents;
     }
 
-    &.ff-second-line {
+    .ff-selectedMachines-connecting-line {
+      grid-column: 3 / 4;
       position: relative;
-      margin-left: 20px;
-    }
-    .ff-vertical-line {
-      position: absolute;
-      left: 22px;
-      top: 0;
-      width: 1px;
-      height: auto;
-      background-color: var(--brand-color);
-    }
-  }
 
-  .ff-machine-instance {
-    grid-column: 4 / 5;
+      .ff-line {
+        position: absolute;
+        height: 1px;
+        background-color: var(--brand-color);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+      }
 
-    .ff-add-browser-device {
-      margin-bottom: 16px;
-    }
-  }
+      .ff-left-icon {
+        height: 8px;
+        width: 8px;
+        background-color: var(--brand-color);
+        border-radius: 50%;
+        margin-right: 5px;
+      }
 
-  .ff-selectedMachines-connecting-line {
-    margin-top: 20px;
-  }
+      .ff-selectedMachines-connecting-line-text {
+        position: absolute;
+        top: -10px;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: var(--brand-color);
+        color: var(--tooltip-text-color);
+        padding: 4px;
+        border-radius: 12px;
+        text-align: center;
+      }
 
-  .ff-selectedMachines-connecting-line.ff-no-instance-line {
-    margin-top: 20px;
-  }
+      .ff-right-icon {
+        width: 0;
+        height: 0;
+        border-top: 4px solid transparent;
+        border-bottom: 4px solid transparent;
+        border-left: 8px solid var(--brand-color);
+        margin-left: 84px;
+        bottom: -4px;
+      }
 
-  .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-line {
-    width: 100%;
-    background-color: var(--brand-color);
-    height: 1px;
-    position: relative;
-  }
+      &.ff-second-line {
+        position: relative;
+        margin-left: 20px;
+      }
+      .ff-vertical-line {
+        position: absolute;
+        left: 24px;
+        top: 0;
+        width: 1px;
+        height: auto;
+        background-color: var(--brand-color);
+      }
+    }
 
-  .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-machine-instance {
+      grid-column: 4 / 5;
+    }
+    .ff-machine-env-button {
+      padding: 4px 0;
+      margin-bottom: 16px;
+    }
+    .ff-selectedMachines-connecting-line {
+      margin-top: 16px;
+    }
 
-  .ff-run-level-execution-dataset p {
-    margin: 0;
-    font-size: 12px;
-  }
+    .ff-selectedMachines-connecting-line.ff-no-instance-line {
+      margin-top: 16px;
+    }
 
-  .ff-run-level-execution-dataset {
-    min-height: 70px;
-    max-width: 600px;
-    border: 1px solid  var(--description-text); //Todo: will remove once components integrate
-    margin-bottom: 8px;
-    border-radius: 4px;
-    margin-bottom: 16px;
-    position: relative;
-
-    .ff-curved-connector {
-      position: absolute;
-      left: -12%;
-      transform: translateX(-50%);
-      width: 40px;
-      height: 0;
-
-      .ff-curve {
-        position: relative;
-        width: 88px;
+    .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-line {
+      width: 100%;
+      background-color: var(--brand-color);
+      height: 1px;
+      position: relative;
+    }
+
+    .ff-run-level-execution-dataset {
+      height: 66px;
+      margin-bottom: 8px;
+      border-radius: 4px;
+      margin-bottom: 16px;
+      position: relative;
+
+      .ff-curved-connector {
+        position: absolute;
+        left: -70px;
+        transform: translateX(-50%);
+        width: 40px;
         height: 0;
-        border: 1px dashed var(--brand-color);
-        border-top: none;
-        border-right: none;
-        border-bottom-left-radius: 8px;
-        display: flex;
-        flex-direction: column-reverse;
 
-        .ff-curve-right-icon {
-          width: 0;
+        .ff-curve {
+          position: relative;
+          width: 80px;
           height: 0;
-          border-top: 4px solid transparent;
-          border-bottom: 4px solid transparent;
-          border-left: 8px solid var(--brand-color);
-          margin-left: 84px;
-          position: absolute;
-          bottom: -4px;
+          border: 1px dashed var(--brand-color);
+          border-top: none;
+          border-right: none;
+          border-bottom-left-radius: 8px;
+          display: flex;
+          flex-direction: column-reverse;
+
+          .ff-curve-right-icon {
+            width: 0;
+            height: 0;
+            border-top: 4px solid transparent;
+            border-bottom: 4px solid transparent;
+            border-left: 8px solid var(--brand-color);
+            margin-left: 81px;
+            position: absolute;
+            bottom: -4px;
+          }
+
+          .ff-selectedMachines-connecting-line-text {
+            position: absolute;
+            left: 50%;
+            top: 75px;
+            transform: translateX(-50%);
+            background-color: var(--brand-color);
+            color: var(--tooltip-text-color);
+            font-weight: 400;
+            font-size: 8px;
+            padding: 4px;
+            border-radius: 12px;
+            text-align: center;
+            width: 44px;
+          }
         }
 
-        .ff-selectedMachines-connecting-line-text {
-          position: absolute;
-          left: 50%;
-          top: 85px;
-          transform: translateX(-50%);
-          background-color: var(--brand-color);
-          color: var(--tooltip-text-color);
-          font-weight: 400;
-          font-size: 8px;
-          padding: 4px;
-          border-radius: 12px;
-          text-align: center;
-          width: 44px;
+        .ff-connector-0 {
+          border: none;
+          bottom: 3px;
         }
-      }
-
-      .ff-connector-0 {
-        bottom: 8px;
-        border: none;
-      }
 
-      .ff-curve-right-icon-0 {
-        display: none;
+        .ff-curve-right-icon-0 {
+          display: none;
+        }
       }
     }
-  }
-
-  .ff-select-machine-input {
-    grid-column: 2 / 3;
 
-    input {
-      width: 430px;
-      height: 32px;
+    .ff-select-machine-input {
+      grid-column: 2 / 3;
     }
-  }
 
-  .ff-grid-item.ff-dynamic-item {
-    grid-column: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    place-self: first baseline;
-    top: 1px;
-    left: 20px;
-  }
+    .ff-grid-item.ff-dynamic-item {
+      grid-column: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      place-self: first baseline;
+      top: 1px;
+      left: 20px;
+    }
 
-  .ff-script-count-container {
-    grid-column: 1;
-    align-self: center;
-    background-color: var(--brand-color);
-    color: var(--tooltip-text-color);
-    text-align: center;
-    border-radius: 4px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 4px;
-
-    .ff-script-count-box {
+    .ff-script-count-container {
+      grid-column: 1;
+      align-self: center;
+      background-color: var(--brand-color);
+      color: var(--tooltip-text-color);
+      text-align: center;
+      border-radius: 4px;
       display: flex;
-      flex-direction: column;
       justify-content: center;
       align-items: center;
-      width: 100%;
-      height: 100%;
+      padding: 4px;
+
+      .ff-script-count-box {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+      }
     }
   }
 }
+// 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,
   },
 };