windmill-components 1.623.1 → 1.642.0

package/package/components/sidebar/CriticalAlertModalInner.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import Toggle from '../Toggle.svelte';
+<script lang="ts">import { preventDefault } from 'svelte/legacy';
+import Toggle from '../Toggle.svelte';
 import { SettingService } from '../../gen';
 import { devopsRole, instanceSettingsSelectedTab, superadmin } from '../../stores';
 import { goto } from '$app/navigation';
@@ -7,24 +8,16 @@ import RefreshButton from '../common/button/RefreshButton.svelte';
 import CriticalAlertTable from './CriticalAlertTable.svelte';
 import Alert from '../common/alert/Alert.svelte';
 import { sendUserToast } from '../../toast';
-export let updateHasUnacknowledgedCriticalAlerts;
-export let getCriticalAlerts;
-export let acknowledgeCriticalAlert;
-export let acknowledgeAllCriticalAlerts;
-export let numUnacknowledgedCriticalAlerts;
-let filteredAlerts = [];
-let isRefreshing = false;
-let hasCriticalAlertChannels = true;
-$: loading = isRefreshing;
-$: if (numUnacknowledgedCriticalAlerts) {
-    refreshAlerts();
-}
+import { untrack } from 'svelte';
+let filteredAlerts = $state([]);
+let isRefreshing = $state(false);
+let hasCriticalAlertChannels = $state(true);
 // Pagination
-let page = 1;
+let page = $state(1);
 let pageSize = 10;
-let hasMore = true;
-let hideAcknowledged = false;
-export let workspaceContext = false;
+let hasMore = $state(true);
+let hideAcknowledged = $state(false);
+let { updateHasUnacknowledgedCriticalAlerts, getCriticalAlerts, acknowledgeCriticalAlert, acknowledgeAllCriticalAlerts, numUnacknowledgedCriticalAlerts, workspaceContext = $bindable(false) } = $props();
 async function acknowledgeAll() {
     await acknowledgeAllCriticalAlerts();
     getAlerts(false);
@@ -85,14 +78,27 @@ function goToNextPage() {
 }
 function goToCoreTab() {
     goto('/#superadmin-settings');
-    instanceSettingsSelectedTab.set('Core');
+    instanceSettingsSelectedTab.set('general');
 }
 function onFiltersChange() {
     getAlerts(true);
 }
+let totalNumberOfAlerts = $state(0);
+$effect(() => {
+    if (numUnacknowledgedCriticalAlerts) {
+        untrack(() => {
+            refreshAlerts();
+        });
+    }
+});
 // Update filter change handlers
-$: (hideAcknowledged, workspaceContext, onFiltersChange());
-let totalNumberOfAlerts = 0;
+$effect(() => {
+    ;
+    [hideAcknowledged, workspaceContext, onFiltersChange];
+    untrack(() => {
+        onFiltersChange();
+    });
+});
 </script>
 
 <List gap="sm">
@@ -100,7 +106,7 @@ let totalNumberOfAlerts = 0;
 		<div class="w-full">
 			<Alert title="No critical alert channels are set up" type="warning" size="xs">
 				Go to the
-				<a href="/#superadmin-settings" on:click|preventDefault={goToCoreTab}>Instance settings</a>
+				<a href="/#superadmin-settings" onclick={preventDefault(goToCoreTab)}>Instance settings</a>
 				page to configure critical alert channels.
 			</Alert>
 		</div>
@@ -126,7 +132,7 @@ let totalNumberOfAlerts = 0;
 				<div class="text-xs text-primary whitespace-nowrap"
 					>{`${totalNumberOfAlerts === 1000 ? '1000+' : (totalNumberOfAlerts ?? '?')} items`}
 				</div>
-				<RefreshButton {loading} onClick={refreshAlerts} />
+				<RefreshButton loading={isRefreshing} onClick={refreshAlerts} />
 			</List>
 		</List>
 	</div>

package/package/components/sidebar/CriticalAlertModalInner.svelte.d.ts

@@ -1,28 +1,13 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CriticalAlertModalInner: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     updateHasUnacknowledgedCriticalAlerts: any;
     getCriticalAlerts: any;
     acknowledgeCriticalAlert: any;
     acknowledgeAllCriticalAlerts: any;
     numUnacknowledgedCriticalAlerts: any;
     workspaceContext?: boolean;
-    refreshAlerts?: () => Promise<void>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+}
+declare const CriticalAlertModalInner: import("svelte").Component<Props, {
     refreshAlerts: () => Promise<void>;
-}, string>;
-type CriticalAlertModalInner = InstanceType<typeof CriticalAlertModalInner>;
+}, "workspaceContext">;
+type CriticalAlertModalInner = ReturnType<typeof CriticalAlertModalInner>;
 export default CriticalAlertModalInner;

package/package/components/sidebar/DarkModeToggle.svelte

@@ -17,8 +17,8 @@ export function toggle() {
 
 <button
 	class={twMerge(
-		'text-2xs text-white m-1 p-2 rounded-lg flex flex-row gap-2 justify-center hover:bg-gray-600',
-		forcedDarkMode ? 'text-white hover:bg-gray-600' : 'text-primary hover:bg-surface-hover'
+		'text-2xs m-1 p-2 rounded-lg flex flex-row gap-2 justify-center',
+		forcedDarkMode ? 'text-white hover:bg-gray-600' : 'text-secondary hover:bg-surface-hover'
 	)}
 	on:click={toggle}
 >

package/package/components/sidebar/FavoriteMenu.svelte

@@ -1,7 +1,63 @@
-<script lang="ts">import { CodeXml, LayoutDashboard, Star } from 'lucide-svelte';
+<script module lang="ts">export function getFavoriteHref(path, kind) {
+    return {
+        script: `/scripts/get/${path}`,
+        flow: `/flows/get/${path}`,
+        app: `/apps/get/${path}`,
+        raw_app: `/apps_raw/get/${path}`,
+        asset: `#dbmanager:${path}`
+    }[kind];
+}
+export function getFavoriteLabel(path, kind) {
+    if (kind === 'asset') {
+        const asset = parseFavoriteAsset(path);
+        return `${asset.schema ? `${asset.schema}.` : ''}${asset.table} (${asset.assetName} ${asset.scheme})`;
+    }
+    return path;
+}
+class FavoriteManager {
+    current = $state([]);
+    async unstar(path, favorite_kind, workspaceId) {
+        this.current = this.current.filter((fav) => !(fav.path === path && fav.kind === favorite_kind));
+        await FavoriteService.unstar({
+            workspace: workspaceId ?? get(workspaceStore),
+            requestBody: { path, favorite_kind }
+        });
+    }
+    async star(path, favorite_kind, workspaceId, summary) {
+        const href = getFavoriteHref(path, favorite_kind);
+        const label = summary || getFavoriteLabel(path, favorite_kind);
+        this.current = [...this.current, { href, kind: favorite_kind, label, path }];
+        await FavoriteService.star({
+            workspace: workspaceId ?? get(workspaceStore),
+            requestBody: { path, favorite_kind }
+        });
+    }
+    isStarred(path, favorite_kind) {
+        return this.current.some((fav) => fav.path === path && fav.kind === favorite_kind);
+    }
+}
+export const favoriteManager = new FavoriteManager();
+export function parseFavoriteAsset(path) {
+    const [scheme, t0] = path.split('://');
+    const [assetName, tableKey] = t0.split('/');
+    const [t1, t2] = tableKey.split('.');
+    const [table, schema] = [
+        t2 ?? t1,
+        t1 === 'main' || t1 === 'public' ? undefined : t2 ? t1 : undefined
+    ];
+    return { table, schema, assetName: assetName || 'main', path, scheme };
+}
+</script>
+
+<script lang="ts">import { CodeXml, LayoutDashboard, Table2, Star, Trash2 } from 'lucide-svelte';
 import BarsStaggered from '../icons/BarsStaggered.svelte';
 import { Menu, MenuItem } from '../meltComponents';
 import MenuButton from './MenuButton.svelte';
+import { FavoriteService } from '../../gen';
+import { get } from 'svelte/store';
+import { globalDbManagerDrawer, workspaceStore } from '../../stores';
+import { parseDbInputFromAssetSyntax } from '../../utils';
+import DropdownV2 from '../DropdownV2.svelte';
 let { lightMode = false, isCollapsed = false, favoriteLinks = [], createMenu } = $props();
 </script>
 
@@ -27,25 +83,50 @@ let { lightMode = false, isCollapsed = false, favoriteLinks = [], createMenu } =
 				</div>
 			{:else}
 				<div class="py-1 w-full max-w-full">
-					{#each favoriteLinks ?? [] as favorite (favorite.href)}
-						<MenuItem
-							href={favorite.href}
-							{item}
-							class="w-full inline-flex flex-row px-4 py-2 data-[highlighted]:bg-surface-hover"
-						>
-							<span class="center-center">
-								{#if favorite.kind == 'script'}
-									<CodeXml size={16} />
-								{:else if favorite.kind == 'flow'}
-									<BarsStaggered size={16} />
-								{:else if favorite.kind == 'app' || favorite.kind == 'raw_app'}
-									<LayoutDashboard size={16} />
-								{/if}
-							</span>
-							<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
-								{favorite.label}
-							</span>
-						</MenuItem>
+					{#each favoriteLinks ?? [] as favorite}
+						<div class="relative group">
+							<MenuItem
+								href={favorite.href}
+								onClick={() => {
+									if (favorite.kind === 'asset') {
+										const dbInput = parseDbInputFromAssetSyntax(favorite.path)
+										if (dbInput) globalDbManagerDrawer.val?.openDrawer(dbInput)
+									}
+								}}
+								{item}
+								class="w-full inline-flex flex-row px-4 py-2 pr-8 data-[highlighted]:bg-surface-hover"
+							>
+								<span class="center-center">
+									{#if favorite.kind == 'script'}
+										<CodeXml size={16} />
+									{:else if favorite.kind == 'flow'}
+										<BarsStaggered size={16} />
+									{:else if favorite.kind == 'app' || favorite.kind == 'raw_app'}
+										<LayoutDashboard size={16} />
+									{:else if favorite.kind == 'asset'}
+										<Table2 size={16} />
+									{/if}
+								</span>
+								<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
+									{favorite.label}
+								</span>
+							</MenuItem>
+							<div
+								class="absolute right-0 top-0 h-full flex items-center pr-1 opacity-0 group-hover:opacity-100 transition-opacity"
+							>
+								<DropdownV2
+									items={[
+										{
+											displayName: 'Delete',
+											icon: Trash2,
+											action: () => favoriteManager.unstar(favorite.path, favorite.kind)
+										}
+									]}
+									size="xs"
+									fixedHeight={false}
+								/>
+							</div>
+						</div>
 					{/each}
 				</div>
 			{/if}

package/package/components/sidebar/FavoriteMenu.svelte.d.ts

@@ -1,8 +1,36 @@
+export type FavoriteKind = Exclude<NonNullable<StarData['requestBody']>['favorite_kind'], undefined>;
+export declare function getFavoriteHref(path: string, kind: FavoriteKind): string;
+export declare function getFavoriteLabel(path: string, kind: FavoriteKind): string;
+declare class FavoriteManager {
+    current: {
+        label: string;
+        path: string;
+        href: string;
+        kind: FavoriteKind;
+    }[];
+    unstar(path: string, favorite_kind: FavoriteKind, workspaceId?: string): Promise<void>;
+    star(path: string, favorite_kind: FavoriteKind, workspaceId?: string, summary?: string): Promise<void>;
+    isStarred(path: string, favorite_kind: string): boolean;
+}
+export declare const favoriteManager: FavoriteManager;
+export declare function parseFavoriteAsset(path: string): {
+    table: string;
+    schema: string | undefined;
+    assetName: string;
+    path: string;
+    scheme: string;
+};
 import type { MenubarBuilders } from '@melt-ui/svelte';
+import { type StarData } from '../../gen';
 interface Props {
     lightMode?: boolean;
     isCollapsed?: boolean;
-    favoriteLinks?: any;
+    favoriteLinks?: {
+        label: string;
+        href: string;
+        path: string;
+        kind: FavoriteKind;
+    }[];
     createMenu: MenubarBuilders['createMenu'];
 }
 declare const FavoriteMenu: import("svelte").Component<Props, {}, "">;

package/package/components/sidebar/MenuButton.svelte

@@ -1,7 +1,10 @@
 <script module lang="ts">export const sidebarClasses = {
-    text: 'text-primary-inverse dark:text-primary data-[light-mode=true]:text-primary text-xs font-normal',
-    selectedText: 'text-emphasis-inverse dark:text-emphasis text-xs font-normal',
-    hoverBg: 'transition-colors hover:bg-surface-hover-inverse dark:hover:bg-surface-hover data-[light-mode=true]:hover:bg-surface-hover'
+    text: 'text-secondary text-xs font-normal',
+    iconText: 'text-hint',
+    selectedText: 'text-emphasis text-xs font-semibold',
+    sublabelText: 'text-secondary text-2xs font-normal',
+    hoverBg: 'transition-colors hover:bg-surface-hover',
+    selectedBg: 'bg-surface-hover'
 };
 </script>
 
@@ -11,7 +14,7 @@ import { createEventDispatcher } from 'svelte';
 import SideBarNotification from './SideBarNotification.svelte';
 import { conditionalMelt } from '../../utils';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
-let { aiId = undefined, aiDescription = undefined, label = undefined, icon = undefined, iconClasses = null, iconProps = null, isCollapsed, disabled = false, lightMode = false, stopPropagationOnClick = false, shortcut = '', notificationsCount = 0, color = null, trigger = undefined, href = undefined, class: classNames = undefined } = $props();
+let { aiId = undefined, aiDescription = undefined, label = undefined, sublabel = undefined, icon = undefined, iconClasses = null, iconProps = null, isCollapsed, disabled = false, lightMode = false, stopPropagationOnClick = false, shortcut = '', notificationsCount = 0, color = null, trigger = undefined, href = undefined, class: classNames = undefined } = $props();
 let buttonRef = $state(undefined);
 let dispatch = createEventDispatcher();
 // Dynamic component based on whether href is provided
@@ -47,41 +50,71 @@ const Element = href ? 'a' : 'button';
 			{href}
 			data-light-mode={lightMode}
 			class={twMerge(
-				'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
+				'group flex items-center px-2 py-2 font-light rounded-md gap-2 w-full',
 				sidebarClasses.hoverBg,
-				color ? 'border-4' : '',
 				'transition-all relative',
+				sublabel ? 'h-10' : 'h-8',
 				classNames
 			)}
-			style={color ? `border-color: ${color}; padding: 0 calc(0.5rem - 4px);` : ''}
 			use:conditionalMelt={trigger}
+			aria-label={label}
 			title={isCollapsed ? undefined : label}
 			{...$trigger}
 		>
 			{#if icon}
 				{@const SvelteComponent = icon}
-				<SvelteComponent
-					size={16}
-					class={twMerge('flex-shrink-0', sidebarClasses.text, 'transition-colors', iconClasses)}
-					{...iconProps}
-				/>
+				{#if color}
+					<svg width="26" height="26" viewBox="0 0 26 26" class="flex-shrink-0 -ml-[5px]">
+						<circle cx="13" cy="13" r="13" fill={color} />
+						<foreignObject x="5" y="5" width="16" height="16">
+							<SvelteComponent
+								size={16}
+								class={twMerge(sidebarClasses.iconText, 'transition-colors', iconClasses)}
+								{...iconProps}
+							/>
+						</foreignObject>
+					</svg>
+				{:else}
+					<SvelteComponent
+						size={16}
+						class={twMerge('flex-shrink-0', sidebarClasses.iconText, 'transition-colors', iconClasses)}
+						{...iconProps}
+					/>
+				{/if}
 			{/if}
 
-			{#if !isCollapsed && label}
-				<span
-					class={twMerge(
-						'whitespace-pre truncate',
-						sidebarClasses.text,
-						'transition-all',
-						classNames
-					)}
-				>
-					{label}
-					<span class="pl-2 text-xs dark:text-secondary light:text-secondary-inverse font-semibold">
-						{shortcut}
-					</span>
-				</span>
-			{/if}
+			<div class="flex flex-col text-left grow min-w-0">
+				{#if !isCollapsed && label}
+					<div
+						class={twMerge(
+							'whitespace-pre truncate w-full',
+							sidebarClasses.text,
+							'transition-all',
+							classNames
+						)}
+						title={label}
+					>
+						{label}
+						<span
+							class="pl-2 text-xs text-secondary font-semibold"
+						>
+							{shortcut}
+						</span>
+					</div>
+				{/if}
+
+				{#if sublabel}
+					<div
+						class={twMerge(
+							'whitespace-pre truncate w-full',
+							sidebarClasses.sublabelText,
+							'transition-all',
+							classNames
+						)}
+						title={sublabel}>{sublabel}</div
+					>
+				{/if}
+			</div>
 
 			{#if isCollapsed && notificationsCount > 0}
 				<div class="absolute translate-x-1/2 translate-y-1/2 -top-2 right-1 flex h-fit w-fit">

package/package/components/sidebar/MenuButton.svelte.d.ts

@@ -1,13 +1,17 @@
 export declare const sidebarClasses: {
     text: string;
+    iconText: string;
     selectedText: string;
+    sublabelText: string;
     hoverBg: string;
+    selectedBg: string;
 };
 import type { MenubarMenuElements } from '@melt-ui/svelte';
 interface Props {
     aiId?: string | undefined;
     aiDescription?: string | undefined;
     label?: string | undefined;
+    sublabel?: string | undefined;
     icon?: any | undefined;
     iconClasses?: string | null;
     iconProps?: any | null;

package/package/components/sidebar/MenuLink.svelte

@@ -31,22 +31,23 @@ navigating.subscribe(() => {
 			}}
 			{onclick}
 			class={twMerge(
-				'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8 gap-3',
+				'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8 gap-2',
 				isSelected
-					? 'bg-surface-selected-inverse dark:bg-surface-selected'
+					? sidebarClasses.selectedBg
 					: sidebarClasses.hoverBg,
 				isSelected ? sidebarClasses.selectedText : sidebarClasses.text,
 				classNames
 			)}
 			data-light-mode={lightMode}
 			target={href.includes('http') ? '_blank' : null}
+			aria-label={label}
 			title={isCollapsed ? undefined : label}
 			use:conditionalMelt={item}
 			{...$item}
 		>
 			{#if icon}
 				{@const SvelteComponent = icon}
-				<SvelteComponent size={16} class={twMerge('flex-shrink-0 transition-all')} />
+				<SvelteComponent size={16} class={twMerge('flex-shrink-0 transition-all', isSelected ? sidebarClasses.selectedText : sidebarClasses.iconText)} />
 			{/if}
 
 			{#if !isCollapsed}

package/package/components/sidebar/MultiplayerMenu.svelte

@@ -80,7 +80,7 @@ function showActivity(url) {
 
 {#if connected}
 	<div class="divide-gray-100 border-t" role="none">
-		<div class="px-2.5 text-xs font-semibold mt-1">Live activity</div>
+		<div class="px-2 text-xs text-secondary font-normal mt-1">Live activity</div>
 		<div class="py-1 flex flex-col gap-y-1 max-h-48 overflow-auto" transition:slide>
 			{#each Object.entries($awarenessStore ?? {}) as [user, url]}
 				<div class="inline-flex gap-2 px-2 items-center">
@@ -89,12 +89,12 @@ function showActivity(url) {
 						title={user}
 					>
 						<span class="text-sm font-medium leading-none text-white"
-							>{user.substring(0, 2).toLocaleUpperCase()}</span
+							>{user?.substring(0, 2).toLocaleUpperCase()}</span
 						>
 					</span>
 					<div class="flex flex-col">
-						<span class="text-sm text-primary truncate">{user}</span>
-						<span class="text-xs text-primary truncate">{showActivity(url)}</span>
+						<span class="text-xs text-primary truncate">{user}</span>
+						<span class="text-2xs text-secondary truncate">{showActivity(url ?? '')}</span>
 					</div>
 				</div>
 			{/each}