Feature/#590 integrate new file

apps/web/src/pods/toolbar/components/new-button/new-button.component.tsx

@@ -1,16 +1,23 @@
+import { ActionButton } from '@/common/components/action-button';
 import { NewIcon } from '@/common/components/icons/new-icon.component';
+import { SHORTCUTS } from '@/common/shortcut';
 import {
   useCanvasSchemaContext,
   useCanvasViewSettingsContext,
 } from '@/core/providers';
-import { ActionButton } from '@/common/components/action-button';
-import { SHORTCUTS } from '@/common/shortcut';
+import { isVSCodeEnv } from '@/core/vscode/env.helpers';
+import { sendToExtension } from '@/core/vscode/vscode-bridge.helpers';
+import { APP_MESSAGE_TYPE } from '@lemoncode/mongo-modeler-bridge-protocol';
 
 export const NewButton = () => {
   const { createEmptySchema } = useCanvasSchemaContext();
   const { setFilename, setLoadSample } = useCanvasViewSettingsContext();
 
   const handleNewButtonClick = () => {
+    if (isVSCodeEnv()) {
+      sendToExtension({ type: APP_MESSAGE_TYPE.NEW_DIAGRAM });
+      return;
+    }
     setFilename('');
     createEmptySchema();
     setLoadSample(false);

packages/vscode-bridge-protocol/src/constant.ts

@@ -8,4 +8,5 @@ export const APP_MESSAGE_TYPE = {
   READY: 'mm:ready',
   SAVE: 'mm:save',
   WEBVIEW_READY: 'mm:webview-ready',
+  NEW_DIAGRAM: 'mm:new-diagram',
 } as const;

packages/vscode-bridge-protocol/src/model.ts

@@ -19,7 +19,8 @@ export type HostMessage =
 export type AppMessage =
   | { type: typeof APP_MESSAGE_TYPE.READY }
   | { type: typeof APP_MESSAGE_TYPE.WEBVIEW_READY }
-  | { type: typeof APP_MESSAGE_TYPE.SAVE; payload: { content: string } };
+  | { type: typeof APP_MESSAGE_TYPE.SAVE; payload: { content: string } }
+  | { type: typeof APP_MESSAGE_TYPE.NEW_DIAGRAM };
 
 export type PayloadOf<U extends { type: string }, T extends U['type']> =
   Extract<U, { type: T }> extends { payload: infer P } ? P : undefined;

packages/vscode-extension/src/commands/new-diagram/index.ts

@@ -0,0 +1,4 @@
+export * from './new-diagram.command';
+export * from './new-diagram.handler';
+export * from './new-diagram.id';
+

packages/vscode-extension/src/commands/new-diagram/new-diagram.command.ts

@@ -0,0 +1,14 @@
+import * as vscode from 'vscode';
+import { handleNewDiagram } from './new-diagram.handler';
+import { MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID } from './new-diagram.id';
+
+export const registerNewDiagramCommand = (
+  context: vscode.ExtensionContext
+): void => {
+  context.subscriptions.push(
+    vscode.commands.registerCommand(
+      MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID,
+      handleNewDiagram
+    )
+  );
+};

packages/vscode-extension/src/commands/new-diagram.ts → packages/vscode-extension/src/commands/new-diagram/new-diagram.handler.ts

@@ -1,12 +1,12 @@
 import { logError } from '#core';
-import { writeFile } from '#editor';
+import { writeFile } from '#editor/document';
 import * as vscode from 'vscode';
 
 const VIEW_TYPE = 'mongo-modeler.editor';
 const FILE_EXTENSION = 'mml';
 const DEFAULT_FILENAME = `untitled.${FILE_EXTENSION}`;
 
-const DEFAULT_DIAGRAM_CONTENT = JSON.stringify(
+export const DEFAULT_DIAGRAM_CONTENT = JSON.stringify(
   {
     version: '0.1',
     tables: [],
@@ -24,11 +24,12 @@ const getDefaultUri = (): vscode.Uri | undefined => {
   return folder ? vscode.Uri.joinPath(folder.uri, DEFAULT_FILENAME) : undefined;
 };
 
-const createNewDiagram = async (): Promise<void> => {
+export const handleNewDiagram = async (): Promise<void> => {
   const target = await vscode.window.showSaveDialog({
     title: 'New Mongo Modeler diagram',
     defaultUri: getDefaultUri(),
     filters: { 'Mongo Modeler diagram': [FILE_EXTENSION] },
+    saveLabel: 'Create',
   });
   if (!target) return;
 
@@ -42,11 +43,3 @@ const createNewDiagram = async (): Promise<void> => {
     );
   }
 };
-
-export const registerNewDiagramCommand = (
-  context: vscode.ExtensionContext
-): void => {
-  context.subscriptions.push(
-    vscode.commands.registerCommand('mongo-modeler.newDiagram', createNewDiagram)
-  );
-};

packages/vscode-extension/src/commands/new-diagram/new-diagram.id.ts

@@ -0,0 +1 @@
+export const MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID = 'mongo-modeler.newDiagram';

packages/vscode-extension/src/editor/handlers.ts

@@ -1,10 +1,12 @@
-import { basename } from 'node:path';
+import { MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID } from '#commands';
 import {
   APP_MESSAGE_TYPE,
   type AppMessage,
   HOST_MESSAGE_TYPE,
   type HostMessage,
 } from '@lemoncode/mongo-modeler-bridge-protocol';
+import { basename } from 'node:path';
+import * as vscode from 'vscode';
 import { type MongoModelerDocument, writeFile } from './document';
 
 type PostMessageFn = (msg: HostMessage) => void;
@@ -34,5 +36,9 @@ export const handleWebviewMessage = async (
       await writeFile(doc.uri, doc.content);
       postMessage({ type: HOST_MESSAGE_TYPE.SAVED });
       break;
+
+    case APP_MESSAGE_TYPE.NEW_DIAGRAM:
+      await vscode.commands.executeCommand(MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID);
+      break;
   }
 };

packages/vscode-extension/src/index.ts

@@ -1,10 +1,12 @@
 import { registerCommands } from '#commands';
 import { MongoModelerEditorProvider } from '#editor';
+import { registerStatusBarItems } from '#status-bar';
 import * as vscode from 'vscode';
 
 export const activate = (context: vscode.ExtensionContext) => {
   context.subscriptions.push(MongoModelerEditorProvider.register(context));
   registerCommands(context);
+  registerStatusBarItems(context);
 };
 
 export const deactivate = () => {};

packages/vscode-extension/src/status-bar/index.ts

@@ -0,0 +1,2 @@
+export * from './new-diagram';
+export * from './register';

packages/vscode-extension/src/status-bar/new-diagram/index.ts

@@ -0,0 +1 @@
+export * from './new-diagram.status-bar';

packages/vscode-extension/src/status-bar/new-diagram/new-diagram.consts.ts

@@ -0,0 +1,4 @@
+export const STATUS_BAR_PRIORITY = 100;
+export const ITEM_TEXT = '$(database) Mongo Modeler';
+export const ITEM_TOOLTIP = 'Create new Mongo Modeler diagram';
+export const ITEM_COLOR_THEME_TOKEN = 'statusBar.foreground';

packages/vscode-extension/src/status-bar/new-diagram/new-diagram.status-bar.ts

@@ -0,0 +1,24 @@
+import { MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID } from '#commands';
+import * as vscode from 'vscode';
+import {
+  ITEM_COLOR_THEME_TOKEN,
+  ITEM_TEXT,
+  ITEM_TOOLTIP,
+  STATUS_BAR_PRIORITY,
+} from './new-diagram.consts';
+
+export const registerNewDiagramStatusBarItem = (
+  context: vscode.ExtensionContext
+): void => {
+  const item = vscode.window.createStatusBarItem(
+    vscode.StatusBarAlignment.Left,
+    STATUS_BAR_PRIORITY
+  );
+  item.text = ITEM_TEXT;
+  item.tooltip = ITEM_TOOLTIP;
+  item.color = new vscode.ThemeColor(ITEM_COLOR_THEME_TOKEN);
+  item.command = MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID;
+  item.show();
+
+  context.subscriptions.push(item);
+};

packages/vscode-extension/src/status-bar/register.ts

@@ -0,0 +1,12 @@
+import * as vscode from 'vscode';
+import { registerNewDiagramStatusBarItem } from './new-diagram';
+
+/**
+ * Registers all VS Code status bar items exposed by the extension.
+ * @param context The VS Code extension context.
+ */
+export const registerStatusBarItems = (
+  context: vscode.ExtensionContext
+): void => {
+  registerNewDiagramStatusBarItem(context);
+};