feat: #1159 Updates required to the Webhooks page in the Developers P…

…ortal (#1169)

* feat: #1159 Updates required to Webhooks page in the Developers Portal

* chore: #1159 update webhook table render

* chore: #1159 update reducer loading, add call api func as a service

* chore: #1159 update route dispatcher webhook

packages/marketplace/src/actions/__tests__/webhook-edit-modal.ts

@@ -1,7 +1,6 @@
 import {
   requestWebhookSubcriptionData,
   requestWebhookSubcriptionReceiveData,
-  webhookEditLoading,
   createWebhook,
   CreateWebhookParams,
   requestWebhookData,
@@ -11,11 +10,6 @@ import ActionTypes from '../../constants/action-types'
 import { webhookDataStub } from '@/sagas/__stubs__/webhook-edit'
 
 describe('developer webhook actions', () => {
-  it('should create a developerWebhookLoading action', () => {
-    expect(webhookEditLoading.type).toEqual(ActionTypes.WEBHOOK_EDIT_LOADING)
-    expect(webhookEditLoading(true).data).toEqual(true)
-  })
-
   it('should create a requestDeveloperWebhookData action', () => {
     expect(requestWebhookSubcriptionData.type).toEqual(ActionTypes.WEBHOOK_EDIT_SUBCRIPTION_REQUEST_DATA)
   })

packages/marketplace/src/actions/webhook-edit-modal.ts

@@ -1,23 +1,19 @@
 import { actionCreator } from '../utils/actions'
 import ActionTypes from '../constants/action-types'
 import { WebhookModal, WebhookSubscription } from '@/reducers/webhook-edit-modal'
-import { StringMap } from '../../../elements/src/types/core'
 
 export interface SubscriptionCustomersRequestParams {
   AppId: string
 }
 export interface SubscriptionTopicsRequestParams {
   applicationId: string
-  headers: StringMap
 }
 
 export interface FetchWebhookRequestParams {
-  headers: StringMap
   webhookId: string
 }
 
 export interface DeleteWebhookRequestParams {
-  headers: StringMap
   webhookId: string
 }
 
@@ -52,7 +48,6 @@ export interface EditWebhookParams {
   active: boolean
 }
 
-export const webhookEditLoading = actionCreator<boolean>(ActionTypes.WEBHOOK_EDIT_LOADING)
 export const requestWebhookSubcriptionData = actionCreator<string>(ActionTypes.WEBHOOK_EDIT_SUBCRIPTION_REQUEST_DATA)
 export const requestWebhookSubcriptionReceiveData = actionCreator<WebhookSubscription>(
   ActionTypes.WEBHOOK_EDIT_SUBCRIPTION_RECEIVE_DATA,

packages/marketplace/src/actions/webhook-subscriptions.ts

@@ -6,6 +6,6 @@ export const webhookSubscriptionsRequestData = actionCreator<string>(ActionTypes
 export const webhookSubscriptionsReceiveData = actionCreator<PagedResultWebhookModel_>(
   ActionTypes.WEBHOOK_SUBSCRIPTION_RECEIVE_DATA,
 )
-export const webhookTopicsRequestData = actionCreator<void>(ActionTypes.WEBHOOK_TOPICS_REQUEST_DATA)
+export const webhookTopicsRequestData = actionCreator<string>(ActionTypes.WEBHOOK_TOPICS_REQUEST_DATA)
 export const webhookTopicsReceiveData = actionCreator<PagedResultTopicModel_>(ActionTypes.WEBHOOK_TOPICS_RECEIVE_DATA)
 export const setApplicationId = actionCreator<string>(ActionTypes.WEBHOOK_SET_APPLICATION_ID)

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

@@ -28,16 +28,7 @@ exports[`DeveloperWebHooks should match a snapshot 1`] = `
         <Component />
       </Formik>
       <Component>
-        <Component>
-          <Component
-            dataTest="logout-btn"
-            onClick={[Function]}
-            type="button"
-            variant="primary"
-          >
-            Add New Webhook
-          </Component>
-        </Component>
+        <Component />
       </Component>
       <Component
         columns={
@@ -47,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

@@ -6,10 +6,15 @@ import {
   mapStateToProps,
   mapDeveloperAppsToAppSelectBoxOptions,
   DeveloperWebhooks,
+  renderCustomerName,
+  renderTopicName,
+  openEditModal,
+  MODAL_TYPE,
+  openCreateModal,
 } from '../developer-webhooks'
 import { shallow } from 'enzyme'
 import { ReduxState } from '@/types/core'
-import { WebhookSubscriptionsState, WebhookTopicsState } from '@/reducers/webhook-subscriptions'
+import { WebhookSubscriptionsState, WebhookTopicsState, TopicModel } from '@/reducers/webhook-subscriptions'
 
 import { developerState } from '@/sagas/__stubs__/developer'
 import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
@@ -23,6 +28,7 @@ const props: DeveloperWebhooksProps = {
   setApplicationId: jest.fn(),
   applications: [],
   fetchTopics: jest.fn(),
+  fetchSubscriptions: jest.fn(),
   developerState,
   modalType: '',
   webhookSetOpenModal: jest.fn(),
@@ -92,27 +98,88 @@ describe('DeveloperWebHooks', () => {
   describe('mapDispatchToProps', () => {
     it('should call dispatch correctly', () => {
       const mockDispatch = jest.fn()
-      const { fetchTopics } = mapDispatchToProps(mockDispatch)
+      const { fetchTopics, fetchSubscriptions, setApplicationId, webhookSetOpenModal } = mapDispatchToProps(
+        mockDispatch,
+      )
+      fetchSubscriptions('applicationId')
       fetchTopics('applicationId')
+      setApplicationId('applicationId')
+      webhookSetOpenModal('applicationId')
       expect(mockDispatch).toBeCalled()
     })
   })
 
   describe('handleSubscriptionChange', () => {
     it('should run correctly', () => {
       const fetchTopics = jest.fn()
+      const fetchSubscriptions = jest.fn()
       const values = { applicationId: '123' }
-      handleSubscriptionChange(fetchTopics)(values)
+      handleSubscriptionChange({ fetchTopics, fetchSubscriptions })(values)
       expect(fetchTopics).toHaveBeenCalledWith(values.applicationId)
+      expect(fetchSubscriptions).toHaveBeenCalledWith(values.applicationId)
     })
   })
+  describe('renderTopicName', () => {
+    it('should run correctly', () => {
+      const topics: TopicModel[] = [
+        {
+          id: 'XXX',
+          created: '',
+          modified: '',
+          name: 'xxx',
+          description: '',
+          url: '',
+          active: false,
+          associatedScope: '',
+          example: '',
+        },
+        {
+          id: 'YYY',
+          created: '',
+          modified: '',
+          name: 'yyy',
+          description: '',
+          url: '',
+          active: false,
+          associatedScope: '',
+          example: '',
+        },
+      ]
+      const subscriptionTopicIds: string[] = ['XXX', 'YYY']
+      const result = renderTopicName(topics, subscriptionTopicIds)
+      const expected = ['xxx', 'yyy']
+      expect(result).toEqual(expected)
+    })
+  })
+  describe('renderCustomerName', () => {
+    it('should run correctly', () => {
+      const subscriptionCustomerIds = ['XXX', 'yyy']
+      const subscriptionCustomerIdsEmpty = []
+      const result = renderCustomerName(subscriptionCustomerIds)
+      const expected = ['XXX', 'yyy']
+      expect(result).toEqual(expected)
 
-  describe('getTableTopicsData', () => {
+      const emptyResult = renderCustomerName(subscriptionCustomerIdsEmpty)
+      expect(emptyResult).toEqual(['All Customers (*)'])
+    })
+  })
+  describe('openEditModal', () => {
     it('should run correctly', () => {
-      const fetchTopics = jest.fn()
-      const values = { applicationId: '123' }
-      handleSubscriptionChange(fetchTopics)(values)
-      expect(fetchTopics).toHaveBeenCalledWith(values.applicationId)
+      const webhookSetOpenModal = jest.fn()
+      const setWebhookId = jest.fn()
+      const webhookId = 'webhookId'
+
+      openEditModal({ webhookSetOpenModal, setWebhookId })(webhookId)
+      expect(webhookSetOpenModal).toBeCalledWith(MODAL_TYPE.EDIT)
+      expect(setWebhookId).toBeCalledWith(webhookId)
+    })
+  })
+  describe('openCreateModal', () => {
+    it('should run correctly', () => {
+      const webhookSetOpenModal = jest.fn()
+
+      openCreateModal(webhookSetOpenModal)()
+      expect(webhookSetOpenModal).toBeCalledWith(MODAL_TYPE.CREATE)
     })
   })
 })

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'
@@ -18,7 +18,11 @@ import {
 import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
 import { compose, Dispatch } from 'redux'
 import { Form, Formik } from 'formik'
-import { webhookSubscriptionsRequestData, setApplicationId } from '@/actions/webhook-subscriptions'
+import {
+  webhookSubscriptionsRequestData,
+  setApplicationId,
+  webhookTopicsRequestData,
+} from '@/actions/webhook-subscriptions'
 import { webhookSetOpenModal } from '@/actions/webhook-edit-modal'
 import { WebhookModel, TopicModel } from '@/reducers/webhook-subscriptions'
 import {
@@ -31,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',
@@ -39,10 +47,12 @@ export const columns = [
   {
     Header: 'Topics',
     accessor: 'topics',
+    Cell: CreatedCell,
   },
   {
     Header: 'Customer',
     accessor: 'customer',
+    Cell: CreatedCell,
   },
   {
     Header: 'Test Webhook',
@@ -54,12 +64,13 @@ export const columns = [
   },
 ]
 
-const MODAL_TYPE = {
+export const MODAL_TYPE = {
   EDIT: 'EDIT',
   CREATE: 'CREATE',
 }
 
-export const handleSubscriptionChange = fetchTopics => (values): void => {
+export const handleSubscriptionChange = ({ fetchTopics, fetchSubscriptions }) => (values): void => {
+  fetchSubscriptions(values.applicationId)
   fetchTopics(values.applicationId)
 }
 
@@ -78,20 +89,30 @@ export const openEditModal = ({ webhookSetOpenModal, setWebhookId }: OpenEditMod
   setWebhookId(webhookId)
 }
 
-export const renderTopicName = (subscriptionTopicIds: string[]) => {
-  return subscriptionTopicIds.join('\n')
+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
+}
+
+export const renderCustomerName = (subscriptionCustomerIds: string[]) => {
+  if (subscriptionCustomerIds.length) {
+    return subscriptionCustomerIds
+  }
+  return ['All Customers (*)']
 }
 
 type GetTableTopicsDataParams = {
   subscriptions: WebhookModel[]
+  topics: TopicModel[]
   handleOpenEditModal: (webhookId: string) => void
 }
 
-export const getTableTopicsData = ({ subscriptions, handleOpenEditModal }: GetTableTopicsDataParams) => {
+export const getTableTopicsData = ({ subscriptions, topics, handleOpenEditModal }: GetTableTopicsDataParams) => {
   return subscriptions?.map((subscription: WebhookModel) => ({
     url: subscription.url,
-    topics: renderTopicName(subscription.topicIds),
-    customer: 'All Customers (*)',
+    topics: renderTopicName(topics, subscription.topicIds),
+    customer: renderCustomerName(subscription.customerIds),
     test: 'Ping',
     edit: (
       <Button
@@ -130,8 +151,10 @@ export const mapDeveloperAppsToAppSelectBoxOptions: (
 
 export const DeveloperWebhooks = ({
   fetchTopics,
+  fetchSubscriptions,
   subscriptions,
   subscriptionsLoading,
+  topics,
   applicationId,
   developerState,
   webhookSetOpenModal,
@@ -172,15 +195,17 @@ export const DeveloperWebhooks = ({
                   labelText="App"
                   id="subscription"
                 />
-                <FormikAutoSave onSave={handleSubscriptionChange(fetchTopics)} />
+                <FormikAutoSave onSave={handleSubscriptionChange({ fetchTopics, fetchSubscriptions })} />
               </Form>
             )}
           </Formik>
           <Section>
             <LevelRight>
-              <Button dataTest="logout-btn" variant="primary" type="button" onClick={handleOpenCreateModal}>
-                Add New Webhook
-              </Button>
+              {applicationId && (
+                <Button dataTest="logout-btn" variant="primary" type="button" onClick={handleOpenCreateModal}>
+                  Add New Webhook
+                </Button>
+              )}
             </LevelRight>
           </Section>
           {unfetched || loading || subscriptionsLoading ? (
@@ -189,7 +214,7 @@ export const DeveloperWebhooks = ({
             <Table
               scrollable
               columns={columns}
-              data={getTableTopicsData({ subscriptions, handleOpenEditModal })}
+              data={getTableTopicsData({ subscriptions, handleOpenEditModal, topics })}
               loading={false}
             />
           )}
@@ -208,6 +233,7 @@ export const DeveloperWebhooks = ({
 }
 
 export type DispatchProps = {
+  fetchSubscriptions: (applicationId: string) => void
   fetchTopics: (applicationId: string) => void
   setApplicationId: (applicationId: string) => void
   webhookSetOpenModal: (type: string) => void
@@ -225,7 +251,8 @@ export const mapStateToProps = (state: ReduxState): StateProps => ({
 
 export const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
   return {
-    fetchTopics: (applicationId: string) => dispatch(webhookSubscriptionsRequestData(applicationId)),
+    fetchSubscriptions: (applicationId: string) => dispatch(webhookSubscriptionsRequestData(applicationId)),
+    fetchTopics: (applicationId: string) => dispatch(webhookTopicsRequestData(applicationId)),
     setApplicationId: (applicationId: string) => dispatch(setApplicationId(applicationId)),
     webhookSetOpenModal: (type: string) => dispatch(webhookSetOpenModal(type)),
   }

packages/marketplace/src/components/ui/__tests__/__snapshots__/webhook-edit-modal.tsx.snap

@@ -100,7 +100,6 @@ exports[`WebhookEditModal should match a snapshot 5`] = `
               ]
             }
             placeholder="All Customers who have installed your application (default)"
-            required={true}
           />
           <Unknown
             id="active"