fix(dashboard): Crate with fixes (#7367)

novuhq · Dec 24, 2024 · cee5ac3 · cee5ac3
1 parent b4a46ae
commit cee5ac3
Show file tree

Hide file tree

Showing 10 changed files with 140 additions and 138 deletions.
diff --git a/apps/dashboard/src/components/create-workflow-button.tsx b/apps/dashboard/src/components/create-workflow-button.tsx
@@ -2,8 +2,9 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { ComponentProps, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { RiExternalLinkLine } from 'react-icons/ri';
-import { Link, useNavigate } from 'react-router-dom';
+import { RiArrowRightSLine } from 'react-icons/ri';
+import { ExternalLink } from '@/components/shared/external-link';
+import { useNavigate } from 'react-router-dom';
 import { z } from 'zod';
 import { type CreateWorkflowDto, WorkflowCreationSourceEnum, slugify } from '@novu/shared';
 import { createWorkflow } from '@/api/workflows';
@@ -73,13 +74,7 @@ export const CreateWorkflowButton = (props: CreateWorkflowButtonProps) => {
           <div>
             <SheetDescription>
               Define the steps to notify subscribers using channels like in-app, email, and more.{' '}
-              <Link
-                target="_blank"
-                to="https://docs.novu.co/concepts/workflows"
-                className="text-foreground-400 inline-flex items-center text-xs underline"
-              >
-                Learn more <RiExternalLinkLine className="inline size-4" />
-              </Link>
+              <ExternalLink href="https://docs.novu.co/concepts/workflows">Learn more</ExternalLink>
             </SheetDescription>
           </div>
         </SheetHeader>
@@ -195,6 +190,7 @@ export const CreateWorkflowButton = (props: CreateWorkflowButtonProps) => {
         <SheetFooter>
           <Button isLoading={isPending} variant="default" type="submit" form="create-workflow">
             Create workflow
+            <RiArrowRightSLine className="size-4" />
           </Button>
         </SheetFooter>
       </SheetContent>

diff --git a/apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx b/apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx
@@ -63,7 +63,7 @@ export const EditBridgeUrlButton = () => {
               className={cn(
                 'relative size-1.5 animate-[pulse-shadow_1s_ease-in-out_infinite] rounded-full',
                 status === ConnectionStatus.DISCONNECTED || status === ConnectionStatus.LOADING
-                  ? 'bg-destructive [--pulse-color:var(--destructive)]'
+                  ? 'bg-destructive'
                   : 'bg-success [--pulse-color:var(--success)]'
               )}
             />

diff --git a/apps/dashboard/src/components/primitives/button.tsx b/apps/dashboard/src/components/primitives/button.tsx
@@ -5,7 +5,7 @@ import { cn } from '@/utils/ui';
 import { RiLoader4Line } from 'react-icons/ri';
 
 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-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`,
+  `relative isolate inline-flex items-center justify-center whitespace-nowrap rounded-lg gap-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`,
   {
     variants: {
       variant: {
@@ -26,10 +26,10 @@ export const buttonVariants = cva(
       },
       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',
+        xs: 'h-6 px-2 rounded-md',
+        sm: 'h-8 px-2 rounded-md',
         lg: 'h-10 rounded-md px-8',
-        'input-right': 'rounded-none border-b-0 h-full text-xs border-r-0 border-t-0 px-2 py-0',
+        'input-right': 'rounded-none border-b-0 h-full border-r-0 border-t-0 px-2 py-0',
         icon: 'size-8',
       },
     },

diff --git a/apps/dashboard/src/components/shared/external-link.tsx b/apps/dashboard/src/components/shared/external-link.tsx
@@ -1,4 +1,4 @@
-import { RiBookMarkedLine, RiExternalLinkLine, RiQuestionLine } from 'react-icons/ri';
+import { RiBookMarkedLine, RiArrowRightUpLine, RiQuestionLine } from 'react-icons/ri';
 import { cn } from '@/utils/ui';
 import { useTelemetry } from '@/hooks/use-telemetry';
 import { TelemetryEvent } from '@/utils/telemetry';
@@ -26,19 +26,21 @@ export function ExternalLink({
     });
   };
 
+  const finalIconClassName = cn('inline size-3 mb-1', iconClassName);
+
   return (
     <a
       target="_blank"
       rel="noopener noreferrer"
-      className={cn('text-foreground-600 inline-flex items-center gap-1 hover:underline', className)}
+      className={cn('text-foreground-400 inline-flex items-center text-xs underline', className)}
       href={href}
       onClick={handleClick}
       {...props}
     >
-      {variant === 'documentation' && <RiBookMarkedLine className={cn('size-4', iconClassName)} aria-hidden="true" />}
-      {variant === 'default' && <RiExternalLinkLine className={cn('size-4', iconClassName)} aria-hidden="true" />}
-      {variant === 'tip' && <RiQuestionLine className={cn('size-4', iconClassName)} aria-hidden="true" />}
       {children}
+      {variant === 'documentation' && <RiBookMarkedLine className={finalIconClassName} aria-hidden="true" />}
+      {variant === 'default' && <RiArrowRightUpLine className={finalIconClassName} aria-hidden="true" />}
+      {variant === 'tip' && <RiQuestionLine className={finalIconClassName} aria-hidden="true" />}
     </a>
   );
 }
diff --git a/apps/dashboard/src/components/side-navigation/free-trial-card.tsx b/apps/dashboard/src/components/side-navigation/free-trial-card.tsx
@@ -53,7 +53,7 @@ const CardContent = ({
       </Tooltip>
     </div>
     <span className="text-foreground-600 text-xs">
-      Experience Novu without any limits for free for the next {pluralizedDays}.
+      Enjoy unlimited access to Novu for free for the next {pluralizedDays}.
     </span>
     <div className={`max-h-3 overflow-hidden opacity-100 ${transition} group-hover:max-h-0 group-hover:opacity-0`}>
       <Progress value={daysTotal - daysLeft} max={daysTotal} />

diff --git a/apps/dashboard/src/components/user-profile.tsx b/apps/dashboard/src/components/user-profile.tsx
@@ -1,9 +1,10 @@
-import { UserButton } from '@clerk/clerk-react';
+import { UserButton, useOrganization } from '@clerk/clerk-react';
 import { useNewDashboardOptIn } from '@/hooks/use-new-dashboard-opt-in';
 import { RiSignpostFill } from 'react-icons/ri';
 import { ROUTES } from '../utils/routes';
 
 export function UserProfile() {
+  const { organization } = useOrganization();
   const { optOut } = useNewDashboardOptIn();
 
   return (
@@ -16,13 +17,15 @@ export function UserProfile() {
         },
       }}
     >
-      <UserButton.MenuItems>
-        <UserButton.Action
-          label="Go back to the legacy Dashboard"
-          labelIcon={<RiSignpostFill size="16" color="var(--nv-colors-typography-text-main)" />}
-          onClick={optOut}
-        />
-      </UserButton.MenuItems>
+      {organization && organization.createdAt < new Date('2024-12-24') && (
+        <UserButton.MenuItems>
+          <UserButton.Action
+            label="Go back to the legacy Dashboard"
+            labelIcon={<RiSignpostFill size="16" color="var(--nv-colors-typography-text-main)" />}
+            onClick={optOut}
+          />
+        </UserButton.MenuItems>
+      )}
     </UserButton>
   );
 }
diff --git a/apps/dashboard/src/components/workflow-list-empty.tsx b/apps/dashboard/src/components/workflow-list-empty.tsx
@@ -50,12 +50,10 @@ const WorkflowListEmptyDev = () => (
   <div className="flex h-full w-full flex-col items-center justify-center gap-6">
     <VersionControlDev />
     <div className="flex flex-col items-center gap-2 text-center">
-      <span className="text-foreground-900 block font-medium">
-        Create your first workflow to orchestrate notifications
-      </span>
+      <span className="text-foreground-900 block font-medium">Create your first workflow to send notifications</span>
       <p className="text-foreground-400 max-w-[60ch] text-sm">
-        Workflows in Novu handle event-driven notifications across multiple channels in a single, version-controlled
-        flow, with the ability to manage preference for each subscriber.
+        Workflows handle notifications across multiple channels in a single, version-controlled flow, with the ability
+        to manage preference for each subscriber.
       </p>
     </div>
 

diff --git a/apps/dashboard/src/context/clerk-provider.tsx b/apps/dashboard/src/context/clerk-provider.tsx
@@ -6,31 +6,6 @@ import { PropsWithChildren } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ROUTES } from '../utils/routes';
 
-const CLERK_LOCALIZATION = {
-  userProfile: {
-    navbar: {
-      title: 'Settings',
-      description: '',
-      account: 'User profile',
-      security: 'Access security',
-    },
-  },
-  organizationProfile: {
-    membersPage: {
-      requestsTab: { autoSuggestions: { headerTitle: '' } },
-      invitationsTab: { autoInvitations: { headerTitle: '' } },
-    },
-  },
-  userButton: {
-    action__signOut: 'Log out',
-    action__signOutAll: 'Log out from all accounts',
-    action__manageAccount: 'Settings',
-  },
-  formFieldLabel__organizationSlug: 'URL friendly identifier',
-};
-
-const ALLOWED_REDIRECT_ORIGINS = ['http://localhost:*', window.location.origin];
-
 type ClerkProviderProps = PropsWithChildren;
 export const ClerkProvider = (props: ClerkProviderProps) => {
   const navigate = useNavigate();
@@ -61,15 +36,49 @@ export const ClerkProvider = (props: ClerkProviderProps) => {
             },
           },
         },
+        organizationList: {
+          elements: {
+            cardBox: {
+              borderRadius: '0',
+            },
+            card: {
+              borderRadius: '0',
+            },
+          },
+        },
         elements: {
           formButtonPrimary: cn(buttonVariants({ variant: 'primary' })),
         },
         variables: {
           fontSize: '14px !important',
         },
       }}
-      localization={CLERK_LOCALIZATION}
-      allowedRedirectOrigins={ALLOWED_REDIRECT_ORIGINS}
+      localization={{
+        userProfile: {
+          navbar: {
+            title: 'Settings',
+            description: '',
+            account: 'User profile',
+            security: 'Access security',
+          },
+        },
+        organizationProfile: {
+          membersPage: {
+            requestsTab: { autoSuggestions: { headerTitle: '' } },
+            invitationsTab: { autoInvitations: { headerTitle: '' } },
+          },
+        },
+        userButton: {
+          action__signOut: 'Log out',
+          action__signOutAll: 'Log out from all accounts',
+          action__manageAccount: 'Settings',
+        },
+        formFieldLabel__organizationSlug: 'URL friendly identifier',
+        unstable__errors: {
+          form_identifier_exists: 'Already taken, please choose another',
+        },
+      }}
+      allowedRedirectOrigins={['http://localhost:*', window.location.origin]}
     >
       {children}
     </_ClerkProvider>