windmill-components 1.558.3 → 1.596.0

package/package/components/tutorials/app/AppTutorial.svelte

@@ -1,247 +0,0 @@
-<script lang="ts">import { insertNewGridItem, appComponentFromType } from '../../apps/editor/appUtils';
-import { push } from '../../../history.svelte';
-import { getContext } from 'svelte';
-import Tutorial from '../Tutorial.svelte';
-import { clickButtonBySelector, clickFirstButtonBySelector, connectInlineRunnableInputToComponentOutput, isAppTainted, updateInlineRunnableCode } from '../utils';
-import { updateProgress } from '../../../tutorialUtils';
-import {} from 'driver.js';
-import { wait } from '../../../utils';
-export let name;
-export let index;
-let tutorial = undefined;
-const { app, selectedComponent, focusedGrid } = getContext('AppViewerContext');
-const { history } = getContext('AppEditorContext');
-export function runTutorial() {
-    tutorial?.runTutorial();
-}
-function addComponent(appComponentType) {
-    push(history, $app);
-    const id = insertNewGridItem($app, appComponentFromType(appComponentType), $focusedGrid);
-    $selectedComponent = [id];
-    $app = $app;
-}
-</script>
-
-<Tutorial
-	bind:this={tutorial}
-	{index}
-	{name}
-	on:error
-	on:skipAll
-	tainted={isAppTainted($app)}
-	getSteps={(driver) => {
-		const steps: DriveStep[] = [
-			{
-				popover: {
-					title: 'App editor tutorial',
-					description:
-						'This tutorial will show you how to use the App editor, add components, background scripts and connect them.',
-					onNextClick: () => {
-						addComponent('textinputcomponent')
-
-						setTimeout(() => {
-							clickButtonBySelector('#app-editor-component-library-tab')
-						})
-
-						setTimeout(() => {
-							driver.moveNext()
-						})
-					}
-				}
-			},
-
-			{
-				element: '#app-editor-component-list',
-				popover: {
-					title: 'Components panel',
-					description:
-						'This is the components panel. Here you can add components to your app. Components are the building blocks of your app. You can add as many components as you want.'
-				}
-			},
-			{
-				element: '#displaycomponent',
-				popover: {
-					title: 'Adding a component',
-					description:
-						'Click on a component to add it to your app. Here we will add a display component.',
-					onNextClick: () => {
-						if (!$selectedComponent?.includes('e')) {
-							addComponent('displaycomponent')
-						}
-
-						setTimeout(() => {
-							driver.moveNext()
-						})
-					}
-				}
-			},
-
-			{
-				element: '.wm-app-viewer',
-				popover: {
-					title: 'App canvas',
-					description:
-						'In the canvas, you can move components around, resize them, and organize them in grids. In this example, we already added a text input and a display component.',
-					onNextClick: () => {
-						driver.moveNext()
-					}
-				}
-			},
-
-			{
-				element: '#component-input',
-				popover: {
-					title: 'Component input',
-					description:
-						'There are several ways to set the input of a component. It can be static, the result of a JS expression, connected to the output of another component, or the result of an inline runnable. Here we will create an inline runnable that will convert the text to uppercase.',
-					onNextClick: () => {
-						clickFirstButtonBySelector('#component-input')
-						setTimeout(() => {
-							driver.moveNext()
-						})
-					}
-				}
-			},
-
-			{
-				element: '#data-source-compute',
-				popover: {
-					title: 'Compute',
-					description: 'Click on the compute button to create a new inline runnable.',
-					onNextClick: () => {
-						clickButtonBySelector('#data-source-compute')
-						setTimeout(() => {
-							driver.moveNext()
-						})
-					}
-				}
-			},
-
-			{
-				element: '#app-editor-create-inline-script',
-				popover: {
-					title: 'Create an inline script',
-					description: "Let's create an inline script.",
-					onNextClick: () => {
-						clickButtonBySelector('#app-editor-create-inline-script')
-						setTimeout(() => driver.moveNext())
-					}
-				}
-			},
-
-			{
-				element: '#app-editor-empty-runnable',
-				popover: {
-					title: 'Choose a language',
-					description:
-						'You can choose the language of your runnable. There are two type of runnables: frontend and backend.'
-				}
-			},
-
-			{
-				element: '#app-editor-backend-runnables',
-				popover: {
-					title: 'Backend runnables',
-					description:
-						'Backend runnables are scripts that are executed on the server. They can be used to perform tasks that are not possible to be performed on the client. For example, you can use backend runnables to send emails, perform database operations, etc.'
-				}
-			},
-			{
-				element: '#app-editor-frontend-runnables',
-				popover: {
-					title: 'Frontend runnables',
-					description:
-						'Frontend scripts are executed in the browser and can manipulate the app context directly. You can also interact with components using component controls.'
-				}
-			},
-			{
-				element: '#create-deno-script',
-				onHighlighted: () => {
-					document.querySelector('#schema-plug-x')?.parentElement?.classList.remove('opacity-0')
-				},
-				popover: {
-					title: 'Create a deno script',
-					description:
-						"Let's create a simple deno script. For the sake of this tutorial, we will create a script that converts the text to uppercase.",
-					onNextClick: async () => {
-						clickButtonBySelector('#create-deno-script')
-						await wait(50)
-						if ($selectedComponent?.[0]) {
-							updateInlineRunnableCode(
-								$app,
-								$selectedComponent[0],
-								'export function main(x: string) {\n  return x?.toLocaleUpperCase();\n}'
-							)
-						}
-
-						driver.moveNext()
-					}
-				}
-			},
-			{
-				element: '#schema-plug-x',
-				onHighlighted: () => {
-					document.querySelector('#schema-plug-x')?.parentElement?.classList.remove('opacity-0')
-				},
-				popover: {
-					title: 'Connect the function input',
-					description:
-						"The function we created has an string input 'x'. We can connect the output of the text component to it.",
-					onNextClick: () => {
-						clickButtonBySelector('#schema-plug-x')
-						setTimeout(() => {
-							driver.moveNext()
-						})
-					}
-				}
-			},
-			{
-				element: '#connect-output-a',
-				popover: {
-					title: 'Select the output',
-					description: 'Open the output selector of the text input component.',
-					onNextClick: () => {
-						clickButtonBySelector('#connect-output-a')
-						setTimeout(() => {
-							driver.moveNext()
-						})
-					}
-				}
-			},
-			{
-				element: '.component-output-viewer-a li *:has(> button[title="result"])',
-				popover: {
-					title: 'Select the output',
-					description: "Let's select the result of the text input component.",
-					onNextClick: () => {
-						setTimeout(async () => {
-							clickButtonBySelector('.component-output-viewer-a li button[title="result"]')
-							driver.moveNext()
-						})
-					}
-				}
-			},
-			{
-				element: '.wm-app-viewer',
-				popover: {
-					title: "Let's test out the app !",
-					description:
-						'We can now type in the text input and see the result in the display component',
-					onNextClick: () => {
-						connectInlineRunnableInputToComponentOutput($app, 'e', 'x', 'd', 'result', 'integer')
-
-						$app = $app
-
-						updateProgress(7)
-
-						setTimeout(() => {
-							driver.moveNext()
-						})
-					}
-				}
-			}
-		]
-
-		return steps
-	}}
-/>

package/package/defaults.d.ts

@@ -1,5 +0,0 @@
-export declare const SELECT_INPUT_DEFAULT_STYLE: {
-    readonly inputStyles: "border-radius: 0;";
-    readonly containerStyles: "--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem;";
-    readonly containerStylesDark: "--height: 34px; --padding: 0 0 0 8px; border-color: #4b5563; --font-size: 0.875rem; --disabled-border-color: #3e4c60; --background: #2e3440; --disabled-background: transparent; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;";
-};

package/package/defaults.js

@@ -1,5 +0,0 @@
-export const SELECT_INPUT_DEFAULT_STYLE = {
-    inputStyles: 'border-radius: 0;',
-    containerStyles: '--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem;',
-    containerStylesDark: '--height: 34px; --padding: 0 0 0 8px; border-color: #4b5563; --font-size: 0.875rem; --disabled-border-color: #3e4c60; --background: #2e3440; --disabled-background: transparent; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;'
-};

package/package/utils.d.ts

@@ -1,240 +0,0 @@
-import { type UserExt } from './stores';
-import { sendUserToast } from './toast';
-import type { Job, RunnableKind, Script, ScriptLang } from './gen';
-import type { EnumType, SchemaProperty } from './common';
-import type { Schema } from './common';
-export { sendUserToast };
-import type { AnyMeltElement } from '@melt-ui/svelte';
-import type { RunsSelectionMode } from './components/runs/RunsBatchActionsDropdown.svelte';
-import type { TriggerKind } from './components/triggers';
-export declare namespace OpenApi {
-    enum OpenApiVersion {
-        V2 = 0,
-        V3 = 1,
-        V3_1 = 2
-    }
-    function isV2(doc: OpenAPI.Document): doc is OpenAPIV2.Document;
-    function isV3(doc: OpenAPI.Document): doc is OpenAPIV3.Document;
-    function isV3_1(doc: OpenAPI.Document): doc is OpenAPIV3_1.Document;
-    function getOpenApiVersion(version: string): OpenApiVersion;
-    /**
-     * Parses and validates an OpenAPI specification provided as a string in either JSON or YAML format.
-     *
-     * @param api - A string containing a valid OpenAPI specification in JSON or YAML format.
-     * @returns A promise that resolves to a tuple:
-     *   - The first element is the validated OpenAPI document.
-     *   - The second element is the detected OpenAPI version (2, 3.0, or 3.1).
-     *
-     * @throws Will throw an error if the specification is invalid or cannot be parsed.
-     */
-    function parse(api: string): Promise<[OpenAPI.Document, OpenApiVersion]>;
-}
-export declare function isJobCancelable(j: Job): boolean;
-export declare function isJobReRunnable(j: Job): boolean;
-export declare const WORKER_NAME_PREFIX = "wk";
-export declare function isJobSelectable(selectionType: RunsSelectionMode): (j: Job) => boolean;
-export declare function escapeHtml(unsafe: string): string;
-export declare function validateUsername(username: string): string;
-export declare function parseQueryParams(url: string | undefined): Record<string, string>;
-export declare function displayDateOnly(dateString: string | Date | undefined): string;
-export declare function retrieveCommonWorkerPrefix(workerName: string): string;
-export declare function subtractDaysFromDateString(dateString: string | undefined, days: number): string | undefined;
-export declare function displayDate(dateString: string | Date | undefined, displaySecond?: boolean, displayDate?: boolean): string;
-export declare function displayTime(dateString: string | Date | undefined): string;
-export declare function displaySize(sizeInBytes: number | undefined): string | undefined;
-export declare function msToSec(ms: number | undefined, maximumFractionDigits?: number): string;
-export declare function removeTriggerKindIfUnused(length: number, triggerKind: TriggerKind, usedTriggerKinds: string[]): string[];
-export declare function msToReadableTime(ms: number | undefined, maximumFractionDigits?: number): string;
-export declare function msToReadableTimeShort(ms: number | undefined, maximumFractionDigits?: number): string;
-export declare function getToday(): Date;
-export declare function truncateHash(hash: string): string;
-export declare function sleep(ms: number): Promise<void>;
-export declare function addIfNotExists<T>(e: T, arr: Array<T> | undefined): Array<T>;
-export declare function validatePassword(password: string): boolean;
-interface ClickOutsideOptions {
-    capture?: boolean;
-    exclude?: (() => Promise<HTMLElement[]>) | HTMLElement[] | undefined;
-    stopPropagation?: boolean;
-    customEventName?: string;
-    eventToListenName?: 'click' | 'pointerdown';
-    onClickOutside?: (event: MouseEvent) => void;
-}
-export declare function clickOutside(node: Node, options?: ClickOutsideOptions | boolean): {
-    destroy(): void;
-    update(newOptions: ClickOutsideOptions | boolean): void;
-};
-export declare function pointerDownOutside(node: Node, options?: ClickOutsideOptions): {
-    destroy(): void;
-    update(newOptions: ClickOutsideOptions): void;
-};
-export interface DropdownItem {
-    displayName: string;
-    eventName?: string;
-    action?: ((event?: MouseEvent) => Promise<void>) | ((event?: MouseEvent) => void);
-    href?: string;
-    separatorTop?: boolean;
-    separatorBottom?: boolean;
-    type?: 'action' | 'delete';
-    disabled?: boolean;
-    icon?: any | undefined;
-}
-export declare const DELETE: "delete";
-export declare function emptySchema(): Schema;
-export declare function simpleSchema(): Schema;
-export declare function removeItemAll<T>(arr: T[], value: T): T[];
-export declare function emptyString(str: string | undefined | null): boolean;
-export declare function emptyStringTrimmed(str: string | undefined | null): boolean;
-export declare function defaultIfEmptyString(str: string | undefined, dflt: string): string;
-export declare function removeKeysWithEmptyValues(obj: any): any;
-export declare function allTrue(dict: {
-    [id: string]: boolean;
-}): boolean;
-export declare function elapsedSinceSecs(date: string): number;
-export declare function pathIsEmpty(path: string): boolean;
-export declare function encodeState(state: any): string;
-export declare function decodeState(query: string): any;
-export declare function itemsExists<T>(arr: T[] | undefined, item: T): boolean;
-export declare function groupBy<K, V>(items: V[], toGroup: (t: V) => K, toSort: (t: V) => string, dflts?: K[]): [K, V[]][];
-export declare function removeMarkdown(text: string): string;
-export declare function truncate(s: string, n: number, suffix?: string): string;
-export declare function truncateRev(s: string, n: number, prefix?: string): string;
-export declare function isString(value: any): value is string | String;
-export type InputCat = 'string' | 'email' | 'number' | 'boolean' | 'list' | 'resource-object' | 'enum' | 'date' | 'base64' | 'resource-string' | 'object' | 'sql' | 'yaml' | 'currency' | 'oneOf' | 'dynamic' | 'json-schema' | 'ai-provider';
-export declare namespace DynamicInput {
-    type HelperScript = {
-        source: 'deployed';
-        path: string;
-        runnable_kind: RunnableKind;
-    } | {
-        source: 'inline';
-        code: string;
-        lang: ScriptLang;
-    };
-    const generatePythonFnTemplate: (functionName: string) => string;
-    const generateJsFnTemplate: (functionName: string) => string;
-    const generateDefaultTemplateFn: (functionName: string, lang: ScriptLang) => string;
-    const getGenerateTemplateFn: (lang: ScriptLang) => (functionName: string) => string;
-    const isDynInputFormat: (format?: string) => boolean;
-}
-export declare function setInputCat(type: string | undefined, format: string | undefined, itemsType: string | undefined, enum_: any, contentEncoding: string | undefined): InputCat;
-export declare function formatCron(inp: string): string;
-export declare function scriptLangArrayToCommaList(languages: ScriptLang[]): string;
-export declare function cronV1toV2(inp: string): string;
-export declare function classNames(...classes: Array<string | undefined>): string;
-export declare function download(filename: string, fileContent: string, mimeType?: string): void;
-export declare function copyToClipboard(value?: string, sendToast?: boolean): Promise<boolean>;
-export declare function pluralize(quantity: number, word: string, customPlural?: string): string;
-export declare function addDeterminant(word: string): string;
-export declare function capitalize(word: string): string;
-export declare function addWhitespaceBeforeCapitals(word?: string): string;
-export declare function isObject(obj: any): obj is Record<string, any>;
-export declare function debounce(func: (...args: any[]) => any, wait: number): {
-    debounced: (...args: any[]) => void;
-    clearDebounce: () => void;
-};
-export declare function throttle<T>(func: (...args: any[]) => T, wait: number): (...args: any[]) => void;
-export declare function isMac(): boolean;
-export declare function getModifierKey(): string;
-export declare function isValidHexColor(color: string): boolean;
-export declare function sortObject<T>(o: T & object): T;
-export declare function sortArray<T>(array: T[], compareFn?: (a: T, b: T) => number): T[];
-export declare function generateRandomString(len?: number): string;
-export declare function deepMergeWithPriority<T>(target: T, source: T): T;
-export declare function canWrite(path: string, extra_perms: Record<string, boolean>, user?: UserExt): boolean;
-export declare function isOwner(path: string, user: UserExt | undefined, workspace: string | undefined): boolean;
-export declare function isObviousOwner(path: string, user?: UserExt): boolean;
-export declare function extractCustomProperties(styleStr: string): string;
-export declare function computeSharableHash(args: any): string;
-export declare function toCamel(s: string): string;
-export declare function cleanExpr(expr: string | undefined): string;
-export declare function isCodeInjection(expr: string | undefined): boolean;
-export declare function urlParamsToObject(params: URLSearchParams): Record<string, string>;
-export declare function tryEvery({ tryCode, timeoutCode, interval, timeout }: {
-    tryCode: () => Promise<any>;
-    timeoutCode: () => void;
-    interval: number;
-    timeout: number;
-}): Promise<void>;
-export declare function roughSizeOfObject(object: object | string | any): number;
-export type Value = {
-    language?: Script['language'];
-    content?: string;
-    path?: string;
-    draft_only?: boolean;
-    value?: any;
-    draft?: Value;
-    [key: string]: any;
-};
-export declare function replaceFalseWithUndefined(obj: any): any;
-export declare function cleanValueProperties(obj: Value): any;
-export declare function orderedJsonStringify(obj: any, space?: string | number): string;
-export declare function orderedYamlStringify(obj: any): string;
-export declare function computeShow(argName: string, expr: string | undefined, args: any): any;
-export declare function urlize(input: string, formatter: 'html' | 'md'): string;
-export declare function storeLocalSetting(name: string, value: string | undefined): void;
-export declare function getLocalSetting(name: string): string | null | undefined;
-export declare function computeKind(enum_: EnumType, contentEncoding: 'base64' | 'binary' | undefined, pattern: string | undefined, format: string | undefined): 'base64' | 'none' | 'pattern' | 'enum' | 'resource' | 'format' | 'date-time';
-export declare function shouldDisplayPlaceholder(type: string | undefined, format: string | undefined, enum_: EnumType, contentEncoding: 'base64' | 'binary' | undefined, pattern: string | undefined, extra: Record<string, any> | undefined): boolean;
-export declare function getSchemaFromProperties(properties: {
-    [name: string]: SchemaProperty;
-}): Schema;
-export declare function validateFileExtension(ext: string): boolean;
-export declare function isFlowPreview(job_kind: Job['job_kind'] | undefined): job_kind is "flowpreview" | "flownode";
-export declare function isNotFlow(job_kind: Job['job_kind'] | undefined): job_kind is "script" | "aiagent" | "identity" | "preview" | "dependencies" | "flowdependencies" | "appdependencies" | "script_hub" | "deploymentcallback" | "flowscript" | "appscript" | undefined;
-export declare function isScriptPreview(job_kind: Job['job_kind'] | undefined): job_kind is "preview" | "flowscript" | "appscript";
-export declare function conditionalMelt(node: HTMLElement, meltItem: AnyMeltElement | undefined): void | import("svelte/action").ActionReturn<undefined, Record<never, any>>;
-export type Item = {
-    displayName: string;
-    action?: (e: MouseEvent) => void;
-    icon?: any;
-    iconColor?: string;
-    href?: string;
-    hrefTarget?: '_blank' | '_self' | '_parent' | '_top';
-    disabled?: boolean;
-    type?: 'action' | 'delete';
-    hide?: boolean | undefined;
-    extra?: Snippet;
-    id?: string;
-};
-export declare function isObjectTooBig(obj: any): boolean;
-export declare function localeConcatAnd(items: string[]): string;
-export declare function formatDate(dateString: string | undefined): string;
-export declare function formatDateShort(dateString: string | undefined): string;
-export declare function toJsonStr(result: any): string;
-export declare function getOS(): "Windows" | "macOS" | "iOS" | "Android" | "Linux" | "Unknown OS";
-import { type ClassValue } from 'clsx';
-import type { Snippet } from 'svelte';
-import { OpenAPIV2, type OpenAPI, type OpenAPIV3, type OpenAPIV3_1 } from 'openapi-types';
-import type { IPosition } from 'monaco-editor';
-export declare function cn(...inputs: ClassValue[]): string;
-export type StateStore<T> = {
-    val: T;
-};
-export type ReadFieldsRecursivelyOptions = {
-    excludeField?: string[];
-};
-export declare function readFieldsRecursively(obj: any, options?: ReadFieldsRecursivelyOptions): void;
-export declare function reorder<T>(items: T[], oldIndex: number, newIndex: number): T[];
-export declare function scroll_into_view_if_needed_polyfill(elem: Element, centerIfNeeded?: boolean): IntersectionObserver;
-export declare function clone<T>(t: T): T;
-export declare const editorPositionMap: Record<string, IPosition>;
-export type S3Uri = `s3://${string}/${string}`;
-export type S3Object = S3Uri | {
-    s3: string;
-    storage?: string;
-};
-export declare function parseS3Object(s3Object: S3Object): {
-    s3: string;
-    storage?: string;
-};
-export declare function formatS3Object(s3Object: S3Object): S3Uri;
-export declare function isS3Uri(uri: string): uri is S3Uri;
-export declare function uniqueBy<T>(array: T[], key: (t: T) => any): T[];
-export declare function pruneNullishArray<T>(array: (T | null | undefined)[]): T[];
-export declare function assert(msg: string, condition: boolean, value?: any): void;
-export declare function createCache<Keys extends Record<string, any>, T, InitialKeys extends Keys = Keys>(compute: (keys: Keys) => T, params?: {
-    maxSize?: number;
-    initial?: InitialKeys;
-    invalidateMs?: number;
-}): (keys: Keys) => T;
-export declare function wait(ms: number): Promise<unknown>;