From 1ddc07d640016244158d39222494de72db3b6ce8 Mon Sep 17 00:00:00 2001
From: Jake Prins <jakeprins@outlook.com>
Date: Fri, 27 Oct 2023 10:26:58 +0200
Subject: [PATCH 1/2] Add wayfinder to advanced custom mapping

---
 package.json                     |   1 +
 src/components/FieldSelector.tsx |  58 +++++++++++++++--
 src/components/Vault.tsx         |  80 ++++++++++++-----------
 src/styles/base.css              |   2 +-
 src/styles/index.css             |   2 +
 src/utils/useConnections.tsx     |  21 ++++++
 tailwind.config.js               |   1 +
 yarn.lock                        | 107 ++++++++++++++++++++++++++++++-
 8 files changed, 226 insertions(+), 46 deletions(-)

diff --git a/package.json b/package.json
index 634d901..462ac8c 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@apideck/components": "^0.12.9",
+    "@apideck/wayfinder": "^0.1.9",
     "formik": "^2.2.9",
     "fuse.js": "^6.5.3",
     "jwt-decode": "^3.1.2",
diff --git a/src/components/FieldSelector.tsx b/src/components/FieldSelector.tsx
index 6529e6f..6d5f8f9 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,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import useSWR from 'swr';
+import { useConnections } from '../utils/useConnections';
 
 interface Props {
   onSelect: (field: any) => void;
@@ -50,9 +53,22 @@ const FieldSelector = ({
   );
   const [list, setList] = useState<any>([]);
   const debouncedSearchTerm = useDebounce(searchTerm, 250);
-  const [fieldMappingString, setFieldMappingString] = useState();
+  const [fieldMappingString, setFieldMappingString] = useState<string>();
   const [properties, setProperties] = useState<any>(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 +395,46 @@ const FieldSelector = ({
                           setFieldMappingString(e.target.value)
                         }
                       />
-                      <div className="flex justify-end">
+                      <div className="flex justify-end space-x-2 items-center mt-2">
+                        <Button
+                          variant="outline"
+                          size="small"
+                          text="Open WayFinder"
+                          disabled={!exampleResponse}
+                          isLoading={!exampleError && !data}
+                          onClick={() => {
+                            addModal(
+                              <WayFinder
+                                onSelect={(jsonPath) => {
+                                  if (jsonPath) {
+                                    setFieldMappingString(jsonPath);
+                                    onSelect({
+                                      title: jsonPath,
+                                      mode: 'manual',
+                                      type: 'Advanced',
+                                      description: jsonPath,
+                                    });
+                                  }
+                                  removeModal();
+                                }}
+                                onClose={removeModal}
+                                defaultInput={JSON.stringify(
+                                  exampleResponse,
+                                  null,
+                                  2
+                                )}
+                              />,
+                              {
+                                className: '!max-w-5xl !p-0',
+                                onClose: () => {},
+                              }
+                            );
+                          }}
+                        />
                         <Menu.Item>
                           <Button
                             text="Confirm"
                             size="small"
-                            className="mt-2"
                             disabled={!fieldMappingString}
                             onClick={() => {
                               onSelect({
diff --git a/src/components/Vault.tsx b/src/components/Vault.tsx
index 4a49a22..7632a80 100644
--- a/src/components/Vault.tsx
+++ b/src/components/Vault.tsx
@@ -1,14 +1,14 @@
 import React, { ReactElement, forwardRef, useEffect, useState } from 'react';
 
-import { ToastProvider } from '@apideck/components';
+import { ModalProvider, ToastProvider } from '@apideck/components';
 import jwtDecode from 'jwt-decode';
 import { BASE_URL } from '../constants/urls';
 import { Connection } from '../types/Connection';
 import { Session } from '../types/Session';
 import { ConnectionsProvider } from '../utils/useConnections';
+import { SessionProvider } from '../utils/useSession';
 import Modal from './Modal';
 import { ModalContent } from './ModalContent';
-import { SessionProvider } from '../utils/useSession';
 
 export interface Props {
   /**
@@ -132,42 +132,44 @@ export const Vault = forwardRef<HTMLElement, Props>(function Vault(
   const shouldRenderModal = (token && token?.length > 0 && isOpen) || trigger;
 
   return (
-    <div id="react-vault" className="apideck">
-      {trigger
-        ? React.cloneElement(trigger, { onClick: () => setIsOpen(true), ref })
-        : null}
-      {shouldRenderModal ? (
-        <Modal
-          isOpen={token && token?.length > 0 && isOpen}
-          onClose={() => onCloseModal()}
-          showAttribution={showAttribution}
-        >
-          <ToastProvider>
-            <ConnectionsProvider
-              appId={session?.application_id as string}
-              consumerId={session?.consumer_id as string}
-              token={jwt as string}
-              isOpen={isOpen}
-              onClose={onCloseModal}
-              onConnectionChange={onConnectionChange}
-              onConnectionDelete={onConnectionDelete}
-              unifiedApi={unifiedApi}
-              serviceId={serviceId}
-              unifyBaseUrl={unifyBaseUrl}
-            >
-              <SessionProvider session={session}>
-                <ModalContent
-                  onClose={onCloseModal}
-                  onConnectionChange={onConnectionChange}
-                  consumer={
-                    showConsumer ? session?.consumer_metadata : undefined
-                  }
-                />
-              </SessionProvider>
-            </ConnectionsProvider>
-          </ToastProvider>
-        </Modal>
-      ) : null}
-    </div>
+    <ModalProvider>
+      <div id="react-vault" className="apideck">
+        {trigger
+          ? React.cloneElement(trigger, { onClick: () => setIsOpen(true), ref })
+          : null}
+        {shouldRenderModal ? (
+          <Modal
+            isOpen={token && token?.length > 0 && isOpen}
+            onClose={() => onCloseModal()}
+            showAttribution={showAttribution}
+          >
+            <ToastProvider>
+              <ConnectionsProvider
+                appId={session?.application_id as string}
+                consumerId={session?.consumer_id as string}
+                token={jwt as string}
+                isOpen={isOpen}
+                onClose={onCloseModal}
+                onConnectionChange={onConnectionChange}
+                onConnectionDelete={onConnectionDelete}
+                unifiedApi={unifiedApi}
+                serviceId={serviceId}
+                unifyBaseUrl={unifyBaseUrl}
+              >
+                <SessionProvider session={session}>
+                  <ModalContent
+                    onClose={onCloseModal}
+                    onConnectionChange={onConnectionChange}
+                    consumer={
+                      showConsumer ? session?.consumer_metadata : undefined
+                    }
+                  />
+                </SessionProvider>
+              </ConnectionsProvider>
+            </ToastProvider>
+          </Modal>
+        ) : null}
+      </div>
+    </ModalProvider>
   );
 });
diff --git a/src/styles/base.css b/src/styles/base.css
index d6e15ab..cdc0b02 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -1,2 +1,2 @@
 @import './tailwind.css';
-@import './custom.css'
+@import './custom.css';
diff --git a/src/styles/index.css b/src/styles/index.css
index 3af4425..c251f37 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,2 +1,4 @@
 @import './base.css';
 @import './tailwind.css';
+
+@import '../../node_modules/@apideck/wayfinder/dist/styles.css';
diff --git a/src/utils/useConnections.tsx b/src/utils/useConnections.tsx
index 1ba202d..601310b 100644
--- a/src/utils/useConnections.tsx
+++ b/src/utils/useConnections.tsx
@@ -37,6 +37,7 @@ interface ContextProps {
     quiet?: boolean;
   }) => Promise<Connection | null>;
   fetchResourceSchema: (resource: string) => Promise<any>;
+  fetchResourceExample: (resource: string) => Promise<any>;
   fetchCustomFields: (resource: string) => Promise<any>;
 }
 
@@ -357,6 +358,25 @@ export const ConnectionsProvider = ({
     }
   };
 
+  const fetchResourceExample = async (resource?: string) => {
+    if (!selectedConnection || !resource) return;
+    try {
+      const raw = await fetch(
+        `${unifyBaseUrl}/vault/connections/${selectedConnection.unified_api}/${selectedConnection.service_id}/${resource}/example`,
+        { headers }
+      );
+
+      return await raw.json();
+    } catch (error) {
+      console.error(error);
+      addToast({
+        title: 'Failed to fetch example',
+        description: (error as Error)?.message,
+        type: 'error',
+      });
+    }
+  };
+
   const fetchCustomFields = async (resource?: string) => {
     if (!selectedConnection || !resource) return;
     try {
@@ -435,6 +455,7 @@ export const ConnectionsProvider = ({
       headers,
       token,
       fetchResourceSchema,
+      fetchResourceExample,
       fetchCustomFields,
       fetchCustomMapping,
       fetcher,
diff --git a/tailwind.config.js b/tailwind.config.js
index 8bb0cc6..f8874a9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   content: [
     './src/**/*.{html,js,jsx,ts,tsx}',
+    './node_modules/@apideck/wayfinder/**/*.js',
     './node_modules/@apideck/components/**/*.js',
     './stories/*',
   ],
diff --git a/yarn.lock b/yarn.lock
index f56bbe9..4af9338 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13,6 +13,19 @@
     postinstall-postinstall "^2.1.0"
     use-clipboard-copy "^0.2.0"
 
+"@apideck/wayfinder@^0.1.9":
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/@apideck/wayfinder/-/wayfinder-0.1.9.tgz#bfaa55d632236a0341adadb95ffecd4d8d62ca12"
+  integrity sha512-MkOMqKD6YuVPnBWZCkYMi080AmzaAYiJ4J7VvHy8iIK1Ilo/2qJwNtYQVErhBgtqUA7GRqojQp3hxwwEZDvTmw==
+  dependencies:
+    "@monaco-editor/react" "^4.6.0"
+    classnames "2.3.2"
+    json-to-ast "^2.1.0"
+    jsonc-parser "^3.2.0"
+    jsonpath "^1.1.1"
+    monaco-editor "^0.44.0"
+    use-clipboard-copy "0.2.0"
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
@@ -1620,6 +1633,20 @@
   resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.22.tgz#219dfd89ae5b97a8801f015323ffa4b62f45718b"
   integrity sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==
 
+"@monaco-editor/loader@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558"
+  integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.6.0":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119"
+  integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
+  dependencies:
+    "@monaco-editor/loader" "^1.4.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -4865,6 +4892,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 classnames@^2.2.6:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
@@ -4981,6 +5013,11 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
   integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
 
+code-error-fragment@0.0.230:
+  version "0.0.230"
+  resolved "https://registry.yarnpkg.com/code-error-fragment/-/code-error-fragment-0.0.230.tgz#d736d75c832445342eca1d1fedbf17d9618b14d7"
+  integrity sha512-cadkfKp6932H8UkhzE/gcUqhRMNf8jHzkAN7+5Myabswaghu4xABTgPHDCjW+dBAJxj/SpkTYokpzDqY4pCzQw==
+
 collapse-white-space@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
@@ -6249,6 +6286,18 @@ escape-string-regexp@^2.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
   integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
 
+escodegen@^1.8.1:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
+  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
 escodegen@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
@@ -6454,6 +6503,11 @@ espree@^6.1.2:
     acorn-jsx "^5.2.0"
     eslint-visitor-keys "^1.1.0"
 
+esprima@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-1.2.2.tgz#76a0fd66fcfe154fd292667dc264019750b1657b"
+  integrity sha512-+JpPZam9w5DuJ3Q67SqsMGtiHKENSMRVoxvArfJZK01/BfLEObtZ6orJa/MtoGNR/rfMgp5837T41PAmTwAv/A==
+
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
@@ -6473,7 +6527,7 @@ esrecurse@^4.1.0, esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
-estraverse@^4.1.1:
+estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
@@ -7418,6 +7472,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
   integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
 
+grapheme-splitter@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
+  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -9060,6 +9119,14 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
+json-to-ast@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/json-to-ast/-/json-to-ast-2.1.0.tgz#041a9fcd03c0845036acb670d29f425cea4faaf9"
+  integrity sha512-W9Lq347r8tA1DfMvAGn9QNcgYm4Wm7Yc+k8e6vezpMnRT+NHbtlxgNBXRVjXe9YM6eTn6+p/MKOlV/aABJcSnQ==
+  dependencies:
+    code-error-fragment "0.0.230"
+    grapheme-splitter "^1.0.4"
+
 json5@2.x, json5@^2.1.2, json5@^2.1.3:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
@@ -9074,6 +9141,11 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+jsonc-parser@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
+  integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
+
 jsonfile@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
@@ -9097,6 +9169,15 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonpath@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/jsonpath/-/jsonpath-1.1.1.tgz#0ca1ed8fb65bb3309248cc9d5466d12d5b0b9901"
+  integrity sha512-l6Cg7jRpixfbgoWgkrl77dgEj8RPvND0wMH6TwQmi9Qs4TFfS9u5cUFnbeKTwj5ga5Y3BTGGNI28k117LJ009w==
+  dependencies:
+    esprima "1.2.2"
+    static-eval "2.0.2"
+    underscore "1.12.1"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"
@@ -9825,6 +9906,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+monaco-editor@^0.44.0:
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.44.0.tgz#3c0fe3655923bbf7dd647057302070b5095b6c59"
+  integrity sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -12785,11 +12871,23 @@ stackframe@^1.1.1:
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.0.tgz#52429492d63c62eb989804c11552e3d22e779303"
   integrity sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==
 
+state-local@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 state-toggle@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe"
   integrity sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==
 
+static-eval@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/static-eval/-/static-eval-2.0.2.tgz#2d1759306b1befa688938454c546b7871f806a42"
+  integrity sha512-N/D219Hcr2bPjLxPiV+TQE++Tsmrady7TqAJugLy7Xk1EumfDWS/f5dtBbkRCGE7wKKXuYockQoj8Rm2/pVKyg==
+  dependencies:
+    escodegen "^1.8.1"
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -13683,6 +13781,11 @@ unbox-primitive@^1.0.1:
     has-symbols "^1.0.2"
     which-boxed-primitive "^1.0.2"
 
+underscore@1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.12.1.tgz#7bb8cc9b3d397e201cf8553336d262544ead829e"
+  integrity sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==
+
 unfetch@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be"
@@ -13900,7 +14003,7 @@ use-callback-ref@^1.2.5:
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
   integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
 
-use-clipboard-copy@^0.2.0:
+use-clipboard-copy@0.2.0, use-clipboard-copy@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/use-clipboard-copy/-/use-clipboard-copy-0.2.0.tgz#e1f31f2b21e369bc79b5d7b358e2c8aece6ef264"
   integrity sha512-f0PMMwZ2/Hh9/54L12capx4s6ASdd6edNJxg2OcqWVNM8BPvtOSmNFIN1Dg/q//fPp8MpUZceHfr7cnWOS0RxA==

From 8c12fc4a03c36f16f9a04ce3d6a977866d640c20 Mon Sep 17 00:00:00 2001
From: Jake Prins <jakeprins@outlook.com>
Date: Thu, 2 Nov 2023 11:53:56 +0100
Subject: [PATCH 2/2] Update wayfinder and improve advanced mapping

---
 package.json                        |  2 +-
 src/components/FieldMappingForm.tsx |  2 +-
 src/components/FieldSelector.tsx    | 12 ++++++++++--
 yarn.lock                           |  8 ++++----
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 462ac8c..f8b1fb7 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@apideck/components": "^0.12.9",
-    "@apideck/wayfinder": "^0.1.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 6d5f8f9..4da171a 100644
--- a/src/components/FieldSelector.tsx
+++ b/src/components/FieldSelector.tsx
@@ -15,7 +15,9 @@ import React, {
   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;
@@ -408,11 +410,16 @@ const FieldSelector = ({
                                 onSelect={(jsonPath) => {
                                   if (jsonPath) {
                                     setFieldMappingString(jsonPath);
+                                    const mappingObject = findByDescription(
+                                      properties,
+                                      jsonPath
+                                    );
                                     onSelect({
-                                      title: jsonPath,
+                                      title: extractLastAttribute(jsonPath),
                                       mode: 'manual',
-                                      type: 'Advanced',
+                                      type: mappingObject?.type || 'Advanced',
                                       description: jsonPath,
+                                      example: mappingObject?.example,
                                     });
                                   }
                                   removeModal();
@@ -423,6 +430,7 @@ const FieldSelector = ({
                                   null,
                                   2
                                 )}
+                                defaultJsonPath={fieldMappingString}
                               />,
                               {
                                 className: '!max-w-5xl !p-0',
diff --git a/yarn.lock b/yarn.lock
index 4af9338..67e7b2d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13,10 +13,10 @@
     postinstall-postinstall "^2.1.0"
     use-clipboard-copy "^0.2.0"
 
-"@apideck/wayfinder@^0.1.9":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@apideck/wayfinder/-/wayfinder-0.1.9.tgz#bfaa55d632236a0341adadb95ffecd4d8d62ca12"
-  integrity sha512-MkOMqKD6YuVPnBWZCkYMi080AmzaAYiJ4J7VvHy8iIK1Ilo/2qJwNtYQVErhBgtqUA7GRqojQp3hxwwEZDvTmw==
+"@apideck/wayfinder@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@apideck/wayfinder/-/wayfinder-0.2.2.tgz#7b9debda5048b26e25802f7f0ce44d76efd16b1e"
+  integrity sha512-OzjX7zgvINch+C4jrj80XEs7Fmt4W45CGz3uryUqhf9grzL3RA6wvqXjoehFROmdXN5FXts2XQmNiPHcP7HQww==
   dependencies:
     "@monaco-editor/react" "^4.6.0"
     classnames "2.3.2"