npm - windmill-components - Versions diffs - 1.448.50 → 1.472.2 - Mend

windmill-components 1.448.50 → 1.472.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (533) hide show

package/package/components/settings/WorkspaceOperatorSettings.svelte ADDED Viewed

@@ -0,0 +1,159 @@
+<script>import { Button } from '../common';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+import DataTable from '../table/DataTable.svelte';
+import Section from '../Section.svelte';
+import Head from '../table/Head.svelte';
+import Cell from '../table/Cell.svelte';
+import { WorkspaceService } from '../../gen';
+import { workspaceStore } from '../../stores';
+import { sendUserToast } from '../../toast';
+import { SaveIcon, EyeIcon, EyeOffIcon } from 'lucide-svelte';
+let operatorWorkspaceSettings = {
+    runs: true,
+    schedules: true,
+    resources: true,
+    variables: true,
+    triggers: true,
+    audit_logs: true,
+    groups: true,
+    folders: true,
+    workers: true
+};
+let originalSettings = { ...operatorWorkspaceSettings };
+let isChanged = false;
+let currentWorkspace = null;
+async function saveSettings() {
+    try {
+        await WorkspaceService.updateOperatorSettings({
+            workspace: $workspaceStore,
+            requestBody: operatorWorkspaceSettings
+        });
+        originalSettings = { ...operatorWorkspaceSettings };
+        isChanged = false;
+        sendUserToast('Operator settings saved successfully!', false);
+    }
+    catch (error) {
+        console.error('Error updating operator settings:', error);
+        sendUserToast('Failed to save operator settings.', true);
+    }
+}
+const descriptions = {
+    runs: { title: 'Runs', description: 'View runs' },
+    schedules: { title: 'Schedules', description: 'View schedules' },
+    resources: { title: 'Resources', description: 'View resources' },
+    variables: { title: 'Variables', description: 'View variables' },
+    triggers: { title: 'Triggers', description: 'View all triggers (HTTP, Websocket, Kafka)' },
+    audit_logs: { title: 'Audit Logs', description: 'View audit logs' },
+    groups: { title: 'Groups', description: 'View groups and group members' },
+    folders: { title: 'Folders', description: 'View folders' },
+    workers: { title: 'Workers', description: 'View workers and worker groups' }
+};
+$: if ($workspaceStore && $workspaceStore !== currentWorkspace) {
+    ;
+    (async () => {
+        currentWorkspace = $workspaceStore;
+        const settings = await WorkspaceService.getSettings({
+            workspace: $workspaceStore
+        });
+        if (settings.operator_settings !== null) {
+            operatorWorkspaceSettings = settings.operator_settings ?? operatorWorkspaceSettings;
+            originalSettings = { ...operatorWorkspaceSettings };
+        }
+    })();
+}
+$: isChanged = JSON.stringify(operatorWorkspaceSettings) !== JSON.stringify(originalSettings);
+$: enableAllState = (() => {
+    const values = Object.values(operatorWorkspaceSettings);
+    if (values.every((v) => v === true))
+        return 'true';
+    if (values.every((v) => v === false))
+        return 'false';
+    return undefined;
+})();
+function toggleAllSettings(event) {
+    const newValue = event.detail === true;
+    Object.keys(operatorWorkspaceSettings).forEach((key) => {
+        operatorWorkspaceSettings[key] = newValue;
+    });
+    operatorWorkspaceSettings = { ...operatorWorkspaceSettings };
+}
+</script>
+<div class="mt-6">
+	<Section
+		label="Operator Settings"
+		collapsable={true}
+		tooltip="Configure the operator visibility settings for your workspace. Toggle the settings you want to enable."
+	>
+		<div class="flex flex-col gap-4 my-4">
+			<div class="flex flex-col gap-1">
+				<div class="text-tertiary text-xs">
+					Configure the operator visibility settings for your workspace. Toggle the settings you
+					want to enable.
+				</div>
+			</div>
+		</div>
+		<div class="flex justify-end mb-2">
+			<div class="flex justify-end" />
+		</div>
+		<div class="flex flex-col">
+			<DataTable tableFixed={true} size="xs">
+				<Head>
+					<tr>
+						<Cell head first>Section</Cell>
+						<Cell head>Description</Cell>
+						<Cell head last>
+							<ToggleButtonGroup
+								bind:selected={enableAllState}
+								on:selected={toggleAllSettings}
+								let:item
+							>
+								<ToggleButton
+									icon={EyeIcon}
+									small={true}
+									value={'true'}
+									label="Enable All"
+									{item}
+								/>
+								<ToggleButton
+									icon={EyeOffIcon}
+									small={true}
+									value={'false'}
+									label="Disable All"
+									{item}
+								/>
+							</ToggleButtonGroup>
+						</Cell>
+					</tr>
+				</Head>
+				<tbody class="divide-y bg-surface">
+					{#each Object.entries(descriptions) as [key, { title, description }]}
+						<tr>
+							<Cell first>{title}</Cell>
+							<Cell>{description}</Cell>
+							<Cell last class="pl-8">
+								<ToggleButtonGroup
+									selected={operatorWorkspaceSettings[key] ? 'on' : 'off'}
+									on:selected={({ detail }) => (operatorWorkspaceSettings[key] = detail === 'on')}
+									let:item
+								>
+									<ToggleButton icon={EyeIcon} small={true} value={'on'} label="On" {item} />
+									<ToggleButton icon={EyeOffIcon} small={true} value={'off'} label="Off" {item} />
+								</ToggleButtonGroup>
+							</Cell>
+						</tr>
+					{/each}
+				</tbody>
+			</DataTable>
+		</div>
+		<div class="flex justify-end mt-4">
+			<Button on:click={saveSettings} startIcon={{ icon: SaveIcon }} disabled={!isChanged}>
+				Save
+			</Button>
+		</div>
+	</Section>
+</div>

package/package/components/settings/WorkspaceOperatorSettings.svelte.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WorkspaceOperatorSettingsProps = typeof __propDef.props;
+export type WorkspaceOperatorSettingsEvents = typeof __propDef.events;
+export type WorkspaceOperatorSettingsSlots = typeof __propDef.slots;
+export default class WorkspaceOperatorSettings extends SvelteComponent<WorkspaceOperatorSettingsProps, WorkspaceOperatorSettingsEvents, WorkspaceOperatorSettingsSlots> {
+}
+export {};

package/package/components/settings/WorkspaceUserSettings.svelte CHANGED Viewed

@@ -1,7 +1,9 @@
 <script>import AddUser from '../AddUser.svelte';
-import { Badge, Button, Popup, Skeleton } from '../common';
+import { Badge, Button, Skeleton } from '../common';
+import Popover from '../meltComponents/Popover.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import WorkspaceOperatorSettings from './WorkspaceOperatorSettings.svelte';
 import InviteUser from '../InviteUser.svelte';
 import PageHeader from '../PageHeader.svelte';
 import DataTable from '../table/DataTable.svelte';
@@ -129,11 +131,11 @@ $: showInvites = invites?.length > 0 || (auto_invite_domain != undefined && !aut
 		<input placeholder="Filter members" bind:value={userFilter} class="input !pl-8" />
 		<Search class="absolute left-2" size={14} />
-		<Popup
+		<Popover
 			floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-			containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+			usePointerDownOutside
 		>
-			<svelte:fragment slot="button">
+			<svelte:fragment slot="trigger">
 				<Button
 					color={auto_invite_domain != undefined ? 'green' : 'red'}
 					variant="border"
@@ -145,113 +147,119 @@ $: showInvites = invites?.length > 0 || (auto_invite_domain != undefined && !aut
 						: 'OFF'}
 				</Button>
 			</svelte:fragment>
-			<div class="flex flex-col items-start">
-				<span class="text-sm leading-6 font-semibold">
-					{isCloudHosted()
-						? `Auto-add anyone from ${
-								auto_invite_domain != undefined ? auto_invite_domain : domain
-						  }`
-						: `Auto-add anyone joining the instance`}
-				</span>
+			<svelte:fragment slot="content">
+				<div class="flex flex-col items-start p-4">
+					<span class="text-sm leading-6 font-semibold">
+						{isCloudHosted()
+							? `Auto-add anyone from ${
+									auto_invite_domain != undefined ? auto_invite_domain : domain
+							  }`
+							: `Auto-add anyone joining the instance`}
+					</span>
+					{#if showInvites}
+						<span class="text-xs mb-1 leading-6 pt-2"
+							>Mode <Tooltip>Whether to invite or add users directly to the workspace.</Tooltip>
+						</span>
+						<ToggleButtonGroup
+							selected={autoAdd ? 'add' : 'invite'}
+							on:selected={async (e) => {
+								if (auto_invite_domain != undefined) {
+									await removeAllInvitesFromDomain()
+									await WorkspaceService.editAutoInvite({
+										workspace: $workspaceStore ?? '',
+										requestBody: {
+											operator: operatorOnly ?? false,
+											invite_all: !isCloudHosted(),
+											auto_add: e.detail === 'add'
+										}
+									})
+									loadSettings()
+									listInvites()
+									listUsers()
+									autoAdd = e.detail === 'add'
+								} else {
+									autoAdd = e.detail === 'add'
+								}
+							}}
+							let:item
+						>
+							<ToggleButton value="invite" size="xs" label="Auto-invite" {item} />
+							<ToggleButton value="add" size="xs" label="Auto-add" {item} />
+						</ToggleButtonGroup>
+					{/if}
-				{#if showInvites}
 					<span class="text-xs mb-1 leading-6 pt-2"
-						>Mode <Tooltip>Whether to invite or add users directly to the workspace.</Tooltip>
-					</span>
+						>Role <Tooltip>Role of the auto-added users</Tooltip></span
+					>
 					<ToggleButtonGroup
-						selected={autoAdd ? 'add' : 'invite'}
+						selected={operatorOnly ? 'operator' : 'developer'}
 						on:selected={async (e) => {
 							if (auto_invite_domain != undefined) {
 								await removeAllInvitesFromDomain()
 								await WorkspaceService.editAutoInvite({
 									workspace: $workspaceStore ?? '',
 									requestBody: {
-										operator: operatorOnly ?? false,
+										operator: e.detail === 'operator',
 										invite_all: !isCloudHosted(),
-										auto_add: e.detail === 'add'
+										auto_add: showInvites ? autoAdd ?? false : true
 									}
 								})
+								operatorOnly = e.detail === 'operator'
 								loadSettings()
 								listInvites()
 								listUsers()
 							} else {
-								autoAdd = e.detail === 'add'
+								operatorOnly = e.detail === 'operator'
 							}
 						}}
+						let:item
 					>
-						<ToggleButton value="invite" size="xs" label="Auto-invite" />
-						<ToggleButton value="add" size="xs" label="Auto-add" />
+						<ToggleButton
+							value="operator"
+							label="Operator"
+							tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+							{item}
+						/>
+						<ToggleButton
+							value="developer"
+							label="Developer"
+							tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+							{item}
+						/>
 					</ToggleButtonGroup>
-				{/if}
-				<span class="text-xs mb-1 leading-6 pt-2"
-					>Role <Tooltip>Role of the auto-added users</Tooltip></span
-				>
-				<ToggleButtonGroup
-					selected={operatorOnly ? 'operator' : 'developer'}
-					on:selected={async (e) => {
-						if (auto_invite_domain != undefined) {
-							await removeAllInvitesFromDomain()
-							await WorkspaceService.editAutoInvite({
-								workspace: $workspaceStore ?? '',
-								requestBody: {
-									operator: e.detail === 'operator',
-									invite_all: !isCloudHosted(),
-									auto_add: showInvites ? autoAdd ?? false : true
-								}
-							})
-							loadSettings()
-							listInvites()
-							listUsers()
-						} else {
-							operatorOnly = e.detail === 'operator'
-						}
-					}}
-				>
-					<ToggleButton
-						value="operator"
-						size="xs"
-						label="Operator"
-						tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
-					/>
-					<ToggleButton
-						value="developer"
-						size="xs"
-						label="Developer"
-						tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
-					/>
-				</ToggleButtonGroup>
-				<div class="pt-2">
-					<Toggle
-						size="xs"
-						checked={auto_invite_domain != undefined}
-						on:change={async (e) => {
-							await removeAllInvitesFromDomain()
-							await WorkspaceService.editAutoInvite({
-								workspace: $workspaceStore ?? '',
-								requestBody: e.detail
-									? {
-											operator: operatorOnly ?? false,
-											invite_all: !isCloudHosted(),
-											auto_add: showInvites ? autoAdd ?? false : true
-									  }
-									: { operator: undefined, auto_add: undefined }
-							})
-							loadSettings()
-							listInvites()
-							listUsers()
-						}}
-						disabled={isCloudHosted() && !allowedAutoDomain}
-						options={{
-							right: 'Enabled'
-						}}
-					/>
+					<div class="pt-2">
+						<Toggle
+							size="xs"
+							checked={auto_invite_domain != undefined}
+							on:change={async (e) => {
+								await removeAllInvitesFromDomain()
+								await WorkspaceService.editAutoInvite({
+									workspace: $workspaceStore ?? '',
+									requestBody: e.detail
+										? {
+												operator: operatorOnly ?? false,
+												invite_all: !isCloudHosted(),
+												auto_add: showInvites ? autoAdd ?? false : true
+										  }
+										: { operator: undefined, auto_add: undefined }
+								})
+								loadSettings()
+								listInvites()
+								listUsers()
+							}}
+							disabled={isCloudHosted() && !allowedAutoDomain}
+							options={{
+								right: 'Enabled'
+							}}
+						/>
+					</div>
+					{#if isCloudHosted() && !allowedAutoDomain}
+						<div class="text-red-400 text-xs">{domain} domain not allowed for auto-add</div>
+					{/if}
 				</div>
-				{#if isCloudHosted() && !allowedAutoDomain}
-					<div class="text-red-400 text-xs">{domain} domain not allowed for auto-add</div>
-				{/if}
-			</div>
-		</Popup>
+			</svelte:fragment>
+		</Popover>
 		<AddUser
 			on:new={() => {
 				listUsers()
@@ -336,26 +344,27 @@ $: showInvites = invites?.length > 0 || (auto_invite_domain != undefined && !aut
 										})
 										listUsers()
 									}}
+									let:item
 								>
 									<ToggleButton
 										value="operator"
-										size="xs"
 										label="Operator"
 										tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+										{item}
 									/>
 									<ToggleButton
 										value="developer"
-										size="xs"
 										label="Developer"
 										tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+										{item}
 									/>
 									<ToggleButton
 										value="admin"
-										size="xs"
 										label="Admin"
 										tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+										{item}
 									/>
 								</ToggleButtonGroup>
 							</div>
@@ -417,6 +426,8 @@ $: showInvites = invites?.length > 0 || (auto_invite_domain != undefined && !aut
 	</DataTable>
 </div>
+<WorkspaceOperatorSettings />
 {#if showInvites}
 	<PageHeader
 		title="Invites ({invites.length ?? ''})"
@@ -463,26 +474,27 @@ $: showInvites = invites?.length > 0 || (auto_invite_domain != undefined && !aut
 											})
 											listUsers()
 										}}
+										let:item
 									>
 										<ToggleButton
 											value="operator"
-											size="xs"
 											label="Operator"
 											tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+											{item}
 										/>
 										<ToggleButton
 											value="developer"
-											size="xs"
 											label="Developer"
 											tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+											{item}
 										/>
 										<ToggleButton
 											value="admin"
-											size="xs"
 											label="Admin"
 											tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+											{item}
 										/>
 									</ToggleButtonGroup>
 								</div>

package/package/components/sidebar/CriticalAlertModal.svelte CHANGED Viewed

@@ -4,7 +4,8 @@ import { SettingService } from '../../gen';
 import { sendUserToast } from '../../toast';
 import { workspaceStore, isCriticalAlertsUIOpen, devopsRole, userStore, superadmin } from '../../stores';
 import Modal2 from '../common/modal/Modal2.svelte';
-import { Button, Popup } from '../common';
+import { Button } from '../common';
+import Popover from '../meltComponents/Popover.svelte';
 import List from '../common/layout/List.svelte';
 import Toggle from '../Toggle.svelte';
 import { BellOff, Bell, ExternalLink, Settings } from 'lucide-svelte';
@@ -133,12 +134,12 @@ async function acknowledgeAlert(id) {
 	<svelte:fragment slot="header-right">
 		<List horizontal>
 			{#if $superadmin || $userStore?.is_admin}
-				<Popup
-					floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-					target="#mute-settings-button"
-					preventPopupClosingOnClickInside={true}
+				<Popover
+					floatingConfig={{ strategy: 'fixed', placement: 'bottom-end' }}
+					portal="#mute-settings-button"
+					contentClasses="p-4"
 				>
-					<svelte:fragment slot="button">
+					<svelte:fragment slot="trigger">
 						<div id="mute-settings-button">
 							<Button variant="border" color="light" nonCaptureEvent>
 								{#if muteSettings.global || muteSettings.workspace}
@@ -149,76 +150,81 @@ async function acknowledgeAlert(id) {
 							</Button>
 						</div>
 					</svelte:fragment>
-					<List justify="start">
-						<div class="w-full">
-							{#if $superadmin}
+					<svelte:fragment slot="content">
+						<List justify="start">
+							<div class="w-full">
+								{#if $superadmin}
+									<Toggle
+										on:change={saveGlobalMuteSetting}
+										bind:checked={muteSettings.global}
+										options={{
+											right: 'Automatically acknowledge critical alerts instance wide'
+										}}
+										size="xs"
+										stopPropagation={true}
+									/>
+								{/if}
+							</div>
+							<div class="w-full">
 								<Toggle
-									on:change={saveGlobalMuteSetting}
-									bind:checked={muteSettings.global}
+									on:change={saveWorkSpaceMuteSetting}
+									bind:checked={muteSettings.workspace}
 									options={{
-										right: 'Automatically acknowledge critical alerts instance wide'
+										right: 'Automatically acknowledge critical alerts for current workspace'
 									}}
 									size="xs"
 									stopPropagation={true}
 								/>
-							{/if}
-						</div>
-						<div class="w-full">
-							<Toggle
-								on:change={saveWorkSpaceMuteSetting}
-								bind:checked={muteSettings.workspace}
-								options={{
-									right: 'Automatically acknowledge critical alerts for current workspace'
-								}}
-								size="xs"
-								stopPropagation={true}
-							/>
-						</div>
-					</List>
-				</Popup>
+							</div>
+						</List>
+					</svelte:fragment>
+				</Popover>
 			{/if}
 			{#if $superadmin}
-				<Popup
-					floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-					target="#settings-button"
+				<Popover
+					floatingConfig={{ strategy: 'fixed', placement: 'bottom-end' }}
+					portal="#settings-button"
+					contentClasses="p-4"
 				>
-					<svelte:fragment slot="button">
+					<svelte:fragment slot="trigger">
 						<div id="settings-button">
 							<Button variant="border" color="light" nonCaptureEvent>
 								<Settings size="16" />
 							</Button>
 						</div>
 					</svelte:fragment>
-					<List justify="start" gap="none">
-						<div class="w-full">
-							<Button
-								size="xs"
-								color="light"
-								href="{base}/?workspace=admins#superadmin-settings"
-								target="_blank"
-							>
-								<div class="w-full">
-									<List horizontal justify="between" gap="sm">
-										<div>Instance Critical Alert Settings</div>
-										<ExternalLink size="16" />
-									</List>
-								</div>
-							</Button>
-						</div>
-						<div class="w-full">
-							<Button
-								size="xs"
-								color="light"
-								href="{base}/workspace_settings?tab=error_handler"
-								target="_blank"
-							>
-								Workspace Critical Alert Settings <ExternalLink size="16" />
-							</Button>
-						</div>
-					</List>
-				</Popup>
+					<svelte:fragment slot="content">
+						<List justify="start" gap="none">
+							<div class="w-full">
+								<Button
+									size="xs"
+									color="light"
+									href="{base}/?workspace=admins#superadmin-settings"
+									target="_blank"
+								>
+									<div class="w-full">
+										<List horizontal justify="between" gap="sm">
+											<div>Instance Critical Alert Settings</div>
+											<ExternalLink size="16" />
+										</List>
+									</div>
+								</Button>
+							</div>
+							<div class="w-full">
+								<Button
+									size="xs"
+									color="light"
+									href="{base}/workspace_settings?tab=error_handler"
+									target="_blank"
+								>
+									Workspace Critical Alert Settings <ExternalLink size="16" />
+								</Button>
+							</div>
+						</List>
+					</svelte:fragment>
+				</Popover>
 			{:else}
 				<Button
 					size="xs"