feat(dashboard): Workflow list (#6615)

novuhq · Oct 7, 2024 · f74e4c5 · f74e4c5
1 parent 71769f0
commit f74e4c5
Show file tree

Hide file tree

Showing 20 changed files with 427 additions and 102 deletions.
diff --git a/apps/dashboard/index.html b/apps/dashboard/index.html
@@ -5,6 +5,12 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -28,6 +28,8 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
@@ -42,7 +44,7 @@
     "react-dom": "^18.3.1",
     "react-helmet-async": "^1.3.0",
     "react-hook-form": "7.43.9",
-    "react-icons": "^5.0.1",
+    "react-icons": "^5.3.0",
     "react-router-dom": "6.26.2",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",

diff --git a/apps/dashboard/src/components/primitives/badge.tsx b/apps/dashboard/src/components/primitives/badge.tsx
@@ -7,7 +7,7 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-secondary-alpha-100 text-secondary-300',
+        default: 'border-transparent bg-neutral-alpha-100 text-neutral-300',
         destructive: 'border-transparent bg-destructive/10 text-destructive',
         success: 'border-transparent bg-success/10 text-success',
         warning: 'border-transparent bg-warning/10 text-warning',

diff --git a/apps/dashboard/src/components/primitives/button.tsx b/apps/dashboard/src/components/primitives/button.tsx
@@ -9,7 +9,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          'bg-gradient-to-b from-secondary-alpha-900 to-secondary-900 text-secondary-foreground shadow-[inset_0_-4px_2px_-2px_hsl(var(--secondary-900)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--secondary-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',
+          'bg-gradient-to-b from-neutral-alpha-900 to-neutral-900 text-neutral-foreground 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 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:

diff --git a/apps/dashboard/src/components/primitives/pagination.tsx b/apps/dashboard/src/components/primitives/pagination.tsx
@@ -14,7 +14,7 @@ const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
   <nav
     role="navigation"
     aria-label="pagination"
-    className={cn('mx-auto flex w-full justify-center rounded-md border', className)}
+    className={cn('text-foreground-600 mx-auto flex w-fit justify-center rounded-md border', className)}
     {...props}
   />
 );
@@ -55,28 +55,28 @@ PaginationLink.displayName = 'PaginationLink';
 
 const PaginationStart = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink aria-label="Go to first page" size="icon" className={cn('', className)} {...props}>
-    <DoubleArrowLeftIcon className="size-4" />
+    <DoubleArrowLeftIcon className="size-3" />
   </PaginationLink>
 );
 PaginationStart.displayName = 'PaginationStart';
 
 const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink aria-label="Go to previous page" size="icon" className={cn('', className)} {...props}>
-    <ChevronLeftIcon className="size-4" />
+    <ChevronLeftIcon className="size-3" />
   </PaginationLink>
 );
 PaginationPrevious.displayName = 'PaginationPrevious';
 
 const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink aria-label="Go to next page" size="icon" className={cn('', className)} {...props}>
-    <ChevronRightIcon className="size-4" />
+    <ChevronRightIcon className="size-3" />
   </PaginationLink>
 );
 PaginationNext.displayName = 'PaginationNext';
 
 const PaginationEnd = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink aria-label="Go to final page" size="icon" className={cn('', className)} {...props}>
-    <DoubleArrowRightIcon className="size-4" />
+    <DoubleArrowRightIcon className="size-3" />
   </PaginationLink>
 );
 PaginationEnd.displayName = 'PaginationEnd';
@@ -87,7 +87,7 @@ const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'
     className={cn(buttonVariants({ size: 'icon', variant: 'ghost' }), 'bg-transparent hover:bg-transparent', className)}
     {...props}
   >
-    <DotsHorizontalIcon className="size-4" />
+    <DotsHorizontalIcon className="size-3" />
   </span>
 );
 PaginationEllipsis.displayName = 'PaginationEllipsis';

diff --git a/apps/dashboard/src/components/primitives/popover.tsx b/apps/dashboard/src/components/primitives/popover.tsx
@@ -19,8 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        //TODO: Change bg and text colors
-        'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
+        'bg-background text-foreground-950 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
         className
       )}
       {...props}

diff --git a/apps/dashboard/src/components/primitives/select.tsx b/apps/dashboard/src/components/primitives/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring shadow-xs flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -68,7 +68,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-background text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md',
+        'bg-background text-foreground-600 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className

diff --git a/apps/dashboard/src/components/primitives/step.tsx b/apps/dashboard/src/components/primitives/step.tsx
@@ -4,15 +4,18 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/utils/ui';
 
 const stepVariants = cva(
-  'inline-flex items-center rounded-full border text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  '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',
   {
     variants: {
       variant: {
-        default: 'border-secondary-alpha-100 bg-secondary-alpha-50 text-secondary-alpha-400',
-        feature: 'border-feature/30  bg-foreground/2.5 text-feature/30',
-        information: 'border-information/30 bg-foreground/2.5 text-information/30',
-        highlighted: 'border-highlighted/30  bg-foreground/2.5 text-highlighted/30',
-        stable: 'border-stable/30  bg-foreground/2.5 text-stable/30',
+        // use solid bg here because we usually stack these on top of each other
+        default: 'border-neutral-100 bg-neutral-50 text-neutral-400',
+        feature: 'border-feature/30 bg-neutral-50 text-feature/30',
+        information: 'border-information/30 bg-neutral-50 text-information/30',
+        highlighted: 'border-highlighted/30 bg-neutral-50 text-highlighted/30',
+        stable: 'border-stable/30 bg-neutral-50 text-stable/30',
+        verified: 'border-verified/30 bg-neutral-50 text-verified/30',
+        destructive: 'border-destructive/30 bg-neutral-50 text-destructive/30',
       },
       size: {
         default: 'p-2 [&>svg]:size-3.5',

diff --git a/apps/dashboard/src/components/primitives/table.tsx b/apps/dashboard/src/components/primitives/table.tsx
@@ -1,18 +1,35 @@
 import * as React from 'react';
 
 import { cn } from '@/utils/ui';
+import { ClassNameValue } from 'tailwind-merge';
 
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-hidden rounded-md border shadow-sm">
-      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
-    </div>
-  )
-);
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLDivElement> & { containerClassname?: ClassNameValue }
+>(({ className, containerClassname, ...props }, ref) => (
+  <div
+    className={cn(
+      'border-neutral-alpha-200 relative w-full overflow-x-auto rounded-md border shadow-sm',
+      containerClassname
+    )}
+  >
+    <table
+      ref={ref}
+      className={cn('relative w-full caption-bottom border-separate border-spacing-0 text-sm', className)}
+      {...props}
+    />
+  </div>
+));
 Table.displayName = 'Table';
 
 const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => <thead ref={ref} className={cn('bg-card [&>tr]:border-0', className)} {...props} />
+  ({ className, ...props }, ref) => (
+    <thead
+      ref={ref}
+      className={cn('sticky top-0 bg-neutral-50 shadow-[0_0_0_1px_hsl(var(--neutral-alpha-200))]', className)}
+      {...props}
+    />
+  )
 );
 TableHeader.displayName = 'TableHeader';
 
@@ -22,15 +39,21 @@ const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes
 TableBody.displayName = 'TableBody';
 
 const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => <tfoot ref={ref} className={cn('font-medium', className)} {...props} />
+  ({ className, ...props }, ref) => (
+    <tfoot
+      ref={ref}
+      className={cn('bg-background sticky bottom-0 shadow-[0_0_0_1px_hsl(var(--neutral-alpha-200))]', className)}
+      {...props}
+    />
+  )
 );
 TableFooter.displayName = 'TableFooter';
 
 const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
   ({ className, ...props }, ref) => (
     <tr
       ref={ref}
-      className={cn('border-border/50 first-of-type:border-border border-t transition-colors', className)}
+      className={cn('[&>td]:border-neutral-alpha-100 [&>td]:border-b [&>td]:last-of-type:border-0', className)}
       {...props}
     />
   )
@@ -42,7 +65,7 @@ const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<
     <th
       ref={ref}
       className={cn(
-        'text-foreground/60 h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        'text-foreground-600 h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
         className
       )}
       {...props}

diff --git a/apps/dashboard/src/components/primitives/tag.tsx b/apps/dashboard/src/components/primitives/tag.tsx
@@ -4,13 +4,13 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/utils/ui';
 
 const tagVariants = cva(
-  'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-secondary-alpha-100 text-secondary-alpha-500',
-        feature: 'border-transparent bg-feature/10 text-feature',
-        information: 'border-transparent bg-information/10 text-information',
+        default: 'bg-neutral-alpha-100 text-neutral-alpha-500',
+        feature: 'bg-feature/10 text-feature',
+        information: 'bg-information/10 text-information',
       },
     },
     defaultVariants: {

diff --git a/apps/dashboard/src/components/side-navigation/organization-dropdown.tsx b/apps/dashboard/src/components/side-navigation/organization-dropdown.tsx
@@ -5,7 +5,7 @@ const OrganizationSwitcherAppearance: OrganizationSwitcherTheme = {
   elements: {
     rootBox: 'w-full',
     organizationSwitcherTrigger:
-      'w-full py-0 [&>.cl-organizationPreview]:px-0 px-1.5 justify-start hover:bg-background before:border-border-stroke/10 focus-visible:ring-ring group relative flex cursor-pointer items-center gap-2 rounded-lg transition duration-300 ease-out before:absolute before:bottom-[1px] before:left-0 before:h-0 before:w-full before:border-b before:border-solid before:transition-all before:duration-300 before:ease-out before:content-[""] hover:shadow-sm hover:before:border-border-stroke/0 focus-visible:outline-none focus-visible:ring-1 focus:bg-transparent focus:shadow-sm focus:bg-background focus:before:border-border-stroke/0',
+      'w-full py-0 [&>.cl-organizationPreview]:px-0 px-1.5 justify-start hover:bg-background before:border-neutral-alpha-100 focus-visible:ring-ring group relative flex cursor-pointer items-center gap-2 rounded-lg transition duration-300 ease-out before:absolute before:bottom-[1px] before:left-0 before:h-0 before:w-full before:border-b before:border-solid before:transition-all before:duration-300 before:ease-out before:content-[""] hover:shadow-sm hover:before:border-transparent focus-visible:outline-none focus-visible:ring-1 focus:bg-transparent focus:shadow-sm focus:bg-background focus:before:border-transparent',
     organizationSwitcherTriggerIcon: 'ml-auto',
     organizationSwitcherPopoverActionButton__manageOrganization: {
       display: 'none',

diff --git a/apps/dashboard/src/components/side-navigation/side-navigation.tsx b/apps/dashboard/src/components/side-navigation/side-navigation.tsx
@@ -94,7 +94,7 @@ export const SideNavigation = () => {
   const onEnvironmentChange = (value: string) => switchEnvironment(value);
 
   return (
-    <aside className="bg-secondary-alpha-50 relative flex w-[275px] flex-shrink-0 flex-col gap-3 px-2 pb-3 pt-1.5">
+    <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} />