From e089109b50bd014c7a4f0fd7f60c53e8be63fb95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ko=C5=82odziejczak?=
 <31549762+mrl5@users.noreply.github.com>
Date: Sun, 4 Dec 2022 19:56:51 +0100
Subject: [PATCH] feat(frontend): introduce mysql as a script language (#982)

* fix(deno-client): export mysql from mod.ts + improve robustness

* feat(frontend): introduce mysql as a script language
---
 .gitignore                                    |  1 +
 deno-client/mod.ts                            |  1 +
 deno-client/mysql.ts                          |  5 ++++-
 .../src/lib/components/ScriptBuilder.svelte   | 13 +++++++++++
 .../common/languageIcons/LanguageIcon.svelte  |  8 ++++---
 .../flows/content/FlowInputs.svelte           |  7 ++++++
 frontend/src/lib/script_helpers.ts            | 22 ++++++++++++++++++-
 7 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index b3e6edad4a..482f2643b5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ nohup.out
 local/
 frontend/src/routes/test.svelte
 CaddyfileRemoteMalo
+*.swp
diff --git a/deno-client/mod.ts b/deno-client/mod.ts
index 175eae591f..6181779279 100644
--- a/deno-client/mod.ts
+++ b/deno-client/mod.ts
@@ -8,6 +8,7 @@ export {
 } from './windmill-api/index.ts'
 
 export { pgSql, pgClient } from './pg.ts'
+export { mySql, mysqlClient } from './mysql.ts'
 
 export type Sql = string
 export type Email = string
diff --git a/deno-client/mysql.ts b/deno-client/mysql.ts
index b27ac99dd3..ae00092f8a 100644
--- a/deno-client/mysql.ts
+++ b/deno-client/mysql.ts
@@ -66,6 +66,9 @@ function getQueryAdapter(template: TemplateStringsArray, args: unknown[]) {
     return [text, args];
 }
 
-function getRowsAdapter(rows: object[]) {
+function getRowsAdapter(rows: object[] | object) {
+    if (!Array.isArray(rows)) {
+        return rows;
+    }
     return rows.map((r) => Object.values(r))
 }
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 0821e7c739..a855981665 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -224,6 +224,19 @@
 					>
 						<LanguageIcon lang="pgsql" /><span class="ml-2">PostgreSQL</span>
 					</Button>
+					<Button
+						size="sm"
+						variant="border"
+						color={template == 'mysql' ? 'blue' : 'dark'}
+						btnClasses={template == 'mysql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+						on:click={() => {
+							script.language = Script.language.DENO
+							template = 'mysql'
+							initContent(script.language, script.kind, template)
+						}}
+					>
+						<LanguageIcon lang="mysql" /><span class="ml-2">MySQL</span>
+					</Button>
 				</div>
 				<h2 class="border-b pb-1 mt-4">Advanced</h2>
 				<div>
diff --git a/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte b/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
index 0515fdf212..3880cc092f 100644
--- a/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
+++ b/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
@@ -1,19 +1,21 @@
 <script lang="ts">
 	import type { SupportedLanguage } from '$lib/common'
+	import MySQLIcon from '$lib/components/icons/Mysql.svelte'
 	import PostgresIcon from '$lib/components/icons/PostgresIcon.svelte'
 	import type { SvelteComponent } from 'svelte'
 	import { BashIcon, GoIcon, PythonIcon, TypeScriptIcon } from './'
 
-	export let lang: SupportedLanguage | 'pgsql'
+	export let lang: SupportedLanguage | 'pgsql' | 'mysql'
 	export let width = 30
 	export let height = 30
 	export let scale = 1
-	const langToComponent: Record<SupportedLanguage | 'pgsql', typeof SvelteComponent> = {
+	const langToComponent: Record<SupportedLanguage | 'pgsql' | 'mysql', typeof SvelteComponent> = {
 		go: GoIcon,
 		python3: PythonIcon,
 		deno: TypeScriptIcon,
 		bash: BashIcon,
-		pgsql: PostgresIcon
+		pgsql: PostgresIcon,
+		mysql: MySQLIcon
 	}
 </script>
 
diff --git a/frontend/src/lib/components/flows/content/FlowInputs.svelte b/frontend/src/lib/components/flows/content/FlowInputs.svelte
index 50c0935ae8..84a07a51b2 100644
--- a/frontend/src/lib/components/flows/content/FlowInputs.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputs.svelte
@@ -118,6 +118,13 @@
 						on:click={() =>
 							dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
 					/>
+
+					<FlowScriptPicker
+						label={`MySQL`}
+						lang="mysql"
+						on:click={() =>
+							dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'mysql' })}
+					/>
 				{/if}
 			{/if}
 		</div>
diff --git a/frontend/src/lib/script_helpers.ts b/frontend/src/lib/script_helpers.ts
index 41d74b7466..3984260288 100644
--- a/frontend/src/lib/script_helpers.ts
+++ b/frontend/src/lib/script_helpers.ts
@@ -148,6 +148,23 @@ export async function main(
   return query.rows;
 }`
 
+export const MYSQL_INIT_CODE = `import {
+  mySql
+  type Resource,
+} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts";
+
+// MySQL parameterized statement. No SQL injection is possible.
+export async function main(
+  db: Resource<"mysql">,
+  key: number,
+  value: string,
+) {
+  const query = await mySql(
+    db
+  )\`INSERT INTO demo VALUES (\${key}, \${value})\`;
+  return query.rows;
+}`;
+
 export const BASH_INIT_CODE = `
 # arguments of the form X="$I" are parsed as parameters X of type string
 msg="$1"
@@ -235,7 +252,7 @@ export function isInitialCode(content: string): boolean {
   return false
 }
 
-export function initialCode(language: 'deno' | 'python3' | 'go' | 'bash', kind: Script.kind, subkind: 'pgsql' | 'flow' | 'script' | undefined): string {
+export function initialCode(language: 'deno' | 'python3' | 'go' | 'bash', kind: Script.kind, subkind: 'pgsql' | 'mysql' | 'flow' | 'script' | undefined): string {
   if (language === 'deno') {
     if (kind === 'trigger') {
       return DENO_INIT_CODE_TRIGGER
@@ -245,6 +262,9 @@ export function initialCode(language: 'deno' | 'python3' | 'go' | 'bash', kind:
       }
       else if (subkind === 'pgsql') {
         return POSTGRES_INIT_CODE
+      }
+      else if (subkind === 'mysql') {
+        return MYSQL_INIT_CODE
       } else {
         return DENO_INIT_CODE
       }