Support delete component in editor panel

Author: wwwillchen

mesop/editor/editor_codemod.py

@@ -42,7 +42,7 @@ class DeleteComponentCodemod(VisitorBasedCodemodCommand):
   METADATA_DEPENDENCIES = (PositionProvider,)
 
   def __init__(
-    self, context: CodemodContext, input: pb.EditorNewComponent
+    self, context: CodemodContext, input: pb.EditorDeleteComponent
   ) -> None:
     super().__init__(context)
     self.input = input

mesop/editor/editor_handler.py

@@ -8,6 +8,7 @@
 
 import mesop.protos.ui_pb2 as pb
 from mesop.editor.editor_codemod import (
+  DeleteComponentCodemod,
   NewComponentCodemod,
   UpdateCallsiteCodemod,
 )
@@ -29,6 +30,12 @@ def handle_editor_event(event: pb.EditorEvent):
       NewComponentCodemod(CodemodContext(), event.new_component),
     )
     return
+  if event.HasField("delete_component"):
+    run_codemod(
+      event.delete_component.source_code_location,
+      DeleteComponentCodemod(CodemodContext(), event.delete_component),
+    )
+    return
   raise MesopInternalException("Not yet event implemented event", event)
 
 

mesop/web/src/dev_tools/editor_panel/editor_panel.ng.html

@@ -1,6 +1,13 @@
 @if(hasFocusedComponent()) {
-<div class="component-name">
-  {{getFocusedComponent()?.getType()?.getName() ?? "[root]"}}
+<div class="component-header">
+  <span class="component-name">
+    {{getFocusedComponent()?.getType()?.getName() ?? "[root]"}}
+  </span>
+  <mat-icon
+    class="delete-component"
+    (click)="deleteComponent(getFocusedComponent()!.getSourceCodeLocation()!)"
+    >delete</mat-icon
+  >
 </div>
 <mesop-editor-fields
   [fields]="getFields()"

mesop/web/src/dev_tools/editor_panel/editor_panel.scss

@@ -6,10 +6,16 @@
   height: 100%;
 }
 
+.component-header {
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .component-name {
   font-weight: 500;
   font-size: 16px;
-  padding: 8px;
   text-transform: capitalize;
 }
 

mesop/web/src/dev_tools/editor_panel/editor_panel.ts

@@ -7,16 +7,27 @@ import {
   FieldType,
   ComponentConfig,
   EditorField,
+  EditorEvent,
+  EditorDeleteComponent,
+  SourceCodeLocation,
 } from 'mesop/mesop/protos/ui_jspb_proto_pb/mesop/protos/ui_pb';
 import {MatDividerModule} from '@angular/material/divider';
 import {EditorFields} from './editor_fields/editor_fields';
+import {MatIconModule} from '@angular/material/icon';
+import {Channel} from '../../services/channel';
 
 @Component({
   selector: 'mesop-editor-panel',
   templateUrl: 'editor_panel.ng.html',
   styleUrl: 'editor_panel.css',
   standalone: true,
-  imports: [ObjectTree, EditorFields, MatDividerModule, ComponentTree],
+  imports: [
+    ObjectTree,
+    EditorFields,
+    MatDividerModule,
+    ComponentTree,
+    MatIconModule,
+  ],
 })
 export class EditorPanel {
   @Input()
@@ -28,8 +39,17 @@ export class EditorPanel {
   constructor(
     private logger: Logger,
     private editorService: EditorService,
+    private channel: Channel,
   ) {}
 
+  deleteComponent(location: SourceCodeLocation): void {
+    const editorEvent = new EditorEvent();
+    const deleteComponent = new EditorDeleteComponent();
+    deleteComponent.setSourceCodeLocation(location);
+    editorEvent.setDeleteComponent(deleteComponent);
+    this.channel.dispatchEditorEvent(editorEvent);
+  }
+
   hasFocusedComponent(): boolean {
     return Boolean(this.editorService.getFocusedComponent());
   }