Deletable Cartouche first iteration (#5044)

* delete cartouche v1 * oops fixing snappy
concrete-utopia · Mar 14, 2024 · 6c18b3d · 6c18b3d
1 parent c4dda31
commit 6c18b3d
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 3 deletions.
diff --git a/editor/src/components/inspector/sections/component-section/component-section.tsx b/editor/src/components/inspector/sections/component-section/component-section.tsx
@@ -108,6 +108,7 @@ import { DataPickerPopup } from './data-picker-popup'
 import { jsxElementChildToText } from '../../../canvas/ui-jsx-canvas-renderer/jsx-element-child-to-text'
 import { foldEither } from '../../../../core/shared/either'
 import { stopPropagation } from '../../common/inspector-utils'
+import { NO_OP } from '../../../../core/shared/utils'
 
 export const VariableFromScopeOptionTestId = (idx: string) => `variable-from-scope-${idx}`
 export const DataPickerPopupButtonTestId = `data-picker-popup-button-test-id`
@@ -123,7 +124,13 @@ function useComponentPropsInspectorInfo(
 }
 
 const ControlForProp = React.memo((props: ControlForPropProps<RegularControlDescription>) => {
-  const { controlDescription } = props
+  const { controlDescription, showHiddenControl } = props
+  const onSubmitValue = props.propMetadata.onSubmitValue
+
+  const onDeleteCartouche = React.useCallback(() => {
+    onSubmitValue(null, false)
+    showHiddenControl(PP.firstPartToString(props.propPath))
+  }, [onSubmitValue, showHiddenControl, props.propPath])
 
   if (controlDescription == null) {
     return null
@@ -142,6 +149,7 @@ const ControlForProp = React.memo((props: ControlForPropProps<RegularControlDesc
           contents={jsxElementChildToText(attributeExpression, null, null, 'jsx', 'inner')}
           matchType='full'
           onOpenDataPicker={props.onOpenDataPicker}
+          onDeleteCartouche={onDeleteCartouche}
         />
       )
     }
@@ -157,6 +165,7 @@ const ControlForProp = React.memo((props: ControlForPropProps<RegularControlDesc
             contents={'Expression'}
             matchType='partial'
             onOpenDataPicker={props.onOpenDataPicker}
+            onDeleteCartouche={onDeleteCartouche}
           />
         )
       }
@@ -225,6 +234,7 @@ interface AbstractRowForControlProps {
   setGlobalCursor: (cursor: CSSCursor | null) => void
   indentationLevel: number
   focusOnMount: boolean
+  showHiddenControl: (path: string) => void
 }
 
 function labelForControl(propPath: PropertyPath, control: RegularControlDescription): string {
@@ -440,6 +450,7 @@ const RowForBaseControl = React.memo((props: RowForBaseControlProps) => {
             setGlobalCursor={props.setGlobalCursor}
             focusOnMount={props.focusOnMount}
             onOpenDataPicker={dataPickerButtonData.openPopup}
+            showHiddenControl={props.showHiddenControl}
           />
         </div>
         {when(isBaseIndentationLevel(props), dataPickerButtonData.DataPickerOpener)}
@@ -575,6 +586,7 @@ const RowForArrayControl = React.memo((props: RowForArrayControlProps) => {
               setGlobalCursor={props.setGlobalCursor}
               focusOnMount={props.focusOnMount}
               onOpenDataPicker={dataPickerButtonData.openPopup}
+              showHiddenControl={props.showHiddenControl}
             />
           </FlexRow>
           {when(isBaseIndentationLevel(props), dataPickerButtonData.DataPickerOpener)}
@@ -595,6 +607,7 @@ const RowForArrayControl = React.memo((props: RowForArrayControlProps) => {
               controlDescription={controlDescription}
               focusOnMount={props.focusOnMount}
               setGlobalCursor={props.setGlobalCursor}
+              showHiddenControl={props.showHiddenControl}
             />
           ))}
         </div>
@@ -611,6 +624,7 @@ interface ArrayControlItemProps {
   controlDescription: ArrayControlDescription
   focusOnMount: boolean
   setGlobalCursor: (cursor: CSSCursor | null) => void
+  showHiddenControl: (path: string) => void
 }
 
 const ArrayControlItem = React.memo((props: ArrayControlItemProps) => {
@@ -656,6 +670,7 @@ const ArrayControlItem = React.memo((props: ArrayControlItemProps) => {
           indentationLevel={2}
           focusOnMount={props.focusOnMount && index === 0}
           disableToggling={true}
+          showHiddenControl={props.showHiddenControl}
         />
         <div
           style={{
@@ -728,6 +743,7 @@ const RowForTupleControl = React.memo((props: RowForTupleControlProps) => {
             isScene={props.isScene}
             controlDescription={controlDescription}
             setGlobalCursor={props.setGlobalCursor}
+            showHiddenControl={props.showHiddenControl}
           />
         ))}
       </div>
@@ -741,6 +757,7 @@ interface TupleControlItemProps {
   isScene: boolean
   controlDescription: TupleControlDescription
   setGlobalCursor: (cursor: CSSCursor | null) => void
+  showHiddenControl: (path: string) => void
 }
 
 const TupleControlItem = React.memo((props: TupleControlItemProps) => {
@@ -767,6 +784,7 @@ const TupleControlItem = React.memo((props: TupleControlItemProps) => {
         setGlobalCursor={props.setGlobalCursor}
         indentationLevel={1}
         focusOnMount={false}
+        showHiddenControl={props.showHiddenControl}
       />
     </InspectorContextMenuWrapper>
   )
@@ -868,6 +886,7 @@ const RowForObjectControl = React.memo((props: RowForObjectControlProps) => {
                   setGlobalCursor={props.setGlobalCursor}
                   focusOnMount={props.focusOnMount}
                   onOpenDataPicker={dataPickerButtonData.openPopup}
+                  showHiddenControl={props.showHiddenControl}
                 />
               </div>
             </SimpleFlexRow>
@@ -889,6 +908,7 @@ const RowForObjectControl = React.memo((props: RowForObjectControlProps) => {
               indentationLevel={props.indentationLevel + 1}
               focusOnMount={props.focusOnMount && index === 0}
               disableToggling={props.disableToggling}
+              showHiddenControl={props.showHiddenControl}
             />
           )
         }, controlDescription.object),

diff --git a/editor/src/components/inspector/sections/component-section/folder-section.tsx b/editor/src/components/inspector/sections/component-section/folder-section.tsx
@@ -136,6 +136,7 @@ export const FolderSection = React.memo((props: FolderSectionProps) => {
                 isScene={false}
                 setGlobalCursor={props.setGlobalCursor}
                 indentationLevel={props.indentationLevel + 1}
+                showHiddenControl={props.showHiddenControl}
                 focusOnMount={false}
               />
             )

diff --git a/editor/src/components/inspector/sections/component-section/property-control-controls.tsx b/editor/src/components/inspector/sections/component-section/property-control-controls.tsx
@@ -70,6 +70,7 @@ import {
 } from '../../../../core/shared/element-template'
 import type { JSXParsedType, JSXParsedValue } from '../../../../utils/value-parser-utils'
 import { assertNever } from '../../../../core/shared/utils'
+import { preventDefault, stopPropagation } from '../../common/inspector-utils'
 
 export interface ControlForPropProps<T extends RegularControlDescription> {
   propPath: PropertyPath
@@ -79,6 +80,7 @@ export interface ControlForPropProps<T extends RegularControlDescription> {
   setGlobalCursor: (cursor: CSSCursor | null) => void
   focusOnMount: boolean
   onOpenDataPicker: () => void
+  showHiddenControl: (path: string) => void
 }
 
 export const CheckboxPropertyControl = React.memo(
@@ -799,9 +801,19 @@ interface IdentifierExpressionCartoucheControlProps {
   contents: string
   matchType: 'full' | 'partial'
   onOpenDataPicker: () => void
+  onDeleteCartouche: () => void
 }
 export const IdentifierExpressionCartoucheControl = React.memo(
   (props: IdentifierExpressionCartoucheControlProps) => {
+    const { onDeleteCartouche } = props
+    const onDelete = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(
+      (e) => {
+        stopPropagation(e)
+        onDeleteCartouche()
+      },
+      [onDeleteCartouche],
+    )
+
     return (
       <FlexRow
         style={{
@@ -842,6 +854,9 @@ export const IdentifierExpressionCartoucheControl = React.memo(
             {/* the &lrm; non-printing character is added to fix the punctuation marks disappearing because of direction: rtl */}
           </div>
         </Tooltip>
+        <div style={{ paddingLeft: 5, paddingRight: 5, marginRight: -5 }} onClick={onDelete}>
+          {/* TODO replace the X button with a real icon */}×
+        </div>
       </FlexRow>
     )
   },

diff --git a/editor/src/components/inspector/sections/component-section/row-or-folder-wrapper.tsx b/editor/src/components/inspector/sections/component-section/row-or-folder-wrapper.tsx
@@ -50,6 +50,7 @@ export const RowOrFolderWrapper = React.memo((props: RowOrFolderWrapperProps) =>
             setGlobalCursor={props.setGlobalCursor}
             indentationLevel={props.indentationLevel}
             focusOnMount={props.focusOnMount ?? false}
+            showHiddenControl={props.showHiddenControl}
           />
         </UIGridRow>
       )

diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -178,6 +178,7 @@ Array [
   "/div///div",
   "/div///div",
   "/div///UtopiaSpiedClass(Tooltip)",
+  "/div///div",
   "/div///Symbol(react.forward_ref)(Styled(div))",
   "///Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -1585,6 +1586,16 @@ Array [
   "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div//Symbol(react.memo)()",
+  "/div///div",
+  "/div///div",
+  "/div///UtopiaSpiedClass(Tooltip)",
+  "/div///div",
+  "/div///Symbol(react.forward_ref)(Styled(div))",
+  "///Symbol(react.forward_ref)(Styled(div))/div",
+  "/Symbol(react.forward_ref)(Styled(div))/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(MomentumContextMenu)/span",
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(MomentumContextMenu)/span",
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(MomentumContextMenu)/UtopiaSpiedFunctionComponent(Item)",

diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`845`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`855`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`624`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`625`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })
diff --git a/editor/src/core/shared/property-path.ts b/editor/src/core/shared/property-path.ts
@@ -129,6 +129,10 @@ export function firstPart(propertyPath: PropertyPath): PropertyPathPart {
   return propertyPath.propertyElements[0]
 }
 
+export function firstPartToString(propertyPath: PropertyPath): string {
+  return `${firstPart(propertyPath)}`
+}
+
 export function tail(propertyPath: PropertyPath): PropertyPath {
   const newElements =
     propertyPath.propertyElements.length > 0 ? propertyPath.propertyElements.slice(1) : []