windmill-components 1.537.1 → 1.542.4

package/package/components/workspaceSettings/CreateWorkspace.svelte

@@ -0,0 +1,395 @@
+<script lang="ts">import { run } from 'svelte/legacy';
+import { goto } from '../../navigation';
+import { base } from '../../base';
+import { ResourceService, SettingService, UserService, VariableService, WorkspaceService } from '../../gen';
+import { validateUsername } from '../../utils';
+import { logoutWithRedirect } from '../../logout';
+import { page } from '$app/stores';
+import { usersWorkspaceStore, workspaceStore } from '../../stores';
+import CenteredModal from '../CenteredModal.svelte';
+import { Button } from '../common';
+import Toggle from '../Toggle.svelte';
+import Tooltip from '../Tooltip.svelte';
+import { onMount } from 'svelte';
+import { sendUserToast } from '../../toast';
+import TestAIKey from '../copilot/TestAIKey.svelte';
+import { switchWorkspace } from '../../storeUtils';
+import { isCloudHosted } from '../../cloud';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+import { AI_PROVIDERS } from '../copilot/lib';
+import { GitFork } from 'lucide-svelte';
+import PrefixedInput from '../PrefixedInput.svelte';
+let { isFork = false } = $props();
+const rd = $page.url.searchParams.get('rd');
+let id = $state('');
+let name = $state('');
+let username = $state('');
+let errorId = $state('');
+let errorUser = $state('');
+let aiKey = $state('');
+let codeCompletionEnabled = $state(true);
+let checking = $state(false);
+let workspaceColor = $state(null);
+let colorEnabled = $state(false);
+function generateRandomColor() {
+    const randomColor = '#' +
+        Math.floor(Math.random() * 16777215)
+            .toString(16)
+            .padStart(6, '0');
+    workspaceColor = randomColor;
+}
+async function validateName(id) {
+    checking = true;
+    let exists = await WorkspaceService.existsWorkspace({ requestBody: { id } });
+    if (exists) {
+        errorId = 'ID already exists';
+    }
+    else if (id != '' && !/^\w+(-\w+)*$/.test(id)) {
+        errorId = 'ID can only contain letters, numbers and dashes and must not finish by a dash';
+    }
+    else {
+        errorId = '';
+    }
+    checking = false;
+}
+const WM_FORK_PREFIX = 'wm-fork-';
+async function createOrForkWorkspace() {
+    const prefixed_id = `${WM_FORK_PREFIX}${id}`;
+    if (isFork) {
+        if ($workspaceStore) {
+            await WorkspaceService.createWorkspaceFork({
+                requestBody: {
+                    id: prefixed_id,
+                    name,
+                    color: colorEnabled && workspaceColor ? workspaceColor : undefined,
+                    username: automateUsernameCreation ? undefined : username,
+                    parent_workspace_id: $workspaceStore
+                }
+            });
+            sendUserToast(`Successfully forked workspace ${$workspaceStore} as: wm-fork-${id}`);
+        }
+        else {
+            sendUserToast('No workspace selected, cannot fork non-existent workspace', true);
+        }
+    }
+    else {
+        await createWorkspace();
+    }
+    usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces());
+    switchWorkspace(isFork ? prefixed_id : id);
+    goto(rd ?? '/');
+}
+async function createWorkspace() {
+    await WorkspaceService.createWorkspace({
+        requestBody: {
+            id,
+            name,
+            color: colorEnabled && workspaceColor ? workspaceColor : undefined,
+            username: automateUsernameCreation ? undefined : username
+        }
+    });
+    if (auto_invite) {
+        await WorkspaceService.editAutoInvite({
+            workspace: id,
+            requestBody: { operator: operatorOnly, invite_all: !isCloudHosted(), auto_add: true }
+        });
+    }
+    if (aiKey != '') {
+        let actualUsername = username;
+        if (automateUsernameCreation) {
+            const user = await UserService.whoami({
+                workspace: id
+            });
+            actualUsername = user.username;
+        }
+        let path = `u/${actualUsername}/${selected}_windmill_codegen`;
+        await VariableService.createVariable({
+            workspace: id,
+            requestBody: {
+                path,
+                value: aiKey,
+                is_secret: true,
+                description: 'Ai token'
+            }
+        });
+        await ResourceService.createResource({
+            workspace: id,
+            requestBody: {
+                path,
+                value: {
+                    api_key: '$var:' + path
+                },
+                resource_type: selected
+            }
+        });
+        await WorkspaceService.editCopilotConfig({
+            workspace: id,
+            requestBody: aiKey
+                ? {
+                    providers: {
+                        [selected]: {
+                            resource_path: path,
+                            models: [AI_PROVIDERS[selected].defaultModels[0]]
+                        }
+                    },
+                    default_model: {
+                        model: AI_PROVIDERS[selected].defaultModels[0],
+                        provider: selected
+                    },
+                    code_completion_model: codeCompletionEnabled
+                        ? { model: AI_PROVIDERS[selected].defaultModels[0], provider: selected }
+                        : undefined
+                }
+                : {}
+        });
+    }
+    sendUserToast(`Created workspace id: ${id}`);
+    usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces());
+    switchWorkspace(id);
+    goto(rd ?? '/');
+}
+function handleKeyUp(event) {
+    const key = event.key;
+    if (key === 'Enter') {
+        event.preventDefault();
+        createWorkspace();
+    }
+}
+async function loadWorkspaces() {
+    if (!$usersWorkspaceStore) {
+        try {
+            usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces());
+        }
+        catch { }
+    }
+    if (!$usersWorkspaceStore) {
+        const url = $page.url;
+        console.log('logout 2');
+        await logoutWithRedirect(url.href.replace(url.origin, ''));
+    }
+}
+let automateUsernameCreation = $state(false);
+async function getAutomateUsernameCreationSetting() {
+    automateUsernameCreation =
+        (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
+    if (!automateUsernameCreation) {
+        UserService.globalWhoami().then((x) => {
+            let uname = '';
+            if (x.name) {
+                uname = x.name.split(' ')[0];
+            }
+            else {
+                uname = x.email.split('@')[0];
+            }
+            uname = uname.replace(/\./gi, '');
+            username = uname.toLowerCase();
+        });
+    }
+}
+getAutomateUsernameCreationSetting();
+onMount(() => {
+    loadWorkspaces();
+    WorkspaceService.isDomainAllowed().then((x) => {
+        isDomainAllowed = x;
+    });
+});
+let isDomainAllowed = $state(undefined);
+let auto_invite = $state(false);
+let operatorOnly = $state(false);
+let selected = $state('openai');
+run(() => {
+    id = name.toLowerCase().replace(/\s/gi, '-');
+});
+run(() => {
+    validateName(id);
+});
+run(() => {
+    errorUser = validateUsername(username);
+});
+run(() => {
+    colorEnabled && !workspaceColor && generateRandomColor();
+});
+let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
+</script>
+
+<CenteredModal title="{isFork ? 'Forking' : 'New'} Workspace">
+	{#if isFork}
+		<div class="flex flex-block gap-2">
+			<GitFork />
+			<span class="text-secondary text-l"> Forking </span>
+			<span class="text-secondary font-bold text-l">
+				{$workspaceStore}
+			</span>
+		</div>
+	{/if}
+	<label class="block pb-4 pt-4">
+		{#if isFork}
+			<span class="text-secondary text-sm">Fork name</span>
+			<span class="ml-4 text-tertiary text-xs">Displayable name of the forked workspace</span>
+		{:else}
+			<span class="text-secondary text-sm">Workspace name</span>
+			<span class="ml-4 text-tertiary text-xs">Displayable name</span>
+		{/if}
+		<!-- svelte-ignore a11y_autofocus -->
+		<input autofocus type="text" bind:value={name} />
+	</label>
+	<label class="block pb-4">
+		<span class="text-secondary text-sm">Workspace ID</span>
+		{#if isFork}
+			<span class="ml-10 text-tertiary text-xs"
+				>Slug to uniquely identify your fork (this will also set the branch name)</span
+			>
+		{:else}
+			<span class="ml-10 text-tertiary text-xs">Slug to uniquely identify your workspace</span>
+		{/if}
+		{#if errorId}
+			<span class="text-red-500 text-xs">{errorId}</span>
+		{/if}
+
+		{#if isFork}
+			<PrefixedInput
+				prefix={WM_FORK_PREFIX}
+				type="text"
+				bind:value={id}
+				placeholder="example.com"
+				class={errorId != '' ? 'input-error' : ''}
+			/>
+		{:else}
+			<input type="text" bind:value={id} class:input-error={errorId != ''} />
+		{/if}
+	</label>
+	<label class="block pb-4">
+		<span class="text-secondary text-sm">Workspace color</span>
+		<span class="ml-5 text-tertiary text-xs"
+			>Color to identify the current workspace in the list of workspaces</span
+		>
+		<div class="flex items-center gap-2">
+			<Toggle bind:checked={colorEnabled} options={{ right: 'Enable' }} />
+			{#if colorEnabled}<input
+					class="w-10"
+					type="color"
+					bind:value={workspaceColor}
+					disabled={!colorEnabled}
+				/>{/if}
+			<input
+				type="text"
+				class="w-24 text-sm"
+				bind:value={workspaceColor}
+				disabled={!colorEnabled}
+			/>
+			<Button on:click={generateRandomColor} size="xs" disabled={!colorEnabled}>Random</Button>
+		</div>
+	</label>
+	{#if !automateUsernameCreation}
+		<label class="block pb-4">
+			<span class="text-secondary text-sm">Your username in that workspace</span>
+			<input type="text" bind:value={username} onkeyup={handleKeyUp} />
+			{#if errorUser}
+				<span class="text-red-500 text-xs">{errorUser}</span>
+			{/if}
+		</label>
+	{/if}
+	{#if !isFork}
+		<div class="block pb-4">
+			<label for="ai-key" class="flex flex-col gap-1">
+				<span class="text-secondary text-sm">
+					AI key for Windmill AI
+					<Tooltip>
+						Find out how it can help you <a
+							href="https://www.windmill.dev/docs/core_concepts/ai_generation"
+							target="_blank"
+							rel="noopener noreferrer">in the docs</a
+						>
+					</Tooltip>
+					<span class="text-2xs text-tertiary ml-2">(optional but recommended)</span>
+				</span>
+
+				<div class="pb-2">
+					<ToggleButtonGroup bind:selected>
+						{#snippet children({ item })}
+							<ToggleButton value="openai" label="OpenAI" {item} />
+							<ToggleButton value="anthropic" label="Anthropic" {item} />
+							<ToggleButton value="mistral" label="Mistral" {item} />
+							<ToggleButton value="deepseek" label="DeepSeek" {item} />
+						{/snippet}
+					</ToggleButtonGroup>
+				</div>
+			</label>
+
+			<div class="flex flex-row gap-1 pb-4">
+				<input
+					id="ai-key"
+					type="password"
+					autocomplete="new-password"
+					bind:value={aiKey}
+					onkeyup={handleKeyUp}
+				/>
+				<TestAIKey
+					apiKey={aiKey}
+					disabled={!aiKey}
+					aiProvider={selected}
+					model={AI_PROVIDERS[selected].defaultModels[0]}
+				/>
+			</div>
+			{#if aiKey}
+				<Toggle
+					disabled={!aiKey}
+					bind:checked={codeCompletionEnabled}
+					options={{ right: 'Enable code completion' }}
+				/>
+			{/if}
+		</div>
+		<Toggle
+			disabled={isCloudHosted() && !isDomainAllowed}
+			bind:checked={auto_invite}
+			options={{
+				right: isCloudHosted()
+					? `Auto-invite anyone from ${domain}`
+					: `Auto-invite anyone joining the instance`
+			}}
+		/>
+		{#if isCloudHosted() && isDomainAllowed == false}
+			<div class="text-tertiary text-sm mb-4 mt-2">{domain} domain not allowed for auto-invite</div>
+		{/if}
+		<div class={'overflow-hidden transition-all ' + (auto_invite ? 'h-36' : 'h-0')}>
+			<div class="text-xs mb-1 leading-6 pt-2">
+				Mode <Tooltip>Whether to invite or add users directly to the workspace.</Tooltip>
+			</div>
+
+			<div class="text-xs mb-1 leading-6 pt-2"
+				>Role <Tooltip>Role of the auto-invited users</Tooltip></div
+			>
+			<ToggleButtonGroup
+				selected={operatorOnly ? 'operator' : 'developer'}
+				on:selected={(e) => {
+					operatorOnly = e.detail == 'operator'
+				}}
+			>
+				{#snippet children({ item })}
+					<ToggleButton value="operator" size="xs" label="Operator" {item} />
+					<ToggleButton value="developer" size="xs" label="Developer" {item} />
+				{/snippet}
+			</ToggleButtonGroup>
+		</div>
+	{/if}
+	<div class="flex flex-wrap flex-row justify-between pt-10 gap-1">
+		<Button variant="border" size="sm" href="{base}/user/workspaces"
+			>&leftarrow; Back to workspaces</Button
+		>
+		<Button
+			disabled={checking ||
+				errorId != '' ||
+				!name ||
+				(!automateUsernameCreation && (errorUser != '' || !username)) ||
+				!id}
+			on:click={createOrForkWorkspace}
+		>
+			{#if isFork}
+				Fork workspace
+			{:else}
+				Create workspace
+			{/if}
+		</Button>
+	</div>
+</CenteredModal>

package/package/components/workspaceSettings/CreateWorkspace.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    isFork?: boolean;
+}
+declare const CreateWorkspace: import("svelte").Component<Props, {}, "">;
+type CreateWorkspace = ReturnType<typeof CreateWorkspace>;
+export default CreateWorkspace;

package/package/components/workspaceSettings/DucklakeSettings.svelte

@@ -42,7 +42,9 @@ export function convertDucklakeSettingsToBackend(settings) {
 	import Select from '../select/Select.svelte'
 	import ResourcePicker from '../ResourcePicker.svelte'
 	import { usePromise } from '../../svelte5Utils.svelte'
-	import { SettingService, WorkspaceService, type GetSettingsResponse } from '../../gen'
+	import { SettingService, WorkspaceService } from '../../gen'
+	import { type GetSettingsResponse } from '../../gen'
+
 	import { superadmin, workspaceStore } from '../../stores'
 	import { sendUserToast } from '../../toast'
 	import ExploreAssetButton from '../ExploreAssetButton.svelte'

package/package/components/workspaceSettings/GitSyncFilterSettings.svelte

@@ -4,7 +4,7 @@ import Tooltip from '../Tooltip.svelte';
 import FilterList from './FilterList.svelte';
 import { Tabs, Tab } from '../common';
 import { workspaceStore } from '../../stores';
-let { git_repo_resource_path = $bindable(''), include_path = $bindable(['f/**']), include_type = $bindable(['script', 'flow', 'app', 'folder']), exclude_types_override = $bindable([]), isLegacyRepo = false, excludes = $bindable([]), extraIncludes = $bindable([]), isInitialSetup = false, requiresMigration = false, actions = undefined, useIndividualBranch = false } = $props();
+let { git_repo_resource_path = $bindable(''), include_path = $bindable(['f/**']), include_type = $bindable(['script', 'flow', 'app', 'folder']), exclude_types_override = $bindable([]), isLegacyRepo = false, excludes = $bindable([]), extraIncludes = $bindable([]), isInitialSetup = false, requiresMigration = false, actions = undefined, useIndividualBranch = false, } = $props();
 // Component state
 let collapsed = $state(false);
 let showCliInstructions = $state(false);

package/package/components/workspaceSettings/StorageSettings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { enterpriseLicense, workspaceStore } from '../../stores';
 import { emptyString, sendUserToast } from '../../utils';
-import { Plus, X } from 'lucide-svelte';
+import { ChevronDown, Plus, Shield, X } from 'lucide-svelte';
 import Alert from '../common/alert/Alert.svelte';
 import Button from '../common/button/Button.svelte';
 import Tab from '../common/tabs/Tab.svelte';
@@ -14,6 +14,7 @@ import { WorkspaceService } from '../../gen';
 import S3FilePicker from '../S3FilePicker.svelte';
 import Portal from '../Portal.svelte';
 import { fade } from 'svelte/transition';
+import Popover from '../meltComponents/Popover.svelte';
 let { s3ResourceSettings = $bindable() } = $props();
 let s3FileViewer = $state();
 async function editWindmillLFSSettings() {
@@ -83,6 +84,7 @@ async function editWindmillLFSSettings() {
 				resourceType={s3ResourceSettings.resourceType}
 				bind:value={s3ResourceSettings.resourcePath}
 			/>
+			{@render permissionBtn(s3ResourceSettings)}
 			<Button
 				size="sm"
 				variant="contained"
@@ -96,55 +98,9 @@ async function editWindmillLFSSettings() {
 			>
 		</div>
 	</div>
-	{#if s3ResourceSettings.resourceType == 's3'}
-		<div class="flex flex-col mt-5 mb-1 gap-1">
-			<!-- this can be removed once parent moves to runes -->
-			<!-- svelte-ignore binding_property_non_reactive -->
-			<Toggle
-				disabled={emptyString(s3ResourceSettings.resourcePath)}
-				bind:checked={s3ResourceSettings.publicResource}
-				options={{
-					right: 'S3 resource details and content can be accessed by all users of this workspace',
-					rightTooltip:
-						'If set, all users of this workspace will have access the to entire content of the S3 bucket, as well as the resource details and the "open preview" button. This effectively by-pass the permissions set on the resource and makes it public to everyone.'
-				}}
-			/>
-			{#if s3ResourceSettings.publicResource === true}
-				<div class="pt-2"></div>
 
-				<Alert type="warning" title="S3 bucket content and resource details are shared">
-					S3 resource public access is ON, which means that the entire content of the S3 bucket will
-					be accessible to all the users of this workspace regardless of whether they have access
-					the resource or not. Similarly, certain Windmill SDK endpoints can be used in scripts to
-					access the resource details, including public and private keys.
-				</Alert>
-			{/if}
-		</div>
-	{:else}
-		<div class="flex flex-col mt-5 mb-1 gap-1">
-			<!-- this can be removed once parent moves to runes -->
-			<!-- svelte-ignore binding_property_non_reactive -->
-			<Toggle
-				disabled={emptyString(s3ResourceSettings.resourcePath)}
-				bind:checked={s3ResourceSettings.publicResource}
-				options={{
-					right: 'object storage content can be accessed by all users of this workspace',
-					rightTooltip:
-						'If set, all users of this workspace will have access the to entire content of the object storage.'
-				}}
-			/>
-			{#if s3ResourceSettings.publicResource === true}
-				<div class="pt-2"></div>
-				<Alert type="warning" title="object content">
-					object public access is ON, which means that the entire content of the object store will
-					be accessible to all the users of this workspace regardless of whether they have access
-					the resource or not.
-				</Alert>
-			{/if}
-		</div>
-	{/if}
 	<div class="mt-6">
-		<div class="flex mt-2 flex-col gap-y-4 max-w-3xl">
+		<div class="flex mt-2 flex-col gap-y-4 max-w-5xl">
 			{#each s3ResourceSettings.secondaryStorage ?? [] as _, idx}
 				<div class="flex gap-1 items-center">
 					<input
@@ -175,6 +131,7 @@ async function editWindmillLFSSettings() {
 						<option value="azure_blob">Azure Blob</option>
 						<option value="s3_aws_oidc">AWS OIDC</option>
 						<option value="azure_workload_identity">Azure Workload Identity</option>
+						<option value="gcloud_storage">Google Cloud Storage</option>
 					</select>
 					<!-- this can be removed once parent moves to runes -->
 					<!-- svelte-ignore binding_property_non_reactive -->
@@ -189,6 +146,7 @@ async function editWindmillLFSSettings() {
 							}
 						}
 					/>
+					{@render permissionBtn(s3ResourceSettings.secondaryStorage![idx][1])}
 					<Button
 						size="sm"
 						variant="contained"
@@ -250,3 +208,66 @@ async function editWindmillLFSSettings() {
 		>
 	</div>
 {/if}
+
+{#snippet permissionBtn(storage: NonNullable<S3ResourceSettings['secondaryStorage']>[number][1])}
+	<Popover closeOnOtherPopoverOpen>
+		<svelte:fragment slot="trigger">
+			<Button variant="border" btnClasses="px-2.5" color="dark" size="sm">
+				<Shield size={16} /> Permissions <ChevronDown size={14} />
+			</Button>
+		</svelte:fragment>
+		<svelte:fragment slot="content">
+			<div class="flex flex-col gap-3 mx-4 pb-4 w-[40rem]">
+				{#if storage.resourceType == 's3'}
+					<div class="flex flex-col mt-5 mb-1 gap-1">
+						<!-- this can be removed once parent moves to runes -->
+						<!-- svelte-ignore binding_property_non_reactive -->
+						<Toggle
+							disabled={emptyString(storage.resourcePath)}
+							bind:checked={storage.publicResource}
+							options={{
+								right:
+									'S3 resource details and content can be accessed by all users of this workspace',
+								rightTooltip:
+									'If set, all users of this workspace will have access the to entire content of the S3 bucket, as well as the resource details and the "open preview" button. This effectively by-pass the permissions set on the resource and makes it public to everyone.'
+							}}
+						/>
+						{#if storage.publicResource === true}
+							<div class="pt-2"></div>
+
+							<Alert type="warning" title="S3 bucket content and resource details are shared">
+								S3 resource public access is ON, which means that the entire content of the S3
+								bucket will be accessible to all the users of this workspace regardless of whether
+								they have access the resource or not. Similarly, certain Windmill SDK endpoints can
+								be used in scripts to access the resource details, including public and private
+								keys.
+							</Alert>
+						{/if}
+					</div>
+				{:else}
+					<div class="flex flex-col mt-5 mb-1 gap-1">
+						<!-- this can be removed once parent moves to runes -->
+						<!-- svelte-ignore binding_property_non_reactive -->
+						<Toggle
+							disabled={emptyString(storage.resourcePath)}
+							bind:checked={storage.publicResource}
+							options={{
+								right: 'object storage content can be accessed by all users of this workspace',
+								rightTooltip:
+									'If set, all users of this workspace will have access the to entire content of the object storage.'
+							}}
+						/>
+						{#if storage.publicResource === true}
+							<div class="pt-2"></div>
+							<Alert type="warning" title="object content">
+								object public access is ON, which means that the entire content of the object store
+								will be accessible to all the users of this workspace regardless of whether they
+								have access the resource or not.
+							</Alert>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		</svelte:fragment>
+	</Popover>
+{/snippet}

package/package/gen/core/OpenAPI.js

@@ -21,7 +21,7 @@ export const OpenAPI = {
     PASSWORD: undefined,
     TOKEN: undefined,
     USERNAME: undefined,
-    VERSION: '1.530.0',
+    VERSION: '1.542.0',
     WITH_CREDENTIALS: false,
     interceptors: {
         request: new Interceptors(),