Fix required field mappings

apideck-libraries · Oct 5, 2023 · 40d1664 · 40d1664
1 parent c464b25
commit 40d1664
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 86 deletions.
diff --git a/src/components/ConnectionDetails.tsx b/src/components/ConnectionDetails.tsx
@@ -8,6 +8,7 @@ import { authorizationVariablesRequired } from '../utils/authorizationVariablesR
 import { getApiName } from '../utils/getApiName';
 import { hasMissingRequiredFields } from '../utils/hasMissingRequiredFields';
 import { useConnections } from '../utils/useConnections';
+import { useSession } from '../utils/useSession';
 import AuthorizeButton from './AuthorizeButton';
 import ConnectionForm from './ConnectionForm';
 import Divider from './Divider';
@@ -42,6 +43,8 @@ const ConnectionDetails = ({
     resources,
     singleConnectionMode,
   } = useConnections();
+
+  const { session } = useSession();
   if (!selectedConnection) return null;
 
   const {
@@ -223,15 +226,15 @@ const ConnectionDetails = ({
             </div>
           )}
 
-          {hasRequiredMappings && (
-            <div className="max-w-md w-full rounded-md p-4 bg-blue-50 text-center mt-4">
+          {selectedConnection.state === 'callable' && hasRequiredMappings && (
+            <div className="max-w-md w-full rounded-md p-4 bg-gray-50 text-center mt-4 border border-gray-100">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="currentColor"
-                className="w-6 h-6 mx-auto text-blue-600"
+                className="w-6 h-6 mx-auto text-gray-600"
               >
                 <path
                   strokeLinecap="round"
@@ -242,16 +245,21 @@ const ConnectionDetails = ({
 
               <h3
                 data-testid="alert-title"
-                className="mt-2 text-sm font-medium text-blue-800 dark:text-white"
+                className="mt-2 text-sm font-medium text-gray-800 dark:text-white"
               >
-                Required field mappings.
+                Missing required field mappings.
               </h3>
               <Button
-                size="small"
-                className="mt-2 flex items-center bg-blue-600 hover:bg-blue-700 w-full"
+                // size="small"
+                className="mt-3 flex items-center w-full"
                 onClick={() => setShowFieldMapping(true)}
+                style={
+                  session?.theme?.primary_color
+                    ? { backgroundColor: session?.theme.primary_color }
+                    : {}
+                }
               >
-                <span>Map required fields</span>
+                <span>Field Mapping</span>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"

diff --git a/src/components/ConnectionForm.tsx b/src/components/ConnectionForm.tsx
@@ -61,6 +61,9 @@ const ConnectionForm = ({ connection, setShowSettings, settings }: Props) => {
             type: 'success',
             title: `Successfully connected to ${connection.name}`,
           });
+          if (updatedConnection.state === 'callable') {
+            setShowSettings(false);
+          }
         }
 
         setValidationState(valid ? 'valid' : 'invalid');

diff --git a/src/components/FieldMapping.tsx b/src/components/FieldMapping.tsx
@@ -65,7 +65,7 @@ const FieldMapping = ({ setShowFieldMapping, TopBarComponent }) => {
 
         {!selectedCustomMapping && (
           <div className="bg-gray-50 p-5 border-t border-b border-gray-200 max-h-[480px] overflow-y-auto">
-            <div className="flex flex-col space-y-3">
+            <div className="flex flex-col space-y-4">
               {selectedConnection?.custom_mappings?.map(
                 (mapping: CustomMapping) => {
                   return (

diff --git a/src/components/FieldMappingForm.tsx b/src/components/FieldMappingForm.tsx
@@ -105,36 +105,40 @@ const FieldMappingForm = ({
   return (
     <div>
       <div className="bg-gray-50 p-5 border-t border-b border-gray-200 fade-in">
-        <div className="ring-1 ring-gray-200 rounded-2xl p-4 bg-white space-y-2.5">
-          <h2 className="text-gray-900 font-semibold">
-            <div
-              className="flex items-center justify-between space-x-2.5 truncate"
-              style={{ minWidth: 170 }}
-            >
-              {session?.theme?.logo && (
-                <img
-                  src={session?.theme?.logo}
-                  alt="logo"
-                  className="w-7 h-7 rounded-full ring-2 ring-gray-100"
-                />
-              )}
-              <code className="truncate">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1 text-center">
+            Target Field
+          </label>
+          <div className="ring-1 ring-gray-200 rounded-2xl p-4 bg-white space-y-2.5">
+            <h2 className="text-gray-900 font-semibold">
+              <div
+                className="flex items-center justify-between space-x-2.5 truncate"
+                style={{ minWidth: 170 }}
+              >
+                {session?.theme?.logo && (
+                  <img
+                    src={session?.theme?.logo}
+                    alt="logo"
+                    className="w-7 h-7 rounded-full ring-2 ring-gray-100"
+                  />
+                )}
+
                 {selectedCustomMapping?.label || selectedCustomMapping?.key}
-              </code>
-            </div>
-          </h2>
-          <p className="text-sm leading-6 text-gray-600 truncate">
-            {selectedCustomMapping?.description || selectedCustomMapping?.key}
-          </p>
-          <p className="flex items-baseline gap-x-1">
-            <div className="inline-flex items-center px-2 py-1 text-xs font-medium text-center text-gray-600 bg-gray-50 ring-1 ring-gray-200/70 rounded-lg">
-              <code>{`${selectedCustomMapping.id.split('+')[0]} / ${
-                selectedCustomMapping.id.split('+')[1]
-              }`}</code>
-            </div>
-          </p>
+              </div>
+            </h2>
+            <p className="text-sm leading-6 text-gray-600 truncate">
+              {selectedCustomMapping?.description || selectedCustomMapping?.key}
+            </p>
+            <p className="flex items-baseline gap-x-1">
+              <div className="inline-flex items-center px-2 py-1 text-xs font-medium text-center text-gray-600 bg-gray-50 ring-1 ring-gray-200/70 rounded-lg">
+                {`${selectedCustomMapping.id.split('+')[0]} / ${
+                  selectedCustomMapping.id.split('+')[1]
+                }`}
+              </div>
+            </p>
+          </div>
         </div>
-        <div className="flex items-center justify-center py-2.5">
+        {/* <div className="flex items-center justify-center py-2.5">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -149,27 +153,32 @@ const FieldMappingForm = ({
               d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
             />
           </svg>
+        </div> */}
+        <div className="mt-4">
+          <label className="block text-sm font-medium text-gray-700 mb-1 text-center">
+            Source Field
+          </label>
+          <FieldSelector
+            className="col-span-5"
+            onSelect={(mappingField: any) => setSelectedMapping(mappingField)}
+            isLoading={!schema && !customFields}
+            buttonRef={buttonRef}
+            customFields={customFields}
+            triggerComponent={
+              <OriginFieldCard
+                selectedCustomMapping={selectedCustomMapping}
+                selectedConnection={selectedConnection}
+                selectedMapping={selectedMapping}
+              />
+            }
+            triggerComponentProps={{
+              className: 'text-left w-full h-full',
+            }}
+            responseDataPath={responseDataPath}
+            properties={properties ? Object.entries(properties) : []}
+            selectedCustomMapping={selectedCustomMapping}
+          />
         </div>
-        <FieldSelector
-          className="col-span-5"
-          onSelect={(mappingField: any) => setSelectedMapping(mappingField)}
-          isLoading={!schema && !customFields}
-          buttonRef={buttonRef}
-          customFields={customFields}
-          triggerComponent={
-            <OriginFieldCard
-              selectedCustomMapping={selectedCustomMapping}
-              selectedConnection={selectedConnection}
-              selectedMapping={selectedMapping}
-            />
-          }
-          triggerComponentProps={{
-            className: 'text-left w-full h-full',
-          }}
-          responseDataPath={responseDataPath}
-          properties={properties ? Object.entries(properties) : []}
-          selectedCustomMapping={selectedCustomMapping}
-        />
         <Button
           text={'Save field mapping'}
           onClick={createCustomMapping}
@@ -200,33 +209,33 @@ const OriginFieldCard = ({
   selectedMapping,
   open,
 }: OriginFieldCardProps) => {
+  const { session } = useSession();
   return (
-    <div className="ring-1 ring-gray-200 rounded-2xl p-5 h-full group hover:shadow transition duration-100 bg-white">
+    <div className="ring-1 ring-gray-200 rounded-2xl p-5 h-full group hover:shadow-md transition duration-100 bg-white">
       <h2 className="text-gray-900 font-semibold">
         <div
           className="flex items-center justify-between space-x-2.5 truncate"
           style={{ minWidth: 170 }}
         >
-          <img
-            src={selectedConnection?.icon || selectedConnection?.logo}
-            alt={selectedConnection?.id}
-            className="w-7 h-7 rounded-full ring-2 ring-gray-100"
-          />
-
+          {session?.theme?.logo && (
+            <img
+              src={selectedConnection?.icon || selectedConnection?.logo}
+              alt={selectedConnection?.id}
+              className="w-7 h-7 rounded-full ring-2 ring-gray-100"
+            />
+          )}
           <div className="flex-1 truncate hidden sm:flex items-center justify-between">
             <span className="truncate">
-              <code className="font-bold">
-                {!selectedMapping && selectedCustomMapping?.value
-                  ? extractLastAttribute(
-                      selectedCustomMapping.value?.toString(),
-                      selectedCustomMapping.custom_field
-                    )
-                  : selectedMapping
-                  ? selectedMapping.title
-                  : selectedCustomMapping?.custom_field
-                  ? 'Select custom field'
-                  : 'Select field'}
-              </code>
+              {!selectedMapping && selectedCustomMapping?.value
+                ? extractLastAttribute(
+                    selectedCustomMapping.value?.toString(),
+                    selectedCustomMapping.custom_field
+                  )
+                : selectedMapping
+                ? selectedMapping.title
+                : selectedCustomMapping?.custom_field
+                ? 'Select custom field'
+                : 'Select field'}
             </span>
             {open ? (
               <svg
@@ -235,7 +244,7 @@ const OriginFieldCard = ({
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="currentColor"
-                className="text-gray-400 group-hover:text-gray-900 transition duration-100 h-5 w-5"
+                className="text-gray-500 group-hover:text-gray-900 transition duration-100 h-5 w-5"
               >
                 <path
                   strokeLinecap="round"
@@ -271,14 +280,17 @@ const OriginFieldCard = ({
             </span>
           </p>
 
-          <p className="mt-1 text-sm leading-6 text-gray-600 truncate">
-            Example:{' '}
-            <span className="font-medium text-gray-800">
-              {selectedMapping.example?.toString() ||
-                selectedMapping?.value?.toString() ||
-                '-'}
-            </span>
-          </p>
+          {selectedMapping.example?.toString() ||
+            (selectedMapping?.value?.toString() && (
+              <p className="mt-1 text-sm leading-6 text-gray-600 truncate">
+                Example:{' '}
+                <span className="font-medium text-gray-800">
+                  {selectedMapping.example?.toString() ||
+                    selectedMapping?.value?.toString() ||
+                    '-'}
+                </span>
+              </p>
+            ))}
         </div>
       ) : (
         <p className="mt-2 text-sm leading-6 text-gray-600">

diff --git a/src/components/FieldSelector.tsx b/src/components/FieldSelector.tsx
@@ -269,7 +269,7 @@ const FieldSelector = ({
           >
             <Menu.Items
               className="absolute rounded-t-2xl z-40 mt-2 w-[calc(100%-0px)] left-[0px] origin-top-right overflow-hidden bg-white shadow-lg ring-1 ring-gray-200 rounded-b-2xl focus:outline-none"
-              style={{ top: -108 }}
+              style={{ top: -104 }}
             >
               <div className="max-h-[330px] 2xl:max-h-[380px] overflow-y-auto divide-y divide-gray-200">
                 <nav