Merge pull request #252 from adhocteam/display-next-steps-input-box-i…

…n-same-line Display next steps input box in same line
HHS · Mar 18, 2021 · f7074ce · f7074ce
2 parents 7549826 + 7125212
commit f7074ce
Showing 1 changed file with 40 additions and 32 deletions.
diff --git a/frontend/src/pages/ActivityReport/Pages/nextSteps.js b/frontend/src/pages/ActivityReport/Pages/nextSteps.js
@@ -109,44 +109,52 @@ const NoteEntries = ({ name, humanName, label }) => {
   const targetId = notes[targetIndex] ? notes[targetIndex].id : undefined;
   const defaultValue = notes[targetIndex] ? notes[targetIndex].note : undefined;
 
+  const prompt = (
+    <div className="border-left-05 border-blue padding-left-2 margin-top-2 smart-hub-border-blue-primary">
+      <NoteEntry
+        onEntry={(value) => onEntry(value, targetIndex, targetId)}
+        isRequired={false}
+        onCancel={onCancel}
+        name={name}
+        humanName={humanName}
+        defaultValue={defaultValue}
+        label={label}
+      />
+    </div>
+  );
+
   return (
     <>
       <Fieldset className="smart-hub--report-legend margin-top-4" legend={`${humanName} Next Steps`}>
         <ul className="usa-list--unstyled">
-          {notes.map((item, index) => (
-            <li key={item.note} className="grid-row flex-row border-bottom padding-top-2 padding-bottom-2" style={{ borderColor: '#f0f0f0' }}>
-              <div className="grid-col flex-12">
-                {item.note}
-              </div>
-
-              <div className="grid-col" style={{ marginTop: '0px' }}>
-                <ContextMenu
-                  label="Actions menu"
-                  menuItems={
-                    [
-                      { label: 'Edit', onClick: () => { onEdit(index); } },
-                      { label: 'Delete', onClick: () => { onDelete(index); } },
-                    ]
-                  }
-                />
-              </div>
-            </li>
-          ))}
+          {notes.map((item, index) => {
+            if (showPrompt && (index === targetIndex)) {
+              return prompt;
+            }
+            return (
+              <li key={item.note + index.toString()} className="grid-row flex-row border-bottom padding-top-2 padding-bottom-2" style={{ borderColor: '#f0f0f0' }}>
+                <div className="grid-col flex-12">
+                  {item.note}
+                </div>
+
+                <div className="grid-col" style={{ marginTop: '0px' }}>
+                  <ContextMenu
+                    label="Actions menu"
+                    menuItems={
+                      [
+                        { label: 'Edit', onClick: () => { onEdit(index); } },
+                        { label: 'Delete', onClick: () => { onDelete(index); } },
+                      ]
+                    }
+                  />
+                </div>
+              </li>
+            );
+          })}
         </ul>
 
-        {showPrompt ? (
-          <div className="border-left-05 border-blue padding-left-2 margin-top-2 smart-hub-border-blue-primary">
-            <NoteEntry
-              onEntry={(value) => onEntry(value, targetIndex, targetId)}
-              isRequired={false}
-              onCancel={onCancel}
-              name={name}
-              humanName={humanName}
-              defaultValue={defaultValue}
-              label={label}
-            />
-          </div>
-        )
+        {showPrompt && targetIndex >= notes.length
+          ? prompt
           : (
             <Button type="button" unstyled onClick={() => onEdit(notes.length)}>
               <FontAwesomeIcon icon={faPlusCircle} />