windmill-components 1.52.0 → 1.55.0

package/components/common/languageIcons/LanguageIcon.svelte

@@ -1,4 +1,5 @@
-<script>import PostgresIcon from '../../icons/PostgresIcon.svelte';
+<script>import MySQLIcon from '../../icons/Mysql.svelte';
+import PostgresIcon from '../../icons/PostgresIcon.svelte';
 import { BashIcon, GoIcon, PythonIcon, TypeScriptIcon } from './';
 export let lang;
 export let width = 30;
@@ -9,7 +10,8 @@ const langToComponent = {
     python3: PythonIcon,
     deno: TypeScriptIcon,
     bash: BashIcon,
-    pgsql: PostgresIcon
+    pgsql: PostgresIcon,
+    mysql: MySQLIcon
 };
 </script>
 

package/components/common/languageIcons/LanguageIcon.svelte.d.ts

@@ -3,7 +3,7 @@ import type { SupportedLanguage } from '../../../common';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        lang: SupportedLanguage | 'pgsql';
+        lang: SupportedLanguage | 'pgsql' | 'mysql';
         width?: number | undefined;
         height?: number | undefined;
         scale?: number | undefined;

package/components/common/menu/Menu.svelte

@@ -38,7 +38,6 @@ const placementsClasses = {
 	<div on:click={() => (show = !show)} class="cursor-pointer hover:bg-gray-100/30">
 		<slot class="triggerable" name="trigger" />
 	</div>
-
 	{#if show}
 		<div
 			class={classNames(

package/components/common/menu/MenuItem.svelte.d.ts

@@ -1,7 +1,9 @@
 /** @typedef {typeof __propDef.props}  MenuItemProps */
 /** @typedef {typeof __propDef.events}  MenuItemEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemSlots */
-export default class MenuItem extends SvelteComponentTyped<{}, {
+export default class MenuItem extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
     click: MouseEvent;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -14,7 +16,9 @@ export type MenuItemEvents = typeof __propDef.events;
 export type MenuItemSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         click: MouseEvent;
     } & {

package/components/common/popup/Popup.svelte

@@ -131,17 +131,6 @@ onDestroy(removeAllListeners);
 			<div class={innerClasses}>
 				<slot />
 			</div>
-			{#if !disableInstruction && focusableElements?.length}
-				<div
-					class="flex justify-center items-center font-semibold
-					text-xs text-gray-700 p-1 border-x border-b rounded-b bg-gray-100"
-				>
-					Use
-					<Kbd class="!bg-gray-200 !border-gray-300 !px-1 !py-0 !rounded-sm">↑</Kbd>
-					and
-					<Kbd class="!bg-gray-200 !border-gray-300 !px-1 !py-0 !rounded-sm">↓</Kbd>
-				</div>
-			{/if}
 		</div>
 	{/if}
 </div>

package/components/common/table/AppRow.svelte

@@ -1,13 +1,16 @@
 <script>import Dropdown from '../../Dropdown.svelte';
 import SharedBadge from '../../SharedBadge.svelte';
-import { workspaceStore } from '../../../stores';
-import { faEdit, faEye } from '@fortawesome/free-solid-svg-icons';
+import { AppService } from '../../../gen';
+import { userStore, workspaceStore } from '../../../stores';
+import { faEdit, faEye, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
 import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
 export let app;
 export let marked;
 export let starred;
 let { summary, path, extra_perms, canWrite, workspace_id } = app;
+const dispatch = createEventDispatcher();
 </script>
 
 <Row
@@ -24,38 +27,51 @@ let { summary, path, extra_perms, canWrite, workspace_id } = app;
 		<SharedBadge {canWrite} extraPerms={extra_perms} />
 	</svelte:fragment>
 	<svelte:fragment slot="actions">
+		<span class="hidden md:inline-flex gap-x-1">
+			{#if !$userStore?.operator}
+				{#if canWrite}
+					<div>
+						<Button
+							color="light"
+							size="xs"
+							variant="border"
+							startIcon={{ icon: faEdit }}
+							href="/apps/edit/{path}"
+						>
+							Edit
+						</Button>
+					</div>
+				{/if}
+			{/if}
+			<Button
+				href="/apps/get/{path}"
+				color="dark"
+				size="xs"
+				spacingSize="md"
+				startIcon={{ icon: faEye }}
+			>
+				View
+			</Button>
+		</span>
 		<Dropdown
+			placement="bottom-end"
 			dropdownItems={[
 				{
 					displayName: 'View app',
 					icon: faEye,
 					href: `/apps/get/${path}`
+				},
+				{
+					displayName: 'Delete',
+					icon: faTrashAlt,
+					action: async () => {
+						await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
+						dispatch('change')
+					},
+					type: 'delete',
+					disabled: !canWrite
 				}
 			]}
 		/>
-
-		{#if canWrite}
-			<div>
-				<Button
-					color="light"
-					size="xs"
-					variant="border"
-					startIcon={{ icon: faEdit }}
-					href="/apps/edit/{path}"
-				>
-					Edit
-				</Button>
-			</div>
-		{/if}
-
-		<Button
-			href="/apps/get/{path}"
-			color="dark"
-			size="xs"
-			spacingSize="md"
-			startIcon={{ icon: faEye }}
-		>
-			View
-		</Button>
 	</svelte:fragment>
 </Row>

package/components/common/table/AppRow.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ListableApp } from '../../../gen';
+import { type ListableApp } from '../../../gen';
 declare const __propDef: {
     props: {
         app: ListableApp & {

package/components/common/table/FlowRow.svelte

@@ -1,7 +1,7 @@
 <script>import Dropdown from '../../Dropdown.svelte';
 import SharedBadge from '../../SharedBadge.svelte';
 import { FlowService } from '../../../gen';
-import { workspaceStore } from '../../../stores';
+import { userStore, workspaceStore } from '../../../stores';
 import { sendUserToast } from '../../../utils';
 import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faList, faPlay, faShare } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
@@ -17,7 +17,7 @@ async function archiveFlow(path) {
     try {
         await FlowService.archiveFlowByPath({ workspace: $workspaceStore, path });
         dispatch('change');
-        sendUserToast(`Successfully archived flow ${path}`);
+        sendUserToast(`Archived flow ${path}`);
     }
     catch (err) {
         sendUserToast(`Could not archive this flow ${err.body}`, true);
@@ -26,7 +26,7 @@ async function archiveFlow(path) {
 </script>
 
 <Row
-	href={`/flows/get/${path}`}
+	href={`/flows/run/${path}`}
 	kind="flow"
 	workspaceId={workspace_id ?? $workspaceStore ?? ''}
 	{marked}
@@ -39,7 +39,58 @@ async function archiveFlow(path) {
 		<SharedBadge {canWrite} extraPerms={extra_perms} />
 	</svelte:fragment>
 	<svelte:fragment slot="actions">
+		<span class="hidden md:inline-flex gap-x-1">
+			{#if !$userStore?.operator}
+				{#if canWrite}
+					<div>
+						<Button
+							color="light"
+							size="xs"
+							variant="border"
+							startIcon={{ icon: faEdit }}
+							href="/flows/edit/{path}"
+						>
+							Edit
+						</Button>
+					</div>
+				{:else}
+					<div>
+						<Button
+							color="light"
+							size="xs"
+							variant="border"
+							startIcon={{ icon: faCodeFork }}
+							href="/flows/add?template={path}"
+						>
+							Fork
+						</Button>
+					</div>
+				{/if}
+			{/if}
+
+			<Button
+				href="/flows/get/{path}"
+				color="light"
+				variant="border"
+				size="xs"
+				spacingSize="md"
+				startIcon={{ icon: faEye }}
+			>
+				Detail
+			</Button>
+			<Button
+				href="/flows/run/{path}"
+				color="dark"
+				size="xs"
+				spacingSize="md"
+				endIcon={{ icon: faPlay }}
+			>
+				Run
+			</Button>
+		</span>
+
 		<Dropdown
+			placement="bottom-end"
 			dropdownItems={[
 				{
 					displayName: 'View flow',
@@ -86,51 +137,5 @@ async function archiveFlow(path) {
 				}
 			]}
 		/>
-
-		{#if canWrite}
-			<div>
-				<Button
-					color="light"
-					size="xs"
-					variant="border"
-					startIcon={{ icon: faEdit }}
-					href="/flows/edit/{path}"
-				>
-					Edit
-				</Button>
-			</div>
-		{:else}
-			<div>
-				<Button
-					color="light"
-					size="xs"
-					variant="border"
-					startIcon={{ icon: faCodeFork }}
-					href="/flows/add?template={path}"
-				>
-					Fork
-				</Button>
-			</div>
-		{/if}
-
-		<Button
-			href="/flows/get/{path}"
-			color="light"
-			variant="border"
-			size="xs"
-			spacingSize="md"
-			startIcon={{ icon: faEye }}
-		>
-			Detail
-		</Button>
-		<Button
-			href="/flows/run/{path}"
-			color="dark"
-			size="xs"
-			spacingSize="md"
-			endIcon={{ icon: faPlay }}
-		>
-			Run
-		</Button>
 	</svelte:fragment>
 </Row>

package/components/common/table/LanguageBadge.svelte

@@ -4,7 +4,7 @@ import Badge from '../badge/Badge.svelte';
 import { LanguageIcon } from '../languageIcons';
 export let language;
 const languageLabel = {
-    [Script.language.PYTHON3]: 'Python 3',
+    [Script.language.PYTHON3]: 'Python',
     [Script.language.DENO]: 'TypeScript',
     [Script.language.GO]: 'Go',
     [Script.language.BASH]: 'Bash'

package/components/common/table/Row.svelte

@@ -3,45 +3,56 @@ import { createEventDispatcher } from 'svelte';
 import RowIcon from './RowIcon.svelte';
 export let marked;
 export let starred;
+export let canFavorite = true;
 const dispatch = createEventDispatcher();
 export let kind = 'script';
 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>
 
-<a class="hover:bg-gray-50 cursor-pointer w-full flex items-center p-4 gap-4 min-w-[1000px]" {href}>
+<a
+	class="hover:bg-gray-50 cursor-pointer w-full flex items-center p-4 gap-4 {color} rounded-md"
+	{href}
+>
 	<RowIcon {kind} />
 
-	<div class="w-full">
-		<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+	<div class="w-full min-w-0 ">
+		<div class="text-gray-900 flex-wrap text-md font-semibold mb-1 truncate">
 			{#if marked}
 				{@html marked}
 			{:else}
 				{!summary || summary.length == 0 ? path : summary}
 			{/if}
 		</div>
-		<div class="text-gray-600 text-xs ">
+		<div class="text-gray-600 text-xs truncate">
 			{path}
 		</div>
 	</div>
-	<div class="w-96 flex flex-row max-w-xs gap-1 items-start flex-wrap">
+	<div class="w-96 hidden lg:flex flex-row max-w-xs gap-1 items-start flex-wrap">
 		<slot name="badges" />
 	</div>
 
 	<div class="flex gap-1 items-center justify-end">
 		<slot name="actions" />
 	</div>
-	<div class="text-left text-sm font-semibold text-gray-900">
-		<Star
-			{kind}
-			{path}
-			{starred}
-			workspace_id={workspaceId}
-			on:starred={() => {
-				dispatch('change')
-			}}
-		/>
-	</div>
+	{#if canFavorite}
+		<div class="text-left text-sm font-semibold text-gray-900">
+			<Star
+				{kind}
+				{path}
+				{starred}
+				workspace_id={workspaceId}
+				on:starred={() => {
+					dispatch('change')
+				}}
+			/>
+		</div>
+	{/if}
 </a>

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

@@ -3,7 +3,8 @@ declare const __propDef: {
     props: {
         marked: string | undefined;
         starred: boolean;
-        kind?: "script" | "flow" | "app" | undefined;
+        canFavorite?: boolean | undefined;
+        kind?: "flow" | "script" | "app" | undefined;
         summary?: string | undefined;
         path: string;
         href: string;

package/components/common/table/RowIcon.svelte

@@ -1,15 +1,12 @@
 <script>import { classNames } from '../../../utils';
-import { Code2, LayoutDashboard, Wind } from 'svelte-lucide';
+import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+import { Code2, LayoutDashboard, Wind } from 'lucide-svelte';
+import Icon from 'svelte-awesome';
 export let kind;
-const icon = {
-    script: Code2,
-    flow: Wind,
-    app: LayoutDashboard
-}[kind];
 const color = {
     script: 'bg-blue-50 border-blue-200',
     flow: 'bg-[#f0fdfa] border-[#99f6e4]',
-    app: 'bg-[#fff7ed] border-orange-200'
+    app: 'bg-[#fff7ed] border-orange-300'
 }[kind];
 const iconColor = {
     script: '#60A5FA',
@@ -19,5 +16,13 @@ const iconColor = {
 </script>
 
 <div class={classNames('rounded-md p-1 flex justify-center items-center border', color)}>
-	<svelte:component this={icon} size="18px" color={iconColor} />
+	{#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]" />
+		</span>
+	{:else if kind === 'app'}
+		<LayoutDashboard size={24} color={iconColor} />
+	{:else if kind === 'script'}
+		<Code2 size={24} color={iconColor} />
+	{/if}
 </div>

package/components/common/table/ScriptRow.svelte

@@ -1,7 +1,7 @@
 <script>import Dropdown from '../../Dropdown.svelte';
 import SharedBadge from '../../SharedBadge.svelte';
 import { ScriptService } from '../../../gen';
-import { workspaceStore } from '../../../stores';
+import { userStore, workspaceStore } from '../../../stores';
 import { capitalize, sendUserToast } from '../../../utils';
 import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faList, faPlay, faShare } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
@@ -18,12 +18,12 @@ const dispatch = createEventDispatcher();
 async function archiveScript(path) {
     await ScriptService.archiveScriptByPath({ workspace: $workspaceStore, path });
     dispatch('change');
-    sendUserToast(`Successfully archived script ${path}`);
+    sendUserToast(`Archived script ${path}`);
 }
 </script>
 
 <Row
-	href={`/scripts/get/${hash}`}
+	href={`/scripts/run/${hash}`}
 	kind="script"
 	{marked}
 	{path}
@@ -33,24 +33,78 @@ async function archiveScript(path) {
 	on:change
 >
 	<svelte:fragment slot="badges">
-		<SharedBadge {canWrite} extraPerms={extra_perms} />
-		{#if lock_error_logs}
-			<Badge color="red" baseClass="border border-red-200">Deployment failed</Badge>
-		{/if}
-		{#if kind !== 'script'}
-			<Badge color="gray" baseClass="border">{capitalize(kind)}</Badge>
-		{/if}
+		<span class="hidden md:block">
+			<SharedBadge {canWrite} extraPerms={extra_perms} />
+			{#if lock_error_logs}
+				<Badge color="red" baseClass="border border-red-200">Deployment failed</Badge>
+			{/if}
+			{#if kind !== 'script'}
+				<Badge color="gray" baseClass="border">{capitalize(kind)}</Badge>
+			{/if}
 
-		<LanguageBadge {language} />
+			<LanguageBadge {language} />
+		</span>
 	</svelte:fragment>
+
 	<svelte:fragment slot="actions">
+		<span class="hidden md:inline-flex gap-x-1">
+			{#if !$userStore?.operator}
+				{#if canWrite}
+					<div>
+						<Button
+							color="light"
+							size="xs"
+							variant="border"
+							startIcon={{ icon: faEdit }}
+							href="/scripts/edit/{hash}?step=2"
+						>
+							Edit
+						</Button>
+					</div>
+				{:else}
+					<div>
+						<Button
+							color="light"
+							size="xs"
+							variant="border"
+							startIcon={{ icon: faCodeFork }}
+							href="/scripts/add?template={path}"
+						>
+							Fork
+						</Button>
+					</div>
+				{/if}
+			{/if}
+
+			<Button
+				href="/scripts/get/{hash}"
+				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>
+		</span>
 		<Dropdown
+			placement="bottom-end"
 			dropdownItems={[
 				{
 					displayName: 'View script',
 					icon: faEye,
 					href: `/scripts/get/${hash}`
 				},
+
 				{
 					displayName: 'Edit',
 					icon: faEdit,
@@ -97,51 +151,5 @@ async function archiveScript(path) {
 				}
 			]}
 		/>
-
-		{#if canWrite}
-			<div>
-				<Button
-					color="light"
-					size="xs"
-					variant="border"
-					startIcon={{ icon: faEdit }}
-					href="/scripts/edit/{hash}?step=2"
-				>
-					Edit
-				</Button>
-			</div>
-		{:else}
-			<div>
-				<Button
-					color="light"
-					size="xs"
-					variant="border"
-					startIcon={{ icon: faCodeFork }}
-					href="/scripts/add?template={path}"
-				>
-					Fork
-				</Button>
-			</div>
-		{/if}
-
-		<Button
-			href="/scripts/get/{hash}"
-			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>
 	</svelte:fragment>
 </Row>

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

@@ -1,7 +1,9 @@
 /** @typedef {typeof __propDef.props}  TableProps */
 /** @typedef {typeof __propDef.events}  TableEvents */
 /** @typedef {typeof __propDef.slots}  TableSlots */
-export default class Table extends SvelteComponentTyped<{}, {
+export default class Table extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
@@ -12,7 +14,9 @@ export type TableEvents = typeof __propDef.events;
 export type TableSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };