windmill-components 1.473.1 → 1.493.2

package/package/components/settings/PremiumInfo.svelte

@@ -1,4 +1,4 @@
-<script>import { base } from '../../base';
+<script lang="ts">import { base } from '../../base';
 import { capitalize, pluralize, sendUserToast } from '../../utils';
 import DataTable from '../table/DataTable.svelte';
 import Cell from '../table/Cell.svelte';
@@ -6,9 +6,7 @@ import { WorkspaceService, UserService } from '../../gen';
 import { workspaceStore } from '../../stores';
 import { Button } from '../common';
 import Tooltip from '../Tooltip.svelte';
-import { ExternalLink, Loader2, Pen, X } from 'lucide-svelte';
-import { twMerge } from 'tailwind-merge';
-import Toggle from '../Toggle.svelte';
+import { ExternalLink, Pen, X } from 'lucide-svelte';
 import Section from '../Section.svelte';
 import Range from '../Range.svelte';
 import Label from '../Label.svelte';
@@ -58,7 +56,6 @@ async function loadPremiumInfo() {
     premiumInfo = {
         ...info,
         usage: info.usage ?? 0,
-        seats: info.seats ?? 1,
         owner: info.owner,
         developerNb,
         operatorNb,
@@ -67,26 +64,6 @@ async function loadPremiumInfo() {
         usedSeats
     };
 }
-let billingModeLoading = false;
-async function setAutomaticBilling(ev) {
-    try {
-        billingModeLoading = true;
-        await WorkspaceService.setAutomaticBilling({
-            workspace: $workspaceStore,
-            requestBody: {
-                automatic_billing: ev.detail,
-                seats: premiumInfo?.usedSeats
-            }
-        });
-    }
-    catch (err) {
-        sendUserToast("Couldn't update billing mode: " + err, true);
-    }
-    finally {
-        await loadPremiumInfo();
-        billingModeLoading = false;
-    }
-}
 let thresholdAlert = undefined;
 let newThresholdAlertAmount = undefined;
 let thresholdAlertOpen = false;
@@ -142,15 +119,17 @@ $: estimatedSeats && updateExecs();
 	<div class="flex flex-col gap-1">
 		<div class=" text-primary text-lg font-semibold">
 			{#if premiumInfo?.premium && plan}
-				Plan: {capitalize(plan)} plan{plan === 'team' && premiumInfo.automatic_billing
-					? ' (usage-based)'
-					: plan === 'team'
-					? ` (${premiumInfo.seats} seat${premiumInfo.seats > 1 ? 's' : ''})`
-					: ''}
+				Plan: {capitalize(plan)} plan{plan === 'team' ? ' (usage-based)' : ''}
 			{:else}
 				Plan: Free plan
 			{/if}
 		</div>
+		{#if premiumInfo?.status === 'past_due'}
+			<p class="text-red-500 text-base">
+				Your last invoice is unpaid. Please update your payment method in the customer portal to
+				prevent account downgrade and the interruption of your job executions.
+			</p>
+		{/if}
 	</div>
 </div>
 {#if customer_id}
@@ -170,79 +149,52 @@ $: estimatedSeats && updateExecs();
 	{#if premiumInfo?.premium}
 		<div class="flex flex-col gap-8 my-8">
 			{#if plan}
-				{#if plan === 'team' && !premiumInfo?.automatic_billing}
-					<div class="flex flex-row items-center gap-2">
-						<Toggle
-							checked={premiumInfo?.automatic_billing}
-							options={{
-								left: 'Static number of seats',
-								leftTooltip:
-									'You will be billed for a fixed number of seats, you have to manually adapt the number of seats in the customer portal based on your usage.',
-								right: 'Automatic billing based on usage',
-								rightTooltip:
-									'You will be billed for the maximum number of seats used in a given billing period.'
+				<div class="flex flex-col gap-1.5">
+					<p class="font-semibold text-sm">Billing threshold email alert</p>
+					<div class="flex flex-row gap-0.5 items-center">
+						<p class="text-base text-secondary mr-0.5"
+							>{thresholdAlert?.threshold_alert_amount
+								? thresholdAlert?.threshold_alert_amount + '$'
+								: 'Not set'}</p
+						>
+						<Button
+							on:click={() => {
+								newThresholdAlertAmount = thresholdAlert?.threshold_alert_amount ?? 10
+								thresholdAlertOpen = true
+							}}
+							size="xs"
+							spacingSize="xs2"
+							variant="border"
+							color="light"
+							iconOnly
+							startIcon={{
+								icon: Pen
 							}}
-							on:change={setAutomaticBilling}
-							disabled={billingModeLoading}
 						/>
-						{#if billingModeLoading}
-							<Loader2 class="animate-spin" />
-						{/if}
-					</div>
-				{/if}
-			{:else}
-				<div class="inline text-lg font-bold">Current plan: Free plan</div>
-			{/if}
-
-			{#if plan}
-				{#if premiumInfo?.automatic_billing}
-					<div class="flex flex-col gap-1.5">
-						<p class="font-semibold text-sm">Billing threshold email alert</p>
-						<div class="flex flex-row gap-0.5 items-center">
-							<p class="text-base text-secondary mr-0.5"
-								>{thresholdAlert?.threshold_alert_amount
-									? thresholdAlert?.threshold_alert_amount + '$'
-									: 'Not set'}</p
-							>
+						{#if thresholdAlert?.threshold_alert_amount}
 							<Button
 								on:click={() => {
-									newThresholdAlertAmount = thresholdAlert?.threshold_alert_amount ?? 10
-									thresholdAlertOpen = true
+									if (thresholdAlert) {
+										newThresholdAlertAmount = undefined
+										setThresholdAlert()
+									}
 								}}
+								variant="border"
 								size="xs"
 								spacingSize="xs2"
-								variant="border"
 								color="light"
 								iconOnly
 								startIcon={{
-									icon: Pen
+									icon: X
 								}}
 							/>
-							{#if thresholdAlert?.threshold_alert_amount}
-								<Button
-									on:click={() => {
-										if (thresholdAlert) {
-											newThresholdAlertAmount = undefined
-											setThresholdAlert()
-										}
-									}}
-									variant="border"
-									size="xs"
-									spacingSize="xs2"
-									color="light"
-									iconOnly
-									startIcon={{
-										icon: X
-									}}
-								/>
-							{/if}
-						</div>
-						<p class="italic text-xs">
-							An email notification will be sent to {premiumInfo.owner} if the specified threshold amount
-							is exceeded during a given month.
-						</p>
+						{/if}
 					</div>
-				{/if}
+					<p class="italic text-xs">
+						An email notification will be sent to {premiumInfo.owner} if the specified threshold amount
+						is exceeded during a given month.
+					</p>
+				</div>
 				<div class="w-full">
 					<DataTable>
 						<tbody class="divide-y">
@@ -311,52 +263,20 @@ $: estimatedSeats && updateExecs();
 							</tr>
 							<tr>
 								<Cell first
-									><div
-										class={twMerge(
-											'font-semibold',
-											plan === 'team' &&
-												premiumInfo.usedSeats > premiumInfo.seats &&
-												!premiumInfo.automatic_billing
-												? 'text-red-500'
-												: ''
-										)}
+									><div class="font-semibold"
 										>Used seats <Tooltip
 											>Highest between seats from developers + operators and seats from computations
-										</Tooltip>{plan === 'team' &&
-										premiumInfo.usedSeats > premiumInfo.seats &&
-										!premiumInfo.automatic_billing
-											? ' > Paid seats'
-											: ''}</div
+										</Tooltip></div
 									></Cell
 								>
 								<Cell last numeric>
-									<div
-										class={twMerge(
-											'text-base font-bold',
-											plan === 'team' &&
-												premiumInfo.usedSeats > premiumInfo.seats &&
-												!premiumInfo.automatic_billing
-												? 'text-red-500'
-												: ''
-										)}
-									>
-										u + c = {premiumInfo.usedSeats}{plan === 'team' &&
-										premiumInfo.usedSeats > premiumInfo.seats &&
-										!premiumInfo.automatic_billing
-											? ` > ${premiumInfo.seats}`
-											: ''}
+									<div class="text-base font-bold">
+										u + c = {premiumInfo.usedSeats}
 									</div>
 								</Cell>
 							</tr>
 						</tbody>
 					</DataTable>
-
-					{#if plan === 'team' && premiumInfo.usedSeats > premiumInfo.seats && !premiumInfo.automatic_billing}
-						<p class="text-red-500 mt-2 text-right text-base"
-							>You have exceeded your allowed number of seats, please update your plan in the
-							customer portal.
-						</p>
-					{/if}
 				</div>
 			{/if}
 		</div>
@@ -457,7 +377,7 @@ $: estimatedSeats && updateExecs();
 				{/each}
 			</ul>
 
-			<div class="grow" />
+			<div class="grow"></div>
 			{#if planTitle == 'Team'}
 				{#if plan != 'team'}
 					<div class="mt-4 mx-auto">

package/package/components/settings/PremiumInfo.svelte.d.ts

@@ -1,17 +1,21 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        plan: string | undefined;
-        customer_id: string | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type PremiumInfoProps = typeof __propDef.props;
-export type PremiumInfoEvents = typeof __propDef.events;
-export type PremiumInfoSlots = typeof __propDef.slots;
-export default class PremiumInfo extends SvelteComponent<PremiumInfoProps, PremiumInfoEvents, PremiumInfoSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const PremiumInfo: $$__sveltets_2_IsomorphicComponent<{
+    plan: string | undefined;
+    customer_id: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PremiumInfo = InstanceType<typeof PremiumInfo>;
+export default PremiumInfo;

package/package/components/settings/TokensTable.svelte

@@ -0,0 +1,379 @@
+<script lang="ts">import TableCustom from '../TableCustom.svelte';
+import { displayDate, copyToClipboard } from '../../utils';
+import { IntegrationService, UserService } from '../../gen';
+import { Button } from '../common';
+import { Clipboard, Plus } from 'lucide-svelte';
+import { workspaceStore, userWorkspaces } from '../../stores';
+import { createEventDispatcher } from 'svelte';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+import Toggle from '../Toggle.svelte';
+import ClipboardPanel from '../details/ClipboardPanel.svelte';
+import { sendUserToast } from '../../toast';
+import MultiSelectWrapper from '../multiselect/MultiSelectWrapper.svelte';
+let { showMcpMode = false, openWithMcpMode = false, defaultNewTokenLabel, defaultNewTokenWorkspace, scopes } = $props();
+// --- Local State ---
+let tokens = $state([]);
+let tokenPage = $state(1);
+let newTokenLabel = $state(defaultNewTokenLabel);
+let newToken = $state(undefined);
+let newTokenExpiration = $state(undefined);
+let newTokenWorkspace = $state(defaultNewTokenWorkspace);
+let newMcpApps = $state([]);
+let displayCreateToken = $state(scopes != undefined);
+let mcpCreationMode = $state(false);
+let newMcpScope = $state('favorites');
+let newMcpToken = $state(undefined);
+let loadingApps = $state(false);
+let errorFetchApps = $state(false);
+let allApps = $state([]);
+function ensureCurrentWorkspaceIncluded(workspacesList, currentWorkspace) {
+    if (!currentWorkspace) {
+        return workspacesList;
+    }
+    const hasCurrentWorkspace = workspacesList.some((w) => w.id === currentWorkspace);
+    if (hasCurrentWorkspace) {
+        return workspacesList;
+    }
+    return [{ id: currentWorkspace, name: currentWorkspace }, ...workspacesList];
+}
+const workspaces = $derived(ensureCurrentWorkspaceIncluded($userWorkspaces, $workspaceStore));
+const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/sse?token=`);
+const dispatch = createEventDispatcher();
+$effect(() => {
+    if (openWithMcpMode) {
+        handleCreateClick('mcpUrl');
+    }
+    listTokens();
+});
+$effect(() => {
+    if (mcpCreationMode) {
+        getAllApps();
+    }
+    else {
+        newMcpApps = [];
+    }
+});
+// --- Functions ---
+async function createToken(mcpMode = false) {
+    try {
+        let date;
+        if (newTokenExpiration) {
+            date = new Date(new Date().getTime() + newTokenExpiration * 1000);
+        }
+        let tokenScopes = scopes;
+        if (mcpMode) {
+            tokenScopes = [`mcp:${newMcpScope}`];
+            if (newMcpApps.length > 0) {
+                tokenScopes.push(`mcp:hub:${newMcpApps.join(',')}`);
+            }
+        }
+        const createdToken = await UserService.createToken({
+            requestBody: {
+                label: newTokenLabel,
+                expiration: date?.toISOString(),
+                scopes: tokenScopes,
+                workspace_id: mcpMode ? (newTokenWorkspace || $workspaceStore) : newTokenWorkspace
+            }
+        });
+        if (mcpMode) {
+            newMcpToken = `${createdToken}`;
+        }
+        else {
+            newToken = `${createdToken}`;
+        }
+        dispatch('tokenCreated', newToken ?? newMcpToken);
+        listTokens();
+        mcpCreationMode = false;
+        displayCreateToken = false;
+    }
+    catch (err) {
+        console.error('Failed to create token:', err);
+    }
+}
+function handleCreateClick(type) {
+    mcpCreationMode = type === 'mcpUrl';
+    displayCreateToken = true;
+    newMcpToken = undefined;
+    newToken = undefined;
+    newTokenExpiration = undefined;
+    newMcpApps = [];
+    newTokenLabel = type === 'mcpUrl' ? 'MCP token' : undefined;
+}
+function handleCreateTokenClick() {
+    handleCreateClick('token');
+}
+function handleCopyClick() {
+    copyToClipboard(newToken ?? '');
+}
+async function handleDeleteClick(tokenPrefix) {
+    await UserService.deleteToken({ tokenPrefix });
+    sendUserToast('Successfully deleted token');
+    listTokens();
+}
+async function listTokens() {
+    tokens = await UserService.listTokens({
+        excludeEphemeral: true,
+        page: tokenPage,
+        perPage: 100
+    });
+}
+function handleNextPage() {
+    tokenPage += 1;
+    listTokens();
+}
+function handlePreviousPage() {
+    tokenPage -= 1;
+    listTokens();
+}
+async function getAllApps() {
+    if (allApps.length > 0) {
+        return;
+    }
+    try {
+        loadingApps = true;
+        allApps = (await IntegrationService.listHubIntegrations({
+            kind: 'script'
+        })).map((x) => x.name);
+    }
+    catch (err) {
+        console.error('Hub is not available');
+        allApps = [];
+        errorFetchApps = true;
+    }
+    finally {
+        loadingApps = false;
+    }
+}
+</script>
+
+<div class="grid grid-cols-2 pt-8 pb-1" class:pt-8={scopes == undefined}>
+	<h2 class="py-0 my-0 border-b pt-3">Tokens</h2>
+	<div class="flex justify-end border-b pb-1 gap-2">
+		<Button
+			size="sm"
+			startIcon={{ icon: Plus }}
+			btnClasses={displayCreateToken ? 'hidden' : ''}
+			on:click={handleCreateTokenClick}
+		>
+			Create token
+		</Button>
+	</div>
+</div>
+<div class="text-2xs text-tertiary italic pb-6">
+	Authenticate to the Windmill API with access tokens.
+</div>
+
+<div>
+	{#if newToken}
+		<div
+			class="border rounded-md mb-6 px-2 py-2 bg-green-50 dark:bg-green-200 dark:text-green-800 flex flex-row flex-wrap"
+		>
+			<div>
+				Added token: <button onclick={handleCopyClick} class="inline-flex gap-2 items-center">
+					{newToken}
+					<Clipboard size={12} />
+				</button>
+			</div>
+			<div class="pt-1 text-xs ml-2">
+				Make sure to copy your personal access token now. You won't be able to see it again!
+			</div>
+		</div>
+	{/if}
+
+	{#if newMcpToken}
+		<div
+			class="border rounded-md mb-6 px-2 py-2 bg-green-50 dark:bg-green-200 dark:text-green-800 flex flex-row flex-wrap"
+		>
+			<p class="text-sm mb-2">New MCP URL:</p>
+			<ClipboardPanel content={`${mcpBaseUrl}${newMcpToken}`} />
+			<p class="pt-1 text-xs">
+				Make sure to copy this URL now. You won't be able to see it again!
+			</p>
+		</div>
+	{/if}
+
+	{#if displayCreateToken}
+		<div class="py-3 px-3 border rounded-md mb-6 bg-surface-secondary min-w-min">
+			<h3 class="pb-3 font-semibold">Add a new token</h3>
+
+			{#if showMcpMode}
+				<div class="mb-4 flex flex-row flex-shrink-0">
+					<Toggle
+						on:change={(e) => {
+							mcpCreationMode = e.detail
+							if (e.detail) {
+								newTokenLabel = 'MCP token'
+								newTokenExpiration = undefined
+								newTokenWorkspace = $workspaceStore
+							} else {
+								newTokenLabel = undefined
+								newTokenExpiration = undefined
+								newTokenWorkspace = defaultNewTokenWorkspace
+							}
+						}}
+						checked={mcpCreationMode}
+						options={{
+							right: 'Generate MCP URL',
+							rightTooltip:
+								'Generate a new MCP URL to make your scripts and flows available as tools through your LLM clients.',
+							rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/mcp'
+						}}
+						size="xs"
+					/>
+				</div>
+			{/if}
+
+			{#if scopes != undefined}
+				<div class="mb-4">
+					<span class="block mb-1">Scope</span>
+					{#each scopes as scope}
+						<input disabled type="text" value={scope} class="mb-2 w-full" />
+					{/each}
+				</div>
+			{/if}
+
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+				{#if mcpCreationMode}
+					<div>
+						<span class="block mb-1">Scope</span>
+						<ToggleButtonGroup bind:selected={newMcpScope} allowEmpty={false} let:item>
+							<ToggleButton
+								{item}
+								value="favorites"
+								label="Favorites only"
+								tooltip="Make only your favorite scripts and flows available as tools"
+							/>
+							<ToggleButton
+								{item}
+								value="all"
+								label="All scripts/flows"
+								tooltip="Make all your scripts and flows available as tools"
+							/>
+						</ToggleButtonGroup>
+					</div>
+
+					<div>
+						<span class="block mb-1">Hub scripts (optional)</span>
+						{#if loadingApps}
+							<div>Loading...</div>
+						{:else if errorFetchApps}
+							<div>Error fetching apps</div>
+						{:else}
+							<MultiSelectWrapper
+								items={allApps}
+								placeholder="Select apps"
+								bind:value={newMcpApps}
+							/>
+						{/if}
+					</div>
+
+					<div>
+						<span class="block mb-1">Workspace</span>
+						<select
+							bind:value={newTokenWorkspace}
+							disabled={workspaces.length === 1}
+							class="w-full"
+						>
+							{#each workspaces as workspace}
+								<option value={workspace.id}>{workspace.name}</option>
+							{/each}
+						</select>
+					</div>
+				{/if}
+
+				<div>
+					<span class="block mb-1">Label <span class="text-xs text-tertiary">(optional)</span></span
+					>
+					<input type="text" bind:value={newTokenLabel} class="w-full" />
+				</div>
+
+				<div>
+					<span class="block mb-1"
+						>Expires In <span class="text-xs text-tertiary">(optional)</span></span
+					>
+					<select bind:value={newTokenExpiration} disabled={mcpCreationMode} class="w-full">
+						<option value={undefined}>No expiration</option>
+						<option value={15 * 60}>15m</option>
+						<option value={30 * 60}>30m</option>
+						<option value={1 * 60 * 60}>1h</option>
+						<option value={1 * 24 * 60 * 60}>1d</option>
+						<option value={7 * 24 * 60 * 60}>7d</option>
+						<option value={30 * 24 * 60 * 60}>30d</option>
+						<option value={90 * 24 * 60 * 60}>90d</option>
+					</select>
+				</div>
+			</div>
+
+			<div class="mt-4 flex justify-end gap-2 flex-row">
+				<Button
+					on:click={() => {
+						mcpCreationMode = false
+						displayCreateToken = false
+					}}
+				>
+					Cancel
+				</Button>
+				<Button
+					on:click={() => createToken(mcpCreationMode)}
+					disabled={mcpCreationMode && newTokenWorkspace == undefined}
+				>
+					New token
+				</Button>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<div class="overflow-auto">
+	<TableCustom>
+		<tr slot="header-row">
+			<th>prefix</th>
+			<th>label</th>
+			<th>expiration</th>
+			<th>scopes</th>
+			<th></th>
+		</tr>
+		<tbody slot="body">
+			{#if tokens && tokens.length > 0}
+				{#each tokens as { token_prefix, expiration, label, scopes }}
+					<tr>
+						<td class="grow">{token_prefix}****</td>
+						<td class="grow">{label ?? ''}</td>
+						<td class="grow">{displayDate(expiration ?? '')}</td>
+						<td class="grow">{scopes?.join(', ') ?? ''}</td>
+						<td class="grow">
+							<button
+								class="text-red-500 text-xs underline"
+								onclick={() => handleDeleteClick(token_prefix)}
+							>
+								Delete
+							</button>
+						</td>
+					</tr>
+				{/each}
+			{:else if tokens && tokens.length === 0}
+				<tr class="px-6">
+					<td class="text-secondary italic text-xs"> There are no tokens yet</td>
+				</tr>
+			{:else}
+				<tr><td>Loading...</td></tr>
+			{/if}
+		</tbody>
+	</TableCustom>
+	<div class="flex flex-row-reverse gap-2 w-full">
+		{#if tokens?.length == 100}
+			<button class="p-1 underline text-sm whitespace-nowrap text-center" onclick={handleNextPage}>
+				Next
+			</button>
+		{/if}
+		{#if tokenPage > 1}
+			<button
+				class="p-1 underline text-sm whitespace-nowrap text-center"
+				onclick={handlePreviousPage}
+			>
+				Previous
+			</button>
+		{/if}
+	</div>
+</div>

package/package/components/settings/TokensTable.svelte.d.ts

@@ -0,0 +1,27 @@
+interface Props {
+    showMcpMode?: boolean;
+    openWithMcpMode?: boolean;
+    defaultNewTokenLabel?: string;
+    defaultNewTokenWorkspace?: string;
+    scopes?: string[];
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TokensTable: $$__sveltets_2_IsomorphicComponent<Props, {
+    tokenCreated: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type TokensTable = InstanceType<typeof TokensTable>;
+export default TokensTable;