- No connectors configured for {categoryKey}. Please check your
- settings
-
- )
- }
- const category = categoryKey ? VERTICAL_BY_KEY[categoryKey] : undefined
- const content = (
- {
- if (e.type === 'close' || e.type === 'error') {
- setOpen(false)
- }
- }}
- />
- )
-
- return (
-
- )
- }}
-
- )
-}
diff --git a/packages/engine-frontend/components/ConnectButton.tsx b/packages/engine-frontend/components/ConnectDialog.tsx
similarity index 61%
rename from packages/engine-frontend/components/ConnectButton.tsx
rename to packages/engine-frontend/components/ConnectDialog.tsx
index 44a3fe42..ed977be4 100644
--- a/packages/engine-frontend/components/ConnectButton.tsx
+++ b/packages/engine-frontend/components/ConnectDialog.tsx
@@ -20,21 +20,27 @@ import type {
import {WithConnectConfig} from '../hocs/WithConnectConfig'
import {IntegrationSearch} from './IntegrationSearch'
-interface ConnectButtonCommonProps {
+interface ConnectDialogCommonProps {
className?: string
children?: React.ReactNode
}
// TODO: Refactor WithOpenConnect out of ConnectButton
// such that users can render their own trigger fully
-export function ConnectButton({
+export function ConnectDialog({
connectorNames = [],
connectorConfigFilters,
+ open: controlledOpen,
+ setOpen: controlledSetOpen,
+ onEvent,
...commonProps
}: {
connectorConfigFilters: ConnectorConfigFilters
connectorNames?: string[]
-} & ConnectButtonCommonProps) {
+ open?: boolean
+ setOpen?: (open: boolean) => void
+ onEvent?: (event: any) => void
+} & ConnectDialogCommonProps) {
const {verticalKey: categoryKey} = connectorConfigFilters
return (
@@ -45,20 +51,30 @@ export function ConnectButton({
const [first, ...rest] = filteredCcfgs
if (!first) {
return (
-
- No connectors configured for {categoryKey}. Please check your
- settings
-
+
)
}
- // Render dialog for MultiConnector scenarios
- // This would be the case for greenhouse + lever
const category = categoryKey ? VERTICAL_BY_KEY[categoryKey] : undefined
return (
)
}}
@@ -70,22 +86,30 @@ function MultipleConnectButton({
children,
className,
connectorConfigs,
+ open: controlledOpen,
+ setOpen: controlledSetOpen,
+ onEvent,
}: {
connectorConfigs: ConnectorConfig[]
- /** Should correspond to connectorConfigs, but we can't guarantee that statically here... */
category?: Vertical
-} & ConnectButtonCommonProps) {
- const [open, setOpen] = React.useState(false)
+ open?: boolean
+ setOpen?: (open: boolean) => void
+ onEvent?: (event: any) => void
+} & ConnectDialogCommonProps) {
+ const [internalOpen, setInternalOpen] = React.useState(false)
+
+ // Determine if the component is controlled or uncontrolled
+ const isControlled = controlledOpen !== undefined && controlledSetOpen !== undefined
+ const open = isControlled ? controlledOpen : internalOpen
+ const setOpen = isControlled ? controlledSetOpen : setInternalOpen
// Unconditional render to avoid delay when dialog is opened
const content = (
{
+ if (onEvent) onEvent(e);
if (e.type === 'close' || e.type === 'error') {
- // Cannot close during open event otherwise whole thing becomes unmounted
- // and we end up closing the connect dialog itself...
- // Once we have a global UserInputDialog
setOpen(false)
}
}}
@@ -98,9 +122,11 @@ function MultipleConnectButton({
// as well as other modals introduced by things like Plaid
diff --git a/packages/engine-frontend/components/ConnectionPortal.tsx b/packages/engine-frontend/components/ConnectionPortal.tsx
index 0b0b8e43..8e2e8821 100644
--- a/packages/engine-frontend/components/ConnectionPortal.tsx
+++ b/packages/engine-frontend/components/ConnectionPortal.tsx
@@ -18,7 +18,7 @@ import {cn} from '@openint/ui/utils'
import {R} from '@openint/util'
import {WithConnectConfig} from '../hocs/WithConnectConfig'
import {_trpcReact} from '../providers/TRPCProvider'
-import {ConnectButton} from './ConnectButton'
+import {ConnectDialog} from './ConnectDialog'
type ConnectEventType = 'open' | 'close' | 'error'
@@ -100,11 +100,15 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
Add a connection to get started