Feat: Show empty state message (#5791)

**Problem:** We show an expandable arrow when there is no info to show ![Image](https://github.com/concrete-utopia/utopia/assets/47405698/b46127e3-4fe6-46bb-88a6-17960e29b0e8) **Fix:** We will show an empty state message when there is no content <video src="https://github.com/concrete-utopia/utopia/assets/7003853/008186ba-ec12-43b4-baee-5b74911d87ba"></video> **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 #5750
concrete-utopia · May 31, 2024 · c3c1c9a · c3c1c9a
1 parent 9b72f0c
commit c3c1c9a
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 15 deletions.
diff --git a/editor/src/components/inspector/sections/component-section/property-controls-section.tsx b/editor/src/components/inspector/sections/component-section/property-controls-section.tsx
@@ -1,14 +1,13 @@
 import React from 'react'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
 import type { PropertyControls } from '../../../custom-code/internal-property-controls'
-import { useEditorState } from '../../../editor/store/store-hook'
 import { setCursorOverlay } from '../../../editor/actions/action-creators'
 import { useKeepReferenceEqualityIfPossible } from '../../../../utils/react-performance'
 import { useHiddenElements } from './hidden-controls-section'
 import { FolderSection } from './folder-section'
 import type { CSSCursor } from '../../../canvas/canvas-types'
 import { UIGridRow } from '../../widgets/ui-grid-row'
-import { VerySubdued } from '../../../../uuiui'
+import { Subdued, VerySubdued } from '../../../../uuiui'
 import {
   AdvancedFolderLabel,
   isAdvancedFolderLabel,
@@ -52,7 +51,29 @@ export const PropertyControlsSection = React.memo((props: PropertyControlsSectio
 
   const propertiesWithFolders = synthesiseFolders(propertyControls)
 
-  return (
+  // unify the logic from the sub components
+  const hasContent = React.useMemo(
+    () =>
+      (Object.keys(detectedPropsAndValuesWithoutControls).length > 0 &&
+        Object.keys(detectedPropsAndValuesWithoutControls).some(
+          (prop) => !specialPropertiesToIgnore.includes(prop),
+        )) ||
+      propertiesWithFolders.folders.length > 0 ||
+      Object.keys(propertiesWithFolders.advanced).length > 0 ||
+      filteredDetectedPropsWithNoValue.length > 0 ||
+      Object.keys(propertiesWithFolders.uncategorized).length > 0 ||
+      propsWithControlsButNoValue.length > 0,
+    [
+      detectedPropsAndValuesWithoutControls,
+      propertiesWithFolders.folders,
+      propertiesWithFolders.advanced,
+      filteredDetectedPropsWithNoValue,
+      propertiesWithFolders.uncategorized,
+      propsWithControlsButNoValue.length,
+    ],
+  )
+
+  return hasContent ? (
     <>
       <FolderSection
         isRoot={true}
@@ -102,6 +123,12 @@ export const PropertyControlsSection = React.memo((props: PropertyControlsSectio
         </UIGridRow>
       ) : null}
     </>
+  ) : (
+    <UIGridRow padded tall={false} variant={'<-------------1fr------------->'}>
+      <div>
+        <Subdued>This component requires no configuration</Subdued>
+      </div>
+    </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
@@ -805,12 +805,12 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(Styled(div))/div",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.forward_ref)(Styled(span))",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "//UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/div/div/Symbol(react.forward_ref)(Styled(span))/span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(InspectorSectionHeader)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(InspectorSectionHeader)/Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(InspectorSectionHeader)/Symbol(react.forward_ref)(Styled(div))",
@@ -2476,12 +2476,12 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(Styled(div))/div",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.forward_ref)(Styled(span))",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "//UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/div/div/Symbol(react.forward_ref)(Styled(span))/span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",