fix: auto-enter edit mode when creating new tables from canvas (#943)

* fix: auto-enter edit mode when creating new tables from canvas or sidebar

* fix

* fix

---------

Co-authored-by: Guy Ben-Aharon <baguy3@gmail.com>

src/context/chartdb-context/chartdb-provider.tsx

@@ -350,6 +350,7 @@ export const ChartDBProvider: React.FC<
                 isView: false,
                 order: tables.length,
                 ...attributes,
+                schema: attributes?.schema ?? defaultSchemas[databaseType],
             };
 
             table.indexes = getTableIndexesWithPrimaryKey({

src/lib/data/data-types/postgres-data-types.ts

@@ -12,6 +12,7 @@ export const postgresDataTypes: readonly DataTypeData[] = [
     { name: 'text', id: 'text', usageLevel: 1 },
     { name: 'boolean', id: 'boolean', usageLevel: 1 },
     { name: 'timestamp', id: 'timestamp', usageLevel: 1 },
+    { name: 'timestamptz', id: 'timestamptz', usageLevel: 1 },
     { name: 'date', id: 'date', usageLevel: 1 },
 
     // Level 2 - Second most common types
@@ -42,6 +43,7 @@ export const postgresDataTypes: readonly DataTypeData[] = [
         id: 'timestamp_with_time_zone',
         usageLevel: 2,
     },
+    { name: 'int', id: 'int', usageLevel: 2 },
 
     // Less common types
     {

src/pages/editor-page/canvas/canvas-context-menu.tsx

@@ -13,6 +13,8 @@ import { useTranslation } from 'react-i18next';
 import { Table, Workflow, Group, View } from 'lucide-react';
 import { useDiagramFilter } from '@/context/diagram-filter-context/use-diagram-filter';
 import { useLocalConfig } from '@/hooks/use-local-config';
+import { useCanvas } from '@/hooks/use-canvas';
+import type { DBTable } from '@/lib/domain';
 
 export const CanvasContextMenu: React.FC<React.PropsWithChildren> = ({
     children,
@@ -23,24 +25,28 @@ export const CanvasContextMenu: React.FC<React.PropsWithChildren> = ({
     const { screenToFlowPosition } = useReactFlow();
     const { t } = useTranslation();
     const { showDBViews } = useLocalConfig();
+    const { setEditTableModeTable } = useCanvas();
 
     const { isMd: isDesktop } = useBreakpoint('md');
 
     const createTableHandler = useCallback(
-        (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        async (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
             const position = screenToFlowPosition({
                 x: event.clientX,
                 y: event.clientY,
             });
 
+            let newTable: DBTable | null = null;
+
             if (schemasDisplayed.length > 1) {
                 openTableSchemaDialog({
-                    onConfirm: ({ schema }) =>
-                        createTable({
+                    onConfirm: async ({ schema }) => {
+                        newTable = await createTable({
                             x: position.x,
                             y: position.y,
                             schema: schema.name,
-                        }),
+                        });
+                    },
                     schemas: schemasDisplayed,
                 });
             } else {
@@ -48,37 +54,45 @@ export const CanvasContextMenu: React.FC<React.PropsWithChildren> = ({
                     schemasDisplayed?.length === 1
                         ? schemasDisplayed[0]?.name
                         : undefined;
-                createTable({
+                newTable = await createTable({
                     x: position.x,
                     y: position.y,
                     schema,
                 });
             }
+
+            if (newTable) {
+                setEditTableModeTable({ tableId: newTable.id });
+            }
         },
         [
             createTable,
             screenToFlowPosition,
             openTableSchemaDialog,
             schemasDisplayed,
+            setEditTableModeTable,
         ]
     );
 
     const createViewHandler = useCallback(
-        (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        async (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
             const position = screenToFlowPosition({
                 x: event.clientX,
                 y: event.clientY,
             });
 
+            let newView: DBTable | null = null;
+
             if (schemasDisplayed.length > 1) {
                 openTableSchemaDialog({
-                    onConfirm: ({ schema }) =>
-                        createTable({
+                    onConfirm: async ({ schema }) => {
+                        newView = await createTable({
                             x: position.x,
                             y: position.y,
                             schema: schema.name,
                             isView: true,
-                        }),
+                        });
+                    },
                     schemas: schemasDisplayed,
                 });
             } else {
@@ -86,19 +100,24 @@ export const CanvasContextMenu: React.FC<React.PropsWithChildren> = ({
                     schemasDisplayed?.length === 1
                         ? schemasDisplayed[0]?.name
                         : undefined;
-                createTable({
+                newView = await createTable({
                     x: position.x,
                     y: position.y,
                     schema,
                     isView: true,
                 });
             }
+
+            if (newView) {
+                setEditTableModeTable({ tableId: newView.id });
+            }
         },
         [
             createTable,
             screenToFlowPosition,
             openTableSchemaDialog,
             schemasDisplayed,
+            setEditTableModeTable,
         ]
     );