Merge pull request #21 from Multiwoven/feat/beautify-sql

feat: beautify sql queries
Multiwoven · Apr 9, 2024 · a9de2a4 · a9de2a4
2 parents f21bf67 + b9009d6
commit a9de2a4
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 11 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -42,6 +42,7 @@
     "react-icons": "^4.12.0",
     "react-router-dom": "^6.21.1",
     "rollup": "^4.9.1",
+    "sql-formatter": "^15.3.0",
     "styled-components": "^6.1.1",
     "yup": "^1.3.3"
   },

diff --git a/ui/src/views/Activate/Syncs/EditSync/EditSync.tsx b/ui/src/views/Activate/Syncs/EditSync/EditSync.tsx
@@ -1,4 +1,4 @@
-import ContentContainer from '@/components/ContentContainer';
+import { Box } from '@chakra-ui/react';
 import { SYNCS_LIST_QUERY_KEY } from '@/views/Activate/Syncs/constants';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
@@ -179,7 +179,7 @@ const EditSync = (): JSX.Element | null => {
 
   return (
     <form onSubmit={formik.handleSubmit} style={{ backgroundColor: 'gray.200' }}>
-      <ContentContainer>
+      <Box width='100%' pt='20px'>
         {isLoading || isConnectorInfoLoading || !syncData ? <Loader /> : null}
         {syncData && destinationFetchResponse?.data ? (
           <React.Fragment>
@@ -228,7 +228,7 @@ const EditSync = (): JSX.Element | null => {
           isContinueCtaRequired
           isBackRequired
         />
-      </ContentContainer>
+      </Box>
     </form>
   );
 };

diff --git a/ui/src/views/Dashboard/Dashboard.tsx b/ui/src/views/Dashboard/Dashboard.tsx
@@ -71,8 +71,8 @@ const Dashboard = (): JSX.Element | null => {
     setReportTime(timePeriod);
   };
 
-  const syncRunTriggeredData = report?.data.sync_run_triggered;
-  const syncRunRowsData = report?.data.total_sync_run_rows;
+  const syncRunTriggeredData = report?.data?.sync_run_triggered;
+  const syncRunRowsData = report?.data?.total_sync_run_rows;
 
   if (isLoading) {
     return <Loader />;

diff --git a/ui/src/views/Models/ModelsForm/DefineModel/DefineSQL/DefineSQL.tsx b/ui/src/views/Models/ModelsForm/DefineModel/DefineSQL/DefineSQL.tsx
@@ -18,6 +18,7 @@ import ContentContainer from '@/components/ContentContainer';
 import SourceFormFooter from '@/views/Connectors/Sources/SourcesForm/SourceFormFooter';
 import { CustomToastStatus } from '@/components/Toast/index';
 import useCustomToast from '@/hooks/useCustomToast';
+import { format } from 'sql-formatter';
 
 const DefineSQL = ({
   hasPrefilledValues = false,
@@ -30,10 +31,10 @@ const DefineSQL = ({
   const [loading, setLoading] = useState(false);
   const [moveForward, canMoveForward] = useState(false);
   const [runQuery, canRunQuery] = useState(prefillValues ? true : false);
+  const [userQuery, setUserQuery] = useState(prefillValues?.query || '');
 
   let connector_id: string = '';
   let connector_icon: JSX.Element = <></>;
-  let user_query: string = '';
 
   if (!hasPrefilledValues) {
     const extracted = extractData(state.forms);
@@ -45,7 +46,6 @@ const DefineSQL = ({
 
     connector_id = prefillValues.connector_id.toString();
     connector_icon = prefillValues.connector_icon;
-    user_query = prefillValues.query;
   }
 
   const showToast = useCustomToast();
@@ -167,6 +167,7 @@ const DefineSQL = ({
                     fontSize='12px'
                     height='32px'
                     paddingX={3}
+                    onClick={() => setUserQuery(format(userQuery))}
                   >
                     <Image src={StarsImage} w={6} mr={2} /> Beautify
                   </Button>
@@ -179,12 +180,13 @@ const DefineSQL = ({
                   language='mysql'
                   defaultLanguage='mysql'
                   defaultValue='Enter your query...'
-                  value={user_query}
+                  value={userQuery}
                   saveViewState={true}
                   onMount={handleEditorDidMount}
-                  onChange={() => {
+                  onChange={(query) => {
                     canMoveForward(false);
                     canRunQuery(true);
+                    setUserQuery(query as string);
                   }}
                   theme='light'
                   options={{