windmill-components 1.309.7 → 1.352.0

package/package/components/AppConnect.svelte

@@ -1,566 +0,0 @@
-<script context="module">"use strict";
-const apiTokenApps = {
-    airtable: {
-        img: '/airtable_connect.png',
-        instructions: [
-            'Go to <a href="https://airtable.com/create/tokens" target="_blank" rel=”noopener noreferrer”>https://airtable.com/create/tokens</a>',
-            'Click on "Create new token"',
-            'Set a name, specify the scopes or the access level and click on "Create token"',
-            'Copy the token'
-        ]
-    },
-    discord_webhook: {
-        img: '/discord_webhook.png',
-        instructions: ['Click on Server Settings', 'Click on Integration', 'Find "Webhooks"'],
-        linkedSecret: 'webhook_url'
-    },
-    toggl: {
-        img: '/toggl_connect.png',
-        instructions: [
-            'Go to <a href="https://track.toggl.com/profile" target="_blank" rel=”noopener noreferrer”>https://track.toggl.com/profile</a>',
-            'Find "API Token"'
-        ]
-    },
-    mailchimp: {
-        img: '/mailchimp_connect.png',
-        instructions: [
-            'Go to <a href="https://admin.mailchimp.com/account/api" target="_blank" rel=”noopener noreferrer”>https://admin.mailchimp.com/account/api</a>',
-            'Find "Your API Keys"'
-        ]
-    },
-    sendgrid: {
-        img: '/sendgrid_connect.png',
-        instructions: [
-            'Go to <a href="https://app.sendgrid.com/settings/api_keys" target="_blank" rel=”noopener noreferrer”>https://app.sendgrid.com/settings/api_keys</a>',
-            'Create an API key',
-            'Copy your key'
-        ]
-    },
-    supabase: {
-        img: '/supabase_connect.png',
-        instructions: ['Go to the API Settings of your app to find the project URL and key']
-    },
-    square: {
-        img: '/square_connect.gif',
-        instructions: [
-            'Go to <a href="https://developer.squareup.com/apps" target="_blank" rel=”noopener noreferrer”>https://developer.squareup.com/apps</a>',
-            'In the left pane, choose Credentials',
-            'At the top of the page, choose Production mode for a production access token or Sandbox mode for a Sandbox access token.'
-        ]
-    }
-};
-</script>
-
-<script>import { oauthStore, workspaceStore } from '../stores';
-import IconedResourceType from './IconedResourceType.svelte';
-import { OauthService, ResourceService, VariableService } from '../gen';
-import { emptyString, truncateRev, urlize } from '../utils';
-import { createEventDispatcher } from 'svelte';
-import Path from './Path.svelte';
-import { Button, Drawer, Skeleton } from './common';
-import DrawerContent from './common/drawer/DrawerContent.svelte';
-import ApiConnectForm from './ApiConnectForm.svelte';
-import SearchItems from './SearchItems.svelte';
-import WhitelistIp from './WhitelistIp.svelte';
-import { sendUserToast } from '../toast';
-import OauthScopes from './OauthScopes.svelte';
-import DarkModeObserver from './DarkModeObserver.svelte';
-import Markdown from 'svelte-exmarkdown';
-import autosize from '../autosize';
-import Required from './Required.svelte';
-import Toggle from './Toggle.svelte';
-import { Pen } from 'lucide-svelte';
-import GfmMarkdown from './GfmMarkdown.svelte';
-export let newPageOAuth = false;
-const nativeLanguagesCategory = [
-    'postgresql',
-    'mysql',
-    'bigquery',
-    'snowflake',
-    'mssql',
-    'graphql'
-];
-let filter = '';
-let manual = false;
-let value = '';
-let valueToken = undefined;
-let connects = undefined;
-let connectsManual = undefined;
-let args = {};
-let renderDescription = true;
-$: linkedSecretCandidates = apiTokenApps[resourceType]?.linkedSecret
-    ? [apiTokenApps[resourceType]?.linkedSecret]
-    : args != undefined
-        ? Object.keys(args).filter((x) => ['token', 'secret', 'key', 'pass', 'private'].some((y) => x.toLowerCase().includes(y)))
-        : undefined;
-function linkedSecretValue(x) {
-    let r = 0;
-    let lowerCasedX = x.toLowerCase();
-    if (lowerCasedX.includes('secret')) {
-        r += 10;
-    }
-    if (lowerCasedX.includes('password')) {
-        r += 5;
-    }
-    if (lowerCasedX.includes('private')) {
-        r += 4;
-    }
-    if (lowerCasedX.includes('key')) {
-        r += 3;
-    }
-    if (lowerCasedX.includes('token')) {
-        r += 2;
-    }
-    if (lowerCasedX.includes('pass')) {
-        r += 1;
-    }
-    return r;
-}
-$: linkedSecret = linkedSecretCandidates?.sort((ua, ub) => linkedSecretValue(ub) - linkedSecretValue(ua))?.[0];
-let scopes = [];
-let extra_params = [];
-let path;
-let description = '';
-let drawer;
-let resourceType = '';
-let resourceTypeInfo = undefined;
-let step = 1;
-let no_back = false;
-let pathError = '';
-export async function open(rt) {
-    step = 1;
-    value = '';
-    description = '';
-    no_back = false;
-    resourceType = rt ?? '';
-    valueToken = undefined;
-    await loadConnects();
-    const connect = connects?.[resourceType];
-    if (connect) {
-        scopes = connect.scopes;
-        extra_params = Object.entries(connect.extra_params ?? {});
-    }
-    else {
-        manual = true;
-        if (rt) {
-            next();
-        }
-    }
-    drawer.openDrawer?.();
-}
-export function openFromOauth(rt) {
-    resourceType = rt;
-    value = $oauthStore?.access_token;
-    valueToken = $oauthStore;
-    $oauthStore = undefined;
-    manual = false;
-    step = 3;
-    no_back = true;
-    drawer.openDrawer?.();
-}
-async function loadConnects() {
-    const nconnects = (await OauthService.listOauthConnects());
-    if (nconnects['supabase_wizard']) {
-        delete nconnects['supabase_wizard'];
-    }
-    connects = nconnects;
-}
-const connectAndManual = ['gitlab'];
-async function loadResources() {
-    await loadConnects();
-    const availableRts = await ResourceService.listResourceTypeNames({
-        workspace: $workspaceStore
-    });
-    connectsManual = availableRts
-        .filter((x) => connectAndManual.includes(x) || !Object.keys(connects ?? {}).includes(x))
-        .map((x) => [
-        x,
-        apiTokenApps[x] ?? {
-            instructions: '',
-            img: undefined,
-            linkedSecret: undefined
-        }
-    ]);
-    const filteredNativeLanguages = filteredConnectsManual?.filter((o) => nativeLanguagesCategory?.includes(o[0]) ?? false);
-    try {
-        filteredConnectsManual = [
-            ...(filteredNativeLanguages ?? []),
-            ...(filteredConnectsManual ?? []).filter(([key, _]) => !nativeLanguagesCategory.includes(key))
-        ];
-    }
-    catch (e) { }
-}
-async function next() {
-    if (step == 1 && manual) {
-        resourceTypeInfo = await ResourceService.getResourceType({
-            workspace: $workspaceStore,
-            path: resourceType
-        });
-        step += 1;
-        args = {};
-    }
-    else if (step == 1 && !manual) {
-        const url = new URL(`/api/oauth/connect/${resourceType}`, window.location.origin);
-        url.searchParams.append('scopes', scopes.join('+'));
-        if (extra_params.length > 0) {
-            extra_params.forEach(([key, value]) => url.searchParams.append(key, value));
-        }
-        if (!newPageOAuth) {
-            window.location.href = url.toString();
-        }
-        else {
-            window.open(url.toString(), '_blank');
-            drawer.closeDrawer();
-        }
-    }
-    else {
-        let exists = await VariableService.existsVariable({
-            workspace: $workspaceStore,
-            path
-        });
-        if (exists) {
-            throw Error(`Variable at path ${path} already exists. Delete it or pick another path`);
-        }
-        exists = await ResourceService.existsResource({
-            workspace: $workspaceStore,
-            path
-        });
-        if (exists) {
-            throw Error(`Resource at path ${path} already exists. Delete it or pick another path`);
-        }
-        let account = undefined;
-        if (valueToken?.expires_in != undefined) {
-            account = Number(await OauthService.createAccount({
-                workspace: $workspaceStore,
-                requestBody: {
-                    refresh_token: valueToken.refresh_token ?? '',
-                    expires_in: valueToken.expires_in,
-                    client: resourceType
-                }
-            }));
-        }
-        const resourceValue = args;
-        let saveVariable = false;
-        if (!manual || linkedSecret != undefined) {
-            let v = manual ? args[linkedSecret ?? ''] : value;
-            if (typeof v == 'string' && v != '' && !v.startsWith('$var:')) {
-                saveVariable = true;
-                await VariableService.createVariable({
-                    workspace: $workspaceStore,
-                    requestBody: {
-                        path,
-                        value: v,
-                        is_secret: true,
-                        description: emptyString(description)
-                            ? `${manual ? 'Token' : 'OAuth token'} for ${resourceType}`
-                            : description,
-                        is_oauth: !manual,
-                        account: account
-                    }
-                });
-                resourceValue[linkedSecret ?? 'token'] = `$var:${path}`;
-            }
-        }
-        await ResourceService.createResource({
-            workspace: $workspaceStore,
-            requestBody: {
-                resource_type: resourceType,
-                path,
-                value: resourceValue,
-                description
-            }
-        });
-        dispatch('refresh', path);
-        sendUserToast(`Saved resource${saveVariable ? ' and variable' : ''} path: ${path}`);
-        drawer.closeDrawer?.();
-    }
-}
-async function back() {
-    if (step > 1) {
-        step -= 1;
-    }
-}
-const dispatch = createEventDispatcher();
-$: isGoogleSignin =
-    step == 1 &&
-        (resourceType == 'google' ||
-            resourceType == 'gmail' ||
-            resourceType == 'gcal' ||
-            resourceType == 'gdrive' ||
-            resourceType == 'gsheets');
-$: disabled =
-    (step == 1 && resourceType == '') ||
-        (step == 2 &&
-            value == '' &&
-            args &&
-            args['token'] == '' &&
-            args['password'] == '' &&
-            args['api_key'] == '' &&
-            args['key'] == '' &&
-            linkedSecret != undefined) ||
-        (step == 3 && pathError != '') ||
-        !isValid;
-let isValid = true;
-let filteredConnects = [];
-let filteredConnectsManual = [];
-let darkMode = false;
-</script>
-
-<DarkModeObserver bind:darkMode />
-
-<SearchItems
-	{filter}
-	items={connects ? Object.entries(connects).sort((a, b) => a[0].localeCompare(b[0])) : undefined}
-	bind:filteredItems={filteredConnects}
-	f={(x) => x[0]}
-/>
-<SearchItems
-	{filter}
-	items={connectsManual?.sort((a, b) => a[0].localeCompare(b[0]))}
-	bind:filteredItems={filteredConnectsManual}
-	f={(x) => x[0]}
-/>
-
-<Drawer
-	bind:this={drawer}
-	on:close={() => {
-		dispatch('close')
-	}}
-	on:open={() => {
-		loadResources()
-	}}
-	size="800px"
->
-	<DrawerContent
-		title="Add a Resource"
-		on:close={drawer.closeDrawer}
-		tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
-		documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
-	>
-		{#if step == 1}
-			<div class="w-12/12 pb-2 flex flex-row my-1 gap-1">
-				<input
-					type="text"
-					placeholder="Search resource type"
-					bind:value={filter}
-					class="text-2xl grow"
-				/>
-			</div>
-
-			<h2 class="mb-4">OAuth APIs</h2>
-			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
-				{#if filteredConnects}
-					{#each filteredConnects as [key, values]}
-						<Button
-							size="sm"
-							variant="border"
-							color={key === resourceType ? 'blue' : 'light'}
-							btnClasses={key === resourceType ? '!border-2' : 'm-[1px]'}
-							on:click={() => {
-								manual = false
-								resourceType = key
-								scopes = values.scopes
-								extra_params = Object.entries(values.extra_params ?? {})
-							}}
-						>
-							<IconedResourceType name={key} after={true} width="20px" height="20px" />
-						</Button>
-					{/each}
-				{:else}
-					{#each new Array(3) as _}
-						<Skeleton layout={[[2]]} />
-					{/each}
-				{/if}
-			</div>
-			{#if connects && Object.keys(connects).length == 0}
-				<div class="text-secondary text-sm w-full"
-					>No OAuth APIs has been setup on the instance. To add oauth APIs, first sync the resource
-					types with the hub, then add oauth configuration. See <a
-						href="https://www.windmill.dev/docs/misc/setup_oauth">documentation</a
-					>
-				</div>
-			{/if}
-			{#if manual == false && resourceType != ''}
-				<h3>Scopes</h3>
-				{#if !manual && resourceType != ''}
-					<OauthScopes bind:scopes />
-				{/if}
-			{/if}
-
-			<h2 class="mt-8 mb-4">Others</h2>
-
-			{#if connectsManual && connectsManual?.length < 10}
-				<div class="text-tertiary p-2">
-					Resource Types have not been synced with the hub. Go to the admins workspace to sync them
-					(and add a schedule to do daily).
-				</div>
-			{/if}
-
-			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
-				{#if filteredConnectsManual}
-					{#each filteredConnectsManual as [key, _]}
-						{#if nativeLanguagesCategory.includes(key)}
-							<Button
-								size="sm"
-								variant="border"
-								color={key === resourceType ? 'blue' : 'light'}
-								btnClasses={key === resourceType ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-								on:click={() => {
-									manual = true
-									resourceType = key
-									next()
-									dispatch('click')
-								}}
-							>
-								<IconedResourceType name={key} after={true} width="20px" height="20px" />
-							</Button>
-						{/if}
-					{/each}
-				{/if}
-			</div>
-
-			<div class="mt-8 mb-4" />
-			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
-				{#if filteredConnectsManual}
-					{#each filteredConnectsManual as [key, _]}
-						{#if !nativeLanguagesCategory.includes(key)}
-							<!-- Exclude specific items -->
-							<Button
-								size="sm"
-								variant="border"
-								color={key === resourceType ? 'blue' : 'light'}
-								btnClasses={key === resourceType ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-								on:click={() => {
-									manual = true
-									resourceType = key
-									next()
-									dispatch('click')
-								}}
-							>
-								<IconedResourceType name={key} after={true} width="20px" height="20px" />
-							</Button>
-						{/if}
-					{/each}
-				{:else}
-					{#each new Array(9) as _}
-						<Skeleton layout={[[2]]} />
-					{/each}
-				{/if}
-			</div>
-		{:else if step == 2 && manual}
-			<Path
-				bind:error={pathError}
-				bind:path
-				initialPath=""
-				namePlaceholder={resourceType}
-				kind="resource"
-			/>
-
-			{#if apiTokenApps[resourceType]}
-				<h2 class="mt-4 mb-2">Instructions</h2>
-				<div class="pl-10">
-					<ol class="list-decimal">
-						{#each apiTokenApps[resourceType].instructions as step}
-							<li>
-								{@html step}
-							</li>
-						{/each}
-					</ol>
-				</div>
-				{#if apiTokenApps[resourceType].img}
-					<div class="mt-4 w-full overflow-hidden">
-						<img class="m-auto max-h-60" alt="connect" src={apiTokenApps[resourceType].img} />
-					</div>
-				{/if}
-			{:else if !emptyString(resourceTypeInfo?.description)}
-				<h4 class="mt-8 mb-2">{resourceTypeInfo?.name} description</h4>
-				<div class="text-sm">
-					<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
-				</div>
-			{/if}
-			{#if resourceType == 'postgresql' || resourceType == 'mysql' || resourceType == 'mongodb'}
-				<WhitelistIp />
-			{/if}
-
-			<h4 class="mt-8 inline-flex items-center gap-4"
-				>Resource description <Required required={false} />
-				<div class="flex gap-1 items-center">
-					<Toggle size="xs" bind:checked={renderDescription} />
-					<Pen size={14} />
-				</div>
-			</h4>
-			{#if renderDescription}
-				<div>
-					<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1">GH Markdown</div>
-					<textarea use:autosize bind:value={description} placeholder={'Resource description'} />
-				</div>
-			{:else if description == undefined || description == ''}
-				<div class="text-sm text-tertiary">No description provided</div>
-			{:else}
-				<div class="mt-2" />
-				<GfmMarkdown md={description} />
-			{/if}
-			<div class="mt-12">
-				{#key resourceTypeInfo}
-					<ApiConnectForm
-						{linkedSecret}
-						{linkedSecretCandidates}
-						{resourceType}
-						{resourceTypeInfo}
-						bind:args
-						bind:isValid
-					/>
-				{/key}
-			</div>
-		{:else}
-			<Path
-				initialPath=""
-				namePlaceholder={resourceType}
-				bind:error={pathError}
-				bind:path
-				kind="resource"
-			/>
-			{#if apiTokenApps[resourceType] || !manual}
-				<ul class="mt-10">
-					<li>
-						1. A secret variable containing the {apiTokenApps[resourceType]?.linkedSecret ??
-							'token'}
-						<span class="font-bold">{truncateRev(value, 5, '*****')}</span>
-						will be stored a
-						<span class="font-mono whitespace-nowrap">{path}</span>.
-					</li>
-					<li class="mt-4">
-						2. The resource containing that token will be stored at the same path <span
-							class="font-mono whitespace-nowrap">{path}</span
-						>. The Variable and Resource will be "linked together", they will be deleted and renamed
-						together.
-					</li></ul
-				>
-			{/if}
-		{/if}
-		<div slot="actions" class="flex gap-1">
-			{#if step > 1 && !no_back}
-				<Button variant="border" on:click={back}>Back</Button>
-			{/if}
-			{#if isGoogleSignin}
-				<button {disabled} on:click={next}>
-					<img
-						class="h-10 w-auto object-contain"
-						src={darkMode ? '/google_signin_dark.png' : '/google_signin_light.png'}
-						alt="Google sign-in"
-					/>
-				</button>
-			{:else}
-				<Button {disabled} on:click={next}>
-					{#if step == 1 && !manual}
-						Connect
-					{:else if step == 1 && manual}
-						Next
-					{:else}
-						Save
-					{/if}
-				</Button>
-			{/if}
-		</div>
-	</DrawerContent>
-</Drawer>

package/package/components/AppConnect.svelte.d.ts

@@ -1,23 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        newPageOAuth?: boolean | undefined;
-        open?: ((rt?: string) => Promise<void>) | undefined;
-        openFromOauth?: ((rt: string) => void) | undefined;
-    };
-    events: {
-        close: CustomEvent<any>;
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppConnectProps = typeof __propDef.props;
-export type AppConnectEvents = typeof __propDef.events;
-export type AppConnectSlots = typeof __propDef.slots;
-export default class AppConnect extends SvelteComponent<AppConnectProps, AppConnectEvents, AppConnectSlots> {
-    get open(): (rt?: string | undefined) => Promise<void>;
-    get openFromOauth(): (rt: string) => void;
-}
-export {};

package/package/components/ContextMenu.svelte

@@ -1,89 +0,0 @@
-<script context="module">import { writable } from 'svelte/store';
-// Using a Svelte store for global state management
-const openedContextMenus = writable(new Set());
-</script>
-
-<script>import { clickOutside } from '../utils';
-import Portal from 'svelte-portal';
-import { twMerge } from 'tailwind-merge';
-export let id;
-let contextMenuVisible = false;
-let menuX = 0;
-let menuY = 0;
-export let contextMenu = { menuItems: [] };
-function handleRightClick(event) {
-    event.preventDefault();
-    contextMenuVisible = true;
-    menuX = event.clientX;
-    menuY = event.clientY;
-    openedContextMenus.update((menus) => {
-        menus.forEach((menu) => menu.id !== id && menu.close());
-        menus.clear();
-        menus.add({ id, close: () => (contextMenuVisible = false) });
-        return menus;
-    });
-}
-function closeContextMenu() {
-    contextMenuVisible = false;
-    openedContextMenus.update((menus) => {
-        menus.clear();
-        return menus;
-    });
-}
-function handleClickOutside(event) {
-    if (contextMenuVisible) {
-        closeContextMenu();
-    }
-}
-</script>
-
-<svelte:window on:click={handleClickOutside} />
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div on:click={closeContextMenu} on:contextmenu={handleRightClick} class="h-full w-full">
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<slot />
-
-	{#if contextMenuVisible}
-		<Portal>
-			<div style="position: fixed; top: {menuY}px; left: {menuX}px; z-index:6000;">
-				<div class="rounded-md bg-surface border shadow-md divide-y w-64">
-					<div class="p-1" use:clickOutside={false}>
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						{#each contextMenu.menuItems as item}
-							<!-- svelte-ignore a11y-no-static-element-interactions -->
-							<!-- svelte-ignore a11y-click-events-have-key-events -->
-							<button
-								class={twMerge(
-									'flex items-center p-2 hover:bg-surface-hover cursor-pointer transition-all rounded-md  w-full',
-									item.color === 'red' && 'text-red-500',
-									item.color === 'green' && 'text-green-500',
-									item.color === 'blue' && 'text-blue-500',
-									item.disabled && 'opacity-50 cursor-not-allowed'
-								)}
-								on:click={() => {
-									item.onClick()
-									closeContextMenu()
-								}}
-								disabled={item.disabled}
-							>
-								<!-- svelte-ignore missing-declaration -->
-								<svelte:component this={item.icon} class="w-4 h-4" />
-
-								<span class="ml-2 text-xs">{item.label}</span>
-								{#if item.shortcut}
-									<span class="ml-auto text-xs text-gray-400">
-										{item.shortcut}
-									</span>
-								{/if}
-							</button>
-						{/each}
-					</div>
-				</div>
-			</div>
-		</Portal>
-	{/if}
-</div>
-
-<style></style>