ui: even details modal

frontend/app/components/DataManagement/Activity/EventDetailsModal.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { EventData } from './data/Event'
+import { Segmented, Input } from 'antd';
+import { X } from 'lucide-react';
+
+function EventDetailsModal({ ev, onClose }: { ev: EventData, onClose: () => void }) {
+  const tabs = [
+    {
+      label: 'All Properties',
+    },
+    {
+      label: 'Custom Properties',
+    },
+    {
+      label: 'Default Properties',
+    }
+  ]
+
+  const views = [
+    {
+      label: 'icn1',
+      value: 'pretty',
+    },
+    {
+      label: 'icn2',
+      value: 'json',
+    }
+  ]
+  const [query, setQuery] = React.useState('')
+  const [view, setView] = React.useState(views[0].value)
+  const dataFields = { ...ev.$_defaultFields, ...ev.$_customFields }
+  const fieldArr = Object.entries(dataFields)
+  const filteredArr = fieldArr.filter(([key, value]) => {
+    const qReg = new RegExp(query, 'ig')
+    return qReg.test(key) || qReg.test(value)
+  })
+
+  return (
+    <div className={'h-screen w-full flex flex-col gap-4 p-4'}>
+      <div className={'flex justify-between items-center'}>
+        <div className={'font-semibold text-lg'}>Event</div>
+        <div className={'p-2 cursor-pointer'} onClick={onClose}>
+          <X size={16} />
+        </div>
+      </div>
+      <div className={'p-2 rounded-lg bg-active-blue flex items-center gap-2'}>
+        <div>icn</div>
+        <div>{ev.name}</div>
+        <div className={'link ml-auto'}>Play Session</div>
+      </div>
+      <Segmented options={tabs} />
+      <div className={'flex items-center gap-2'}>
+        <Segmented
+          value={view}
+          options={views}
+          size={'small'}
+          onChange={(v) => setView(v)}
+        />
+        <Input.Search
+          size={'small'}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={'Find Property'}
+        />
+      </div>
+      <div className={'overflow-y-auto flex flex-col gap-2'} style={{ height: 'calc(100% - 200px)' }}>
+      {filteredArr.map(([key, value]) => (
+        <div key={key} className={'flex items-center border-b'}>
+          <div className={'flex-1'}>{key}</div>
+          <div className={'flex-1 text-disabled-text'}>{value}</div>
+        </div>
+      ))}
+      </div>
+    </div>
+  )
+}
+
+export default EventDetailsModal;

frontend/app/components/DataManagement/Activity/Page.tsx

@@ -5,6 +5,8 @@ import { MoreOutlined } from '@ant-design/icons';
 import { numberWithCommas } from 'App/utils';
 import { Pagination } from 'UI';
 import Event from './data/Event';
+import { useModal } from 'App/components/Modal';
+import EventDetailsModal from "./EventDetailsModal";
 
 function ActivityPage() {
   const [hiddenCols, setHiddenCols] = React.useState([]);
@@ -16,6 +18,7 @@ function ActivityPage() {
   const saveRequestPayloads = () => {};
   const onFilterMove = () => {};
   const [editCols, setEditCols] = React.useState(false);
+  const { showModal, hideModal } = useModal();
 
   const dropdownItems = [
     {
@@ -108,6 +111,10 @@ function ActivityPage() {
   );
   const list = [testEv.toData(), testAutoEv.toData()];
   const onPageChange = () => {};
+
+  const onItemClick = (ev: Event) => {
+    showModal(<EventDetailsModal ev={ev} onClose={hideModal} />, { width: 400, right: true });
+  }
   return (
     <div
       className={'flex flex-col gap-2'}
@@ -153,7 +160,14 @@ function ActivityPage() {
         <div className={'px-4 py-2 font-semibold text-lg'}>
           All users activity
         </div>
-        <Table dataSource={list} pagination={false} columns={shownCols} />
+        <Table
+          onRow={(record, index) => ({
+            onClick: (event) => onItemClick(record)
+          })}
+          dataSource={list}
+          pagination={false}
+          columns={shownCols}
+        />
         <div className="flex items-center justify-between px-4 py-3 shadow-sm w-full bg-white rounded-lg mt-2">
           <div>
             {'Showing '}

frontend/app/components/DataManagement/Activity/data/Event.ts

@@ -4,6 +4,14 @@ interface DefaultFields {
   userEnvironment: string;
 }
 
+export interface EventData {
+  name: string;
+  time: string;
+  $_isAutoCapture: boolean;
+  $_defaultFields: DefaultFields;
+  $_customFields?: Record<string, any>;
+}
+
 export default class Event {
   name: string;
   time: string;
@@ -29,11 +37,13 @@ export default class Event {
     return JSON.stringify(obj, 4);
   }
 
-  toData() {
+  toData(): EventData {
     const obj: any = {
       name: this.name,
       time: this.time,
       $_isAutoCapture: this.$_isAutoCapture,
+      $_defaultFields: this.defaultFields,
+      $_customFields: this.customFields,
     }
     Object.entries(this.defaultFields).forEach(([key, value]) => {
       obj[key] = value;