Database tree objects DDL formatting

pgmanage/app/static/pgmanage_frontend/src/components/DataEditorTab.vue

@@ -54,7 +54,7 @@ import isNil from 'lodash/isNil';
 import isEmpty from 'lodash/isEmpty';
 import last from 'lodash/last';
 import { showToast } from "../notification_control";
-import { queryRequestCodes, requestState } from '../constants'
+import { queryRequestCodes, requestState, knexDialectMap } from '../constants'
 import { createRequest } from '../long_polling'
 import { TabulatorFull as Tabulator} from 'tabulator-tables'
 import { emitter } from '../emitter';
@@ -144,7 +144,8 @@ export default {
     }
   },
   mounted() {
-    this.dialectData = dialects[this.dialect];
+    let mappedDialect = knexDialectMap[this.dialect] || this.dialect;
+    this.dialectData = dialects[mappedDialect];
     this.handleResize()
     let table = new Tabulator(this.$refs.tabulator, {
       placeholder: "No Data Available",
@@ -176,7 +177,7 @@ export default {
     table.on("tableBuilt", () => {
       this.tabulator = markRaw(table); // markRaw fixes problem with making tabulator proxy, that we don't need
       this.tabulator.on("cellEdited", this.cellEdited);
-      this.knex = Knex({ client: this.dialect || 'postgres'})
+      this.knex = Knex({ client: mappedDialect || 'postgres'})
       this.getTableColumns().then(() => {
         this.addHeaderMenuOverlayElement();
         this.tabulator.setSort("0", "asc");

pgmanage/app/static/pgmanage_frontend/src/components/PreviewBox.vue

@@ -16,6 +16,8 @@
 <script>
 import { editorModeMap } from "../constants";
 import { settingsStore, tabsStore } from "../stores/stores_initializer";
+import { format } from "sql-formatter";
+
 export default {
   props: {
     label: {
@@ -37,6 +39,17 @@ export default {
     return {
       isCopyButtonClicked: false,
       isEmpty: true,
+      formatOptions: {
+        tabWidth: 2,
+        keywordCase: "upper",
+        //sql-formatter uses 'plsql' for oracle sql flavor
+        // otherwise - our db technology names match perfectly
+        language:
+          this.databaseTechnology === "oracle"
+            ? "plsql"
+            : this.databaseTechnology,
+        linesBetweenQueries: 1,
+      },
     };
   },
   mounted() {
@@ -45,6 +58,9 @@ export default {
   watch: {
     editorText(newValue, oldValue) {
       this.isEmpty = !newValue;
+      if (!!newValue) {
+        newValue = format(newValue, this.formatOptions);
+      }
       this.editor.setValue(newValue);
       this.editor.clearSelection();
       this.isCopyButtonClicked = false;

pgmanage/app/static/pgmanage_frontend/src/components/SchemaEditorTab.vue

@@ -65,7 +65,7 @@
           :columns="columnNames"
           :db-meta-data="dbMetadata"
           :disabled-features="disabledFeatures"
-          :has-schema="dialect === 'postgres'"
+          :has-schema="dialect === 'postgresql'"
           @foreign-keys:changed="changeForeignKeys"
           />
         </div>
@@ -130,7 +130,7 @@ import { useVuelidate } from '@vuelidate/core'
 import ColumnList from './SchemaEditorColumnList.vue'
 import dialects from './dialect-data'
 import { createRequest } from '../long_polling'
-import { queryRequestCodes, operationModes } from '../constants'
+import { queryRequestCodes, operationModes, knexDialectMap } from '../constants'
 import axios from 'axios'
 import { showToast } from '../notification_control'
 import { dbMetadataStore, tabsStore } from '../stores/stores_initializer'
@@ -206,11 +206,12 @@ export default {
     this.operationModes = operationModes
   },
   mounted() {
+    let mappedDialect = knexDialectMap[this.dialect] || this.dialect;
     // the "client" parameter is a bit misleading here,
     // we do not connect to any db from Knex, just setting
     // the correct SQL dialect with this option
-    this.knex = Knex({ client: this.dialect })
-    this.loadDialectData(this.dialect)
+    this.knex = Knex({ client: mappedDialect })
+    this.loadDialectData(mappedDialect)
     if(this.$props.mode === operationModes.UPDATE) {
       this.loadTableDefinition().then(() => {
         this.loadIndexes();

pgmanage/app/static/pgmanage_frontend/src/constants.js

@@ -122,6 +122,13 @@ const dbTechNames = {
   mssql: 'SQL Server'
 }
 
+const knexDialectMap = {
+  oracle: "oracledb",
+  mariadb: "mysql",
+  postgresql: "postgres",
+  sqlite: "sqlite3",
+};
+
 export {
   requestState,
   tabStatusMap,
@@ -139,4 +146,5 @@ export {
   editorModeMap,
   dataEditorFilterModes,
   dbTechNames,
+  knexDialectMap,
 };

pgmanage/app/static/pgmanage_frontend/src/stores/tabs.js

@@ -634,15 +634,7 @@ const useTabsStore = defineStore("tabs", {
         },
       });
 
-      const DIALECT_MAP = {
-        oracle: "oracledb",
-        mariadb: "mysql",
-        postgresql: "postgres",
-      };
-      let dialect = this.selectedPrimaryTab.metaData.selectedDBMS;
-      let mappedDialect = DIALECT_MAP[dialect] || dialect;
-
-      tab.metaData.dialect = mappedDialect;
+      tab.metaData.dialect = this.selectedPrimaryTab.metaData.selectedDBMS;
       tab.metaData.table = table;
       tab.metaData.schema = schema;
       tab.metaData.query_filter = ""; //to be used in the future for passing extra filters when tab is opened
@@ -677,7 +669,7 @@ const useTabsStore = defineStore("tabs", {
         },
       });
 
-      tab.metaData.dialect = dialect || "postgres";
+      tab.metaData.dialect = this.selectedPrimaryTab.metaData.selectedDBMS;
       tab.metaData.editMode = mode;
       tab.metaData.schema =
         dialect === "mysql" ? node.data.database : node.data.schema;