From a8535fa35dfe1bb9f333d48fa69b90477a2ce183 Mon Sep 17 00:00:00 2001 From: tony-tvu Date: Thu, 15 Feb 2024 13:25:55 -0600 Subject: [PATCH] remove hard coded dest usage --- web/src/app/storybook/defaultDestTypes.ts | 4 +- .../UserContactMethodListDest.stories.tsx | 10 ++-- .../app/users/UserContactMethodListDest.tsx | 47 ++++++++++++++----- 3 files changed, 43 insertions(+), 18 deletions(-) diff --git a/web/src/app/storybook/defaultDestTypes.ts b/web/src/app/storybook/defaultDestTypes.ts index 6bcdbfe09e..ec1ea036e7 100644 --- 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 index abc4f310df..d4f9ccfd0d 100644 --- 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 index 4c75880f4c..289073d495 100644 --- 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,7 +184,10 @@ export default function UserContactMethodListDest( ) } - function getSubText(cm: UserContactMethod): JSX.Element { + function getSubText( + cm: UserContactMethod, + fieldInfo: DestinationFieldConfig | undefined, + ): JSX.Element { return ( {cm.dest.values.map((v) => { @@ -181,11 +195,11 @@ export default function UserContactMethodListDest( if (cm.pending) { cmText = `${cmText} - this contact method will be automatically deleted if not verified` } - if (v.fieldID === 'webhook-url') { + if (fieldInfo?.hintURL) { return ( {`${cmText} (`} - docs) + {fieldInfo.hint}) ) } @@ -218,12 +232,23 @@ export default function UserContactMethodListDest( /> ({ - 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 && (