Short Cartouches (#5925)

**Problem:** The cartouches in the navigator and the inspector don't currently have a max width and they can be overlong. **Fix:** For property and element accessors, only show the last bit. <img width="340" alt="image" src="https://github.com/concrete-utopia/utopia/assets/2226774/7229048e-bcc8-445e-8f73-53a345bf97a5"> <img width="243" alt="image" src="https://github.com/concrete-utopia/utopia/assets/2226774/e269aae4-abc4-4185-8454-44372497ec03"> <img width="275" alt="image" src="https://github.com/concrete-utopia/utopia/assets/2226774/08e2c030-3891-44d7-9d91-b53ec2a06f9c"> **Commit Details:** - Added `shortLabel` to `getTextContentOfElement` - If the DataReferenceCartouche has a non-null shortLabel, it is used - The tooltip always shows the long label **Bonus** The PR also changes when do we hide the cartouche icon – the new ruleset only hides the cartouche icon for inline value literals such as `myProp="value"` and `<div>{'myValue'}</div>`
concrete-utopia · Jun 13, 2024 · de7afad · de7afad
1 parent 7cb0904
commit de7afad
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 39 deletions.
diff --git a/editor/src/components/inspector/sections/component-section/cartouche-control.tsx b/editor/src/components/inspector/sections/component-section/cartouche-control.tsx
@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import React from 'react'
 import { jsx } from '@emotion/react'
+import type { DataReferenceCartoucheContentType } from './data-reference-cartouche'
 import { DataCartoucheInner } from './data-reference-cartouche'
 import { NO_OP } from '../../../../core/shared/utils'
 import type { ElementPath, PropertyPath } from '../../../../core/shared/project-file-types'
@@ -12,7 +13,11 @@ import type { CartoucheDataType } from './cartouche-ui'
 import { useColorTheme } from '../../../../uuiui'
 
 interface IdentifierExpressionCartoucheControlProps {
-  contents: string
+  contents: {
+    type: DataReferenceCartoucheContentType
+    label: string | null
+    shortLabel: string | null
+  }
   icon: React.ReactChild
   matchType: 'full' | 'partial'
   onOpenDataPicker: () => void
@@ -42,7 +47,7 @@ export const IdentifierExpressionCartoucheControl = React.memo(
     return (
       <CartoucheInspectorWrapper>
         <DataCartoucheInner
-          contentsToDisplay={{ label: props.contents, type: 'reference' }}
+          contentsToDisplay={props.contents}
           onClick={NO_OP}
           selected={false}
           onDoubleClick={onOpenDataPicker}

diff --git a/editor/src/components/inspector/sections/component-section/cartouche-ui.tsx b/editor/src/components/inspector/sections/component-section/cartouche-ui.tsx
@@ -14,11 +14,11 @@ export interface HoverHandlers {
 
 export type CartoucheDataType = 'renderable' | 'boolean' | 'array' | 'object' | 'unknown'
 
-export type CartoucheSource = 'internal' | 'external' | 'literal'
+export type CartoucheSource = 'internal' | 'external' | 'inline-literal' | 'literal-assignment'
 export type CartoucheHighlight = 'strong' | 'subtle' | 'disabled'
 
 export type CartoucheUIProps = React.PropsWithChildren<{
-  tooltip?: string | null
+  tooltip: string | null
   source: CartoucheSource
   role: 'selection' | 'information' | 'folder'
   datatype: CartoucheDataType
@@ -121,7 +121,7 @@ export const CartoucheUI = React.forwardRef(
                     },
             }}
           >
-            {source === 'literal' ? null : (
+            {source === 'inline-literal' ? null : (
               <Icn
                 category='navigator-element'
                 type={dataTypeToIconType(datatype)}
@@ -141,12 +141,6 @@ export const CartoucheUI = React.forwardRef(
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
 
-                /* Beginning of string */
-                ...(shouldUseRtlCSS
-                  ? {
-                      direction: source === 'literal' ? 'ltr' : 'rtl', // TODO we need a better way to ellipsize the beginning because rtl eats ' " marks
-                    }
-                  : {}),
                 textAlign: 'left',
                 ...(role !== 'information' ? UtopiaStyles.fontStyles.monospaced : {}),
                 display: 'flex',
@@ -250,7 +244,8 @@ function useCartoucheColors(source: CartoucheSource, highlight: CartoucheHighlig
           },
           icon: { default: 'dynamic', hovered: 'dynamic', selected: 'on-highlight-main' },
         }
-      case 'literal':
+      case 'inline-literal':
+      case 'literal-assignment':
         return {
           fg: {
             default: colorTheme.fg1.value,

diff --git a/editor/src/components/inspector/sections/component-section/component-section-children.tsx b/editor/src/components/inspector/sections/component-section/component-section-children.tsx
@@ -18,7 +18,7 @@ import { isJSXElement, isJSXTextBlock } from '../../../../core/shared/element-te
 import { IdentifierExpressionCartoucheControl } from './cartouche-control'
 import { renderedAtChildNode } from '../../../editor/store/editor-state'
 import { isRight } from '../../../../core/shared/either'
-import { DataReferenceCartoucheControl } from './data-reference-cartouche'
+import { DataReferenceCartoucheControl, getTextContentOfElement } from './data-reference-cartouche'
 import { assertNever } from '../../../../core/shared/utils'
 import { childrenAreProbablyNumericExpression } from '../../../editor/element-children'
 import type { CartoucheDataType } from './cartouche-ui'
@@ -61,7 +61,7 @@ export function useChildrenPropOverride(
     case 'expression':
       return (
         <IdentifierExpressionCartoucheControl
-          contents={'Expression'}
+          contents={{ type: 'object-literal', label: 'Expression', shortLabel: null }}
           icon={React.createElement(iconForControlType('none'))}
           matchType='partial'
           onOpenDataPicker={props.onOpenDataPicker}

diff --git a/editor/src/components/inspector/sections/component-section/component-section.tsx b/editor/src/components/inspector/sections/component-section/component-section.tsx
@@ -113,6 +113,7 @@ import {
   childrenAreProbablyNumericExpression,
   replaceFirstChildAndDeleteSiblings,
 } from '../../../editor/element-children'
+import { getTextContentOfElement } from './data-reference-cartouche'
 
 export interface PropertyLabelAndPlusButtonProps {
   title: string
@@ -255,7 +256,7 @@ const ControlForProp = React.memo((props: ControlForPropProps<RegularControlDesc
     ) {
       return (
         <IdentifierExpressionCartoucheControl
-          contents={jsxElementChildToText(attributeExpression, null, null, 'jsx', 'inner')}
+          contents={getTextContentOfElement(attributeExpression, null)}
           icon={React.createElement(iconForControlType(props.controlDescription.control))}
           matchType='full'
           onOpenDataPicker={props.onOpenDataPicker}
@@ -277,7 +278,7 @@ const ControlForProp = React.memo((props: ControlForPropProps<RegularControlDesc
       if (controlDescription.control !== 'jsx') {
         return (
           <IdentifierExpressionCartoucheControl
-            contents={'Expression'}
+            contents={getTextContentOfElement(attributeExpression, null)}
             icon={React.createElement(iconForControlType('none'))}
             matchType='partial'
             onOpenDataPicker={props.onOpenDataPicker}

diff --git a/editor/src/components/inspector/sections/component-section/data-reference-cartouche.tsx b/editor/src/components/inspector/sections/component-section/data-reference-cartouche.tsx
@@ -35,7 +35,6 @@ interface DataReferenceCartoucheControlProps {
   selected: boolean
   renderedAt: RenderedAt
   surroundingScope: ElementPath
-  hideTooltip?: boolean
   highlight?: CartoucheHighlight | null
 }
 
@@ -158,7 +157,6 @@ export const DataReferenceCartoucheControl = React.memo(
           onDelete={NO_OP}
           testId={`data-reference-cartouche-${EP.toString(elementPath)}`}
           contentIsComingFromServer={isDataComingFromHookResult}
-          hideTooltip={props.hideTooltip}
           datatype={currentlySelectedValueDataType}
         />
         {/* this div prevents the popup form putting padding into the condensed rows */}
@@ -170,16 +168,20 @@ export const DataReferenceCartoucheControl = React.memo(
   },
 )
 
+export type DataReferenceCartoucheContentType = 'value-literal' | 'object-literal' | 'reference'
 interface DataCartoucheInnerProps {
   onClick: (e: React.MouseEvent) => void
   onDoubleClick: (e: React.MouseEvent) => void
   selected: boolean
-  contentsToDisplay: { type: 'literal' | 'reference'; label: string | null }
+  contentsToDisplay: {
+    type: DataReferenceCartoucheContentType
+    label: string | null
+    shortLabel: string | null
+  }
   safeToDelete: boolean
   onDelete: () => void
   testId: string
   contentIsComingFromServer: boolean
-  hideTooltip?: boolean
   datatype: CartoucheDataType
   highlight?: CartoucheHighlight | null
   badge?: React.ReactNode
@@ -211,8 +213,10 @@ export const DataCartoucheInner = React.forwardRef(
     const onDelete = safeToDelete ? onDeleteInner : undefined
 
     const source: CartoucheUIProps['source'] =
-      contentsToDisplay.type === 'literal'
-        ? 'literal'
+      contentsToDisplay.type === 'value-literal'
+        ? 'inline-literal'
+        : contentsToDisplay.type === 'object-literal'
+        ? 'internal'
         : contentIsComingFromServer
         ? 'external'
         : 'internal'
@@ -226,13 +230,13 @@ export const DataCartoucheInner = React.forwardRef(
         selected={selected}
         highlight={highlight}
         testId={testId}
-        tooltip={!props.hideTooltip ? contentsToDisplay.label ?? 'DATA' : null}
+        tooltip={contentsToDisplay.label ?? contentsToDisplay.shortLabel ?? 'DATA'}
         role='selection'
         source={source}
         ref={ref}
         badge={props.badge}
       >
-        {contentsToDisplay.label ?? 'DATA'}
+        {contentsToDisplay.shortLabel ?? contentsToDisplay.label ?? 'DATA'}
       </CartoucheUI>
     )
   },
@@ -241,46 +245,55 @@ export const DataCartoucheInner = React.forwardRef(
 export function getTextContentOfElement(
   element: JSXElementChild,
   metadata: ElementInstanceMetadata | null,
-): { type: 'literal' | 'reference'; label: string | null } {
+): {
+  type: DataReferenceCartoucheContentType
+  label: string | null
+  shortLabel: string | null
+} {
   switch (element.type) {
     case 'ATTRIBUTE_VALUE':
-      return { type: 'literal', label: `${JSON.stringify(element.value)}` }
+      return { type: 'value-literal', label: `${JSON.stringify(element.value)}`, shortLabel: null }
     case 'JSX_TEXT_BLOCK':
-      return { type: 'literal', label: element.text.trim() }
+      return { type: 'value-literal', label: element.text.trim(), shortLabel: null }
     case 'JS_IDENTIFIER':
-      return { type: 'reference', label: element.name.trim() }
+      return { type: 'reference', label: element.name.trim(), shortLabel: null }
     case 'JS_ELEMENT_ACCESS':
       return {
         type: 'reference',
         label: `${getTextContentOfElement(element.onValue, null).label}[${
           getTextContentOfElement(element.element, null).label
         }]`,
+        shortLabel: `${TruncationPrefix}${getTextContentOfElement(element.element, null).label}`,
       }
     case 'JS_PROPERTY_ACCESS':
       return {
         type: 'reference',
         label: `${getTextContentOfElement(element.onValue, null).label}.${element.property}`,
+        shortLabel: `${TruncationPrefix}${element.property}`,
       }
     case 'ATTRIBUTE_FUNCTION_CALL':
-      return { type: 'reference', label: `${element.functionName}(...` }
+      return { type: 'reference', label: `${element.functionName}(...`, shortLabel: null }
     case 'JSX_ELEMENT':
       return {
-        type: 'literal',
+        type: 'object-literal',
         label: metadata?.textContent ?? `${getJSXElementNameLastPart(element.name)}`,
+        shortLabel: null,
       }
     case 'ATTRIBUTE_NESTED_ARRAY':
-      return { type: 'literal', label: '[...]' }
+      return { type: 'object-literal', label: '[...]', shortLabel: null }
     case 'ATTRIBUTE_NESTED_OBJECT':
-      return { type: 'literal', label: '{...}' }
+      return { type: 'object-literal', label: '{...}', shortLabel: null }
     case 'JSX_MAP_EXPRESSION':
-      return { type: 'literal', label: 'List' }
+      return { type: 'object-literal', label: 'List', shortLabel: null }
     case 'JSX_CONDITIONAL_EXPRESSION':
-      return { type: 'literal', label: 'Conditional' }
+      return { type: 'object-literal', label: 'Conditional', shortLabel: null }
     case 'ATTRIBUTE_OTHER_JAVASCRIPT':
-      return { type: 'literal', label: element.originalJavascript }
+      return { type: 'object-literal', label: element.originalJavascript, shortLabel: null }
     case 'JSX_FRAGMENT':
-      return { type: 'literal', label: 'Fragment' }
+      return { type: 'object-literal', label: 'Fragment', shortLabel: null }
     default:
       assertNever(element)
   }
 }
+
+const TruncationPrefix = `…`
diff --git a/editor/src/components/inspector/sections/component-section/data-selector-cartouche.tsx b/editor/src/components/inspector/sections/component-section/data-selector-cartouche.tsx
@@ -26,6 +26,7 @@ export const DataPickerCartouche = React.memo(
     return (
       <CartoucheUI
         key={data.valuePath.toString()}
+        tooltip={null}
         source={dataSource ?? 'internal'}
         datatype={childTypeToCartoucheDataType(data.type)}
         selected={variableMatches(data.variableInfo) && selected}
@@ -56,7 +57,9 @@ export const DataPickerCartouche = React.memo(
   },
 )
 
-export function useVariableDataSource(variable: DataPickerOption | null) {
+export function useVariableDataSource(
+  variable: DataPickerOption | null,
+): CartoucheUIProps['source'] | null {
   return useEditorState(
     Substores.projectContentsAndMetadata,
     (store) => {
@@ -77,7 +80,7 @@ export function useVariableDataSource(variable: DataPickerOption | null) {
           return 'external'
         case 'literal-attribute':
         case 'literal-assignment':
-          return 'literal'
+          return 'literal-assignment'
         case 'component-prop':
         case 'element-at-scope':
         case 'failed':

diff --git a/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx b/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
@@ -426,7 +426,6 @@ const CondensedEntryItemContent = React.memo(
               highlight={
                 props.rowRootSelected ? 'strong' : props.wholeRowInsideSelection ? 'subtle' : null
               }
-              hideTooltip={true}
             />,
           )}
         </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -426,7 +426,6 @@ const CondensedEntryItemContent = React.memo( @@
                   highlight={
                     props.rowRootSelected ? 'strong' : props.wholeRowInsideSelection ? 'subtle' : null
                   }
-                  hideTooltip={true}
                 />,
               )}
             </div>
@@ Expand Down @@