sql code formatter

packages/web/src/query/QueryToolbar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ToolbarButton from '../widgets/ToolbarButton';
 
-export default function QueryToolbar({ execute, cancel, isDatabaseDefined, busy, save }) {
+export default function QueryToolbar({ execute, cancel, isDatabaseDefined, busy, save, format }) {
   return (
     <>
       <ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="fas fa-play">
@@ -13,6 +13,9 @@ export default function QueryToolbar({ execute, cancel, isDatabaseDefined, busy,
       <ToolbarButton onClick={save} icon="fas fa-save">
         Save
       </ToolbarButton>
+      <ToolbarButton onClick={format} icon="fas fa-code">
+        Format
+      </ToolbarButton>
     </>
   );
 }

packages/web/src/tabs/QueryTab.js

@@ -15,6 +15,7 @@ import { changeTab } from '../utility/common';
 import useSocket from '../utility/SocketProvider';
 import SaveSqlFileModal from '../modals/SaveSqlFileModal';
 import useModalState from '../modals/useModalState';
+import sqlFormatter from 'sql-formatter';
 
 export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPortalRef, initialScript, storageKey }) {
   const localStorageKey = storageKey || `sql_${tabid}`;
@@ -121,6 +122,11 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
     }
   };
 
+  const handleFormatCode = () => {
+    editorRef.current.editor.setValue(sqlFormatter.format(editorRef.current.editor.getValue()));
+    editorRef.current.editor.clearSelection();
+  };
+
   return (
     <>
       <VerticalSplitter>
@@ -151,6 +157,7 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
             execute={handleExecute}
             busy={busy}
             cancel={handleCancel}
+            format={handleFormatCode}
             save={saveSqlFileModalState.open}
           />,
           toolbarPortalRef.current