sql object tab

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -60,6 +60,7 @@
     isExport?: boolean;
     isImport?: boolean;
     isActiveChart?: boolean;
+    isShowSql?: boolean;
     scriptTemplate?: string;
     sqlGeneratorProps?: any;
     isDropCollection?: boolean;
@@ -152,6 +153,10 @@
           {
             divider: true,
           },
+          {
+            isShowSql: true,
+            label: 'Show SQL',
+          },
           createScriptTemplatesSubmenu('tables'),
           {
             label: 'SQL Generator: CREATE TABLE',
@@ -222,6 +227,10 @@
           {
             divider: true,
           },
+          {
+            isShowSql: true,
+            label: 'Show SQL',
+          },
           createScriptTemplatesSubmenu('views'),
           {
             label: 'SQL Generator: CREATE VIEW',
@@ -276,6 +285,10 @@
           {
             divider: true,
           },
+          {
+            isShowSql: true,
+            label: 'Show SQL',
+          },
           createScriptTemplatesSubmenu('matviews'),
           {
             label: 'SQL Generator: CREATE MATERIALIZED VIEW',
@@ -310,6 +323,10 @@
             isRename: true,
             requiresWriteAccess: true,
           },
+          {
+            isShowSql: true,
+            label: 'Show SQL',
+          },
           createScriptTemplatesSubmenu('procedures'),
           {
             label: 'SQL Generator: CREATE PROCEDURE',
@@ -336,6 +353,10 @@
             isRename: true,
             requiresWriteAccess: true,
           },
+          {
+            isShowSql: true,
+            label: 'Show SQL',
+          },
           createScriptTemplatesSubmenu('functions'),
           {
             label: 'SQL Generator: CREATE FUNCTION',
@@ -611,6 +632,18 @@
       //     fixedTargetPureName: data.pureName,
       //   },
       // });
+    } else if (menu.isShowSql) {
+      openNewTab({
+        title: data.pureName,
+        icon: 'img sql-file',
+        tabComponent: 'SqlObjectTab',
+        tabPreviewMode: true,
+        props: {
+          appObjectData: data,
+          conid: data.conid,
+          database: data.database,
+        },
+      });
     } else {
       openDatabaseObjectDetail(
         menu.tab,

packages/web/src/tabs/SqlObjectTab.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" context="module">
+  const getCurrentEditor = () => getActiveComponent('SqlObjectTab');
+
+  registerCommand({
+    id: 'sqlObject.find',
+    category: 'SQL Object',
+    name: 'Find',
+    keyText: 'CtrlOrCommand+F',
+    testEnabled: () => getCurrentEditor() != null,
+    onClick: () => getCurrentEditor().find(),
+  });
+</script>
+
+<script lang="ts">
+  import { getContext } from 'svelte';
+
+  import AceEditor from '../query/AceEditor.svelte';
+  import invalidateCommands from '../commands/invalidateCommands';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+  import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
+  import { useConnectionInfo } from '../utility/metadataLoaders';
+  import { extensions } from '../stores';
+  import { findEngineDriver } from 'dbgate-tools';
+  import registerCommand from '../commands/registerCommand';
+  import applyScriptTemplate, { getSupportedScriptTemplates } from '../utility/applyScriptTemplate';
+  import LoadingInfo from '../elements/LoadingInfo.svelte';
+
+  export let tabid;
+  export let appObjectData;
+
+  let scriptTemplate = getSupportedScriptTemplates(appObjectData.objectTypeField)?.[0]?.scriptTemplate;
+
+  $: connection = useConnectionInfo({ conid: appObjectData.conid });
+  $: driver = findEngineDriver($connection, $extensions);
+
+  const tabVisible: any = getContext('tabVisible');
+
+  export const activator = createActivator('SqlObjectTab', false);
+
+  let domEditor;
+  let domToolStrip;
+
+  $: if ($tabVisible && domEditor) {
+    domEditor?.getEditor()?.focus();
+  }
+
+  export function find() {
+    domEditor.getEditor().execCommand('find');
+  }
+
+  function createMenu() {
+    return [{ command: 'sqlObject.find' }];
+  }
+</script>
+
+{#await applyScriptTemplate(scriptTemplate, $extensions, appObjectData)}
+  <LoadingInfo message="Loading script..." />
+{:then sql}
+  <AceEditor
+    value={sql || ''}
+    menu={createMenu()}
+    on:focus={() => {
+      activator.activate();
+      domToolStrip?.activate();
+      invalidateCommands();
+    }}
+    bind:this={domEditor}
+    mode={driver?.editorMode || 'sql'}
+  />
+{/await}

packages/web/src/tabs/index.js

@@ -28,6 +28,7 @@ import * as ServerSummaryTab from './ServerSummaryTab.svelte';
 import * as ProfilerTab from './ProfilerTab.svelte';
 import * as DataDuplicatorTab from './DataDuplicatorTab.svelte';
 import * as ImportExportTab from './ImportExportTab.svelte';
+import * as SqlObjectTab from './SqlObjectTab.svelte';
 
 import protabs from './index-pro';
 
@@ -62,5 +63,6 @@ export default {
   ProfilerTab,
   DataDuplicatorTab,
   ImportExportTab,
+  SqlObjectTab,
   ...protabs,
 };