ui: event page

frontend/app/PrivateRoutes.tsx

@@ -40,6 +40,7 @@ const components: any = {
   ActivityPure: lazy(() => import('Components/DataManagement/Activity/Page')),
   UserPage: lazy(() => import('Components/DataManagement/UsersEvents/UserPage')),
   UsersEventsPage: lazy(() => import('Components/DataManagement/UsersEvents/ListPage')),
+  EventPage: lazy(() => import('Components/DataManagement/UsersEvents/EventPage')),
 };
 
 const enhancedComponents: any = {
@@ -66,6 +67,7 @@ const enhancedComponents: any = {
   Activity: components.ActivityPure,
   UserPage: components.UserPage,
   UsersEventsPage: components.UsersEventsPage,
+  EventPage: components.EventPage,
 };
 
 const withSiteId = routes.withSiteId;
@@ -119,6 +121,7 @@ const DATA_MANAGEMENT = {
   ACTIVITY: routes.dataManagement.activity(),
   USER_PAGE: routes.dataManagement.userPage(),
   USERS_EVENTS: routes.dataManagement.usersEvents(),
+  EVENT_PAGE: routes.dataManagement.eventPage(),
 }
 
 function PrivateRoutes() {
@@ -320,6 +323,12 @@ function PrivateRoutes() {
           path={withSiteId(DATA_MANAGEMENT.USERS_EVENTS, siteIdList)}
           component={enhancedComponents.UsersEventsPage}
         />
+        <Route
+          exact
+          strict
+          path={withSiteId(DATA_MANAGEMENT.EVENT_PAGE, siteIdList)}
+          component={enhancedComponents.EventPage}
+        />
         {Object.entries(routes.redirects).map(([fr, to]) => (
           <Redirect key={fr} exact strict from={fr} to={to} />
         ))}

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

@@ -14,6 +14,7 @@ export interface EventData {
 
 export default class Event {
   name: string;
+  eventId: string;
   displayName: string;
   description: string;
   monthVolume: number;
@@ -54,6 +55,7 @@ export default class Event {
       monthQuery: number;
     }) {
     this.name = name;
+    this.eventId = 'asdasd';
     this.time = time;
     this.defaultFields = defaultFields;
     this.customFields = customFields;

frontend/app/components/DataManagement/UsersEvents/EventPage.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { Button, Input, Segmented, Table } from 'antd';
+import Breadcrumb from 'Shared/Breadcrumb';
+import Event from 'Components/DataManagement/Activity/data/Event';
+import { Triangle } from '../Activity/EventDetailsModal';
+import cn from 'classnames';
+import { EditOutlined } from '@ant-design/icons';
+
+const testAutoEv = new Event({
+  name: 'auto test ev',
+  time: Date.now(),
+  defaultFields: {
+    userId: '123',
+    userLocation: 'NY',
+    userEnvironment: 'Mac OS',
+  },
+  customFields: {},
+  isAutoCapture: true,
+  sessionId: '123123',
+  displayName: 'Test Auto Event',
+  description: 'This is A test Auto Event',
+  monthQuery: 100,
+  monthVolume: 1000,
+});
+
+function EventPage() {
+  const [tab, setTab] = React.useState('all');
+  const tabs = [
+    {
+      label: 'All Properties',
+      value: 'all',
+    },
+    {
+      label: 'Custom Properties',
+      value: 'custom',
+    },
+    {
+      label: 'Default Properties',
+      value: 'default',
+    }
+  ]
+  return (
+    <div
+      className={'flex flex-col gap-2 mx-auto w-full'}
+      style={{ maxWidth: 1360 }}
+    >
+      <Breadcrumb
+        items={[
+          { label: 'Events', to: '/data-management/events' },
+          { label: testAutoEv.name },
+        ]}
+      />
+      <div className={'rounded-lg border bg-white flex flex-col'}>
+        <div
+          className={
+            'p-4 border-b w-full flex items-center justify-between'
+          }
+        >
+          <div
+            className={'bg-gray-lighter rounded-xl px-2 font-semibold text-lg'}
+          >
+            {testAutoEv.name}
+          </div>
+          <div className={'link flex gap-1 items-center'}>
+            <span>Play Sessions</span>
+            <Triangle size={10} color={'blue'} />
+          </div>
+        </div>
+        <EditableField onSave={() => null} fieldName={'Display Name'} value={testAutoEv.displayName} />
+        <EditableField onSave={() => null} fieldName={'Description'} value={testAutoEv.description} />
+        <EditableField onSave={() => null} fieldName={'30 Day Volume'} value={testAutoEv.monthVolume} />
+      </div>
+
+      <div className={'rounded-lg border bg-white'}>
+        <div className={'flex items-center gap-2 p-4'}>
+          <div className={'font-semibold text-lg'}>Event Properties</div>
+          <Segmented options={tabs} value={tab} onChange={(v) => setTab(v)} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function EditableField({
+  onSave,
+  fieldName,
+  value,
+}: {
+  onSave: (value: string) => void
+  fieldName: string
+  value: string
+}) {
+  const [isEdit, setIsEdit] = React.useState(false);
+  return (
+    <div
+      className={cn(
+        'flex border-b last:border-b-0 items-center px-4 py-2 gap-2',
+        isEdit ? 'bg-active-blue' : 'hover:bg-active-blue'
+      )}
+    >
+      <div className={'font-semibold'} style={{ flex: 1 }}>
+        {fieldName}
+      </div>
+      <div style={{ flex: 6 }}>
+        {isEdit ? (
+          <div className={'flex items-center gap-2'}>
+            <Input size={'small'} defaultValue={value} />
+            <div className={'ml-auto'} />
+            <Button
+              size={'small'}
+              type={'text'}
+              onClick={() => setIsEdit(false)}
+            >
+              Cancel
+            </Button>
+            <Button size={'small'} type={'primary'}>
+              Save
+            </Button>
+          </div>
+        ) : (
+          <div className={'flex items-center justify-between'}>
+            <span>{value}</span>
+            <div className={'cursor-pointer text-main'} onClick={() => setIsEdit(true)}>
+              <EditOutlined size={16} />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default EventPage

frontend/app/components/DataManagement/UsersEvents/ListPage.tsx

@@ -20,6 +20,8 @@ function ListPage() {
   const history = useHistory();
   const toUser = (id: string) =>
     history.push(withSiteId(dataManagement.userPage(id), siteId));
+  const toEvent = (id: string) =>
+    history.push(withSiteId(dataManagement.eventPage(id), siteId));
   const [view, setView] = React.useState('users');
 
   const views = [
@@ -50,12 +52,12 @@ function ListPage() {
           <Input.Search size={'small'} placeholder={'Name, email, ID'} />
         </div>
       </div>
-      {view === 'users' ? <UsersList toUser={toUser} /> : <EventsList />}
+      {view === 'users' ? <UsersList toUser={toUser} /> : <EventsList toEvent={toEvent} />}
     </div>
   );
 }
 
-function EventsList() {
+function EventsList({ toEvent }: { toEvent: (id: string) => void }) {
   const columns = [
     {
       title: 'Event Name',
@@ -99,7 +101,14 @@ function EventsList() {
   const limit = 10;
   return (
     <div>
-      <Table columns={columns} dataSource={list} pagination={false} />
+      <Table
+        columns={columns}
+        dataSource={list}
+        pagination={false}
+        onRow={(record) => ({
+          onClick: () => toEvent(record.eventId),
+        })}
+      />
       <FullPagination
         page={page}
         limit={limit}

frontend/app/routes.ts

@@ -151,6 +151,7 @@ export const dataManagement = {
   activity: () => '/data-management/activity',
   userPage: (id = ':userId', hash?: string | number) => hashed(`/data-management/user/${id}`, hash),
   usersEvents: () => '/data-management/users-and-events',
+  eventPage: (id = ':eventId', hash?: string | number) => hashed(`/data-management/event/${id}`, hash),
 }
 
 const REQUIRED_SITE_ID_ROUTES = [
@@ -201,6 +202,7 @@ const REQUIRED_SITE_ID_ROUTES = [
   dataManagement.activity(),
   dataManagement.userPage(''),
   dataManagement.usersEvents(),
+  dataManagement.eventPage(''),
 ];
 const routeNeedsSiteId = (path: string): boolean => REQUIRED_SITE_ID_ROUTES.some(r => path.startsWith(r));
 const siteIdToUrl = (siteId = ':siteId'): string => {