query designer context menu

packages/web/src/appobj/DatabaseObjectAppObject.js

@@ -11,6 +11,7 @@ import useShowModal from '../modals/showModal';
 import { findEngineDriver } from 'dbgate-tools';
 import useExtensions from '../utility/useExtensions';
 import useOpenNewTab from '../utility/useOpenNewTab';
+import uuidv1 from 'uuid/v1';
 
 const icons = {
   tables: 'img table',
@@ -45,6 +46,10 @@ const menus = {
       label: 'Open active chart',
       isActiveChart: true,
     },
+    {
+      label: 'Query designer',
+      isQueryDesigner: true,
+    },
   ],
   views: [
     {
@@ -75,6 +80,10 @@ const menus = {
       label: 'Open active chart',
       isActiveChart: true,
     },
+    {
+      label: 'Query designer',
+      isQueryDesigner: true,
+    },
   ],
   procedures: [
     {
@@ -199,6 +208,30 @@ function Menu({ data }) {
                   },
                 }
               );
+            } else if (menu.isQueryDesigner) {
+              openNewTab(
+                {
+                  title: data.pureName,
+                  icon: 'img query-design',
+                  tabComponent: 'QueryDesignTab',
+                  props: {
+                    conid: data.conid,
+                    database: data.database,
+                  },
+                },
+                {
+                  editor: {
+                    tables: [
+                      {
+                        ...data,
+                        designerId: uuidv1(),
+                        left: 50,
+                        top: 50,
+                      },
+                    ],
+                  },
+                }
+              );
             } else {
               openDatabaseObjectDetail(openNewTab, menu.tab, menu.sqlTemplate, data);
             }