fix(frontend): unselect ScriptPicker + slack script (#1802)

* fix(frontend): allow unselecting script/flow

* fix(frontend): slack script select

* fix: bind initial path

* fix(frontend): slack script picker tab change

frontend/src/lib/components/ScriptPicker.svelte

@@ -15,6 +15,7 @@
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import { Code2, Globe } from 'lucide-svelte'
 	import type { SupportedLanguage } from '$lib/common'
+	import FlowIcon from './home/FlowIcon.svelte'
 
 	export let initialPath: string | undefined = undefined
 	export let scriptPath: string | undefined = undefined
@@ -30,9 +31,9 @@
 	let code: string = ''
 	let lang: SupportedLanguage | undefined
 
-	let options: [[string, any, any]] = [['Script', 'script', Code2]]
-	allowHub && options.unshift(['Hub', 'hub', Globe])
-	allowFlow && options.push(['Flow', 'flow', undefined])
+	let options: [[string, any, any, string | undefined]] = [['Script', 'script', Code2, undefined]]
+	allowHub && options.unshift(['Hub', 'hub', Globe, undefined])
+	allowFlow && options.push(['Flow', 'flow', FlowIcon, '#14b8a6'])
 	const dispatch = createEventDispatcher()
 
 	async function loadItems(): Promise<void> {
@@ -76,8 +77,8 @@
 	{#if options.length > 1}
 		<div>
 			<ToggleButtonGroup bind:selected={itemKind}>
-				{#each options as [label, value, icon]}
-					<ToggleButton {icon} {disabled} {value} {label} />
+				{#each options as [label, value, icon, selectedColor]}
+					<ToggleButton {icon} {disabled} {value} {label} {selectedColor} />
 				{/each}
 			</ToggleButtonGroup>
 		</div>
@@ -92,6 +93,11 @@
 			on:change={() => {
 				dispatch('select', { path: scriptPath })
 			}}
+			on:input={(ev) => {
+				if (!ev.detail) {
+					dispatch('select', { path: undefined })
+				}
+			}}
 			bind:justValue={scriptPath}
 			{items}
 			placeholder="Pick a {itemKind}"

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

@@ -41,8 +41,8 @@
 	let invites: WorkspaceInvite[] = []
 	let filteredUsers: User[] | undefined = undefined
 	let userFilter = ''
-	let scriptPath: string
 	let initialPath: string
+	let scriptPath: string
 	let team_name: string | undefined
 	let auto_invite_domain: string | undefined
 	let itemKind: 'flow' | 'script' = 'flow'
@@ -88,11 +88,20 @@
 	// }
 
 	async function editSlackCommand(): Promise<void> {
-		await WorkspaceService.editSlackCommand({
-			workspace: $workspaceStore!,
-			requestBody: { slack_command_script: `${itemKind}/${scriptPath}` }
-		})
-		sendUserToast(`slack command script set to ${scriptPath}`)
+		initialPath = scriptPath
+		if (scriptPath) {
+			await WorkspaceService.editSlackCommand({
+				workspace: $workspaceStore!,
+				requestBody: { slack_command_script: `${itemKind}/${scriptPath}` }
+			})
+			sendUserToast(`slack command script set to ${scriptPath}`)
+		} else {
+			await WorkspaceService.editSlackCommand({
+				workspace: $workspaceStore!,
+				requestBody: { slack_command_script: undefined }
+			})
+			sendUserToast(`slack command script removed`)
+		}
 	}
 
 	async function editWebhook(): Promise<void> {
@@ -117,10 +126,13 @@
 		team_name = settings.slack_name
 		auto_invite_domain = settings.auto_invite_domain
 		operatorOnly = settings.auto_invite_operator
+		if (settings.slack_command_script) {
+			itemKind = settings.slack_command_script.split('/')[0] as 'flow' | 'script'
+		}
 		scriptPath = (settings.slack_command_script ?? '').split('/').slice(1).join('/')
+		initialPath = scriptPath
 		plan = settings.plan
 		customer_id = settings.customer_id
-		initialPath = scriptPath
 		workspaceToDeployTo = settings.deploy_to
 		webhook = settings.webhook
 	}