From b9009d636103ee4660e751b7078727e8c1e5afa2 Mon Sep 17 00:00:00 2001 From: sumitd94 Date: Mon, 8 Apr 2024 18:08:05 +0530 Subject: [PATCH] feat: beautify sql queries --- ui/package-lock.json | 89 ++++++++++++++++++- ui/package.json | 1 + .../Activate/Syncs/EditSync/EditSync.tsx | 6 +- ui/src/views/Dashboard/Dashboard.tsx | 4 +- .../DefineModel/DefineSQL/DefineSQL.tsx | 10 ++- 5 files changed, 99 insertions(+), 11 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index 2ee6c214..83dfd0d3 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -36,6 +36,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" }, @@ -6137,8 +6138,7 @@ "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" }, "node_modules/aria-hidden": { "version": "1.2.3", @@ -7773,6 +7773,11 @@ "node": ">=8" } }, + "node_modules/discontinuous-range": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz", + "integrity": "sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==" + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -9083,6 +9088,17 @@ "node": ">=8.0.0" } }, + "node_modules/get-stdin": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz", + "integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/get-stream": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", @@ -12527,6 +12543,11 @@ "integrity": "sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==", "peer": true }, + "node_modules/moo": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz", + "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==" + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -12555,6 +12576,32 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "node_modules/nearley": { + "version": "2.20.1", + "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz", + "integrity": "sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==", + "dependencies": { + "commander": "^2.19.0", + "moo": "^0.5.0", + "railroad-diagrams": "^1.0.0", + "randexp": "0.4.6" + }, + "bin": { + "nearley-railroad": "bin/nearley-railroad.js", + "nearley-test": "bin/nearley-test.js", + "nearley-unparse": "bin/nearley-unparse.js", + "nearleyc": "bin/nearleyc.js" + }, + "funding": { + "type": "individual", + "url": "https://nearley.js.org/#give-to-nearley" + } + }, + "node_modules/nearley/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + }, "node_modules/nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -13366,6 +13413,23 @@ } ] }, + "node_modules/railroad-diagrams": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz", + "integrity": "sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==" + }, + "node_modules/randexp": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz", + "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==", + "dependencies": { + "discontinuous-range": "1.0.0", + "ret": "~0.1.10" + }, + "engines": { + "node": ">=0.12" + } + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -13855,6 +13919,14 @@ "node": ">=8" } }, + "node_modules/ret": { + "version": "0.1.15", + "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz", + "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==", + "engines": { + "node": ">=0.12" + } + }, "node_modules/reusify": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", @@ -14272,6 +14344,19 @@ "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", "dev": true }, + "node_modules/sql-formatter": { + "version": "15.3.0", + "resolved": "https://registry.npmjs.org/sql-formatter/-/sql-formatter-15.3.0.tgz", + "integrity": "sha512-1aDYVEX+dwOSCkRYns4HEGupRZoaivcsNpU4IzR+MVC+cWFYK9/dce7pr4aId4+ED2iK9PNs3j1Vdf8C+SIvDg==", + "dependencies": { + "argparse": "^2.0.1", + "get-stdin": "=8.0.0", + "nearley": "^2.20.1" + }, + "bin": { + "sql-formatter": "bin/sql-formatter-cli.cjs" + } + }, "node_modules/sshpk": { "version": "1.18.0", "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz", diff --git a/ui/package.json b/ui/package.json index 1a908cfa..64934d53 100644 --- 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 index 0d881769..bea72d07 100644 --- 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 (
- + {isLoading || isConnectorInfoLoading || !syncData ? : null} {syncData && destinationFetchResponse?.data ? ( @@ -228,7 +228,7 @@ const EditSync = (): JSX.Element | null => { isContinueCtaRequired isBackRequired /> - +
); }; diff --git a/ui/src/views/Dashboard/Dashboard.tsx b/ui/src/views/Dashboard/Dashboard.tsx index 30842909..264015b1 100644 --- 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 ; diff --git a/ui/src/views/Models/ModelsForm/DefineModel/DefineSQL/DefineSQL.tsx b/ui/src/views/Models/ModelsForm/DefineModel/DefineSQL/DefineSQL.tsx index 59e2e5d6..1e131fad 100644 --- 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))} > Beautify @@ -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={{