windmill-components 1.448.50 → 1.472.2

package/package/components/AuthSettings.svelte

@@ -2,6 +2,7 @@
 import { Alert, Button, Tab, Tabs } from './common';
 import OAuthSetting from './OAuthSetting.svelte';
 import OktaSetting from './OktaSetting.svelte';
+import Auth0Setting from './Auth0Setting.svelte';
 import CloseButton from './common/CloseButton.svelte';
 import KeycloakSetting from './KeycloakSetting.svelte';
 import CustomSso from './CustomSso.svelte';
@@ -34,6 +35,7 @@ const windmillBuiltins = [
     'visma',
     'spotify',
     'snowflake_oauth',
+    'teams',
     'xero'
 ];
 let oauth_name = undefined;
@@ -73,6 +75,7 @@ let tab = 'sso';
 			<OAuthSetting name="google" bind:value={oauths['google']} />
 			<OAuthSetting name="microsoft" bind:value={oauths['microsoft']} />
 			<OktaSetting bind:value={oauths['okta']} />
+			<Auth0Setting bind:value={oauths['auth0']} />
 			<OAuthSetting name="github" bind:value={oauths['github']} />
 			<OAuthSetting name="gitlab" bind:value={oauths['gitlab']} />
 			<OAuthSetting name="jumpcloud" bind:value={oauths['jumpcloud']} />
@@ -82,7 +85,7 @@ let tab = 'sso';
 			<KanidmSetting bind:value={oauths['kanidm']} />
 			<ZitadelSetting bind:value={oauths['zitadel']} />
 			{#each Object.keys(oauths) as k}
-				{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'keycloak', 'slack', 'kanidm', 'zitadel'].includes(k) && 'login_config' in oauths[k]}
+				{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel'].includes(k) && 'login_config' in oauths[k]}
 					{#if oauths[k]}
 						<div class="flex flex-col gap-2 pb-4">
 							<div class="flex flex-row items-center gap-2">
@@ -162,10 +165,12 @@ let tab = 'sso';
 		<div class="py-1" />
 		<OAuthSetting login={false} name="slack" bind:value={oauths['slack']} />
 		<div class="py-1" />
+		<OAuthSetting login={false} name="teams" eeOnly={true} bind:value={oauths['teams']} />
+		<div class="py-1" />
 
 		{#each Object.keys(oauths) as k}
 			{#if oauths[k] && !('login_config' in oauths[k])}
-				{#if !['slack'].includes(k) && oauths[k]}
+				{#if !['slack', 'teams'].includes(k) && oauths[k]}
 					<div class="flex flex-col gap-2 pb-4">
 						<div class="flex flex-row items-center gap-2">
 							<!-- svelte-ignore a11y-label-has-associated-control -->

package/package/components/AutoscalingConfigEditor.svelte

@@ -260,28 +260,23 @@ let test_input = 3;
 				on:selected={(e) => dispatch('dirty')}
 				bind:selected={config.integration.type}
 				class="mb-4 mt-2"
+				let:item
 			>
 				<ToggleButton
 					value="dryrun"
-					size="sm"
 					label="Dry run"
 					tooltip="See autoscaling events but not actual scaling actions will be performed"
+					{item}
 				/>
 				<ToggleButton
 					value="script"
-					size="sm"
 					label="Custom script"
 					tooltip="Run a custom script to scale your worker group"
+					{item}
 				/>
-				<ToggleButton position="center" disabled value="ecs" size="sm" label="ECS (soon)" />
-				<ToggleButton position="right" disabled value="nomad" size="sm" label="Nomad (soon)" />
-				<ToggleButton
-					position="right"
-					disabled
-					value="kubernetes"
-					size="sm"
-					label="Kubernetes (soon)"
-				/>
+				<ToggleButton disabled value="ecs" label="ECS (soon)" {item} />
+				<ToggleButton disabled value="nomad" label="Nomad (soon)" {item} />
+				<ToggleButton disabled value="kubernetes" label="Kubernetes (soon)" {item} />
 			</ToggleButtonGroup>
 
 			{#if config.integration.type === 'script'}
@@ -343,12 +338,12 @@ let test_input = 3;
 				</div>
 			{/if}
 		{:else}
-			<ToggleButtonGroup selected={'script'} disabled class="mb-4 mt-2">
-				<ToggleButton value="dryrun" size="sm" label="Dry run" />
-				<ToggleButton value="script" size="sm" label="Custom script" />
-				<ToggleButton position="center" value="ecs" size="sm" label="ECS (soon)" />
-				<ToggleButton position="right" value="nomad" size="sm" label="Nomad (soon)" />
-				<ToggleButton position="right" value="kubernetes" size="sm" label="Kubernetes (soon)" />
+			<ToggleButtonGroup selected={'script'} disabled class="mb-4 mt-2" let:item>
+				<ToggleButton value="dryrun" label="Dry run" {item} />
+				<ToggleButton value="script" label="Custom script" {item} />
+				<ToggleButton value="ecs" label="ECS (soon)" {item} />
+				<ToggleButton value="nomad" label="Nomad (soon)" {item} />
+				<ToggleButton value="kubernetes" label="Kubernetes (soon)" {item} />
 			</ToggleButtonGroup>
 
 			<label>

package/package/components/ChangeInstanceUsername.svelte

@@ -1,4 +1,5 @@
-<script>import { Button, Popup } from './common';
+<script>import { Button } from './common';
+import Popover from './meltComponents/Popover.svelte';
 import { autoPlacement } from '@floating-ui/core';
 import ChangeInstanceUsernameInner from './ChangeInstanceUsernameInner.svelte';
 export let email;
@@ -6,7 +7,7 @@ export let username;
 export let isConflict = false;
 </script>
 
-<Popup
+<Popover
 	floatingConfig={{
 		middleware: [
 			autoPlacement({
@@ -14,19 +15,20 @@ export let isConflict = false;
 			})
 		]
 	}}
-	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-	let:close
+	closeButton
 >
-	<svelte:fragment slot="button">
+	<svelte:fragment slot="trigger">
 		<Button color={isConflict ? 'red' : 'light'} size="xs" spacingSize="xs2" nonCaptureEvent={true}
 			>{isConflict ? 'Fix username conflict' : 'Change username'}</Button
 		>
 	</svelte:fragment>
-	<ChangeInstanceUsernameInner
-		{email}
-		{username}
-		{isConflict}
-		on:close={() => close(null)}
-		on:renamed
-	/>
-</Popup>
+	<svelte:fragment slot="content">
+		<ChangeInstanceUsernameInner
+			{email}
+			{username}
+			{isConflict}
+			on:close={() => close()}
+			on:renamed
+		/>
+	</svelte:fragment>
+</Popover>

package/package/components/ChangeInstanceUsernameInner.svelte

@@ -6,6 +6,7 @@ import { createEventDispatcher } from 'svelte';
 export let email;
 export let username;
 export let isConflict = false;
+export let noPadding = false;
 let loading = false;
 let usernameInfo = undefined;
 function handleKeyUp(event) {
@@ -48,11 +49,9 @@ async function renameUser() {
 }
 </script>
 
-<div class="flex flex-col max-w-2xl p-2">
-	{#if isConflict} 
-	<span class="text-sm mb-2 leading-6 font-semibold"
-		>Fix username conflict</span
-	>
+<div class="flex flex-col max-w-2xl {noPadding ? '' : 'p-4'}">
+	{#if isConflict}
+		<span class="text-sm mb-2 leading-6 font-semibold">Fix username conflict</span>
 	{/if}
 
 	<span class="text-sm font-semibold mb-1 leading-6"

package/package/components/ChangeInstanceUsernameInner.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         email: string;
         username: string;
         isConflict?: boolean | undefined;
+        noPadding?: boolean | undefined;
     };
     events: {
         close: CustomEvent<any>;

package/package/components/ConnectionSection.svelte

@@ -0,0 +1,176 @@
+<script>import { Badge, Button } from './common';
+import Description from './Description.svelte';
+import { Slack, Code2, RefreshCcw } from 'lucide-svelte';
+import MsTeamsIcon from './icons/MSTeamsIcon.svelte';
+import BarsStaggered from './icons/BarsStaggered.svelte';
+import { hubBaseUrlStore, workspaceStore, enterpriseLicense } from '../stores';
+import ScriptPicker from './ScriptPicker.svelte';
+import { WorkspaceService } from '../gen';
+export let platform;
+import { sendUserToast } from '../utils';
+export let teamName;
+export let display_name;
+export let scriptPath;
+export let initialPath;
+export let onDisconnect;
+export let onSelect;
+export let connectHref;
+export let createScriptHref;
+export let createFlowHref;
+export let documentationLink;
+export let onLoadSettings;
+export let itemKind = 'script';
+let isFetching = false;
+let teams = [];
+let selected_teams_team = undefined;
+async function loadTeams() {
+    isFetching = true;
+    selected_teams_team = undefined;
+    teams = (await WorkspaceService.listAvailableTeamsIds({ workspace: $workspaceStore })) ?? [];
+    isFetching = false;
+}
+$: workspaceStore && platform && $enterpriseLicense && loadTeams();
+async function connectTeams() {
+    const selectedTeam = teams.find((team) => team.team_id === selected_teams_team);
+    const selectedTeamName = selectedTeam ? selectedTeam.team_name : undefined;
+    await WorkspaceService.connectTeams({
+        workspace: $workspaceStore,
+        requestBody: {
+            team_id: selected_teams_team,
+            team_name: selectedTeamName
+        }
+    });
+    sendUserToast('Connected to Teams to Workspace');
+    onLoadSettings();
+    loadTeams();
+}
+</script>
+
+<div class="flex flex-col gap-1">
+	<div class="text-primary font-semibold"
+		>Connect Workspace to {platform.charAt(0).toUpperCase() + platform.slice(1)}</div
+	>
+	<Description link={documentationLink}>
+		Connect your Windmill workspace to your {platform} workspace to trigger a script or a flow with a
+		'/windmill' command.
+	</Description>
+</div>
+
+{#if teamName}
+	<div class="flex flex-col gap-2 max-w-sm">
+		<div class="flex flex-row gap-2">
+			<Button
+				size="sm"
+				endIcon={{ icon: platform === 'slack' ? Slack : MsTeamsIcon }}
+				btnClasses="mt-2"
+				variant="border"
+				disabled={!$enterpriseLicense && platform === 'teams'}
+				on:click={onDisconnect}
+			>
+				Disconnect {platform.charAt(0).toUpperCase() + platform.slice(1)}
+				{!$enterpriseLicense && platform === 'teams' ? '(EE only)' : ''}
+			</Button>
+			{#if display_name}
+				<Badge class="mt-2" color="green">Connected to Team '{display_name}'</Badge>
+			{/if}
+		</div>
+		{#if $enterpriseLicense || platform === 'slack'}
+			<Button size="sm" endIcon={{ icon: Code2 }} href={createScriptHref}>
+				Create a script to handle {platform} commands
+			</Button>
+			<Button size="sm" endIcon={{ icon: BarsStaggered }} href={createFlowHref}>
+				Create a flow to handle {platform} commands
+			</Button>
+		{/if}
+	</div>
+{:else}
+	<div class="flex flex-row gap-2">
+		{#if platform === 'teams'}
+			<Button
+				size="xs"
+				color="dark"
+				on:click={connectTeams}
+				startIcon={{ icon: MsTeamsIcon }}
+				disabled={!selected_teams_team || !enterpriseLicense}
+			>
+				Connect to {platform.charAt(0).toUpperCase() + platform.slice(1)}
+				{$enterpriseLicense ? '' : '(EE only)'}
+			</Button>
+			{#if $enterpriseLicense}
+				<div class="w-64 flex flex-row gap-2">
+					<select bind:value={selected_teams_team}>
+						{#if !isFetching}
+							{#if teams.length === 0}
+								<option value="" disabled selected>No unassigned teams found</option>
+							{:else}
+								<option value="" disabled selected>Select team</option>
+								{#each teams as team}
+									<option value={team.team_id}>
+										{team.team_name}
+									</option>
+								{/each}
+							{/if}
+						{:else}
+							<option value="" disabled selected>Loading...</option>
+						{/if}
+					</select>
+				</div>
+				<div class="pt-1">
+					<button on:click={loadTeams} class="flex items-center gap-1 mt-2">
+						<RefreshCcw size={16} class={isFetching ? 'animate-spin' : ''} />
+					</button>
+				</div>
+			{/if}
+		{:else}
+			<Button size="xs" color="dark" href={connectHref} startIcon={{ icon: Slack }}>
+				Connect to {platform.charAt(0).toUpperCase() + platform.slice(1)}
+			</Button>
+		{/if}
+		<Badge color="red">Not connected</Badge>
+	</div>
+{/if}
+
+<div class="bg-surface-disabled p-4 rounded-md flex flex-col gap-1">
+	<div class="text-primary font-md font-semibold"> Script or flow to run on /windmill command </div>
+	<div class="relative">
+		{#if !teamName || (!$enterpriseLicense && platform === 'teams')}
+			<div class="absolute top-0 right-0 bottom-0 left-0 bg-surface-disabled/50 z-40" />
+		{/if}
+		<ScriptPicker
+			kinds={['script']}
+			allowFlow
+			bind:itemKind
+			bind:scriptPath
+			{initialPath}
+			on:select={onSelect}
+		/>
+	</div>
+
+	<div class="prose text-2xs text-tertiary">
+		Pick a script or flow meant to be triggered when the `/windmill` command is invoked. Upon
+		connection, templates for a <a href="{$hubBaseUrlStore}/scripts/{platform}/1405/">script</a>
+		and <a href="{$hubBaseUrlStore}/flows/28/">flow</a> are available.
+
+		<br /><br />
+
+		The script or flow chosen is passed the parameters `response_url: string` and `text: string`
+		respectively the url to reply directly to the trigger and the text of the command.
+
+		<br /><br />
+
+		It can take additionally the following args: channel_id, user_name, user_id, command,
+		trigger_id, api_app_id
+
+		<br /><br />
+
+		<span class="font-bold text-xs">
+			The script or flow is permissioned as group "{platform}" that will be automatically created
+			after connection to {platform.charAt(0).toUpperCase() + platform.slice(1)}.
+		</span>
+
+		<br /><br />
+
+		See more on
+		<a href={documentationLink}>documentation</a>.
+	</div>
+</div>

package/package/components/ConnectionSection.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        platform: 'slack' | 'teams';
+        teamName: string | undefined;
+        display_name: string | undefined;
+        scriptPath: string;
+        initialPath: string;
+        onDisconnect: () => Promise<void>;
+        onSelect: () => Promise<void>;
+        connectHref: string | undefined;
+        createScriptHref: string;
+        createFlowHref: string;
+        documentationLink: string;
+        onLoadSettings: () => void;
+        itemKind?: "script" | "flow" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ConnectionSectionProps = typeof __propDef.props;
+export type ConnectionSectionEvents = typeof __propDef.events;
+export type ConnectionSectionSlots = typeof __propDef.slots;
+export default class ConnectionSection extends SvelteComponent<ConnectionSectionProps, ConnectionSectionEvents, ConnectionSectionSlots> {
+}
+export {};

package/package/components/ContentSearchInner.svelte

@@ -129,15 +129,23 @@ function resetShows() {
 <div class="flex flex-col gap-2">
 	<div class="flex gap-2 flex-wrap sticky top-0 left-0 right-0 bg-surface">
 		<div class="p-2">
-			<ToggleButtonGroup bind:selected={searchKind} class="h-10 ">
-				<ToggleButton small light value="all" label={'All' + counts.all} />
-				<ToggleButton small light value="scripts" icon={Code2} label={'Scripts' + counts.scripts} />
+			<ToggleButtonGroup bind:selected={searchKind} class="h-10 " let:item>
+				<ToggleButton small light value="all" label={'All' + counts.all} {item} />
+				<ToggleButton
+					small
+					light
+					value="scripts"
+					icon={Code2}
+					label={'Scripts' + counts.scripts}
+					{item}
+				/>
 				<ToggleButton
 					small
 					light
 					value="resources"
 					icon={Boxes}
 					label={'Resources' + counts.resources}
+					{item}
 				/>
 				<ToggleButton
 					small
@@ -146,6 +154,7 @@ function resetShows() {
 					label={'Flows' + counts.flows}
 					icon={FlowIcon}
 					selectedColor="#14b8a6"
+					{item}
 				/>
 				<ToggleButton
 					small
@@ -154,6 +163,7 @@ function resetShows() {
 					label={'Apps' + counts.apps}
 					icon={LayoutDashboard}
 					selectedColor="#fb923c"
+					{item}
 				/>
 			</ToggleButtonGroup>
 		</div>

package/package/components/CronBuilder.svelte

@@ -1,21 +1,20 @@
 <script>import Section from './Section.svelte';
-import { Button, Popup } from './common';
+import { Button } from './common';
 import { Clock } from 'lucide-svelte';
+import Popover from './meltComponents/Popover.svelte';
 </script>
 
-<Popup
-	floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-	let:close
->
-	<svelte:fragment slot="button">
+<Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }} closeButton>
+	<svelte:fragment slot="trigger">
 		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: Clock }}>
 			Use simplified builder
 		</Button>
 	</svelte:fragment>
-	<Section label="CRON Builder">
-		<div class="flex flex-col w-72">
-			<slot {close} />
-		</div>
-	</Section>
-</Popup>
+	<svelte:fragment slot="content" let:close>
+		<Section label="CRON Builder" wrapperClass="p-4">
+			<div class="flex flex-col w-72">
+				<slot {close} />
+			</div>
+		</Section>
+	</svelte:fragment>
+</Popover>

package/package/components/CronBuilder.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            close: (focusableElement: HTMLElement | null) => void;
+            close: () => void;
         };
     };
 };

package/package/components/CronInput.svelte

@@ -379,7 +379,7 @@ const items = Object.keys(timezones)
 							size="xs"
 							on:click={() => {
 								schedule = nschedule
-								close(null)
+								close()
 							}}
 						>
 							Set cron schedule

package/package/components/DBSchemaExplorer.svelte

@@ -6,7 +6,6 @@ import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
 import { sendUserToast } from '../utils';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
-import GraphqlSchemaViewer from './GraphqlSchemaViewer.svelte';
 import { Loader2, RefreshCcw } from 'lucide-svelte';
 import { formatGraphqlSchema, formatSchema, getDbSchemas, scripts } from './apps/components/display/dbtable/utils';
 import Alert from './common/alert/Alert.svelte';
@@ -37,6 +36,11 @@ async function getSchema() {
 $: resourcePath && Object.keys(scripts).includes(resourceType || '') && getSchema();
 $: dbSchema = resourcePath && resourcePath in $dbSchemas ? $dbSchemas[resourcePath] : undefined;
 $: shouldDisplayError = resourcePath && resourcePath in $dbSchemas && !$dbSchemas[resourcePath];
+function handleSelected({ detail }) {
+    if (dbSchema && dbSchema.lang !== 'graphql') {
+        dbSchema.publicOnly = detail === 'dbo';
+    }
+}
 </script>
 
 {#if loading}
@@ -70,13 +74,22 @@ $: shouldDisplayError = resourcePath && resourcePath in $dbSchemas && !$dbSchema
 				</Button>
 			</svelte:fragment>
 			{#if dbSchema.lang !== 'graphql' && (dbSchema.schema?.public || dbSchema.schema?.PUBLIC || dbSchema.schema?.dbo)}
-				<ToggleButtonGroup class="mb-4" bind:selected={dbSchema.publicOnly}>
-					<ToggleButton value={true} label={dbSchema.schema.dbo ? 'Dbo' : 'Public'} />
-					<ToggleButton value={false} label="All" />
+				<ToggleButtonGroup
+					class="mb-4"
+					selected={dbSchema.publicOnly ? 'dbo' : 'all'}
+					on:selected={handleSelected}
+					let:item
+				>
+					<ToggleButton value="dbo" label={dbSchema.schema.dbo ? 'Dbo' : 'Public'} {item} />
+					<ToggleButton value="all" label="All" {item} />
 				</ToggleButtonGroup>
 			{/if}
 			{#if dbSchema.lang === 'graphql'}
-				<GraphqlSchemaViewer code={formatGraphqlSchema(dbSchema.schema)} class="h-full" />
+				{#await import('./GraphqlSchemaViewer.svelte')}
+					<Loader2 class="animate-spin" />
+				{:then Module}
+					<Module.default code={formatGraphqlSchema(dbSchema.schema)} class="h-full" />
+				{/await}
 			{:else}
 				<ObjectViewer json={formatSchema(dbSchema)} pureViewer collapseLevel={1} />
 			{/if}

package/package/components/DateTimeInput.svelte

@@ -131,9 +131,9 @@ let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 		</Button>
 	{/if}
 	<!-- <div>
-		<ToggleButtonGroup bind:selected={format}>
-			<ToggleButton light small value={'local'} label="local" />
-			<ToggleButton light small value={'utc'} label="utc" />
+		<ToggleButtonGroup bind:selected={format} let:item>
+			<ToggleButton light small value={'local'} label="local" {item} />
+			<ToggleButton light small value={'utc'} label="utc" {item} />
 		</ToggleButtonGroup>
 	</div> -->
 </div>

package/package/components/DefaultTags.svelte

@@ -1,17 +1,15 @@
-<script>import { Button, Popup } from './common';
+<script>import { Button } from './common';
 import { Pen } from 'lucide-svelte';
 import Tooltip from './Tooltip.svelte';
+import Popover from './meltComponents/Popover.svelte';
 import DefaultTagsInner from './DefaultTagsInner.svelte';
 export let defaultTagPerWorkspace = undefined;
 export let defaultTagWorkspaces = undefined;
 let placement = 'bottom-end';
 </script>
 
-<Popup
-	floatingConfig={{ strategy: 'absolute', placement: placement }}
-	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
->
-	<svelte:fragment slot="button">
+<Popover floatingConfig={{ strategy: 'absolute', placement: placement }} contentClasses="p-4">
+	<svelte:fragment slot="trigger">
 		<Button color="dark" size="xs" nonCaptureEvent={true}>
 			<div class="flex flex-row gap-1 items-center"
 				><Pen size={14} /> Default tags&nbsp;<Tooltip light
@@ -21,5 +19,7 @@ let placement = 'bottom-end';
 			>
 		</Button>
 	</svelte:fragment>
-	<DefaultTagsInner bind:defaultTagPerWorkspace bind:defaultTagWorkspaces />
-</Popup>
+	<svelte:fragment slot="content">
+		<DefaultTagsInner bind:defaultTagPerWorkspace bind:defaultTagWorkspaces />
+	</svelte:fragment>
+</Popover>