starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-08-25 16:02:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): Check whether the source has the right type (#1647)

Browse Source 
* fix(frontend): Check whether the source has the right type

* fix(frontend): add componentErrorHandler
This commit is contained in:
Faton Ramadani
2023-05-26 17:14:14 +02:00
committed by GitHub
parent 08c3ab5753
commit 552ed9459c
2 changed files with 61 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/apps/components/display/AppDownload.svelte
+33 -25
View File
@@ -10,6 +10,7 @@
import { AlignWrapper } from '../helpers'
import { Button } from '$lib/components/common'
import { loadIcon } from '../icon'
import ComponentErrorHandler from '../helpers/ComponentErrorHandler.svelte'
export let id: string
export let configuration: RichConfigurations
@@ -19,7 +20,7 @@
export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
export let noWFull = false
let resolvedConfig = initConfig(
const resolvedConfig = initConfig(
components['downloadcomponent'].initialData.configuration,
configuration
)
@@ -63,30 +64,37 @@
{#if render}
<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
<Button
on:pointerdown={(e) => e.stopPropagation()}
btnClasses={twMerge(css?.button?.class, resolvedConfig.fillContainer ? 'w-full h-full' : '')}
wrapperClasses={resolvedConfig.fillContainer ? 'w-full h-full' : ''}
style={css?.button?.style}
disabled={resolvedConfig.source == undefined}
size={resolvedConfig.size}
color={resolvedConfig.color}
download={resolvedConfig.filename}
href={transformBareBase64IfNecessary(resolvedConfig.source)}
target="_self"
nonCaptureEvent
<ComponentErrorHandler
hasError={resolvedConfig?.source != undefined && typeof resolvedConfig.source !== 'string'}
>
<span class="truncate inline-flex gap-2 items-center">
{#if resolvedConfig.beforeIcon && beforeIconComponent}
<svelte:component this={beforeIconComponent} size={14} />
{/if}
{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
<div>{resolvedConfig.label}</div>
{/if}
{#if resolvedConfig.afterIcon && afterIconComponent}
<svelte:component this={afterIconComponent} size={14} />
{/if}
</span>
</Button>
<Button
on:pointerdown={(e) => e.stopPropagation()}
btnClasses={twMerge(
css?.button?.class,
resolvedConfig.fillContainer ? 'w-full h-full' : ''
)}
wrapperClasses={resolvedConfig.fillContainer ? 'w-full h-full' : ''}
style={css?.button?.style}
disabled={resolvedConfig.source == undefined}
size={resolvedConfig.size}
color={resolvedConfig.color}
download={resolvedConfig.filename}
href={transformBareBase64IfNecessary(resolvedConfig.source)}
target="_self"
nonCaptureEvent
>
<span class="truncate inline-flex gap-2 items-center">
{#if resolvedConfig.beforeIcon && beforeIconComponent}
<svelte:component this={beforeIconComponent} size={14} />
{/if}
{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
<div>{resolvedConfig.label}</div>
{/if}
{#if resolvedConfig.afterIcon && afterIconComponent}
<svelte:component this={afterIconComponent} size={14} />
{/if}
</span>
</Button>
</ComponentErrorHandler>
</AlignWrapper>
{/if}
frontend/src/lib/components/apps/components/helpers/ComponentErrorHandler.svelte
+28
View File
@@ -0,0 +1,28 @@
<script lang="ts">
import Popover from '$lib/components/Popover.svelte'
import Alert from '$lib/components/common/alert/Alert.svelte'
import { classNames } from '$lib/utils'
import { Bug } from 'lucide-svelte'
export let hasError: boolean = false
</script>
{#if hasError}
<div class={classNames('bg-red-100 w-full h-full flex items-center justify-center text-red-500')}>
<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
<Bug size={14} />
<span slot="text">
<div class="bg-white">
<Alert type="error" title="Error during execution">
<div class="flex flex-col gap-2">
One of the configuration of the component is invalid. Please check the configuration
and try again.
</div>
</Alert>
</div>
</span>
</Popover>
</div>
{:else}
<slot />
{/if}