adding doc link to the gh app ui + updating descripton (#5521)

* adding doc link to the gh app ui + updating descripton

* Update frontend/src/lib/components/meltComponents/Popover.svelte

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

* Update frontend/src/lib/components/ApiConnectForm.svelte

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

---------

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

frontend/src/lib/components/ApiConnectForm.svelte

@@ -25,6 +25,7 @@
 	export let linkedSecret: string | undefined = undefined
 	export let isValid = true
 	export let linkedSecretCandidates: string[] | undefined = undefined
+	export let description: string | undefined = undefined
 
 	let schema = emptySchema()
 	let notFound = false
@@ -226,14 +227,12 @@
 			{
 				...args,
 				url: selectedGHAppRepository,
-				github_app_installation_id: githubInstallations.find(
-					(_) => _.account_id === selectedGHAppAccountId
-				)?.installation_id,
 				is_github_app: true
 			},
 			null,
 			2
 		)
+		description = `Repository ${selectedGHAppRepository} with permissions fetched using Windmill Github App. ${description ?? ''}`
 		rawCodeEditor?.setCode(rawCode)
 		close(null)
 	}
@@ -409,6 +408,7 @@
 			{/if}
 			{#if githubInstallations.length > 0}
 				<Popover
+					documentationLink="https://www.windmill.dev/docs/integrations/git_repository#github-app"
 					bind:this={githubAppPopover}
 					floatingConfig={{
 						placement: 'bottom'

frontend/src/lib/components/AppConnectInner.svelte

@@ -564,6 +564,7 @@
 			{#key resourceTypeInfo}
 				<ApiConnectForm
 					bind:linkedSecret
+					bind:description
 					{linkedSecretCandidates}
 					{resourceType}
 					{resourceTypeInfo}

frontend/src/lib/components/meltComponents/Popover.svelte

@@ -14,6 +14,7 @@
 	import { pointerDownOutside } from '$lib/utils'
 	import { twMerge } from 'tailwind-merge'
 	import { createEventDispatcher } from 'svelte'
+	import DocLink from '$lib/components/apps/editor/settingsPanel/DocLink.svelte'
 
 	export let closeButton: boolean = false
 	export let displayArrow: boolean = false
@@ -27,6 +28,7 @@
 	export let portal: string | HTMLElement | null = 'body'
 	export let closeOnOtherPopoverOpen: boolean = false
 	export let disabled: boolean = false
+	export let documentationLink: string | undefined = undefined
 
 	const dispatch = createEventDispatcher()
 
@@ -85,7 +87,7 @@
 	class={$$props.class}
 	use:melt={$trigger}
 	aria-label="Popup button"
-	disabled={disabled}
+	{disabled}
 	on:mouseenter={() => (openOnHover ? open() : null)}
 	on:mouseleave={() => (openOnHover ? close() : null)}
 	use:pointerDownOutside={{
@@ -114,6 +116,11 @@
 		{#if displayArrow}
 			<div use:melt={$arrow} />
 		{/if}
+		{#if documentationLink}
+			<div class="absolute right-1.5 top-1.5">
+				<DocLink docLink={documentationLink} size="sm" />
+			</div>
+		{/if}
 		<slot name="content" {open} {close} />
 		{#if closeButton}
 			<button class="close" use:melt={$closeElement}>