diff --git a/awx/ui_next/src/screens/WorkflowApproval/WorkflowApproval.test.jsx b/awx/ui_next/src/screens/WorkflowApproval/WorkflowApproval.test.jsx
index 17dc835be4..1bec6f0970 100644
--- a/awx/ui_next/src/screens/WorkflowApproval/WorkflowApproval.test.jsx
+++ b/awx/ui_next/src/screens/WorkflowApproval/WorkflowApproval.test.jsx
@@ -6,7 +6,7 @@ import {
   mountWithContexts,
   waitForElement,
 } from '../../../testUtils/enzymeHelpers';
-import mockDetails from './data.workflowApproval.json';
+import mockWorkflowApprovals from './data.workflowApprovals.json';
 import WorkflowApproval from './WorkflowApproval';
 
 jest.mock('../../api');
@@ -18,7 +18,9 @@ const mockMe = {
 
 describe('<WorkflowApproval />', () => {
   test('initially renders succesfully', async () => {
-    WorkflowApprovalsAPI.readDetail.mockResolvedValue({ data: mockDetails });
+    WorkflowApprovalsAPI.readDetail.mockResolvedValue({
+      data: mockWorkflowApprovals.results[0],
+    });
     await act(async () => {
       mountWithContexts(
         <WorkflowApproval setBreadcrumb={() => {}} me={mockMe} />
diff --git a/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalDetail/WorkflowApprovalDetail.test.jsx b/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalDetail/WorkflowApprovalDetail.test.jsx
index 9ea6f0bfa4..ff59b6ad01 100644
--- a/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalDetail/WorkflowApprovalDetail.test.jsx
+++ b/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalDetail/WorkflowApprovalDetail.test.jsx
@@ -7,7 +7,9 @@ import {
 import { WorkflowApprovalsAPI } from '../../../api';
 import { formatDateString } from '../../../util/dates';
 import WorkflowApprovalDetail from './WorkflowApprovalDetail';
-import workflowApproval from '../data.workflowApproval.json';
+import mockWorkflowApprovals from '../data.workflowApprovals.json';
+
+const workflowApproval = mockWorkflowApprovals.results[0];
 
 jest.mock('../../../api');
 
diff --git a/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalList.test.jsx b/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalList.test.jsx
index ee6391f28b..78a299d1ad 100644
--- a/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalList.test.jsx
+++ b/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalList.test.jsx
@@ -3,169 +3,17 @@ import { act } from 'react-dom/test-utils';
 import { WorkflowApprovalsAPI } from '../../../api';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 import WorkflowApprovalList from './WorkflowApprovalList';
+import mockWorkflowApprovals from '../data.workflowApprovals.json';
 
 jest.mock('../../../api');
 
-const mockWorkflowApprovals = [
-  {
-    id: 221,
-    type: 'workflow_approval',
-    url: '/api/v2/workflow_approvals/221/',
-    related: {
-      created_by: '/api/v2/users/1/',
-      unified_job_template: '/api/v2/workflow_approval_templates/10/',
-      source_workflow_job: '/api/v2/workflow_jobs/220/',
-      workflow_approval_template: '/api/v2/workflow_approval_templates/10/',
-      approve: '/api/v2/workflow_approvals/221/approve/',
-      deny: '/api/v2/workflow_approvals/221/deny/',
-    },
-    summary_fields: {
-      workflow_job_template: {
-        id: 9,
-        name: 'Approval @ 9:15:26 AM',
-        description: '',
-      },
-      workflow_job: {
-        id: 220,
-        name: 'Approval @ 9:15:26 AM',
-        description: '',
-      },
-      workflow_approval_template: {
-        id: 10,
-        name: 'approval copy',
-        description: '',
-        timeout: 30,
-      },
-      unified_job_template: {
-        id: 10,
-        name: 'approval copy',
-        description: '',
-        unified_job_type: 'workflow_approval',
-      },
-      created_by: {
-        id: 1,
-        username: 'admin',
-        first_name: '',
-        last_name: '',
-      },
-      user_capabilities: {
-        delete: true,
-        start: true,
-      },
-      source_workflow_job: {
-        id: 220,
-        name: 'Approval @ 9:15:26 AM',
-        description: '',
-        status: 'failed',
-        failed: true,
-        elapsed: 89.766,
-      },
-    },
-    created: '2020-10-09T19:58:27.337904Z',
-    modified: '2020-10-09T19:58:27.338000Z',
-    name: 'approval copy',
-    description: '',
-    unified_job_template: 10,
-    launch_type: 'workflow',
-    status: 'failed',
-    failed: true,
-    started: '2020-10-09T19:58:27.337904Z',
-    finished: '2020-10-09T19:59:26.974046Z',
-    canceled_on: null,
-    elapsed: 59.636,
-    job_explanation:
-      'The approval node approval copy (221) has expired after 30 seconds.',
-    can_approve_or_deny: false,
-    approval_expiration: null,
-    timed_out: true,
-  },
-  {
-    id: 6,
-    type: 'workflow_approval',
-    url: '/api/v2/workflow_approvals/6/',
-    related: {
-      created_by: '/api/v2/users/1/',
-      unified_job_template: '/api/v2/workflow_approval_templates/8/',
-      source_workflow_job: '/api/v2/workflow_jobs/5/',
-      workflow_approval_template: '/api/v2/workflow_approval_templates/8/',
-      approve: '/api/v2/workflow_approvals/6/approve/',
-      deny: '/api/v2/workflow_approvals/6/deny/',
-      approved_or_denied_by: '/api/v2/users/1/',
-    },
-    summary_fields: {
-      workflow_job_template: {
-        id: 7,
-        name: 'Approval',
-        description: '',
-      },
-      workflow_job: {
-        id: 5,
-        name: 'Approval',
-        description: '',
-      },
-      workflow_approval_template: {
-        id: 8,
-        name: 'approval',
-        description: '',
-        timeout: 0,
-      },
-      unified_job_template: {
-        id: 8,
-        name: 'approval',
-        description: '',
-        unified_job_type: 'workflow_approval',
-      },
-      approved_or_denied_by: {
-        id: 1,
-        username: 'admin',
-        first_name: '',
-        last_name: '',
-      },
-      created_by: {
-        id: 1,
-        username: 'admin',
-        first_name: '',
-        last_name: '',
-      },
-      user_capabilities: {
-        delete: false,
-        start: false,
-      },
-      source_workflow_job: {
-        id: 5,
-        name: 'Approval',
-        description: '',
-        status: 'successful',
-        failed: false,
-        elapsed: 168.233,
-      },
-    },
-    created: '2020-10-05T20:14:53.875701Z',
-    modified: '2020-10-05T20:17:41.211373Z',
-    name: 'approval',
-    description: '',
-    unified_job_template: 8,
-    launch_type: 'workflow',
-    status: 'successful',
-    failed: false,
-    started: '2020-10-05T20:14:53.875701Z',
-    finished: '2020-10-05T20:17:41.200738Z',
-    canceled_on: null,
-    elapsed: 167.325,
-    job_explanation: '',
-    can_approve_or_deny: false,
-    approval_expiration: null,
-    timed_out: false,
-  },
-];
-
 describe('<WorkflowApprovalList />', () => {
   let wrapper;
   beforeEach(() => {
     WorkflowApprovalsAPI.read.mockResolvedValue({
       data: {
-        count: mockWorkflowApprovals.length,
-        results: mockWorkflowApprovals,
+        count: mockWorkflowApprovals.results.length,
+        results: mockWorkflowApprovals.results,
       },
     });
 
@@ -191,7 +39,7 @@ describe('<WorkflowApprovalList />', () => {
     });
     wrapper.update();
 
-    expect(wrapper.find('WorkflowApprovalListItem')).toHaveLength(2);
+    expect(wrapper.find('WorkflowApprovalListItem')).toHaveLength(3);
   });
 
   test('should select workflow approval when checked', async () => {
@@ -228,7 +76,7 @@ describe('<WorkflowApprovalList />', () => {
     wrapper.update();
 
     const items = wrapper.find('WorkflowApprovalListItem');
-    expect(items).toHaveLength(2);
+    expect(items).toHaveLength(3);
     items.forEach(item => {
       expect(item.prop('isSelected')).toEqual(true);
     });
@@ -250,7 +98,7 @@ describe('<WorkflowApprovalList />', () => {
     await act(async () => {
       wrapper
         .find('WorkflowApprovalListItem')
-        .at(1)
+        .at(2)
         .invoke('onSelect')();
     });
     wrapper.update();
@@ -269,7 +117,7 @@ describe('<WorkflowApprovalList />', () => {
     await act(async () => {
       wrapper
         .find('WorkflowApprovalListItem')
-        .at(0)
+        .at(1)
         .invoke('onSelect')();
     });
     wrapper.update();
@@ -300,7 +148,7 @@ describe('<WorkflowApprovalList />', () => {
     await act(async () => {
       wrapper
         .find('WorkflowApprovalListItem')
-        .at(0)
+        .at(1)
         .invoke('onSelect')();
     });
     wrapper.update();
diff --git a/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListApproveButton.test.jsx b/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListApproveButton.test.jsx
index 0930b58bbc..949c07ec10 100644
--- a/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListApproveButton.test.jsx
+++ b/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListApproveButton.test.jsx
@@ -6,6 +6,7 @@ const workflowApproval = {
   id: 1,
   name: 'Foo',
   can_approve_or_deny: true,
+  url: '/api/v2/workflow_approvals/218/',
 };
 
 describe('<WorkflowApprovalListApproveButton />', () => {
diff --git a/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListDenyButton.test.jsx b/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListDenyButton.test.jsx
index 7ad7e6beee..a799ecf208 100644
--- a/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListDenyButton.test.jsx
+++ b/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListDenyButton.test.jsx
@@ -6,6 +6,7 @@ const workflowApproval = {
   id: 1,
   name: 'Foo',
   can_approve_or_deny: true,
+  url: '/api/v2/workflow_approvals/218/',
 };
 
 describe('<WorkflowApprovalListDenyButton />', () => {
diff --git a/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListItem.test.jsx b/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListItem.test.jsx
index a8ec7cf91c..2709ab2fa9 100644
--- a/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListItem.test.jsx
+++ b/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListItem.test.jsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 import WorkflowApprovalListItem from './WorkflowApprovalListItem';
-import workflowApproval from '../data.workflowApproval.json';
+import mockWorkflowApprovals from '../data.workflowApprovals.json';
+
+const workflowApproval = mockWorkflowApprovals.results[0];
 
 jest.mock('../../../api/models/WorkflowApprovals');
 
diff --git a/awx/ui_next/src/screens/WorkflowApproval/data.workflowApproval.json b/awx/ui_next/src/screens/WorkflowApproval/data.workflowApproval.json
deleted file mode 100644
index 29acd9615e..0000000000
--- a/awx/ui_next/src/screens/WorkflowApproval/data.workflowApproval.json
+++ /dev/null
@@ -1,71 +0,0 @@
-{
-  "id": 218,
-  "type": "workflow_approval",
-  "url": "/api/v2/workflow_approvals/218/",
-  "related": {
-    "created_by": "/api/v2/users/1/",
-    "unified_job_template": "/api/v2/workflow_approval_templates/10/",
-    "source_workflow_job": "/api/v2/workflow_jobs/216/",
-    "workflow_approval_template": "/api/v2/workflow_approval_templates/10/",
-    "approve": "/api/v2/workflow_approvals/218/approve/",
-    "deny": "/api/v2/workflow_approvals/218/deny/"
-  },
-  "summary_fields": {
-    "workflow_job_template": {
-      "id": 9,
-      "name": "Approval @ 9:15:26 AM",
-      "description": ""
-    },
-    "workflow_job": {
-      "id": 216,
-      "name": "Approval @ 9:15:26 AM",
-      "description": ""
-    },
-    "workflow_approval_template": {
-      "id": 10,
-      "name": "approval copy",
-      "description": "",
-      "timeout": 0
-    },
-    "unified_job_template": {
-      "id": 10,
-      "name": "approval copy",
-      "description": "",
-      "unified_job_type": "workflow_approval"
-    },
-    "created_by": {
-      "id": 1,
-      "username": "admin",
-      "first_name": "",
-      "last_name": ""
-    },
-    "user_capabilities": {
-      "delete": true,
-      "start": true
-    },
-    "source_workflow_job": {
-      "id": 216,
-      "name": "Approval @ 9:15:26 AM",
-      "description": "",
-      "status": "running",
-      "failed": false,
-      "elapsed": 0.0
-    }
-  },
-  "created": "2020-10-09T17:13:12.067947Z",
-  "modified": "2020-10-09T17:13:12.068147Z",
-  "name": "approval",
-  "description": "description of approval",
-  "unified_job_template": 10,
-  "launch_type": "workflow",
-  "status": "pending",
-  "failed": false,
-  "started": "2020-10-09T17:13:12.067947Z",
-  "finished": null,
-  "canceled_on": null,
-  "elapsed": 22.879029,
-  "job_explanation": "",
-  "can_approve_or_deny": true,
-  "approval_expiration": null,
-  "timed_out": false
-}
diff --git a/awx/ui_next/src/screens/WorkflowApproval/data.workflowApprovals.json b/awx/ui_next/src/screens/WorkflowApproval/data.workflowApprovals.json
new file mode 100644
index 0000000000..c21ec3df98
--- /dev/null
+++ b/awx/ui_next/src/screens/WorkflowApproval/data.workflowApprovals.json
@@ -0,0 +1,227 @@
+{
+  "count": 3,
+  "next": "/api/v2/workflow_approvals/",
+  "previous": null,
+  "results": [
+    {
+      "id": 218,
+      "type": "workflow_approval",
+      "url": "/api/v2/workflow_approvals/218/",
+      "related": {
+        "created_by": "/api/v2/users/1/",
+        "unified_job_template": "/api/v2/workflow_approval_templates/10/",
+        "source_workflow_job": "/api/v2/workflow_jobs/216/",
+        "workflow_approval_template": "/api/v2/workflow_approval_templates/10/",
+        "approve": "/api/v2/workflow_approvals/218/approve/",
+        "deny": "/api/v2/workflow_approvals/218/deny/"
+      },
+      "summary_fields": {
+        "workflow_job_template": {
+          "id": 9,
+          "name": "Approval @ 9:15:26 AM",
+          "description": ""
+        },
+        "workflow_job": {
+          "id": 216,
+          "name": "Approval @ 9:15:26 AM",
+          "description": ""
+        },
+        "workflow_approval_template": {
+          "id": 10,
+          "name": "approval copy",
+          "description": "",
+          "timeout": 0
+        },
+        "unified_job_template": {
+          "id": 10,
+          "name": "approval copy",
+          "description": "",
+          "unified_job_type": "workflow_approval"
+        },
+        "created_by": {
+          "id": 1,
+          "username": "admin",
+          "first_name": "",
+          "last_name": ""
+        },
+        "user_capabilities": {
+          "delete": true,
+          "start": true
+        },
+        "source_workflow_job": {
+          "id": 216,
+          "name": "Approval @ 9:15:26 AM",
+          "description": "",
+          "status": "running",
+          "failed": false,
+          "elapsed": 0.0
+        }
+      },
+      "created": "2020-10-09T17:13:12.067947Z",
+      "modified": "2020-10-09T17:13:12.068147Z",
+      "name": "approval",
+      "description": "description of approval",
+      "unified_job_template": 10,
+      "launch_type": "workflow",
+      "status": "pending",
+      "failed": false,
+      "started": "2020-10-09T17:13:12.067947Z",
+      "finished": null,
+      "canceled_on": null,
+      "elapsed": 22.879029,
+      "job_explanation": "",
+      "can_approve_or_deny": true,
+      "approval_expiration": null,
+      "timed_out": false
+    },
+    {
+      "id": 221,
+      "type": "workflow_approval",
+      "url": "/api/v2/workflow_approvals/221/",
+      "related": {
+        "created_by": "/api/v2/users/1/",
+        "unified_job_template": "/api/v2/workflow_approval_templates/10/",
+        "source_workflow_job": "/api/v2/workflow_jobs/220/",
+        "workflow_approval_template": "/api/v2/workflow_approval_templates/10/",
+        "approve": "/api/v2/workflow_approvals/221/approve/",
+        "deny": "/api/v2/workflow_approvals/221/deny/"
+      },
+      "summary_fields": {
+        "workflow_job_template": {
+          "id": 9,
+          "name": "Approval @ 9:15:26 AM",
+          "description": ""
+        },
+        "workflow_job": {
+          "id": 220,
+          "name": "Approval @ 9:15:26 AM",
+          "description": ""
+        },
+        "workflow_approval_template": {
+          "id": 10,
+          "name": "approval copy",
+          "description": "",
+          "timeout": 30
+        },
+        "unified_job_template": {
+          "id": 10,
+          "name": "approval copy",
+          "description": "",
+          "unified_job_type": "workflow_approval"
+        },
+        "created_by": {
+          "id": 1,
+          "username": "admin",
+          "first_name": "",
+          "last_name": ""
+        },
+        "user_capabilities": {
+          "delete": true,
+          "start": true
+        },
+        "source_workflow_job": {
+          "id": 220,
+          "name": "Approval @ 9:15:26 AM",
+          "description": "",
+          "status": "failed",
+          "failed": true,
+          "elapsed": 89.766
+        }
+      },
+      "created": "2020-10-09T19:58:27.337904Z",
+      "modified": "2020-10-09T19:58:27.338000Z",
+      "name": "approval copy",
+      "description": "",
+      "unified_job_template": 10,
+      "launch_type": "workflow",
+      "status": "failed",
+      "failed": true,
+      "started": "2020-10-09T19:58:27.337904Z",
+      "finished": "2020-10-09T19:59:26.974046Z",
+      "canceled_on": null,
+      "elapsed": 59.636,
+      "job_explanation": "The approval node approval copy (221) has expired after 30 seconds.",
+      "can_approve_or_deny": false,
+      "approval_expiration": null,
+      "timed_out": true
+    },
+    {
+      "id": 6,
+      "type": "workflow_approval",
+      "url": "/api/v2/workflow_approvals/6/",
+      "related": {
+        "created_by": "/api/v2/users/1/",
+        "unified_job_template": "/api/v2/workflow_approval_templates/8/",
+        "source_workflow_job": "/api/v2/workflow_jobs/5/",
+        "workflow_approval_template": "/api/v2/workflow_approval_templates/8/",
+        "approve": "/api/v2/workflow_approvals/6/approve/",
+        "deny": "/api/v2/workflow_approvals/6/deny/",
+        "approved_or_denied_by": "/api/v2/users/1/"
+      },
+      "summary_fields": {
+        "workflow_job_template": {
+          "id": 7,
+          "name": "Approval",
+          "description": ""
+        },
+        "workflow_job": {
+          "id": 5,
+          "name": "Approval",
+          "description": ""
+        },
+        "workflow_approval_template": {
+          "id": 8,
+          "name": "approval",
+          "description": "",
+          "timeout": 0
+        },
+        "unified_job_template": {
+          "id": 8,
+          "name": "approval",
+          "description": "",
+          "unified_job_type": "workflow_approval"
+        },
+        "approved_or_denied_by": {
+          "id": 1,
+          "username": "admin",
+          "first_name": "",
+          "last_name": ""
+        },
+        "created_by": {
+          "id": 1,
+          "username": "admin",
+          "first_name": "",
+          "last_name": ""
+        },
+        "user_capabilities": {
+          "delete": false,
+          "start": false
+        },
+        "source_workflow_job": {
+          "id": 5,
+          "name": "Approval",
+          "description": "",
+          "status": "successful",
+          "failed": false,
+          "elapsed": 168.233
+        }
+      },
+      "created": "2020-10-05T20:14:53.875701Z",
+      "modified": "2020-10-05T20:17:41.211373Z",
+      "name": "approval",
+      "description": "",
+      "unified_job_template": 8,
+      "launch_type": "workflow",
+      "status": "successful",
+      "failed": false,
+      "started": "2020-10-05T20:14:53.875701Z",
+      "finished": "2020-10-05T20:17:41.200738Z",
+      "canceled_on": null,
+      "elapsed": 167.325,
+      "job_explanation": "",
+      "can_approve_or_deny": false,
+      "approval_expiration": null,
+      "timed_out": false
+    }
+  ]
+}
diff --git a/awx/ui_next/src/screens/WorkflowApproval/shared/WorkflowApprovalStatus.test.jsx b/awx/ui_next/src/screens/WorkflowApproval/shared/WorkflowApprovalStatus.test.jsx
index 3f8bd066cf..41d4965d26 100644
--- a/awx/ui_next/src/screens/WorkflowApproval/shared/WorkflowApprovalStatus.test.jsx
+++ b/awx/ui_next/src/screens/WorkflowApproval/shared/WorkflowApprovalStatus.test.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 import { formatDateString } from '../../../util/dates';
 import WorkflowApprovalStatus from './WorkflowApprovalStatus';
-import workflowApproval from '../data.workflowApproval.json';
+import mockWorkflowApprovals from '../data.workflowApprovals.json';
+
+const workflowApproval = mockWorkflowApprovals.results[0];
 
 describe('<WorkflowApprovalStatus />', () => {
   let wrapper;