feat(frontend): introduce mysql as a script language (windmill-labs#982)

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

* feat(frontend): introduce mysql as a script language

.gitignore

@@ -4,3 +4,4 @@ nohup.out
 local/
 frontend/src/routes/test.svelte
 CaddyfileRemoteMalo
+*.swp

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

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))
 }

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>

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>
 

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>

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
       }