feat(dashboard): Subscriber drawer on activity feed & improvements (#7686)

Author: desiprisg

apps/dashboard/package.json

@@ -24,17 +24,17 @@
     "@hookform/resolvers": "^3.9.0",
     "@lezer/highlight": "^1.2.1",
     "@maily-to/core": "^0.0.27",
+    "@novu/api": "workspace:*",
     "@novu/framework": "workspace:*",
     "@novu/js": "workspace:*",
     "@novu/react": "workspace:*",
     "@novu/shared": "workspace:*",
-    "@novu/api": "workspace:*",
     "@radix-ui/react-accordion": "^1.2.1",
-    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
@@ -118,6 +118,7 @@
     "@types/node": "^22.7.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",

apps/dashboard/src/components/activity/components/activity-overview.tsx

@@ -1,12 +1,13 @@
-import { format } from 'date-fns';
-import { Link } from 'react-router-dom';
-import { cn } from '@/utils/ui';
-import { buildRoute, ROUTES } from '@/utils/routes';
-import { useEnvironment } from '@/context/environment/hooks';
+import { SubscriberDrawerButton } from '@/components/subscribers/subscriber-drawer';
 import { TimeDisplayHoverCard } from '@/components/time-display-hover-card';
-import { OverviewItem } from './overview-item';
+import { useEnvironment } from '@/context/environment/hooks';
+import { buildRoute, ROUTES } from '@/utils/routes';
+import { cn } from '@/utils/ui';
 import { IActivity } from '@novu/shared';
+import { format } from 'date-fns';
+import { Link } from 'react-router-dom';
 import { JOB_STATUS_CONFIG } from '../constants';
+import { OverviewItem } from './overview-item';
 
 export interface ActivityOverviewProps {
   activity: IActivity;
@@ -37,12 +38,19 @@ export function ActivityOverview({ activity }: ActivityOverviewProps) {
 
         <OverviewItem label="Transaction ID" value={activity.transactionId} isCopyable />
 
-        <OverviewItem
-          label="Subscriber ID"
-          isDeleted={!activity.subscriber}
-          value={(activity.subscriber?.subscriberId || activity._subscriberId) ?? ''}
-          isCopyable
-        />
+        <SubscriberDrawerButton
+          disabled={!activity.subscriber}
+          className="text-start"
+          subscriberId={activity.subscriber?.subscriberId || activity._subscriberId}
+          readOnly={true}
+        >
+          <OverviewItem
+            label="Subscriber ID"
+            isDeleted={!activity.subscriber}
+            value={(activity.subscriber?.subscriberId || activity._subscriberId) ?? ''}
+            isCopyable
+          />
+        </SubscriberDrawerButton>
 
         <OverviewItem label="Triggered at" value={format(new Date(activity.createdAt), 'MMM d yyyy, HH:mm:ss')}>
           <TimeDisplayHoverCard

apps/dashboard/src/components/activity/components/overview-item.tsx

@@ -46,8 +46,11 @@ export function OverviewItem({
             valueToCopy={value}
             mode="ghost"
             size="2xs"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
             className="text-foreground-600 mr-0 size-3 gap-0 p-0 opacity-0 transition-opacity group-hover:opacity-100"
-          ></CopyButton>
+          />
         )}
         {wrappedChildren}
       </div>

apps/dashboard/src/components/primitives/copy-button.tsx

@@ -10,7 +10,7 @@ type CopyButtonProps = ButtonProps & {
 };
 
 export const CopyButton = (props: CopyButtonProps) => {
-  const { className, valueToCopy, children, size, ...rest } = props;
+  const { className, valueToCopy, children, onClick, size, ...rest } = props;
 
   const [copied, setCopied] = useState<boolean>(false);
 
@@ -32,7 +32,10 @@ export const CopyButton = (props: CopyButtonProps) => {
         <Button
           mode="outline"
           variant="secondary"
-          onClick={handleCopy}
+          onClick={(e) => {
+            handleCopy();
+            onClick?.(e);
+          }}
           className={cn(
             'rounded-none bg-transparent outline-none ring-1 ring-inset ring-transparent transition duration-200 ease-out',
             'hover:bg-bg-weak-50 hover:text-text-strong-950',

apps/dashboard/src/components/primitives/editor.tsx

@@ -1,6 +1,3 @@
-import React, { useCallback, useMemo } from 'react';
-import { flushSync } from 'react-dom';
-import { cva } from 'class-variance-authority';
 import { autocompleteFooter, autocompleteHeader, functionIcon } from '@/components/primitives/constants';
 import { useDataRef } from '@/hooks/use-data-ref';
 import { tags as t } from '@lezer/highlight';
@@ -11,6 +8,9 @@ import {
   ReactCodeMirrorProps,
   type ReactCodeMirrorRef,
 } from '@uiw/react-codemirror';
+import { cva } from 'class-variance-authority';
+import React, { useCallback, useMemo } from 'react';
+import { flushSync } from 'react-dom';
 
 const variants = cva('h-full w-full flex-1 [&_.cm-focused]:outline-none', {
   variants: {

apps/dashboard/src/components/primitives/phone-input.tsx

@@ -1,13 +1,13 @@
+import { cn } from '@/utils/ui';
 import * as React from 'react';
+import { RiArrowDownSLine, RiCheckLine, RiEarthLine } from 'react-icons/ri';
 import * as RPNInput from 'react-phone-number-input';
 import flags from 'react-phone-number-input/flags';
-import { cn } from '@/utils/ui';
-import { InputPure, InputRoot, InputWrapper } from './input';
-import { Popover, PopoverContent, PopoverTrigger } from './popover';
 import { Button } from './button';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './command';
+import { InputPure, InputRoot, InputWrapper } from './input';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
 import { ScrollArea } from './scroll-area';
-import { RiArrowDownSLine, RiCheckLine, RiEarthLine } from 'react-icons/ri';
 
 type PhoneInputProps = Omit<React.ComponentProps<'input'>, 'onChange' | 'value' | 'ref'> &
   Omit<RPNInput.Props<typeof RPNInput.default>, 'onChange'> & {
@@ -54,7 +54,7 @@ type CountrySelectProps = {
 
 const CountrySelect = ({ disabled, value: selectedCountry, options: countryList, onChange }: CountrySelectProps) => {
   return (
-    <Popover>
+    <Popover modal={false}>
       <PopoverTrigger asChild>
         <Button
           type="button"
@@ -67,7 +67,7 @@ const CountrySelect = ({ disabled, value: selectedCountry, options: countryList,
           <RiArrowDownSLine className={cn('-mr-2 size-4 opacity-50', disabled ? 'hidden' : 'opacity-100')} />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[300px] rounded-lg border-t-0 p-0">
+      <PopoverContent portal={false} className="w-[300px] rounded-lg border-t-0 p-0">
         <Command>
           <CommandInput placeholder="Search country..." />
           <CommandList>

apps/dashboard/src/components/primitives/select.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { cva, VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
 import { cn } from '@/utils/ui';
 
@@ -123,8 +123,8 @@ const SelectItem = React.forwardRef<
     {...props}
   >
     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+      <SelectPrimitive.ItemIndicator className="shrink-0">
+        <CheckIcon className="size-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText className="text-sm">{children}</SelectPrimitive.ItemText>
@@ -142,14 +142,14 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
+  SelectContent,
   SelectGroup,
-  SelectValue,
   SelectIcon,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
   SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
+  SelectLabel,
   SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 };

apps/dashboard/src/components/primitives/sheet.tsx

@@ -14,8 +14,6 @@ const SheetClose = SheetPrimitive.Close;
 
 const SheetPortal = SheetPrimitive.Portal;
 
-const SheetContentBase = SheetPrimitive.Content;
-
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
@@ -39,9 +37,9 @@ const sheetVariants = cva(
         top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
           'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-xl',
         right:
-          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-xl',
       },
     },
     defaultVariants: {
@@ -59,7 +57,7 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
     <SheetPortal>
       <SheetOverlay />
       <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
-        <SheetPrimitive.Close className="absolute right-4 top-4" asChild>
+        <SheetPrimitive.Close className="absolute right-3.5 top-3.5" asChild>
           <CompactButton size="md" variant="ghost" icon={RiCloseLine}>
             <span className="sr-only">Close</span>
           </CompactButton>
@@ -106,7 +104,6 @@ export {
   Sheet,
   SheetClose,
   SheetContent,
-  SheetContentBase,
   SheetDescription,
   SheetFooter,
   SheetHeader,