windmill-components 1.389.3 → 1.394.3

package/package/components/IdEditorInput.svelte

@@ -0,0 +1,82 @@
+<script>import { ArrowRight } from 'lucide-svelte';
+import { Button } from './common';
+import { createEventDispatcher } from 'svelte';
+import { forbiddenIds } from './flows/idUtils';
+import { slide } from 'svelte/transition';
+export let initialId;
+export let reservedIds = [];
+export let label = 'Component ID';
+export let value = initialId;
+export let buttonText = '';
+export let btnClasses = '!p-1 !w-[34px] !ml-1';
+export let acceptUnderScores = false;
+let error = '';
+const dispatch = createEventDispatcher();
+const regex = acceptUnderScores ? /^[a-zA-Z][a-zA-Z0-9_]*$/ : /^[a-zA-Z][a-zA-Z0-9]*$/;
+$: validateId(value, reservedIds);
+function validateId(id, reservedIds) {
+    if (id == initialId) {
+        error = '';
+        return;
+    }
+    if (!regex.test(value)) {
+        error = 'The ID must include only letters and numbers and start with a letter';
+    }
+    else if (forbiddenIds.includes(value)) {
+        error = 'This ID is reserved';
+    }
+    else if (reservedIds.some((rid) => rid === value)) {
+        error = 'This ID is already in use';
+    }
+    else {
+        error = '';
+    }
+}
+let inputDiv = undefined;
+$: inputDiv?.focus();
+</script>
+
+<label class="block text-primary">
+	{#if label != ''}
+		<div class="pb-1 text-sm text-secondary">{label}</div>
+	{/if}
+	<div class="flex w-full">
+		<input
+			bind:this={inputDiv}
+			autofocus
+			type="text"
+			bind:value
+			class="!w-auto grow"
+			on:click|stopPropagation={() => {}}
+			on:keydown|stopPropagation={({ key }) => {
+				if (key === 'Enter' && error === '' && value !== initialId) {
+					dispatch('save', value)
+				} else if (key == 'Escape') {
+					dispatch('close')
+				}
+			}}
+			on:keypress|stopPropagation
+		/>
+		<Button
+			size="xs"
+			color="blue"
+			buttonType="button"
+			{btnClasses}
+			aria-label="Save ID"
+			disabled={error != '' || value === initialId}
+			on:click={() => {
+				dispatch('save', value)
+			}}
+		>
+			{buttonText}<ArrowRight size={18} />
+		</Button>
+	</div>
+	{#if error != ''}
+		<div
+			transition:slide|local={{ duration: 100 }}
+			class="w-full text-sm text-red-600 whitespace-pre-wrap pt-1"
+		>
+			{error}
+		</div>
+	{/if}
+</label>

package/package/components/IdEditorInput.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        initialId: string;
+        reservedIds?: string[] | undefined;
+        label?: string | undefined;
+        value?: string | undefined;
+        buttonText?: string | undefined;
+        btnClasses?: string | undefined;
+        acceptUnderScores?: boolean | undefined;
+    };
+    events: {
+        keypress: KeyboardEvent;
+        save: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IdEditorInputProps = typeof __propDef.props;
+export type IdEditorInputEvents = typeof __propDef.events;
+export type IdEditorInputSlots = typeof __propDef.slots;
+export default class IdEditorInput extends SvelteComponent<IdEditorInputProps, IdEditorInputEvents, IdEditorInputSlots> {
+}
+export {};

package/package/components/InputTransformForm.svelte

@@ -29,7 +29,7 @@ let monaco = undefined;
 let monacoTemplate = undefined;
 let argInput = undefined;
 const dispatch = createEventDispatcher();
-$: inputCat = computeInputCat(schema.properties[argName].type, schema.properties[argName].format, schema.properties[argName].items?.type, schema.properties[argName].enum, schema.properties[argName].contentEncoding);
+$: inputCat = computeInputCat(schema?.properties?.[argName].type, schema?.properties?.[argName].format, schema?.properties?.[argName].items?.type, schema?.properties?.[argName].enum, schema?.properties?.[argName].contentEncoding);
 let propertyType = getPropertyType(arg);
 const { shouldUpdatePropertyType, exprsToSet } = getContext('FlowCopilotContext') || {};
 function setExpr() {
@@ -127,10 +127,10 @@ const { focusProp, propPickerConfig } = getContext('PropPickerWrapper');
 $: isStaticTemplate(inputCat) && propertyType == 'static' && setPropertyType(arg?.value);
 function setDefaultCode() {
     if (!arg?.value) {
-        monacoTemplate?.setCode(schema.properties[argName].default);
+        monacoTemplate?.setCode(schema.properties?.[argName].default);
     }
 }
-$: schema.properties[argName].default && setDefaultCode();
+$: schema?.properties?.[argName].default && setDefaultCode();
 let resourceTypes = undefined;
 async function loadResourceTypes() {
     resourceTypes = await getResourceTypes();
@@ -146,10 +146,10 @@ loadResourceTypes();
 			<div class="flex flex-wrap grow">
 				<FieldHeader
 					label={argName}
-					format={schema.properties[argName].format}
-					contentEncoding={schema.properties[argName].contentEncoding}
-					required={schema.required.includes(argName)}
-					type={schema.properties[argName].type}
+					format={schema?.properties?.[argName].format}
+					contentEncoding={schema?.properties?.[argName].contentEncoding}
+					required={schema.required?.includes(argName)}
+					type={schema.properties?.[argName].type}
 				/>
 
 				{#if isStaticTemplate(inputCat)}
@@ -172,7 +172,7 @@ loadResourceTypes();
 							bind:this={stepInputGen}
 							{focused}
 							{arg}
-							schemaProperty={schema.properties[argName]}
+							schemaProperty={schema?.properties?.[argName]}
 							showPopup={(isStaticTemplate(inputCat) && propertyType == 'static') ||
 								propertyType === undefined ||
 								propertyType === 'static' ||
@@ -334,7 +334,7 @@ loadResourceTypes();
 						/>
 					{/if}
 				</div>
-			{:else if propertyType === undefined || propertyType == 'static'}
+			{:else if (propertyType === undefined || propertyType == 'static') && schema?.properties?.[argName]}
 				<ArgInput
 					{resourceTypes}
 					noMargin
@@ -354,7 +354,7 @@ loadResourceTypes();
 					bind:value={arg.value}
 					type={schema.properties[argName].type}
 					oneOf={schema.properties[argName].oneOf}
-					required={schema.required.includes(argName)}
+					required={schema.required?.includes(argName)}
 					bind:pattern={schema.properties[argName].pattern}
 					bind:valid={inputCheck}
 					defaultValue={schema.properties[argName].default}

package/package/components/InputTransformForm.svelte.d.ts

@@ -7,7 +7,10 @@ import type { PickableProperties } from './flows/previousResults';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        schema: Schema;
+        schema: Schema | {
+            properties?: Record<string, any>;
+            required?: string[];
+        };
         arg: InputTransform | any;
         argName: string;
         extraLib?: string | undefined;

package/package/components/InputTransformSchemaForm.svelte.d.ts

@@ -4,7 +4,9 @@ import { type InputTransform } from '../gen';
 import type { PickableProperties } from './flows/previousResults';
 declare const __propDef: {
     props: {
-        schema: Schema;
+        schema: Schema | {
+            properties?: Record<string, any>;
+        };
         args?: Record<string, any> | undefined;
         isValid?: boolean | undefined;
         extraLib?: string | undefined;

package/package/components/InstanceSettings.svelte

@@ -15,7 +15,7 @@ import { isCloudHosted } from '../cloud';
 import { capitalize, classNames } from '../utils';
 import { enterpriseLicense } from '../stores';
 import CustomOauth from './CustomOauth.svelte';
-import { AlertCircle, AlertTriangle, BadgeCheck, Info, Plus, X, BadgeX } from 'lucide-svelte';
+import { AlertCircle, AlertTriangle, BadgeCheck, Info, Plus, X, BadgeX, Slack } from 'lucide-svelte';
 import CustomSso from './CustomSso.svelte';
 import AuthentikSetting from './AuthentikSetting.svelte';
 import AutheliaSetting from './AutheliaSetting.svelte';
@@ -25,6 +25,7 @@ import Password from './Password.svelte';
 import ObjectStoreConfigSettings from './ObjectStoreConfigSettings.svelte';
 import { fade } from 'svelte/transition';
 import Popover from './Popover.svelte';
+import { base } from '../base';
 export let tab = 'Core';
 export let hideTabs = false;
 export let hideSave = false;
@@ -213,6 +214,11 @@ export async function openCustomerPortal() {
 							>Setting SMTP unlocks sending emails upon adding new users to the workspace or the
 							instance.</div
 						>
+					{:else if category == 'Slack'}
+						<div class="text-secondary pb-4 text-xs">
+							Connecting your instance to a Slack workspace enables critical alerts to be sent to a
+							Slack channel.
+						</div>
 					{:else if category == 'Telemetry'}
 						<div class="text-secondary pb-4 text-xs">
 							Anonymous usage data is collected to help improve Windmill.
@@ -224,6 +230,7 @@ export async function openCustomerPortal() {
 								<li>login type usage</li>
 								<li>workers usage</li>
 								<li>vcpus usage</li>
+								<li>memory usage</li>
 							</ul>
 						</div>
 						{#if $enterpriseLicense}
@@ -333,7 +340,7 @@ export async function openCustomerPortal() {
 									<Toggle
 										options={{
 											right:
-												'Require users to have been added manually to windmill to sign in through OAuth'
+												'Require users to have been added manually to Windmill to sign in through OAuth'
 										}}
 										bind:checked={requirePreexistingUserForOauth}
 									/>
@@ -622,21 +629,46 @@ export async function openCustomerPortal() {
 													{#if $enterpriseLicense && Array.isArray(values[setting.key])}
 														{#each values[setting.key] ?? [] as v, i}
 															<div class="flex max-w-md mt-1 gap-2 w-full items-center">
-																<select>
-																	<option value="email">Email</option>
-																</select>
-																<input
-																	type="email"
-																	placeholder="Email address"
-																	on:input={(e) => {
+																<select
+																	on:change={(e) => {
 																		if (e.target?.['value']) {
 																			values[setting.key][i] = {
-																				email: e.target['value']
+																				[e.target['value']]: ''
 																			}
 																		}
 																	}}
-																	value={v?.email ?? ''}
-																/>
+																	value={v && 'slack_channel' in v ? 'slack_channel' : 'email'}
+																>
+																	<option value="email">Email</option>
+																	<option value="slack_channel">Slack</option>
+																</select>
+																{#if v && 'slack_channel' in v}
+																	<input
+																		type="text"
+																		placeholder="Slack channel"
+																		on:input={(e) => {
+																			if (e.target?.['value']) {
+																				values[setting.key][i] = {
+																					slack_channel: e.target['value']
+																				}
+																			}
+																		}}
+																		value={v?.slack_channel ?? ''}
+																	/>
+																{:else}
+																	<input
+																		type="email"
+																		placeholder="Email address"
+																		on:input={(e) => {
+																			if (e.target?.['value']) {
+																				values[setting.key][i] = {
+																					email: e.target['value']
+																				}
+																			}
+																		}}
+																		value={v?.email ?? ''}
+																	/>
+																{/if}
 																<button
 																	transition:fade|local={{ duration: 100 }}
 																	class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
@@ -675,6 +707,35 @@ export async function openCustomerPortal() {
 														Add item
 													</Button>
 												</div>
+											{:else if setting.fieldType == 'slack_connect'}
+												<div class="flex flex-col items-start self-start">
+													{#if values[setting.key] && 'team_name' in values[setting.key]}
+														<div class="text-sm">
+															Connected to <code>{values[setting.key]['team_name']}</code>
+														</div>
+														<Button
+															size="sm"
+															endIcon={{ icon: Slack }}
+															btnClasses="mt-2"
+															variant="border"
+															on:click={async () => {
+																values[setting.key] = undefined
+															}}
+														>
+															Disconnect Slack
+														</Button>
+													{:else}
+														<Button
+															size="xs"
+															color="dark"
+															href="{base}/api/oauth/connect_slack?instance=true"
+															startIcon={{ icon: Slack }}
+															disabled={!$enterpriseLicense}
+														>
+															Connect to Slack
+														</Button>
+													{/if}
+												</div>
 											{:else if setting.fieldType == 'object_store_config'}
 												<ObjectStoreConfigSettings bind:bucket_config={values[setting.key]} />
 												<div class="mb-6" />

package/package/components/ItemPicker.svelte

@@ -58,6 +58,7 @@ let refreshing = false;
 	>
 		<div class="w-full h-full flex flex-col">
 			<div class="flex flex-row gap-2 pb-4">
+				<!-- svelte-ignore a11y-autofocus -->
 				<input
 					type="text"
 					placeholder="Search {itemName}s"

package/package/components/KanidmSetting.svelte

@@ -33,6 +33,7 @@ function changeValues({ baseUrl, id }) {
 </script>
 
 <div class="flex flex-col gap-1">
+	<!-- svelte-ignore a11y-label-has-associated-control -->
 	<label class="text-sm font-medium text-primary flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'kanidm'} after={true} /></div><Toggle
 			checked={enabled}

package/package/components/KeycloakSetting.svelte

@@ -25,6 +25,7 @@ function changeOrg(org) {
 </script>
 
 <div class="flex flex-col gap-1">
+	<!-- svelte-ignore a11y-label-has-associated-control -->
 	<label class="text-sm font-medium text-primary flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'keycloak'} after={true} /></div><Toggle
 			checked={enabled}

package/package/components/LightweightArgInput.svelte

@@ -573,4 +573,6 @@ function addItemByItemsType() {
 	/* Firefox */
 	input[type='number'] {
 		-moz-appearance: textfield !important;
+		-webkit-appearance: textfield !important;
+		        appearance: textfield !important;
 	}</style>

package/package/components/LogViewer.svelte

@@ -28,6 +28,7 @@ export let noMaxH = false;
 export let noAutoScroll = false;
 // @ts-ignore
 const ansi_up = new AnsiUp();
+ansi_up.use_classes = true;
 let scroll = true;
 let div = null;
 // let downloadStartUrl: string | undefined = undefined
@@ -228,3 +229,208 @@ function showMoreTruncate(len) {
 		>
 	</div>
 </div>
+
+<style global>
+	/* Foreground colors */
+	:global(.ansi-black-fg) {
+		color: rgb(0, 0, 0);
+	}
+	:global(.ansi-red-fg) {
+		color: rgb(187, 0, 0);
+	}
+	:global(.ansi-green-fg) {
+		color: rgb(0, 187, 0);
+	}
+	:global(.ansi-yellow-fg) {
+		color: rgb(187, 187, 0);
+	}
+	:global(.ansi-blue-fg) {
+		color: rgb(0, 0, 187);
+	}
+	:global(.ansi-magenta-fg) {
+		color: rgb(187, 0, 187);
+	}
+	:global(.ansi-cyan-fg) {
+		color: rgb(0, 187, 187);
+	}
+	:global(.ansi-white-fg) {
+		color: rgb(255, 255, 255);
+	}
+
+	:global(.ansi-bright-black-fg) {
+		color: rgb(85, 85, 85);
+	}
+	:global(.ansi-bright-red-fg) {
+		color: rgb(255, 85, 85);
+	}
+	:global(.ansi-bright-green-fg) {
+		color: rgb(0, 255, 0);
+	}
+	:global(.ansi-bright-yellow-fg) {
+		color: rgb(255, 255, 85);
+	}
+	:global(.ansi-bright-blue-fg) {
+		color: rgb(85, 85, 255);
+	}
+	:global(.ansi-bright-magenta-fg) {
+		color: rgb(255, 85, 255);
+	}
+	:global(.ansi-bright-cyan-fg) {
+		color: rgb(85, 255, 255);
+	}
+	:global(.ansi-bright-white-fg) {
+		color: rgb(255, 255, 255);
+	}
+
+	/* Background colors */
+	:global(.ansi-black-bg) {
+		background-color: rgb(0, 0, 0);
+	}
+	:global(.ansi-red-bg) {
+		background-color: rgb(187, 0, 0);
+	}
+	:global(.ansi-green-bg) {
+		background-color: rgb(0, 187, 0);
+	}
+	:global(.ansi-yellow-bg) {
+		background-color: rgb(187, 187, 0);
+	}
+	:global(.ansi-blue-bg) {
+		background-color: rgb(0, 0, 187);
+	}
+	:global(.ansi-magenta-bg) {
+		background-color: rgb(187, 0, 187);
+	}
+	:global(.ansi-cyan-bg) {
+		background-color: rgb(0, 187, 187);
+	}
+	:global(.ansi-white-bg) {
+		background-color: rgb(255, 255, 255);
+	}
+
+	:global(.ansi-bright-black-bg) {
+		background-color: rgb(85, 85, 85);
+	}
+	:global(.ansi-bright-red-bg) {
+		background-color: rgb(255, 85, 85);
+	}
+	:global(.ansi-bright-green-bg) {
+		background-color: rgb(0, 255, 0);
+	}
+	:global(.ansi-bright-yellow-bg) {
+		background-color: rgb(255, 255, 85);
+	}
+	:global(.ansi-bright-blue-bg) {
+		background-color: rgb(85, 85, 255);
+	}
+	:global(.ansi-bright-magenta-bg) {
+		background-color: rgb(255, 85, 255);
+	}
+	:global(.ansi-bright-cyan-bg) {
+		background-color: rgb(85, 255, 255);
+	}
+	:global(.ansi-bright-white-bg) {
+		background-color: rgb(255, 255, 255);
+	}
+
+	/* Foreground colors for dark mode (Nord theme) */
+	:global(.dark) :global(.ansi-black-fg) {
+		color: rgb(46, 52, 64);
+	}
+	:global(.dark) :global(.ansi-red-fg) {
+		color: rgb(191, 97, 106);
+	}
+	:global(.dark) :global(.ansi-green-fg) {
+		color: rgb(163, 190, 140);
+	}
+	:global(.dark) :global(.ansi-yellow-fg) {
+		color: rgb(235, 203, 139);
+	}
+	:global(.dark) :global(.ansi-blue-fg) {
+		color: rgb(94, 129, 172);
+	}
+	:global(.dark) :global(.ansi-magenta-fg) {
+		color: rgb(180, 142, 173);
+	}
+	:global(.dark) :global(.ansi-cyan-fg) {
+		color: rgb(136, 192, 208);
+	}
+	:global(.dark) :global(.ansi-white-fg) {
+		color: rgb(216, 222, 233);
+	}
+
+	:global(.dark) :global(.ansi-bright-black-fg) {
+		color: rgb(67, 76, 94);
+	}
+	:global(.dark) :global(.ansi-bright-red-fg) {
+		color: rgb(191, 97, 106);
+	}
+	:global(.dark) :global(.ansi-bright-green-fg) {
+		color: rgb(163, 190, 140);
+	}
+	:global(.dark) :global(.ansi-bright-yellow-fg) {
+		color: rgb(235, 203, 139);
+	}
+	:global(.dark) :global(.ansi-bright-blue-fg) {
+		color: rgb(94, 129, 172);
+	}
+	:global(.dark) :global(.ansi-bright-magenta-fg) {
+		color: rgb(180, 142, 173);
+	}
+	:global(.dark) :global(.ansi-bright-cyan-fg) {
+		color: rgb(136, 192, 208);
+	}
+	:global(.dark) :global(.ansi-bright-white-fg) {
+		color: rgb(229, 233, 240);
+	}
+
+	/* Background colors for dark mode (Nord theme) */
+	:global(.dark) :global(.ansi-black-bg) {
+		background-color: rgb(46, 52, 64);
+	}
+	:global(.dark) :global(.ansi-red-bg) {
+		background-color: rgb(191, 97, 106);
+	}
+	:global(.dark) :global(.ansi-green-bg) {
+		background-color: rgb(163, 190, 140);
+	}
+	:global(.dark) :global(.ansi-yellow-bg) {
+		background-color: rgb(235, 203, 139);
+	}
+	:global(.dark) :global(.ansi-blue-bg) {
+		background-color: rgb(94, 129, 172);
+	}
+	:global(.dark) :global(.ansi-magenta-bg) {
+		background-color: rgb(180, 142, 173);
+	}
+	:global(.dark) :global(.ansi-cyan-bg) {
+		background-color: rgb(136, 192, 208);
+	}
+	:global(.dark) :global(.ansi-white-bg) {
+		background-color: rgb(216, 222, 233);
+	}
+
+	:global(.dark) :global(.ansi-bright-black-bg) {
+		background-color: rgb(67, 76, 94);
+	}
+	:global(.dark) :global(.ansi-bright-red-bg) {
+		background-color: rgb(191, 97, 106);
+	}
+	:global(.dark) :global(.ansi-bright-green-bg) {
+		background-color: rgb(163, 190, 140);
+	}
+	:global(.dark) :global(.ansi-bright-yellow-bg) {
+		background-color: rgb(235, 203, 139);
+	}
+	:global(.dark) :global(.ansi-bright-blue-bg) {
+		background-color: rgb(94, 129, 172);
+	}
+	:global(.dark) :global(.ansi-bright-magenta-bg) {
+		background-color: rgb(180, 142, 173);
+	}
+	:global(.dark) :global(.ansi-bright-cyan-bg) {
+		background-color: rgb(136, 192, 208);
+	}
+	:global(.dark) :global(.ansi-bright-white-bg) {
+		background-color: rgb(229, 233, 240);
+	}</style>

package/package/components/ModulePreview.svelte.d.ts

@@ -7,7 +7,9 @@ import type Editor from './Editor.svelte';
 declare const __propDef: {
     props: {
         mod: FlowModule;
-        schema: Schema;
+        schema: Schema | {
+            properties?: Record<string, any>;
+        };
         pickableProperties: PickableProperties | undefined;
         lang: Script['language'];
         editor: Editor | undefined;

package/package/components/ModulePreviewForm.svelte

@@ -56,7 +56,7 @@ loadResourceTypes();
 		{#each keys as argName, i (argName)}
 			{#if Object.keys(schema.properties ?? {}).includes(argName)}
 				<div class="flex gap-2">
-					{#if typeof args == 'object' && schema?.properties[argName]}
+					{#if typeof args == 'object' && schema?.properties?.[argName]}
 						<ArgInput
 							{resourceTypes}
 							minW={false}
@@ -66,7 +66,7 @@ loadResourceTypes();
 							bind:value={args[argName]}
 							type={schema.properties[argName].type}
 							oneOf={schema.properties[argName].oneOf}
-							required={schema.required.includes(argName)}
+							required={schema?.required?.includes(argName)}
 							pattern={schema.properties[argName].pattern}
 							bind:editor={editor[argName]}
 							bind:valid={inputCheck[argName]}

package/package/components/ModulePreviewForm.svelte.d.ts

@@ -4,7 +4,10 @@ import type { FlowModule } from '../gen';
 import type { PickableProperties } from './flows/previousResults';
 declare const __propDef: {
     props: {
-        schema: Schema;
+        schema: Schema | {
+            properties?: Record<string, any>;
+            required?: string[];
+        };
         args?: Record<string, any> | undefined;
         mod: FlowModule;
         pickableProperties: PickableProperties | undefined;

package/package/components/OAuthSetting.svelte

@@ -31,6 +31,7 @@ function changeTenantId(tenant) {
 </script>
 
 <div class="flex flex-col gap-1">
+	<!-- svelte-ignore a11y-label-has-associated-control -->
 	<label class="text-sm flex gap-4 items-center font-medium text-primary"
 		><div class="w-[120px]"><IconedResourceType {name} after={true} /></div><Toggle
 			checked={enabled}
@@ -87,16 +88,16 @@ function changeTenantId(tenant) {
 					</div>
 				</CollapseLink>
 			{:else if name == 'slack'}
-			<CollapseLink text="Instructions">
-				<div class="text-sm text-secondary border p-2">
-					Create a new App <a
-						href="https://api.slack.com/apps?new_app=1"
-						target="_blank">in Slack API Console</a>.
-					Pick "From an app manifest", then YAML and paste manifest template found on <a
-					href="https://www.windmill.dev/docs/misc/setup_oauth#slack"
-					target="_blank">Windmill Docs</a> and then paste Client ID and Client Secret here.
-				</div>
-			</CollapseLink>
+				<CollapseLink text="Instructions">
+					<div class="text-sm text-secondary border p-2">
+						Create a new App <a href="https://api.slack.com/apps?new_app=1" target="_blank"
+							>in Slack API Console</a
+						>. Pick "From an app manifest", then YAML and paste manifest template found on
+						<a href="https://www.windmill.dev/docs/misc/setup_oauth#slack" target="_blank"
+							>Windmill Docs</a
+						> and then paste Client ID and Client Secret here.
+					</div>
+				</CollapseLink>
 			{:else if name == 'microsoft'}
 				<CollapseLink text="Instructions">
 					<div class="text-sm text-secondary border p-2">