From 73f06bf3ebc16681b047d0786dc5308bf3de2a8e Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Thu, 30 Jan 2025 17:59:11 +0100
Subject: [PATCH] ui: more props for events, event types table

---
 .../DataManagement/Activity/Page.tsx          |  8 +++
 .../DataManagement/Activity/data/Event.ts     | 20 +++++++
 .../DataManagement/UsersEvents/ListPage.tsx   | 53 ++++++++++++++++---
 3 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/DataManagement/Activity/Page.tsx b/frontend/app/components/DataManagement/Activity/Page.tsx
index 04be4f4a2..571a9efc0 100644
--- a/frontend/app/components/DataManagement/Activity/Page.tsx
+++ b/frontend/app/components/DataManagement/Activity/Page.tsx
@@ -29,6 +29,10 @@ const testEv = new Event({
   customFields: {},
   isAutoCapture: false,
   sessionId: '123123',
+  displayName: 'Test Event',
+  description: 'This is A test Event',
+  monthQuery: 100,
+  monthVolume: 1000,
 });
 const testAutoEv = new Event({
   name: 'auto test ev',
@@ -41,6 +45,10 @@ const testAutoEv = new Event({
   customFields: {},
   isAutoCapture: true,
   sessionId: '123123',
+  displayName: 'Test Auto Event',
+  description: 'This is A test Auto Event',
+  monthQuery: 100,
+  monthVolume: 1000,
 });
 export const list = [testEv.toData(), testAutoEv.toData()];
 
diff --git a/frontend/app/components/DataManagement/Activity/data/Event.ts b/frontend/app/components/DataManagement/Activity/data/Event.ts
index 215ca31e2..5ee3d3810 100644
--- a/frontend/app/components/DataManagement/Activity/data/Event.ts
+++ b/frontend/app/components/DataManagement/Activity/data/Event.ts
@@ -14,6 +14,10 @@ export interface EventData {
 
 export default class Event {
   name: string;
+  displayName: string;
+  description: string;
+  monthVolume: number;
+  monthQuery: number;
   time: number;
   defaultFields: DefaultFields = {
     userId: '',
@@ -33,6 +37,10 @@ export default class Event {
       customFields,
       sessionId,
       isAutoCapture,
+      displayName,
+      description,
+      monthVolume,
+      monthQuery,
 }: {
       name: string;
       time: number;
@@ -40,6 +48,10 @@ export default class Event {
       customFields?: Record<string, any>;
       sessionId: string;
       isAutoCapture: boolean;
+      displayName: string;
+      description: string;
+      monthVolume: number;
+      monthQuery: number;
     }) {
     this.name = name;
     this.time = time;
@@ -47,6 +59,10 @@ export default class Event {
     this.customFields = customFields;
     this.$_isAutoCapture = isAutoCapture;
     this.$_sessionId = sessionId;
+    this.displayName = displayName;
+    this.description = description;
+    this.monthVolume = monthVolume;
+    this.monthQuery = monthQuery;
   }
 
   toJSON() {
@@ -61,6 +77,10 @@ export default class Event {
       $_isAutoCapture: this.$_isAutoCapture,
       $_defaultFields: this.defaultFields,
       $_customFields: this.customFields,
+      displayName: this.displayName,
+      description: this.description,
+      monthVolume: this.monthVolume,
+      monthQuery: this.monthQuery,
     }
     Object.entries(this.defaultFields).forEach(([key, value]) => {
       obj[key] = value;
diff --git a/frontend/app/components/DataManagement/UsersEvents/ListPage.tsx b/frontend/app/components/DataManagement/UsersEvents/ListPage.tsx
index 7305a9816..588a6a371 100644
--- a/frontend/app/components/DataManagement/UsersEvents/ListPage.tsx
+++ b/frontend/app/components/DataManagement/UsersEvents/ListPage.tsx
@@ -3,14 +3,14 @@ import { numberWithCommas } from 'App/utils';
 import FilterSelection from "Shared/Filters/FilterSelection/FilterSelection";
 import User from './data/User';
 import { Pagination } from 'UI';
-import { Segmented, Input, Table, Button, Dropdown, Tabs } from 'antd';
+import { Segmented, Input, Table, Button, Dropdown, Tabs, TabsProps } from 'antd';
 import { MoreOutlined } from '@ant-design/icons';
-import { TabsProps } from ".store/antd-virtual-7db13b4af6/package";
 import { useHistory } from 'react-router-dom';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { withSiteId, dataManagement } from "App/routes";
-import { Filter } from "lucide-react";
+import { Filter, Album } from "lucide-react";
+import { list } from '../Activity/Page'
 
 const customTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (
   <DefaultTabBar {...props} className="!mb-0" />
@@ -48,15 +48,56 @@ function ListPage() {
           renderTabBar={customTabBar}
         />
         <div className="flex items-center gap-2">
-          <Button type={'text'}>Docs</Button>
-          <Input.Search placeholder={'Name, email, ID'} />
+          <Button type={'text'} icon={<Album size={14} />}>Docs</Button>
+          <Input.Search size={'small'} placeholder={'Name, email, ID'} />
         </div>
       </div>
-      {view === 'users' ? <UsersList toUser={toUser} /> : null}
+      {view === 'users' ? <UsersList toUser={toUser} /> : <EventsList />}
     </div>
   );
 }
 
+function EventsList() {
+  const columns = [
+    {
+      title: 'Event Name',
+      dataIndex: 'name',
+      key: 'name',
+      showSorterTooltip: { target: 'full-header' },
+      sorter: (a, b) => a.name.localeCompare(b.name),
+    },
+    {
+      title: 'Display Name',
+      dataIndex: 'displayName',
+      key: 'displayName',
+      showSorterTooltip: { target: 'full-header' },
+      sorter: (a, b) => a.displayName.localeCompare(b.displayName),
+    },
+    {
+      title: 'Description',
+      dataIndex: 'description',
+      key: 'description',
+      showSorterTooltip: { target: 'full-header' },
+      sorter: (a, b) => a.description.localeCompare(b.description),
+    },
+    {
+      title: '30 Day Volume',
+      dataIndex: 'monthVolume',
+      key: 'monthVolume',
+      showSorterTooltip: { target: 'full-header' },
+      sorter: (a, b) => a.monthVolume.localeCompare(b.monthVolume),
+    },
+    {
+      title: '30 Day Query',
+      dataIndex: 'monthQuery',
+      key: 'monthQuery',
+      showSorterTooltip: { target: 'full-header' },
+      sorter: (a, b) => a.monthQuery.localeCompare(b.monthQuery),
+    },
+  ]
+  return <Table columns={columns} dataSource={list} pagination={false} />;
+}
+
 function UsersList({ toUser }: { toUser: (id: string) => void }) {
   const [editCols, setEditCols] = React.useState(false);
   const testUsers = [