windmill-components 1.504.6 → 1.510.1

package/package/components/settings/CreateToken.svelte

@@ -4,12 +4,13 @@ import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 import Toggle from '../Toggle.svelte';
-import { UserService } from '../../gen';
-import { copyToClipboard } from '../../utils';
-import { Clipboard } from 'lucide-svelte';
-import ClipboardPanel from '../details/ClipboardPanel.svelte';
+import { IntegrationService, UserService } from '../../gen';
 import { createEventDispatcher } from 'svelte';
-let { showMcpMode = false, defaultNewTokenWorkspace, scopes, actions, newTokenLabel = $bindable(undefined) } = $props();
+import MultiSelect from '../select/MultiSelect.svelte';
+import { safeSelectItems } from '../select/utils.svelte';
+import TokenDisplay from './TokenDisplay.svelte';
+import ScopeSelector from './ScopeSelector.svelte';
+let { showMcpMode = false, defaultNewTokenWorkspace, scopes, onTokenCreated, newTokenLabel = $bindable(undefined) } = $props();
 let newToken = $state(undefined);
 let newMcpToken = $state(undefined);
 let newTokenExpiration = $state(undefined);
@@ -19,10 +20,9 @@ let mcpCreationMode = $state(false);
 let newMcpScope = $state('favorites');
 let loadingApps = $state(false);
 let errorFetchApps = $state(false);
-// let allApps = $state<string[]>([])
-function handleCopyClick() {
-    copyToClipboard(newToken ?? '');
-}
+let allApps = $state([]);
+let customScopes = $state([]);
+let showCustomScopes = $state(false);
 const dispatch = createEventDispatcher();
 function ensureCurrentWorkspaceIncluded(workspacesList, currentWorkspace) {
     if (!currentWorkspace) {
@@ -47,6 +47,9 @@ async function createToken(mcpMode = false) {
                 tokenScopes.push(`mcp:hub:${newMcpApps.join(',')}`);
             }
         }
+        else if (showCustomScopes && customScopes.length > 0) {
+            tokenScopes = customScopes;
+        }
         const createdToken = await UserService.createToken({
             requestBody: {
                 label: newTokenLabel,
@@ -62,8 +65,8 @@ async function createToken(mcpMode = false) {
             newToken = `${createdToken}`;
         }
         dispatch('tokenCreated', newToken ?? newMcpToken);
-        if (actions) {
-            actions();
+        if (onTokenCreated) {
+            onTokenCreated(newToken ?? newMcpToken ?? '');
         }
         mcpCreationMode = false;
     }
@@ -73,37 +76,36 @@ async function createToken(mcpMode = false) {
 }
 const workspaces = $derived(ensureCurrentWorkspaceIncluded($userWorkspaces, $workspaceStore));
 const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/sse?token=`);
+$effect(() => {
+    if (mcpCreationMode) {
+        getAllApps();
+    }
+    else {
+        newMcpApps = [];
+    }
+});
+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>
-	{#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}
-
 	<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>
 
@@ -149,7 +151,27 @@ const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorks
 			</div>
 		{/if}
 
-		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+		{#if !mcpCreationMode && (!scopes || scopes.length === 0)}
+			<div class="flex flex-col gap-2">
+				<Toggle
+					checked={showCustomScopes}
+					on:change={(e) => {
+						showCustomScopes = e.detail
+					}}
+					options={{
+						right: 'Limit token permissions',
+						rightTooltip:
+							'By default, tokens have full API access. Enable this to restrict the token to specific scopes.'
+					}}
+					size="xs"
+				/>
+				{#if showCustomScopes}
+					<ScopeSelector bind:selectedScopes={customScopes} />
+				{/if}
+			</div>
+		{/if}
+
+		<div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
 			{#if mcpCreationMode}
 				<div>
 					<span class="block mb-1">Scope</span>
@@ -178,7 +200,12 @@ const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorks
 					{:else if errorFetchApps}
 						<div>Error fetching apps</div>
 					{:else}
-						<!-- MultiSelectWrapper was confirmed not to be necessary : deleted -->
+						<MultiSelect
+							items={safeSelectItems(allApps)}
+							placeholder="Select apps"
+							bind:value={newMcpApps}
+							class="!bg-surface"
+						/>
 					{/if}
 				</div>
 
@@ -232,4 +259,12 @@ const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorks
 			</Button>
 		</div>
 	</div>
+
+	{#if newToken}
+		<TokenDisplay token={newToken} type="token" />
+	{/if}
+
+	{#if newMcpToken}
+		<TokenDisplay token={newMcpToken} type="mcp" mcpUrl={`${mcpBaseUrl}${newMcpToken}`} />
+	{/if}
 </div>

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

@@ -4,7 +4,7 @@ interface Props {
     newTokenLabel?: string;
     defaultNewTokenWorkspace?: string;
     scopes?: string[];
-    actions?: () => void;
+    onTokenCreated?: (token: string) => void;
     displayCreateToken?: boolean;
 }
 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> {