Hide tooltip for navigator cartouches (#5813)

**Problem:**

The cartouches have a tooltip that in the navigator can easily overflow.


![](https://private-user-images.githubusercontent.com/16385508/335189490-390b28b9-6dcc-4a5d-b585-5dbac8a3e635.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc0MDIxNjIsIm5iZiI6MTcxNzQwMTg2MiwicGF0aCI6Ii8xNjM4NTUwOC8zMzUxODk0OTAtMzkwYjI4YjktNmRjYy00YTVkLWI1ODUtNWRiYWM4YTNlNjM1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjAzVDA4MDQyMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFlZTI3N2RjYTM4NmQ0YThkNGRiZDE0MzU0YWMxMjY0YmM1ZDBiNDBlMGI4YWY4OGNlZjNkNDllNzFiY2Y1ZTYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.e5JRo_SfqDQD3lkWzOIxdKCAvzORnF_lJRBMJ7IYY3A)

**Fix:**

Like we do for the condensed entries, do not show the tooltip on
navigator cartouches.

**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 #5798

editor/src/components/inspector/sections/component-section/cartouche-ui.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import type { IcnColor } from '../../../../uuiui'
 import { FlexRow, Icn, Tooltip, UtopiaStyles, useColorTheme } from '../../../../uuiui'
 import { when } from '../../../../utils/react-conditionals'
 
@@ -9,7 +8,7 @@ export interface HoverHandlers {
 }
 
 export type CartoucheUIProps = React.PropsWithChildren<{
-  tooltip: string
+  tooltip?: string | null
   source: 'internal' | 'external' | 'literal'
   role: 'selection' | 'information' | 'folder'
   datatype: 'renderable' | 'boolean' | 'array' | 'object'
@@ -94,7 +93,7 @@ export const CartoucheUI = React.forwardRef(
         }}
         ref={ref}
       >
-        <Tooltip title={tooltip}>
+        <Tooltip title={tooltip ?? ''} disabled={tooltip == null}>
           <FlexRow
             style={{
               cursor: 'pointer',

editor/src/components/inspector/sections/component-section/data-reference-cartouche.tsx

@@ -28,6 +28,7 @@ interface DataReferenceCartoucheControlProps {
   selected: boolean
   renderedAt: RenderedAt
   surroundingScope: ElementPath
+  hideTooltip?: boolean
 }
 
 export const DataReferenceCartoucheControl = React.memo(
@@ -131,6 +132,7 @@ export const DataReferenceCartoucheControl = React.memo(
           onDelete={NO_OP}
           testId={`data-reference-cartouche-${EP.toString(elementPath)}`}
           contentIsComingFromServer={isDataComingFromHookResult}
+          hideTooltip={props.hideTooltip}
         />
         {/* this div prevents the popup form putting padding into the condensed rows */}
         <div style={{ width: 0 }}>
@@ -151,6 +153,7 @@ interface DataCartoucheInnerProps {
   onDelete: () => void
   testId: string
   contentIsComingFromServer: boolean
+  hideTooltip?: boolean
 }
 
 export const DataCartoucheInner = React.forwardRef(
@@ -193,7 +196,7 @@ export const DataCartoucheInner = React.forwardRef(
         selected={selected}
         inverted={inverted}
         testId={testId}
-        tooltip={contentsToDisplay.label ?? 'DATA'}
+        tooltip={!props.hideTooltip ? contentsToDisplay.label ?? 'DATA' : null}
         role='selection'
         source={source}
         ref={ref}

editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx

@@ -332,7 +332,7 @@ const CondensedEntryItemContent = React.memo(
               isDataReference,
               <WrappedLayoutIcon
                 entry={props.entry}
-                disabled={isDataReference || showLabel}
+                hideTooltip={isDataReference || showLabel}
                 selected={props.selected}
               />,
             )}
@@ -341,8 +341,9 @@ const CondensedEntryItemContent = React.memo(
           {when(
             isDataReference,
             <DataReferenceCartoucheControl
-              selected={props.selected}
               {...(props.entry as DataReferenceNavigatorEntry)}
+              selected={props.selected}
+              hideTooltip={true}
             />,
           )}
         </div>
@@ -436,7 +437,7 @@ const WrappedExpandableIndicator = React.memo(
 WrappedExpandableIndicator.displayName = 'WrappedExpandableIndicator'
 
 const WrappedLayoutIcon = React.memo(
-  (props: { entry: NavigatorEntry; disabled: boolean; selected: boolean }) => {
+  (props: { entry: NavigatorEntry; hideTooltip: boolean; selected: boolean }) => {
     const entryLabel = useEntryLabel(props.entry)
 
     const iconOverride = useEditorState(
@@ -457,7 +458,7 @@ const WrappedLayoutIcon = React.memo(
     )
 
     return (
-      <Tooltip title={entryLabel} disabled={props.disabled}>
+      <Tooltip title={entryLabel} disabled={props.hideTooltip}>
         <div
           style={{
             width: '100%',