feat(dashboard): Read only code first workflows & sidebar cleanups (#…

…6823)

apps/dashboard/eslint.config.js

@@ -20,7 +20,7 @@ export default tseslint.config(
     rules: {
       ...reactHooks.configs.recommended.rules,
       '@typescript-eslint/no-explicit-any': 'warn',
-      'react-refresh/only-export-components': ['error', { allowConstantExport: true }],
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
       '@typescript-eslint/no-unused-vars': ['off'],
       '@typescript-eslint/naming-convention': [
         'error',

apps/dashboard/src/components/dashboard-layout.tsx

@@ -18,7 +18,7 @@ export const DashboardLayout = ({
       <div className="relative flex h-full w-full">
         <SideNavigation />
         <div className="flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
-          <HeaderNavigation startItems={headerStartItems} />
+          <HeaderNavigation startItems={headerStartItems} className="pt-4" />
 
           <div className="flex flex-1 flex-col overflow-y-auto overflow-x-hidden">{children}</div>
         </div>

apps/dashboard/src/components/header-navigation/header-navigation.tsx

@@ -1,18 +1,21 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { UserProfile } from '@/components/user-profile';
 import { InboxButton } from '@/components/inbox-button';
 import { CustomerSupportButton } from './customer-support-button';
 import { EditBridgeUrlButton } from './edit-bridge-url-button';
+import { cn } from '@/utils/ui';
 
-export const HeaderNavigation = ({
-  startItems,
-  hideBridgeUrl = false,
-}: {
+type HeaderNavigationProps = HTMLAttributes<HTMLDivElement> & {
   startItems?: ReactNode;
   hideBridgeUrl?: boolean;
-}) => {
+};
+export const HeaderNavigation = (props: HeaderNavigationProps) => {
+  const { startItems, hideBridgeUrl = false, className, ...rest } = props;
   return (
-    <div className="bg-background flex w-full items-center justify-between border-b px-2.5 py-1.5">
+    <div
+      className={cn('bg-background flex w-full items-center justify-between border-b px-2.5 py-1.5', className)}
+      {...rest}
+    >
       {startItems}
       <div className="text-foreground-600 ml-auto flex items-center gap-3">
         {!hideBridgeUrl ? <EditBridgeUrlButton /> : null}

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

@@ -1,8 +1,42 @@
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import { type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/utils/ui';
-import { buttonVariants } from './variants';
+
+export const buttonVariants = cva(
+  `relative isolate inline-flex items-center justify-center whitespace-nowrap rounded-lg gap-1 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`,
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-gradient-to-b from-neutral-alpha-900 to-neutral-900 text-neutral-foreground [clip-path:border-box] shadow-[inset_0_-4px_2px_-2px_hsl(var(--neutral-900)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--neutral-900)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
+        primary:
+          'bg-gradient-to-b from-primary/90 to-primary text-primary-foreground [clip-path:border-box] shadow-[inset_0_-4px_2px_-2px_hsl(var(--primary)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--primary)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
+        destructive:
+          'bg-gradient-to-b from-destructive/90 to-destructive text-destructive-foreground [clip-path:border-box] shadow-[inset_0_-4px_2px_-2px_hsl(var(--destructive)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--destructive)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
+        outline:
+          'border border-input text-foreground-600 bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+        dashed: 'border border-dashed border-input bg-background hover:bg-accent text-foreground-600',
+        ghost: 'hover:bg-accent',
+        ghostDestructive: 'hover:bg-destructive/10 text-destructive',
+        link: 'underline-offset-4 hover:underline',
+        light:
+          'bg-destructive/10 hover:bg-background hover:border hover:border-destructive text-destructive focus-visible:ring-destructive/10 focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:bg-background focus-visible:border focus-visible:border-destructive',
+      },
+      size: {
+        default: 'h-9 p-2.5',
+        xs: 'h-6 px-1.5 rounded-md text-xs',
+        sm: 'h-8 px-1.5 rounded-md text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'size-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,

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

@@ -8,8 +8,7 @@ import {
 } from '@radix-ui/react-icons';
 
 import { cn } from '@/utils/ui';
-import { ButtonProps } from '@/components/primitives/button';
-import { buttonVariants } from '@/components/primitives/variants';
+import { ButtonProps, buttonVariants } from '@/components/primitives/button';
 import { Link, LinkProps } from 'react-router-dom';
 
 const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (

apps/dashboard/src/components/primitives/variants.ts

@@ -57,39 +57,6 @@ export const badgeContentVariants = cva('text-xs font-medium', {
   },
 });
 
-export const buttonVariants = cva(
-  `relative isolate inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`,
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-gradient-to-b from-neutral-alpha-900 to-neutral-900 text-neutral-foreground [clip-path:border-box] shadow-[inset_0_-4px_2px_-2px_hsl(var(--neutral-900)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--neutral-900)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
-        primary:
-          'bg-gradient-to-b from-primary/90 to-primary text-primary-foreground [clip-path:border-box] shadow-[inset_0_-4px_2px_-2px_hsl(var(--primary)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--primary)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
-        destructive:
-          'bg-gradient-to-b from-destructive/90 to-destructive text-destructive-foreground [clip-path:border-box] shadow-[inset_0_-4px_2px_-2px_hsl(var(--destructive)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--destructive)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
-        outline: 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
-        dashed: 'border border-dashed border-input bg-background hover:bg-accent text-foreground-600',
-        ghost: 'hover:bg-accent',
-        link: 'underline-offset-4 hover:underline',
-        light:
-          'bg-destructive/10 hover:bg-background hover:border hover:border-destructive text-destructive focus-visible:ring-destructive/10 focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:bg-background focus-visible:border focus-visible:border-destructive',
-      },
-      size: {
-        default: 'h-9 p-2.5',
-        xs: 'h-6 px-1.5 rounded-md text-xs',
-        sm: 'h-8 px-1.5 rounded-md text-sm',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'size-8',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
 export const stepVariants = cva(
   'inline-flex items-center shadow-xs rounded-full border text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 bg-neutral-50',
   {

apps/dashboard/src/components/side-navigation/Sidebar.tsx

@@ -0,0 +1,33 @@
+import { cn } from '@/utils/ui';
+import { cva, VariantProps } from 'class-variance-authority';
+import { HTMLAttributes } from 'react';
+
+type SidebarHeaderProps = HTMLAttributes<HTMLDivElement>;
+export const SidebarHeader = (props: SidebarHeaderProps) => {
+  const { className, ...rest } = props;
+  return <div className={cn('flex gap-2.5 px-2 py-3.5', className)} {...rest} />;
+};
+
+export const sidebarContentVariants = cva(`flex flex-col`, {
+  variants: {
+    size: {
+      sm: 'gap-2 px-3 py-2',
+      md: 'gap-2.5 px-3 py-3',
+      lg: 'gap-2.5 px-3 py-4',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+type SidebarContentProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof sidebarContentVariants>;
+export const SidebarContent = (props: SidebarContentProps) => {
+  const { className, size, ...rest } = props;
+  return <div className={cn(sidebarContentVariants({ size }), className)} {...rest} />;
+};
+
+type SidebarFooterProps = HTMLAttributes<HTMLDivElement>;
+export const SidebarFooter = (props: SidebarFooterProps) => {
+  const { className, ...rest } = props;
+  return <div className={cn('mt-auto space-y-2.5 px-2 py-3.5', className)} {...rest} />;
+};

apps/dashboard/src/components/side-navigation/side-navigation.tsx

@@ -19,6 +19,7 @@ import { buildRoute, LEGACY_ROUTES, ROUTES } from '@/utils/routes';
 import { SubscribersStayTunedModal } from './subscribers-stay-tuned-modal';
 import { TelemetryEvent } from '@/utils/telemetry';
 import { useTelemetry } from '@/hooks/use-telemetry';
+import { SidebarContent } from '@/components/side-navigation/Sidebar';
 
 const linkVariants = cva(
   `flex items-center gap-2 text-sm py-1.5 px-2 rounded-lg focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring cursor-pointer`,
@@ -91,54 +92,56 @@ export const SideNavigation = () => {
   };
 
   return (
-    <aside className="bg-neutral-alpha-50 relative flex w-[275px] flex-shrink-0 flex-col gap-3 px-2 pb-3 pt-1.5">
-      <FreeTrialCard />
-      <OrganizationDropdown />
-      <EnvironmentDropdown value={currentEnvironment?.name} data={environmentNames} onChange={onEnvironmentChange} />
-      <nav className="flex flex-1 flex-col gap-4">
-        <NavigationGroup>
-          <NavigationLink to={buildRoute(ROUTES.WORKFLOWS, { environmentId: currentEnvironment?._id ?? '' })}>
-            <RiRouteFill className="size-4" />
-            <span>Workflows</span>
-          </NavigationLink>
-          <SubscribersStayTunedModal>
-            <span onClick={() => track(TelemetryEvent.SUBSCRIBERS_LINK_CLICKED)}>
-              <NavigationLink>
-                <RiGroup2Line className="size-4" />
-                <span>Subscribers</span>
-              </NavigationLink>
-            </span>
-          </SubscribersStayTunedModal>
-        </NavigationGroup>
-        <NavigationGroup label="Monitor">
-          <NavigationLink to={LEGACY_ROUTES.ACTIVITY_FEED} isExternal>
-            <RiBarChartBoxLine className="size-4" />
-            <span>Activity Feed</span>
-          </NavigationLink>
-        </NavigationGroup>
-        <NavigationGroup label="Developer">
-          <NavigationLink to={LEGACY_ROUTES.INTEGRATIONS} isExternal>
-            <RiStore3Line className="size-4" />
-            <span>Integration Store</span>
-          </NavigationLink>
-          <NavigationLink to={LEGACY_ROUTES.API_KEYS} isExternal>
-            <RiKey2Line className="size-4" />
-            <span>API Keys</span>
-          </NavigationLink>
-        </NavigationGroup>
-        <NavigationGroup label="Application">
-          <NavigationLink to={LEGACY_ROUTES.SETTINGS} isExternal>
-            <RiSettings4Line className="size-4" />
-            <span>Settings</span>
-          </NavigationLink>
-        </NavigationGroup>
-        <NavigationGroup>
-          <NavigationLink to={LEGACY_ROUTES.INVITE_TEAM_MEMBERS} isExternal>
-            <RiUserAddLine className="size-4" />
-            <span>Invite teammates</span>
-          </NavigationLink>
-        </NavigationGroup>
-      </nav>
+    <aside className="bg-neutral-alpha-50 relative flex w-[275px] flex-shrink-0 flex-col">
+      <SidebarContent>
+        <FreeTrialCard />
+        <OrganizationDropdown />
+        <EnvironmentDropdown value={currentEnvironment?.name} data={environmentNames} onChange={onEnvironmentChange} />
+        <nav className="flex flex-1 flex-col gap-4">
+          <NavigationGroup>
+            <NavigationLink to={buildRoute(ROUTES.WORKFLOWS, { environmentId: currentEnvironment?._id ?? '' })}>
+              <RiRouteFill className="size-4" />
+              <span>Workflows</span>
+            </NavigationLink>
+            <SubscribersStayTunedModal>
+              <span onClick={() => track(TelemetryEvent.SUBSCRIBERS_LINK_CLICKED)}>
+                <NavigationLink>
+                  <RiGroup2Line className="size-4" />
+                  <span>Subscribers</span>
+                </NavigationLink>
+              </span>
+            </SubscribersStayTunedModal>
+          </NavigationGroup>
+          <NavigationGroup label="Monitor">
+            <NavigationLink to={LEGACY_ROUTES.ACTIVITY_FEED} isExternal>
+              <RiBarChartBoxLine className="size-4" />
+              <span>Activity Feed</span>
+            </NavigationLink>
+          </NavigationGroup>
+          <NavigationGroup label="Developer">
+            <NavigationLink to={LEGACY_ROUTES.INTEGRATIONS} isExternal>
+              <RiStore3Line className="size-4" />
+              <span>Integration Store</span>
+            </NavigationLink>
+            <NavigationLink to={LEGACY_ROUTES.API_KEYS} isExternal>
+              <RiKey2Line className="size-4" />
+              <span>API Keys</span>
+            </NavigationLink>
+          </NavigationGroup>
+          <NavigationGroup label="Application">
+            <NavigationLink to={LEGACY_ROUTES.SETTINGS} isExternal>
+              <RiSettings4Line className="size-4" />
+              <span>Settings</span>
+            </NavigationLink>
+          </NavigationGroup>
+          <NavigationGroup>
+            <NavigationLink to={LEGACY_ROUTES.INVITE_TEAM_MEMBERS} isExternal>
+              <RiUserAddLine className="size-4" />
+              <span>Invite teammates</span>
+            </NavigationLink>
+          </NavigationGroup>
+        </nav>
+      </SidebarContent>
     </aside>
   );
 };

apps/dashboard/src/components/workflow-editor/action-picker.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/primitives/button';
+import { Button, buttonVariants } from '@/components/primitives/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,7 +10,6 @@ import { Input, InputField } from '@/components/primitives/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/primitives/popover';
 import { Separator } from '@/components/primitives/separator';
 import { URLInput } from '@/components/primitives/url-input';
-import { buttonVariants } from '@/components/primitives/variants';
 import { cn } from '@/utils/ui';
 import { urlTargetTypes } from '@/utils/url';
 import { zodResolver } from '@hookform/resolvers/zod';