windmill-components 1.699.0 → 1.700.2

package/package/components/Auth0Setting.svelte

@@ -6,6 +6,7 @@ import Tooltip from './Tooltip.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import TextInput from './text_input/TextInput.svelte';
+import Password from './Password.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
 function changeDomain(domain, custom) {
@@ -96,14 +97,15 @@ $effect.pre(() => {
 					class="max-w-lg"
 				/>
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="auth0_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs"
 					>Client Secret <Tooltip>Client Secret of the auth0 service configuration</Tooltip></span
 				>
-				<TextInput
-					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
-					bind:value={value['secret']}
-					class="max-w-lg"
+				<Password
+					id="auth0_client_secret"
+					small
+					placeholder="Client Secret"
+					bind:password={value['secret']}
 				/>
 			</label>
 			<CollapseLink text="Instructions">

package/package/components/AuthSettings.svelte

@@ -12,6 +12,7 @@ import KanidmSetting from './KanidmSetting.svelte';
 import ZitadelSetting from './ZitadelSetting.svelte';
 import NextcloudSetting from './NextcloudSetting.svelte';
 import CustomOauth from './CustomOauth.svelte';
+import Password from './Password.svelte';
 import { capitalize } from '../utils';
 import ClipboardPanel from './details/ClipboardPanel.svelte';
 import Toggle from './Toggle.svelte';
@@ -259,12 +260,12 @@ function generateOAuthDropdownItems() {
 										<span class="text-primary font-semibold text-xs">Client Id</span>
 										<input type="text" placeholder="Client Id" bind:value={oauths[k]['id']} />
 									</label>
-									<label class="block pb-6">
+									<label for="{k}_client_secret_sso" class="block pb-6">
 										<span class="text-primary font-semibold text-xs">Client Secret</span>
-										<input
-											type="text"
+										<Password
+											id="{k}_client_secret_sso"
 											placeholder="Client Secret"
-											bind:value={oauths[k]['secret']}
+											bind:password={oauths[k]['secret']}
 										/>
 									</label>
 									{#if !windmillBuiltins.includes(k) && k != 'slack'}
@@ -356,9 +357,13 @@ function generateOAuthDropdownItems() {
 									<span class="text-primary font-semibold text-xs">Client Id</span>
 									<input type="text" placeholder="Client Id" bind:value={oauths[k]['id']} />
 								</label>
-								<label>
+								<label for="{k}_client_secret_oauth">
 									<span class="text-primary font-semibold text-xs">Client Secret</span>
-									<input type="text" placeholder="Client Secret" bind:value={oauths[k]['secret']} />
+									<Password
+										id="{k}_client_secret_oauth"
+										placeholder="Client Secret"
+										bind:password={oauths[k]['secret']}
+									/>
 								</label>
 								{#if k === 'visma' || !windmillBuiltins.includes(k)}
 									<div class="mb-8">

package/package/components/AutheliaSetting.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { run } from 'svelte/legacy';
 import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
+import Password from './Password.svelte';
 import Toggle from './Toggle.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
@@ -66,11 +67,12 @@ run(() => {
 					bind:value={value['id']}
 				/>
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="authelia_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
-				<TextInput
-					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
-					bind:value={value['secret']}
+				<Password
+					id="authelia_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
 				/>
 			</label>
 		</SettingCard>

package/package/components/AuthentikSetting.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import { run } from 'svelte/legacy';
 import IconedResourceType from './IconedResourceType.svelte';
+import Password from './Password.svelte';
 import Toggle from './Toggle.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
@@ -60,9 +61,13 @@ run(() => {
 				<span class="text-emphasis font-semibold text-xs">Client Id</span>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />
 			</label>
-			<label>
+			<label for="authentik_client_secret">
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
-				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
+				<Password
+					id="authentik_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
+				/>
 			</label>
 		</SettingCard>
 	{/if}

package/package/components/DisplayResult.svelte

@@ -82,12 +82,6 @@ let resultDownloadHref = $derived(resultApiPath
     ? `${base}/api${resultApiPath}`
     : `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`);
 let resultDownloadName = $derived(`${filename ?? 'result'}.json`);
-async function onResultDownload(e) {
-    if (!resultApiPath || !shouldDownloadViaClient())
-        return;
-    e.preventDefault();
-    await downloadViaClient(resultApiPath, resultDownloadName);
-}
 function checkIfS3(result, keys) {
     return keys.includes('s3') && typeof result.s3 === 'string';
 }
@@ -875,13 +869,17 @@ $effect(() => {
 					{:else}
 						{#if largeObject}
 							<div class="text-xs text-emphasis"
-								><a
-									download={resultDownloadName}
-									href={resultDownloadHref}
-									onclick={onResultDownload}
-								>
-									Download {filename ? '' : 'as JSON'}
-								</a>
+								>{#if resultApiPath && shouldDownloadViaClient()}
+									<button
+										onclick={() => downloadViaClient(resultApiPath!, resultDownloadName)}
+									>
+										Download {filename ? '' : 'as JSON'}
+									</button>
+								{:else}
+									<a download={resultDownloadName} href={resultDownloadHref}>
+										Download {filename ? '' : 'as JSON'}
+									</a>
+								{/if}
 								{#if download_as_csv}
 									<DownloadCsv
 										getContent={() => convertJsonToCsv(result)}

package/package/components/KanidmSetting.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { run } from 'svelte/legacy';
 import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
+import Password from './Password.svelte';
 import Toggle from './Toggle.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
@@ -72,11 +73,12 @@ run(() => {
 					bind:value={value['id']}
 				/>
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="kanidm_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
-				<TextInput
-					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
-					bind:value={value['secret']}
+				<Password
+					id="kanidm_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
 				/>
 			</label>
 		</SettingCard>

package/package/components/KeycloakSetting.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { untrack } from 'svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
+import Password from './Password.svelte';
 import Toggle from './Toggle.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
@@ -72,11 +73,12 @@ $effect.pre(() => {
 					bind:value={value['id']}
 				/>
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="keycloak_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
-				<TextInput
-					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
-					bind:value={value['secret']}
+				<Password
+					id="keycloak_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
 				/>
 			</label>
 		</SettingCard>

package/package/components/LogViewer.svelte

@@ -136,12 +136,6 @@ $effect.pre(() => {
 let logsApiPath = $derived(`/w/${$workspaceStore}/jobs_u/get_logs/${jobId}`);
 let downloadHref = $derived(withExternalDomain(`${base}/api${logsApiPath}`));
 let downloadName = $derived(`windmill_logs_${jobId}.txt`);
-async function onDownloadClick(e) {
-    if (!shouldDownloadViaClient())
-        return;
-    e.preventDefault();
-    await downloadViaClient(logsApiPath, downloadName);
-}
 let truncatedContent = $derived(truncateContent(content, loadedFromObjectStore, LOG_LIMIT));
 let prefixInfo = $derived(findPrefixInfo(truncatedContent));
 let downloadStartUrl = $derived(findStartUrl(truncatedContent, prefixInfo));
@@ -284,14 +278,21 @@ let html = $derived.by(() => {
 				<div class="flex gap-2 justify-end flex-1">
 					{#if jobId && download}
 						<div class="flex items-center">
-							<a
-								class="text-primary pb-0.5"
-								target="_blank"
-								href={downloadHref}
-								download={downloadName}
-								onclick={onDownloadClick}
-								><Download size="14" />
-							</a>
+							{#if shouldDownloadViaClient()}
+								<button
+									class="text-primary pb-0.5"
+									onclick={() => downloadViaClient(logsApiPath, downloadName)}
+									><Download size="14" />
+								</button>
+							{:else}
+								<a
+									class="text-primary pb-0.5"
+									target="_blank"
+									href={downloadHref}
+									download={downloadName}
+									><Download size="14" />
+								</a>
+							{/if}
 						</div>
 					{/if}
 					<button onclick={logViewer.openDrawer}><Expand size="12" /></button>

package/package/components/NextcloudSetting.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import CollapseLink from './CollapseLink.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
+import Password from './Password.svelte';
 import Toggle from './Toggle.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable(), baseUrl } = $props();
@@ -76,14 +77,15 @@ $effect(() => {
 					bind:value={value['id']}
 				/>
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="nextcloud_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
 				<span class="text-secondary font-normal text-xs"
 					>Client Secret from your Nextcloud OAuth2 app configuration</span
 				>
-				<TextInput
-					inputProps={{ type: 'password', placeholder: 'Client Secret' }}
-					bind:value={value['secret']}
+				<Password
+					id="nextcloud_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
 				/>
 			</label>
 			<CollapseLink text="Instructions">

package/package/components/OAuthSetting.svelte

@@ -6,6 +6,7 @@ import { untrack } from 'svelte';
 import { enterpriseLicense } from '../stores';
 import Button from './common/button/Button.svelte';
 import TextInput from './text_input/TextInput.svelte';
+import Password from './Password.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
 let { name, value = $bindable(), login = true, eeOnly = false } = $props();
 // For Microsoft SSO, tenant is embedded in the login_config URLs, so we need
@@ -110,11 +111,12 @@ let enabled = $derived(value != undefined && !(eeOnly && !$enterpriseLicense));
 					bind:value={value['id']}
 				/>
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="{name}_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Client Secret</span>
-				<TextInput
-					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
-					bind:value={value['secret']}
+				<Password
+					id="{name}_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
 				/>
 			</label>
 			{#if name == 'microsoft' || name == 'teams'}

package/package/components/OktaSetting.svelte

@@ -4,6 +4,7 @@ import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import Password from './Password.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
 let lastValues = { domain: undefined, custom: undefined };
@@ -87,12 +88,16 @@ $effect.pre(() => {
 				>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="okta_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
 				<span class="text-secondary font-normal text-xs"
 					>from the CLIENT SECRETS section of the okta service configuration</span
 				>
-				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
+				<Password
+					id="okta_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
+				/>
 			</label>
 			<CollapseLink text="Instructions">
 				<div class="text-xs text-primary border rounded-md p-4 space-y-3">

package/package/components/ParqetCsvTableRenderer.svelte

@@ -174,16 +174,24 @@ run(() => {
 	{#if !disable_download && !s3resource.endsWith('.csv')}
 		{@const csvApiPath = `/w/${workspaceId}/job_helpers/download_s3_parquet_file_as_csv?file_key=${encodeURIComponent(s3resource)}${storage ? `&storage=${storage}` : ''}`}
 		{@const csvName = (s3resource.split('/').pop() ?? 'download') + '.csv'}
-		<a
-			target="_blank"
-			href="{base}/api{csvApiPath}"
-			class="text-secondary w-full text-right underline text-2xs whitespace-nowrap"
-			onclick={async (e) => {
-				if (!shouldDownloadViaClient()) return
-				e.preventDefault()
-				await downloadViaClient(csvApiPath, csvName)
-			}}><div class="flex flex-row-reverse gap-2 items-center"><Download size={12} /> CSV</div></a
-		>
+		{#if shouldDownloadViaClient()}
+			<button
+				class="text-secondary w-full text-right underline text-2xs whitespace-nowrap"
+				onclick={() => downloadViaClient(csvApiPath, csvName)}
+				><div class="flex flex-row-reverse gap-2 items-center"
+					><Download size={12} /> CSV</div
+				></button
+			>
+		{:else}
+			<a
+				target="_blank"
+				href="{base}/api{csvApiPath}"
+				class="text-secondary w-full text-right underline text-2xs whitespace-nowrap"
+				><div class="flex flex-row-reverse gap-2 items-center"
+					><Download size={12} /> CSV</div
+				></a
+			>
+		{/if}
 	{/if}
 
 	{#if nbRows != undefined}

package/package/components/PocketIdSetting.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { untrack } from 'svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
+import Password from './Password.svelte';
 import Toggle from './Toggle.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
@@ -71,11 +72,12 @@ function handleToggle(e) {
 					bind:value={value['id']}
 				/>
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="pocketid_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Client Secret</span>
-				<TextInput
-					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
-					bind:value={value['secret']}
+				<Password
+					id="pocketid_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
 				/>
 			</label>
 		</SettingCard>

package/package/components/ZitadelSetting.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { run } from 'svelte/legacy';
 import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
+import Password from './Password.svelte';
 import Toggle from './Toggle.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
@@ -64,11 +65,12 @@ run(() => {
 					bind:value={value['id']}
 				/>
 			</label>
-			<label>
+			<label for="zitadel_client_secret">
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
-				<TextInput
-					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
-					bind:value={value['secret']}
+				<Password
+					id="zitadel_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
 				/>
 			</label>
 		</SettingCard>

package/package/components/common/fileDownload/FileDownload.svelte

@@ -9,27 +9,26 @@ let apiPath = $derived(`${appPath
     ? `/w/${workspace}/apps_u/download_s3_file/${appPath}`
     : `/w/${workspace}/job_helpers/download_s3_file`}?${appPath ? 's3' : 'file_key'}=${encodeURIComponent(s3object?.s3 ?? '')}${s3object?.storage ? `&storage=${s3object.storage}` : ''}${appPath && s3object?.presigned ? `&${s3object?.presigned}` : ''}`);
 let href = $derived(`${base}/api${apiPath}`);
-async function onclick(e) {
-    if (!shouldDownloadViaClient())
-        return;
-    e.preventDefault();
-    await downloadViaClient(apiPath, filename);
-}
+const sharedClass = `relative center-center flex w-full text-center font-normal text-primary text-sm
+border border-dashed border-gray-400 hover:border-blue-500
+focus-within:border-blue-500 hover:bg-blue-50 dark:hover:bg-frost-900 focus-within:bg-blue-50
+duration-200 rounded-lg p-1 gap-2`;
 </script>
 
 {#if s3object && s3object?.s3}
-	<a
-		class="relative center-center flex w-full text-center font-normal text-primary text-sm
-border border-dashed border-gray-400 hover:border-blue-500
-focus-within:border-blue-500 hover:bg-blue-50 dark:hover:bg-frost-900 focus-within:bg-blue-50
-duration-200 rounded-lg p-1 gap-2"
-		{href}
-		download={filename}
-		{onclick}
-	>
-		<Download />
-		<span>
-			{s3object?.storage ? `s3://${s3object.storage}/${s3object.s3}` : `s3:///${s3object.s3}`}
-		</span>
-	</a>
+	{#if shouldDownloadViaClient()}
+		<button class={sharedClass} onclick={() => downloadViaClient(apiPath, filename)}>
+			<Download />
+			<span>
+				{s3object?.storage ? `s3://${s3object.storage}/${s3object.s3}` : `s3:///${s3object.s3}`}
+			</span>
+		</button>
+	{:else}
+		<a class={sharedClass} {href} download={filename}>
+			<Download />
+			<span>
+				{s3object?.storage ? `s3://${s3object.storage}/${s3object.s3}` : `s3:///${s3object.s3}`}
+			</span>
+		</a>
+	{/if}
 {/if}

package/package/components/propertyPicker/ObjectViewer.svelte

@@ -338,18 +338,26 @@ let menuItems = $derived([
 						{#if getTypeAsString(jsonFiltered) === 's3object'}
 							{@const s3DownloadApiPath = `/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${encodeURIComponent(jsonFiltered?.s3 ?? '')}${jsonFiltered?.storage ? `&storage=${jsonFiltered.storage}` : ''}`}
 							{@const s3DownloadName = jsonFiltered?.s3.split('/').pop() ?? 'unnamed_download.file'}
-							<a
-								class="text-secondary underline font-semibold text-2xs whitespace-nowrap ml-1 w-fit"
-								href={`/api${s3DownloadApiPath}`}
-								download={s3DownloadName}
-								onclick={async (e) => {
-									if (!shouldDownloadViaClient()) return
-									e.preventDefault()
-									await downloadViaClient(s3DownloadApiPath, s3DownloadName)
-								}}
-							>
-								<span class="flex items-center gap-1"><Download size={12} />download</span>
-							</a>
+							{#if shouldDownloadViaClient()}
+								<button
+									class="text-secondary underline font-semibold text-2xs whitespace-nowrap ml-1 w-fit"
+									onclick={() => downloadViaClient(s3DownloadApiPath, s3DownloadName)}
+								>
+									<span class="flex items-center gap-1"
+										><Download size={12} />download</span
+									>
+								</button>
+							{:else}
+								<a
+									class="text-secondary underline font-semibold text-2xs whitespace-nowrap ml-1 w-fit"
+									href={`/api${s3DownloadApiPath}`}
+									download={s3DownloadName}
+								>
+									<span class="flex items-center gap-1"
+										><Download size={12} />download</span
+									>
+								</a>
+							{/if}
 							<button
 								class="text-secondary underline text-2xs whitespace-nowrap ml-1"
 								onclick={() => {