redirect if file deleted

libs/designer/src/domains/api/engine.ts

@@ -995,6 +995,7 @@ const createEventHandler = (actions: Actions) => {
       case "ui/canvasMouseUp": {
         return handleCanvasMouseUp(newState, prevState);
       }
+      case "ui/FileNavigatorContextMenuOpened":
       case "ui/FileNavigatorItemClicked": {
         return handleFileNavigatorItemClicked(event.payload);
       }

libs/designer/src/domains/ui/events.ts

@@ -245,6 +245,10 @@ export type FileNavigatorItemClicked = BaseEvent<
   "ui/FileNavigatorItemClicked",
   FSItem
 >;
+export type FileNavigatorContextMenuOpened = BaseEvent<
+  "ui/FileNavigatorContextMenuOpened",
+  FSItem
+>;
 
 export type InsertElementReleased = BaseEvent<"ui/insertElementReleased", Box>;
 
@@ -259,6 +263,7 @@ export type UIEvent =
   | AddLayerMenuItemClicked
   | BoundsChanged
   | CanvasResized
+  | FileNavigatorContextMenuOpened
   | ToolsLayerDrop
   | PromptClosed
   | FileNavigatorItemClicked

libs/designer/src/domains/ui/reducers/canvas.ts

@@ -9,10 +9,14 @@ import {
   getTargetExprId,
   highlightNode,
   InsertMode,
+  newConvertToSlotPrompt,
+  redirect,
   resetCurrentDocument,
 } from "@paperclip-ui/designer/src/state";
 import { centerTransformZoom } from "@paperclip-ui/designer/src/state/geom";
+import { routes } from "@paperclip-ui/designer/src/state/routes";
 import { virtHTML } from "@paperclip-ui/proto-ext/lib/virt/html-utils";
+import { FileChangedKind } from "@paperclip-ui/proto/lib/generated/service/designer";
 import produce from "immer";
 import { clamp, mapValues } from "lodash";
 import {
@@ -60,6 +64,19 @@ export const canvasReducer = (state: DesignerState, event: DesignerEvent) => {
       });
     }
 
+    case "designer-engine/serverEvent": {
+      // If current file is deleted, then direct to blank screen
+      if (event.payload.fileChanged?.kind === FileChangedKind.DELETED) {
+        if (
+          event.payload.fileChanged.path.includes(getCurrentFilePath(state))
+        ) {
+          return redirect(state, routes.editor());
+        }
+      }
+
+      return state;
+    }
+
     case "ui/canvasMouseDown": {
       state = produce(state, (newState) => {
         newState.canvas.mouseDown = true;

libs/designer/src/domains/ui/reducers/left-sidebar.ts

@@ -91,6 +91,7 @@ export const leftSidebarReducer = (
         }
       });
     }
+    case "ui/FileNavigatorContextMenuOpened":
     case "ui/FileNavigatorItemClicked": {
       if (event.payload.kind === FSItemKind.File) {
         state = redirect(

libs/designer/src/state/routes.ts

@@ -1,5 +1,5 @@
 type EditorRedirectInfo = {
-  filePath: string;
+  filePath?: string;
   nodeId?: string;
   declName?: string;
   variantIds?: string[];
@@ -12,15 +12,11 @@ export namespace routes {
     nodeId,
     declName,
     variantIds = [],
-  }: EditorRedirectInfo) => {
-    const query = {
-      file: encodeURIComponent(filePath),
-      nodeId,
-      declName,
-    };
-
+  }: EditorRedirectInfo = {}) => {
     const params = new URLSearchParams();
-    params.set("file", filePath);
+    if (filePath) {
+      params.set("file", filePath);
+    }
     if (nodeId) {
       params.set("nodeId", nodeId);
     }

libs/designer/src/ui/logic/ContextMenu/controller.tsx

@@ -10,18 +10,19 @@ import {
   MenuItemOption,
 } from "../../../modules/shortcuts/base";
 import { Portal } from "../Portal";
-import {  getHistoryStr } from "../../../state";
+import { getHistoryStr } from "../../../state";
 import { prettyKeyCombo } from "../../../domains/ui/state";
 import { ContextMenuDivider, BaseContextMenuProps } from "./context-menu.pc";
 
 export type ContextMenuProps = {
   children: React.ReactElement;
   menu: () => MenuItem<ShortcutCommand>[];
+  onOpen?: () => void;
 };
 
 export const ContextMenu =
   (Base: React.FC<BaseContextMenuProps>) =>
-  ({ children, menu }: ContextMenuProps) => {
+  ({ children, menu, onOpen }: ContextMenuProps) => {
     const otherRef = useRef<HTMLElement>();
     const ref = otherRef;
     const history = useSelector(getHistoryStr);
@@ -38,6 +39,12 @@ export const ContextMenu =
       });
     };
 
+    useEffect(() => {
+      if (anchorStyle) {
+        onOpen?.();
+      }
+    }, [anchorStyle]);
+
     const onTargetKeyDown = (event: React.KeyboardEvent<any>) => {
       if (children.props.onKeyDown) {
         children.props.onKeyDown(event);
@@ -86,7 +93,7 @@ export const ContextMenu =
         })}
         <Portal>
           {anchorStyle && (
-            <Base container={{root:{style: anchorStyle}}}>
+            <Base container={{ root: { style: anchorStyle } }}>
               {menu().map((item) => {
                 if (item.kind === MenuItemKind.Divider) {
                   return <ContextMenuDivider />;
@@ -117,12 +124,12 @@ const ContextMenuOption = ({
   };
   return (
     <styles.ContextMenuItem
-    container={{
-      root: {
-        className: cx({ disabled: enabled === false }),
-        onClick: onSelect
-      }
-    }}
+      container={{
+        root: {
+          className: cx({ disabled: enabled === false }),
+          onClick: onSelect,
+        },
+      }}
       keyCommand={shortcut ? prettyKeyCombo(shortcut) : null}
     >
       {label}

libs/designer/src/ui/logic/Editor/EditorPanels/LeftSidebar/FileNavigator/controller.tsx

@@ -287,6 +287,11 @@ export const FSNavigatorItem = (Base: React.FC<BaseFSItemProps>) =>
       setOpen(!open);
     }, [open, item.path]);
 
+    const onContextMenuOpen = useCallback(() => {
+      dispatch({ type: "ui/FileNavigatorContextMenuOpened", payload: item });
+      setOpen(true);
+    }, [item.path]);
+
     useEffect(() => {
       if (selected) {
         headerRef.current?.scrollIntoView({
@@ -313,7 +318,7 @@ export const FSNavigatorItem = (Base: React.FC<BaseFSItemProps>) =>
     }
 
     return (
-      <ContextMenu menu={() => shortcuts}>
+      <ContextMenu menu={() => shortcuts} onOpen={onContextMenuOpen}>
         <div>
           <Base
             layerHeader={{