Merge pull request #97 from apideck-libraries/configurabe-resource

Configurable Resource

package.json

@@ -71,11 +71,11 @@
   "size-limit": [
     {
       "path": "dist/react-vault.cjs.production.min.js",
-      "limit": "200 KB"
+      "limit": "300 KB"
     },
     {
       "path": "dist/react-vault.esm.js",
-      "limit": "200 KB"
+      "limit": "300 KB"
     }
   ],
   "resolutions": {

src/components/ConnectionDetails.tsx

@@ -116,11 +116,27 @@ const ConnectionDetails = ({
       return;
     }
 
+    if (
+      selectedConnection.state === 'callable' &&
+      selectedConnection.configurable_resources?.length > 0 &&
+      currentView === null
+    ) {
+      setCurrentView(ConnectionViewType.ConfigurableResources);
+      return;
+    }
+
     // On single connection mode, open settings by default
     if (currentView === null && singleConnectionMode) {
       setCurrentView(ConnectionViewType.Settings);
     }
-  }, [needsInput, initialView, resources, settings]);
+  }, [
+    needsInput,
+    initialView,
+    resources,
+    settings,
+    selectedConnection,
+    currentView,
+  ]);
 
   useEffect(() => {
     let hasRequiredMappings = false;

src/components/ConnectionForm.tsx

@@ -48,6 +48,7 @@ const ConnectionForm = ({ connection, setCurrentView, settings }: Props) => {
 
   const formik = useFormik({
     initialValues,
+    enableReinitialize: true,
     onSubmit: async (values) => {
       if (connection.validation_support) {
         setValidationState('validating');

src/components/FieldMappingForm.tsx

@@ -4,24 +4,11 @@ import { useTranslation } from 'react-i18next';
 import useSWR, { useSWRConfig } from 'swr';
 import { Connection, CustomMapping } from '../types/Connection';
 import { extractLastAttribute } from '../utils/extractLastAttribute';
+import { findByDescription } from '../utils/fieldMappingUtils';
 import { useConnections } from '../utils/useConnections';
 import { useSession } from '../utils/useSession';
 import FieldSelector from './FieldSelector';
 
-export const findByDescription = (obj: any, description: string): any => {
-  for (const key in obj) {
-    if (obj[key] instanceof Object) {
-      const result = findByDescription(obj[key], description);
-      if (result) {
-        return result;
-      }
-    } else if (key === 'description' && obj[key] === description) {
-      return obj;
-    }
-  }
-  return null;
-};
-
 const renderReadableJSONPath = (
   jsonPath: string,
   responseDataPath?: string

src/components/FieldSelector.tsx

@@ -17,8 +17,8 @@ import React, {
 import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 import { extractLastAttribute } from '../utils/extractLastAttribute';
+import { findByDescription } from '../utils/fieldMappingUtils';
 import { useConnections } from '../utils/useConnections';
-import { findByDescription } from './FieldMappingForm';
 
 interface Props {
   onSelect: (field: any) => void;

src/components/ResourceForm.tsx

@@ -81,13 +81,19 @@ const ResourceForm = ({ resource, closeForm }: Props) => {
     {}
   );
 
+  const typeMap = sortedFormFields.reduce((acc: any, formField: FormField) => {
+    const { id, type } = formField;
+    acc[id] = type || undefined;
+    return acc;
+  }, {});
+
   const formik = useFormik({
     initialValues,
     onSubmit: async (values) => {
       const defaults = Object.entries(values)
         .map(([k, v]) => {
           return v !== undefined
-            ? { id: k, value: v, target: targetMap[k] }
+            ? { id: k, value: v, target: targetMap[k], type: typeMap[k] }
             : v;
         })
         .filter(Boolean);

src/utils/fieldMappingUtils.ts

@@ -0,0 +1,13 @@
+export const findByDescription = (obj: any, description: string): any => {
+  for (const key in obj) {
+    if (obj[key] instanceof Object) {
+      const result = findByDescription(obj[key], description);
+      if (result) {
+        return result;
+      }
+    } else if (key === 'description' && obj[key] === description) {
+      return obj;
+    }
+  }
+  return null;
+};

stories/Vault.stories.tsx

@@ -48,7 +48,9 @@ Programaticly.args = {
 export const SingleConnection = Template.bind({});
 SingleConnection.args = {
   trigger: (
-    <button className="p-2 border rounded shadow">Open Singe Connection</button>
+    <button className="p-2 border rounded shadow">
+      Open Single Connection
+    </button>
   ),
   unifiedApi: 'crm',
   serviceId: 'act',
@@ -68,7 +70,7 @@ export const ConfigurableResourcesView = Template.bind({});
 ConfigurableResourcesView.args = {
   trigger: (
     <button className="p-2 border rounded shadow">
-      Open configuruable resources
+      Open configurable resources
     </button>
   ),
   unifiedApi: 'crm',