From b0248ffcadc5fac8c3cd05ee65ac7080893e10b8 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Fri, 29 Nov 2024 16:44:00 +0100 Subject: [PATCH] app nits (#4820) * all * all --- .../src/lib/components/AppConnectInner.svelte | 14 +- frontend/src/lib/components/DiffEditor.svelte | 5 - frontend/src/lib/components/Login.svelte | 14 +- .../components/buttons/AppSchemaForm.svelte | 2 +- .../components/display/AppNavbarItem.svelte | 2 +- .../helpers/RunnableComponent.svelte | 4 +- .../components/inputs/AppS3FileInput.svelte | 2 +- .../components/apps/editor/AppEditor.svelte | 32 +- .../apps/editor/AppEditorHeader.svelte | 119 ++-- .../components/apps/editor/AppPreview.svelte | 9 +- .../apps/editor/AppReportsDrawer.svelte | 669 +---------------- .../apps/editor/AppReportsDrawerInner.svelte | 671 ++++++++++++++++++ .../EmptyInlineScript.svelte | 2 +- .../InlineScriptEditor.svelte | 2 +- .../editor/settingsPanel/GridNavbar.svelte | 2 +- frontend/src/lib/components/apps/types.ts | 2 +- .../lib/components/wizards/AppPicker.svelte | 8 +- .../(root)/(logged)/apps/add/+page.svelte | 14 +- .../(logged)/apps/edit/[...path]/+page.svelte | 14 +- .../(logged)/apps/get/[...path]/+page.svelte | 2 +- 20 files changed, 822 insertions(+), 767 deletions(-) create mode 100644 frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte diff --git a/frontend/src/lib/components/AppConnectInner.svelte b/frontend/src/lib/components/AppConnectInner.svelte index 3b34519fd3..bd10721792 100644 --- a/frontend/src/lib/components/AppConnectInner.svelte +++ b/frontend/src/lib/components/AppConnectInner.svelte @@ -180,11 +180,15 @@ function handleStorageEvent(event) { if (event.key === 'oauth-callback') { - processPopupData(event.newValue) - console.log('OAuth from storage', event.newValue) - // Clean up - localStorage.removeItem('oauth-callback') - window.removeEventListener('storage', handleStorageEvent) + try { + processPopupData(JSON.parse(event.newValue)) + console.log('OAuth from storage', event.newValue) + // Clean up + localStorage.removeItem('oauth-callback') + window.removeEventListener('storage', handleStorageEvent) + } catch (e) { + console.error('Error processing oauth-callback', e) + } } else { console.log('Storage event', event.key) } diff --git a/frontend/src/lib/components/DiffEditor.svelte b/frontend/src/lib/components/DiffEditor.svelte index 107f8a160d..9010a35ec5 100644 --- a/frontend/src/lib/components/DiffEditor.svelte +++ b/frontend/src/lib/components/DiffEditor.svelte @@ -54,10 +54,7 @@ defaultModified !== undefined && defaultLang !== undefined ) { - console.log('SETUP') setupModel(defaultLang, defaultOriginal, defaultModified, defaultModifiedLang) - } else { - console.log('NO SETUP', defaultOriginal, defaultModified, defaultLang) } } @@ -80,7 +77,6 @@ } export function setOriginal(code: string) { - console.log('setOriginal', code) diffEditor?.getModel()?.original?.setValue(code) defaultOriginal = code } @@ -99,7 +95,6 @@ } export function show(): void { - console.log('show') open = true } export function hide(): void { diff --git a/frontend/src/lib/components/Login.svelte b/frontend/src/lib/components/Login.svelte index 5f2b7bb1fc..ae5edc9c2a 100644 --- a/frontend/src/lib/components/Login.svelte +++ b/frontend/src/lib/components/Login.svelte @@ -199,11 +199,15 @@ function handleStorageEvent(event) { if (event.key === 'oauth-success') { - processPopupData(event.newValue) - console.log('oauth-success from storage') - // Clean up - localStorage.removeItem('oauth-success') - window.removeEventListener('storage', handleStorageEvent) + try { + processPopupData(JSON.parse(event.newValue)) + console.log('oauth-success from storage') + // Clean up + localStorage.removeItem('oauth-success') + window.removeEventListener('storage', handleStorageEvent) + } catch (e) { + console.error('Could not process oauth-success from storage', e) + } } else { console.log('Storage event', event.key) } diff --git a/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte index a77d708e13..5b55bd36f7 100644 --- a/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte +++ b/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte @@ -159,7 +159,7 @@ bind:this={schemaForm} displayType={Boolean(resolvedConfig.displayType)} largeGap={Boolean(resolvedConfig.largeGap)} - appPath={defaultIfEmptyString(appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`)} + appPath={defaultIfEmptyString($appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`)} {computeS3ForceViewerPolicies} {workspace} {css} diff --git a/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte b/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte index 6145d87919..ed88aa7ffd 100644 --- a/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte +++ b/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte @@ -66,7 +66,7 @@ $: !initialized && resolvedPath && initSelection() function getButtonProps(resolvedPath: string | undefined) { - if (appPath && resolvedPath?.includes(appPath)) { + if ($appPath && resolvedPath?.includes($appPath)) { return { onClick: () => { output.result.set({ currentPath: resolvedPath ?? '' }) diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte index 286c5ac573..9119282752 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte @@ -392,7 +392,7 @@ const uuid = await AppService.executeComponent({ workspace, - path: defaultIfEmptyString(appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`), + path: defaultIfEmptyString($appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`), requestBody }) if (isEditor) { @@ -763,7 +763,7 @@
{/if} diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte index 6fdc808baf..66b2d3e009 100644 --- a/frontend/src/lib/components/apps/editor/AppEditor.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte @@ -28,7 +28,6 @@ import ComponentList from './componentsPanel/ComponentList.svelte' import ContextPanel from './contextPanel/ContextPanel.svelte' - import { page } from '$app/stores' import ItemPicker from '$lib/components/ItemPicker.svelte' import VariableEditor from '$lib/components/VariableEditor.svelte' import { VariableService, type Job, type Policy } from '$lib/gen' @@ -51,7 +50,6 @@ import StylePanel from './settingsPanel/StylePanel.svelte' import type DiffDrawer from '$lib/components/DiffDrawer.svelte' import RunnableJobPanel from './RunnableJobPanel.svelte' - import { goto, replaceState } from '$app/navigation' import HideButton from './settingsPanel/HideButton.svelte' import AppEditorBottomPanel from './AppEditorBottomPanel.svelte' import panzoom from 'panzoom' @@ -73,6 +71,14 @@ } | undefined = undefined export let version: number | undefined = undefined + export let newApp: boolean = false + export let newPath: string | undefined = undefined + export let replaceStateFn: (path: string) => void = (path: string) => + window.history.replaceState(null, '', path) + export let gotoFn: (path: string, opt?: Record | undefined) => void = ( + path: string, + opt?: Record + ) => window.history.pushState(null, '', path) migrateApp(app) @@ -118,8 +124,8 @@ email: $userStore?.email, groups: $userStore?.groups, username: $userStore?.username, - query: Object.fromEntries($page.url.searchParams.entries()), - hash: $page.url.hash.substring(1), + query: Object.fromEntries(new URL(window.location.href).searchParams.entries()), + hash: window.location.hash.substring(1), workspace: $workspaceStore, mode: 'editor', summary: $summaryStore, @@ -135,6 +141,13 @@ $secondaryMenuRightStore.isOpen = false $secondaryMenuLeftStore.isOpen = false + let writablePath = writable(path) + $: path && onPathChange() + + function onPathChange() { + writablePath.set(path) + } + setContext('AppViewerContext', { worldStore, app: appStore, @@ -146,7 +159,7 @@ bgRuns: writable([]), breakpoint, runnableComponents: writable({}), - appPath: path, + appPath: writablePath, workspace: $workspaceStore ?? '', onchange: () => saveFrontendDraft(), isEditor: true, @@ -167,7 +180,7 @@ cssEditorOpen, previewTheme, debuggingComponents: writable({}), - replaceStateFn: (path) => replaceState(path, $page.state), + replaceStateFn: replaceStateFn, policy: policy, recomputeAllContext: writable({ loading: false, @@ -814,6 +827,8 @@ {#if !$userStore?.operator} {#if $appStore} showLeftPanel()} on:showRightPanel={() => showRightPanel()} on:hideLeftPanel={() => hideLeftPanel()} @@ -851,8 +867,8 @@ isEditor {context} noBackend={false} - replaceStateFn={(path) => replaceState(path, $page.state)} - gotoFn={(path, opt) => goto(path, opt)} + {replaceStateFn} + {gotoFn} />
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte index 3ad0398853..82e47a0473 100644 --- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte @@ -1,6 +1,4 @@ - (open = false)} - title="Schedule Reports" - tooltip="Send a PDF or PNG preview of any app at a given schedule" - documentationLink="https://www.windmill.dev/docs/apps/schedule_reports" - > -
- { - if (appReportingEnabled) { - disableAppReporting() - } else { - await enableAppReporting() - sendUserToast('App reporting enabled') - } - }} - disabled={disabled && !appReportingEnabled} - /> -
- - -
- Send a PDF or PNG preview of the app at a given schedule. Enabling this feature will create - a flow and a schedule in your workspace. -

- For the flow to be executed, you need to set the WORKER_GROUP environment variable of one of - your workers to "reports" or add the tag "chromium" to one of your worker groups. - - -
- -
- -
-
- -
-
- -
-
- -
- -
- - {#if !$enterpriseLicense} - Custom - {/if} - Slack{!$enterpriseLicense ? ' (EE only)' : ''} - Discord{!$enterpriseLicense ? ' (EE only)' : ''} - -
Email{!$enterpriseLicense ? ' (EE only)' : ''} -
- - {#if $enterpriseLicense} - Custom - {/if} - - {#if selectedTab === 'custom'} -
- { - customPath = ev.detail.path - }} - initialPath={customPath} - allowRefresh - /> -
-
- Pick a script that does whatever with the PDF/PNG report. - -
- - The script chosen is passed the parameters `screenshot: string`, `kind: 'pdf' | 'png'`, - `app_path: string` where `screenshot` is the base64 encoded PDF/PNG report, `kind` is - the type of the screenshot, and `app_path` is the path of the app being reported. -
- {/if} - {#if selectedTab === 'slack'} -
- {#if isSlackConnectedWorkspace} - - {:else} - -
-

- The workspace needs to be connected to Slack to use this feature. You can configure it here. -

-
- - {/if} -
- {/if} -
- {#if selectedTab !== 'custom' || customPath !== undefined} - {#key selectedTab + JSON.stringify(customPathSchema ?? {})} - - {/key} - {/if} -
- -
-
- + diff --git a/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte b/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte new file mode 100644 index 0000000000..cedf5255d3 --- /dev/null +++ b/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte @@ -0,0 +1,671 @@ + + + (open = false)} + title="Schedule Reports" + tooltip="Send a PDF or PNG preview of any app at a given schedule" + documentationLink="https://www.windmill.dev/docs/apps/schedule_reports" + > +
+ { + if (appReportingEnabled) { + disableAppReporting() + } else { + await enableAppReporting() + sendUserToast('App reporting enabled') + } + }} + disabled={disabled && !appReportingEnabled} + /> +
+ + +
+ Send a PDF or PNG preview of the app at a given schedule. Enabling this feature will create a + flow and a schedule in your workspace. +

+ For the flow to be executed, you need to set the WORKER_GROUP environment variable of one of your + workers to "reports" or add the tag "chromium" to one of your worker groups. + + +
+ +
+ +
+
+ +
+
+ +
+
+ +
+ +
+ + {#if !$enterpriseLicense} + Custom + {/if} + Slack{!$enterpriseLicense ? ' (EE only)' : ''} + Discord{!$enterpriseLicense ? ' (EE only)' : ''} + +
Email{!$enterpriseLicense ? ' (EE only)' : ''} +
+ + {#if $enterpriseLicense} + Custom + {/if} + + {#if selectedTab === 'custom'} +
+ { + customPath = ev.detail.path + }} + initialPath={customPath} + allowRefresh + /> +
+
+ Pick a script that does whatever with the PDF/PNG report. + +
+ + The script chosen is passed the parameters `screenshot: string`, `kind: 'pdf' | 'png'`, + `app_path: string` where `screenshot` is the base64 encoded PDF/PNG report, `kind` is the + type of the screenshot, and `app_path` is the path of the app being reported. +
+ {/if} + {#if selectedTab === 'slack'} +
+ {#if isSlackConnectedWorkspace} + + {:else} + +
+

+ The workspace needs to be connected to Slack to use this feature. You can configure it here. +

+
+ + {/if} +
+ {/if} +
+ {#if selectedTab !== 'custom' || customPath !== undefined} + {#key selectedTab + JSON.stringify(customPathSchema ?? {})} + + {/key} + {/if} +
+ +
+
+ diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte index f34a80d122..894afac254 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte @@ -59,7 +59,7 @@ } async function newInlineScript(content: string, language: Preview['language'], path: string) { - const fullPath = `${appPath}/${path}` + const fullPath = `${$appPath}/${path}` let schema: Schema = emptySchema() diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte index 639ec77cc6..b001a3a435 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte @@ -59,7 +59,7 @@ $: inlineScript && (inlineScript.path = `${defaultIfEmptyString( - appPath, + $appPath, `u/${$userStore?.username ?? 'unknown'}/newapp` )}/${name?.replaceAll(' ', '_')}`) diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridNavbar.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridNavbar.svelte index e26c95473d..8240d31399 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/GridNavbar.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridNavbar.svelte @@ -181,7 +181,7 @@ {#if resolvedPaths[item.originalIndex]}
Path: {resolvedPaths[item.originalIndex]} - {#if appPath && resolvedPaths[item.originalIndex]?.includes(appPath)} + {#if $appPath && resolvedPaths[item.originalIndex]?.includes($appPath)} Current app diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts index 2bfb798be1..5e6e8f00fa 100644 --- a/frontend/src/lib/components/apps/types.ts +++ b/frontend/src/lib/components/apps/types.ts @@ -214,7 +214,7 @@ export type AppViewerContext = { > > staticExporter: Writable any>> - appPath: string + appPath: Writable workspace: string onchange: (() => void) | undefined isEditor: boolean diff --git a/frontend/src/lib/components/wizards/AppPicker.svelte b/frontend/src/lib/components/wizards/AppPicker.svelte index 60d9149e41..2d08435b81 100644 --- a/frontend/src/lib/components/wizards/AppPicker.svelte +++ b/frontend/src/lib/components/wizards/AppPicker.svelte @@ -35,8 +35,8 @@ loadApps() if (selecteValue === '') { - selecteValue = appPath - value = appPath + selecteValue = $appPath + value = $appPath } }) @@ -56,7 +56,7 @@ items={apps.map((app) => { return { value: app.path, - label: app.path === appPath ? `${app.path} (current app)` : app.path + label: app.path === $appPath ? `${app.path} (current app)` : app.path } })} placeholder="Pick an app" @@ -71,7 +71,7 @@ Current app is not selectable until you have deployed this app at least once. {/if} - {#if appPath && appPath === value} + {#if appPath && $appPath === value}
The current app is selected. If the path changes, the path needs to be updated manually.
diff --git a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte index 56c4ec8921..3a3dc59800 100644 --- a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte @@ -153,7 +153,19 @@ {#if value}
{#key value} - + { + goto(`/apps/edit/${event.detail}`) + }} + {summary} + app={value} + path={''} + {policy} + fromHub={hubId != null} + newApp={true} + replaceStateFn={(path) => replaceState(path, $page.state)} + gotoFn={(path, opt) => goto(path, opt)} + /> {/key}
{/if} diff --git a/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte index 35ba3391db..a0913dd1c8 100644 --- a/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte @@ -5,7 +5,7 @@ import { page } from '$app/stores' import { cleanValueProperties, decodeState, type Value } from '$lib/utils' import { afterNavigate, replaceState } from '$app/navigation' - import { goto } from '$lib/navigation' + import { goto } from '$lib/navigation' import { sendUserToast, type ToastAction } from '$lib/toast' import DiffDrawer from '$lib/components/DiffDrawer.svelte' import type { App } from '$lib/components/apps/types' @@ -202,14 +202,24 @@ {#if app}
{ + goto(`/apps/edit/${event.detail}`) + if (app) { + app.path = event.detail + } + }} on:restore={onRestore} summary={app.summary} app={app.value} - path={app.path} + newPath={app.path} + path={$page.params.path} policy={app.policy} bind:savedApp {diffDrawer} version={app.versions ? app.versions[app.versions.length - 1] : undefined} + newApp={false} + replaceStateFn={(path) => replaceState(path, $page.state)} + gotoFn={(path, opt) => goto(path, opt)} />
{/if} diff --git a/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte index b81f8d0710..1167ab1643 100644 --- a/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte @@ -56,7 +56,7 @@ workspace={$workspaceStore ?? ''} summary={app.summary} app={app.value} - appPath={app.path} + appPath={$page.params.path} {breakpoint} policy={app.policy} isEditor={false}