windmill-components 1.35.42 → 1.35.43

package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -0,0 +1,161 @@
+<script>import { getContext } from 'svelte';
+import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
+import Icon from 'svelte-awesome';
+import { faPen, faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
+import { emptyFlowModuleState, isEmptyFlowModule } from '../flowStateUtils';
+import { classNames, emptyModule } from '../../../utils';
+import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte';
+import RemoveStepConfirmationModal from '../content/RemoveStepConfirmationModal.svelte';
+export let prefix = undefined;
+export let modules;
+export let moduleStates;
+const { select, selectedId } = getContext('FlowEditorContext');
+function insertAtIndex(index) {
+    moduleStates.splice(index, 0, emptyFlowModuleState());
+    modules.splice(index, 0, emptyModule());
+    moduleStates = moduleStates;
+    modules = modules;
+    select([prefix, String(index)].filter(Boolean).join('-'));
+}
+function removeAtIndex(index) {
+    select('settings');
+    modules.splice(index, 1);
+    moduleStates.splice(index, 1);
+    moduleStates = moduleStates;
+    modules = modules;
+}
+let indexToRemove = undefined;
+$: confirmationModalOpen = indexToRemove !== undefined;
+</script>
+
+<div class="flex flex-col justify-between h-full">
+	<ul class="w-full">
+		{#if prefix === undefined}
+			<div
+				on:click={() => select('settings')}
+				class={classNames(
+					'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center mb-4',
+					$selectedId.includes('settings')
+						? 'outline outline-offset-1 outline-2  outline-slate-900'
+						: ''
+				)}
+			>
+				<Icon data={faSliders} class="mr-2" />
+				<span class="font-bold">Settings</span>
+			</div>
+
+			<FlowModuleSchemaItem
+				on:click={() => select('inputs')}
+				isFirst
+				hasLine
+				selected={$selectedId === 'inputs'}
+			>
+				<div slot="icon">
+					<Icon data={faPen} scale={0.8} />
+				</div>
+				<div slot="content">
+					<span>Inputs</span>
+				</div>
+			</FlowModuleSchemaItem>
+		{/if}
+
+		{#each modules as mod, index (index)}
+			<button
+				on:click={() => insertAtIndex(index)}
+				type="button"
+				class="text-gray-900 m-0.5 my-0.5 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+			>
+				<Icon data={faPlus} scale={0.8} />
+			</button>
+			{#if mod.value.type === 'forloopflow'}
+				<li>
+					<FlowModuleSchemaItem
+						deletable
+						on:delete={() => removeAtIndex(index)}
+						on:click={() => select(['loop', String(index)].join('-'))}
+						selected={$selectedId === ['loop', String(index)].join('-')}
+					>
+						<div slot="icon">
+							<span>{index + 1}</span>
+						</div>
+						<div slot="content">
+							<span>For loop</span>
+						</div>
+					</FlowModuleSchemaItem>
+
+					<div class="flex text-xs">
+						<div class="line mr-2 w-8" />
+
+						<div class="w-full mb-2">
+							{#if moduleStates[index]?.childFlowModules}
+								<svelte:self
+									prefix={String(index)}
+									moduleStates={moduleStates[index].childFlowModules}
+									modules={mod.value.modules}
+								/>
+							{/if}
+						</div>
+					</div>
+
+					<div class="italic text-xs pl-10 text-gray-600">
+						The loop's result is the list of every iteration's result.
+					</div>
+				</li>
+			{:else}
+				<li>
+					<FlowModuleSchemaItem
+						on:click={() => select([prefix, String(index)].filter(Boolean).join('-'))}
+						color={prefix ? 'orange' : 'blue'}
+						isLast={index === modules.length - 1}
+						selected={$selectedId === [prefix, String(index)].filter(Boolean).join('-')}
+						deletable
+						on:delete={(event) => {
+							if (event.detail.event.shiftKey || isEmptyFlowModule(mod)) {
+								removeAtIndex(index)
+							} else {
+								indexToRemove = index
+							}
+						}}
+					>
+						<div slot="icon">
+							<span>{index + 1}</span>
+						</div>
+						<div slot="content" class="w-full truncate block">
+							<span
+								>{mod.summary ||
+									mod.value.path ||
+									(mod.value.type === 'rawscript'
+										? `Inline ${mod.value.language}`
+										: 'Select a script')}</span
+							>
+						</div>
+					</FlowModuleSchemaItem>
+				</li>
+			{/if}
+		{/each}
+
+		<button
+			on:click={() => insertAtIndex(modules.length)}
+			type="button"
+			class="text-gray-900 bg-white border m-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+		>
+			<Icon data={faPlus} scale={0.8} />
+		</button>
+	</ul>
+	{#if prefix === undefined}
+		<FlowErrorHandlerItem />
+	{/if}
+</div>
+
+<RemoveStepConfirmationModal
+	bind:open={confirmationModalOpen}
+	on:canceled={() => {
+		indexToRemove = undefined
+	}}
+	on:confirmed={() => {
+		if (indexToRemove !== undefined) {
+			removeAtIndex(indexToRemove)
+			indexToRemove = undefined
+		}
+	}}
+/>

package/components/flows/map/FlowModuleSchemaMap.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModuleState } from '../flowState';
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        prefix?: string | undefined;
+        modules: FlowModule[];
+        moduleStates: FlowModuleState[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowModuleSchemaMapProps = typeof __propDef.props;
+export declare type FlowModuleSchemaMapEvents = typeof __propDef.events;
+export declare type FlowModuleSchemaMapSlots = typeof __propDef.slots;
+export default class FlowModuleSchemaMap extends SvelteComponentTyped<FlowModuleSchemaMapProps, FlowModuleSchemaMapEvents, FlowModuleSchemaMapSlots> {
+}
+export {};

package/components/flows/pickers/PickHubScript.svelte

@@ -3,9 +3,10 @@ import FlowScriptPicker from './FlowScriptPicker.svelte';
 import ItemPicker from '../../ItemPicker.svelte';
 import { hubScripts } from '../../../stores';
 import { createEventDispatcher } from 'svelte';
-export let isTrigger = false;
+import { Script } from '../../../gen';
+export let kind;
 let items;
-$: items = $hubScripts?.filter((x) => x.is_trigger == isTrigger) ?? [];
+$: items = $hubScripts?.filter((x) => x.kind == kind) ?? [];
 let itemPicker;
 const dispatch = createEventDispatcher();
 </script>
@@ -23,7 +24,7 @@ const dispatch = createEventDispatcher();
 />
 
 <FlowScriptPicker
-	label={`Pick a ${isTrigger ? 'trigger ' : ''} script from the Hub`}
+	label={`Pick a ${kind == Script.kind.SCRIPT ? '' : kind} script from the Hub`}
 	icon={faUserGroup}
 	iconColor="text-blue-500"
 	on:click={() => itemPicker.openModal()}

package/components/flows/pickers/PickHubScript.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+import { Script } from '../../../gen';
 declare const __propDef: {
     props: {
-        isTrigger?: boolean | undefined;
+        kind: Script.kind;
     };
     events: {
         pick: CustomEvent<any>;

package/components/flows/pickers/PickScript.svelte

@@ -4,17 +4,11 @@ import { ScriptService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { createEventDispatcher } from 'svelte';
 import FlowScriptPicker from './FlowScriptPicker.svelte';
-export let isTrigger = false;
-let items = [];
+export let kind;
 let itemPicker;
 const dispatch = createEventDispatcher();
 async function loadItems() {
-    items = await ScriptService.listScripts({ workspace: $workspaceStore, isTrigger });
-}
-$: {
-    if ($workspaceStore) {
-        loadItems();
-    }
+    return await ScriptService.listScripts({ workspace: $workspaceStore, kind });
 }
 </script>
 
@@ -25,13 +19,11 @@ $: {
 	}}
 	itemName={'Script'}
 	extraField="summary"
-	loadItems={async () => {
-		return items
-	}}
+	{loadItems}
 />
 
 <FlowScriptPicker
-	label={`Pick a ${isTrigger ? 'trigger ' : ''}script from your workspace`}
+	label={`Pick a ${kind == 'script' ? '' : kind} script from your workspace`}
 	icon={faUserGroup}
 	iconColor="text-blue-500"
 	on:click={() => itemPicker.openModal()}

package/components/flows/pickers/PickScript.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        isTrigger?: boolean | undefined;
+        kind: string;
     };
     events: {
         pick: CustomEvent<any>;

package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -0,0 +1,42 @@
+<script context="module">export {};
+</script>
+
+<script>import PropPicker from '../../propertyPicker/PropPicker.svelte';
+import { setContext } from 'svelte';
+import { HSplitPane } from 'svelte-split-pane';
+import { writable } from 'svelte/store';
+export let pickableProperties = {};
+const propPickerConfig = writable(undefined);
+setContext('PropPickerWrapper', {
+    propPickerConfig,
+    focusProp: (propName, insertionMode, onSelect) => {
+        propPickerConfig.set({
+            propName,
+            insertionMode,
+            onSelect
+        });
+    },
+    clearFocus: () => {
+        propPickerConfig.set(undefined);
+    }
+});
+</script>
+
+<HSplitPane leftPaneSize="50%" rightPaneSize="50%" minLeftPaneSize="20%" minRightPaneSize="20%">
+	<left slot="left" class="relative">
+		<div class="overflow-auto h-full p-4">
+			<slot />
+		</div>
+	</left>
+	<right slot="right">
+		<div class="overflow-auto h-full">
+			<PropPicker
+				{pickableProperties}
+				on:select={({ detail }) => {
+					$propPickerConfig?.onSelect(detail)
+					propPickerConfig.set(undefined)
+				}}
+			/>
+		</div>
+	</right>
+</HSplitPane>

package/components/flows/propPicker/PropPickerWrapper.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+declare type InsertionMode = 'append' | 'connect' | 'insert';
+declare type SelectCallback = (path: string) => void;
+declare type PropPickerConfig = {
+    insertionMode: InsertionMode;
+    propName: string;
+    onSelect: SelectCallback;
+};
+export declare type PropPickerWrapperContext = {
+    propPickerConfig: Writable<PropPickerConfig | undefined>;
+    focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => void;
+    clearFocus: () => void;
+};
+import { type Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        pickableProperties?: Object | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PropPickerWrapperProps = typeof __propDef.props;
+export declare type PropPickerWrapperEvents = typeof __propDef.events;
+export declare type PropPickerWrapperSlots = typeof __propDef.slots;
+export default class PropPickerWrapper extends SvelteComponentTyped<PropPickerWrapperProps, PropPickerWrapperEvents, PropPickerWrapperSlots> {
+}
+export {};

package/components/flows/scheduleUtils.d.ts

@@ -2,6 +2,5 @@ export declare type Schedule = {
     args: Record<string, any>;
     cron: string;
     enabled: boolean;
-    previewArgs: Record<string, any>;
 };
 export declare function loadFlowSchedule(path: string, workspace?: string): Promise<Schedule>;

package/components/flows/scheduleUtils.js

@@ -16,6 +16,5 @@ export async function loadFlowSchedule(path, workspace = '') {
         enabled: schedule.enabled,
         cron: schedule.schedule,
         args: schedule.args ?? {},
-        previewArgs: JSON.parse(JSON.stringify(schedule.args))
     };
 }

package/components/flows/types.d.ts

@@ -0,0 +1,9 @@
+import type { Writable } from 'svelte/store';
+import type { Schedule } from './scheduleUtils';
+export declare type FlowEditorContext = {
+    selectedId: Writable<string>;
+    select: (id: string) => void;
+    schedule: Writable<Schedule>;
+    path: string;
+    previewArgs: Writable<Record<string, any>>;
+};

package/components/flows/types.js

@@ -0,0 +1 @@
+export {};

package/components/flows/utils.d.ts

@@ -2,7 +2,6 @@ import type { Schema } from '../../common';
 import { type Flow, type FlowModule, type InputTransform, type Job } from '../../gen';
 export declare function cleanInputs(flow: Flow | any): Flow;
 export declare function getTypeAsString(arg: any): string;
-export declare function scrollIntoView(element: any): void;
 export declare function loadSchemaFromModule(module: FlowModule): Promise<{
     input_transforms: Record<string, InputTransform>;
     schema: Schema;
@@ -12,3 +11,4 @@ export declare function getDefaultExpr(importPath?: string | undefined, key?: st
 export declare function jobsToResults(jobs: Job[]): any;
 export declare function runFlowPreview(args: Record<string, any>, flow: Flow): Promise<string>;
 export declare function codeToStaticTemplate(code?: string): string | undefined;
+export declare function getIndexes(parentIndex: number | undefined, childIndex: number): number[];

package/components/flows/utils.js

@@ -35,17 +35,6 @@ export function getTypeAsString(arg) {
     }
     return typeof arg;
 }
-export function scrollIntoView(element) {
-    if (!element)
-        return;
-    var headerOffset = 45;
-    var elementPosition = element.getBoundingClientRect().top;
-    var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
-    window.scrollTo({
-        top: offsetPosition,
-        behavior: 'smooth'
-    });
-}
 export async function loadSchemaFromModule(module) {
     const mod = module.value;
     if (mod.type == 'rawscript' || mod.type === 'script') {
@@ -134,3 +123,11 @@ export function codeToStaticTemplate(code) {
     }
     return undefined;
 }
+export function getIndexes(parentIndex, childIndex) {
+    const indexes = [];
+    if (parentIndex !== undefined) {
+        indexes.push(parentIndex);
+    }
+    indexes.push(childIndex);
+    return indexes;
+}

package/components/icons/HatIcon.svelte

@@ -0,0 +1,19 @@
+<script>let clazz = '';
+export { clazz as class };
+</script>
+
+<svg
+	class={clazz}
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
+		d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+	/><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+	/>
+</svg>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type HatIconProps = typeof __propDef.props;
+export declare type HatIconEvents = typeof __propDef.events;
+export declare type HatIconSlots = typeof __propDef.slots;
+export default class HatIcon extends SvelteComponentTyped<HatIconProps, HatIconEvents, HatIconSlots> {
+}
+export {};

package/components/landing/FlowGettingStarted.svelte

@@ -1,25 +1,14 @@
 <script>
 	import { goto } from '$app/navigation'
+	import { faExternalLink, faFile, faPlus } from '@fortawesome/free-solid-svg-icons'
+	import Button from '../common/button/Button.svelte'
+	import HatIcon from '../icons/HatIcon.svelte'
 </script>
 
 <div class="p-4 border border-gray-300 rounded-md bg-gray-50 ">
 	<div class="flex items-center">
 		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
-			<svg
-				class="w-6 h-6 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
-					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
-				/><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
-				/>
-			</svg>
+			<HatIcon class="w-6 h-6 mr-2" />
 			Getting started
 		</h3>
 	</div>
@@ -29,67 +18,32 @@
 		the Hub!
 	</div>
 	<div class="inline-flex flex-wrap gap-y-2">
-		<button
-			type="button"
+		<Button
 			on:click={() => goto('flows/add')}
-			class="mr-2 inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			color="dark"
+			size="xs"
+			btnClasses="mr-2"
+			startIcon={{ icon: faPlus }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
 			Create flow
-		</button>
-		<button
+		</Button>
+		<Button
 			on:click={() => goto('https://docs.windmill.dev/docs/getting_started/flows')}
-			type="button"
-			class="mr-2 inline-flex items-center text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			color="blue"
+			size="xs"
+			btnClasses="mr-2"
+			startIcon={{ icon: faFile }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-				/>
-			</svg>
 			Flow documentation
-		</button>
-		<button
-			type="button"
-			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center "
-			data-dismiss-target="#alert-additional-content-5"
-			aria-label="Close"
+		</Button>
+		<Button
 			on:click={() => goto('https://hub.windmill.dev/')}
+			color="light"
+			variant="border"
+			size="xs"
+			startIcon={{ icon: faExternalLink }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-				/>
-			</svg>
 			Explore community flows on WindmillHub
-		</button>
+		</Button>
 	</div>
 </div>

package/components/landing/FlowLandingBox.svelte

@@ -16,7 +16,7 @@ export let flow;
 		class="inline-flex space-x-2 space-x-reverse flex-row-reverse w-full bottom-4 right-4 flex-wrap"
 	>
 		<button
-			on:click|stopPropagation={() => goto(`/flows/edit/${flow.path}?step=2`)}
+			on:click|stopPropagation={() => goto(`/flows/edit/${flow.path}`)}
 			type="button"
 			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
 			data-dismiss-target="#alert-additional-content-5"

package/components/landing/RessourceGettingStarted.svelte

@@ -1,51 +1,21 @@
 <script>
 	import { goto } from '$app/navigation'
+	import { faLink } from '@fortawesome/free-solid-svg-icons'
+	import Button from '../common/button/Button.svelte'
+	import HatIcon from '../icons/HatIcon.svelte'
 </script>
 
 <div class="p-4 border border-gray-300 rounded-md bg-gray-50 dark:border-gray-600 dark:bg-gray-700">
 	<div class="flex items-center">
 		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
-			<svg
-				class="w-6 h-6 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
-					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
-				/><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
-				/>
-			</svg>
+			<HatIcon class="w-6 h-6 mr-2" />
 			Getting started
 		</h3>
 	</div>
 	<div class="mt-2 mb-4 text-sm text-gray-700 dark:text-gray-300">
 		Connect to apps like Slack, Google Drive or Airtable using OAuth.
 	</div>
-	<div class="flex">
-		<button
-			on:click={() => goto('resources')}
-			type="button"
-			class="inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center  dark:bg-gray-600 dark:hover:bg-gray-500 dark:focus:ring-gray-600"
-		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
-				/>
-			</svg>
-			Connect an API
-		</button>
-	</div>
+	<Button on:click={() => goto('resources')} color="dark" startIcon={{ icon: faLink }} size="xs">
+		Connect an API
+	</Button>
 </div>