From b36458e4d2bf53bd80113c3bb074bdb7218d5794 Mon Sep 17 00:00:00 2001
From: Amit Yathirajadasan <ayathirajadasan@newrelic.com>
Date: Mon, 25 Sep 2023 18:07:12 -0700
Subject: [PATCH 1/2] fix: remove useref in levels

---
 src/components/level/index.js    | 93 +++++++++++++++-----------------
 src/components/level/styles.scss | 58 +++++++++++---------
 2 files changed, 76 insertions(+), 75 deletions(-)

diff --git a/src/components/level/index.js b/src/components/level/index.js
index 24a18126..b5e67c39 100644
--- a/src/components/level/index.js
+++ b/src/components/level/index.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { Icon } from 'nr1';
@@ -24,33 +24,6 @@ const Level = ({
   const isDragHandleClicked = useRef(false);
   const dragItemIndex = useRef();
   const dragOverItemIndex = useRef();
-  const stepCellsRefs = useRef([]);
-
-  useEffect(() => {
-    if (mode === MODES.EDIT) return;
-    const stepCells = stepCellsRefs.current;
-    const rows = Math.ceil(stepCells.length / 3);
-    const lastRowColumns = stepCells.length % 3;
-    stepCells.forEach((scr, index) => {
-      let col = (index + 1) % 3;
-      if (!col) col = 3;
-      const row = Math.ceil((index + 1) / 3);
-      if (row === 1 && (col === 3 || (rows === 1 && col === lastRowColumns))) {
-        scr.classList.add('top-radius');
-      }
-      if (row < rows) {
-        scr.classList.add('bot-thin-border');
-      } else if (row === rows) {
-        scr.classList.add('top-thin-border');
-        if (col === lastRowColumns) {
-          scr.classList.add('bot-radius');
-          scr.classList.add(`start-col-${col === 1 ? '1' : '2'}`);
-          scr.classList.add('last-col');
-        }
-      }
-      if (col === 3) scr.classList.add('last-col');
-    });
-  }, [mode]);
 
   const deleteHandler = useCallback(() => {
     if (onDelete) onDelete();
@@ -164,27 +137,49 @@ const Level = ({
         <div className={`order ${status}`}>{order}</div>
       )}
       <div className="steps">
-        {steps.map(({ title, signals = [], status }, index) => (
-          <div
-            className={`step-cell ${mode === MODES.EDIT ? 'edit' : ''}`}
-            key={index}
-            ref={(el) => (stepCellsRefs.current[index] = el)}
-          >
-            <Step
-              title={title}
-              signals={signals}
-              stageName={stageName}
-              level={order}
-              onUpdate={(updates) => updateStepHandler(index, updates)}
-              onDelete={() => deleteStepHandler(index)}
-              onDragStart={(e) => stepDragStartHandler(e, index)}
-              onDragOver={(e) => stepDragOverHandler(e, index)}
-              onDrop={(e) => stepDropHandler(e)}
-              status={status}
-              mode={mode}
-            />
-          </div>
-        ))}
+        {steps.reduce(
+          (acc, { id, title, signals = [], status }, index, arr) => {
+            const isLastStep = index + 1 === arr.length;
+            acc.cols.push(
+              <div
+                className={`step-cell ${mode === MODES.EDIT ? 'edit' : ''}`}
+                key={id || index}
+              >
+                <Step
+                  title={title}
+                  signals={signals}
+                  stageName={stageName}
+                  level={order}
+                  onUpdate={(updates) => updateStepHandler(index, updates)}
+                  onDelete={() => deleteStepHandler(index)}
+                  onDragStart={(e) => stepDragStartHandler(e, index)}
+                  onDragOver={(e) => stepDragOverHandler(e, index)}
+                  onDrop={(e) => stepDropHandler(e)}
+                  status={status}
+                  mode={mode}
+                />
+              </div>
+            );
+            if (mode === MODES.EDIT) {
+              acc.rows.push(
+                <div className="steps-row cols-1">{[...acc.cols]}</div>
+              );
+              acc.cols = [];
+            } else if (index % 3 === 2 || isLastStep) {
+              acc.rows.push(
+                <div
+                  className={`steps-row cols-${acc.cols.length}`}
+                  key={`steps_row_${order}_${index}`}
+                >
+                  {[...acc.cols]}
+                </div>
+              );
+              acc.cols = [];
+            }
+            return isLastStep ? acc.rows : acc;
+          },
+          { rows: [], cols: [] }
+        )}
       </div>
     </div>
   );
diff --git a/src/components/level/styles.scss b/src/components/level/styles.scss
index b813881b..70107d35 100644
--- a/src/components/level/styles.scss
+++ b/src/components/level/styles.scss
@@ -40,47 +40,53 @@
   }
   .steps {
     width: 100%;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
 
-    .step-cell {
-      box-sizing: border-box;
-      border-color: #dedede;
-      border-style: solid;
-      border-width: 0.5px 0.25px;
-
-      &.edit {
-        border-width: 0.5px;
-        grid-column: 1 / 4;
+    div:first-child {
+      div.step-cell {
+        border-top-width: .5px;
       }
-
-      &.top-thin-border {
-        border-top-width: 0.25px;
+      div:last-child {
+        border-top-right-radius: 4px;
       }
+    }
 
-      &.bot-thin-border {
-        border-bottom-width: 0.25px;
+    div:last-child {
+      div.step-cell {
+        border-bottom-width: .5px;
       }
-
-      &.top-radius {
-        border-top-right-radius: 4px;
+      div:last-child {
+        border-bottom-right-radius: 4px;
       }
+    }
 
-      &.bot-radius {
-        border-bottom-right-radius: 4px;
+    .steps-row {
+      box-sizing: border-box;
+      width: 100%;
+      display: grid;
+
+      &.cols-1 {
+        grid-template-columns: 1fr;
       }
 
-      &.start-col-1 {
-        grid-column: 1 / -1;
+      &.cols-2 {
+        grid-template-columns: 1fr 1fr;
       }
 
-      &.start-col-2 {
-        grid-column: 2 / -1;
+      &.cols-3 {
+        grid-template-columns: 1fr 1fr 1fr;
       }
 
-      &.last-col {
+      div:last-child {
         border-right-width: 0.5px;
       }
+
+      .step-cell {
+        box-sizing: border-box;
+        border: 0.25px solid #dedede;
+      }
     }
   }
 }

From 1c779994e66f725d25d13e9eec077f063823f40f Mon Sep 17 00:00:00 2001
From: Amit Yathirajadasan <ayathirajadasan@newrelic.com>
Date: Tue, 26 Sep 2023 11:49:33 -0700
Subject: [PATCH 2/2] fix: handle empty steps in levels ui

---
 src/components/level/index.js | 103 +++++++++++++++++++---------------
 1 file changed, 57 insertions(+), 46 deletions(-)

diff --git a/src/components/level/index.js b/src/components/level/index.js
index b5e67c39..8cf03b7e 100644
--- a/src/components/level/index.js
+++ b/src/components/level/index.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { Icon } from 'nr1';
@@ -25,6 +25,61 @@ const Level = ({
   const dragItemIndex = useRef();
   const dragOverItemIndex = useRef();
 
+  const stepsRows = useMemo(() => {
+    if (!steps.length) return [];
+
+    return steps.reduce(
+      (acc, { id, title, signals = [], status }, index, arr) => {
+        const isLastStep = index + 1 === arr.length;
+        const cell = (
+          <div
+            className={`step-cell ${mode === MODES.EDIT ? 'edit' : ''}`}
+            key={id || index}
+          >
+            <Step
+              title={title}
+              signals={signals}
+              stageName={stageName}
+              level={order}
+              onUpdate={(updates) => updateStepHandler(index, updates)}
+              onDelete={() => deleteStepHandler(index)}
+              onDragStart={(e) => stepDragStartHandler(e, index)}
+              onDragOver={(e) => stepDragOverHandler(e, index)}
+              onDrop={(e) => stepDropHandler(e)}
+              status={status}
+              mode={mode}
+            />
+          </div>
+        );
+        if (mode === MODES.EDIT) {
+          acc.rows.push(
+            <div
+              className="steps-row cols-1"
+              key={`steps_row_${order}_${index}`}
+            >
+              {cell}
+            </div>
+          );
+        } else {
+          acc.cols.push(cell);
+          if (index % 3 === 2 || isLastStep) {
+            acc.rows.push(
+              <div
+                className={`steps-row cols-${acc.cols.length}`}
+                key={`steps_row_${order}_${index}`}
+              >
+                {[...acc.cols]}
+              </div>
+            );
+            acc.cols = [];
+          }
+        }
+        return isLastStep ? acc.rows : acc;
+      },
+      { rows: [], cols: [] }
+    );
+  }, [steps, mode]);
+
   const deleteHandler = useCallback(() => {
     if (onDelete) onDelete();
     setDeleteModalHidden(true);
@@ -136,51 +191,7 @@ const Level = ({
       ) : (
         <div className={`order ${status}`}>{order}</div>
       )}
-      <div className="steps">
-        {steps.reduce(
-          (acc, { id, title, signals = [], status }, index, arr) => {
-            const isLastStep = index + 1 === arr.length;
-            acc.cols.push(
-              <div
-                className={`step-cell ${mode === MODES.EDIT ? 'edit' : ''}`}
-                key={id || index}
-              >
-                <Step
-                  title={title}
-                  signals={signals}
-                  stageName={stageName}
-                  level={order}
-                  onUpdate={(updates) => updateStepHandler(index, updates)}
-                  onDelete={() => deleteStepHandler(index)}
-                  onDragStart={(e) => stepDragStartHandler(e, index)}
-                  onDragOver={(e) => stepDragOverHandler(e, index)}
-                  onDrop={(e) => stepDropHandler(e)}
-                  status={status}
-                  mode={mode}
-                />
-              </div>
-            );
-            if (mode === MODES.EDIT) {
-              acc.rows.push(
-                <div className="steps-row cols-1">{[...acc.cols]}</div>
-              );
-              acc.cols = [];
-            } else if (index % 3 === 2 || isLastStep) {
-              acc.rows.push(
-                <div
-                  className={`steps-row cols-${acc.cols.length}`}
-                  key={`steps_row_${order}_${index}`}
-                >
-                  {[...acc.cols]}
-                </div>
-              );
-              acc.cols = [];
-            }
-            return isLastStep ? acc.rows : acc;
-          },
-          { rows: [], cols: [] }
-        )}
-      </div>
+      <div className="steps">{stepsRows}</div>
     </div>
   );
 };