From 16a123c44d0bb75acbf41c47466ec1086db76aeb Mon Sep 17 00:00:00 2001
From: Amit Yathirajadasan <ayathirajadasan@newrelic.com>
Date: Wed, 16 Aug 2023 16:15:05 -0700
Subject: [PATCH] fix: rename step groups to level

---
 src/components/add-step/index.js              | 41 +++++++-------
 src/components/edit-step-modal/index.js       |  6 +--
 src/components/index.js                       |  2 +-
 src/components/{step-group => level}/index.js | 14 ++---
 .../{step-group => level}/styles.scss         |  2 +-
 src/components/stage/index.js                 | 54 +++++++++----------
 src/components/stages/index.js                | 11 ++--
 src/components/step/index.js                  |  6 +--
 src/components/styles.scss                    |  2 +-
 src/utils/stage.js                            | 36 +++++++------
 10 files changed, 83 insertions(+), 91 deletions(-)
 rename src/components/{step-group => level}/index.js (95%)
 rename src/components/{step-group => level}/styles.scss (98%)

diff --git a/src/components/add-step/index.js b/src/components/add-step/index.js
index d422082e..c974fd3b 100644
--- a/src/components/add-step/index.js
+++ b/src/components/add-step/index.js
@@ -3,50 +3,45 @@ import PropTypes from 'prop-types';
 
 import { Button } from 'nr1';
 
-const AddStep = ({ stepGroups = [], onUpdate }) => {
+const AddStep = ({ levels = [], onUpdate }) => {
   const [displayStepOptions, setDisplayStepOptions] = useState(false);
-  const [selectedStepGroup, setSelectedStepGroup] = useState(
-    stepGroups.length + 1
-  );
+  const [selectedLevel, setSelectedLevel] = useState(levels.length + 1);
   const [stepTitle, setStepTitle] = useState('');
 
   const addStepHandler = () => {
-    const updatedStepGroups =
-      selectedStepGroup > stepGroups.length
-        ? [...stepGroups, { steps: [{ signals: [], title: stepTitle }] }]
-        : stepGroups.map((stepGroup, index) =>
-            index === selectedStepGroup - 1
+    const updatedLevels =
+      selectedLevel > levels.length
+        ? [...levels, { steps: [{ signals: [], title: stepTitle }] }]
+        : levels.map((level, index) =>
+            index === selectedLevel - 1
               ? {
-                  ...stepGroup,
-                  steps: [
-                    ...stepGroup.steps,
-                    { signals: [], title: stepTitle },
-                  ],
+                  ...level,
+                  steps: [...level.steps, { signals: [], title: stepTitle }],
                 }
-              : stepGroup
+              : level
           );
-    if (onUpdate) onUpdate({ stepGroups: updatedStepGroups });
+    if (onUpdate) onUpdate({ levels: updatedLevels });
     cancelAddStepHandler();
   };
 
   const cancelAddStepHandler = useCallback(() => {
-    setSelectedStepGroup(stepGroups.length + 1);
+    setSelectedLevel(levels.length + 1);
     setStepTitle('');
     setDisplayStepOptions(false);
-  }, [stepGroups]);
+  }, [levels]);
 
   return displayStepOptions ? (
     <div className="add-step">
       <select
-        value={selectedStepGroup}
-        onChange={({ target: { value } = {} }) => setSelectedStepGroup(value)}
+        value={selectedLevel}
+        onChange={({ target: { value } = {} }) => setSelectedLevel(value)}
       >
-        {stepGroups.map((_, index) => (
+        {levels.map((_, index) => (
           <option key={index} value={index + 1}>
             {index + 1}
           </option>
         ))}
-        <option value={stepGroups.length + 1}>{stepGroups.length + 1}</option>
+        <option value={levels.length + 1}>{levels.length + 1}</option>
       </select>
       <input
         type="text"
@@ -81,7 +76,7 @@ const AddStep = ({ stepGroups = [], onUpdate }) => {
 };
 
 AddStep.propTypes = {
-  stepGroups: PropTypes.array,
+  levels: PropTypes.array,
   onUpdate: PropTypes.func,
 };
 
diff --git a/src/components/edit-step-modal/index.js b/src/components/edit-step-modal/index.js
index 64359e38..115d25ca 100644
--- a/src/components/edit-step-modal/index.js
+++ b/src/components/edit-step-modal/index.js
@@ -17,7 +17,7 @@ import { isMatchPattern } from '../../utils/regex';
 
 const EditStepModal = ({
   stageName = 'Stage',
-  stepGroup = 0,
+  level = 0,
   stepTitle = 'Step',
   existingSignals = [],
   hidden = true,
@@ -69,7 +69,7 @@ const EditStepModal = ({
               type={HeadingText.TYPE.HEADING_5}
               className="step-group"
             >
-              {stepGroup}
+              {level}
             </HeadingText>
             <HeadingText type={HeadingText.TYPE.HEADING_4}>
               {stepTitle}
@@ -189,7 +189,7 @@ const EditStepModal = ({
 
 EditStepModal.propTypes = {
   stageName: PropTypes.string,
-  stepGroup: PropTypes.number,
+  level: PropTypes.number,
   stepTitle: PropTypes.string,
   existingSignals: PropTypes.arrayOf(PropTypes.string),
   hidden: PropTypes.bool,
diff --git a/src/components/index.js b/src/components/index.js
index 7c1722d7..7bd21a19 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,7 +4,7 @@ export { default as EditStepModal } from './edit-step-modal';
 export { default as Signal } from './signal';
 export { default as SignalsList } from './signals-list';
 export { default as Step } from './step';
-export { default as StepGroup } from './step-group';
+export { default as Level } from './level';
 export { default as Stages } from './stages';
 export { default as Stage } from './stage';
 export { default as KpiModal } from './kpi-modal';
diff --git a/src/components/step-group/index.js b/src/components/level/index.js
similarity index 95%
rename from src/components/step-group/index.js
rename to src/components/level/index.js
index a61fbafd..54e624af 100644
--- a/src/components/step-group/index.js
+++ b/src/components/level/index.js
@@ -8,7 +8,7 @@ import IconsLib from '../icons-lib';
 import DeleteConfirmModal from '../delete-confirm-modal';
 import { MODES, STATUSES } from '../../constants';
 
-const StepGroup = ({
+const Level = ({
   order = 0,
   steps = [],
   stageName,
@@ -98,7 +98,7 @@ const StepGroup = ({
 
   return (
     <div
-      className="step-group"
+      className="level"
       draggable={mode === MODES.EDIT}
       onDragStart={dragStartHandler}
       onDragOver={onDragOver}
@@ -126,8 +126,8 @@ const StepGroup = ({
             </span>
           </div>
           <DeleteConfirmModal
-            name={`Step Group ${order}`}
-            type="step group"
+            name={`Level ${order}`}
+            type="level"
             hidden={deleteModalHidden}
             onConfirm={deleteHandler}
             onClose={() => setDeleteModalHidden(true)}
@@ -146,7 +146,7 @@ const StepGroup = ({
               title={title}
               signals={signals}
               stageName={stageName}
-              stepGroup={order}
+              level={order}
               onUpdate={(updates) => updateStepHandler(index, updates)}
               onDelete={() => deleteStepHandler(index)}
               onDragStart={(e) => stepDragStartHandler(e, index)}
@@ -162,7 +162,7 @@ const StepGroup = ({
   );
 };
 
-StepGroup.propTypes = {
+Level.propTypes = {
   order: PropTypes.number,
   steps: PropTypes.arrayOf(PropTypes.object),
   stageName: PropTypes.string,
@@ -175,4 +175,4 @@ StepGroup.propTypes = {
   mode: PropTypes.oneOf(Object.values(MODES)),
 };
 
-export default StepGroup;
+export default Level;
diff --git a/src/components/step-group/styles.scss b/src/components/level/styles.scss
similarity index 98%
rename from src/components/step-group/styles.scss
rename to src/components/level/styles.scss
index 9ba879d4..08d36092 100644
--- a/src/components/step-group/styles.scss
+++ b/src/components/level/styles.scss
@@ -1,4 +1,4 @@
-.step-group {
+.level {
   box-sizing: border-box;
   width: 100%;
   display: flex;
diff --git a/src/components/stage/index.js b/src/components/stage/index.js
index ec4f58fa..bcff4db2 100644
--- a/src/components/stage/index.js
+++ b/src/components/stage/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { HeadingText } from 'nr1';
 
-import StepGroup from '../step-group';
+import Level from '../level';
 import Signal from '../signal';
 import StageHeader from './header';
 import AddStep from '../add-step';
@@ -11,7 +11,7 @@ import { MODES, STATUSES } from '../../constants';
 
 const Stage = ({
   name = 'Stage',
-  stepGroups = [],
+  levels = [],
   related = {},
   status = STATUSES.UNKNOWN,
   mode = MODES.INLINE,
@@ -29,7 +29,7 @@ const Stage = ({
   useEffect(
     () =>
       setSignals(
-        stepGroups.reduce(
+        levels.reduce(
           (acc, { steps = [] }) => ({
             ...acc,
             ...steps.reduce(
@@ -49,7 +49,7 @@ const Stage = ({
           {}
         )
       ),
-    [stepGroups]
+    [levels]
   );
 
   const SignalsList = memo(
@@ -63,22 +63,22 @@ const Stage = ({
   SignalsList.displayName = 'SignalsList';
 
   const updateStageHandler = (updates = {}) => {
-    if (onUpdate) onUpdate({ name, stepGroups, related, ...updates });
+    if (onUpdate) onUpdate({ name, levels, related, ...updates });
   };
 
-  const deleteStepGroupHandler = (index) => {
+  const deleteLevelHandler = (index) => {
     if (onUpdate)
       onUpdate({
         name,
         related,
-        stepGroups: stepGroups.filter((_, i) => i !== index),
+        levels: levels.filter((_, i) => i !== index),
       });
   };
 
-  const updateStepGroupHandler = (index, updates = {}) =>
+  const updateLevelHandler = (index, updates = {}) =>
     updateStageHandler({
-      stepGroups: stepGroups.map((stepGroup, i) =>
-        i === index ? { ...stepGroup, ...updates } : stepGroup
+      levels: levels.map((level, i) =>
+        i === index ? { ...level, ...updates } : level
       ),
     });
 
@@ -102,20 +102,20 @@ const Stage = ({
     isDragHandleClicked.current = false;
   };
 
-  const stepGroupDragStartHandler = (e, index) => {
+  const levelDragStartHandler = (e, index) => {
     e.stopPropagation();
     dragItemIndex.current = index;
     e.dataTransfer.effectAllowed = 'move';
   };
 
-  const stepGroupDragOverHandler = (e, index) => {
+  const levelDragOverHandler = (e, index) => {
     e.preventDefault();
     e.stopPropagation();
     e.dataTransfer.dropEffect = 'move';
     dragOverItemIndex.current = index;
   };
 
-  const stepGroupDropHandler = (e) => {
+  const levelDropHandler = (e) => {
     e.preventDefault();
     e.stopPropagation();
     const itemIndex = dragItemIndex.current;
@@ -126,11 +126,11 @@ const Stage = ({
       itemIndex === overIndex
     )
       return;
-    const updatedStepGroups = [...stepGroups];
-    const item = updatedStepGroups[itemIndex];
-    updatedStepGroups.splice(itemIndex, 1);
-    updatedStepGroups.splice(overIndex, 0, item);
-    if (onUpdate) onUpdate({ name, related, stepGroups: updatedStepGroups });
+    const updatedLevels = [...levels];
+    const item = updatedLevels[itemIndex];
+    updatedLevels.splice(itemIndex, 1);
+    updatedLevels.splice(overIndex, 0, item);
+    if (onUpdate) onUpdate({ name, related, levels: updatedLevels });
     dragItemIndex.current = null;
     dragOverItemIndex.current = null;
   };
@@ -157,21 +157,21 @@ const Stage = ({
         <div className="section-title">
           <HeadingText>Steps</HeadingText>
           {mode === MODES.EDIT ? (
-            <AddStep stepGroups={stepGroups} onUpdate={updateStageHandler} />
+            <AddStep levels={levels} onUpdate={updateStageHandler} />
           ) : null}
         </div>
         <div className="step-groups">
-          {stepGroups.map(({ steps, status }, index) => (
-            <StepGroup
+          {levels.map(({ steps, status }, index) => (
+            <Level
               key={index}
               order={index + 1}
               steps={steps}
               stageName={name}
-              onUpdate={(updates) => updateStepGroupHandler(index, updates)}
-              onDelete={() => deleteStepGroupHandler(index)}
-              onDragStart={(e) => stepGroupDragStartHandler(e, index)}
-              onDragOver={(e) => stepGroupDragOverHandler(e, index)}
-              onDrop={(e) => stepGroupDropHandler(e)}
+              onUpdate={(updates) => updateLevelHandler(index, updates)}
+              onDelete={() => deleteLevelHandler(index)}
+              onDragStart={(e) => levelDragStartHandler(e, index)}
+              onDragOver={(e) => levelDragOverHandler(e, index)}
+              onDrop={(e) => levelDropHandler(e)}
               status={status}
               mode={mode}
             />
@@ -194,7 +194,7 @@ const Stage = ({
 
 Stage.propTypes = {
   name: PropTypes.string,
-  stepGroups: PropTypes.arrayOf(PropTypes.object),
+  levels: PropTypes.arrayOf(PropTypes.object),
   related: PropTypes.shape({
     target: PropTypes.bool,
     source: PropTypes.bool,
diff --git a/src/components/stages/index.js b/src/components/stages/index.js
index ca9e6ae9..134efc84 100644
--- a/src/components/stages/index.js
+++ b/src/components/stages/index.js
@@ -43,7 +43,7 @@ const Stages = ({ stages = [], onUpdate, mode = MODES.INLINE }) => {
             ...stages,
             {
               name: 'New Stage',
-              stepGroups: [],
+              levels: [],
             },
           ],
         })
@@ -108,18 +108,13 @@ const Stages = ({ stages = [], onUpdate, mode = MODES.INLINE }) => {
       <div className="stages">
         {(stagesWithStatuses || []).map(
           (
-            {
-              name = '',
-              stepGroups = [],
-              related = {},
-              status = STATUSES.UNKNOWN,
-            },
+            { name = '', levels = [], related = {}, status = STATUSES.UNKNOWN },
             i
           ) => (
             <Stage
               key={i}
               name={name}
-              stepGroups={stepGroups}
+              levels={levels}
               related={related}
               status={status}
               mode={mode}
diff --git a/src/components/step/index.js b/src/components/step/index.js
index acf2a185..6486b2da 100644
--- a/src/components/step/index.js
+++ b/src/components/step/index.js
@@ -14,7 +14,7 @@ const Step = ({
   title = 'Step',
   signals = [],
   stageName,
-  stepGroup,
+  level,
   onUpdate,
   onDelete,
   onDragStart,
@@ -137,7 +137,7 @@ const Step = ({
           </div>
           <EditStepModal
             stageName={stageName}
-            stepGroup={stepGroup}
+            level={level}
             stepTitle={title}
             existingSignals={signals.map(({ guid }) => guid)}
             hidden={editModalHidden}
@@ -164,7 +164,7 @@ Step.propTypes = {
   title: PropTypes.string,
   signals: PropTypes.arrayOf(PropTypes.object),
   stageName: PropTypes.string,
-  stepGroup: PropTypes.string,
+  level: PropTypes.string,
   onUpdate: PropTypes.func,
   onDelete: PropTypes.func,
   onDragStart: PropTypes.func,
diff --git a/src/components/styles.scss b/src/components/styles.scss
index a9e21a20..dbb5f392 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -5,7 +5,7 @@
 @import './signal/styles.scss';
 @import './signals-list/styles.scss';
 @import './step/styles.scss';
-@import './step-group/styles.scss';
+@import './level/styles.scss';
 @import './stages/styles.scss';
 @import './stage/styles.scss';
 @import './kpi-modal/styles.scss';
diff --git a/src/utils/stage.js b/src/utils/stage.js
index ed25461f..3e3d6e6a 100644
--- a/src/utils/stage.js
+++ b/src/utils/stage.js
@@ -2,11 +2,11 @@ import { STAGE_SHAPES_CLASSNAME_ARRAY } from '../constants';
 import { signalStatus, statusFromStatuses } from './signal';
 
 export const addSignalStatuses = (stages = [], serviceLevelsData = {}) =>
-  stages.map(({ name, stepGroups }) => ({
+  stages.map(({ name, levels = [] }) => ({
     name,
-    stepGroups: stepGroups.map(({ order, steps }) => ({
+    levels: levels.map(({ order, steps = [] }) => ({
       order,
-      steps: steps.map(({ title, signals }) => ({
+      steps: steps.map(({ title, signals = [] }) => ({
         title,
         signals: signals.map(({ type, guid }) => {
           const { name, attainment, target } = serviceLevelsData[guid];
@@ -23,13 +23,13 @@ export const addSignalStatuses = (stages = [], serviceLevelsData = {}) =>
     })),
   }));
 
-export const annotateStageWithStatuses = (stage) => {
-  const { stepGroups, stepGroupStatuses } = stage.stepGroups.reduce(
-    ({ stepGroups, stepGroupStatuses }, stepGroup) => {
-      const { steps, stepStatuses } = stepGroup.steps.reduce(
-        ({ steps, stepStatuses }, step) => {
+export const annotateStageWithStatuses = (stage = {}) => {
+  const { levels, levelStatuses } = (stage.levels || []).reduce(
+    ({ levels, levelStatuses }, level = {}) => {
+      const { steps, stepStatuses } = (level.steps || []).reduce(
+        ({ steps, stepStatuses }, step = {}) => {
           const status = statusFromStatuses(
-            step.signals.map(({ status }) => ({ status }))
+            (step.signals || []).map(({ status }) => ({ status }))
           );
           return {
             steps: [...steps, { ...step, status }],
@@ -40,21 +40,23 @@ export const annotateStageWithStatuses = (stage) => {
       );
       const status = statusFromStatuses(stepStatuses);
       return {
-        stepGroups: [...stepGroups, { ...stepGroup, steps, status }],
-        stepGroupStatuses: [...stepGroupStatuses, { status }],
+        levels: [...levels, { ...level, steps, status }],
+        levelStatuses: [...levelStatuses, { status }],
       };
     },
-    { stepGroups: [], stepGroupStatuses: [] }
+    { levels: [], levelStatuses: [] }
   );
-  const status = statusFromStatuses(stepGroupStatuses);
-  return { ...stage, stepGroups, status };
+  const status = statusFromStatuses(levelStatuses);
+  return { ...stage, levels, status };
 };
 
 export const uniqueSignalGuidsInStages = (stages = []) => {
   const guidsSet = new Set();
-  stages.map(({ stepGroups }) =>
-    stepGroups.map(({ steps }) =>
-      steps.map(({ signals }) => signals.map(({ guid }) => guidsSet.add(guid)))
+  stages.map(({ levels = [] }) =>
+    levels.map(({ steps = [] }) =>
+      steps.map(({ signals = [] }) =>
+        signals.map(({ guid }) => guidsSet.add(guid))
+      )
     )
   );
   return [...guidsSet];