chore: #1159 update webhook table render

packages/marketplace/src/components/pages/__tests__/__snapshots__/developer-webhooks.tsx.snap

@@ -38,10 +38,12 @@ exports[`DeveloperWebHooks should match a snapshot 1`] = `
               "accessor": "url",
             },
             Object {
+              "Cell": [Function],
               "Header": "Topics",
               "accessor": "topics",
             },
             Object {
+              "Cell": [Function],
               "Header": "Customer",
               "accessor": "customer",
             },

packages/marketplace/src/components/pages/__tests__/developer-webhooks.tsx

@@ -147,7 +147,7 @@ describe('DeveloperWebHooks', () => {
       ]
       const subscriptionTopicIds: string[] = ['XXX', 'YYY']
       const result = renderTopicName(topics, subscriptionTopicIds)
-      const expected = 'xxx\nyyy'
+      const expected = ['xxx', 'yyy']
       expect(result).toEqual(expected)
     })
   })
@@ -156,11 +156,11 @@ describe('DeveloperWebHooks', () => {
       const subscriptionCustomerIds = ['XXX', 'yyy']
       const subscriptionCustomerIdsEmpty = []
       const result = renderCustomerName(subscriptionCustomerIds)
-      const expected = 'XXX\nyyy'
+      const expected = ['XXX', 'yyy']
       expect(result).toEqual(expected)
 
       const emptyResult = renderCustomerName(subscriptionCustomerIdsEmpty)
-      expect(emptyResult).toEqual('All Customers (*)')
+      expect(emptyResult).toEqual(['All Customers (*)'])
     })
   })
   describe('openEditModal', () => {

packages/marketplace/src/components/pages/developer-webhooks.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Loader, SelectBoxOptions } from '@reapit/elements'
 import { ReduxState } from '@/types/core'
 import { DeveloperState } from '@/reducers/developer'
@@ -35,6 +35,10 @@ import FormikAutoSave from '@/components/hocs/formik-auto-save'
 import WebhookEditModal from '../ui/webhook-edit-modal'
 import { selectDeveloperApps } from '@/selector/developer'
 
+export const CreatedCell = ({ cell: { value } }): ReactElement[] => {
+  return value.map((line, index) => <p key={index}>{line}</p>)
+}
+
 export const columns = [
   {
     Header: 'URL',
@@ -43,10 +47,12 @@ export const columns = [
   {
     Header: 'Topics',
     accessor: 'topics',
+    Cell: CreatedCell,
   },
   {
     Header: 'Customer',
     accessor: 'customer',
+    Cell: CreatedCell,
   },
   {
     Header: 'Test Webhook',
@@ -86,14 +92,14 @@ export const openEditModal = ({ webhookSetOpenModal, setWebhookId }: OpenEditMod
 export const renderTopicName = (topics: TopicModel[], subscriptionTopicIds: string[]) => {
   const subscriptionTopics = topics.filter(topic => subscriptionTopicIds.includes(topic.id))
   const subscriptionTopicsName = subscriptionTopics.map(topic => topic.name)
-  return subscriptionTopicsName.join('\n')
+  return subscriptionTopicsName
 }
 
 export const renderCustomerName = (subscriptionCustomerIds: string[]) => {
   if (subscriptionCustomerIds.length) {
-    return subscriptionCustomerIds.join('\n')
+    return subscriptionCustomerIds
   }
-  return 'All Customers (*)'
+  return ['All Customers (*)']
 }
 
 type GetTableTopicsDataParams = {