fix(frontend): Remove useless RunnableWrapper on Log and Flow status … (#3877)

* fix(frontend): Remove useless RunnableWrapper on Log and Flow status component

* fix(frontend): fix wording

* fix(frontend): fix wording

* fix(frontend): add missing render prop

frontend/src/lib/components/FlowStatusViewer.svelte

@@ -55,6 +55,8 @@
 	globalDurationStatuses={[]}
 	globalModuleStates={[]}
 	bind:selectedNode={selectedJobStep}
+	on:start
+	on:done
 	{jobId}
 	{workspaceId}
 	{isOwner}

frontend/src/lib/components/FlowStatusViewerInner.svelte

@@ -196,6 +196,7 @@
 	let errorCount = 0
 	let notAnonynmous = false
 	async function loadJobInProgress() {
+		dispatch('start')
 		if (jobId != '00000000-0000-0000-0000-000000000000') {
 			try {
 				const newJob = await JobService.getJob({
@@ -223,6 +224,8 @@
 		}
 		if (job?.type !== 'CompletedJob' && errorCount < 4 && !destroyed) {
 			timeout = setTimeout(() => loadJobInProgress(), reducedPolling ? 5000 : 1000)
+		} else {
+			dispatch('done', job)
 		}
 	}
 

frontend/src/lib/components/apps/components/display/AppFlowStatusComponent.svelte

@@ -1,80 +1,16 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
-	import { twMerge } from 'tailwind-merge'
-	import { initOutput } from '../../editor/appUtils'
-	import type { AppInput } from '../../inputType'
-	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
-	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
-	import { initCss } from '../../utils'
-	import FlowStatusViewer from '$lib/components/FlowStatusViewer.svelte'
-	import ResolveStyle from '../helpers/ResolveStyle.svelte'
-
-	export let id: string
-	export let componentInput: AppInput | undefined
-	export let initializing: boolean | undefined = false
-	export let customCss: ComponentCustomCSS<'flowstatuscomponent'> | undefined = undefined
-	export let render: boolean
-
-	const { app, worldStore, workspace } = getContext<AppViewerContext>('AppViewerContext')
-
-	const outputs = initOutput($worldStore, id, {
-		result: undefined,
-		loading: false
-	})
-
-	initializing = false
-
-	let css = initCss($app.css?.flowstatuscomponent, customCss)
-	let jobId: string | undefined
+	import { Alert } from '$lib/components/common'
+	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 </script>
 
-{#each Object.keys(css ?? {}) as key (key)}
-	<ResolveStyle
-		{id}
-		{customCss}
-		{key}
-		bind:css={css[key]}
-		componentStyle={$app.css?.flowstatuscomponent}
-	/>
-{/each}
-
-<RunnableWrapper
-	on:started={(e) => {
-		jobId = e.detail
-	}}
-	{outputs}
-	{render}
-	{componentInput}
-	{id}
->
-	<div class="flex flex-col w-full h-full">
-		<div
-			class={twMerge(
-				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
-				css?.header?.class,
-				'wm-flow-status-header'
-			)}
-			style={css?.header?.style}
-		>
-			Flow Status
-		</div>
-		<div
-			style={twMerge(
-				$app.css?.['flowstatuscomponent']?.['container']?.style,
-				customCss?.container?.style
-			)}
-			class={twMerge(
-				'p-2 grow overflow-auto',
-				$app.css?.['flowstatuscomponent']?.['container']?.class,
-				customCss?.container?.class,
-				'wm-flow-status-container'
-			)}
-		>
-			{#if jobId}
-				<FlowStatusViewer workspaceId={workspace} {jobId} />
-			{:else}
-				<span class="text-secondary text-xs">No flow</span>
-			{/if}
-		</div>
-	</div>
-</RunnableWrapper>
+<AlignWrapper verticalAlignment="center" horizontalAlignment="center">
+	<Alert
+		title="Deprecated component"
+		documentationLink="https://www.windmill.dev/docs/apps/app_configuration_settings/flow_status"
+		tooltip="See documentation of the new component:"
+		type="error"
+	>
+		This component is deprecated and has been removed. Please use the Flow status by Job Id
+		component instead.
+	</Alert>
+</AlignWrapper>

frontend/src/lib/components/apps/components/display/AppJobIdFlowStatus.svelte

@@ -2,9 +2,7 @@
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { initConfig, initOutput } from '../../editor/appUtils'
-	import type { AppInput } from '../../inputType'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
-	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 	import { initCss } from '../../utils'
 	import FlowStatusViewer from '$lib/components/FlowStatusViewer.svelte'
 	import { components } from '../../editor/component'
@@ -12,22 +10,22 @@
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 
 	export let id: string
-	export let componentInput: AppInput | undefined
 	export let initializing: boolean | undefined = false
 	export let customCss: ComponentCustomCSS<'jobidflowstatuscomponent'> | undefined = undefined
-	export let render: boolean
 	export let configuration: RichConfigurations
+	export let render: boolean
 
 	const { app, worldStore, workspace } = getContext<AppViewerContext>('AppViewerContext')
 
-	let resolvedConfig = initConfig(
+	const resolvedConfig = initConfig(
 		components['jobidlogcomponent'].initialData.configuration,
 		configuration
 	)
 
 	const outputs = initOutput($worldStore, id, {
 		result: undefined,
-		loading: false
+		loading: false,
+		jobId: undefined as string | undefined
 	})
 
 	initializing = false
@@ -56,7 +54,7 @@
 	/>
 {/each}
 
-<RunnableWrapper {outputs} {render} {componentInput} {id}>
+{#if render}
 	<div class="flex flex-col w-full h-full component-wrapper">
 		<div
 			class={twMerge(
@@ -79,10 +77,21 @@
 			)}
 		>
 			{#if jobId}
-				<FlowStatusViewer workspaceId={workspace} {jobId} />
+				<FlowStatusViewer
+					workspaceId={workspace}
+					{jobId}
+					on:start={() => {
+						outputs?.jobId.set(jobId)
+						outputs?.loading.set(true)
+					}}
+					on:done={(e) => {
+						outputs?.loading.set(false)
+						outputs?.result.set(e?.detail?.result)
+					}}
+				/>
 			{:else}
 				<span class="text-secondary text-xs">No flow</span>
 			{/if}
 		</div>
 	</div>
-</RunnableWrapper>
+{/if}

frontend/src/lib/components/apps/components/display/AppJobIdLogComponent.svelte

@@ -2,9 +2,7 @@
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { initConfig, initOutput } from '../../editor/appUtils'
-	import type { AppInput } from '../../inputType'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
-	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 	import { initCss } from '../../utils'
 	import LogViewer from '$lib/components/LogViewer.svelte'
 	import TestJobLoader from '$lib/components/TestJobLoader.svelte'
@@ -14,11 +12,10 @@
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 
 	export let id: string
-	export let componentInput: AppInput | undefined
 	export let initializing: boolean | undefined = false
 	export let customCss: ComponentCustomCSS<'jobidlogcomponent'> | undefined = undefined
-	export let render: boolean
 	export let configuration: RichConfigurations
+	export let render: boolean
 
 	const { app, worldStore, workspace } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -42,6 +39,7 @@
 	let testJob: Job | undefined = undefined
 
 	$: if (resolvedConfig.jobId) {
+		outputs.loading.set(true)
 		testJobLoader?.watchJob(resolvedConfig?.['jobId'])
 	}
 </script>
@@ -70,9 +68,14 @@
 	bind:this={testJobLoader}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
+	on:done={(e) => {
+		outputs.loading.set(false)
+		outputs.jobId.set(e.detail.id)
+		outputs.result.set(e.detail.result)
+	}}
 />
 
-<RunnableWrapper {outputs} {render} {componentInput} {id}>
+{#if render}
 	<div class="flex flex-col w-full h-full component-wrapper">
 		<div
 			class={twMerge(
@@ -97,4 +100,4 @@
 			/>
 		</div>
 	</div>
-</RunnableWrapper>
+{/if}

frontend/src/lib/components/apps/components/display/AppLogsComponent.svelte

@@ -1,86 +1,16 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
-	import { twMerge } from 'tailwind-merge'
-	import { initOutput } from '../../editor/appUtils'
-	import type { AppInput } from '../../inputType'
-	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
-	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
-	import { initCss } from '../../utils'
-	import LogViewer from '$lib/components/LogViewer.svelte'
-	import TestJobLoader from '$lib/components/TestJobLoader.svelte'
-	import type { Job } from '$lib/gen'
-	import ResolveStyle from '../helpers/ResolveStyle.svelte'
-
-	export let id: string
-	export let componentInput: AppInput | undefined
-	export let initializing: boolean | undefined = false
-	export let customCss: ComponentCustomCSS<'logcomponent'> | undefined = undefined
-	export let render: boolean
-
-	const { app, worldStore, workspace } = getContext<AppViewerContext>('AppViewerContext')
-
-	const outputs = initOutput($worldStore, id, {
-		result: undefined,
-		loading: false
-	})
-
-	initializing = false
-
-	let css = initCss($app.css?.logcomponent, customCss)
-	let testJobLoader: TestJobLoader | undefined = undefined
-	let testIsLoading: boolean = false
-	let testJob: Job | undefined = undefined
+	import { Alert } from '$lib/components/common'
+	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 </script>
 
-<TestJobLoader
-	workspaceOverride={workspace}
-	bind:this={testJobLoader}
-	bind:isLoading={testIsLoading}
-	bind:job={testJob}
-/>
-
-{#each Object.keys(css ?? {}) as key (key)}
-	<ResolveStyle
-		{id}
-		{customCss}
-		{key}
-		bind:css={css[key]}
-		componentStyle={$app.css?.logcomponent}
-	/>
-{/each}
-
-<RunnableWrapper
-	on:started={(e) => {
-		testJobLoader?.watchJob(e.detail)
-	}}
-	{outputs}
-	{render}
-	{componentInput}
-	{id}
->
-	<div class="flex flex-col w-full h-full">
-		<div
-			class={twMerge(
-				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
-				css?.header?.class,
-				'wm-log-header'
-			)}
-			style={css?.header?.style}
-		>
-			Logs
-		</div>
-		<div
-			style={css?.container?.style}
-			class={twMerge('p-2 grow overflow-auto', css?.container?.class, 'wm-log-container')}
-		>
-			<LogViewer
-				jobId={testJob?.id}
-				duration={testJob?.['duration_ms']}
-				mem={testJob?.['mem_peak']}
-				content={testJob?.logs}
-				isLoading={testIsLoading}
-				tag={testJob?.tag}
-			/>
-		</div>
-	</div>
-</RunnableWrapper>
+<AlignWrapper verticalAlignment="center" horizontalAlignment="center">
+	<Alert
+		title="Deprecated component"
+		documentationLink="https://www.windmill.dev/docs/apps/app_configuration_settings/log_display"
+		tooltip="See documentation of the new component:"
+		type="error"
+	>
+		This component is deprecated and has been removed. Please use the Log by Job Id component
+		instead.
+	</Alert>
+</AlignWrapper>

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -191,37 +191,23 @@
 				{render}
 			/>
 		{:else if component.type === 'logcomponent'}
-			<AppLogsComponent
-				id={component.id}
-				customCss={component.customCss}
-				bind:initializing
-				componentInput={component.componentInput}
-				{render}
-			/>
+			<AppLogsComponent />
 		{:else if component.type === 'jobidlogcomponent'}
 			<AppJobIdLogComponent
 				id={component.id}
 				customCss={component.customCss}
 				bind:initializing
 				configuration={component.configuration}
-				componentInput={component.componentInput}
 				{render}
 			/>
 		{:else if component.type === 'flowstatuscomponent'}
-			<AppFlowStatusComponent
-				id={component.id}
-				customCss={component.customCss}
-				bind:initializing
-				componentInput={component.componentInput}
-				{render}
-			/>
+			<AppFlowStatusComponent />
 		{:else if component.type === 'jobidflowstatuscomponent'}
 			<AppJobIdFlowStatus
 				id={component.id}
 				customCss={component.customCss}
 				bind:initializing
 				configuration={component.configuration}
-				componentInput={component.componentInput}
 				{render}
 			/>
 		{:else if component.type === 'barchartcomponent'}