windmill-components 1.623.2 → 1.655.0

package/package/components/workspaceSettings/OAuthClientConfig.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">import { sendUserToast } from '../../utils';
 import { Button, Alert } from '../common';
 import Label from '../Label.svelte';
+import ClipboardPanel from '../details/ClipboardPanel.svelte';
 import { Save, ExternalLink } from 'lucide-svelte';
-import { workspaceStore } from '../../stores';
-let { serviceName, serviceDisplayName, existingConfig, onConfigSaved, redirectUri = $bindable('') } = $props();
+let { serviceName, serviceDisplayName, existingConfig, onConfigSaved, redirectUri, requiresBaseUrl = true, baseUrlLabel = `${serviceDisplayName} base URL`, baseUrlPlaceholder = `https://your-${serviceName}.example.com`, baseUrlSettingsPath = '/settings/admin/security', clientIdPlaceholder = `Generated by ${serviceDisplayName} OAuth app`, clientSecretPlaceholder = `Generated by ${serviceDisplayName} OAuth app`, setupInstructions } = $props();
 let saving = $state(false);
 let clientId = $state('');
 let clientSecret = $state('');
 let baseUrl = $state('');
-let workspace = $workspaceStore;
-redirectUri = `${window.location.origin}/workspace_settings?tab=native_triggers&service=${serviceName}&workspace=${workspace}`;
 $effect(() => {
     if (existingConfig) {
         clientId = existingConfig.client_id;
@@ -17,9 +15,13 @@ $effect(() => {
         baseUrl = existingConfig.base_url;
     }
 });
+let canSave = $derived(!saving &&
+    !!clientId.trim() &&
+    !!clientSecret.trim() &&
+    (!requiresBaseUrl || !!baseUrl.trim()));
 async function saveConfig() {
-    if (!clientId.trim() || !clientSecret.trim() || !baseUrl.trim()) {
-        sendUserToast('Please fill in all fields', true);
+    if (!canSave) {
+        sendUserToast('Please fill in all required fields', true);
         return;
     }
     saving = true;
@@ -27,7 +29,7 @@ async function saveConfig() {
         const oauthData = {
             client_id: clientId.trim(),
             client_secret: clientSecret.trim(),
-            base_url: baseUrl.trim().replace(/\/+$/, ''),
+            base_url: requiresBaseUrl ? baseUrl.trim().replace(/\/+$/, '') : '',
             redirect_uri: redirectUri.trim()
         };
         await onConfigSaved(oauthData);
@@ -44,16 +46,6 @@ function resetForm() {
     clientId = '';
     clientSecret = '';
 }
-function copyToClipboard(text, label) {
-    navigator.clipboard
-        .writeText(text)
-        .then(() => {
-        sendUserToast(`${label} copied to clipboard`);
-    })
-        .catch(() => {
-        sendUserToast(`Failed to copy ${label}`, true);
-    });
-}
 </script>
 
 <div class="space-y-4">
@@ -65,73 +57,52 @@ function copyToClipboard(text, label) {
 	{#if !existingConfig}
 		<Alert type="warning" title="OAuth client required">
 			<p class="text-sm mb-2">
-				Before you can connect to {serviceDisplayName}, you need to configure an OAuth client. This
-				requires:
+				Before you can connect to {serviceDisplayName}, you need to configure an OAuth client.
 			</p>
-			<ol class="list-decimal list-inside space-y-1 text-sm">
-				<li
-					>Create an OAuth2 application in your {serviceDisplayName} instance (Administration settings
-					-> Security -> OAuth 2.0 clients)</li
-				>
-				<li
-					>Configure the redirect URI: <code
-						class="text-xs bg-gray-100 dark:bg-gray-800 px-1 rounded"
-						>{redirectUri ||
-							`${window.location.origin}/workspace_settings?tab=integrations&service=${serviceName}`}</code
-					></li
-				>
-				<li>Enter the client credentials below</li>
-			</ol>
+			{#if setupInstructions}
+				<ol class="list-decimal list-inside space-y-1 text-sm">
+					{#each setupInstructions as instruction}
+						<li>{@html instruction}</li>
+					{/each}
+				</ol>
+			{/if}
 		</Alert>
 	{/if}
 
 	<div class="space-y-4">
 		<div class="space-y-4">
-			<div class="flex flex-col gap-1">
-				<Label label="Nextcloud base URL" />
-				<p class="text-xs font-normal text-secondary"
-					>The base URL of your Nextcloud instance (without trailing slash)</p
-				>
-				<input
-					type="url"
-					bind:value={baseUrl}
-					placeholder="https://your-nextcloud.example.com"
-					class="windmill-input"
-					disabled={saving}
-				/>
-				{#if baseUrl}
-					<Button
-						wrapperClasses="self-start"
-						href={`${baseUrl}/settings/admin/security`}
-						target="_blank"
-						startIcon={{ icon: ExternalLink }}
+			{#if requiresBaseUrl}
+				<div class="flex flex-col gap-1">
+					<Label label={baseUrlLabel} />
+					<p class="text-xs font-normal text-secondary"
+						>The base URL of your {serviceDisplayName} instance (without trailing slash)</p
 					>
-						{serviceDisplayName} OAuth Settings
-					</Button>
-				{/if}
-			</div>
+					<input
+						type="url"
+						bind:value={baseUrl}
+						placeholder={baseUrlPlaceholder}
+						class="windmill-input"
+						disabled={saving}
+					/>
+					{#if baseUrl && baseUrlSettingsPath}
+						<Button
+							wrapperClasses="self-start"
+							href={`${baseUrl}${baseUrlSettingsPath}`}
+							target="_blank"
+							startIcon={{ icon: ExternalLink }}
+						>
+							{serviceDisplayName} OAuth Settings
+						</Button>
+					{/if}
+				</div>
+			{/if}
 
 			<div class="flex flex-col gap-1">
 				<Label label="Redirect URI" />
 				<p class="text-xs font-normal text-secondary"
 					>Use this URL when creating the OAuth app in {serviceDisplayName}</p
 				>
-				<div class="flex gap-2">
-					<input
-						type="url"
-						bind:value={redirectUri}
-						readonly
-						class="windmill-input flex-1 bg-gray-50 dark:bg-gray-900"
-					/>
-					<Button
-						size="xs"
-						color="light"
-						variant="border"
-						onclick={() => copyToClipboard(redirectUri, 'Redirect URI')}
-					>
-						Copy
-					</Button>
-				</div>
+				<ClipboardPanel content={redirectUri} size="sm" />
 			</div>
 
 			<div class="flex flex-col gap-1">
@@ -139,7 +110,7 @@ function copyToClipboard(text, label) {
 				<input
 					type="text"
 					bind:value={clientId}
-					placeholder="Generated by Nextcloud OAuth app"
+					placeholder={clientIdPlaceholder}
 					class="windmill-input"
 					disabled={saving}
 				/>
@@ -150,7 +121,7 @@ function copyToClipboard(text, label) {
 				<input
 					type="password"
 					bind:value={clientSecret}
-					placeholder="Generated by Nextcloud OAuth app"
+					placeholder={clientSecretPlaceholder}
 					class="windmill-input"
 					disabled={saving}
 				/>
@@ -160,7 +131,7 @@ function copyToClipboard(text, label) {
 				<Button
 					color="blue"
 					onclick={saveConfig}
-					disabled={saving || !clientId.trim() || !clientSecret.trim() || !baseUrl.trim()}
+					disabled={!canSave}
 					startIcon={{ icon: Save }}
 				>
 					{saving ? 'Saving...' : 'Save configuration'}
@@ -173,7 +144,7 @@ function copyToClipboard(text, label) {
 		<Alert type="success" title="OAuth client configured">
 			<p class="text-sm">
 				OAuth client is configured for {serviceDisplayName}. You can now connect this workspace to
-				your {serviceDisplayName} instance.
+				{serviceDisplayName}.
 			</p>
 		</Alert>
 	{/if}

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

@@ -8,7 +8,14 @@ interface Props {
     } | null;
     redirectUri: string;
     onConfigSaved: (oauthData: any) => Promise<void>;
+    requiresBaseUrl?: boolean;
+    baseUrlLabel?: string;
+    baseUrlPlaceholder?: string;
+    baseUrlSettingsPath?: string;
+    clientIdPlaceholder?: string;
+    clientSecretPlaceholder?: string;
+    setupInstructions?: string[];
 }
-declare const OAuthClientConfig: import("svelte").Component<Props, {}, "redirectUri">;
+declare const OAuthClientConfig: import("svelte").Component<Props, {}, "">;
 type OAuthClientConfig = ReturnType<typeof OAuthClientConfig>;
 export default OAuthClientConfig;

package/package/components/workspaceSettings/RulesetEditor.svelte

@@ -0,0 +1,292 @@
+<script lang="ts">import { Section, Button, Badge } from '../common';
+import Toggle from '../Toggle.svelte';
+import Label from '../Label.svelte';
+import Select from '../select/Select.svelte';
+import TextInput from '../text_input/TextInput.svelte';
+import { workspaceStore } from '../../stores';
+import { GroupService, UserService, WorkspaceService } from '../../gen';
+import { sendUserToast } from '../../toast';
+import { clone } from '../../utils';
+import { untrack } from 'svelte';
+import { Save, X, Plus } from 'lucide-svelte';
+import { safeSelectItems } from '../select/utils.svelte';
+let { rule, existingNames = [], onUpdate } = $props();
+// Create mode vs Edit mode
+const isCreateMode = $derived(!rule);
+// Helper function to check if a rule is in the array
+const hasRule = (ruleKind) => rule?.rules?.includes(ruleKind) ?? false;
+// Editable state
+let name = $state(untrack(() => rule)?.name ?? '');
+let disableDirectDeployment = $state(hasRule('DisableDirectDeployment'));
+let disableFork = $state(hasRule('DisableWorkspaceForking'));
+let selectedGroups = $state(untrack(() => rule)?.bypass_groups?.map((g) => g.replace('g/', '')) ?? []);
+let selectedUsers = $state(untrack(() => rule)?.bypass_users?.map((u) => u.replace('u/', '')) ?? []);
+// Initial state for unsaved changes tracking
+let initialName = $state(untrack(() => rule)?.name ?? '');
+let initialDisableDirectDeployment = $state(hasRule('DisableDirectDeployment'));
+let initialDisableFork = $state(hasRule('DisableWorkspaceForking'));
+let initialSelectedGroups = $state(untrack(() => rule)?.bypass_groups
+    ? untrack(() => rule).bypass_groups.map((g) => g.replace('g/', ''))
+    : []);
+let initialSelectedUsers = $state(untrack(() => rule)?.bypass_users
+    ? untrack(() => rule).bypass_users.map((u) => u.replace('u/', ''))
+    : []);
+// Available options
+let availableGroups = $state([]);
+let availableUsers = $state([]);
+// Temporary values for Select dropdowns
+let selectedGroupToAdd = $state(undefined);
+let selectedUserToAdd = $state(undefined);
+// Load available groups and users
+async function loadAvailableGroups() {
+    const groups = await GroupService.listGroupNames({ workspace: $workspaceStore });
+    availableGroups = groups;
+}
+async function loadAvailableUsers() {
+    const users = await UserService.listUsernames({ workspace: $workspaceStore });
+    availableUsers = users;
+}
+$effect(() => {
+    if ($workspaceStore) {
+        untrack(() => {
+            loadAvailableGroups();
+            loadAvailableUsers();
+        });
+    }
+});
+// Effect to add selected group
+$effect(() => {
+    if (selectedGroupToAdd && !selectedGroups.includes(selectedGroupToAdd)) {
+        selectedGroups = [...selectedGroups, selectedGroupToAdd];
+        untrack(() => {
+            selectedGroupToAdd = undefined; // Reset for next selection
+        });
+    }
+});
+// Effect to add selected user
+$effect(() => {
+    if (selectedUserToAdd && !selectedUsers.includes(selectedUserToAdd)) {
+        selectedUsers = [...selectedUsers, selectedUserToAdd];
+        untrack(() => {
+            selectedUserToAdd = undefined; // Reset for next selection
+        });
+    }
+});
+// Computed properties
+const hasUnsavedChanges = $derived(isCreateMode
+    ? name.trim() !== '' ||
+        disableDirectDeployment ||
+        disableFork ||
+        selectedGroups.length > 0 ||
+        selectedUsers.length > 0
+    : name !== initialName ||
+        disableDirectDeployment !== initialDisableDirectDeployment ||
+        disableFork !== initialDisableFork ||
+        JSON.stringify([...selectedGroups].sort()) !==
+            JSON.stringify([...initialSelectedGroups].sort()) ||
+        JSON.stringify([...selectedUsers].sort()) !==
+            JSON.stringify([...initialSelectedUsers].sort()));
+const nameError = $derived.by(() => {
+    if (!name.trim())
+        return 'Name is required';
+    if (isCreateMode) {
+        if (existingNames.includes(name))
+            return 'Name already exists';
+    }
+    else {
+        if (name !== initialName && existingNames.includes(name))
+            return 'Name already exists';
+    }
+    return undefined;
+});
+const canSave = $derived(!nameError && hasUnsavedChanges);
+function removeGroup(group) {
+    selectedGroups = selectedGroups.filter((g) => g !== group);
+}
+function removeUser(user) {
+    selectedUsers = selectedUsers.filter((u) => u !== user);
+}
+async function create() {
+    if (!canSave || !$workspaceStore)
+        return;
+    try {
+        await WorkspaceService.createProtectionRule({
+            workspace: $workspaceStore,
+            requestBody: {
+                name,
+                rules: [
+                    ...(disableDirectDeployment ? ['DisableDirectDeployment'] : []),
+                    ...(disableFork ? ['DisableWorkspaceForking'] : [])
+                ],
+                bypass_groups: selectedGroups,
+                bypass_users: selectedUsers
+            }
+        });
+        sendUserToast('Protection rule created successfully');
+        onUpdate?.();
+    }
+    catch (error) {
+        console.error('Failed to create protection rule:', error);
+        sendUserToast('Failed to create protection rule', true);
+    }
+}
+async function save() {
+    if (!canSave || !$workspaceStore)
+        return;
+    try {
+        await WorkspaceService.updateProtectionRule({
+            workspace: $workspaceStore,
+            ruleName: initialName,
+            requestBody: {
+                rules: [
+                    ...(disableDirectDeployment ? ['DisableDirectDeployment'] : []),
+                    ...(disableFork ? ['DisableWorkspaceForking'] : [])
+                ],
+                bypass_groups: selectedGroups,
+                bypass_users: selectedUsers
+            }
+        });
+        sendUserToast('Protection rule saved successfully');
+        // Update initial state
+        initialName = name;
+        initialDisableDirectDeployment = disableDirectDeployment;
+        initialDisableFork = disableFork;
+        initialSelectedGroups = clone(selectedGroups);
+        initialSelectedUsers = clone(selectedUsers);
+        onUpdate?.();
+    }
+    catch (error) {
+        console.error('Failed to save protection rule:', error);
+        sendUserToast('Failed to save protection rule', true);
+    }
+}
+</script>
+
+<div class="flex flex-col gap-6 p-4">
+	<!-- Name Section -->
+	<span class="text-secondary text-sm">
+		Keep in mind that rulesets can take up to one minute to take effect
+	</span>
+	<Section label="Rule Name" class="space-y-2">
+		<TextInput
+			size="md"
+			bind:value={name}
+			error={nameError}
+			inputProps={{
+				placeholder: 'Enter rule name'
+			}}
+		/>
+		{#if nameError}
+			<div class="text-xs text-red-600">{nameError}</div>
+		{/if}
+	</Section>
+
+	<!-- Bypass Permissions Section -->
+	<Section
+		label="Bypass Permissions"
+		description="Select the groups and/or users who can bypass the restrictions defined in this rule. These users will be exempt from the rules configured below."
+		class="space-y-4"
+	>
+		<!-- Groups -->
+		<div class="flex flex-col gap-2">
+			<Label class="text-xs">Groups</Label>
+			<Select
+				bind:value={selectedGroupToAdd}
+				items={safeSelectItems(availableGroups.filter((g) => !selectedGroups.includes(g)))}
+				placeholder="Select groups..."
+			/>
+			{#if selectedGroups.length > 0}
+				<div class="flex flex-wrap gap-2 mt-2">
+					{#each selectedGroups as group (group)}
+						<Badge color="blue" class="flex items-center gap-1">
+							{group}
+							<button
+								type="button"
+								onclick={() => removeGroup(group)}
+								class="ml-1 hover:text-red-600"
+							>
+								<X size={14} />
+							</button>
+						</Badge>
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Users -->
+		<div class="flex flex-col gap-2">
+			<Label class="text-xs">Users</Label>
+			<Select
+				bind:value={selectedUserToAdd}
+				items={safeSelectItems(availableUsers.filter((u) => !selectedUsers.includes(u)))}
+				placeholder="Select users..."
+			/>
+			{#if selectedUsers.length > 0}
+				<div class="flex flex-wrap gap-2 mt-2">
+					{#each selectedUsers as user (user)}
+						<Badge color="indigo" class="flex items-center gap-1">
+							{user}
+							<button
+								type="button"
+								onclick={() => removeUser(user)}
+								class="ml-1 hover:text-red-600"
+							>
+								<X size={14} />
+							</button>
+						</Badge>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	</Section>
+
+	<!-- Protection Rules Section -->
+	<Section
+		label="Protection Rules"
+		description="Configure the rules that will be enforced"
+		class="space-y-4"
+	>
+		<div class="flex flex-col gap-4">
+			<!-- Disable Direct Deployment -->
+			<div class="flex flex-col gap-2">
+				<Toggle
+					bind:checked={disableDirectDeployment}
+					options={{
+						right: 'Disable direct deployment'
+					}}
+				/>
+				<div class="text-xs text-secondary ml-6">
+					Users must use a fork or git branch to make changes. Direct edits are not allowed.
+				</div>
+			</div>
+
+			<!-- Disable Fork -->
+			<div class="flex flex-col gap-2">
+				<Toggle
+					bind:checked={disableFork}
+					options={{
+						right: 'Disable workspace forking'
+					}}
+				/>
+				<div class="text-xs text-secondary ml-6">Users cannot create forks of this workspace.</div>
+			</div>
+		</div>
+	</Section>
+
+	<!-- Actions -->
+	<div class="flex items-center gap-4 pt-4 border-t">
+		<Button
+			variant="accent"
+			unifiedSize="md"
+			disabled={!canSave}
+			on:click={isCreateMode ? create : save}
+			startIcon={{ icon: isCreateMode ? Plus : Save }}
+		>
+			{isCreateMode ? 'Create Rule' : 'Save Rule'}
+		</Button>
+
+		{#if hasUnsavedChanges && !isCreateMode}
+			<span class="text-xs text-secondary">You have unsaved changes</span>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,9 @@
+import { type ProtectionRuleset } from '../../gen';
+interface Props {
+    rule?: ProtectionRuleset;
+    existingNames?: string[];
+    onUpdate?: () => void;
+}
+declare const RulesetEditor: import("svelte").Component<Props, {}, "">;
+type RulesetEditor = ReturnType<typeof RulesetEditor>;
+export default RulesetEditor;

package/package/components/workspaceSettings/SettingsFooter.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">import { Button } from '../common';
+import SaveButton from '../SaveButton.svelte';
+import { X } from 'lucide-svelte';
+import { fade } from 'svelte/transition';
+import { twMerge } from 'tailwind-merge';
+let { hasUnsavedChanges = false, onSave, onDiscard, saveLabel = 'Save settings', disabled = false, inline = false, class: className } = $props();
+</script>
+
+<div
+	class={twMerge(inline ? 'w-full' : 'sticky bottom-0 z-10 w-full border-t bg-surface', className)}
+>
+	<div class={inline ? 'flex items-center justify-end' : 'flex items-center justify-end pt-4 pb-8'}>
+		<div class="flex items-center gap-2">
+			{#if hasUnsavedChanges}
+				<div transition:fade={{ duration: 150 }}>
+					<Button
+						variant="default"
+						size="sm"
+						startIcon={{ icon: X }}
+						onClick={onDiscard}
+					>
+						Discard changes
+					</Button>
+				</div>
+			{/if}
+
+			<SaveButton
+				{onSave}
+				disabled={!hasUnsavedChanges || disabled}
+				label={saveLabel}
+				unifiedSize="md"
+			/>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    hasUnsavedChanges?: boolean;
+    onSave: () => void | Promise<void>;
+    onDiscard: () => void;
+    saveLabel?: string;
+    disabled?: boolean;
+    inline?: boolean;
+    class?: string;
+};
+declare const SettingsFooter: import("svelte").Component<$$ComponentProps, {}, "">;
+type SettingsFooter = ReturnType<typeof SettingsFooter>;
+export default SettingsFooter;