windmill-components 1.269.3 → 1.291.4

package/package/ata/apis.d.ts

@@ -1,9 +1,8 @@
-import type { ATABootstrapConfig } from './index';
-export declare const getNPMVersionsForModule: (config: ATABootstrapConfig, moduleName: string) => Promise<Error | {
+export declare const getNPMVersionsForModule: (moduleName: string, resLimit: ResLimit) => Promise<Error | {
     tags: Record<string, string>;
     versions: string[];
 }>;
-export declare const getNPMVersionForModuleReference: (config: ATABootstrapConfig, moduleName: string, reference: string) => Promise<Error | {
+export declare const getNPMVersionForModuleReference: (moduleName: string, reference: string, resLimit: ResLimit) => Promise<Error | {
     version: string | null;
 }>;
 export type NPMTreeMeta = {
@@ -15,7 +14,7 @@ export type NPMTreeMeta = {
     version: string;
     raw: string;
 };
-export declare const getFiletreeForModuleWithVersion: (config: ATABootstrapConfig, moduleName: string, version: string, raw: string) => Promise<Error | {
+export declare const getFiletreeForModuleWithVersion: (moduleName: string, version: string, raw: string, resLimit: ResLimit) => Promise<Error | {
     moduleName: string;
     version: string;
     raw: string;
@@ -24,4 +23,8 @@ export declare const getFiletreeForModuleWithVersion: (config: ATABootstrapConfi
         name: string;
     }>;
 }>;
-export declare const getDTSFileForModuleWithVersion: (config: ATABootstrapConfig, moduleName: string, version: string, file: string) => Promise<string | Error>;
+export declare const getDTSFileForModuleWithVersion: (moduleName: string, version: string, file: string) => Promise<string | Error>;
+export interface ResLimit {
+    usage: number;
+}
+export declare function isOverlimit(resLimit: ResLimit): boolean;

package/package/ata/apis.js

@@ -1,17 +1,17 @@
 //  https://github.com/jsdelivr/data.jsdelivr.com
-export const getNPMVersionsForModule = (config, moduleName) => {
+export const getNPMVersionsForModule = (moduleName, resLimit) => {
     const url = `https://data.jsdelivr.com/v1/package/npm/${moduleName}`;
-    return api(config, url, {
+    return api(url, resLimit, {
         cache: 'no-store'
     });
 };
-export const getNPMVersionForModuleReference = (config, moduleName, reference) => {
+export const getNPMVersionForModuleReference = (moduleName, reference, resLimit) => {
     const url = `https://data.jsdelivr.com/v1/package/resolve/npm/${moduleName}@${reference}`;
-    return api(config, url);
+    return api(url, resLimit);
 };
-export const getFiletreeForModuleWithVersion = async (config, moduleName, version, raw) => {
+export const getFiletreeForModuleWithVersion = async (moduleName, version, raw, resLimit) => {
     const url = `https://data.jsdelivr.com/v1/package/npm/${moduleName}@${version}/flat`;
-    const res = await api(config, url);
+    const res = await api(url, resLimit);
     if (res instanceof Error) {
         return res;
     }
@@ -24,7 +24,7 @@ export const getFiletreeForModuleWithVersion = async (config, moduleName, versio
         };
     }
 };
-export const getDTSFileForModuleWithVersion = async (config, moduleName, version, file) => {
+export const getDTSFileForModuleWithVersion = async (moduleName, version, file) => {
     // file comes with a prefix /
     const url = `https://cdn.jsdelivr.net/npm/${moduleName}@${version}${file}`;
     const res = await fetch(url);
@@ -35,10 +35,21 @@ export const getDTSFileForModuleWithVersion = async (config, moduleName, version
         return new Error('OK');
     }
 };
-function api(config, url, init) {
+export function isOverlimit(resLimit) {
+    return resLimit.usage > 5000000;
+}
+function api(url, resLimit, init) {
+    if (isOverlimit(resLimit)) {
+        console.warn(`Exceeded limit of types downloaded for the needs of the assistant fetching: ${url}, ${resLimit.usage}`);
+        return new Promise(() => new Error('Exceeded limit of 100MB of data downloaded.'));
+    }
     return fetch(url, init).then((res) => {
         if (res.ok) {
-            return res.json().then((f) => f);
+            return res.text().then((text) => {
+                resLimit.usage += text.length;
+                console.log('resLimit', url, resLimit.usage);
+                return JSON.parse(text);
+            });
         }
         else {
             return new Error('OK');

package/package/ata/edgeCases.js

@@ -68,5 +68,9 @@ export const mapModuleNameToModule = (moduleSpecifier) => {
     return moduleName;
 };
 export function isRelativePath(d) {
-    return d.startsWith('./') || d.startsWith('../') || d.startsWith('/') || d.startsWith('.../');
+    return (d.startsWith('./') ||
+        d.startsWith('../') ||
+        d.startsWith('/') ||
+        d.startsWith('.../') ||
+        d.startsWith('/'));
 }

package/package/ata/index.d.ts

@@ -1,3 +1,4 @@
+import { type ResLimit } from './apis';
 export interface ATABootstrapConfig {
     root: string;
     scriptPath?: string;
@@ -33,10 +34,9 @@ export interface ATABootstrapConfig {
  */
 export declare const setupTypeAcquisition: (config: ATABootstrapConfig) => (initialSourceFile: string) => Promise<void>;
 /** The bulk load of the work in getting the filetree based on how people think about npm names and versions */
-export declare const getFileTreeForModuleWithTag: (config: ATABootstrapConfig, moduleName: string, tag: string | undefined, raw: string) => Promise<{
-    /** If you need a custom logger instead of the console global */
+export declare const getFileTreeForModuleWithTag: (moduleName: string, tag: string | undefined, raw: string, resLimit: ResLimit) => Promise<{
     moduleName: string;
-    version: string;
+    version: string; /** code to dependency parser */
     raw: string;
     default: string;
     files: {

package/package/ata/index.js

@@ -1,4 +1,4 @@
-import { getDTSFileForModuleWithVersion, getFiletreeForModuleWithVersion, getNPMVersionForModuleReference, getNPMVersionsForModule } from './apis';
+import { getDTSFileForModuleWithVersion, getFiletreeForModuleWithVersion, getNPMVersionForModuleReference, getNPMVersionsForModule, isOverlimit } from './apis';
 import { isRelativePath, mapModuleNameToModule } from './edgeCases';
 /**
  * The function which starts up type acquisition,
@@ -14,14 +14,31 @@ export const setupTypeAcquisition = (config) => {
     const fsMap = new Map();
     let estimatedToDownload = 0;
     let estimatedDownloaded = 0;
-    return (initialSourceFile) => {
+    let resLimit = { usage: 0 };
+    return async (initialSourceFile) => {
         estimatedToDownload = 0;
         estimatedDownloaded = 0;
-        return resolveDeps(initialSourceFile, 0).then((t) => {
-            if (estimatedDownloaded > 0) {
-                config.delegate.finished?.(fsMap);
+        let todo = [initialSourceFile];
+        let next = [];
+        let i = 0;
+        let nb = 0;
+        let time = new Date().getTime();
+        while (todo.length && nb < 200 && new Date().getTime() - time < 1000 * 15) {
+            const current = todo.shift();
+            nb += 1;
+            const deps = await resolveDeps(current, i, resLimit);
+            if (i <= 0) {
+                next.push(...deps);
             }
-        });
+            if (todo.length === 0) {
+                i += 1;
+                todo = next;
+                next = [];
+            }
+        }
+        if (estimatedDownloaded > 0) {
+            config.delegate.finished?.(fsMap);
+        }
     };
     function getVersion(d) {
         if (d.lastIndexOf('@') > 0) {
@@ -34,10 +51,7 @@ export const setupTypeAcquisition = (config) => {
         }
         return 'latest';
     }
-    async function resolveDeps(initialSourceFile, depth) {
-        // if (depth > 2) {
-        // 	return
-        // }
+    async function resolveDeps(initialSourceFile, depth, resLimit) {
         let depsToGet = config
             .depsParser(initialSourceFile)
             .map((d) => {
@@ -49,36 +63,41 @@ export const setupTypeAcquisition = (config) => {
             };
         })
             .filter((f) => !moduleMap.has(f.raw));
-        if (depsToGet.length === 0) {
-            return;
-        }
-        // Make it so it won't get re-downloaded
-        depsToGet.forEach((dep) => moduleMap.set(dep.raw, { state: 'loading' }));
         if (depth == 0) {
             const relativeDeps = depsToGet.filter((f) => isRelativePath(f.raw));
             relativeDeps.forEach(async (f) => {
                 let path = f.raw.startsWith('/')
-                    ? ''
+                    ? f.raw
                     : '/' + config.scriptPath + (f.raw.startsWith('../') ? '/../' : '/.') + f.raw;
                 let url = config.root + path;
+                console.log('fetching local file', url, f.raw);
                 const res = await fetch(url);
                 if (res.ok) {
                     config.delegate.localFile?.(await res.text(), f.raw);
                 }
             });
-            depsToGet = depsToGet.filter((f) => !isRelativePath(f.raw));
         }
+        depsToGet.forEach((dep) => moduleMap.set(dep.raw, { state: 'loading' }));
+        depsToGet = depsToGet.filter((f) => !isRelativePath(f.raw));
+        if (depsToGet.length === 0) {
+            return [];
+        }
+        console.log('dependencies to fetch for type assistant: ', depsToGet.map((x) => x.raw));
+        // Make it so it won't get re-downloaded
         // Grab the module trees which gives us a list of files to download
-        const trees = await Promise.all(depsToGet.map((f) => getFileTreeForModuleWithTag(config, f.module, f.version, f.raw)));
+        const trees = await Promise.all(depsToGet.map((f) => getFileTreeForModuleWithTag(f.module, f.version, f.raw, resLimit)));
         const treesOnly = trees.filter((t) => !('error' in t));
         // These are the modules which we can grab directly
         const hasDTS = treesOnly.filter((t) => t.files.find((f) => f.name.endsWith('.d.ts')));
         const dtsFilesFromNPM = hasDTS.map((t) => treeToDTSFiles(t, `/node_modules/${t.raw}`));
+        // console.log(dtsFilesFromNPM, 'dtsFilesFromNPM')
         // These are ones we need to look on DT for (which may not be there, who knows)
         const mightBeOnDT = treesOnly.filter((t) => !hasDTS.includes(t));
+        // console.log(mightBeOnDT, 'mightBeOnDT')
+        // return
         const dtTrees = await Promise.all(
         // TODO: Switch from 'latest' to the version from the original tree which is user-controlled
-        mightBeOnDT.map((f) => getFileTreeForModuleWithTag(config, `@types/${getDTName(f.moduleName)}`, 'latest', `@types/${getDTName(f.raw)}`)));
+        mightBeOnDT.map((f) => getFileTreeForModuleWithTag(`@types/${getDTName(f.moduleName)}`, 'latest', `@types/${getDTName(f.raw)}`, resLimit)));
         const dtTreesOnly = dtTrees.filter((t) => !('error' in t));
         const dtsFilesFromDT = dtTreesOnly.map((t) => treeToDTSFiles(t, `/node_modules/@types/${getDTName(t.raw).replace('types__', '')}`));
         // Collect all the npm and DT DTS requests and flatten their arrays
@@ -89,7 +108,7 @@ export const setupTypeAcquisition = (config) => {
         }
         // Grab the package.jsons for each dependency
         for (const tree of treesOnly) {
-            const pkgJSON = await getDTSFileForModuleWithVersion(config, tree.moduleName, tree.version, '/package.json');
+            const pkgJSON = await getDTSFileForModuleWithVersion(tree.moduleName, tree.version, '/package.json');
             let prefix = `/node_modules/${tree.raw}`;
             if (dtTreesOnly.includes(tree))
                 prefix = `/node_modules/@types/${getDTName(tree.raw).replace('types__', '')}`;
@@ -103,8 +122,12 @@ export const setupTypeAcquisition = (config) => {
             }
         }
         // Grab all dts files
-        await Promise.all(allDTSFiles.map(async (dts) => {
-            const dtsCode = await getDTSFileForModuleWithVersion(config, dts.moduleName, dts.moduleVersion, dts.path);
+        return (await Promise.all(allDTSFiles.map(async (dts) => {
+            if (isOverlimit(resLimit)) {
+                console.warn('Exceeded limit of types downloaded for the needs of the assistant');
+                return;
+            }
+            const dtsCode = await getDTSFileForModuleWithVersion(dts.moduleName, dts.moduleVersion, dts.path);
             estimatedDownloaded++;
             if (dtsCode instanceof Error) {
                 // TODO?
@@ -118,11 +141,11 @@ export const setupTypeAcquisition = (config) => {
                     config.delegate.progress(estimatedDownloaded, estimatedToDownload);
                 }
                 if (dts.moduleName != 'bun-types') {
+                    return dtsCode;
                     // Recurse through deps
-                    await resolveDeps(dtsCode, depth + 1);
                 }
             }
-        }));
+        }))).filter((f) => f != undefined);
     }
 };
 function treeToDTSFiles(tree, vfsPrefix) {
@@ -140,14 +163,14 @@ function treeToDTSFiles(tree, vfsPrefix) {
     return dtsRefs;
 }
 /** The bulk load of the work in getting the filetree based on how people think about npm names and versions */
-export const getFileTreeForModuleWithTag = async (config, moduleName, tag, raw) => {
+export const getFileTreeForModuleWithTag = async (moduleName, tag, raw, resLimit) => {
     let toDownload = tag || 'latest';
     // I think having at least 2 dots is a reasonable approx for being a semver and not a tag,
     // we can skip an API request, TBH this is probably rare
     if (toDownload.split('.').length < 2) {
         // The jsdelivr API needs a _version_ not a tag. So, we need to switch out
         // the tag to the version via an API request.
-        const response = await getNPMVersionForModuleReference(config, moduleName, toDownload);
+        const response = await getNPMVersionForModuleReference(moduleName, toDownload, resLimit);
         if (response instanceof Error) {
             return {
                 error: response,
@@ -156,7 +179,7 @@ export const getFileTreeForModuleWithTag = async (config, moduleName, tag, raw)
         }
         const neededVersion = response.version;
         if (!neededVersion) {
-            const versions = await getNPMVersionsForModule(config, moduleName);
+            const versions = await getNPMVersionsForModule(moduleName, resLimit);
             if (versions instanceof Error) {
                 return {
                     error: response,
@@ -171,7 +194,7 @@ export const getFileTreeForModuleWithTag = async (config, moduleName, tag, raw)
         }
         toDownload = neededVersion;
     }
-    const res = await getFiletreeForModuleWithVersion(config, moduleName, toDownload, raw);
+    const res = await getFiletreeForModuleWithVersion(moduleName, toDownload, raw, resLimit);
     if (res instanceof Error) {
         return {
             error: res,

package/package/common.d.ts

@@ -35,6 +35,7 @@ export interface SchemaProperty {
     required?: string[];
     showExpr?: string;
     password?: boolean;
+    order?: string[];
 }
 export interface ModalSchemaProperty {
     selectedType?: string;

package/package/components/AddUser.svelte

@@ -1,6 +1,6 @@
 <script>import { createEventDispatcher } from 'svelte';
 import { globalEmailInvite, superadmin, workspaceStore } from '../stores';
-import { UserService, WorkspaceService } from '../gen';
+import { SettingService, UserService, WorkspaceService } from '../gen';
 import { Button, Popup } from './common';
 import { sendUserToast } from '../toast';
 import { isCloudHosted } from '../cloud';
@@ -18,12 +18,18 @@ function handleKeyUp(event) {
         addUser();
     }
 }
+let automateUsernameCreation = false;
+async function getAutomateUsernameCreationSetting() {
+    automateUsernameCreation =
+        (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
+}
+getAutomateUsernameCreationSetting();
 async function addUser() {
     await WorkspaceService.addUser({
         workspace: $workspaceStore,
         requestBody: {
             email,
-            username,
+            username: automateUsernameCreation ? undefined : username,
             is_admin: selected == 'admin',
             operator: selected == 'operator'
         }
@@ -32,6 +38,7 @@ async function addUser() {
     if (!(await UserService.existsEmail({ email }))) {
         let isSuperadmin = $superadmin;
         if (!isCloudHosted()) {
+            const emailCopy = email;
             sendUserToast(`User ${email} is not registered yet on the instance. ${!isSuperadmin
                 ? `If not using SSO, ask an administrator to add ${email} to the instance`
                 : ''}`, true, isSuperadmin
@@ -39,7 +46,7 @@ async function addUser() {
                     {
                         label: 'Add user to the instance',
                         callback: () => {
-                            $globalEmailInvite = email;
+                            $globalEmailInvite = emailCopy;
                             goto('#superadmin-settings');
                         }
                     }
@@ -67,8 +74,10 @@ let selected = 'developer';
 		<span class="text-xs mb-1 leading-6">Email</span>
 		<input type="email mb-1" on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
 
-		<span class="text-xs mb-1 pt-2 leading-6">Username</span>
-		<input type="text" on:keyup={handleKeyUp} placeholder="username" bind:value={username} />
+		{#if !automateUsernameCreation}
+			<span class="text-xs mb-1 pt-2 leading-6">Username</span>
+			<input type="text" on:keyup={handleKeyUp} placeholder="username" bind:value={username} />
+		{/if}
 
 		<span class="text-xs mb-1 pt-2 leading-6">Role</span>
 		<ToggleButtonGroup bind:selected class="mb-4">
@@ -105,7 +114,7 @@ let selected = 'developer';
 					username = undefined
 				})
 			}}
-			disabled={email === undefined || username === undefined}
+			disabled={email === undefined || (!automateUsernameCreation && username === undefined)}
 		>
 			Add
 		</Button>

package/package/components/ApiConnectForm.svelte

@@ -76,7 +76,7 @@ function parseConnectionString(close) {
             user,
             password: password || args?.password,
             host,
-            port: port || args?.port,
+            port: (port ? Number(port) : undefined) || args?.port,
             dbname: dbname || args?.dbname,
             sslmode: sslmode || args?.sslmode
         }, null, 2);

package/package/components/ArgEnum.svelte

@@ -20,7 +20,7 @@ function onCreate(newItem) {
 <div class="w-full flex-col">
 	<div class="w-full">
 		<AutoComplete
-			items={[...(enum_ ?? []), ...customItems]}
+			items={[...(required ? [] : ['']), ...(enum_ ?? []), ...customItems]}
 			bind:selectedItem={value}
 			inputClassName={twMerge(
 				'bg-surface-secondary flex',

package/package/components/ArgEnum.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         disabled: boolean;
         value: any;
         enum_: string[] | undefined;
-        autofocus: boolean;
+        autofocus: boolean | null;
         defaultValue: string | undefined;
         valid: boolean;
         create: boolean;

package/package/components/ArgInfo.svelte

@@ -25,8 +25,9 @@ async function getResource(path) {
 				on:click={() => copyToClipboard(JSON.stringify(jsonViewerContent, null, 4))}
 				color="light"
 				size="xs"
+				startIcon={{ icon: ClipboardCopy }}
 			>
-				<div class="flex gap-2 items-center">Copy <ClipboardCopy /> </div>
+				Copy
 			</Button>
 		</svelte:fragment>
 		{#if isString(jsonViewerContent)}

package/package/components/ArgInput.svelte

@@ -41,7 +41,7 @@ export let itemsType = undefined;
 export let displayHeader = true;
 export let properties = undefined;
 export let nestedRequired = undefined;
-export let autofocus = false;
+export let autofocus = null;
 export let compact = false;
 export let password = false;
 export let pickForField = undefined;
@@ -74,7 +74,7 @@ function computeDefaultValue(nvalue, inputCat, defaultValue) {
             if (inputCat === 'string') {
                 value = '';
             }
-            else if (inputCat == 'enum') {
+            else if (inputCat == 'enum' && required) {
                 value = enum_?.[0];
             }
             else if (inputCat == 'boolean') {
@@ -278,8 +278,8 @@ function changePosition(i, up) {
 		{/if}
 
 		{#if description}
-			<div class="text-sm italic pb-1 text-secondary">
-				{description}
+			<div class="text-xs italic pb-1 text-secondary">
+				<pre class="font-main">{description}</pre>
 			</div>
 		{/if}
 		<div class="flex space-x-1">
@@ -448,7 +448,7 @@ function changePosition(i, up) {
 			{:else if inputCat == 'resource-object' && resourceTypes == undefined}
 				<span class="text-2xs text-tertiary">Loading resource types...</span>
 			{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format.split('-').length > 1 && resourceTypes.includes(format.substring('resource-'.length))))}
-				<ObjectResourceInput {disablePortal} {format} bind:value {showSchemaExplorer} />
+				<ObjectResourceInput selectFirst {disablePortal} {format} bind:value {showSchemaExplorer} />
 			{:else if inputCat == 'resource-object' && format.split('-').length > 1 && format
 					.replace('resource-', '')
 					.replace('_', '')
@@ -541,7 +541,7 @@ function changePosition(i, up) {
 					/>
 				</div>
 			{:else if inputCat == 'date'}
-				<DateTimeInput {autofocus} bind:value />
+				<DateTimeInput useDropdown {autofocus} bind:value />
 			{:else if inputCat == 'sql' || inputCat == 'yaml'}
 				<div class="border my-1 mb-4 w-full border-primary">
 					<SimpleEditor
@@ -571,6 +571,7 @@ function changePosition(i, up) {
 				</div>
 			{:else if inputCat == 'resource-string'}
 				<ResourcePicker
+					selectFirst
 					{disablePortal}
 					bind:value
 					resourceType={format && format.split('-').length > 1

package/package/components/ArgInput.svelte.d.ts

@@ -32,7 +32,7 @@ declare const __propDef: {
             [name: string]: SchemaProperty;
         } | undefined;
         nestedRequired?: string[] | undefined;
-        autofocus?: boolean | undefined;
+        autofocus?: boolean | null | undefined;
         compact?: boolean | undefined;
         password?: boolean | undefined;
         pickForField?: string | undefined;

package/package/components/ArrayTypeNarrowing.svelte

@@ -60,6 +60,7 @@ let selected = itemsType?.type != 'string'
 		</div>
 		<div class="flex flex-row mb-1 mt-2">
 			<Button
+				color="light"
 				variant="border"
 				size="sm"
 				on:click={() => {
@@ -73,6 +74,7 @@ let selected = itemsType?.type != 'string'
 				<Plus size={14} />
 			</Button>
 			<Button
+				color="light"
 				variant="border"
 				size="sm"
 				btnClasses="ml-2"

package/package/components/CenteredModal.svelte

@@ -1,13 +1,16 @@
-<script>import WindmillIcon from './icons/WindmillIcon.svelte';
+<script>import { setLicense } from '../enterpriseUtils';
+import { enterpriseLicense } from '../stores';
+import WindmillIcon from './icons/WindmillIcon.svelte';
 import LoginPageHeader from './LoginPageHeader.svelte';
 export let subtitle = undefined;
 export let title = 'Windmill';
 export let disableLogo = false;
+setLicense();
 </script>
 
 <div class="center-center min-h-screen p-4 relative bg-surface-secondary">
 	<div class="flex flex-col gap-2 items-center w-full">
-		{#if !disableLogo}
+		{#if (!disableLogo && !$enterpriseLicense) || !$enterpriseLicense?.endsWith('_whitelabel')}
 			<div class="hidden lg:block">
 				<div>
 					<WindmillIcon height="100px" width="100px" spin="slow" />

package/package/components/ChangeInstanceUsername.svelte

@@ -0,0 +1,123 @@
+<script>import { SettingService, UserService } from '../gen';
+import { Button, Popup } from './common';
+import { sendUserToast } from '../toast';
+import Alert from './common/alert/Alert.svelte';
+import { autoPlacement } from '@floating-ui/core';
+import { createEventDispatcher } from 'svelte';
+export let email;
+export let username;
+export let isConflict = false;
+let usernameInfo = undefined;
+function handleKeyUp(event) {
+    const key = event.key;
+    if (key === 'Enter') {
+        event.preventDefault();
+        renameUser();
+    }
+}
+async function getUsernameInfo() {
+    usernameInfo = await UserService.globalUsernameInfo({
+        email
+    });
+    if (isConflict) {
+        username = usernameInfo.username;
+    }
+}
+getUsernameInfo();
+const dispatch = createEventDispatcher();
+async function renameUser() {
+    const automateUsernameCreation = (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
+    if (!automateUsernameCreation) {
+        sendUserToast('Modifying the username is only possible when the creation of usernames is automated and defined at instance level..');
+        return;
+    }
+    await UserService.globalUserRename({
+        email,
+        requestBody: {
+            new_username: username
+        }
+    });
+    sendUserToast(`Rename user ${email} to ${username}`);
+    dispatch('renamed');
+}
+</script>
+
+<Popup
+	floatingConfig={{
+		middleware: [
+			autoPlacement({
+				allowedPlacements: ['bottom-end', 'top-end']
+			})
+		]
+	}}
+	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+	let:close
+>
+	<svelte:fragment slot="button">
+		<Button color={isConflict ? 'red' : 'light'} size="xs" spacingSize="xs2" nonCaptureEvent={true}
+			>{isConflict ? 'Fix username conflict' : 'Change username'}</Button
+		>
+	</svelte:fragment>
+	<div class="flex flex-col max-w-2xl p-2">
+		<span class="text-sm mb-2 leading-6 font-semibold"
+			>{isConflict ? 'Fix username conflict' : 'Change username'}</span
+		>
+
+		<span class="text-xs mb-1 leading-6"
+			>{isConflict ? 'Auto-generated instance username' : 'New username'}</span
+		>
+		<input
+			type="text"
+			class="mb-4"
+			on:keyup={handleKeyUp}
+			bind:value={username}
+			disabled={isConflict}
+		/>
+
+		{#if isConflict}
+			<Alert title="Username conflict" class="mb-4">
+				Users are required to have an instance-wide username that is shared across all workspaces.
+				However, this user has different usernames in different workspaces.
+
+				{#if usernameInfo?.workspace_usernames && usernameInfo.workspace_usernames.filter((w) => w.username !== username).length > 0}
+					<br />
+					<br />
+					Workspaces requiring username modification: {usernameInfo.workspace_usernames
+						.filter((w) => w.username !== username)
+						.map((wu) => `${wu.workspace_id} (${wu.username})`)
+						.join(', ')}
+				{/if}
+			</Alert>
+		{/if}
+
+		{#if !isConflict && usernameInfo?.workspace_usernames && usernameInfo.workspace_usernames.filter((w) => w.username !== username).length > 0}
+			<Alert title="Concerned workspaces" class="mb-4">
+				{usernameInfo.workspace_usernames
+					.filter((w) => w.username !== username)
+					.map((wu) => `${wu.workspace_id}`)
+					.join(', ')}
+			</Alert>
+		{/if}
+
+		<Alert type="warning" title="Manual action required" class="mb-4">
+			This operation does not handle references in scripts, workflows and applications to scripts in
+			the workspace, and references in resources to variables. You will have to handle those
+			manually.
+			<br />
+		</Alert>
+
+		<Button
+			variant="contained"
+			color="blue"
+			size="xs"
+			on:click={() => {
+				renameUser().then(() => {
+					close(null)
+				})
+			}}
+			disabled={email === undefined || !username}
+		>
+			Confirm username change
+		</Button>
+	</div>
+</Popup>

package/package/components/ChangeInstanceUsername.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        email: string;
+        username: string;
+        isConflict?: boolean | undefined;
+    };
+    events: {
+        renamed: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChangeInstanceUsernameProps = typeof __propDef.props;
+export type ChangeInstanceUsernameEvents = typeof __propDef.events;
+export type ChangeInstanceUsernameSlots = typeof __propDef.slots;
+export default class ChangeInstanceUsername extends SvelteComponent<ChangeInstanceUsernameProps, ChangeInstanceUsernameEvents, ChangeInstanceUsernameSlots> {
+}
+export {};