feat: Add audit log detail page (#3356)

Co-authored-by: Matthew Elwell <matthew.elwell@flagsmith.com>

frontend/common/services/useAuditLogItem.ts

@@ -0,0 +1,44 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+
+export const auditLogItemService = service
+  .enhanceEndpoints({ addTagTypes: ['AuditLogItem'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      getAuditLogItem: builder.query<
+        Res['auditLogItem'],
+        Req['getAuditLogItem']
+      >({
+        providesTags: (res) => [{ id: res?.id, type: 'AuditLogItem' }],
+        query: (query: Req['getAuditLogItem']) => ({
+          url: `audit/${query.id}/`,
+        }),
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function getAuditLogItem(
+  store: any,
+  data: Req['getAuditLogItem'],
+  options?: Parameters<
+    typeof auditLogItemService.endpoints.getAuditLogItem.initiate
+  >[1],
+) {
+  return store.dispatch(
+    auditLogItemService.endpoints.getAuditLogItem.initiate(data, options),
+  )
+}
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useGetAuditLogItemQuery,
+  // END OF EXPORTS
+} = auditLogItemService
+
+/* Usage examples:
+const { data, isLoading } = useGetAuditLogItemQuery({ id: 2 }, {}) //get hook
+const [createAuditLogItem, { isLoading, data, isSuccess }] = useCreateAuditLogItemMutation() //create hook
+auditLogItemService.endpoints.getAuditLogItem.select({id: 2})(store.getState()) //access data from any function
+*/

frontend/common/types/requests.ts

@@ -155,5 +155,6 @@ export type Req = {
   getGroupSummaries: {
     orgId: string
   }
+  getAuditLogItem: { id: string }
   // END OF TYPES
 }

frontend/common/types/responses.ts

@@ -151,6 +151,13 @@ export type AuditLogItem = {
   is_system_event: boolean
 }
 
+export type AuditLogDetail = AuditLogItem & {
+  change_details: {
+    field: string
+    old: FlagsmithValue
+    new: FlagsmithValue
+  }[]
+}
 export type Subscription = {
   id: number
   uuid: string
@@ -397,5 +404,6 @@ export type Res = {
   groupWithRole: PagedResponse<Roles>
   changeRequests: PagedResponse<ChangeRequestSummary>
   groupSummaries: UserGroupSummary[]
+  auditLogItem: AuditLogDetail
   // END OF TYPES
 }