windmill-components 1.122.0 → 1.138.2

package/package/components/common/table/RawAppRow.svelte

@@ -2,7 +2,7 @@
 import SharedBadge from '../../SharedBadge.svelte';
 import { RawAppService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
-import { faEdit, faEye, faFileExport, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faEdit, faFileExport, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
@@ -73,25 +73,11 @@ const dispatch = createEventDispatcher();
 					</div>
 				{/if}
 			{/if}
-			<Button
-				href="/apps/get_raw/{version}/{path}"
-				color="dark"
-				size="xs"
-				spacingSize="md"
-				startIcon={{ icon: faEye }}
-			>
-				View
-			</Button>
 		</span>
 		<Dropdown
 			placement="bottom-end"
 			dropdownItems={() => {
 				return [
-					{
-						displayName: 'View',
-						icon: faEye,
-						href: `/apps/get/${path}`
-					},
 					{
 						displayName: 'Move/Rename',
 						icon: faFileExport,

package/package/components/common/table/Row.svelte

@@ -10,42 +10,37 @@ export let summary = undefined;
 export let path;
 export let href;
 export let workspaceId;
-const color = {
-    script: 'hover:bg-blue-50 hover:border-blue-200',
-    flow: 'hover:bg-[#f0fdfa] hover:border-[#99f6e4]',
-    app: 'hover:bg-[#fff7ed] hover:border-orange-300'
-}[kind];
 </script>
 
 <div
-	class="hover:bg-gray-50 w-full inline-flex items-center p-4 gap-4 first-of-type:!border-t-0
-first-of-type:rounded-t-md last-of-type:rounded-b-md {color}"
+	class="hover:bg-surface-hover w-full inline-flex items-center gap-4 first-of-type:!border-t-0
+first-of-type:rounded-t-md last-of-type:rounded-b-md [*:not(:last-child)]:border-b px-4 py-2.5"
 >
-	<RowIcon {href} {kind} />
-
-	<a {href} class="min-w-0 grow hover:underline decoration-gray-400">
-		<div class="text-gray-900 flex-wrap text-left text-md font-semibold mb-1 truncate">
-			{#if marked}
-				{@html marked}
-			{:else}
-				{!summary || summary.length == 0 ? path : summary}
-			{/if}
+	<a {href} class="min-w-0 grow hover:underline decoration-gray-400 inline-flex items-center gap-4">
+		<div class="shrink">
+			<RowIcon {href} {kind} />
 		</div>
-		<div class="text-gray-600 text-xs truncate text-left font-light">
-			{path}
+		<div class="grow">
+			<div class="text-primary flex-wrap text-left text-sm font-semibold">
+				{#if marked}
+					{@html marked}
+				{:else}
+					{!summary || summary.length == 0 ? path : summary}
+				{/if}
+			</div>
+			<div class="text-secondary text-2xs truncate text-left font-light">
+				{path}
+			</div>
 		</div>
 	</a>
 	{#if $$slots.badges}
-		<div class="hidden lg:flex flex-row gap-1 items-center">
+		<div class="hidden lg:flex flex-row gap-4 items-center">
 			<slot name="badges" />
 		</div>
 	{/if}
 
-	<div class="flex gap-1 items-center justify-end">
-		<slot name="actions" />
-	</div>
 	{#if canFavorite}
-		<div class="center-center h-full text-sm font-semibold text-gray-900">
+		<div class="center-center h-full text-sm font-semibold text-secondary">
 			<Star
 				{kind}
 				{path}
@@ -59,4 +54,8 @@ first-of-type:rounded-t-md last-of-type:rounded-b-md {color}"
 	{:else}
 		<div class="w-9" />
 	{/if}
+
+	<div class="flex gap-1 items-center justify-end pr-2">
+		<slot name="actions" />
+	</div>
 </div>

package/package/components/common/table/RowIcon.svelte

@@ -5,10 +5,10 @@ import Icon from 'svelte-awesome';
 export let kind;
 export let href = '#';
 const color = {
-    script: 'bg-blue-50 border-blue-200',
-    flow: 'bg-[#f0fdfa] border-[#99f6e4]',
-    app: 'bg-[#fff7ed] border-orange-300',
-    raw_app: 'bg-[#fff7ed] border-orange-300'
+    script: 'bg-blue-50 border-blue-200 dark:bg-transparent dark:border-blue-900',
+    flow: 'bg-[#f0fdfa] border-[#99f6e4] dark:bg-transparent dark:border-teal-900',
+    app: 'bg-[#fff7ed] border-orange-300 dark:bg-transparent dark:border-orange-900',
+    raw_app: 'bg-[#fff7ed] border-orange-300 dark:bg-transparent dark:border-orange-900'
 }[kind];
 const iconColor = {
     script: '#60A5FA',
@@ -21,11 +21,11 @@ const iconColor = {
 <a {href} class={classNames('rounded-md p-1 flex justify-center items-center border', color)}>
 	{#if kind === 'flow'}
 		<span class="ml-1 mb-0.5 -mt-0.5">
-			<Icon data={faBarsStaggered} scale={1.1} class="mr-0.5 text-[#14b8a6]" />
+			<Icon data={faBarsStaggered} scale={1} class="mr-0.5 text-[#14b8a6]" />
 		</span>
 	{:else if kind === 'app' || kind === 'raw_app'}
-		<LayoutDashboard size={24} color={iconColor} />
+		<LayoutDashboard size={20} color={iconColor} />
 	{:else if kind === 'script'}
-		<Code2 size={24} color={iconColor} />
+		<Code2 size={20} color={iconColor} />
 	{/if}
 </a>

package/package/components/common/table/ScriptRow.svelte

@@ -4,15 +4,15 @@ import ScheduleEditor from '../../ScheduleEditor.svelte';
 import SharedBadge from '../../SharedBadge.svelte';
 import { ScriptService, DraftService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
-import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faFileExport, faList, faPlay, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faArchive, faCalendarAlt, faCodeFork, faCopy, faEdit, faFileExport, faList, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Badge from '../badge/Badge.svelte';
 import Button from '../button/Button.svelte';
-import LanguageBadge from './LanguageBadge.svelte';
 import Row from './Row.svelte';
 import DraftBadge from '../../DraftBadge.svelte';
 import { sendUserToast } from '../../../toast';
-import { DELETE, isOwner } from '../../../utils';
+import { copyToClipboard, DELETE, isOwner } from '../../../utils';
+import { LanguageIcon } from '../languageIcons';
 export let script;
 export let marked;
 export let starred;
@@ -52,7 +52,7 @@ const dlt = 'delete';
 <ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 
 <Row
-	href={`/scripts/run/${hash}`}
+	href="/scripts/get/{hash}?workspace={$workspaceStore}"
 	kind="script"
 	{marked}
 	{path}
@@ -63,8 +63,6 @@ const dlt = 'delete';
 	canFavorite={!draft_only}
 >
 	<svelte:fragment slot="badges">
-		<SharedBadge {canWrite} extraPerms={extra_perms} />
-		<DraftBadge {has_draft} {draft_only} />
 		{#if lock_error_logs}
 			<Badge color="red" baseClass="border border-red-200">Deployment failed</Badge>
 		{/if}
@@ -73,7 +71,11 @@ const dlt = 'delete';
 			<Badge color="red" baseClass="border">archived</Badge>
 		{/if}
 
-		<LanguageBadge {language} />
+		<SharedBadge {canWrite} extraPerms={extra_perms} />
+		<DraftBadge {has_draft} {draft_only} />
+		<div class="w-8 center-center">
+			<LanguageIcon lang={language} width={12} height={12} />
+		</div>
 	</svelte:fragment>
 
 	<svelte:fragment slot="actions">
@@ -105,28 +107,6 @@ const dlt = 'delete';
 					</div>
 				{/if}
 			{/if}
-
-			{#if !draft_only}
-				<Button
-					href="/scripts/get/{hash}?workspace={$workspaceStore}"
-					color="light"
-					variant="border"
-					size="xs"
-					spacingSize="md"
-					startIcon={{ icon: faEye }}
-				>
-					Detail
-				</Button>
-				<Button
-					href="/scripts/run/{hash}"
-					color="dark"
-					size="xs"
-					spacingSize="md"
-					endIcon={{ icon: faPlay }}
-				>
-					Run
-				</Button>
-			{/if}
 		</span>
 		<Dropdown
 			placement="bottom-end"
@@ -152,18 +132,6 @@ const dlt = 'delete';
 					]
 				}
 				return [
-					{
-						displayName: 'View script',
-						icon: faEye,
-						href: `/scripts/get/${hash}?workspace=${$workspaceStore}`
-					},
-
-					{
-						displayName: 'Edit',
-						icon: faEdit,
-						href: `/scripts/edit/${path}`,
-						disabled: !canWrite || archived
-					},
 					{
 						displayName: 'Duplicate/Fork',
 						icon: faCodeFork,
@@ -206,6 +174,13 @@ const dlt = 'delete';
 						},
 						disabled: archived
 					},
+					{
+						displayName: 'Copy path',
+						icon: faCopy,
+						action: () => {
+							copyToClipboard(path)
+						}
+					},
 					{
 						displayName: archived ? 'Unarchive' : 'Archive',
 						icon: faArchive,
@@ -215,6 +190,7 @@ const dlt = 'delete';
 						type: 'delete',
 						disabled: !owner
 					},
+
 					...(has_draft
 						? [
 								{

package/package/components/common/table/Table.svelte

@@ -1,7 +1,7 @@
 <div class="flex flex-col">
 	<div class="overflow-hidden rounded-md border">
 		<table class="min-w-full divide-y divide-gray-300">
-			<tbody class="divide-y divide-gray-200 bg-white">
+			<tbody class="divide-y bg-surface">
 				<slot />
 			</tbody>
 		</table>

package/package/components/common/tabs/Tab.svelte

@@ -23,7 +23,7 @@ const { selected, update, hashNavigation } = getContext('Tabs');
 		'border-b-2 py-1 px-4 cursor-pointer transition-all z-10 ease-linear font-medium',
 		$selected?.startsWith(value)
 			? 'wm-tab-active'
-			: 'border-gray-300 dark:border-gray-500 border-opacity-0 hover:border-opacity-100 ',
+			: 'border-gray-300 dark:border-gray-600 border-opacity-0 hover:border-opacity-100 ',
 		fontSizeClasses[size],
 		c,
 		$selected?.startsWith(value) ? selectedClass : '',

package/package/components/common/tabs/Tabs.svelte

@@ -43,10 +43,7 @@ function hashChange() {
 <svelte:window on:hashchange={hashChange} />
 
 <div class="overflow-x-auto {wrapperClass}">
-	<div
-		class={twMerge('border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden', c)}
-		{style}
-	>
+	<div class={twMerge('border-b flex flex-row whitespace-nowrap scrollbar-hidden', c)} {style}>
 		<slot {selected} />
 	</div>
 </div>

package/package/components/common/toggleButton-v2/ToggleButton.svelte

@@ -10,16 +10,22 @@ export let icon = undefined;
 export let disabled = false;
 export let selectedColor = '#3b82f6';
 export let small = false;
+export let iconProps = {};
 const { select, selected } = getContext('ToggleButtonGroup');
 </script>
 
-<Popover notClickable class="flex" disablePopup={tooltip === undefined} disappearTimeout={0}>
+<Popover
+	notClickable
+	class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
+	disablePopup={tooltip === undefined}
+	disappearTimeout={0}
+>
 	<Tab
 		{disabled}
 		class={twMerge(
 			' rounded-md transition-all text-xs flex gap-1 flex-row items-center',
 			small ? 'px-1 py-0.5' : 'px-2 py-1',
-			$selected === value ? 'bg-white shadow-md text-gray-800' : 'text-gray-600 hover:bg-gray-200',
+			$selected === value ? 'bg-surface shadow-md' : 'bg-surface-secondary hover:bg-surface-hover',
 			$$props.class
 		)}
 		on:click={() => select(value)}
@@ -29,6 +35,7 @@ const { select, selected } = getContext('ToggleButtonGroup');
 				this={icon}
 				size={14}
 				color={$selected === value ? selectedColor : '#9CA3AF'}
+				{...iconProps}
 			/>
 		{/if}
 		{#if label && !iconOnly}

package/package/components/common/toggleButton-v2/ToggleButton.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         selectedColor?: string | undefined;
         small?: boolean | undefined;
+        iconProps?: Record<string, any> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/common/toggleButton-v2/ToggleButtonGroup.svelte

@@ -24,7 +24,7 @@ setContext('ToggleButtonGroup', {
 </script>
 
 <TabGroup class={twMerge(`h-8 flex ${noWFull ? '' : 'w-full'}`, $$props.class)}>
-	<TabList class="flex bg-gray-100 rounded-md p-0.5 gap-1 h-full">
+	<TabList class="flex bg-surface-secondary rounded-md p-0.5 gap-1 h-full ">
 		<slot />
 	</TabList>
 </TabGroup>

package/package/components/details/ClipboardPanel.svelte

@@ -0,0 +1,19 @@
+<script>import { copyToClipboard } from '../../utils';
+import { Clipboard } from 'lucide-svelte';
+export let content;
+export let title;
+</script>
+
+<div class="text-xs font-semibold">{title}</div>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+	class="px-2 py-1 border flex items-center cursor-pointer bg-surface-secondary text-primary justify-between rounded-md"
+	on:click={(e) => {
+		e.preventDefault()
+		copyToClipboard(content)
+	}}
+>
+	<div class="text-xs truncate whitespace-pre-wrap w-11/12">{content}</div>
+	<Clipboard size={14} class="w-1/12" />
+</div>

package/package/components/details/ClipboardPanel.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        content: string;
+        title: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ClipboardPanelProps = typeof __propDef.props;
+export type ClipboardPanelEvents = typeof __propDef.events;
+export type ClipboardPanelSlots = typeof __propDef.slots;
+export default class ClipboardPanel extends SvelteComponentTyped<ClipboardPanelProps, ClipboardPanelEvents, ClipboardPanelSlots> {
+}
+export {};

package/package/components/details/DetailPageDetailPanel.svelte

@@ -0,0 +1,92 @@
+<script>import { Tabs, Tab, TabContent, Button } from '../common';
+import { copyToClipboard } from '../../utils';
+import { faClipboard } from '@fortawesome/free-solid-svg-icons';
+import { CalendarCheck2, Terminal, Webhook } from 'lucide-svelte';
+import { Highlight } from 'svelte-highlight';
+import json from 'svelte-highlight/languages/json';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+let triggerSelected = 'webhooks';
+export let flow_json = undefined;
+export let isOperator = false;
+</script>
+
+<Splitpanes horizontal class="h-full">
+	<Pane size={100}>
+		<Tabs selected="saved_inputs">
+			<Tab value="saved_inputs">Saved inputs</Tab>
+			{#if !isOperator}
+				<Tab value="details">Details & Triggers</Tab>
+			{/if}
+			{#if flow_json}
+				<Tab value="flow_json">JSON</Tab>
+			{/if}
+			<svelte:fragment slot="content">
+				<div class="overflow-hidden" style="height:calc(100% - 32px);">
+					<TabContent value="saved_inputs" class="flex flex-col flex-1 h-full">
+						<slot name="save_inputs" />
+					</TabContent>
+					<TabContent value="details" class="flex flex-col flex-1 h-full">
+						<Splitpanes horizontal class="h-full">
+							<Pane size={50} minSize={20}>
+								<slot name="details" />
+							</Pane>
+							<Pane size={50} minSize={20}>
+								<Tabs bind:selected={triggerSelected}>
+									<Tab value="webhooks">
+										<span class="flex flex-row gap-2 items-center">
+											<Webhook size={14} />
+											Webhooks
+										</span>
+									</Tab>
+									<Tab value="schedule">
+										<span class="flex flex-row gap-2 items-center">
+											<CalendarCheck2 size={14} />
+											Schedules
+										</span>
+									</Tab>
+									<Tab value="cli">
+										<span class="flex flex-row gap-2 items-center">
+											<Terminal size={14} />
+											CLI
+										</span>
+									</Tab>
+								</Tabs>
+
+								<div class="h-[calc(100%-32px)]">
+									<div class="h-full overflow-auto">
+										{#if triggerSelected === 'webhooks'}
+											<slot name="webhooks" />
+										{:else if triggerSelected === 'schedule'}
+											<slot name="schedule" />
+										{:else if triggerSelected === 'cli'}
+											<slot name="cli" />
+										{/if}
+									</div>
+								</div>
+							</Pane>
+						</Splitpanes>
+					</TabContent>
+					<TabContent value="flow_json" class="flex flex-col flex-1 h-full">
+						<div class="relative pt-2">
+							<Button
+								on:click={() => copyToClipboard(JSON.stringify(flow_json, null, 4))}
+								color="light"
+								variant="border"
+								size="xs"
+								startIcon={{ icon: faClipboard }}
+								btnClasses="absolute top-2 right-2 w-min"
+							>
+								Copy content
+							</Button>
+							<Highlight
+								language={json}
+								code={JSON.stringify(flow_json, null, 4)}
+								class="overflow-auto"
+							/>
+						</div>
+					</TabContent>
+				</div>
+			</svelte:fragment>
+		</Tabs>
+	</Pane>
+</Splitpanes>

package/package/components/details/DetailPageDetailPanel.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        flow_json?: any | undefined;
+        isOperator?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        save_inputs: {};
+        details: {};
+        webhooks: {};
+        schedule: {};
+        cli: {};
+    };
+};
+export type DetailPageDetailPanelProps = typeof __propDef.props;
+export type DetailPageDetailPanelEvents = typeof __propDef.events;
+export type DetailPageDetailPanelSlots = typeof __propDef.slots;
+export default class DetailPageDetailPanel extends SvelteComponentTyped<DetailPageDetailPanelProps, DetailPageDetailPanelEvents, DetailPageDetailPanelSlots> {
+}
+export {};

package/package/components/details/DetailPageHeader.svelte

@@ -0,0 +1,66 @@
+<script>import { Button } from '../common';
+import Menu from './Menu.svelte';
+import MenuItem from '../common/menu/MenuItem.svelte';
+import { classNames } from '../../utils';
+export let mainButtons = [];
+export let menuItems = [];
+export let title;
+</script>
+
+<div class="border-b p-2 shadow-md">
+	<div class="mx-auto">
+		<div class="flex w-full flex-wrap md:flex-nowrap justify-end gap-x-2 gap-y-4 h-8 items-center">
+			<div class="grow px-2 sm:w-full inline-flex items-center gap-4">
+				<div class="text-lg min-w-24 font-bold truncate">{title}</div>
+				<slot />
+			</div>
+			<div class="flex gap-1 md:gap-2 items-center">
+				{#if menuItems.length > 0}
+					<Menu>
+						<svelte:fragment slot="items">
+							{#each menuItems as { label, Icon, onclick, color } (label)}
+								<MenuItem
+									on:click={() => {
+										const div = document.querySelector('[id^="headlessui-menu-items"]')
+										div?.parentElement?.remove()
+
+										onclick()
+									}}
+								>
+									<div
+										class={classNames(
+											'text-xs flex items-center gap-2 flex-row-2 ',
+											color === 'red' ? 'text-red-500' : ''
+										)}
+									>
+										<Icon class="h-4" />
+										{label}
+									</div>
+								</MenuItem>
+							{/each}
+						</svelte:fragment>
+					</Menu>
+				{/if}
+				{#each mainButtons as btn}
+					<Button
+						{...btn.buttonProps}
+						startIcon={{ icon: btn.buttonProps.startIcon }}
+						on:click={btn.buttonProps.onClick}
+						btnClasses="hidden md:block"
+					>
+						{btn.label}
+					</Button>
+					<Button
+						{...btn.buttonProps}
+						startIcon={{ icon: btn.buttonProps.startIcon }}
+						on:click={btn.buttonProps.onClick}
+						iconOnly
+						btnClasses="block md:hidden"
+					>
+						{btn.label}
+					</Button>
+				{/each}
+			</div>
+		</div>
+	</div>
+</div>

package/package/components/details/DetailPageHeader.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        mainButtons?: {
+            label: string;
+            href: string;
+            buttonProps: any;
+        }[] | undefined;
+        menuItems?: {
+            label: string;
+            Icon: any;
+            onclick: () => void;
+            color?: "red" | undefined;
+        }[] | undefined;
+        title: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DetailPageHeaderProps = typeof __propDef.props;
+export type DetailPageHeaderEvents = typeof __propDef.events;
+export type DetailPageHeaderSlots = typeof __propDef.slots;
+export default class DetailPageHeader extends SvelteComponentTyped<DetailPageHeaderProps, DetailPageHeaderEvents, DetailPageHeaderSlots> {
+}
+export {};

package/package/components/details/DetailPageLayout.svelte

@@ -0,0 +1,51 @@
+<script>import { Tabs, Tab, TabContent } from '../common';
+import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import DetailPageDetailPanel from './DetailPageDetailPanel.svelte';
+export let isOperator = false;
+export let flow_json = undefined;
+let mobileTab = 'form';
+</script>
+
+<main class="h-screen w-full">
+	<div class="h-full hidden md:block">
+		<slot name="header" />
+		<SplitPanesWrapper>
+			<Splitpanes>
+				<Pane size={65} minSize={50}>
+					<slot name="form" />
+				</Pane>
+				<Pane size={35} minSize={15}>
+					<DetailPageDetailPanel {isOperator} {flow_json}>
+						<slot slot="webhooks" name="webhooks" />
+						<slot slot="schedule" name="schedule" />
+						<slot slot="cli" name="cli" />
+						<slot slot="details" name="details" />
+						<slot slot="save_inputs" name="save_inputs" />
+					</DetailPageDetailPanel>
+				</Pane>
+			</Splitpanes>
+		</SplitPanesWrapper>
+	</div>
+	<div class="h-full visible md:hidden">
+		<slot name="header" />
+		<Tabs bind:selected={mobileTab}>
+			<Tab value="form">Run form</Tab>
+			<Tab value="detail">Details</Tab>
+			<svelte:fragment slot="content">
+				<TabContent value="form" class="flex flex-col flex-1 h-full">
+					<slot name="form" />
+				</TabContent>
+				<TabContent value="detail" class="flex flex-col flex-1 h-full">
+					<DetailPageDetailPanel {isOperator}>
+						<slot slot="webhooks" name="webhooks" />
+						<slot slot="schedule" name="schedule" />
+						<slot slot="cli" name="cli" />
+						<slot slot="details" name="details" />
+						<slot slot="save_inputs" name="save_inputs" />
+					</DetailPageDetailPanel>
+				</TabContent>
+			</svelte:fragment>
+		</Tabs>
+	</div>
+</main>