windmill-components 1.103.2 → 1.109.2

package/package/components/apps/editor/DeploymentHistory.svelte

@@ -0,0 +1,70 @@
+<script>import { Pane, Splitpanes } from 'svelte-splitpanes';
+import PanelSection from './settingsPanel/common/PanelSection.svelte';
+import { classNames, displayDate } from '../../../utils';
+import { AppService, AppWithLastVersion } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import AppPreview from './AppPreview.svelte';
+import { Skeleton } from '../../common';
+import Button from '../../common/button/Button.svelte';
+import { createEventDispatcher } from 'svelte';
+export let versions;
+let selectedVersion = undefined;
+let selected = undefined;
+$: selectedVersion !== undefined && loadValue(selectedVersion);
+async function loadValue(version) {
+    let app = await AppService.getAppByVersion({ workspace: $workspaceStore, id: version });
+    selected = app;
+}
+$: reversedVersions = versions.slice().reverse();
+const dispatch = createEventDispatcher();
+</script>
+
+<Splitpanes class="!overflow-visible">
+	<Pane size={20}>
+		<PanelSection title="Past Deployments">
+			<div class="flex flex-col gap-2 w-full">
+				{#if versions.length > 0}
+					<div class="flex gap-2 flex-col">
+						{#each reversedVersions ?? [] as version}
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<div
+								class={classNames(
+									'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+									selectedVersion == version ? 'bg-blue-100 text-blue-600' : ''
+								)}
+								on:click={() => (selectedVersion = version)}
+							>
+								<span class="text-xs truncate">{version}</span>
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<div class="text-sm text-gray-500">No items</div>
+				{/if}
+			</div>
+		</PanelSection>
+	</Pane>
+	<Pane size={80}>
+		<div class="h-full w-full overflow-auto">
+			{#if selectedVersion}
+				{#if selected}
+					<div class="flex justify-between">
+						<h3 class="p-1">Deployed {displayDate(selected.created_at)} by {selected.created_by}</h3
+						>
+						<div class="flex gap-2">
+							<Button on:click={() => window.open(`/apps/add?template_id=${selectedVersion}`)}
+								>Restore as fork</Button
+							>
+							<Button on:click={() => dispatch('restore', selected)}>Restore here</Button>
+						</div>
+					</div>
+					<AppPreview noBackend app={selected.value} context={{}} />
+				{:else}
+					<Skeleton layout={[[40]]} />
+				{/if}
+			{:else}
+				<div class="text-sm p-2 text-gray-500">Select a deployment version to see its details</div>
+			{/if}
+		</div>
+	</Pane>
+</Splitpanes>

package/package/components/apps/editor/DeploymentHistory.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        versions: number[];
+    };
+    events: {
+        restore: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DeploymentHistoryProps = typeof __propDef.props;
+export type DeploymentHistoryEvents = typeof __propDef.events;
+export type DeploymentHistorySlots = typeof __propDef.slots;
+export default class DeploymentHistory extends SvelteComponentTyped<DeploymentHistoryProps, DeploymentHistoryEvents, DeploymentHistorySlots> {
+}
+export {};

package/package/components/apps/editor/RecomputeAllComponents.svelte

@@ -1,8 +1,10 @@
-<script>import Dropdown from '../../Dropdown.svelte';
-import { ChevronDown, RefreshCw } from 'lucide-svelte';
+<script>import { RefreshCw } from 'lucide-svelte';
 import { getContext, onMount } from 'svelte';
 import Button from '../../common/button/Button.svelte';
 import { allItems } from '../utils';
+import ButtonDropdown from '../../common/button/ButtonDropdown.svelte';
+import { MenuItem } from '@rgossiaux/svelte-headlessui';
+import { classNames } from '../../../utils';
 const { runnableComponents, app, initialized } = getContext('AppViewerContext');
 let loading = false;
 let timeout = undefined;
@@ -73,6 +75,16 @@ onMount(() => {
             clearInterval(timeout);
     };
 });
+let items = [
+    {
+        displayName: 'Once',
+        action: () => setInter(undefined)
+    },
+    ...[1, 2, 3, 4, 5, 6].map((i) => ({
+        displayName: `Every ${i * 5} seconds`,
+        action: () => setInter(i * 5000)
+    }))
+];
 </script>
 
 <div class="flex items-center">
@@ -89,22 +101,39 @@ onMount(() => {
 	>
 		<RefreshCw class={loading ? 'animate-spin' : ''} size={16} /> &nbsp;({componentNumber})
 	</Button>
-	<Dropdown
-		btnClasses="!rounded-l-none !border-l-0 min-w-[4rem] !px-2"
-		color={timeout ? 'blue' : 'light'}
-		variant="border"
-		dropdownItems={[
-			{
-				displayName: 'Once',
-				action: () => setInter(undefined)
-			},
-			...[1, 2, 3, 4, 5, 6].map((i) => ({
-				displayName: `Every ${i * 5} seconds`,
-				action: () => setInter(i * 5000)
-			}))
-		]}
-	>
-		<span class="grow text center">{interval ? `${interval / 1000}s` : 'once'}</span>
-		<ChevronDown class="ml-0.5" size={14} />
-	</Dropdown>
+
+	<ButtonDropdown hasPadding={true}>
+		<svelte:fragment slot="label">
+			<span
+				class={classNames('text-xs min-w-[2rem]', interval ? 'text-blue-500' : 'text-gray-600')}
+			>
+				{interval ? `${interval / 1000}s` : 'once'}
+			</span>
+		</svelte:fragment>
+		<svelte:fragment slot="items">
+			{#each items ?? [] as { }, index}
+				<MenuItem
+					on:click={() => {
+						if (index === 0) {
+							setInter(undefined)
+						} else {
+							setInter(index * 5000)
+						}
+					}}
+				>
+					<div
+						class={classNames(
+							'!text-gray-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+						)}
+					>
+						{#if index === 0}
+							Once
+						{:else}
+							{`Every ${index * 5} seconds`}
+						{/if}
+					</div>
+				</MenuItem>
+			{/each}
+		</svelte:fragment>
+	</ButtonDropdown>
 </div>

package/package/components/apps/editor/component/ComponentNavigation.svelte

@@ -3,10 +3,11 @@ import { findGridItem, findGridItemParentGrid, getAllSubgridsAndComponentIds, in
 import { push } from '../../../../history';
 import { sendUserToast } from '../../../../toast';
 import { gridColumns } from '../../gridUtils';
+import { copyToClipboard } from '../../../../utils';
 const { app, selectedComponent, focusedGrid, componentControl } = getContext('AppViewerContext');
 const { history, movingcomponents } = getContext('AppEditorContext');
 let tempGridItems = undefined;
-let copiedGridItems = undefined;
+const ITEM_TYPE = 'wm-grid-items';
 function getSortedGridItemsOfChildren() {
     if (!$focusedGrid) {
         return $app.grid;
@@ -90,14 +91,28 @@ function handleArrowUp(event) {
         $focusedGrid = undefined;
     }
 }
-function handleCopy(event) {
+async function handleCopy(event) {
     if (!$selectedComponent) {
         return;
     }
     tempGridItems = undefined;
-    copiedGridItems = $selectedComponent
+    const copiedGridItems = $selectedComponent
         .map((x) => findGridItem($app, x))
         .filter((x) => x != undefined);
+    copyGridItemsToClipboard(copiedGridItems);
+}
+function copyGridItemsToClipboard(items) {
+    let allSubgrids = {};
+    for (let item of items) {
+        let subgrids = getAllSubgridsAndComponentIds($app, item.data)[0];
+        for (let key of subgrids) {
+            allSubgrids[key] = $app.subgrids?.[key];
+        }
+    }
+    let success = copyToClipboard(JSON.stringify({ type: ITEM_TYPE, items, subgrids: allSubgrids }), false);
+    if (!success) {
+        sendUserToast('Could not copy to clipboard. Are you in an unsecure context?', true);
+    }
 }
 function handleCut(event) {
     if (!$selectedComponent) {
@@ -108,16 +123,39 @@ function handleCut(event) {
     let gridItems = $selectedComponent
         .map((x) => findGridItem($app, x))
         .filter((x) => x != undefined);
-    copiedGridItems = gridItems;
+    copyGridItemsToClipboard(gridItems);
     if (!gridItems) {
         return;
     }
     // Store the grid item in a temp variable so we can paste it later
     tempGridItems = gridItems;
 }
-function handlePaste(event) {
+export async function handlePaste(event) {
+    let classes = event.target?.['className'];
+    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        return;
+    }
+    event.preventDefault();
     push(history, $app);
     $movingcomponents = undefined;
+    let copiedGridItems = undefined;
+    let subgrids = $app.subgrids ?? {};
+    const txt = event?.clipboardData?.getData('text');
+    if (txt) {
+        try {
+            const parsed = JSON.parse(txt);
+            if (parsed.type == ITEM_TYPE) {
+                copiedGridItems = parsed.items;
+                subgrids = parsed.subgrids ?? subgrids;
+                console.log('subgrids', subgrids);
+            }
+            else {
+                copiedGridItems = undefined;
+            }
+        }
+        catch { }
+    }
     if (tempGridItems != undefined) {
         for (let tempGridItem of tempGridItems) {
             if ($focusedGrid &&
@@ -136,31 +174,29 @@ function handlePaste(event) {
             const gridItem = tempGridItem;
             insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), tempGridItem.id);
         }
-        copiedGridItems = tempGridItems;
+        copyGridItemsToClipboard(tempGridItems);
         $selectedComponent = tempGridItems.map((x) => x.id);
         tempGridItems = undefined;
     }
     else if (copiedGridItems) {
         let nitems = [];
         for (let copiedGridItem of copiedGridItems) {
-            let newItem = copyComponent(copiedGridItem, $focusedGrid);
+            let newItem = copyComponent(copiedGridItem, $focusedGrid, subgrids);
             newItem && nitems.push(newItem);
         }
         $selectedComponent = nitems.map((x) => x);
     }
     $app = $app;
 }
-function copyComponent(item, parentGrid, doNotVisit) {
+function copyComponent(item, parentGrid, subgrids, doNotVisit) {
     if (item.id === doNotVisit) {
         return;
     }
     const newItem = insertNewGridItem($app, (id) => ({ ...item.data, id }), parentGrid, Object.fromEntries(gridColumns.map((column) => [column, item[column]])));
-    if ($app.subgrids && item.data.numberOfSubgrids) {
-        for (let i = 0; i < item.data.numberOfSubgrids; i++) {
-            $app.subgrids[`${item.id}-${i}`].forEach((subgridItem) => {
-                copyComponent(subgridItem, { parentComponentId: newItem, subGridIndex: i }, doNotVisit ?? newItem);
-            });
-        }
+    for (let i = 0; i < (item?.data?.numberOfSubgrids ?? 0); i++) {
+        subgrids[`${item.id}-${i}`].forEach((subgridItem) => {
+            copyComponent(subgridItem, { parentComponentId: newItem, subGridIndex: i }, subgrids, doNotVisit ?? newItem);
+        });
     }
     return newItem;
 }
@@ -196,11 +232,6 @@ function keydown(event) {
                 handleCopy(event);
             }
             break;
-        case 'v':
-            if (event.ctrlKey || event.metaKey) {
-                handlePaste(event);
-            }
-            break;
         case 'x':
             if (event.ctrlKey || event.metaKey) {
                 handleCut(event);
@@ -212,4 +243,4 @@ function keydown(event) {
 }
 </script>
 
-<svelte:window on:keydown={keydown} />
+<svelte:window on:keydown={keydown} on:paste={handlePaste} />

package/package/components/apps/editor/component/ComponentNavigation.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        handlePaste?: ((event: ClipboardEvent) => Promise<void>) | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -10,5 +12,6 @@ export type ComponentNavigationProps = typeof __propDef.props;
 export type ComponentNavigationEvents = typeof __propDef.events;
 export type ComponentNavigationSlots = typeof __propDef.slots;
 export default class ComponentNavigation extends SvelteComponentTyped<ComponentNavigationProps, ComponentNavigationEvents, ComponentNavigationSlots> {
+    get handlePaste(): (event: ClipboardEvent) => Promise<void>;
 }
 export {};