From 7ee2d2c02e480fa508acbe8d6ad202c2caafc08e Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 22 May 2023 17:50:30 +0200
Subject: [PATCH] feat: docker as a new supported language

---
 docker-compose.yml                            |  2 +
 .../src/lib/components/ScriptBuilder.svelte   | 38 ++++++++++++++++++-
 .../common/languageIcons/LanguageIcon.svelte  |  8 ++--
 .../flows/content/FlowInputs.svelte           | 36 +++++++++++++++---
 .../flows/pickers/FlowScriptPicker.svelte     | 10 ++++-
 .../lib/components/icons/DockerIcon.svelte    | 23 +++++++++++
 frontend/src/lib/script_helpers.ts            | 16 +++++++-
 7 files changed, 119 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/lib/components/icons/DockerIcon.svelte

diff --git a/docker-compose.yml b/docker-compose.yml
index 87f80bf559..c83b5b060b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -60,6 +60,8 @@ services:
     # to mount the worker folder to debug,, KEEP_JOB_DIR=true and mount /tmp/windmill
     volumes:
       - worker_dependency_cache:/tmp/windmill/cache
+      # mount the docker socket to allow to run docker containers from within the workers
+      # - /var/run/docker.sock:/var/run/docker.sock
 
   lsp:
     image: ghcr.io/windmill-labs/windmill-lsp:latest
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 433d7e693a..87f344daf5 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -27,10 +27,11 @@
 	} from '$lib/consts'
 	import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import { sendUserToast } from '$lib/toast'
+	import { isCloudHosted } from '$lib/cloud'
 
 	export let script: NewScript
 	export let initialPath: string = ''
-	export let template: 'pgsql' | 'mysql' | 'script' = 'script'
+	export let template: 'pgsql' | 'mysql' | 'script' | 'docker' = 'script'
 	export let initialArgs: Record<string, any> = {}
 	export let lockedLanguage = false
 	export let topHash: string | undefined = undefined
@@ -108,7 +109,7 @@
 	function initContent(
 		language: 'deno' | 'python3' | 'go' | 'bash',
 		kind: Script.kind | undefined,
-		template: 'pgsql' | 'mysql' | 'script'
+		template: 'pgsql' | 'mysql' | 'script' | 'docker'
 	) {
 		script.content = initialCode(language, kind, template)
 		scriptEditor?.inferSchema(script.content, language)
@@ -308,6 +309,39 @@
 						<LanguageIcon lang="pgsql" /><span class="ml-2 py-2">PostgreSQL</span>
 					</Button>
 				{/if}
+				<Button
+					size="sm"
+					variant="border"
+					color={template == 'docker' ? 'blue' : 'dark'}
+					btnClasses={template == 'docker' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+					disabled={lockedLanguage}
+					on:click={() => {
+						if (isCloudHosted()) {
+							sendUserToast(
+								'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
+								true,
+								[
+									{
+										label: 'Learn more',
+										callback: () => {
+											window.open('https://docs.windmill.dev/docs/advanced/docker', '_blank')
+										}
+									}
+								]
+							)
+							return
+						}
+						let lastTemplate = template
+						template = 'docker'
+						initContent(Script.language.BASH, script.kind, template)
+						script.language = Script.language.BASH
+						if (lastTemplate != template) {
+							setCode(script.content)
+						}
+					}}
+				>
+					<LanguageIcon lang="docker" /><span class="ml-2 py-2">Docker</span>
+				</Button>
 				<!-- <Button
 					size="sm"
 					variant="border"
diff --git a/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte b/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
index 23e7456a21..94c53f193d 100644
--- a/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
+++ b/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
@@ -6,14 +6,15 @@
 	import { BashIcon, GoIcon, PythonIcon, TypeScriptIcon } from './'
 	import JavaScript from './JavaScript.svelte'
 	import FetchIcon from './FetchIcon.svelte'
+	import DockerIcon from '$lib/components/icons/DockerIcon.svelte'
 
-	export let lang: SupportedLanguage | 'pgsql' | 'mysql' | 'javascript' | 'fetch'
+	export let lang: SupportedLanguage | 'pgsql' | 'mysql' | 'javascript' | 'fetch' | 'docker'
 	export let width = 30
 	export let height = 30
 	export let scale = 1
 
 	const langToComponent: Record<
-		SupportedLanguage | 'pgsql' | 'mysql' | 'javascript' | 'fetch',
+		SupportedLanguage | 'pgsql' | 'mysql' | 'javascript' | 'fetch' | 'docker',
 		typeof SvelteComponent
 	> = {
 		go: GoIcon,
@@ -23,7 +24,8 @@
 		pgsql: PostgresIcon,
 		mysql: MySQLIcon,
 		javascript: JavaScript,
-		fetch: FetchIcon
+		fetch: FetchIcon,
+		docker: DockerIcon
 	}
 </script>
 
diff --git a/frontend/src/lib/components/flows/content/FlowInputs.svelte b/frontend/src/lib/components/flows/content/FlowInputs.svelte
index 644ced9856..8367b4ea45 100644
--- a/frontend/src/lib/components/flows/content/FlowInputs.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputs.svelte
@@ -9,6 +9,8 @@
 	import FlowScriptPicker from '../pickers/FlowScriptPicker.svelte'
 	import PickHubScript from '../pickers/PickHubScript.svelte'
 	import WorkspaceScriptPicker from '../pickers/WorkspaceScriptPicker.svelte'
+	import { isCloudHosted } from '$lib/cloud'
+	import { sendUserToast } from '$lib/toast'
 
 	export let failureModule: boolean
 	export let shouldDisableTriggerScripts: boolean = false
@@ -48,7 +50,9 @@
 								size="sm"
 								startIcon={{ icon: faBolt }}
 							>
-								Trigger &nbsp;<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/flow_trigger">
+								Trigger &nbsp;<Tooltip
+									documentationLink="https://docs.windmill.dev/docs/flows/flow_trigger"
+								>
 									Used as a first step most commonly with a state and a schedule to watch for
 									changes on an external system, compute the diff since last time and set the new
 									state. The diffs are then treated one by one with a for-loop.
@@ -56,7 +60,9 @@
 							</ToggleButton>
 						{/if}
 						<ToggleButton position="right" value="approval" size="sm" startIcon={{ icon: faCheck }}>
-							Approval &nbsp;<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/flow_approval">
+							Approval &nbsp;<Tooltip
+								documentationLink="https://docs.windmill.dev/docs/flows/flow_approval"
+							>
 								An approval step will suspend the execution of a flow until it has been approved
 								through the resume endpoints or the approval page by and solely by the recipients of
 								those secret urls.
@@ -75,9 +81,7 @@
 		{/if}
 		<h3 class="pb-2 pt-4">
 			Inline new <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script
-			<Tooltip
-			documentationLink="https://docs.windmill.dev/docs/flows/flow_error_handler"
-			>
+			<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/flow_error_handler">
 				Embed a script directly inside a flow instead of saving the script into your workspace for
 				reuse. You can always save an inline script to your workspace later.
 			</Tooltip>
@@ -142,6 +146,28 @@
 							on:click={() =>
 								dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
 						/>
+						<FlowScriptPicker
+							label={`Docker`}
+							lang="docker"
+							on:click={() => {
+								if (isCloudHosted() || true) {
+									sendUserToast(
+										'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
+										true,
+										[
+											{
+												label: 'Learn more',
+												callback: () => {
+													window.open('https://docs.windmill.dev/docs/advanced/docker', '_blank')
+												}
+											}
+										]
+									)
+									return
+								}
+								dispatch('new', { language: RawScript.language.BASH, kind, subkind: 'docker' })
+							}}
+						/>
 
 						<!-- <FlowScriptPicker
 							label={`MySQL`}
diff --git a/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte b/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
index 6277c03947..7a84cc31af 100644
--- a/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
+++ b/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
@@ -6,8 +6,14 @@
 
 	export let disabled: boolean = false
 	export let label: string
-	export let lang: SupportedLanguage | 'pgsql' | 'mysql' | 'javascript' | 'fetch' | undefined =
-		undefined
+	export let lang:
+		| SupportedLanguage
+		| 'pgsql'
+		| 'mysql'
+		| 'javascript'
+		| 'fetch'
+		| 'docker'
+		| undefined = undefined
 	export let icon: IconDefinition | undefined = undefined
 	export let iconColor: string | undefined = undefined
 </script>
diff --git a/frontend/src/lib/components/icons/DockerIcon.svelte b/frontend/src/lib/components/icons/DockerIcon.svelte
new file mode 100644
index 0000000000..c87ce8510d
--- /dev/null
+++ b/frontend/src/lib/components/icons/DockerIcon.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	aria-label="Docker"
+	role="img"
+	viewBox="0 0 512 512"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	><rect width="512" height="512" rx="15%" fill="#ffffff" /><path
+		stroke="#066da5"
+		stroke-width="38"
+		d="M296 226h42m-92 0h42m-91 0h42m-91 0h41m-91 0h42m8-46h41m8 0h42m7 0h42m-42-46h42"
+	/><path
+		fill="#066da5"
+		d="m472 228s-18-17-55-11c-4-29-35-46-35-46s-29 35-8 74c-6 3-16 7-31 7H68c-5 19-5 145 133 145 99 0 173-46 208-130 52 4 63-39 63-39"
+	/></svg
+>
diff --git a/frontend/src/lib/script_helpers.ts b/frontend/src/lib/script_helpers.ts
index fed6347ce2..24fe9fb3f9 100644
--- a/frontend/src/lib/script_helpers.ts
+++ b/frontend/src/lib/script_helpers.ts
@@ -228,6 +228,14 @@ export async function main(approver?: string) {
   return wmill.getResumeEndpoints(approver)
 }`
 
+export const DOCKER_INIT_CODE = `# shellcheck shell=bash
+# Bash script that calls docker as a client to the host daemon
+# See documentation: https://docs.windmill.dev/docs/advanced/docker
+msg="\${1:-world}"
+
+docker run --rm alpine /bin/echo "Hello $msg"
+`
+
 const ALL_INITIAL_CODE = [
 	PYTHON_INIT_CODE,
 	PYTHON_INIT_CODE_TRIGGER,
@@ -252,7 +260,7 @@ export function isInitialCode(content: string): boolean {
 export function initialCode(
 	language: 'deno' | 'python3' | 'go' | 'bash',
 	kind: Script.kind | undefined,
-	subkind: 'pgsql' | 'mysql' | 'flow' | 'script' | 'fetch' | undefined
+	subkind: 'pgsql' | 'mysql' | 'flow' | 'script' | 'fetch' | 'docker' | undefined
 ): string {
 	if (!kind) {
 		kind = Script.kind.SCRIPT
@@ -290,7 +298,11 @@ export function initialCode(
 			return PYTHON_INIT_CODE
 		}
 	} else if (language == 'bash') {
-		return BASH_INIT_CODE
+		if (subkind === 'docker') {
+			return DOCKER_INIT_CODE
+		} else {
+			return BASH_INIT_CODE
+		}
 	} else {
 		if (kind === 'failure') {
 			return GO_FAILURE_MODULE_CODE