From 8b8302e32f907d9161ca20a175edff88f01d8903 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Wed, 18 Jan 2023 10:10:47 +0100
Subject: [PATCH] feat(frontend): Add tooltip to app recompute (#1122)

---
 .../apps/editor/settingsPanel/Recompute.svelte        |  2 +-
 .../editor/settingsPanel/common/PanelSection.svelte   | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte
index d39f5f0e2f..245a6e390b 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte
@@ -23,7 +23,7 @@
 	}
 </script>
 
-<PanelSection title="Recompute after this compute">
+<PanelSection title="Recompute others" tooltip="Select components to recompute after running this script">
 	{#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0}
 		<table class="divide-y divide-gray-300 border w-full">
 			<thead class="bg-gray-50">
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
index 9d920b52f4..389beb93bb 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { classNames } from '$lib/utils'
+	import Tooltip from '../../../../Tooltip.svelte'
 
 	export let title: string
 	export let smallPadding: boolean = false
 	export let noPadding: boolean = false
 	export let titlePadding: string = ''
+	export let tooltip = ''
 </script>
 
 <div
@@ -15,7 +17,14 @@
 	)}
 >
 	<div class="flex justify-between items-center w-full gap-1">
-		<div class="text-sm font-extrabold {titlePadding}">{title}</div>
+		<div class="text-sm font-extrabold {titlePadding}">
+			{title}
+			{#if tooltip}
+				<Tooltip>
+					{tooltip}
+				</Tooltip>
+			{/if}
+		</div>
 		<slot name="action" />
 	</div>
 	<slot />