feat(dashboard): edit events

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-edit.tsx

@@ -1,176 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react';
-import { useEffect, useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Label } from '@/components/ui/label';
-import {
-  Sheet,
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { api } from '@/trpc/client';
-import { cn } from '@/utils/cn';
-import { useRouter } from 'next/navigation';
-import { toast } from 'sonner';
-
-import type { IServiceEvent } from '@openpanel/db';
-
-import {
-  EventIconColors,
-  EventIconMapper,
-  EventIconRecords,
-} from './event-icon';
-
-interface Props {
-  event: IServiceEvent;
-  open: boolean;
-  setOpen: Dispatch<SetStateAction<boolean>>;
-}
-
-export function EventEdit({ event, open, setOpen }: Props) {
-  const router = useRouter();
-
-  const { name, meta, projectId } = event;
-
-  const [selectedIcon, setIcon] = useState(
-    meta?.icon ??
-      EventIconRecords[name]?.icon ??
-      EventIconRecords.default?.icon ??
-      ''
-  );
-  const [selectedColor, setColor] = useState(
-    meta?.color ??
-      EventIconRecords[name]?.color ??
-      EventIconRecords.default?.color ??
-      ''
-  );
-  const [conversion, setConversion] = useState(!!meta?.conversion);
-
-  useEffect(() => {
-    if (meta?.icon) {
-      setIcon(meta.icon);
-    }
-  }, [meta?.icon]);
-  useEffect(() => {
-    if (meta?.color) {
-      setColor(meta.color);
-    }
-  }, [meta?.color]);
-  useEffect(() => {
-    setConversion(meta?.conversion ?? false);
-  }, [meta?.conversion]);
-
-  const SelectedIcon = EventIconMapper[selectedIcon]!;
-
-  const mutation = api.event.updateEventMeta.useMutation({
-    onSuccess() {
-      setOpen(false);
-      toast('Event updated');
-      router.refresh();
-    },
-  });
-  const getBg = (color: string) => `bg-${color}-200`;
-  const getText = (color: string) => `text-${color}-700`;
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>Edit &quot;{name}&quot;</SheetTitle>
-        </SheetHeader>
-        <div className="my-8 flex flex-col gap-8">
-          <div>
-            <Label className="mb-4 block">Conversion</Label>
-            <label className="flex cursor-pointer select-none items-center gap-4 rounded-md border border-border p-4">
-              <Checkbox
-                checked={conversion}
-                onCheckedChange={(checked) => {
-                  if (checked === 'indeterminate') return;
-                  setConversion(checked);
-                }}
-              />
-              <div>
-                <span>Yes, this event is important!</span>
-              </div>
-            </label>
-          </div>
-          <div>
-            <Label className="mb-4 block">Pick a icon</Label>
-            <div className="flex flex-wrap gap-4">
-              {Object.entries(EventIconMapper).map(([name, Icon]) => (
-                <button
-                  key={name}
-                  onClick={() => {
-                    setIcon(name);
-                  }}
-                  className={cn(
-                    'inline-flex h-8 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-md bg-def-200 transition-all',
-                    name === selectedIcon
-                      ? 'scale-110 ring-1 ring-black'
-                      : '[&_svg]:opacity-50'
-                  )}
-                >
-                  <Icon size={16} />
-                </button>
-              ))}
-            </div>
-          </div>
-          <div>
-            <Label className="mb-4 block">Pick a color</Label>
-            <div className="flex flex-wrap gap-4">
-              {EventIconColors.map((color) => (
-                <button
-                  key={color}
-                  onClick={() => {
-                    setColor(color);
-                  }}
-                  className={cn(
-                    'flex h-8 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-md transition-all',
-                    color === selectedColor ? 'ring-1 ring-black' : '',
-                    getBg(color)
-                  )}
-                >
-                  {SelectedIcon ? (
-                    <SelectedIcon size={16} className={getText(color)} />
-                  ) : (
-                    <svg
-                      className={`${getText(color)} opacity-70`}
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="currentColor"
-                      stroke="currentColor"
-                      stroke-width="2"
-                    >
-                      <circle cx="12.1" cy="12.1" r="4" />
-                    </svg>
-                  )}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        <SheetFooter>
-          <Button
-            className="w-full"
-            onClick={() =>
-              mutation.mutate({
-                projectId,
-                name,
-                icon: selectedIcon,
-                color: selectedColor,
-                conversion,
-              })
-            }
-          >
-            Update event
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-}

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/setup-server.md

@@ -1,41 +0,0 @@
-# setup caprover
-
-## Firewall
-
-ufw allow 22,80,443,3000,996,7946,4789,2377/tcp; ufw allow 22,7946,4789,2377/udp;
-
-## Install docker
-
-```
-# Add Docker's official GPG key:
-sudo apt-get update
-sudo apt-get install ca-certificates curl
-sudo install -m 0755 -d /etc/apt/keyrings
-sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
-sudo chmod a+r /etc/apt/keyrings/docker.asc
-
-# Add the repository to Apt sources:
-echo \
-  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
-  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
-  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
-sudo apt-get update
-
-# Install Docker
-sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
-
-# Verify
-sudo docker run hello-world
-```
-
-## Install caprover
-
-`docker run -p 80:80 -p 443:443 -p 3000:3000 -e ACCEPTED_TERMS=true -v /var/run/docker.sock:/var/run/docker.sock -v /captain:/captain caprover/caprover`
-
-## Point domain to server
-
-`*.apps.example.com -> server ip`
-
-## Setup caprover
-
-caprover serversetup

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/events.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { TableButtons } from '@/components/data-table';
+import EventListener from '@/components/events/event-listener';
 import { EventsTable } from '@/components/events/table';
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
 import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
@@ -12,8 +13,6 @@ import { api } from '@/trpc/client';
 import { Loader2Icon } from 'lucide-react';
 import { parseAsInteger, useQueryState } from 'nuqs';
 
-import EventListener from './event-list/event-listener';
-
 type Props = {
   projectId: string;
   profileId?: string;

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx

@@ -1,6 +1,7 @@
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
 import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
 import ServerLiveCounter from '@/components/overview/live-counter';
+import OverviewMetrics from '@/components/overview/overview-metrics';
 import OverviewShareServer from '@/components/overview/overview-share';
 import OverviewTopDevices from '@/components/overview/overview-top-devices';
 import OverviewTopEvents from '@/components/overview/overview-top-events';
@@ -8,7 +9,6 @@ import OverviewTopGeo from '@/components/overview/overview-top-geo';
 import OverviewTopPages from '@/components/overview/overview-top-pages';
 import OverviewTopSources from '@/components/overview/overview-top-sources';
 
-import OverviewMetrics from '../../../../components/overview/overview-metrics';
 import { OverviewReportRange } from './overview-sticky-header';
 
 interface PageProps {

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/realtime-live-events/live-events.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { EventListItem } from '@/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-list-item';
+import { EventListItem } from '@/components/events/event-list-item';
 import useWS from '@/hooks/useWS';
 import { AnimatePresence, motion } from 'framer-motion';
 

apps/dashboard/src/app/(auth)/live-events/live-events.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { EventListItem } from '@/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-list-item';
+import { EventListItem } from '@/components/events/event-list-item';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import type { IServiceEventMinimal } from '@openpanel/db';

apps/dashboard/src/components/events/table/columns.tsx

@@ -1,4 +1,4 @@
-import { EventIcon } from '@/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-icon';
+import { EventIcon } from '@/components/events/event-icon';
 import { ProjectLink } from '@/components/links';
 import { SerieIcon } from '@/components/report/chart/SerieIcon';
 import { TooltipComplete } from '@/components/tooltip-complete';
@@ -50,11 +50,22 @@ export function useColumns() {
 
         return (
           <div className="flex items-center gap-2">
-            <EventIcon
-              size="sm"
-              name={row.original.name}
-              meta={row.original.meta}
-            />
+            <TooltipComplete content="Click to edit" side="left">
+              <button
+                className="transition-transform hover:scale-105"
+                onClick={() => {
+                  pushModal('EditEvent', {
+                    id: row.original.id,
+                  });
+                }}
+              >
+                <EventIcon
+                  size="sm"
+                  name={row.original.name}
+                  meta={row.original.meta}
+                />
+              </button>
+            </TooltipComplete>
             <span className="flex gap-2">
               <button
                 onClick={() => {

apps/dashboard/src/components/ui/dialog.tsx

@@ -40,7 +40,9 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
-        className
+        className,
+        'max-h-screen overflow-y-auto', // Ensure the dialog is scrollable if it exceeds the screen height
+        'mt-auto' // Add margin-top: auto for all screen sizes
       )}
       {...props}
     >

apps/dashboard/src/components/ui/label.tsx

@@ -7,7 +7,7 @@ import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
 
 const labelVariants = cva(
-  'mb-2 block  font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+  'mb-2 block font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
 );
 
 const Label = React.forwardRef<

apps/dashboard/src/modals/Modal/Container.tsx

@@ -30,21 +30,36 @@ export function ModalHeader({
   className,
 }: ModalHeaderProps) {
   return (
-    <div className={cn('mb-6 flex justify-between', className)}>
-      <div>
-        <div className="mt-0.5 font-medium">{title}</div>
-        {!!text && <div className=" text-muted-foreground">{text}</div>}
-      </div>
-      {onClose !== false && (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => (onClose ? onClose() : popModal())}
-        >
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </Button>
+    <div
+      className={cn(
+        'relative -m-6 mb-6 flex justify-between rounded-t-lg border-b bg-def-100 p-6',
+        className
       )}
+      style={{
+        backgroundImage: `url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(2) rotate(85)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z'  stroke-width='0.5' stroke='hsla(259, 0%, 52%, 0.46)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>")`,
+        backgroundSize: '100% 100%',
+        backgroundRepeat: 'repeat',
+      }}
+    >
+      <div className="absolute inset-0 bg-gradient-to-r from-def-100/95 to-def-100/80"></div>
+      <div className="row relative w-full items-start justify-between">
+        <div className="col mt-1 flex-1 gap-2">
+          <div className="text-3xl font-semibold">{title}</div>
+          {!!text && (
+            <div className="text-lg text-muted-foreground">{text}</div>
+          )}
+        </div>
+        {onClose !== false && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => (onClose ? onClose() : popModal())}
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </Button>
+        )}
+      </div>
     </div>
   );
 }

apps/dashboard/src/modals/edit-event.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from 'react';
+import {
+  EventIconColors,
+  EventIconMapper,
+  EventIconRecords,
+} from '@/components/events/event-icon';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { useAppParams } from '@/hooks/useAppParams';
+import { api } from '@/trpc/client';
+import { cn } from '@/utils/cn';
+import { useQueryClient } from '@tanstack/react-query';
+import { getQueryKey } from '@trpc/react-query';
+import { AnimatePresence, motion } from 'framer-motion';
+import { UndoIcon } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { popModal } from '.';
+import { ModalContent, ModalHeader } from './Modal/Container';
+
+interface Props {
+  id: string;
+}
+
+export default function EditEvent({ id }: Props) {
+  const { projectId } = useAppParams();
+  const client = useQueryClient();
+
+  const { data: event } = api.event.byId.useQuery({ id, projectId });
+
+  const [selectedIcon, setIcon] = useState(EventIconRecords.default!.icon);
+  const [selectedColor, setColor] = useState(EventIconRecords.default!.color);
+  const [conversion, setConversion] = useState(false);
+  const [step, setStep] = useState<'icon' | 'color'>('icon');
+  useEffect(() => {
+    if (event?.meta?.icon) {
+      setIcon(event.meta.icon);
+    }
+    if (event?.meta?.color) {
+      setColor(event.meta.color);
+    }
+    if (event?.meta?.conversion) {
+      setConversion(event.meta.conversion);
+    }
+  }, [event]);
+
+  const SelectedIcon = EventIconMapper[selectedIcon]!;
+
+  const mutation = api.event.updateEventMeta.useMutation({
+    onSuccess() {
+      toast('Event updated');
+      client.refetchQueries({
+        queryKey: getQueryKey(api.event.events),
+      });
+      popModal();
+    },
+  });
+  const getBg = (color: string) => `bg-${color}-200`;
+  const getText = (color: string) => `text-${color}-700`;
+  const iconGrid = 'grid grid-cols-10 gap-4';
+  return (
+    <ModalContent>
+      <ModalHeader
+        title={`Edit: ${event?.name}`}
+        text={`Changes here will affect all "${event?.name}" events`}
+        onClose={() => popModal()}
+      />
+      <div className="col gap-4">
+        <div>
+          <Label className="mb-4 block">Conversion</Label>
+          <label className="flex cursor-pointer select-none items-center gap-4 rounded-md border border-border p-4">
+            <Checkbox
+              checked={conversion}
+              onCheckedChange={(checked) => {
+                if (checked === 'indeterminate') return;
+                setConversion(checked);
+              }}
+            />
+            <div>
+              <span>Yes, this event is important!</span>
+            </div>
+          </label>
+        </div>
+        <AnimatePresence mode="wait">
+          {step === 'icon' ? (
+            <motion.div
+              key="icon-step"
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -20 }}
+              transition={{ duration: 0.15 }}
+            >
+              <Label className="mb-4 block">Pick an icon</Label>
+              <div className={iconGrid}>
+                {Object.entries(EventIconMapper).map(([name, Icon]) => (
+                  <button
+                    key={name}
+                    onClick={() => {
+                      setIcon(name);
+                      setStep('color');
+                    }}
+                    className={cn(
+                      'inline-flex h-8 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-md bg-def-200 transition-all',
+                      name === selectedIcon
+                        ? 'scale-110 ring-1 ring-black'
+                        : '[&_svg]:opacity-50'
+                    )}
+                  >
+                    <Icon size={16} />
+                  </button>
+                ))}
+              </div>
+            </motion.div>
+          ) : (
+            <motion.div
+              key="color-step"
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -20 }}
+              transition={{ duration: 0.15 }}
+            >
+              <div className="row mb-4 items-center justify-between">
+                <div className="font-medium leading-none">Pick a color</div>
+                <button onClick={() => setStep('icon')}>
+                  <Badge variant="muted">
+                    Select icon
+                    <UndoIcon className="ml-1 h-3 w-3" />
+                  </Badge>
+                </button>
+              </div>
+              <div className={iconGrid}>
+                {EventIconColors.map((color) => (
+                  <button
+                    key={color}
+                    onClick={() => {
+                      setColor(color);
+                    }}
+                    className={cn(
+                      'flex h-8 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-md transition-all',
+                      color === selectedColor ? 'ring-1 ring-black' : '',
+                      getBg(color)
+                    )}
+                  >
+                    {SelectedIcon ? (
+                      <SelectedIcon size={16} className={getText(color)} />
+                    ) : (
+                      <svg
+                        className={`${getText(color)} opacity-70`}
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                      >
+                        <circle cx="12.1" cy="12.1" r="4" />
+                      </svg>
+                    )}
+                  </button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <Button
+          className="mt-8 w-full"
+          disabled={mutation.isLoading || !event}
+          onClick={() =>
+            mutation.mutate({
+              projectId,
+              name: event!.name,
+              icon: selectedIcon,
+              color: selectedColor,
+              conversion,
+            })
+          }
+        >
+          Update event
+        </Button>
+      </div>
+    </ModalContent>
+  );
+}

apps/dashboard/src/modals/index.tsx

@@ -14,6 +14,9 @@ const Loading = () => (
 );
 
 const modals = {
+  EditEvent: dynamic(() => import('./edit-event'), {
+    loading: Loading,
+  }),
   EventDetails: dynamic(() => import('./event-details'), {
     loading: Loading,
   }),

packages/trpc/src/routers/chart.ts

@@ -7,7 +7,6 @@ import {
   createSqlBuilder,
   db,
   formatClickhouseDate,
-  getPropertyKey,
   getSelectPropertyKey,
   TABLE_NAMES,
   toDate,

packages/trpc/src/routers/event.ts

@@ -52,7 +52,10 @@ export const eventRouter = createTRPCRouter({
     )
     .query(async ({ input: { id, projectId } }) => {
       const res = await getEvents(
-        `SELECT * FROM ${TABLE_NAMES.events} WHERE id = ${escape(id)} AND project_id = ${escape(projectId)};`
+        `SELECT * FROM ${TABLE_NAMES.events} WHERE id = ${escape(id)} AND project_id = ${escape(projectId)};`,
+        {
+          meta: true,
+        }
       );
 
       if (!res?.[0]) {