feat: insert tweaks (#3985)

Author: drdelambre

src/flows/components/PipeList.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC, useContext} from 'react'
+import React, {FC, Fragment, useContext} from 'react'
 import {useSelector} from 'react-redux'
 import ReactGridLayout, {WidthProvider, Layout} from 'react-grid-layout'
 
@@ -133,9 +133,12 @@ const PipeList: FC = () => {
     )
   }
 
-  const _pipes = flow.data.allIDs.map(id => {
-    return <FlowPipe key={`pipe-${id}`} id={id} />
-  })
+  const _pipes = flow.data.allIDs.map(id => (
+    <Fragment key={`pipe-${id}`}>
+      <FlowPipe id={id} />
+      <InsertCellButton id={id} />
+    </Fragment>
+  ))
 
   return (
     <div className="flow" id={flow?.id}>

src/flows/components/panel/FlowPanel.tsx

@@ -17,7 +17,6 @@ import {
 
 // Components
 import Handle from 'src/flows/components/panel/Handle'
-import InsertCellButton from 'src/flows/components/panel/InsertCellButton'
 import FlowPanelTitle from 'src/flows/components/panel/FlowPanelTitle'
 import {MenuButton} from 'src/flows/components/Sidebar'
 
@@ -155,61 +154,58 @@ const FlowPanel: FC<Props> = ({
   }
 
   return (
-    <>
-      <div className={panelClassName} id={id}>
-        <div className="flow-panel--header">
-          <div className="flow-panel--node-wrapper">
-            <div className="flow-panel--node" />
-          </div>
-          {title}
-          {!flow.readOnly && (
-            <>
-              <div className="flow-panel--hover-control">{controls}</div>
-              <div className="flow-panel--persistent-control">
-                {persistentControls}
-                <FeatureFlag name="flow-debug-queries">
-                  <SquareButton
-                    icon={IconFont.BookCode}
-                    onClick={() => printMap(id)}
-                    color={ComponentColor.Default}
-                    titleText="Debug Notebook Queries"
-                    className="flows-config-panel-button"
-                  />
-                </FeatureFlag>
-                {isVisible && showPreviewButton && (
-                  <Button
-                    onClick={() => queryDependents(id)}
-                    icon={IconFont.Play}
-                    text="Run"
-                  />
-                )}
-                <MenuButton id={id} />
-              </div>
-            </>
-          )}
+    <div className={panelClassName} id={id}>
+      <div className="flow-panel--header">
+        <div className="flow-panel--node-wrapper">
+          <div className="flow-panel--node" />
         </div>
-        {isVisible && (
-          <div
-            className="flow-panel--body"
-            ref={bodyRef}
-            style={resizes ? {height: `${size}px`} : {}}
-          >
-            {children}
-          </div>
+        {title}
+        {!flow.readOnly && (
+          <>
+            <div className="flow-panel--hover-control">{controls}</div>
+            <div className="flow-panel--persistent-control">
+              {persistentControls}
+              <FeatureFlag name="flow-debug-queries">
+                <SquareButton
+                  icon={IconFont.BookCode}
+                  onClick={() => printMap(id)}
+                  color={ComponentColor.Default}
+                  titleText="Debug Notebook Queries"
+                  className="flows-config-panel-button"
+                />
+              </FeatureFlag>
+              {isVisible && showPreviewButton && (
+                <Button
+                  onClick={() => queryDependents(id)}
+                  icon={IconFont.Play}
+                  text="Run"
+                />
+              )}
+              <MenuButton id={id} />
+            </div>
+          </>
         )}
-        <div className="flow-panel--footer">
-          <div></div>
-          {isVisible && resizes && (
-            <Handle
-              dragRef={handleRef}
-              onStartDrag={handleMouseDown}
-              dragging={isDragging === 2}
-            />
-          )}
+      </div>
+      {isVisible && (
+        <div
+          className="flow-panel--body"
+          ref={bodyRef}
+          style={resizes ? {height: `${size}px`} : {}}
+        >
+          {children}
         </div>
+      )}
+      <div className="flow-panel--footer">
+        <div></div>
+        {isVisible && resizes && (
+          <Handle
+            dragRef={handleRef}
+            onStartDrag={handleMouseDown}
+            dragging={isDragging === 2}
+          />
+        )}
       </div>
-      {!flow.readOnly && <InsertCellButton id={id} />}
-    </>
+    </div>
   )
 }
 

src/flows/components/panel/InsertCellButton.scss

@@ -1,6 +1,8 @@
 @import '@influxdata/clockface/dist/variables.scss';
 @import '~src/flows/FlowVariables.scss';
 
+$cf-radius-lg: $cf-radius + 4px;
+
 .flow-divider {
   position: relative;
   width: 100%;
@@ -110,6 +112,12 @@
   flex-direction: column;
   align-items: center;
   font-size: 14px;
+
+  &.always-on {
+    margin: 32px auto 60px;
+    border-radius: $cf-radius-lg;
+    background-color: $flow-panel--bg;
+  }
 }
 
 .insert-cell-menu--title {

src/flows/components/panel/InsertCellButton.tsx

@@ -19,6 +19,7 @@ import {FlowContext} from 'src/flows/context/flow.current'
 
 // Utils
 import {event} from 'src/cloud/utils/reporting'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Styles
 import 'src/flows/components/panel/InsertCellButton.scss'
@@ -51,6 +52,23 @@ const InsertCellButton: FC<Props> = ({id}) => {
       dividerRef.current.classList.remove('flow-divider__popped')
   }
 
+  if (
+    isFlagEnabled('showLastInsert') &&
+    index === flow.data.allIDs.length - 1
+  ) {
+    return (
+      <FlexBox
+        direction={FlexDirection.Column}
+        alignItems={AlignItems.Stretch}
+        margin={ComponentSize.Small}
+        className="insert-cell-menu always-on"
+      >
+        <p className="insert-cell-menu--title">Add Another Cell</p>
+        <AddButtons index={index} />
+      </FlexBox>
+    )
+  }
+
   return (
     <div className="flow-divider" ref={dividerRef}>
       <SquareButton