From 893ee941d72a7036f0ea272c49bbe5cd3eee64d5 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 2 Aug 2022 17:30:12 +0200
Subject: [PATCH] fix: migrate to new style radio button

---
 .../lib/components/ObjectResourceInput.svelte |  4 +-
 ...adioButtonV3.svelte => RadioButton.svelte} |  8 +++-
 .../src/lib/components/RadioButtonV2.svelte   | 35 ----------------
 .../src/lib/components/ScriptBuilder.svelte   |  4 +-
 .../src/lib/components/ScriptPicker.svelte    |  4 +-
 .../lib/components/StringTypeNarrowing.svelte |  4 +-
 .../lib/components/flows/FlowSettings.svelte  | 42 ++++++++++---------
 7 files changed, 36 insertions(+), 65 deletions(-)
 rename frontend/src/lib/components/{RadioButtonV3.svelte => RadioButton.svelte} (74%)
 delete mode 100644 frontend/src/lib/components/RadioButtonV2.svelte

diff --git a/frontend/src/lib/components/ObjectResourceInput.svelte b/frontend/src/lib/components/ObjectResourceInput.svelte
index b66e36f347..1c97b4ac41 100644
--- a/frontend/src/lib/components/ObjectResourceInput.svelte
+++ b/frontend/src/lib/components/ObjectResourceInput.svelte
@@ -4,7 +4,7 @@
 	import ResourcePicker from './ResourcePicker.svelte'
 	import { workspaceStore } from '$lib/stores'
 	import SchemaForm from './SchemaForm.svelte'
-	import RadioButtonV3 from './RadioButtonV3.svelte'
+	import RadioButton from './RadioButton.svelte'
 
 	export let format: string
 	export let value: any
@@ -54,7 +54,7 @@
 
 <div class="flex flex-row w-full gap-2">
 	<div class="shrink w-40">
-		<RadioButtonV3
+		<RadioButton
 			options={[
 				[`Resource (${resourceTypeName})`, 'resource'],
 				[`Raw object value`, 'raw']
diff --git a/frontend/src/lib/components/RadioButtonV3.svelte b/frontend/src/lib/components/RadioButton.svelte
similarity index 74%
rename from frontend/src/lib/components/RadioButtonV3.svelte
rename to frontend/src/lib/components/RadioButton.svelte
index b37fd61616..f963bed3ed 100644
--- a/frontend/src/lib/components/RadioButtonV3.svelte
+++ b/frontend/src/lib/components/RadioButton.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	export let label = ''
-	export let options: ([string, any] | string)[]
+	export let options: [string | { title: string; desc: string }, any][]
 	export let value: any
 
 	import { createEventDispatcher } from 'svelte'
+	import Tooltip from './Tooltip.svelte'
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -24,7 +25,10 @@
 					aria-labelledby="memory-option-0-label"
 					on:click={() => dispatch('change', val)}
 				/>
-				<p>{label}</p>
+				<p>
+					{#if typeof label !== 'string'}{label.title} <Tooltip>{label.desc}</Tooltip>
+					{:else}{label}{/if}
+				</p>
 			</label>
 		{/each}
 	</div>
diff --git a/frontend/src/lib/components/RadioButtonV2.svelte b/frontend/src/lib/components/RadioButtonV2.svelte
deleted file mode 100644
index 60aac5f449..0000000000
--- a/frontend/src/lib/components/RadioButtonV2.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-	export let options: [{ title: string; desc?: string }, string][]
-	export let value: any
-
-	import { createEventDispatcher } from 'svelte'
-	import Tooltip from './Tooltip.svelte'
-
-	$: dispatch('change', value)
-
-	const dispatch = createEventDispatcher()
-</script>
-
-<div class="flex flex-row gap-x-4 m-4 reveal flex-wrap ">
-	{#each options as [label, val]}
-		<button
-			type="button"
-			on:click={() => {
-				value = val
-			}}
-			class="flex flex-col default-secondary-button-v2 mb-2 grow"
-			class:selected={value == val}
-		>
-			<h2 class="mb-2">{label.title} <Tooltip>{label.desc}</Tooltip></h2>
-		</button>
-	{/each}
-</div>
-
-<style>
-	.selected {
-		@apply bg-blue-500/70 text-white;
-	}
-	.selected > h2 {
-		@apply text-white;
-	}
-</style>
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 0ec55dcbe9..0b39e92d84 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -10,7 +10,7 @@
 	import { onDestroy } from 'svelte'
 	import SvelteMarkdown from 'svelte-markdown'
 	import Path from './Path.svelte'
-	import RadioButtonV3 from './RadioButtonV3.svelte'
+	import RadioButton from './RadioButton.svelte'
 	import Required from './Required.svelte'
 	import ScriptEditor from './ScriptEditor.svelte'
 	import ScriptSchema from './ScriptSchema.svelte'
@@ -177,7 +177,7 @@
 			</Path>
 			<h3 class="text-gray-700 pb-1 border-b">Language</h3>
 			<div class="max-w-md">
-				<RadioButtonV3
+				<RadioButton
 					label="Language"
 					options={[
 						['Typescript (Deno)', 'deno'],
diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
index ab9638b433..d0252b42b5 100644
--- a/frontend/src/lib/components/ScriptPicker.svelte
+++ b/frontend/src/lib/components/ScriptPicker.svelte
@@ -12,7 +12,7 @@
 	import python from 'svelte-highlight/languages/python'
 
 	import { getScriptByPath } from '$lib/utils'
-	import RadioButtonV3 from './RadioButtonV3.svelte'
+	import RadioButton from './RadioButton.svelte'
 
 	export let scriptPath: string | undefined = undefined
 	export let allowFlow = false
@@ -65,7 +65,7 @@
 <div class="flex flex-row items-center space-x-5">
 	<div class="w-80">
 		{#if options.length > 1}
-			<RadioButtonV3 bind:value={itemKind} {options} />
+			<RadioButton bind:value={itemKind} {options} />
 		{/if}
 	</div>
 
diff --git a/frontend/src/lib/components/StringTypeNarrowing.svelte b/frontend/src/lib/components/StringTypeNarrowing.svelte
index 6c3b45078c..ef77b75294 100644
--- a/frontend/src/lib/components/StringTypeNarrowing.svelte
+++ b/frontend/src/lib/components/StringTypeNarrowing.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import RadioButtonV3 from './RadioButtonV3.svelte'
+	import RadioButton from './RadioButton.svelte'
 	import ResourceTypePicker from './ResourceTypePicker.svelte'
 
 	export let pattern: string | undefined
@@ -31,7 +31,7 @@
 	$: contentEncoding = kind == 'base64' ? 'base64' : undefined
 </script>
 
-<RadioButtonV3
+<RadioButton
 	label="Kind"
 	options={[
 		['None', 'none'],
diff --git a/frontend/src/lib/components/flows/FlowSettings.svelte b/frontend/src/lib/components/flows/FlowSettings.svelte
index d413ba765b..419b396d40 100644
--- a/frontend/src/lib/components/flows/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/FlowSettings.svelte
@@ -7,13 +7,13 @@
 	import FlowPreview from '../FlowPreview.svelte'
 	import FlowViewer from '../FlowViewer.svelte'
 	import Modal from '../Modal.svelte'
+	import RadioButton from '../RadioButton.svelte'
 	import CollapseLink from './../CollapseLink.svelte'
 	import CronInput from './../CronInput.svelte'
 	import FlowBox from './../flows/FlowBox.svelte'
 	import { flowStore, initFlow, mode } from './../flows/flowStore'
 	import { flowToMode } from './../flows/utils'
 	import Path from './../Path.svelte'
-	import RadioButtonV2 from './../RadioButtonV2.svelte'
 	import Required from './../Required.svelte'
 	import SchemaForm from './../SchemaForm.svelte'
 	import Toggle from './../Toggle.svelte'
@@ -131,25 +131,27 @@
 		</label>
 	</div>
 
-	<RadioButtonV2
-		options={[
-			[
-				{
-					title: 'UI or webhook triggered',
-					desc: 'Trigger this flow through the generated UI, a manual schedule or by calling the associated webhook'
-				},
-				'push'
-			],
-			[
-				{
-					title: 'Watching changes regularly',
-					desc: 'The first module of this flow is a trigger script whose purpose is to pull data from an external source and return all new items since last run. This flow is meant to be scheduled very regularly to reduce latency to react to new events. It will trigger the rest of the flow once per item. If no new items, the flow will be skipped.'
-				},
-				'pull'
-			]
-		]}
-		bind:value={$mode}
-	/>
+	<div class="mx-6">
+		<RadioButton
+			options={[
+				[
+					{
+						title: 'UI or webhook triggered',
+						desc: 'Trigger this flow through the generated UI, a manual schedule or by calling the associated webhook'
+					},
+					'push'
+				],
+				[
+					{
+						title: 'Watching changes regularly',
+						desc: 'The first module of this flow is a trigger script whose purpose is to pull data from an external source and return all new items since last run. This flow is meant to be scheduled very regularly to reduce latency to react to new events. It will trigger the rest of the flow once per item. If no new items, the flow will be skipped.'
+					},
+					'pull'
+				]
+			]}
+			bind:value={$mode}
+		/>
+	</div>
 	{#if $mode == 'pull'}
 		<div class="p-4">
 			<CollapseLink text="set primary schedule" open={true}>