windmill-components 1.394.8 → 1.405.5

package/package/components/icons/WindmillIcon2.svelte

@@ -0,0 +1,141 @@
+<script>export let white = false;
+export let size = '24px';
+export let color = undefined;
+export let spin = undefined;
+function hslToHex(h, s, l) {
+    s /= 100;
+    l /= 100;
+    let c = (1 - Math.abs(2 * l - 1)) * s;
+    let x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    let m = l - c / 2;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (0 <= h && h < 60) {
+        r = c;
+        g = x;
+        b = 0;
+    }
+    else if (60 <= h && h < 120) {
+        r = x;
+        g = c;
+        b = 0;
+    }
+    else if (120 <= h && h < 180) {
+        r = 0;
+        g = c;
+        b = x;
+    }
+    else if (180 <= h && h < 240) {
+        r = 0;
+        g = x;
+        b = c;
+    }
+    else if (240 <= h && h < 300) {
+        r = x;
+        g = 0;
+        b = c;
+    }
+    else if (300 <= h && h < 360) {
+        r = c;
+        g = 0;
+        b = x;
+    }
+    let rs = Math.round((r + m) * 255)
+        .toString(16)
+        .padStart(2, '0');
+    let gs = Math.round((g + m) * 255)
+        .toString(16)
+        .padStart(2, '0');
+    let bs = Math.round((b + m) * 255)
+        .toString(16)
+        .padStart(2, '0');
+    return `#${rs}${gs}${bs}`;
+}
+function hexToHsl(hex) {
+    let r = parseInt(hex.slice(1, 3), 16) / 255;
+    let g = parseInt(hex.slice(3, 5), 16) / 255;
+    let b = parseInt(hex.slice(5, 7), 16) / 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    let h, s, l = (max + min) / 2;
+    if (max === min) {
+        h = s = 0; // Achromatic
+    }
+    else {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return [h * 360, s * 100, l * 100];
+}
+function reduceSaturation(hex, reductionPercent) {
+    // Convert HEX to HSL
+    // Convert the hex to HSL
+    let [h, s, l] = hexToHsl(hex);
+    // Reduce the saturation by the specified percentage
+    l = Math.max(0, l - reductionPercent);
+    // Convert back to hex
+    return hslToHex(h, s, l);
+}
+let lessSaturatedColor;
+$: color ? (lessSaturatedColor = reduceSaturation(color, -16)) : (lessSaturatedColor = undefined);
+</script>
+
+<!-- SVG Icon with customizable color -->
+<svg
+	class={$$props.class}
+	class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
+	class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
+	class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
+	class:animate-[spin_50s_linear_infinite]={spin === 'slow'}
+	version="1.1"
+	id="Calque_1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	x="0px"
+	y="0px"
+	width={size}
+	height={size}
+	viewBox="0 0 256 256"
+	style="enable-background:new 0 0 256 256;"
+	xml:space="preserve"
+>
+	<g>
+		<!-- Use color or fallback to defaults (white or blue) -->
+		<polygon
+			fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
+			points="134.78,14.22 114.31,48.21 101.33,69.75 158.22,69.75 177.97,36.95 191.67,14.22"
+		/>
+		<polygon
+			fill={color || (white ? '#ffffff' : '#3b82f6')}
+			points="227.55,69.75 186.61,69.75 101.33,69.75 129.78,119.02 158.16,119.02 228.61,119.02 256,119.02"
+		/>
+		<polygon
+			fill={color || (white ? '#ffffff' : '#3b82f6')}
+			points="136.93,132.47 116.46,167.93 73.82,241.78 130.71,241.78 144.9,217.2 180.13,156.18 193.82,132.46"
+		/>
+		<polygon
+			fill={color || (white ? '#ffffff' : '#3b82f6')}
+			points="121.7,131.95 101.23,96.49 58.59,22.63 30.15,71.91 44.34,96.49 79.57,157.5 93.26,181.22"
+		/>
+		<polygon
+			fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
+			points="64.81,131.95 25.15,131.21 0,130.74 28.44,180.01 66.73,180.72 93.26,181.21"
+		/>
+		<polygon
+			fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
+			points="165.38,181.74 184.58,216.46 196.75,238.47 225.19,189.2 206.66,155.69 193.83,132.46"
+		/>
+	</g>
+</svg>

package/package/components/icons/WindmillIcon2.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        white?: boolean | undefined;
+        size?: string | undefined;
+        color?: string | undefined;
+        spin?: 'slow' | 'medium' | 'fast' | 'veryfast' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WindmillIcon2Props = typeof __propDef.props;
+export type WindmillIcon2Events = typeof __propDef.events;
+export type WindmillIcon2Slots = typeof __propDef.slots;
+export default class WindmillIcon2 extends SvelteComponent<WindmillIcon2Props, WindmillIcon2Events, WindmillIcon2Slots> {
+}
+export {};

package/package/components/icons/index.d.ts

@@ -18,6 +18,7 @@ import S3Icon from './S3Icon.svelte';
 import Slack from './Slack.svelte';
 import TogglIcon from './TogglIcon.svelte';
 import WindmillIcon from './WindmillIcon.svelte';
+import WindmillIcon2 from './WindmillIcon2.svelte';
 import MailchimpIcon from './MailchimpIcon.svelte';
 import SendgridIcon from './SendgridIcon.svelte';
 import SendflakeIcon from './SendflakeIcon.svelte';
@@ -188,4 +189,4 @@ export declare const APP_TO_ICON_COMPONENT: {
     readonly keycloak: typeof KeycloakIcon;
     readonly zitadel: typeof ZitadelIcon;
 };
-export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon };
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, WindmillIcon2, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon };

package/package/components/icons/index.js

@@ -18,6 +18,7 @@ import S3Icon from './S3Icon.svelte';
 import Slack from './Slack.svelte';
 import TogglIcon from './TogglIcon.svelte';
 import WindmillIcon from './WindmillIcon.svelte';
+import WindmillIcon2 from './WindmillIcon2.svelte';
 import MailchimpIcon from './MailchimpIcon.svelte';
 import SendgridIcon from './SendgridIcon.svelte';
 import SendflakeIcon from './SendflakeIcon.svelte';
@@ -188,4 +189,4 @@ export const APP_TO_ICON_COMPONENT = {
     keycloak: KeycloakIcon,
     zitadel: ZitadelIcon
 };
-export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon };
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, WindmillIcon2, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon };

package/package/components/icons/store.d.ts

@@ -0,0 +1,4 @@
+export declare let customIcon: {
+    normal: string;
+    white: string;
+} | undefined;

package/package/components/icons/store.js

@@ -0,0 +1 @@
+export let customIcon = undefined;

package/package/components/instanceSettings.d.ts

@@ -6,12 +6,12 @@ export interface Setting {
     ee_only?: string;
     tooltip?: string;
     key: string;
-    fieldType: 'text' | 'number' | 'boolean' | 'password' | 'select' | 'textarea' | 'seconds' | 'email' | 'license_key' | 'object_store_config' | 'critical_error_channels' | 'slack_connect';
+    fieldType: 'text' | 'number' | 'boolean' | 'password' | 'select' | 'textarea' | 'seconds' | 'email' | 'license_key' | 'object_store_config' | 'critical_error_channels' | 'slack_connect' | 'smtp_connect';
     storage: SettingStorage;
     isValid?: (value: any) => boolean;
     error?: string;
     defaultValue?: () => any;
 }
-export type SettingStorage = 'setting' | 'config';
+export type SettingStorage = 'setting';
 export declare const settings: Record<string, Setting[]>;
 export declare const settingsKeys: string[];

package/package/components/instanceSettings.js

@@ -2,7 +2,7 @@ export const settings = {
     Core: [
         {
             label: 'Base url',
-            description: 'Public base url of the instance',
+            description: 'Public base url of the instance. <a href="https://www.windmill.dev/docs/advanced/instance_settings#global-users">Learn more</a>',
             key: 'base_url',
             fieldType: 'text',
             placeholder: 'https://windmill.com',
@@ -17,7 +17,7 @@ export const settings = {
         },
         {
             label: 'Email domain',
-            description: 'Domain to display in webhooks for email triggers (should match the MX record)',
+            description: 'Domain to display in webhooks for <a href="https://www.windmill.dev/docs/advanced/email_triggers">email triggers</a> (should match the MX record)',
             key: 'email_domain',
             fieldType: 'text',
             storage: 'setting',
@@ -35,22 +35,23 @@ export const settings = {
         {
             label: 'Default timeout',
             key: 'job_default_timeout',
-            description: 'Default timeout for individual jobs',
+            description: 'Default timeout for individual jobs. <a href="https://www.windmill.dev/docs/core_concepts/jobs#retention-policy">Learn more</a>',
             fieldType: 'seconds',
             storage: 'setting',
             cloudonly: false
         },
         {
             label: 'Max timeout for sync endpoints',
+            description: 'Maximum amount of time (measured in seconds) that a <a href="https://www.windmill.dev/docs/core_concepts/webhooks">sync endpoint</a> is allowed to run before it is forcibly stopped or timed out.',
             key: 'timeout_wait_result',
             cloudonly: true,
             fieldType: 'seconds',
             placeholder: '60',
-            storage: 'config'
+            storage: 'setting'
         },
         {
             label: 'License key',
-            description: 'License key required to use the EE (switch image for windmill-ee)',
+            description: 'License key required to use the EE (switch image for windmill-ee). <a href="https://www.windmill.dev/docs/advanced/instance_settings#license-key">Learn more</a>',
             key: 'license_key',
             fieldType: 'license_key',
             placeholder: 'only needed to prepare upgrade to EE',
@@ -58,16 +59,15 @@ export const settings = {
         },
         {
             label: 'Non-prod instance',
-            description: 'Whether we should consider the reported usage of this instance as non-prod',
+            description: 'Whether we should consider the reported usage of this instance as non-prod. <a href="https://www.windmill.dev/docs/advanced/instance_settings#non-prod-instance">Learn more</a>',
             key: 'dev_instance',
             fieldType: 'boolean',
-            storage: 'setting',
-            ee_only: 'This is only relevant for EE'
+            storage: 'setting'
         },
         {
             label: 'Retention period in secs',
             key: 'retention_period_secs',
-            description: 'How long to keep the jobs data in the database (max 30 days on CE)',
+            description: 'How long to keep the jobs data in the database (max 30 days on CE). <a href="https://www.windmill.dev/docs/advanced/instance_settings#retention-period-in-secs">Learn more</a>',
             fieldType: 'seconds',
             placeholder: '30',
             storage: 'setting',
@@ -76,15 +76,15 @@ export const settings = {
         },
         {
             label: 'Expose metrics',
-            description: 'Expose Prometheus metrics for workers and servers on port 8001 at /metrics',
+            description: 'Expose Prometheus metrics for workers and servers on port 8001 at /metrics. <a href="https://www.windmill.dev/docs/advanced/instance_settings#expose-metrics">Learn more</a>',
             key: 'expose_metrics',
             fieldType: 'boolean',
             storage: 'setting',
             ee_only: ''
         },
         {
-            label: 'S3/Azure for Python/Go cache & large logs',
-            description: 'Bucket to store large logs and global cache for Python and Go.',
+            label: 'Instance object storage',
+            description: ' S3/Azure bucket to store large logs and global cache for Python and Go. <a href="https://www.windmill.dev/docs/core_concepts/object_storage_in_windmill#instance-object-storage">Learn more</a>',
             key: 'object_store_cache_config',
             fieldType: 'object_store_config',
             storage: 'setting',
@@ -92,7 +92,7 @@ export const settings = {
         },
         {
             label: 'Critical alert channels',
-            description: 'Channels to send critical alerts to. SMTP must be configured for the email channel. A Slack workspace must be connected to the instance for the Slack channel.',
+            description: 'Channels to send critical alerts to. SMTP must be configured for the email channel. A Slack workspace must be connected to the instance for the Slack channel. <a href="https://www.windmill.dev/docs/core_concepts/critical_alert_channels">Learn more</a>',
             key: 'critical_error_channels',
             fieldType: 'critical_error_channels',
             storage: 'setting',
@@ -100,7 +100,7 @@ export const settings = {
         },
         {
             label: 'Azure OpenAI base path',
-            description: 'All Windmill AI features will run on the specified deployed model. Format: https://{your-resource-name}.openai.azure.com/openai/deployments/{deployment-id}',
+            description: 'All Windmill AI features will run on the specified deployed model. Format: https://{your-resource-name}.openai.azure.com/openai/deployments/{deployment-id}. <a href="https://www.windmill.dev/docs/core_concepts/ai_generation#azure-openai-advanced-models">Learn more</a>',
             key: 'openai_azure_base_path',
             fieldType: 'text',
             storage: 'setting',
@@ -108,7 +108,7 @@ export const settings = {
         },
         {
             label: 'Private Hub base url',
-            description: 'Base url of your private Hub instance, without trailing slash',
+            description: 'Base url of your private Hub instance, without trailing slash. <a href="https://www.windmill.dev/docs/core_concepts/private_hub">Learn more</a>',
             placeholder: 'https://hub.company.com',
             key: 'hub_base_url',
             fieldType: 'text',
@@ -120,7 +120,7 @@ export const settings = {
     Registries: [
         {
             label: 'Pip Index Url',
-            description: 'Add private PIP registry',
+            description: 'Add private Pip registry',
             key: 'pip_index_url',
             fieldType: 'text',
             placeholder: 'https://username:password@pypi.company.com/simple',
@@ -129,7 +129,7 @@ export const settings = {
         },
         {
             label: 'Pip Extra Index Url',
-            description: 'Add private extra PIP registry',
+            description: 'Add private extra Pip registry',
             key: 'pip_extra_index_url',
             fieldType: 'text',
             placeholder: 'https://username:password@pypi.company.com/simple',
@@ -138,7 +138,7 @@ export const settings = {
         },
         {
             label: 'Npm Config Registry',
-            description: 'Add private NPM registry',
+            description: 'Add private npm registry',
             key: 'npm_config_registry',
             fieldType: 'text',
             placeholder: 'https://registry.npmjs.org/:_authToken=npm_FOOBAR',
@@ -157,44 +157,11 @@ export const settings = {
     ],
     SMTP: [
         {
-            label: 'Host',
-            key: 'smtp_host',
-            fieldType: 'text',
-            placeholder: 'smtp.gmail.com',
-            storage: 'config'
-        },
-        {
-            label: 'Port',
-            key: 'smtp_port',
-            fieldType: 'number',
-            placeholder: '587',
-            storage: 'config'
-        },
-        {
-            label: 'Username',
-            key: 'smtp_username',
-            fieldType: 'text',
-            placeholder: 'ruben@windmill.dev',
-            storage: 'config'
-        },
-        {
-            label: 'Password',
-            key: 'smtp_password',
-            fieldType: 'password',
-            storage: 'config'
-        },
-        {
-            label: 'From Address',
-            key: 'smtp_from',
-            placeholder: 'noreply@windmill.dev',
-            fieldType: 'email',
-            storage: 'config'
-        },
-        {
-            label: 'Implicit TLS',
-            key: 'smtp_tls_implicit',
-            fieldType: 'boolean',
-            storage: 'config'
+            label: 'SMTP',
+            key: 'smtp_settings',
+            fieldType: 'smtp_connect',
+            storage: 'setting',
+            ee_only: '',
         }
     ],
     Slack: [
@@ -231,14 +198,14 @@ export const settings = {
             label: 'Keep job directories',
             key: 'keep_job_dir',
             fieldType: 'boolean',
-            tooltip: 'Keep Job directories after execution at /tmp/windmill/<worker>/<job_id>',
+            description: 'Keep Job directories after execution at /tmp/windmill/<worker>/<job_id>',
             storage: 'setting'
         },
         {
             label: 'Expose debug metrics',
             key: 'expose_debug_metrics',
             fieldType: 'boolean',
-            tooltip: 'Expose additional metrics (require metrics to be enabled)',
+            description: 'Expose additional metrics (require metrics to be enabled)',
             storage: 'setting'
         }
     ],

package/package/components/jobs/JobProgressBar.svelte

@@ -0,0 +1,52 @@
+<script>import {} from '../../gen';
+import ProgressBar from '../progressBar/ProgressBar.svelte';
+export let job = undefined;
+export let compact = false;
+/// Progress of currently running job
+export let scriptProgress = undefined;
+// Removes `Step 1` and replaces it with `Running` 
+export let hideStepTitle = false;
+let error = undefined;
+let index = 0;
+let subIndex = 0;
+let subLength = 100;
+let length = 1;
+let nextInProgress = false;
+$: if (job)
+    updateJobProgress(job);
+$: subIndex = scriptProgress ?? 0;
+function updateJobProgress(job) {
+    if (!job['running'] && !job['success']) {
+        error = 0;
+    }
+    else {
+        error = undefined;
+    }
+    // Anything that is success automatically gets 100% progress
+    if (job['success'] && scriptProgress)
+        index = 1, subLength = 0, subIndex = 0, scriptProgress = 100;
+}
+let resetP;
+export function reset() {
+    resetP?.();
+    error = undefined;
+    subIndex = 0;
+    subLength = 100;
+    length = 1;
+    index = 0;
+    scriptProgress = undefined;
+}
+</script>
+
+<ProgressBar
+	bind:resetP
+	{length}
+	{index}
+	{nextInProgress}
+	{subLength}
+	{subIndex}
+	{error}
+	class={$$props.class}
+	bind:compact
+	bind:hideStepTitle
+/>

package/package/components/jobs/JobProgressBar.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type Job } from '../../gen';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        job?: Job | undefined;
+        compact?: boolean | undefined;
+        scriptProgress?: number | undefined;
+        hideStepTitle?: boolean | undefined;
+        reset?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type JobProgressBarProps = typeof __propDef.props;
+export type JobProgressBarEvents = typeof __propDef.events;
+export type JobProgressBarSlots = typeof __propDef.slots;
+export default class JobProgressBar extends SvelteComponent<JobProgressBarProps, JobProgressBarEvents, JobProgressBarSlots> {
+    get reset(): () => void;
+}
+export {};

package/package/components/multiselect/MultiSelectWrapper.svelte

@@ -71,7 +71,7 @@ let open = false;
 				</div>
 			</MultiSelect>
 		</div>
-		<Portal>
+		<Portal name="multi-select">
 			<div use:floatingContent class="z5000" hidden={!open}>
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-static-element-interactions -->

package/package/components/progressBar/ProgressBar.svelte

@@ -1,5 +1,6 @@
 <script>import { tweened } from 'svelte/motion';
 import { linear } from 'svelte/easing';
+import { twMerge } from 'tailwind-merge';
 function getTween(initialValue = 0, duration = 200) {
     return tweened(initialValue, {
         duration,
@@ -11,6 +12,13 @@ export let index;
 export let subIndex;
 export let subLength;
 export let nextInProgress = false;
+// Used for displaying progress of subjob of flow
+export let subIndexIsPercent = false;
+// Remove padding/margin, border radius and titles
+// Used in individual job test runs
+export let compact = false;
+// Removes `Step 1` and replaces it with `Running` 
+export let hideStepTitle = false;
 export let length;
 let duration = 200;
 let percent = getTween(0, duration);
@@ -31,6 +39,7 @@ $: finished = index == length;
 </script>
 
 <div class={$$props.class}>
+	{#if !compact}
 	<div
 		class="flex justify-between items-end font-medium mb-1 {error != undefined
 			? 'text-red-700 dark:text-red-200'
@@ -41,12 +50,17 @@ $: finished = index == length;
 				? 'Error occured'
 				: finished
 				? 'Done'
+				: hideStepTitle 
+				? `Running`
+				: subIndexIsPercent
+				? `Step ${index + 1} (${subIndex !== undefined ? `${subIndex}%)` : ''}`
 				: `Step ${index + 1}${subIndex !== undefined ? `.${subIndex + 1}` : ''}`}
 		</span>
 		<span class="text-sm">
 			{$percent.toFixed(0)}%
 		</span>
 	</div>
+	{/if}
 	<!-- {#each state as step, index}
 		{index} {JSON.stringify(step)}
 	{/each} -->
@@ -56,7 +70,10 @@ $: finished = index == length;
 		{getPercent(index)}
 		|
 	{/each} -->
-	<div class="flex w-full bg-gray-200 rounded-full h-4 overflow-hidden">
+	<div class={twMerge(
+		"flex w-full bg-gray-200 overflow-hidden",
+		(compact) ? "rounded-none h-3" : "rounded-full h-4",
+	)}>
 		{#each new Array(length) as _, partIndex (partIndex)}
 			<div class="h-full relative border-white {partIndex === 0 ? '' : 'border-l'} w-full">
 				{#if partIndex == index && nextInProgress}

package/package/components/progressBar/ProgressBar.svelte.d.ts

@@ -7,6 +7,9 @@ declare const __propDef: {
         subIndex: number | undefined;
         subLength: number | undefined;
         nextInProgress?: boolean | undefined;
+        subIndexIsPercent?: boolean | undefined;
+        compact?: boolean | undefined;
+        hideStepTitle?: boolean | undefined;
         length: number;
         resetP?: (() => void) | undefined;
     };

package/package/components/propertyPicker/ObjectViewer.svelte

@@ -51,7 +51,7 @@ $: keyLimit = isArray ? 1 : 100;
 $: fullyCollapsed = keys.length > 1 && collapsed;
 </script>
 
-<Portal>
+<Portal name="object-viewer">
 	<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />
 </Portal>
 

package/package/components/runs/JobPreview.svelte

@@ -55,6 +55,7 @@ const dispatch = createEventDispatcher();
 	bind:watchJob
 	on:done={onDone}
 />
+
 <div class="p-4 flex flex-col gap-2 items-start h-full">
 	{#if job}
 		<div class="flex gap-2 flex-wrap">