windmill-components 1.448.50 → 1.472.2

package/package/components/AddUser.svelte

@@ -1,7 +1,8 @@
 <script>import { createEventDispatcher } from 'svelte';
 import { globalEmailInvite, superadmin, workspaceStore } from '../stores';
 import { SettingService, UserService, WorkspaceService } from '../gen';
-import { Button, Popup } from './common';
+import { Button } from './common';
+import Popover from './meltComponents/Popover.svelte';
 import { sendUserToast } from '../toast';
 import { isCloudHosted } from '../cloud';
 import { goto } from '../navigation';
@@ -59,64 +60,61 @@ async function addUser() {
 let selected = 'developer';
 </script>
 
-<Popup
-	floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
->
-	<svelte:fragment slot="button">
+<Popover placement="bottom-end">
+	<svelte:fragment slot="trigger">
 		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: UserPlus }}>
 			Add new user
 		</Button>
 	</svelte:fragment>
-	<div class="flex flex-col w-72 p-2">
-		<span class="text-sm mb-2 leading-6 font-semibold">Add a new user</span>
+	<svelte:fragment slot="content">
+		<div class="flex flex-col w-72 p-4">
+			<span class="text-sm mb-2 leading-6 font-semibold">Add a new user</span>
 
-		<span class="text-xs mb-1 leading-6">Email</span>
-		<input type="email mb-1" on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
+			<span class="text-xs mb-1 leading-6">Email</span>
+			<input type="email mb-1" on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
 
-		{#if !automateUsernameCreation}
-			<span class="text-xs mb-1 pt-2 leading-6">Username</span>
-			<input type="text" on:keyup={handleKeyUp} placeholder="username" bind:value={username} />
-		{/if}
+			{#if !automateUsernameCreation}
+				<span class="text-xs mb-1 pt-2 leading-6">Username</span>
+				<input type="text" on:keyup={handleKeyUp} placeholder="username" bind:value={username} />
+			{/if}
 
-		<span class="text-xs mb-1 pt-2 leading-6">Role</span>
-		<ToggleButtonGroup bind:selected class="mb-4">
-			<ToggleButton
-				value="operator"
+			<span class="text-xs mb-1 pt-2 leading-6">Role</span>
+			<ToggleButtonGroup bind:selected class="mb-4" let:item>
+				<ToggleButton
+					value="operator"
+					label="Operator"
+					tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+					{item}
+				/>
+				<ToggleButton
+					value="developer"
+					label="Developer"
+					tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+					{item}
+				/>
+				<ToggleButton
+					value="admin"
+					label="Admin"
+					tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+					{item}
+				/>
+			</ToggleButtonGroup>
+			<Button
+				variant="contained"
+				color="blue"
 				size="sm"
-				label="Operator"
-				tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
-			/>
-			<ToggleButton
-				position="center"
-				value="developer"
-				size="sm"
-				label="Developer"
-				tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
-			/>
-			<ToggleButton
-				position="right"
-				value="admin"
-				size="sm"
-				label="Admin"
-				tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
-			/>
-		</ToggleButtonGroup>
-		<Button
-			variant="contained"
-			color="blue"
-			size="sm"
-			on:click={() => {
-				addUser().then(() => {
-					// @ts-ignore
-					email = undefined
-					// @ts-ignore
-					username = undefined
-				})
-			}}
-			disabled={email === undefined || (!automateUsernameCreation && username === undefined)}
-		>
-			Add
-		</Button>
-	</div>
-</Popup>
+				on:click={() => {
+					addUser().then(() => {
+						// @ts-ignore
+						email = undefined
+						// @ts-ignore
+						username = undefined
+					})
+				}}
+				disabled={email === undefined || (!automateUsernameCreation && username === undefined)}
+			>
+				Add
+			</Button>
+		</div>
+	</svelte:fragment>
+</Popover>

package/package/components/ApiConnectForm.svelte

@@ -3,12 +3,12 @@ import { workspaceStore } from '../stores';
 import { base } from '../base';
 import { emptySchema, emptyString } from '../utils';
 import SchemaForm from './SchemaForm.svelte';
-import SimpleEditor from './SimpleEditor.svelte';
 import Toggle from './Toggle.svelte';
 import TestConnection from './TestConnection.svelte';
 import SupabaseIcon from './icons/SupabaseIcon.svelte';
-import Popup from './common/popup/Popup.svelte';
+import Popover from './meltComponents/Popover.svelte';
 import Button from './common/button/Button.svelte';
+import { Loader2 } from 'lucide-svelte';
 export let resourceType;
 export let resourceTypeInfo;
 export let args = {};
@@ -19,8 +19,11 @@ let schema = emptySchema();
 let notFound = false;
 let supabaseWizard = false;
 async function isSupabaseAvailable() {
-    supabaseWizard =
-        ((await OauthService.listOauthConnects()) ?? {})['supabase_wizard'] != undefined;
+    try {
+        supabaseWizard =
+            ((await OauthService.listOauthConnects()) ?? {})['supabase_wizard'] != undefined;
+    }
+    catch (error) { }
 }
 async function loadSchema() {
     if (!resourceTypeInfo)
@@ -110,13 +113,12 @@ function parseTextFileContent() {
 		/>
 		<TestConnection {resourceType} {args} />
 		{#if resourceType == 'postgresql'}
-			<Popup
-				let:close
+			<Popover
 				floatingConfig={{
 					placement: 'bottom'
 				}}
 			>
-				<svelte:fragment slot="button">
+				<svelte:fragment slot="trigger">
 					<Button
 						spacingSize="sm"
 						size="xs"
@@ -128,32 +130,34 @@ function parseTextFileContent() {
 						From connection string
 					</Button>
 				</svelte:fragment>
-				<div class="block text-primary">
-					<div class="w-[550px] flex flex-col items-start gap-1">
-						<div class="flex flex-row gap-1 w-full">
-							<input
-								type="text"
-								bind:value={connectionString}
-								placeholder="postgres://user:password@host:5432/dbname?sslmode=disable"
-							/>
-							<Button
-								size="xs"
-								color="blue"
-								buttonType="button"
-								on:click={() => {
-									parseConnectionString(close)
-								}}
-								disabled={connectionString.length <= 0}
-							>
-								Apply
-							</Button>
+				<svelte:fragment slot="content" let:close>
+					<div class="block text-primary p-4">
+						<div class="w-[550px] flex flex-col items-start gap-1">
+							<div class="flex flex-row gap-1 w-full">
+								<input
+									type="text"
+									bind:value={connectionString}
+									placeholder="postgres://user:password@host:5432/dbname?sslmode=disable"
+								/>
+								<Button
+									size="xs"
+									color="blue"
+									buttonType="button"
+									on:click={() => {
+										parseConnectionString(close)
+									}}
+									disabled={connectionString.length <= 0}
+								>
+									Apply
+								</Button>
+							</div>
+							{#if !validConnectionString}
+								<p class="text-red-500 text-xs">Could not parse connection string</p>
+							{/if}
 						</div>
-						{#if !validConnectionString}
-							<p class="text-red-500 text-xs">Could not parse connection string</p>
-						{/if}
 					</div>
-				</div>
-			</Popup>
+				</svelte:fragment>
+			</Popover>
 		{/if}
 		{#if resourceType == 'postgresql' && supabaseWizard}
 			<a
@@ -177,13 +181,17 @@ function parseTextFileContent() {
 			>{error}</span
 		>{:else}<div class="py-2" />{/if}
 	<div class="h-full w-full border p-1 rounded">
-		<SimpleEditor
-			bind:this={rawCodeEditor}
-			autoHeight
-			lang="json"
-			bind:code={rawCode}
-			fixedOverflowWidgets={false}
-		/>
+		{#await import('./SimpleEditor.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				bind:this={rawCodeEditor}
+				autoHeight
+				lang="json"
+				bind:code={rawCode}
+				fixedOverflowWidgets={false}
+			/>
+		{/await}
 	</div>
 {:else if resourceTypeInfo?.format_extension}
 	<h5 class="mt-4 inline-flex items-center gap-4">
@@ -191,13 +199,17 @@ function parseTextFileContent() {
 	</h5>
 	<div class="py-2" />
 	<div class="h-full w-full border p-1 rounded">
-		<SimpleEditor
-			bind:this={rawCodeEditor}
-			autoHeight
-			lang={resourceTypeInfo.format_extension}
-			bind:code={textFileContent}
-			fixedOverflowWidgets={false}
-		/>
+		{#await import('./SimpleEditor.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				bind:this={rawCodeEditor}
+				autoHeight
+				lang={resourceTypeInfo.format_extension}
+				bind:code={textFileContent}
+				fixedOverflowWidgets={false}
+			/>
+		{/await}
 	</div>
 {:else}
 	<SchemaForm

package/package/components/AppConnectInner.svelte

@@ -41,15 +41,16 @@ let connects = undefined;
 let connectsManual = undefined;
 let args = {};
 let renderDescription = true;
-function computeCandidates(resourceType, argsKeys) {
+function computeCandidates(resourceType, argsKeys, passwords) {
     return apiTokenApps[resourceType]?.linkedSecret
         ? [apiTokenApps[resourceType]?.linkedSecret]
-        : argsKeys.filter((x) => ['token', 'secret', 'key', 'pass', 'private'].some((y) => x.toLowerCase().includes(y)));
+        : argsKeys.filter((x) => passwords.includes(x) ||
+            ['token', 'secret', 'key', 'pass', 'private'].some((y) => x.toLowerCase().includes(y)));
 }
 let linkedSecret = undefined;
 let linkedSecretCandidates = undefined;
-function computeLinkedSecret(resourceType, argsKeys) {
-    linkedSecretCandidates = computeCandidates(resourceType, argsKeys);
+function computeLinkedSecret(resourceType, argsKeys, passwords) {
+    linkedSecretCandidates = computeCandidates(resourceType, argsKeys, passwords);
     return (forceSecretValue(resourceType) ??
         linkedSecretCandidates?.sort((ua, ub) => linkedSecretValue(ub) - linkedSecretValue(ua))?.[0]);
 }
@@ -141,12 +142,16 @@ export async function loadResourceTypes() {
     catch (e) { }
 }
 function popupListener(event) {
+    console.log('Received oauth popup message');
     let data = event.data;
     if (event.origin == null || event.origin !== window.location.origin) {
+        console.log('Received oauth popup message from different origin', event.origin, window.location.origin);
         return;
     }
-    window.removeEventListener('message', popupListener);
-    processPopupData(data);
+    if (data.type == 'success' || data.type == 'error') {
+        window.removeEventListener('message', popupListener);
+        processPopupData(data);
+    }
 }
 function handleStorageEvent(event) {
     if (event.key === 'oauth-callback') {
@@ -170,6 +175,7 @@ onDestroy(() => {
     window.removeEventListener('storage', handleStorageEvent);
 });
 function processPopupData(data) {
+    console.log('Processing oauth popup data');
     if (data.type === 'error') {
         sendUserToast(data.error, true);
         step = 2;
@@ -195,9 +201,13 @@ async function getResourceTypeInfo() {
         workspace: $workspaceStore,
         path: resourceType
     });
-    const newArgsKeys = Object.keys(resourceTypeInfo?.schema?.['properties'] ?? {}) ?? [];
+    const props = resourceTypeInfo?.schema?.['properties'] ?? {};
+    const newArgsKeys = Object.keys(props) ?? [];
+    const passwords = newArgsKeys.filter((x) => {
+        return props?.[x]?.password;
+    });
     if (!linkedSecret) {
-        linkedSecret = computeLinkedSecret(resourceType, newArgsKeys);
+        linkedSecret = computeLinkedSecret(resourceType, newArgsKeys, passwords);
     }
 }
 export async function next() {