windmill-components 1.13.25 → 1.22.0

package/components/FlowPreview.svelte

@@ -1,34 +1,34 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.args = exports.schemas = exports.flow = exports.i = void 0;
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const utils_1 = require("$lib/utils");
-const svelte_awesome_1 = __importDefault(require("svelte-awesome"));
-const gen_1 = require("$lib/gen");
-const stores_1 = require("$lib/stores");
-const RunForm_svelte_1 = __importDefault(require("./RunForm.svelte"));
-const FlowStatusViewer_svelte_1 = __importDefault(require("./FlowStatusViewer.svelte"));
-const svelte_1 = require("svelte");
-const ChevronButton_svelte_1 = __importDefault(require("./ChevronButton.svelte"));
-const DisplayResult_svelte_1 = __importDefault(require("./DisplayResult.svelte"));
-const Tabs_svelte_1 = __importDefault(require("./Tabs.svelte"));
-exports.schemas = [];
-exports.args = {};
+<script>import { InputTransform, Job, JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import { sendUserToast, truncateRev } from '../utils';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher, onDestroy } from 'svelte';
+import Icon from 'svelte-awesome';
+import FlowJobResult from './FlowJobResult.svelte';
+import { flowToMode } from './flows/utils';
+import FlowStatusViewer from './FlowStatusViewer.svelte';
+import RunForm from './RunForm.svelte';
+import Tabs from './Tabs.svelte';
+const dispatch = createEventDispatcher();
+export let i;
+export let flow;
+export let schemas = [];
+export let mode;
+export let args = {};
 let stepArgs = {};
 let tab = 'upto';
 let viewPreview = false;
 let intervalId;
-let uptoText = exports.i == exports.flow.value.modules.length - 1 ? 'Preview whole flow' : 'Preview up to this step';
+let uptoText = i == flow.value.modules.length - 1 ? 'Preview whole flow' : 'Preview up to this step';
 let job;
 let jobs = [];
 let jobId;
-async function runPreview(args) {
+export async function runPreview(args) {
+    viewPreview = true;
     intervalId && clearInterval(intervalId);
-    const newFlow = tab == 'upto' ? truncateFlow(exports.flow) : extractStep(exports.flow);
-    jobId = await gen_1.JobService.runFlowPreview({
+    let newFlow = flowToMode(flow, mode);
+    newFlow = tab == 'upto' ? truncateFlow(newFlow) : extractStep(newFlow);
+    jobId = await JobService.runFlowPreview({
         workspace: $workspaceStore ?? '',
         requestBody: {
             args,
@@ -38,20 +38,20 @@ async function runPreview(args) {
     });
     jobs = [];
     intervalId = setInterval(loadJob, 1000);
-    (0, utils_1.sendUserToast)(`started preview ${(0, utils_1.truncateRev)(jobId, 10)}`);
+    sendUserToast(`started preview ${truncateRev(jobId, 10)}`);
 }
 function truncateFlow(flow) {
     const localFlow = JSON.parse(JSON.stringify(flow));
-    localFlow.value.modules = flow.value.modules.slice(0, exports.i + 1);
+    localFlow.value.modules = flow.value.modules.slice(0, i + 1);
     return localFlow;
 }
 function extractStep(flow) {
     const localFlow = JSON.parse(JSON.stringify(flow));
-    localFlow.value.modules = flow.value.modules.slice(exports.i, exports.i + 1);
-    localFlow.schema = exports.schemas[exports.i];
+    localFlow.value.modules = flow.value.modules.slice(i, i + 1);
+    localFlow.schema = schemas[i];
     stepArgs = {};
-    Object.entries(flow.value.modules[exports.i].input_transform).forEach((x) => {
-        if (x[1].type == gen_1.InputTransform.type.STATIC) {
+    Object.entries(flow.value.modules[i].input_transform).forEach((x) => {
+        if (x[1].type == InputTransform.type.STATIC) {
             stepArgs[x[0]] = x[1].value;
         }
     });
@@ -59,25 +59,25 @@ function extractStep(flow) {
 }
 async function loadJob() {
     try {
-        job = await gen_1.JobService.getJob({ workspace: $workspaceStore, id: jobId });
+        job = await JobService.getJob({ workspace: $workspaceStore, id: jobId });
         if (job?.type == 'CompletedJob') {
             //only CompletedJob has success property
             clearInterval(intervalId);
         }
+        dispatch('change', job);
     }
     catch (err) {
-        (0, utils_1.sendUserToast)(err, true);
+        sendUserToast(err, true);
     }
 }
-(0, svelte_1.onDestroy)(() => {
+onDestroy(() => {
     intervalId && clearInterval(intervalId);
 });
 </script>
 
-<h2 class="mb-5 mt-2">
+<h2 class="flex justify-center">
 	<button
-		type="submit"
-		class="underline text-gray-700 inline-flex  items-center"
+		class="default-button	"
 		on:click={() => {
 			viewPreview = !viewPreview
 		}}
@@ -124,22 +124,7 @@ async function loadJob() {
 			<FlowStatusViewer {job} bind:jobs />
 		</div>
 		{#if `result` in job}
-			<div class="flex flex-col ml-10">
-				<div>
-					<ChevronButton text="result" viewOptions={true}>
-						<div class="text-xs">
-							<DisplayResult result={job.result} />
-						</div>
-					</ChevronButton>
-				</div>
-				<div>
-					<ChevronButton text="logs" viewOptions={true}>
-						<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-lg">
-							<pre class="w-full">{job.logs}</pre>
-						</div>
-					</ChevronButton>
-				</div>
-			</div>
+			<FlowJobResult {job} />
 		{/if}
 	{/if}
 {/if}

package/components/FlowPreview.svelte.d.ts

@@ -1,14 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
-import { type Flow } from '../gen';
 import type { Schema } from '../common';
+import { type Flow } from '../gen';
+import type { FlowMode } from './flows/flowStore';
 declare const __propDef: {
     props: {
         i: number;
         flow: Flow;
         schemas?: Schema[] | undefined;
+        mode: FlowMode;
         args?: Record<string, any> | undefined;
+        runPreview?: ((args: any) => Promise<void>) | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
@@ -17,5 +22,6 @@ export declare type FlowPreviewProps = typeof __propDef.props;
 export declare type FlowPreviewEvents = typeof __propDef.events;
 export declare type FlowPreviewSlots = typeof __propDef.slots;
 export default class FlowPreview extends SvelteComponentTyped<FlowPreviewProps, FlowPreviewEvents, FlowPreviewSlots> {
+    get runPreview(): (args: any) => Promise<void>;
 }
 export {};

package/components/FlowStatusViewer.svelte

@@ -1,28 +1,39 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.jobs = exports.job = void 0;
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const utils_1 = require("$lib/utils");
-const svelte_awesome_1 = __importDefault(require("svelte-awesome"));
-const icons_1 = require("svelte-awesome/icons");
-const gen_1 = require("$lib/gen");
-const stores_1 = require("$lib/stores");
-const DisplayResult_svelte_1 = __importDefault(require("./DisplayResult.svelte"));
-const ChevronButton_svelte_1 = __importDefault(require("./ChevronButton.svelte"));
-const JobStatus_svelte_1 = __importDefault(require("./JobStatus.svelte"));
+<script>import { faHourglassHalf, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { scriptPathToHref, truncateRev } from '../utils';
+import Icon from 'svelte-awesome';
+import { check } from 'svelte-awesome/icons';
+import { CompletedJob, FlowModuleValue, FlowStatusModule, JobService, QueuedJob } from '../gen';
+import { workspaceStore } from '../stores';
+import JobStatus from './JobStatus.svelte';
+import FlowJobResult from './FlowJobResult.svelte';
+export let job;
+export let jobs = [];
+let forloop_selected = '';
 function loadResults() {
-    exports.job?.flow_status?.modules?.forEach(async (x, i) => {
-        if ((i >= exports.jobs.length && x.type == gen_1.FlowStatusModule.type.SUCCESS) ||
-            x.type == gen_1.FlowStatusModule.type.FAILURE) {
-            exports.jobs.push(undefined);
-            exports.jobs[i] = await gen_1.JobService.getCompletedJob({ workspace: $workspaceStore, id: x.job });
+    job?.flow_status?.modules?.forEach(async (x, i) => {
+        if ((i >= jobs.length && x.type == FlowStatusModule.type.SUCCESS) ||
+            x.type == FlowStatusModule.type.FAILURE) {
+            if (x.forloop_jobs) {
+                const forloop_jobs = [];
+                for (let j of x.forloop_jobs) {
+                    forloop_jobs.push(await JobService.getCompletedJob({ workspace: $workspaceStore, id: j }));
+                }
+                jobs.push(forloop_jobs);
+            }
+            else {
+                jobs.push(await JobService.getCompletedJob({ workspace: $workspaceStore, id: x.job }));
+            }
+            jobs = jobs;
         }
     });
 }
-$: $workspaceStore && exports.job && loadResults();
+function toCompletedJob(x) {
+    return x;
+}
+function toCompletedJobs(x) {
+    return x;
+}
+$: $workspaceStore && job && loadResults();
 </script>
 
 <div class="flow-root max-w-lg w-full p-4">
@@ -47,7 +58,7 @@ $: $workspaceStore && exports.job && loadResults();
 		out of <span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
 		<span class="mt-4" />
 	</p>
-	<ul role="list" class="-mb-8 w-full">
+	<ul class="-mb-8 w-full">
 		{#each job?.raw_flow?.modules ?? [] as mod, i}
 			<li class="w-full">
 				<div class="relative pb-8 w-full">
@@ -100,7 +111,8 @@ $: $workspaceStore && exports.job && loadResults();
 								<p class="text-sm text-gray-500">
 									{#if mod.value.type == FlowModuleValue.type.SCRIPT}
 										Script at path <a
-											href="/scripts/get/{mod.value.path}"
+											target="_blank"
+											href={scriptPathToHref(mod.value.path ?? '')}
 											class="font-medium text-gray-900">{mod.value.path}</a
 										>
 									{/if}
@@ -108,7 +120,15 @@ $: $workspaceStore && exports.job && loadResults();
 							</div>
 							<div class="text-right text-sm whitespace-nowrap text-gray-500">
 								{job.flow_status?.modules[i].type}
-								{#if job.flow_status?.modules[i].job}
+								{#if job.flow_status?.modules[i].forloop_jobs}
+									{#each job.flow_status?.modules[i].forloop_jobs ?? [] as job}
+										<div class="flex flex-col">
+											<a href="/run/{job}" class="font-medium text-blue-600"
+												>{truncateRev(job ?? '', 10)}</a
+											>
+										</div>
+									{/each}
+								{:else if job.flow_status?.modules[i].job}
 									<a href="/run/{job.flow_status?.modules[i].job}" class="font-medium text-blue-600"
 										>{truncateRev(job.flow_status?.modules[i].job ?? '', 10)}</a
 									>
@@ -116,23 +136,29 @@ $: $workspaceStore && exports.job && loadResults();
 							</div>
 						</div>
 					</div>
-					{#if i < jobs.length && jobs[i] != undefined}
-						<div class="flex flex-col ml-10">
-							<div>
-								<ChevronButton text="result" viewOptions={true}>
-									<div class="text-xs">
-										<DisplayResult result={jobs[i]?.result} />
-									</div>
-								</ChevronButton>
-							</div>
-							<div>
-								<ChevronButton text="logs">
-									<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-lg">
-										<pre class="w-full">{jobs[i]?.logs}</pre>
-									</div>
-								</ChevronButton>
+					{#if jobs[i]}
+						{#if Array.isArray(jobs[i])}
+							<div class="flex flex-col space-y-2">
+								{#each toCompletedJobs(jobs[i]) as job, i}
+									<button
+										class="underline text-blue-600 hover:text-blue-700"
+										on:click={() => {
+											if (forloop_selected == job.id) {
+												forloop_selected = ''
+											} else {
+												forloop_selected = job.id
+											}
+										}}
+										>Iteration: #{i}: {job.id} {forloop_selected == job.id ? '(-)' : '(+)'}</button
+									>
+									{#if forloop_selected == job.id}
+										<svelte:self {job} />
+									{/if}
+								{/each}
 							</div>
-						</div>
+						{:else}
+							<FlowJobResult job={toCompletedJob(jobs[i])} />
+						{/if}
 					{/if}
 				</div>
 			</li>

package/components/FlowStatusViewer.svelte.d.ts

@@ -3,7 +3,7 @@ import { CompletedJob, QueuedJob } from '../gen';
 declare const __propDef: {
     props: {
         job: QueuedJob | CompletedJob;
-        jobs: (CompletedJob | undefined)[];
+        jobs?: (CompletedJob | CompletedJob[] | undefined)[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowViewer.svelte

@@ -0,0 +1,100 @@
+<script>import { scriptPathToHref } from '../utils';
+import Highlight from 'svelte-highlight';
+import json from 'svelte-highlight/languages/json';
+import python from 'svelte-highlight/languages/python';
+import typescript from 'svelte-highlight/languages/typescript';
+import { FlowModuleValue } from '../gen';
+import github from 'svelte-highlight/styles/github';
+import { slide } from 'svelte/transition';
+import Tabs from './Tabs.svelte';
+export let flow;
+let flowFiltered = {
+    summary: flow.summary,
+    description: flow.description,
+    value: flow.value,
+    schema: flow.schema
+};
+export let embedded = false;
+export let tab = 'ui';
+let open = {};
+</script>
+
+<svelte:head>
+	{@html github}
+</svelte:head>
+
+{#if !embedded}
+	<Tabs
+		tabs={[
+			['ui', 'Flow rendered'],
+			['json', 'JSON']
+		]}
+		bind:tab
+	/>
+{/if}
+{#if tab == 'ui'}
+	<div class="flow-root w-full p-4">
+		<p class="font-black text-lg mb-6 w-full ml-2">
+			<span>{flow.value.modules.length} Steps </span>
+			<span class="mt-4" />
+		</p>
+		<ul class="-mb-8 w-full">
+			{#each flow.value.modules ?? [] as mod, i}
+				<li class="w-full">
+					<div class="relative pb-8 w-full">
+						{#if i < (flow.value.modules ?? []).length - 1}
+							<span
+								class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+								aria-hidden="true"
+							/>
+						{/if}
+						<div class="relative flex space-x-3">
+							<div>
+								<span
+									class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center ring-8 ring-white text-white"
+									>{i + 1}
+								</span>
+							</div>
+							<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
+								<div class="w-full">
+									<p class="text-sm text-gray-500">
+										{#if mod.value.type == FlowModuleValue.type.SCRIPT}
+											Script at path <a
+												target="_blank"
+												href={scriptPathToHref(mod.value.path ?? '')}
+												class="font-medium text-gray-900">{mod.value.path}</a
+											>
+										{:else if mod.value.type == FlowModuleValue.type.RAWSCRIPT}
+											<button
+												on:click={() => (open[i] = !open[i])}
+												class="mb-2 underline text-black"
+											>
+												Raw {mod.value.language} script {open[i] ? '(-)' : '(+)'}</button
+											>
+
+											{#if open[i]}
+												<div transition:slide class="border border-black p-2 bg-gray-50 w-full">
+													<Highlight
+														language={mod.value.language == 'deno' ? typescript : python}
+														code={mod.value.content}
+													/>
+												</div>
+											{/if}
+										{:else if mod.value.type == FlowModuleValue.type.FLOW}
+											Flow at path {mod.value.path}
+										{:else if mod.value.type == FlowModuleValue.type.FORLOOPFLOW}
+											For loop over step {i}'s result':
+											<svelte:self flow={mod.value} embedded={true} />
+										{/if}
+									</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</li>
+			{/each}
+		</ul>
+	</div>
+{:else}
+	<Highlight language={json} code={JSON.stringify(flowFiltered, null, 4)} />
+{/if}

package/components/FlowViewer.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import { type FlowValue } from '../gen';
+declare const __propDef: {
+    props: {
+        flow: {
+            summary: string;
+            description?: string;
+            value: FlowValue;
+            schema?: any;
+        };
+        embedded?: boolean | undefined;
+        tab?: "json" | "ui" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowViewerProps = typeof __propDef.props;
+export declare type FlowViewerEvents = typeof __propDef.events;
+export declare type FlowViewerSlots = typeof __propDef.slots;
+export default class FlowViewer extends SvelteComponentTyped<FlowViewerProps, FlowViewerEvents, FlowViewerSlots> {
+}
+export {};

package/components/GroupModal.svelte

@@ -1,16 +1,10 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.openModal = void 0;
-const stores_1 = require("$lib/stores");
-const Modal_svelte_1 = __importDefault(require("./Modal.svelte"));
-const gen_1 = require("$lib/gen");
-const simple_svelte_autocomplete_1 = __importDefault(require("simple-svelte-autocomplete"));
-const PageHeader_svelte_1 = __importDefault(require("./PageHeader.svelte"));
-const TableCustom_svelte_1 = __importDefault(require("./TableCustom.svelte"));
-const utils_1 = require("$lib/utils");
+<script>import { userStore, workspaceStore } from '../stores';
+import Modal from './Modal.svelte';
+import { GroupService, UserService } from '../gen';
+import AutoComplete from 'simple-svelte-autocomplete';
+import PageHeader from './PageHeader.svelte';
+import TableCustom from './TableCustom.svelte';
+import { canWrite } from '../utils';
 let name = '';
 let modal;
 let can_write = false;
@@ -19,10 +13,10 @@ let members = [];
 let usernames = [];
 let username = '';
 async function loadUsernames() {
-    usernames = await gen_1.UserService.listUsernames({ workspace: $workspaceStore });
+    usernames = await UserService.listUsernames({ workspace: $workspaceStore });
 }
 $: {
-    if (group && $workspaceStore && stores_1.userStore) {
+    if (group && $workspaceStore && userStore) {
         members = (group.members ?? []).map((x) => {
             return {
                 name: x,
@@ -31,15 +25,14 @@ $: {
         });
     }
 }
-function openModal(newName) {
+export function openModal(newName) {
     name = newName;
     loadGroup();
     loadUsernames();
     modal.openModal();
 }
-exports.openModal = openModal;
 async function addToGroup() {
-    await gen_1.GroupService.addUserToGroup({
+    await GroupService.addUserToGroup({
         workspace: $workspaceStore ?? '',
         name,
         requestBody: { username }
@@ -47,8 +40,8 @@ async function addToGroup() {
     loadGroup();
 }
 async function loadGroup() {
-    group = await gen_1.GroupService.getGroup({ workspace: $workspaceStore, name });
-    can_write = (0, utils_1.canWrite)(group.name, group.extra_perms ?? {}, $userStore);
+    group = await GroupService.getGroup({ workspace: $workspaceStore, name });
+    can_write = canWrite(group.name, group.extra_perms ?? {}, $userStore);
 }
 </script>
 

package/components/IconedResourceType.svelte

@@ -1,35 +1,32 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.width = exports.height = exports.after = exports.name = void 0;
-const Mysql_svelte_1 = __importDefault(require("./icons/Mysql.svelte"));
-const Mail_svelte_1 = __importDefault(require("./icons/Mail.svelte"));
-const DbIcon_svelte_1 = __importDefault(require("./icons/DbIcon.svelte"));
-const PostgresIcon_svelte_1 = __importDefault(require("./icons/PostgresIcon.svelte"));
-require("svelte-awesome");
-require("@fortawesome/free-brands-svg-icons");
-const Slack_svelte_1 = __importDefault(require("./icons/Slack.svelte"));
-exports.after = false;
-exports.height = '24px';
-exports.width = '24px';
+<script>import Mysql from './icons/Mysql.svelte';
+import Mail from './icons/Mail.svelte';
+import DbIcon from './icons/DbIcon.svelte';
+import PostgresIcon from './icons/PostgresIcon.svelte';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import Slack from './icons/Slack.svelte';
+import Icon from 'svelte-awesome';
+export let name;
+export let after = false;
+export let height = '24px';
+export let width = '24px';
 </script>
 
 <div class="flex flex-row gap-2">
 	{#if !after}
 		{name}
 	{/if}
-	{#if name === 'postgres'}
+	{#if name === 'postgresql'}
 		<PostgresIcon {height} {width} />
 	{:else if name === 'mysql'}
 		<Mysql {height} {width} />
-	{:else if name === 'SMTP'}
+	{:else if name === 'smtp'}
 		<Mail {height} {width} />
 	{:else if name === 'mongodb'}
 		<DbIcon {height} {width} />
 	{:else if name === 'slack'}
 		<Slack {height} {width} />
+	{:else if name === 'github'}
+		<Icon data={faGithub} scale={1.4} />
 	{/if}
 	{#if after}
 		{name}

package/components/InviteGlobalUser.svelte

@@ -1,20 +1,13 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.openModal = void 0;
-const utils_1 = require("$lib/utils");
-const Switch_svelte_1 = __importDefault(require("./Switch.svelte"));
-const svelte_1 = require("svelte");
-const gen_1 = require("$lib/gen");
-const dispatch = (0, svelte_1.createEventDispatcher)();
+<script>import { sendUserToast } from '../utils';
+import Switch from './Switch.svelte';
+import { createEventDispatcher } from 'svelte';
+import { UserService } from '../gen';
+const dispatch = createEventDispatcher();
 let valid = true;
 let modal;
-function openModal() {
+export function openModal() {
     modal.openModal();
 }
-exports.openModal = openModal;
 let email;
 let is_super_admin = false;
 let password;
@@ -28,7 +21,7 @@ function handleKeyUp(event) {
     }
 }
 async function addUser() {
-    await gen_1.UserService.createUserGlobally({
+    await UserService.createUserGlobally({
         requestBody: {
             email,
             password,
@@ -37,7 +30,7 @@ async function addUser() {
             company
         }
     });
-    (0, utils_1.sendUserToast)(`Successfully added ${email}. Welcome to them!`);
+    sendUserToast(`Successfully added ${email}. Welcome to them!`);
     dispatch('new');
 }
 </script>

package/components/InviteUser.svelte

@@ -1,21 +1,14 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.openModal = void 0;
-const utils_1 = require("$lib/utils");
-const Switch_svelte_1 = __importDefault(require("./Switch.svelte"));
-const svelte_1 = require("svelte");
-const stores_1 = require("$lib/stores");
-const gen_1 = require("$lib/gen");
-const dispatch = (0, svelte_1.createEventDispatcher)();
+<script>import { sendUserToast } from '../utils';
+import Switch from './Switch.svelte';
+import { createEventDispatcher } from 'svelte';
+import { workspaceStore } from '../stores';
+import { WorkspaceService } from '../gen';
+const dispatch = createEventDispatcher();
 let valid = true;
 let modal;
-function openModal() {
+export function openModal() {
     modal.openModal();
 }
-exports.openModal = openModal;
 let email;
 let is_admin = false;
 function handleKeyUp(event) {
@@ -26,14 +19,14 @@ function handleKeyUp(event) {
     }
 }
 async function inviteUser() {
-    await gen_1.WorkspaceService.inviteUser({
+    await WorkspaceService.inviteUser({
         workspace: $workspaceStore,
         requestBody: {
             email,
             is_admin
         }
     });
-    (0, utils_1.sendUserToast)(`Successfully invited ${email}. Welcome to them!`);
+    sendUserToast(`Successfully invited ${email}. Welcome to them!`);
     dispatch('new');
 }
 </script>