fix: rename step groups to level

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,
 };
 

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,

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';

src/components/step-group/index.js → 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;

src/components/step-group/styles.scss → src/components/level/styles.scss

@@ -1,4 +1,4 @@
-.step-group {
+.level {
   box-sizing: border-box;
   width: 100%;
   display: flex;

src/components/stage/index.js

@@ -3,15 +3,15 @@ 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';
 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,

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}

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,

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';