chore(dashboard): beta label (#7197)

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

@@ -3,35 +3,40 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 const badgeVariants = cva(
-  'inline-flex items-center [&>svg]:shrink-0 gap-1 h-fit border text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center [&>svg]:shrink-0 gap-1 h-fit border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
-        neutral: 'border-neutral-500 bg-neutral-500',
+        neutral: 'border-neutral-100 bg-neutral-100 text-neutral-500',
         destructive: 'border-transparent bg-destructive/10 text-destructive',
         success: 'border-transparent bg-success/10 text-success',
         warning: 'border-transparent bg-warning/10 text-warning',
         soft: 'bg-neutral-alpha-200 text-foreground-500 border-transparent',
         outline: 'border-neutral-alpha-200 bg-transparent font-normal text-foreground-600 shadow-sm',
       },
-      size: {
+      kind: {
         default: 'rounded-md px-2 py-1',
         pill: 'rounded-full px-2',
         'pill-stroke': 'rounded-full px-2',
         tag: 'rounded-md py-0.5 px-2',
       },
+      size: {
+        default: 'text-xs',
+        '2xs': 'text-[10px] leading-[14px] font-medium',
+      },
     },
     defaultVariants: {
       variant: 'neutral',
+      kind: 'default',
       size: 'default',
     },
   }
 );
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
 
-function Badge({ className, variant, size, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant, size }), className)} {...props} />;
+function Badge({ className, variant, kind, size, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant, kind, size }), className)} {...props} />;
 }
 
 export { Badge };

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

@@ -77,7 +77,7 @@ const TagInput = forwardRef<HTMLInputElement, TagInputProps>((props, ref) => {
           </PopoverAnchor>
           <div className="flex flex-wrap gap-2">
             {tags.map((tag, index) => (
-              <Badge key={index} variant="outline" size="tag" className="gap-1">
+              <Badge key={index} variant="outline" kind="tag" className="gap-1">
                 <span style={{ wordBreak: 'break-all' }}>{tag}</span>
                 <button type="button" onClick={() => removeTag(tag)}>
                   <RiCloseFill className="-mr-0.5 size-3" />

apps/dashboard/src/components/workflow-editor/add-step-menu.tsx

@@ -57,7 +57,7 @@ const MenuItem = ({
       />
       <span className="text-xs">{children}</span>
       {disabled && (
-        <Badge size="pill" variant="soft" className="ml-auto opacity-40">
+        <Badge kind="pill" variant="soft" className="ml-auto opacity-40">
           coming soon
         </Badge>
       )}

apps/dashboard/src/components/workflow-editor/editor-breadcrumbs.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { FaCode } from 'react-icons/fa6';
+import { WorkflowOriginEnum } from '@novu/shared';
+
 import { ArrowRight, RouteFill } from '@/components/icons';
 import {
   Breadcrumb,
@@ -14,6 +17,7 @@ import { useEnvironment } from '@/context/environment/hooks';
 import { buildRoute, ROUTES } from '@/utils/routes';
 import { useFetchWorkflow } from '@/hooks';
 import TruncatedText from '@/components/truncated-text';
+import { Badge } from '@/components/primitives/badge';
 
 export const EditorBreadcrumbs = () => {
   const { workflowSlug = '' } = useParams<{ workflowSlug: string }>();
@@ -29,6 +33,11 @@ export const EditorBreadcrumbs = () => {
     {
       label: 'Workflows',
       href: workflowsRoute,
+      node: (
+        <Badge kind="pill" size="2xs" className="no-underline">
+          BETA
+        </Badge>
+      ),
     },
   ];
 
@@ -43,21 +52,30 @@ export const EditorBreadcrumbs = () => {
       </Button>
       <Breadcrumb>
         <BreadcrumbList>
-          {breadcrumbs.map(({ label, href }) => (
+          {breadcrumbs.map(({ label, href, node }) => (
             <React.Fragment key={`${href}_${label}`}>
-              <BreadcrumbItem>
+              <BreadcrumbItem className="flex items-center gap-1">
                 <BreadcrumbLink to={href}>{label}</BreadcrumbLink>
+                {node}
               </BreadcrumbItem>
               <BreadcrumbSeparator />
             </React.Fragment>
           ))}
           <BreadcrumbItem>
-            <BreadcrumbPage>
-              <RouteFill />
-              <div className="flex max-w-[32ch]">
-                <TruncatedText>{workflow?.name}</TruncatedText>
-              </div>
-            </BreadcrumbPage>
+            {workflow && (
+              <BreadcrumbPage className="flex items-center gap-1">
+                {workflow.origin === WorkflowOriginEnum.EXTERNAL ? (
+                  <Badge variant="warning" kind="pill" size="2xs">
+                    <FaCode className="size-3.5" />
+                  </Badge>
+                ) : (
+                  <RouteFill className="size-4" />
+                )}
+                <div className="flex max-w-[32ch]">
+                  <TruncatedText>{workflow?.name}</TruncatedText>
+                </div>
+              </BreadcrumbPage>
+            )}
           </BreadcrumbItem>
         </BreadcrumbList>
       </Breadcrumb>

apps/dashboard/src/components/workflow-row.tsx

@@ -163,7 +163,7 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
       <TableCell className="font-medium">
         <div className="flex items-center gap-1">
           {workflow.origin === WorkflowOriginEnum.EXTERNAL && (
-            <Badge variant="warning" size="pill">
+            <Badge variant="warning" kind="pill">
               <FaCode className="size-3" />
             </Badge>
           )}

apps/dashboard/src/pages/workflows.tsx

@@ -1,14 +1,16 @@
+import { useEffect } from 'react';
+import { RiSearch2Line } from 'react-icons/ri';
+
 import { WorkflowList } from '@/components/workflow-list';
 import { DashboardLayout } from '@/components/dashboard-layout';
 import { Input } from '@/components/primitives/input';
 import { Button } from '@/components/primitives/button';
-import { RiSearch2Line } from 'react-icons/ri';
 import { CreateWorkflowButton } from '@/components/create-workflow-button';
 import { OptInModal } from '@/components/opt-in-modal';
 import { PageMeta } from '@/components/page-meta';
 import { useTelemetry } from '../hooks';
 import { TelemetryEvent } from '../utils/telemetry';
-import { useEffect } from 'react';
+import { Badge } from '@/components/primitives/badge';
 
 export const WorkflowsPage = () => {
   const track = useTelemetry();
@@ -20,7 +22,16 @@ export const WorkflowsPage = () => {
   return (
     <>
       <PageMeta title="Workflows" />
-      <DashboardLayout headerStartItems={<h1 className="text-foreground-950">Workflows</h1>}>
+      <DashboardLayout
+        headerStartItems={
+          <h1 className="text-foreground-950 flex items-center gap-1">
+            <span>Workflows</span>
+            <Badge kind="pill" size="2xs">
+              BETA
+            </Badge>
+          </h1>
+        }
+      >
         <OptInModal />
         <div className="mt-3 flex justify-between px-2.5 py-2">
           <div className="invisible flex w-[20ch] items-center gap-2 rounded-lg bg-neutral-50 p-2">