CLI hints (#1140)

* various improvements

* passing to kai

* passing to kai

* Outline InlineCodeCopy

* Add CLI setup steps

* Workaround #1173

---------

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>

frontend/src/lib/components/CliHelpBox.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+	import { userWorkspaces, workspaceStore } from '$lib/stores'
+	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+	import Icon from 'svelte-awesome'
+	import { slide } from 'svelte/transition'
+	import InlineCodeCopy from './InlineCodeCopy.svelte'
+
+	$: opened = false
+	$: workspace = $userWorkspaces.find((e) => e.id === $workspaceStore)
+	$: workspaceName = workspace?.name
+	$: workspaceId = workspace?.id
+	$: url = `${$page.url.protocol}//${$page.url.hostname}/`
+</script>
+
+<div class="text-sm mt-2 flex">
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<span
+		class="underline mr-4"
+		on:click={() => {
+			opened = !opened
+		}}
+	>
+		CLI quick setup
+		<Icon class="ml-2" data={opened ? faChevronUp : faChevronDown} scale={0.7} />
+	</span>
+</div>
+
+{#if opened}
+	<div
+		transition:slide|local
+		class="bg-gray-100 border-l-4 border-gray-600 text-gray-700 p-4 m-4"
+		role="alert"
+		id="dynamic-input-help-box"
+	>
+		<ul class="pl-0 list-decimal list-inside">
+			<li
+				>Install the latest wmill CLI from deno.land: <InlineCodeCopy
+					content={'deno install --unstable -A https://deno.land/x/wmill/main.ts'}
+				/></li
+			>
+			<li
+				>Setup the wmill cli for this workspace & remote: <InlineCodeCopy
+					content={`wmill workspace add ${workspaceName} ${workspaceId} ${url}`}
+				/></li
+			>
+			<li>Follow the prompts in your terminal</li>
+			<li>Use the run command above!</li>
+		</ul>
+	</div>
+{/if}

frontend/src/lib/components/InlineCodeCopy.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { copyToClipboard } from '$lib/utils'
+	import { faClipboard } from '@fortawesome/free-solid-svg-icons'
+	import { Icon } from 'svelte-awesome'
+
+	export let content: string
+</script>
+
+<pre class="bg-gray-700 text-gray-100 p-2  font-mono text-sm whitespace-pre-wrap"
+	>{content} <span on:click={() => copyToClipboard(content)} class="cursor-pointer ml-2"
+		><Icon data={faClipboard} /></span
+	></pre
+>

frontend/src/lib/components/RunForm.svelte

@@ -18,6 +18,8 @@
 	import Toggle from './Toggle.svelte'
 	import { userStore } from '$lib/stores'
 	import Tooltip from './Tooltip.svelte'
+	import CliHelpBox from './CliHelpBox.svelte'
+	import InlineCodeCopy from './InlineCodeCopy.svelte'
 
 	export let runnable:
 		| {
@@ -55,10 +57,15 @@
 
 	export let isValid = true
 
-	// Run later
 	let viewOptions = false
+	let viewCliOptions = false
+
 	let scheduledForStr: string | undefined
 	let invisible_to_owner: false
+
+	$: cliCommand = `wmill ${runnable?.kind} run ${runnable?.path} ${Object.entries(args)
+		.map(([k, v]) => `-i ${k}=${JSON.stringify(v)}`)
+		.join(' ')}`
 </script>
 
 <div class="max-w-6xl">
@@ -171,7 +178,7 @@
 				<div class="flex items-center gap-1">
 					<Toggle
 						options={{
-							right: `run only visible to you`
+							right: `make run invisible to others`
 						}}
 						bind:checked={invisible_to_owner}
 					/>
@@ -200,4 +207,20 @@
 			{buttonText}
 		</Button>
 	{/if}
+
+	<div class="my-10" />
+	<Button
+		color="light"
+		size="sm"
+		endIcon={{ icon: viewCliOptions ? faChevronUp : faChevronDown }}
+		on:click={() => (viewCliOptions = !viewCliOptions)}
+	>
+		Run it from the CLI
+	</Button>
+	{#if viewCliOptions}
+		<div transition:slide class="mt-2 px-4 pt-2">
+			<InlineCodeCopy content={cliCommand} />
+			<CliHelpBox />
+		</div>
+	{/if}
 </div>

frontend/src/routes/(root)/(logged)/oauth/callback_slack/+page.svelte

@@ -23,7 +23,7 @@
 			})
 			oauthStore.set({ access_token: token })
 			sendUserToast(
-				'Slack workspace connected to your Windmill workspace and slack token saved at `g/slack/bot_token`.'
+				'Slack workspace connected to your Windmill workspace and slack token saved in the folder `slack_bot` at `f/slack_bot/bot_token`.'
 			)
 		} else {
 			sendUserToast('Missing code or state as query params', true)