From 413ad2c9259fd30871b5184bc4f7c3fece60918d Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Thu, 8 Aug 2024 00:19:31 +0200 Subject: [PATCH] feat(app): add user resource select component --- .../lib/components/AppConnectDrawer.svelte | 11 ++- .../src/lib/components/AppConnectInner.svelte | 17 ++++- .../src/lib/components/ResourcePicker.svelte | 67 ++++++++++++------- .../apps/components/helpers/eval.ts | 11 ++- .../components/inputs/AppUserResource.svelte | 11 ++- .../apps/editor/component/Component.svelte | 9 +++ .../apps/editor/component/components.ts | 39 ++++++++++- .../components/apps/editor/component/sets.ts | 1 + .../componentsPanel/quickStyleProperties.ts | 3 + .../editor/settingsPanel/EventHandlers.svelte | 3 +- frontend/src/lib/components/apps/types.ts | 1 + frontend/src/lib/components/apps/utils.ts | 5 ++ 12 files changed, 141 insertions(+), 37 deletions(-) diff --git a/frontend/src/lib/components/AppConnectDrawer.svelte b/frontend/src/lib/components/AppConnectDrawer.svelte index 9cbd28edbd50f..28cb801616177 100644 --- a/frontend/src/lib/components/AppConnectDrawer.svelte +++ b/frontend/src/lib/components/AppConnectDrawer.svelte @@ -6,6 +6,8 @@ import AppConnectInner from './AppConnectInner.svelte' import DarkModeObserver from './DarkModeObserver.svelte' + let expressOAuthSetup = false + let drawer: Drawer let resourceType = '' let step = 1 @@ -16,12 +18,17 @@ let appConnectInner: AppConnectInner | undefined = undefined let rtToLoad: string | undefined = '' - export async function open(rt?: string) { + export async function open(rt?: string, express?: boolean) { + expressOAuthSetup = express ?? false rtToLoad = rt drawer.openDrawer?.() } - $: appConnectInner?.open(rtToLoad) + $: appConnectInner && onRtToLoadChange(rtToLoad) + + function onRtToLoadChange(rtToLoad: string | undefined) { + appConnectInner?.open(rtToLoad, expressOAuthSetup) + } const dispatch = createEventDispatcher() diff --git a/frontend/src/lib/components/AppConnectInner.svelte b/frontend/src/lib/components/AppConnectInner.svelte index a1556bf7fca2e..848fb69922e67 100644 --- a/frontend/src/lib/components/AppConnectInner.svelte +++ b/frontend/src/lib/components/AppConnectInner.svelte @@ -1,5 +1,5 @@ {#each Object.keys(components['userresourcecomponent'].initialData.configuration) as key (key)} @@ -90,6 +95,8 @@
{ assignValue(e.detail) diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte index e6d04022b1685..d67708e65c1a7 100644 --- a/frontend/src/lib/components/apps/editor/component/Component.svelte +++ b/frontend/src/lib/components/apps/editor/component/Component.svelte @@ -79,6 +79,7 @@ import AppDateSelect from '../../components/inputs/AppDateSelect.svelte' import AppDisplayComponentByJobId from '../../components/display/AppRecomputeAll.svelte' import AppRecomputeAll from '../../components/display/AppRecomputeAll.svelte' + import AppUserResource from '../../components/inputs/AppUserResource.svelte' export let component: AppComponent export let selected: boolean @@ -434,6 +435,14 @@ onSelect={component.onSelect} {render} /> + {:else if component.type === 'userresourcecomponent'} + {:else if component.type === 'multiselectcomponent'} & RecomputeOthersSource & { onSelect?: string[] } +export type ResourceConnectComponent = BaseComponent<'userresourcecomponent'> & + RecomputeOthersSource & { + onSelect?: string[] + } export type MultiSelectComponent = BaseComponent<'multiselectcomponent'> export type MultiSelectComponentV2 = BaseComponent<'multiselectcomponentv2'> export type CheckboxComponent = BaseComponent<'checkboxcomponent'> & @@ -361,6 +365,7 @@ export type TypedComponent = | DateSelectComponent | JobIdDisplayComponent | RecomputeAllComponent + | ResourceConnectComponent export type AppComponent = BaseAppComponent & TypedComponent @@ -2216,7 +2221,7 @@ This is a paragraph. } }, resourceselectcomponent: { - name: 'Resource Select', + name: 'Static Resource Select', icon: List, documentationLink: `${documentationBaseUrl}/resource_select`, dims: '2:1-3:1' as AppComponentDimensions, @@ -2254,6 +2259,38 @@ This is a paragraph. } } }, + userresourcecomponent: { + name: 'User Resource Input', + icon: List, + documentationLink: `${documentationBaseUrl}/resource_select`, + dims: '2:1-3:1' as AppComponentDimensions, + customCss: { + input: { style: '' } + }, + initialData: { + verticalAlignment: 'center', + componentInput: undefined, + configuration: { + resourceType: { + type: 'static', + fieldType: 'text', + value: 'postgresql' + }, + expressOauthSetup: { + type: 'static', + fieldType: 'boolean', + value: false, + tooltip: + 'If enabled, skip some steps while adding oauth resources: No scopes to set prior to OAuth sign-in, and no path to set after OAuth sign-in' + }, + disabled: { + type: 'static', + fieldType: 'boolean', + value: false + } + } + } + }, numberinputcomponent: { name: 'Number', icon: Binary, diff --git a/frontend/src/lib/components/apps/editor/component/sets.ts b/frontend/src/lib/components/apps/editor/component/sets.ts index 9113a3d404515..dc11ce926899e 100644 --- a/frontend/src/lib/components/apps/editor/component/sets.ts +++ b/frontend/src/lib/components/apps/editor/component/sets.ts @@ -54,6 +54,7 @@ const inputs: ComponentSet = { 'checkboxcomponent', 'selectcomponent', 'resourceselectcomponent', + 'userresourcecomponent', 'multiselectcomponentv2', 'selecttabcomponent', 'selectstepcomponent' diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/quickStyleProperties.ts b/frontend/src/lib/components/apps/editor/componentsPanel/quickStyleProperties.ts index 29d17948ad336..847075de5a406 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/quickStyleProperties.ts +++ b/frontend/src/lib/components/apps/editor/componentsPanel/quickStyleProperties.ts @@ -748,6 +748,9 @@ export const quickStyleProperties: Record< resourceselectcomponent: { input: inputDefaultProps }, + userresourcecomponent: { + input: inputDefaultProps + }, verticaldividercomponent: { divider: dividerDefaultProps, container: containerDefaultProps diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte index ce49fc75785e7..a048a4fb208f3 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte @@ -17,6 +17,7 @@ 'formbuttoncomponent', 'checkboxcomponent', 'resourceselectcomponent', + 'userresourcecomponent', 'selectcomponent', 'tabscomponent', 'conditionalwrapper', @@ -64,7 +65,7 @@ bind:value={item.data.onToggle} /> {/if} - {#if item.data.type === 'resourceselectcomponent' || item.data.type === 'selectcomponent'} + {#if item.data.type === 'resourceselectcomponent' || item.data.type === 'selectcomponent' || item.data.type == 'userresourcecomponent'} void showToast?: (message: string, error?: boolean) => void recompute?: () => void + askNewResource?: () => void } > > diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts index b0a542f5e263c..76cb92ec01449 100644 --- a/frontend/src/lib/components/apps/utils.ts +++ b/frontend/src/lib/components/apps/utils.ts @@ -267,6 +267,11 @@ declare function showToast(message: string, error?: boolean): void; declare async function waitJob(id: string): Promise; +/** + * ask user resource on a UserResourceComponent + */ +declare async function askNewResource(id: string): void; + ` : '' }