feat: less visual weight (#4075)

Author: drdelambre

src/flows/components/panel/FlowPanel.tsx

@@ -22,7 +22,7 @@ import {MenuButton} from 'src/flows/components/Sidebar'
 
 // Constants
 import {PIPE_DEFINITIONS} from 'src/flows'
-import {FeatureFlag} from 'src/shared/utils/featureFlag'
+import {FeatureFlag, isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Types
 import {PipeContextProps} from 'src/types/flows'
@@ -59,6 +59,7 @@ const FlowPanel: FC<Props> = ({
   const panelClassName = classnames('flow-panel', {
     [`flow-panel__${isVisible ? 'visible' : 'hidden'}`]: true,
     'flow-panel__focus': focused === id,
+    'small-insert': isFlagEnabled('smallInsert'),
   })
 
   const [size, updateSize] = useState<number>(

src/flows/components/panel/InsertCellButton.scss

@@ -3,6 +3,41 @@
 
 $cf-radius-lg: $cf-radius + 4px;
 
+.small-flow-divider {
+  position: relative;
+  margin-bottom: 4px;
+  text-align: right;
+
+  .insert-wrap {
+    padding: 8px 0;
+    display: inline-block;
+    cursor: pointer;
+
+    &:active,
+    &:hover {
+      .cf-button.flow-divider--button {
+        background: linear-gradient(45deg, #5c10a0 0%, #8e1fc3 100%);
+        color: #fff;
+      }
+      span {
+        color: #fff;
+      }
+    }
+  }
+
+  .cf-button.flow-divider--button {
+    position: static;
+    transform: none;
+    margin: -4px 8px 0;
+    background: inherit;
+  }
+
+  span {
+    font-size: 12px;
+    color: #68687b;
+  }
+}
+
 .flow-divider {
   position: relative;
   width: 100%;

src/flows/components/panel/InsertCellButton.tsx

@@ -32,6 +32,7 @@ const InsertCellButton: FC<Props> = ({id}) => {
   const {flow} = useContext(FlowContext)
   const dividerRef = useRef<HTMLDivElement>(null)
   const buttonRef = useRef<HTMLButtonElement>(null)
+  const smallButtonRef = useRef<HTMLDivElement>(null)
   const popoverVisible = useRef<boolean>(false)
   const index = flow.data.allIDs.indexOf(id)
 
@@ -52,10 +53,7 @@ const InsertCellButton: FC<Props> = ({id}) => {
       dividerRef.current.classList.remove('flow-divider__popped')
   }
 
-  if (
-    isFlagEnabled('showLastInsert') &&
-    index === flow.data.allIDs.length - 1
-  ) {
+  if (index === flow.data.allIDs.length - 1) {
     return (
       <FlexBox
         direction={FlexDirection.Column}
@@ -69,6 +67,65 @@ const InsertCellButton: FC<Props> = ({id}) => {
     )
   }
 
+  if (isFlagEnabled('smallInsert')) {
+    let button
+    if (index === -1) {
+      button = (
+        <div className="insert-wrap" ref={smallButtonRef}>
+          <span>Insert Panel Here</span>
+          <SquareButton
+            icon={IconFont.Plus_New}
+            size={ComponentSize.ExtraSmall}
+            color={ComponentColor.Secondary}
+            testID={`panel-add-btn-${index}`}
+            className="flow-divider--button"
+            active={popoverVisible.current}
+          />
+        </div>
+      )
+    } else {
+      button = (
+        <div className="insert-wrap" ref={smallButtonRef}>
+          <span>Insert Panel Below</span>
+          <SquareButton
+            icon={IconFont.ArrowDown_New}
+            size={ComponentSize.ExtraSmall}
+            color={ComponentColor.Secondary}
+            testID={`panel-add-btn-${index}`}
+            className="flow-divider--button"
+            active={popoverVisible.current}
+          />
+        </div>
+      )
+    }
+    return (
+      <div className="small-flow-divider" ref={dividerRef}>
+        {button}
+
+        <Popover
+          enableDefaultStyles={false}
+          appearance={Appearance.Outline}
+          color={ComponentColor.Secondary}
+          triggerRef={smallButtonRef}
+          position={PopoverPosition.ToTheRight}
+          onShow={handlePopoverShow}
+          onHide={handlePopoverHide}
+          contents={onHide => (
+            <FlexBox
+              direction={FlexDirection.Column}
+              alignItems={AlignItems.Stretch}
+              margin={ComponentSize.Small}
+              className="insert-cell-menu"
+            >
+              <p className="insert-cell-menu--title">Insert Panel Here</p>
+              <AddButtons index={index} onInsert={onHide} />
+            </FlexBox>
+          )}
+        />
+      </div>
+    )
+  }
+
   return (
     <div className="flow-divider" ref={dividerRef}>
       <SquareButton

src/flows/style.scss

@@ -56,6 +56,19 @@ $cf-radius-lg: $cf-radius + 4px;
   &:first-child::after {
     top: ($flow-header-height - $flow-panel--node-dot) * 0.5;
   }
+
+  &.small-insert {
+    .flow-panel--node-wrapper {
+      display: none;
+    }
+    .flow-panel--body {
+      padding-left: inherit;
+    }
+
+    &:after {
+      display: none;
+    }
+  }
 }
 
 .flow-panel__readonly {