From 99ec12e10c25bb6a7ae63123c615644b130e4cdb Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Wed, 15 Mar 2023 23:31:35 +0100 Subject: [PATCH] various minor fixes --- backend/windmill-api/src/variables.rs | 5 +- .../src/lib/components/VariableEditor.svelte | 3 +- .../components/apps/editor/GridEditor.svelte | 9 +- .../components/apps/editor/GridViewer.svelte | 30 +++-- .../apps/editor/GridViewerComponent.svelte | 26 ----- .../apps/editor/SubGridEditor.svelte | 9 +- .../apps/editor/component/Component.svelte | 10 +- .../apps/editor/component/components.ts | 105 +++++++----------- .../editor/settingsPanel/TableActions.svelte | 3 +- .../apps/svelte-grid/MoveResize.svelte | 2 +- frontend/src/lib/components/apps/types.ts | 1 - 11 files changed, 72 insertions(+), 131 deletions(-) delete mode 100644 frontend/src/lib/components/apps/editor/GridViewerComponent.svelte diff --git a/backend/windmill-api/src/variables.rs b/backend/windmill-api/src/variables.rs index 599c7ccfba..f94901e388 100644 --- a/backend/windmill-api/src/variables.rs +++ b/backend/windmill-api/src/variables.rs @@ -384,8 +384,9 @@ async fn update_variable( path, w_id ) - .fetch_one(&mut tx) - .await?; + .fetch_optional(&mut tx) + .await? + .flatten(); if let Some(old_v) = v { v = Some(replace_path( diff --git a/frontend/src/lib/components/VariableEditor.svelte b/frontend/src/lib/components/VariableEditor.svelte index dbbedb9a03..9d1f0764ea 100644 --- a/frontend/src/lib/components/VariableEditor.svelte +++ b/frontend/src/lib/components/VariableEditor.svelte @@ -57,7 +57,8 @@ decryptSecret: false }) can_write = - getV.workspace_id == $workspaceStore && canWrite(path, getV.extra_perms ?? {}, $userStore) + getV.workspace_id == $workspaceStore && + canWrite(edit_path, getV.extra_perms ?? {}, $userStore) variable = { value: getV.value ?? '', diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte index 819a418283..a5f4b3ebe2 100644 --- a/frontend/src/lib/components/apps/editor/GridEditor.svelte +++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte @@ -65,12 +65,11 @@ } function selectComponent(id: string) { - // Component selection is handled manually in the Map component (pointerdown - // event propagation is stopped to enable paning). - // Update the 'selectComponent()' function as well when this is updated. - if (!$connectingInput.opened) { - $selectedComponent = id + if ($selectedComponent !== id) { + $selectedComponent = id + } + $focusedGrid = undefined } } diff --git a/frontend/src/lib/components/apps/editor/GridViewer.svelte b/frontend/src/lib/components/apps/editor/GridViewer.svelte index d5c4a15d52..25e8155529 100644 --- a/frontend/src/lib/components/apps/editor/GridViewer.svelte +++ b/frontend/src/lib/components/apps/editor/GridViewer.svelte @@ -2,7 +2,6 @@ import { onMount, createEventDispatcher } from 'svelte' import type { FilledItem } from '../svelte-grid/types' - import GridViewerComponent from './GridViewerComponent.svelte' import { getColumn, throttle } from '../svelte-grid/utils/other' import { getContainerHeight } from '../svelte-grid/utils/container' import { specifyUndefinedColumns } from '../svelte-grid/utils/item' @@ -79,19 +78,23 @@
{#if xPerPx} {#each items as item (item.id)} - {#if item[getComputedCols]} {/if} - +
{/each} {/if} @@ -101,4 +104,11 @@ position: relative; width: 100%; } + .svlt-grid-item { + touch-action: none; + position: absolute; + will-change: auto; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } diff --git a/frontend/src/lib/components/apps/editor/GridViewerComponent.svelte b/frontend/src/lib/components/apps/editor/GridViewerComponent.svelte deleted file mode 100644 index 7efd53c31a..0000000000 --- a/frontend/src/lib/components/apps/editor/GridViewerComponent.svelte +++ /dev/null @@ -1,26 +0,0 @@ - - -
- -
- - diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte index e91c7a775d..8a4b7cf371 100644 --- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte +++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte @@ -50,13 +50,9 @@ function selectComponent(id: string) { onComponent = id if (!$connectingInput.opened) { - $selectedComponent = id - /* - $focusedGrid = { - parentComponentId: parentId, - subGridIndex: index + if (id !== $selectedComponent) { + $selectedComponent = id } - */ } } @@ -128,7 +124,6 @@ class={classNames( 'h-full w-full center-center', $selectedComponent === dataItem.data.id ? 'active-grid-item' : '', - dataItem.data.card ? 'border border-gray-100' : '', 'top-0' )} > diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte index e30e7a14a5..4a4c8c735d 100644 --- a/frontend/src/lib/components/apps/editor/component/Component.svelte +++ b/frontend/src/lib/components/apps/editor/component/Component.svelte @@ -76,18 +76,10 @@ {/if}
{ - // Removed in https://github.com/windmill-labs/windmill/pull/1171 - // In case of a bug, try stopping propagation on the native event - // and dispatch a custom event: `e?.stopPropagation(); dispatch('select');` - // if ($mode === 'preview') { - // e?.stopPropagation() - // } - }} class={twMerge( 'h-full bg-white/40', selected && $mode !== 'preview' ? 'border border-blue-500' : '', - !selected && $mode !== 'preview' && !component.card ? 'border-gray-100' : '', + !selected && $mode !== 'preview' ? 'border-gray-100' : '', $mode !== 'preview' && !$connectingInput.opened ? 'hover:border-blue-500' : '', component.softWrap || hasError ? '' : 'overflow-auto', $mode != 'preview' ? 'cursor-pointer' : '', diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index 060c68384e..f18a852b60 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -180,8 +180,7 @@ export const components: Record = { customCss: { header: { class: '', style: '' }, container: { class: '', style: '' } - } as const, - card: false + } as const } }, containercomponent: { @@ -197,7 +196,7 @@ export const components: Record = { container: { class: '', style: '' } } as const, componentInput: undefined, - card: false, + numberOfSubgrids: 1 } }, @@ -239,8 +238,7 @@ export const components: Record = { }, customCss: { text: { class: '', style: '' } - } as const, - card: false + } as const } }, buttoncomponent: { @@ -323,8 +321,7 @@ export const components: Record = { }, customCss: { button: { style: '', class: '' } - } as const, - card: false + } as const } }, formcomponent: { @@ -372,8 +369,7 @@ export const components: Record = { customCss: { container: { class: '', style: '' }, button: { class: '', style: '' } - } as const, - card: true + } as const } }, formbuttoncomponent: { @@ -416,8 +412,7 @@ export const components: Record = { customCss: { button: { class: '', style: '' }, popup: { class: '', style: '' } - } as const, - card: true + } as const } }, piechartcomponent: { @@ -449,8 +444,7 @@ export const components: Record = { }, customCss: { container: { class: '', style: '' } - } as const, - card: true + } as const } }, barchartcomponent: { @@ -482,8 +476,7 @@ export const components: Record = { }, customCss: { container: { class: '', style: '' } - } as const, - card: true + } as const } }, htmlcomponent: { @@ -507,8 +500,7 @@ Hello \${ctx.username} configuration: {}, customCss: { container: { class: '', style: '' } - } as const, - card: false + } as const } }, vegalitecomponent: { @@ -547,8 +539,7 @@ Hello \${ctx.username} tooltip: 'Use the canvas renderer instead of the svg one for more interactive plots' } }, - customCss: {}, - card: false + customCss: {} } }, plotlycomponent: { @@ -575,8 +566,7 @@ Hello \${ctx.username} } }, configuration: {}, - customCss: {}, - card: false + customCss: {} } }, timeseriescomponent: { @@ -651,8 +641,7 @@ Hello \${ctx.username} }, customCss: { container: { class: '', style: '' } - } as const, - card: true + } as const } }, scatterchartcomponent: { @@ -703,8 +692,7 @@ Hello \${ctx.username} }, customCss: { container: { class: '', style: '' } - } as const, - card: true + } as const } }, tablecomponent: { @@ -746,7 +734,7 @@ Hello \${ctx.username} tableBody: { class: '', style: '' }, tableFooter: { class: '', style: '' } } as const, - card: true, + actionButtons: [] } }, @@ -802,8 +790,7 @@ Hello \${ctx.username} } ] }, - customCss: {}, - card: true + customCss: {} } }, checkboxcomponent: { @@ -830,8 +817,7 @@ Hello \${ctx.username} }, customCss: { text: { class: '', style: '' } - } as const, - card: false + } as const } }, textinputcomponent: { @@ -859,8 +845,7 @@ Hello \${ctx.username} }, customCss: { input: { class: '', style: '' } - } as const, - card: false + } as const } }, selectcomponent: { @@ -904,7 +889,7 @@ Hello \${ctx.username} customCss: { input: { style: '' } } as const, - card: false, + softWrap: true } }, @@ -934,7 +919,7 @@ Hello \${ctx.username} customCss: { input: { style: '' } } as const, - card: false, + softWrap: true } }, @@ -964,7 +949,7 @@ Hello \${ctx.username} customCss: { input: { style: '' } } as const, - card: false, + softWrap: true } }, @@ -1009,8 +994,7 @@ Hello \${ctx.username} }, customCss: { input: { class: '', style: '' } - } as const, - card: false + } as const } }, currencycomponent: { @@ -1053,8 +1037,7 @@ Hello \${ctx.username} }, customCss: { input: { class: '', style: '' } - } as const, - card: false + } as const } }, slidercomponent: { @@ -1096,8 +1079,7 @@ Hello \${ctx.username} handle: { style: '' }, limits: { class: '', style: '' }, value: { class: '', style: '' } - } as const, - card: false + } as const } }, rangecomponent: { @@ -1143,8 +1125,7 @@ Hello \${ctx.username} bar: { style: '' }, limits: { class: '', style: '' }, values: { class: '', style: '' } - } as const, - card: false + } as const } }, passwordinputcomponent: { @@ -1167,8 +1148,7 @@ Hello \${ctx.username} }, customCss: { input: { class: '', style: '' } - } as const, - card: false + } as const } }, emailinputcomponent: { @@ -1196,8 +1176,7 @@ Hello \${ctx.username} }, customCss: { input: { class: '', style: '' } - } as const, - card: false + } as const } }, dateinputcomponent: { @@ -1229,8 +1208,7 @@ Hello \${ctx.username} }, customCss: { input: { class: '', style: '' } - } as const, - card: false + } as const } }, tabscomponent: { @@ -1257,7 +1235,7 @@ Hello \${ctx.username} container: { class: '', style: '' } } as const, componentInput: undefined, - card: false, + numberOfSubgrids: 2, tabs: ['First tab', 'Second tab'] } @@ -1300,8 +1278,7 @@ Hello \${ctx.username} customCss: { container: { class: '', style: '' }, icon: { class: '', style: '' } - } as const, - card: false + } as const } }, horizontaldividercomponent: { @@ -1330,8 +1307,7 @@ Hello \${ctx.username} customCss: { container: { class: '', style: '' }, divider: { class: '', style: '' } - } as const, - card: false + } as const } }, verticaldividercomponent: { @@ -1360,8 +1336,7 @@ Hello \${ctx.username} customCss: { container: { class: '', style: '' }, divider: { class: '', style: '' } - } as const, - card: false + } as const } }, fileinputcomponent: { @@ -1395,8 +1370,7 @@ Hello \${ctx.username} }, customCss: { container: { class: '', style: '' } - } as const, - card: false + } as const } }, imagecomponent: { @@ -1434,8 +1408,7 @@ Hello \${ctx.username} }, customCss: { image: { class: '', style: '' } - } as const, - card: false + } as const } }, drawercomponent: { @@ -1487,7 +1460,7 @@ Hello \${ctx.username} } }, componentInput: undefined, - card: false, + numberOfSubgrids: 1 } }, @@ -1543,8 +1516,7 @@ Hello \${ctx.username} }, customCss: { map: { class: '', style: '' } - } as const, - card: false + } as const } }, verticalsplitpanescomponent: { @@ -1560,7 +1532,7 @@ Hello \${ctx.username} container: { class: '', style: '' } } as const, componentInput: undefined, - card: false, + panes: [50, 50], numberOfSubgrids: 2 } @@ -1578,7 +1550,7 @@ Hello \${ctx.username} container: { class: '', style: '' } } as const, componentInput: undefined, - card: false, + panes: [50, 50], numberOfSubgrids: 2 } @@ -1609,8 +1581,7 @@ Hello \${ctx.username} }, customCss: { container: { class: '', style: '' } - } as const, - card: false + } as const } } } diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte index 4a6885ad4d..97625858b2 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte @@ -81,8 +81,7 @@ recomputeIds: undefined, customCss: { button: { style: '', class: '' } - } as const, - card: false + } as const } components = [...components, newComponent] diff --git a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte index 79edd145e6..bd19adc16c 100644 --- a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte +++ b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte @@ -321,7 +321,7 @@ class:svlt-grid-active={active || (trans && rect)} style="width: {active ? newSize.width : width}px; height:{active ? newSize.height - : height}px; {onTop ? 'z-index: 100;' : ''} + : height}px; {onTop ? 'z-index: 1000;' : ''} {active ? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;` : trans diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts index 7bbdb11aca..633e20d8bb 100644 --- a/frontend/src/lib/components/apps/types.ts +++ b/frontend/src/lib/components/apps/types.ts @@ -53,7 +53,6 @@ export interface BaseAppComponent extends Partial { | UploadAppInput ) > - card: boolean | undefined customCss?: ComponentCustomCSS /** * If `true` then the wrapper will allow items to flow outside of it's borders.