@@ -16,6 +16,8 @@ import IntegrationBuilderCodeView from "../../theme/IntegrationBuilderCodeView";
16
16
import builder from "./builder" ;
17
17
import styles from "./styles.module.css" ;
18
18
import { getWindowLocation } from "../../theme/URLParams" ;
19
+ import BrowserOnly from "@docusaurus/BrowserOnly" ;
20
+ import { IntegrationStep } from "./interfaces" ;
19
21
20
22
const getDefaultBuilderOptions = ( ) => {
21
23
const defaultOpts = Object . fromEntries (
@@ -45,7 +47,30 @@ const getURLFromBuilderOptions = (opts: Record<string, string>, stepIndex): stri
45
47
return url . toString ( ) ;
46
48
} ;
47
49
48
- export default function IntegrationBuilderPage ( { files } : { files : Record < string , any > } ) {
50
+ export default function IntegrationBuilderPage ( props : { files ?: any } ) {
51
+ // Get files from props (passed via Docusaurus modules)
52
+ const [ files , setFiles ] = useState < Record < string , string > > ( { } ) ;
53
+ const [ filesLoaded , setFilesLoaded ] = useState ( false ) ;
54
+
55
+ useEffect ( ( ) => {
56
+ if ( props . files ) {
57
+ try {
58
+ // The files should be available directly from props
59
+ const filesData = props . files . default || props . files ;
60
+ console . log ( 'Loaded files from props, count:' , Object . keys ( filesData ) . length ) ;
61
+ setFiles ( filesData ) ;
62
+ setFilesLoaded ( true ) ;
63
+ } catch ( error ) {
64
+ console . error ( 'Error accessing files from props:' , error ) ;
65
+ setFiles ( { } ) ;
66
+ setFilesLoaded ( true ) ;
67
+ }
68
+ } else {
69
+ console . log ( 'No files found in props' ) ;
70
+ setFilesLoaded ( true ) ;
71
+ }
72
+ } , [ props . files ] ) ;
73
+
49
74
const [ builderOptions , setBuilderOptions ] = useState < Record < string , string > > (
50
75
getDefaultBuilderOptions ( ) ,
51
76
) ;
@@ -64,7 +89,7 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
64
89
( ) => builder . build ( builderOptions , files , stepIndex ) ,
65
90
[ builderOptions , files , stepIndex ] ,
66
91
) ;
67
- const [ selectedFilename , setSelectedFilename ] = useState ( integration . filenames [ 0 ] ) ;
92
+ const [ selectedFilename , setSelectedFilename ] = useState ( integration . filenames [ 0 ] || "" ) ;
68
93
69
94
const delay = ( ms ) => new Promise ( ( resolve ) => setTimeout ( resolve , ms ) ) ;
70
95
const ref = useRef ( null ) ;
@@ -85,7 +110,9 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
85
110
// eslint-disable-next-line no-param-reassign
86
111
index = steps . length - 1 ;
87
112
}
88
- setSelectedFilename ( steps [ index ] . pointer ! . filename ) ;
113
+ if ( steps [ index ] && steps [ index ] . pointer && steps [ index ] . pointer . filename ) {
114
+ setSelectedFilename ( steps [ index ] . pointer . filename ) ;
115
+ }
89
116
setStepIndex ( index ) ;
90
117
} ;
91
118
@@ -149,7 +176,11 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
149
176
useEffect ( ( ) => {
150
177
setStepIndex ( integration . stepIndex ) ;
151
178
// Update selected file when either integration changed
152
- setSelectedFilename ( integration . steps [ integration . stepIndex ] . pointer ! . filename ) ;
179
+ if ( integration . steps && integration . steps [ integration . stepIndex ] && integration . steps [ integration . stepIndex ] . pointer ) {
180
+ setSelectedFilename ( integration . steps [ integration . stepIndex ] . pointer . filename ) ;
181
+ } else if ( integration . filenames && integration . filenames . length > 0 ) {
182
+ setSelectedFilename ( integration . filenames [ 0 ] ) ;
183
+ }
153
184
154
185
for ( const optionKey in builderOptions ) {
155
186
if ( builder . options [ optionKey ] ) {
@@ -170,7 +201,7 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
170
201
// Update the useEffect for initial navigation
171
202
useEffect ( ( ) => {
172
203
// Initialize to the step index from URL
173
- if ( stepIndex > 0 && steps [ stepIndex ] ) {
204
+ if ( stepIndex > 0 && steps && steps [ stepIndex ] ) {
174
205
const stepElements = document . getElementsByClassName ( styles . stepContainer ) ;
175
206
if ( stepElements && stepElements . length > stepIndex ) {
176
207
const element = stepElements [ stepIndex ] as HTMLElement ;
@@ -318,7 +349,7 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
318
349
< div className = { styles . cols } ref = { ref } >
319
350
< div className = { styles . leftCol } onScroll = { onScrollLeft } >
320
351
< MDXProvider components = { MDXComponents } >
321
- { steps . map ( ( step , index ) => (
352
+ { steps && steps . length > 0 ? steps . map ( ( step , index ) => (
322
353
< div
323
354
key = { step . title }
324
355
className = { classNames ( styles . stepContainer , {
@@ -333,7 +364,12 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
333
364
< p className = { styles . stepHeader } > { step . title } </ p >
334
365
< div className = { styles . stepBody } > { step . content } </ div >
335
366
</ div >
336
- ) ) }
367
+ ) ) : (
368
+ < div className = { styles . stepContainer } >
369
+ < p className = { styles . stepHeader } > Loading...</ p >
370
+ < div className = { styles . stepBody } > Please wait while we load the integration steps.</ div >
371
+ </ div >
372
+ ) }
337
373
</ MDXProvider >
338
374
</ div >
339
375
< div className = { styles . rightCol } >
0 commit comments