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

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
 }
 

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={

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\nyyy'
+      expect(result).toEqual(expected)
+    })
+  })
+  describe('renderCustomerName', () => {
+    it('should run correctly', () => {
+      const subscriptionCustomerIds = ['XXX', 'yyy']
+      const subscriptionCustomerIdsEmpty = []
+      const result = renderCustomerName(subscriptionCustomerIds)
+      const expected = 'XXX\nyyy'
+      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

@@ -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 {
@@ -54,12 +58,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 +83,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.join('\n')
+}
+
+export const renderCustomerName = (subscriptionCustomerIds: string[]) => {
+  if (subscriptionCustomerIds.length) {
+    return subscriptionCustomerIds.join('\n')
+  }
+  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 +145,10 @@ export const mapDeveloperAppsToAppSelectBoxOptions: (
 
 export const DeveloperWebhooks = ({
   fetchTopics,
+  fetchSubscriptions,
   subscriptions,
   subscriptionsLoading,
+  topics,
   applicationId,
   developerState,
   webhookSetOpenModal,
@@ -172,15 +189,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 +208,7 @@ export const DeveloperWebhooks = ({
             <Table
               scrollable
               columns={columns}
-              data={getTableTopicsData({ subscriptions, handleOpenEditModal })}
+              data={getTableTopicsData({ subscriptions, handleOpenEditModal, topics })}
               loading={false}
             />
           )}
@@ -208,6 +227,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 +245,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

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

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

@@ -79,9 +79,14 @@ describe('WebhookEditModal', () => {
   describe('mapDispatchToProps', () => {
     it('should run correctly', () => {
       const mockDispatch = jest.fn()
-      const { requestWebhookSubcriptionData, createWebhook, editWebhook, requestWebhookData } = mapDispatchToProps(
-        mockDispatch,
-      )
+      const {
+        requestWebhookSubcriptionData,
+        createWebhook,
+        editWebhook,
+        requestWebhookData,
+        webhookDataClear,
+        deleteWebhook,
+      } = mapDispatchToProps(mockDispatch)
       requestWebhookSubcriptionData('1')
       requestWebhookData('1')
       const values = {
@@ -95,6 +100,8 @@ describe('WebhookEditModal', () => {
       }
       createWebhook(values)
       editWebhook(values)
+      webhookDataClear()
+      deleteWebhook(values)
       expect(mockDispatch).toBeCalled()
     })
   })

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

@@ -224,7 +224,6 @@ export const WebhookModalInner: React.FunctionComponent<WebhookModalInnerProps>
                 labelText="Subscription Customers"
                 options={customerOptions}
                 dropdownStyle={{ zIndex: 41 }}
-                required
               />
               <Checkbox id="active" name="active" labelText="Active" />
             </>