Fix deleting a component descriptor file (#5108)

* Fix component descriptor file deletion * Add lifecycle text for component descriptor file deletion * Remove outdated lint disable comment
concrete-utopia · Mar 25, 2024 · 66a1d47 · 66a1d47
1 parent 7908a9c
commit 66a1d47
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 2 deletions.
diff --git a/editor/src/core/property-controls/property-controls-local.spec.tsx b/editor/src/core/property-controls/property-controls-local.spec.tsx
@@ -1,9 +1,9 @@
 import { renderTestEditorWithModel, TestAppUID } from '../../components/canvas/ui-jsx.test-utils'
 import { BakedInStoryboardUID } from '../model/scene-utils'
 import { TestScene0UID } from '../model/test-ui-js-file.test-utils'
-import { wait } from '../model/performance-scripts'
 import { createModifiedProject } from '../../sample-projects/sample-project-utils.test-utils'
 import { StoryboardFilePath } from '../../components/editor/store/editor-state'
+import { deleteFile } from '../../components/editor/actions/action-creators'
 
 const project = (componentDescriptorFiles: { [filename: string]: string }) =>
   createModifiedProject({
@@ -368,3 +368,74 @@ describe('registered property controls', () => {
     `)
   })
 })
+
+describe('Lifecycle management of registering components', () => {
+  it('Deleting a component descriptor file removes the property controls from that file', async () => {
+    const descriptorFileName1 = '/utopia/components1.utopia.js'
+    const descriptorFileName2 = '/utopia/components2.utopia.js'
+    const renderResult = await renderTestEditorWithModel(
+      project({
+        [descriptorFileName1]: `const Components = {
+      '/src/card': {
+        Card: {
+          supportsChildren: false,
+          properties: {
+            label: {
+              control: 'string-input',
+            },
+          },
+          variants: [],
+        },
+      },
+    }
+    
+    export default Components
+  `,
+        [descriptorFileName2]: `const Components = {
+    '/src/card2': {
+      Card2: {
+        supportsChildren: false,
+        properties: {
+          label: {
+            control: 'string-input',
+          },
+        },
+        variants: [],
+      },
+    },
+  }
+  
+  export default Components
+`,
+      }),
+      'await-first-dom-report',
+    )
+
+    // Property controls from both descriptors files are there
+    expect(Object.keys(renderResult.getEditorState().editor.propertyControlsInfo['/src/card']))
+      .toMatchInlineSnapshot(`
+      Array [
+        "Card",
+      ]
+    `)
+    expect(Object.keys(renderResult.getEditorState().editor.propertyControlsInfo['/src/card2']))
+      .toMatchInlineSnapshot(`
+      Array [
+        "Card2",
+      ]
+    `)
+
+    // delete the first descriptor file
+    await renderResult.dispatch([deleteFile(descriptorFileName1)], true)
+
+    // property controls from the first descriptor file are gone
+    expect(renderResult.getEditorState().editor.propertyControlsInfo).not.toContain('/src/card')
+    // property controls from the second descriptor file are still there
+    expect(Object.keys(renderResult.getEditorState().editor.propertyControlsInfo['/src/card2']))
+      .toMatchInlineSnapshot(`
+      Array [
+        "Card2",
+      ]
+    `)
+  })
+})
diff --git a/editor/src/core/property-controls/property-controls-local.ts b/editor/src/core/property-controls/property-controls-local.ts
@@ -274,7 +274,7 @@ export function updatePropertyControlsOnDescriptorFileDelete(
   componentDescriptorFile: string,
 ): PropertyControlsInfo {
   return updatePropertyControlsOnDescriptorFileUpdate(previousPropertyControlsInfo, {
-    componentDescriptorFile: [],
+    [componentDescriptorFile]: [],
   })
 }