remove hard coded dest usage

target · Feb 15, 2024 · a8535fa · a8535fa
1 parent 02f6659
commit a8535fa
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 18 deletions.
diff --git a/web/src/app/storybook/defaultDestTypes.ts b/web/src/app/storybook/defaultDestTypes.ts
@@ -183,8 +183,8 @@ export const destTypes: DestinationTypeInfo[] = [
         fieldID: 'webhook-url',
         labelSingular: 'Webhook Url',
         labelPlural: '',
-        hint: 'Some hint text',
-        hintURL: '',
+        hint: 'Webhook Documentation',
+        hintURL: '/docs#webhooks',
         placeholderText: 'https://target.com',
         prefix: '',
         inputType: 'url',

diff --git a/web/src/app/users/UserContactMethodListDest.stories.tsx b/web/src/app/users/UserContactMethodListDest.stories.tsx
@@ -112,7 +112,7 @@ export const SingleContactMethod: Story = {
     const canvas = within(canvasElement)
 
     // ensure correct info is displayed for single-field CM
-    await expect(await canvas.findByText('Josiah (single-field)')).toBeVisible()
+    await expect(await canvas.findByText('Josiah (Phone Number)')).toBeVisible()
     await expect(await canvas.findByText('+1 555-555-5555')).toBeVisible()
 
     // ensure CM is editable
@@ -147,16 +147,16 @@ export const MultiContactMethods: Story = {
 
     // ensure correct info is displayed for webhook CM
     await expect(
-      await canvas.findByText('my_webhook (webhook-field)'),
+      await canvas.findByText('my_webhook (Webhook Url)'),
     ).toBeVisible()
-    await expect(canvas.getByText('docs')).toHaveAttribute(
+    await expect(canvas.getByText('Webhook Documentation')).toHaveAttribute(
       'href',
       '/docs#webhooks',
     )
 
     // ensure correct info is displayed for triple-field CM
     await expect(
-      await canvas.findByText('triple contact method (triple-field)'),
+      await canvas.findByText('triple contact method (First Item)'),
     ).toBeVisible()
     await expect(await canvas.findByText('+1 555-555-5555')).toBeVisible()
     await expect(await canvas.findByText('test_user@target.com')).toBeVisible()
@@ -176,7 +176,7 @@ export const SingleReadOnlyContactMethods: Story = {
     const canvas = within(canvasElement)
 
     // ensure correct info is displayed for single-field CM
-    await expect(await canvas.findByText('Josiah (single-field)')).toBeVisible()
+    await expect(await canvas.findByText('Josiah (Phone Number)')).toBeVisible()
     await expect(await canvas.findByText('+1 555-555-5555')).toBeVisible()
 
     // ensure no edit icons exist for read-only CM

diff --git a/web/src/app/users/UserContactMethodListDest.tsx b/web/src/app/users/UserContactMethodListDest.tsx
@@ -23,9 +23,13 @@ import { GenericError, ObjectNotFound } from '../error-pages'
 import SendTestDialog from './SendTestDialog'
 import AppLink from '../util/AppLink'
 import { styles as globalStyles } from '../styles/materialStyles'
-import { UserContactMethod } from '../../schema'
+import {
+  DestinationFieldConfig,
+  FieldValuePair,
+  UserContactMethod,
+} from '../../schema'
 import UserContactMethodCreateDialog from './UserContactMethodCreateDialog'
-import { useSessionInfo } from '../util/RequireConfig'
+import { useSessionInfo, useContactMethodTypes } from '../util/RequireConfig'
 
 const query = gql`
   query cmList($id: ID!) {
@@ -41,6 +45,12 @@ const query = gql`
             value
             label
           }
+          displayInfo {
+            text
+            iconURL
+            iconAltText
+            linkURL
+          }
         }
         disabled
         pending
@@ -76,6 +86,7 @@ export default function UserContactMethodListDest(
   const [showEditDialogByID, setShowEditDialogByID] = useState('')
   const [showDeleteDialogByID, setShowDeleteDialogByID] = useState('')
   const [showSendTestByID, setShowSendTestByID] = useState('')
+  const destinationTypes = useContactMethodTypes()
 
   const [{ error, data }] = useQuery({
     query,
@@ -173,19 +184,22 @@ export default function UserContactMethodListDest(
     )
   }
 
-  function getSubText(cm: UserContactMethod): JSX.Element {
+  function getSubText(
+    cm: UserContactMethod,
+    fieldInfo: DestinationFieldConfig | undefined,
+  ): JSX.Element {
     return (
       <React.Fragment>
         {cm.dest.values.map((v) => {
           let cmText = v.label
           if (cm.pending) {
             cmText = `${cmText} - this contact method will be automatically deleted if not verified`
           }
-          if (v.fieldID === 'webhook-url') {
+          if (fieldInfo?.hintURL) {
             return (
               <Typography key={v.toString()}>
                 {`${cmText} (`}
-                <AppLink to='/docs#webhooks'>docs</AppLink>)
+                <AppLink to={fieldInfo.hintURL}>{fieldInfo.hint}</AppLink>)
               </Typography>
             )
           }
@@ -218,12 +232,23 @@ export default function UserContactMethodListDest(
         />
         <FlatList
           data-cy='contact-methods'
-          items={sortContactMethods(contactMethods).map((cm) => ({
-            title: `${cm.name} (${cm.dest.type})${cm.disabled ? ' - Disabled' : ''}`,
-            subText: getSubText(cm),
-            secondaryAction: getSecondaryAction(cm),
-            icon: getIcon(cm),
-          }))}
+          items={sortContactMethods(contactMethods).map((cm) => {
+            const destType = destinationTypes.find(
+              (d) => d.type === cm.dest.type,
+            )
+            const fieldInfo = destType?.requiredFields.find((rf) =>
+              cm.dest.values.find(
+                (f: FieldValuePair) => f.fieldID === rf.fieldID,
+              ),
+            )
+
+            return {
+              title: `${cm.name} (${fieldInfo?.labelSingular})${cm.disabled ? ' - Disabled' : ''}`,
+              subText: getSubText(cm, fieldInfo),
+              secondaryAction: getSecondaryAction(cm),
+              icon: getIcon(cm),
+            }
+          })}
           emptyMessage='No contact methods'
         />
         {showAddDialog && (