Replace floating insert menu (#5746)

Blocked waiting on #5794 **Problem** We were still using the old insert menu in the canvas toolbar **Fix** Use the new component picker in the canvas toolbar. The main changes here are in `editor/src/components/editor/canvas-toolbar.tsx` (where the old dropdown list was replaced with the new component picker) and `editor/src/components/navigator/navigator-item/component-picker.tsx` (as I've had to update the props so that they styling is different when the picker is rendered inside the toolbar). This PR has ripped out a lot of now dead code around the old dropdown, but hasn't removed the (already dead but still used in some tests) insert menu pane. Note that this PR has removed the `g` shortcut (which was an alias for the `w` to 'wrap in' shortcut but opened the old menu rather than the new one - `cmd`+`g` still exists). I can put that back if we still want it. I just deleted it whilst I was flushing out dead code. Also note that with the old insert menu we had the ability to wrap in certain elements that cannot be inserted normally (e.g. the `Group` element). That functionality no longer exists. <img width="297" alt="image" src="https://github.com/concrete-utopia/utopia/assets/1044774/4268a4b5-39a8-4042-9eea-c4d3c1c5a96f"> <img width="287" alt="image" src="https://github.com/concrete-utopia/utopia/assets/1044774/477fda9c-53ac-4fb5-8c48-268bc4df3857"> **Manual Tests:** I hereby swear that: - [x] I opened a hydrogen project and it loaded - [x] I could navigate to various routes in Preview mode Fixes #5443 --------- Co-authored-by: Federico Ruggi <[email protected]>
concrete-utopia · Jun 3, 2024 · 8a89dde · 8a89dde
1 parent b698e4e
commit 8a89dde
Show file tree

Hide file tree

Showing 28 changed files with 221 additions and 1,299 deletions.
diff --git a/editor/src/components/canvas/canvas-context-menu.spec.browser2.tsx b/editor/src/components/canvas/canvas-context-menu.spec.browser2.tsx
@@ -27,7 +27,7 @@ import {
 } from './ui-jsx.test-utils'
 import {
   expectNoAction,
-  searchInFloatingMenu,
+  searchInComponentPicker,
   selectComponentsForTest,
 } from '../../utils/utils.test-utils'
 import { MetadataUtils } from '../../core/model/element-metadata-utils'
@@ -952,5 +952,5 @@ describe('canvas context menu', () => {
 
 async function wrapInElement(renderResult: EditorRenderResult, query: string) {
   await pressKey('w') // open the wrap menu
-  await searchInFloatingMenu(renderResult, query)
+  await searchInComponentPicker(renderResult, query)
 }
diff --git a/editor/src/components/canvas/ui/floating-insert-menu-helpers.ts b/editor/src/components/canvas/ui/floating-insert-menu-helpers.ts
@@ -1,16 +1,12 @@
-import type { FloatingInsertMenuState } from '../../editor/store/editor-state'
-
-export type InsertMenuMode = FloatingInsertMenuState['insertMenuMode']
+export type InsertMenuMode = 'insert' | 'swap' | 'wrap'
 
 export const insertMenuModes: {
   all: InsertMenuMode[]
-  onlyClosed: InsertMenuMode[]
   onlyInsert: InsertMenuMode[]
   onlyConvert: InsertMenuMode[]
   onlyWrap: InsertMenuMode[]
 } = {
-  all: ['closed', 'insert', 'swap', 'wrap'],
-  onlyClosed: ['closed'],
+  all: ['insert', 'swap', 'wrap'],
   onlyInsert: ['insert'],
   onlyConvert: ['swap'],
   onlyWrap: ['wrap'],

diff --git a/editor/src/components/canvas/ui/floating-insert-menu.tsx b/editor/src/components/canvas/ui/floating-insert-menu.tsx
@@ -1,36 +1,24 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
 import React from 'react'
-import { jsx } from '@emotion/react'
-import type { CSSObject } from '@emotion/serialize'
-import type { OptionProps, StylesConfig } from 'react-windowed-select'
-
-import { getControlStyles } from '../../../uuiui-deps'
 import { Substores, useEditorState } from '../../editor/store/store-hook'
 
-import { Icn, useColorTheme, UtopiaTheme } from '../../../uuiui'
 import { usePossiblyResolvedPackageDependencies } from '../../editor/npm-dependency/npm-dependency'
 import type {
   InsertableComponent,
   InsertableComponentGroup,
   InsertableComponentGroupType,
-  InsertableVariable,
 } from '../../shared/project-components'
 import {
   getInsertableGroupLabel,
   getNonEmptyComponentGroups,
   isInsertableVariable,
 } from '../../shared/project-components'
-import { InspectorInputEmotionStyle } from '../../../uuiui/inputs/base-input'
 import { optionalMap } from '../../../core/shared/optional-utils'
 import type { InsertMenuMode } from './floating-insert-menu-helpers'
 import {
   convertVariablesToElements,
   getVariablesInScope,
 } from '../../../components/shared/scoped-variables'
 
-export const FloatingMenuTestId = 'floating-menu-test-id'
-
 export type InsertMenuItemValue = InsertableComponent & {
   source: InsertableComponentGroupType | null
   key: string
@@ -152,203 +140,3 @@ export function useGetInsertableComponents(
     return insertableComponents
   }
 }
-
-export function useComponentSelectorStyles(): StylesConfig<InsertMenuItem, false> {
-  const colorTheme = useColorTheme()
-  // componentSelectorStyles will only be recreated if the theme changes, otherwise we re-use the same object
-  return React.useMemo(
-    () => ({
-      container: (styles): CSSObject => ({
-        // the outermost element. It contains the popup menu,  so don't set a height on it!
-        // shouldn't contain any sizing
-        // ...styles,
-        flexGrow: 1,
-        display: 'flex',
-        flexDirection: 'column',
-      }),
-      control: (styles): CSSObject => ({
-        // need to remove styles here, since that implicitly sets a height of 38
-        // ...styles,
-        display: 'flex',
-        background: 'transparent',
-        height: UtopiaTheme.layout.rowHeight.normal,
-        outline: 'none',
-        paddingLeft: 8,
-        paddingRight: 8,
-        ':focus-within': {
-          outline: 'none',
-          border: 'none',
-        },
-      }),
-      valueContainer: (styles): CSSObject => ({
-        // the container for added options (tags) and input
-        // sibling to indicatorsContainer
-        // default styles mess with layout, so ignore them
-        // ...styles,
-        display: 'flex',
-        position: 'relative',
-        flexGrow: 1,
-        flexShrink: 0,
-        overflowX: 'scroll',
-        alignItems: 'center',
-        gap: 4,
-        paddingLeft: 0,
-        paddingRight: 0,
-        paddingTop: 0,
-        paddingBottom: 0,
-      }),
-      indicatorsContainer: (styles): CSSObject => ({
-        // ...styles,
-        display: 'none',
-      }),
-
-      multiValue: (styles, { data }): CSSObject => {
-        return {
-          // ...styles,
-          cursor: 'pointer',
-          display: 'flex',
-          alignItems: 'center',
-        }
-      },
-      multiValueLabel: (styles, { data }): CSSObject => ({
-        // ...styles,
-        fontSize: 10,
-        padding: '2px 4px',
-      }),
-      multiValueRemove: (styles, { data }): CSSObject => ({
-        // ...styles,
-        width: 11,
-        display: 'flex',
-        paddingTop: 2,
-        opacity: 0.4,
-        color: styles.color,
-        ':hover': {
-          opacity: 1,
-          backgroundColor: styles.color,
-        },
-      }),
-      menu: (styles): CSSObject => {
-        // the outer shell
-        return {
-          // ...styles,
-          boxShadow: 'none',
-          borderRadius: 0,
-          background: 'transparent',
-          overflowY: 'scroll',
-          flex: 1,
-        }
-      },
-      menuList: (styles): CSSObject => {
-        // the list wrapper
-        return {
-          // ...styles,
-          position: 'relative',
-          maxHeight: 210,
-          paddingLeft: 8,
-          paddingRight: 8,
-          overflowY: 'auto',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 6,
-          paddingBottom: UtopiaTheme.layout.rowHeight.large,
-        }
-      },
-      input: (styles): CSSObject => {
-        return {
-          // ...styles,
-          ...(InspectorInputEmotionStyle({
-            hasLabel: false,
-            controlStyles: getControlStyles('simple'),
-          }) as CSSObject),
-          paddingLeft: 4,
-          backgroundColor: colorTheme.seperator.value,
-          flexGrow: 1,
-          display: 'flex',
-          alignItems: 'center',
-        }
-      },
-      placeholder: (styles): CSSObject => {
-        return { ...styles, marginLeft: 4 }
-      },
-      option: (styles, { data, isDisabled, isFocused, isSelected }): CSSObject => {
-        // a single entry in the options list
-
-        return {
-          // ...styles,
-          height: UtopiaTheme.layout.rowHeight.smaller,
-          display: 'flex',
-          alignItems: 'center',
-          paddingLeft: 4,
-          paddingRight: 4,
-          cursor: isDisabled ? 'not-allowed' : 'default',
-          color: isFocused ? colorTheme.bg0.value : colorTheme.fg0.value,
-          backgroundColor: 'transparent',
-          borderRadius: UtopiaTheme.inputBorderRadius,
-        }
-      },
-      group: (): CSSObject => {
-        return {
-          // ...styles,
-        }
-      },
-      groupHeading: (styles): CSSObject => {
-        return {
-          // ...styles,
-          display: 'none',
-        }
-      },
-    }),
-    [colorTheme],
-  )
-}
-
-export const CustomComponentOption = (props: OptionProps<InsertMenuItem, false>) => {
-  const { innerRef, innerProps, isDisabled, isFocused, label, data } = props
-  const colorTheme = useColorTheme()
-  return (
-    <div
-      ref={innerRef}
-      {...innerProps}
-      data-testid={`floating-menu-item-${label}`}
-      style={{
-        boxSizing: 'border-box',
-        height: UtopiaTheme.layout.rowHeight.smaller,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        cursor: isDisabled ? 'not-allowed' : 'default',
-        color: isFocused ? colorTheme.dynamicBlue.value : colorTheme.fg0.value,
-        backgroundColor: 'transparent',
-        borderRadius: UtopiaTheme.inputBorderRadius,
-      }}
-    >
-      <div style={{ display: 'flex', gap: 8, flexDirection: 'row', paddingRight: 2 }}>
-        <Icn
-          category='semantic'
-          type='classicarrow-right'
-          width={16}
-          height={16}
-          style={{ opacity: isFocused ? 1 : 0 }}
-          color='dynamic'
-        />
-        {label}
-      </div>
-      <div
-        style={{
-          color: isFocused ? colorTheme.dynamicBlue30.value : colorTheme.fg7.value,
-          height: UtopiaTheme.layout.rowHeight.smaller,
-          right: 12,
-          display: 'flex',
-          alignItems: 'center',
-          pointerEvents: 'none',
-          overflow: 'hidden',
-        }}
-      >
-        <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-          {data.source ?? ''}
-        </div>
-        <span style={{ minWidth: 0 }}></span>
-      </div>
-    </div>
-  )
-}
diff --git a/editor/src/components/context-menu-items.ts b/editor/src/components/context-menu-items.ts
@@ -34,7 +34,6 @@ import {
   toggleHidden,
 } from './editor/actions/action-creators'
 import {
-  floatingInsertMenuStateSwap,
   type AllElementProps,
   type InternalClipboard,
   type NavigatorEntry,

diff --git a/editor/src/components/editor/action-types.ts b/editor/src/components/editor/action-types.ts
@@ -48,7 +48,6 @@ import type {
   EditorState,
   ElementsToRerender,
   ErrorMessages,
-  FloatingInsertMenuState,
   GithubState,
   LeftMenuTab,
   ModalDialog,
@@ -542,15 +541,6 @@ export interface WrapInElement {
   whatToWrapWith: WrapInElementWith
 }
 
-export interface OpenFloatingInsertMenu {
-  action: 'OPEN_FLOATING_INSERT_MENU'
-  mode: FloatingInsertMenuState
-}
-
-export interface CloseFloatingInsertMenu {
-  action: 'CLOSE_FLOATING_INSERT_MENU'
-}
-
 export interface UnwrapElements {
   action: 'UNWRAP_ELEMENTS'
   targets: ElementPath[]
@@ -1258,8 +1248,6 @@ export type EditorAction =
   | SaveAsset
   | ResetPins
   | WrapInElement
-  | OpenFloatingInsertMenu
-  | CloseFloatingInsertMenu
   | UnwrapElements
   | SetNavigatorRenamingTarget
   | RedrawOldCanvasControls

diff --git a/editor/src/components/editor/actions/action-creators.ts b/editor/src/components/editor/actions/action-creators.ts
@@ -160,8 +160,6 @@ import type {
   SetCurrentTheme,
   FocusFormulaBar,
   UpdateFormulaBarMode,
-  OpenFloatingInsertMenu,
-  CloseFloatingInsertMenu,
   InsertInsertable,
   ToggleFocusedOmniboxTab,
   SetPropTransient,
@@ -246,7 +244,6 @@ import type {
   ImageDragSessionState,
   DuplicationState,
   ErrorMessages,
-  FloatingInsertMenuState,
   GithubState,
   LeftMenuTab,
   ModalDialog,
@@ -809,13 +806,6 @@ export function unwrapElements(targets: ElementPath[]): UnwrapElements {
   }
 }
 
-export function openFloatingInsertMenu(mode: FloatingInsertMenuState): OpenFloatingInsertMenu {
-  return {
-    action: 'OPEN_FLOATING_INSERT_MENU',
-    mode: mode,
-  }
-}
-
 export function wrapInElement(
   targets: Array<ElementPath>,
   whatToWrapWith: WrapInElementWith,
@@ -827,12 +817,6 @@ export function wrapInElement(
   }
 }
 
-export function closeFloatingInsertMenu(): CloseFloatingInsertMenu {
-  return {
-    action: 'CLOSE_FLOATING_INSERT_MENU',
-  }
-}
-
 export function setCursorOverlay(cursor: CSSCursor | null): SetCursorOverlay {
   return {
     action: 'SET_CURSOR_OVERLAY',

diff --git a/editor/src/components/editor/actions/action-utils.ts b/editor/src/components/editor/actions/action-utils.ts
@@ -107,8 +107,6 @@ export function isTransientAction(action: EditorAction): boolean {
     case 'FOCUS_CLASS_NAME_INPUT':
     case 'FOCUS_FORMULA_BAR':
     case 'UPDATE_FORMULA_BAR_MODE':
-    case 'OPEN_FLOATING_INSERT_MENU':
-    case 'CLOSE_FLOATING_INSERT_MENU':
     case 'SET_PROP_TRANSIENT':
     case 'CLEAR_TRANSIENT_PROPS':
     case 'DECREMENT_RESIZE_OPTIONS_SELECTED_INDEX':

diff --git a/editor/src/components/editor/actions/actions.spec.browser2.tsx b/editor/src/components/editor/actions/actions.spec.browser2.tsx
@@ -39,7 +39,6 @@ import {
   expectNoAction,
   expectSingleUndoNSaves,
   searchInComponentPicker,
-  searchInFloatingMenu,
   selectComponentsForTest,
   setFeatureForBrowserTestsUseInDescribeBlockOnly,
 } from '../../../utils/utils.test-utils'