diff --git a/package.json b/package.json index 634d901..f8b1fb7 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ }, "dependencies": { "@apideck/components": "^0.12.9", + "@apideck/wayfinder": "^0.2.2", "formik": "^2.2.9", "fuse.js": "^6.5.3", "jwt-decode": "^3.1.2", diff --git a/src/components/FieldMappingForm.tsx b/src/components/FieldMappingForm.tsx index df4887a..fdfd032 100644 --- a/src/components/FieldMappingForm.tsx +++ b/src/components/FieldMappingForm.tsx @@ -7,7 +7,7 @@ import { useConnections } from '../utils/useConnections'; import { useSession } from '../utils/useSession'; import FieldSelector from './FieldSelector'; -const findByDescription = (obj: any, description: string): any => { +export const findByDescription = (obj: any, description: string): any => { for (const key in obj) { if (obj[key] instanceof Object) { const result = findByDescription(obj[key], description); diff --git a/src/components/FieldSelector.tsx b/src/components/FieldSelector.tsx index 6529e6f..4da171a 100644 --- a/src/components/FieldSelector.tsx +++ b/src/components/FieldSelector.tsx @@ -1,4 +1,5 @@ -import { Button, TextInput, useDebounce } from '@apideck/components'; +import { Button, TextInput, useDebounce, useModal } from '@apideck/components'; +import { WayFinder } from '@apideck/wayfinder'; import { Menu, Transition } from '@headlessui/react'; import classNames from 'classnames'; @@ -13,6 +14,10 @@ import React, { useRef, useState, } from 'react'; +import useSWR from 'swr'; +import { extractLastAttribute } from '../utils/extractLastAttribute'; +import { useConnections } from '../utils/useConnections'; +import { findByDescription } from './FieldMappingForm'; interface Props { onSelect: (field: any) => void; @@ -50,9 +55,22 @@ const FieldSelector = ({ ); const [list, setList] = useState([]); const debouncedSearchTerm = useDebounce(searchTerm, 250); - const [fieldMappingString, setFieldMappingString] = useState(); + const [fieldMappingString, setFieldMappingString] = useState(); const [properties, setProperties] = useState(propertiesProps); const searchInputRef: any = useRef(); + const { addModal, removeModal } = useModal(); + + const { selectedConnection, fetchResourceExample } = useConnections(); + + const { data, error: exampleError } = useSWR( + selectedConnection && + selectedCustomMapping?.id && + mode === 'advanced' && ['example', selectedCustomMapping?.id], + () => fetchResourceExample(selectedCustomMapping?.id?.split('+')[1]), + { revalidateIfStale: false } + ); + + const exampleResponse = data?.data?.example_response; useEffect(() => { if (debouncedSearchTerm) { @@ -379,12 +397,52 @@ const FieldSelector = ({ setFieldMappingString(e.target.value) } /> -
+
+