better user profile display

swishjam · Apr 23, 2024 · 2b159a2 · 2b159a2
1 parent 40a53f1
commit 2b159a2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 35 deletions.
diff --git a/dashboard/src/components/Profiles/ProfileInformationSideBar.js b/dashboard/src/components/Profiles/ProfileInformationSideBar.js
@@ -8,6 +8,7 @@ import { Tooltipable } from '@/components/ui/tooltip'
 import { prettyDateTime } from "@/lib/utils/timeHelpers";
 import ProfileTags from "./ProfileTags";
 import CopiableText from "../utils/CopiableText";
+import { MaybeExternalLink } from "../utils/MaybeExternalLink";
 
 const shouldHumanizeValue = key => (
   !key.toLowerCase().endsWith('_id') &&
@@ -17,6 +18,8 @@ const shouldHumanizeValue = key => (
   !key.toLowerCase().includes('gclid')
 )
 
+const LINKABLE_METADATA_KEYS = ['initial_landing_page_url', 'initial_referrer_url', 'initial_referrer']
+
 export default function ProfileInformationSideBar({ userData, hasStripeIntegrationEnabled, hasProfileEnrichmentEnabled }) {
   const hasNoEnrichmentData = !userData.enrichment_data?.job_title &&
     !userData.enrichment_data?.twitter_url &&
@@ -26,7 +29,7 @@ export default function ProfileInformationSideBar({ userData, hasStripeIntegrati
     !userData.enrichment_data?.company_industry &&
     !userData.enrichment_data?.company_location_metro;
 
-  const metadataKeysToDisplay = Object.keys(userData.metadata || {}).filter(key => !['name', 'firstName', 'first_name', 'lastName', 'last_name', 'initial_landing_page_url', 'initial_referrer_url', 'gravatar_url'].includes(key))
+  const metadataKeysToDisplay = Object.keys(userData.metadata || {}).filter(key => !['name', 'firstName', 'first_name', 'lastName', 'last_name', 'gravatar_url'].includes(key))
 
   return (
     <Card className='col-span-4 relative'>
@@ -111,43 +114,30 @@ export default function ProfileInformationSideBar({ userData, hasStripeIntegrati
                 </dd>
               </div>
               <>
-                <EnrichedDataItem
-                  title='Initial Referrer'
-                  enrichmentData={{ initial_referrer: userData.metadata.initial_referrer_url }}
-                  enrichmentKey='initial_referrer'
-                  formatter={referrer => (
-                    <Tooltipable content={referrer}>
-                      <span className="flex items-center justify-end max-w-full">
-                        <span className='truncate'>{referrer === '' ? 'Direct' : referrer}</span>
-                      </span>
-                    </Tooltipable>
-                  )}
-                />
-                <EnrichedDataItem
-                  title='Initial Landing Page'
-                  enrichmentData={{ initial_landing_page_url: userData.metadata.initial_landing_page_url }}
-                  enrichmentKey='initial_landing_page_url'
-                  formatter={url => (
-                    <Tooltipable content={url}>
-                      <a
-                        className="hover:underline hover:text-blue-400 transition duration-500 flex items-center justify-end max-w-full"
-                        href={url}
-                        target="_blank"
-                        title={url}
-                      >
-                        <span className='truncate'>
-                          {url}
-                        </span>
-                        <ArrowTopRightOnSquareIcon className='inline-block ml-1 h-3 w-3' />
-                      </a>
-                    </Tooltipable>
-                  )}
-                />
                 {metadataKeysToDisplay.map((key, i) => (
                   <div className="px-4 py-2 col-span-1 grid grid-cols-2 sm:px-0">
                     <dt className="text-sm font-medium leading-6 text-gray-900">{humanizeVariable(key)}</dt>
                     <dd className="text-sm leading-6 text-gray-700 text-right flex flex-col">
-                      {!shouldHumanizeValue(key) ? userData.metadata[key] : humanizeVariable([undefined, null].includes(userData.metadata[key]) ? '-' : userData.metadata[key].toString())}
+                      <span className='flex justify-end truncate'>
+                        {LINKABLE_METADATA_KEYS.includes(key)
+                          && (
+                            userData.metadata[key]
+                              ? <MaybeExternalLink href={userData.metadata[key]} newTab={true} className='truncate justify-self-end'>
+                                {userData.metadata[key]}
+                              </MaybeExternalLink>
+                              : '-'
+                          )
+                        }
+                        {!LINKABLE_METADATA_KEYS.includes(key) && (
+                          !shouldHumanizeValue(key)
+                            ? userData.metadata[key]
+                            : humanizeVariable(
+                              [undefined, null].includes(userData.metadata[key])
+                                ? '-'
+                                : userData.metadata[key].toString()
+                            )
+                        )}
+                      </span>
                     </dd>
                   </div>
                 ))}

diff --git a/dashboard/src/components/utils/MaybeExternalLink.js b/dashboard/src/components/utils/MaybeExternalLink.js
@@ -7,8 +7,8 @@ export const MaybeExternalLink = ({ children, href, ...props }) => {
     <Link
       href={href}
       target={isExternal ? '_blank' : props.target}
-      className={`group text-blue-600 flex items-center space-x-1 cursor-pointer ${props.className}`}
       {...props}
+      className={`group text-blue-600 flex items-center space-x-1 cursor-pointer ${props.className}`}
     >
       <>
         <div className='group-hover:underline'>