chore(root): Release 2024-10-22 08:06 (#6739)

.cspell.json

@@ -690,6 +690,7 @@
     "xyflow",
     "Sonner",
     "sonner",
+    "cmdk"
   ],
   "flagWords": [],
   "patterns": [
@@ -787,6 +788,6 @@
     "apps/web/src/studio/components/workflows/step-editor/editor/files.ts",
     "apps/web/src/pages/playground/web-container-configuration/sandbox-vite/*.ts",
     "apps/api/src/app/analytics/usecases/hubspot-identify-form/hubspot-identify-form.usecase.ts",
-    "apps/dashboard/eslint.config.js",
+    "apps/dashboard/eslint.config.js"
   ]
 }

apps/api/src/app/step-schemas/e2e/get-step-schema.e2e.ts

@@ -162,7 +162,7 @@ describe('Get Step Schema - /step-schemas?workflowId=:workflowId&stepId=:stepId&
         createdWorkflow.steps.findIndex((stepItem) => stepItem.stepUuid === createdWorkflow.steps[1].stepUuid)
       );
       const variableStepKeyFoundInCreatedWorkflow = createdWorkflowPreviousSteps.find(
-        (step) => step.stepUuid === variableStepKey
+        (step) => step.stepId === variableStepKey
       );
       const isValidVariableStepKey = !!variableStepKeyFoundInCreatedWorkflow;
       expect(isValidVariableStepKey).to.be.true;

apps/api/src/app/step-schemas/usecases/get-step-schema/get-step-schema.usecase.ts

@@ -140,8 +140,8 @@ function buildPreviousStepsSchema(previousSteps: NotificationStepEntity[] | unde
 
   previousStepsProperties = (previousSteps || []).reduce(
     (acc, step) => {
-      if (step.template?._id) {
-        acc[step.template._id] = mapStepTypeToResult[step.template.type as StepType];
+      if (step.stepId && step.template?.type) {
+        acc[step.stepId] = mapStepTypeToResult[step.template.type as StepType];
       }
 
       return acc;

apps/api/src/app/workflows-v2/mappers/notification-template-mapper.ts

@@ -78,6 +78,7 @@ function toStepResponseDto(step: NotificationStepEntity): StepResponseDto {
   return {
     name: step.name || 'Missing Name',
     stepUuid: step._templateId,
+    stepId: step.stepId || 'Missing Step Id',
     type: step.template?.type || StepTypeEnum.EMAIL,
     controls: convertControls(step),
     controlValues: step.controlVariables || {},

apps/api/src/app/workflows-v2/usecases/upsert-workflow/upsert-workflow.usecase.ts

@@ -5,7 +5,6 @@ import {
   NotificationGroupRepository,
   NotificationStepEntity,
   NotificationTemplateEntity,
-  NotificationTemplateRepository,
   PreferencesEntity,
 } from '@novu/dal';
 import {

apps/api/src/app/workflows-v2/workflow.controller.e2e.ts

@@ -6,6 +6,7 @@ import {
   ListWorkflowResponse,
   StepCreateDto,
   StepDto,
+  StepResponseDto,
   StepTypeEnum,
   StepUpdateDto,
   UpdateWorkflowDto,
@@ -226,7 +227,7 @@ async function createWorkflowAndValidate(nameSuffix: string = ''): Promise<Workf
     'type'
   );
   createdWorkflowWithoutUpdateDate.steps = createdWorkflowWithoutUpdateDate.steps.map((step) =>
-    removeFields(step, 'stepUuid')
+    removeFields(step, 'stepUuid', 'stepId')
   );
   expect(createdWorkflowWithoutUpdateDate).to.deep.equal(
     removeFields(createWorkflowDto, '__source'),
@@ -315,6 +316,18 @@ function findStepOnRequestBasedOnId(workflowUpdateRequest: UpdateWorkflowDto, st
   return undefined;
 }
 
+/*
+ * There's a side effect on the backend where the stepId gets updated based on the step name.
+ * We need to make a design decision on the client side, should we allow users to update the stepId separately.
+ */
+function updateStepId(step: StepResponseDto): StepResponseDto {
+  if (step.stepId) {
+    return { ...step, stepId: slugifyName(step.name) };
+  }
+
+  return step;
+}
+
 function validateUpdatedWorkflowAndRemoveResponseFields(
   workflowResponse: WorkflowResponseDto,
   workflowUpdateRequest: UpdateWorkflowDto
@@ -353,8 +366,12 @@ async function updateWorkflowAndValidate(
     updatedWorkflow,
     updateRequest
   );
+  const expectedUpdateRequest = {
+    ...updateRequest,
+    steps: updateRequest.steps.map(updateStepId),
+  };
   expect(updatedWorkflowWithResponseFieldsRemoved, 'workflow after update does not match as expected').to.deep.equal(
-    updateRequest
+    expectedUpdateRequest
   );
   expect(convertToDate(updatedWorkflow.updatedAt)).to.be.greaterThan(convertToDate(updatedAt));
 }
@@ -585,6 +602,7 @@ function buildUpdateDtoWithValues(workflowCreated: WorkflowResponseDto): UpdateW
     steps: [updatedStep, newStep],
   };
 }
+
 function createStep(): StepCreateDto {
   return {
     name: 'someStep',

apps/dashboard/package.json

@@ -41,6 +41,7 @@
     "@xyflow/react": "^12.3.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
     "date-fns": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.439.0",

apps/dashboard/src/components/create-workflow-button.tsx

@@ -1,6 +1,6 @@
 import { createWorkflow } from '@/api/workflows';
 import { Button } from '@/components/primitives/button';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/primitives/form';
+import { FormField, FormItem, FormLabel, FormControl, FormMessage, Form } from '@/components/primitives/form/form';
 import { Input, InputField } from '@/components/primitives/input';
 import { Separator } from '@/components/primitives/separator';
 import {
@@ -16,6 +16,7 @@ import {
 import { TagInput } from '@/components/primitives/tag-input';
 import { Textarea } from '@/components/primitives/textarea';
 import { useEnvironment } from '@/context/environment/hooks';
+import { useTagsQuery } from '@/hooks/use-tags-query';
 import { QueryKeys } from '@/utils/query-keys';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { type CreateWorkflowDto, WorkflowCreationSourceEnum } from '@novu/shared';
@@ -54,6 +55,8 @@ export const CreateWorkflowButton = (props: CreateWorkflowButtonProps) => {
       setIsOpen(false);
     },
   });
+  const tagsQuery = useTagsQuery();
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: { description: '', identifier: '', name: '', tags: [] },
@@ -147,7 +150,7 @@ export const CreateWorkflowButton = (props: CreateWorkflowButtonProps) => {
                       <FormLabel hint="(max. 8)">Add tags</FormLabel>
                     </div>
                     <FormControl>
-                      <TagInput {...field} />
+                      <TagInput suggestions={tagsQuery.data?.data.map((tag) => tag.name) || []} {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>

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

@@ -2,9 +2,9 @@ import { ReactNode } from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { IntercomProvider } from 'react-use-intercom';
-import { SideNavigation } from './side-navigation';
-import { HeaderNavigation } from './header-navigation';
 import { INTERCOM_APP_ID } from '@/config';
+import { SideNavigation } from '@/components/side-navigation/side-navigation';
+import { HeaderNavigation } from '@/components/header-navigation/header-navigation';
 
 export const DashboardLayout = ({
   children,

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

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { IntercomProvider } from 'react-use-intercom';
-import { HeaderNavigation } from './header-navigation';
 import { INTERCOM_APP_ID } from '@/config';
+import { HeaderNavigation } from '@/components/header-navigation/header-navigation';
 
 export const EditWorkflowLayout = ({
   children,

apps/dashboard/src/components/header-navigation/customer-support-button.tsx

@@ -1,5 +1,5 @@
+import { useBootIntercom } from '@/hooks/use-boot-intercom';
 import { RiCustomerService2Line } from 'react-icons/ri';
-import { useBootIntercom } from '@/hooks';
 
 export const CustomerSupportButton = () => {
   useBootIntercom();

apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx

@@ -8,10 +8,12 @@ import { cn } from '@/utils/ui';
 import { Popover, PopoverContent, PopoverTrigger, PopoverPortal } from '../primitives/popover';
 import { Button } from '../primitives/button';
 import { Input, InputField } from '../primitives/input';
-import { useBridgeHealthCheck, useUpdateBridgeUrl, useValidateBridgeUrl } from '@/hooks';
 import { ConnectionStatus } from '@/utils/types';
 import { useEnvironment } from '@/context/environment/hooks';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../primitives/form';
+import { useBridgeHealthCheck } from '@/hooks/use-bridge-health-check';
+import { useValidateBridgeUrl } from '@/hooks/use-validate-bridge-url';
+import { useUpdateBridgeUrl } from '@/hooks/use-update-bridge-url';
+import { FormField, FormItem, FormLabel, FormControl, FormMessage, Form } from '@/components/primitives/form/form';
 
 const formSchema = z.object({ bridgeUrl: z.string().url() });
 

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { cn } from '@/utils/ui';
 import { cva, VariantProps } from 'class-variance-authority';
+import { inputVariants } from '@/components/primitives/variants';
 
 const inputFieldVariants = cva(
   'text-foreground-950 flex w-full flex-nowrap items-center gap-1.5 rounded-md border bg-transparent shadow-sm transition-colors focus-within:outline-none focus-visible:outline-none hover:bg-neutral-50 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 has-[input[value=""]]:text-foreground-400 has-[input:disabled]:bg-neutral-alpha-100 has-[input:disabled]:text-foreground-300',
@@ -27,26 +28,20 @@ export type InputFieldProps = { children: React.ReactNode; className?: string }
   typeof inputFieldVariants
 >;
 
-const InputField = ({ children, className, size, state }: InputFieldProps) => {
-  return <div className={inputFieldVariants({ size, state, className })}>{children}</div>;
-};
+const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(({ children, className, size, state }, ref) => {
+  return (
+    <div ref={ref} className={inputFieldVariants({ size, state, className })}>
+      {children}
+    </div>
+  );
+});
 
 InputField.displayName = 'InputField';
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
-  return (
-    <input
-      type={type}
-      className={cn(
-        'file:text-foreground placeholder:text-foreground-400 flex h-full w-full bg-transparent text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed',
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
+  return <input type={type} className={cn(inputVariants(), className)} ref={ref} {...props} />;
 });
 Input.displayName = 'Input';
 

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

@@ -13,9 +13,9 @@ const PopoverPortal = PopoverPrimitive.Portal;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { portal?: boolean }
+>(({ className, align = 'center', portal = true, sideOffset = 4, ...props }, ref) => {
+  const body = (
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
@@ -26,8 +26,10 @@ const PopoverContent = React.forwardRef<
       )}
       {...props}
     />
-  </PopoverPrimitive.Portal>
-));
+  );
+
+  return portal ? <PopoverPrimitive.Portal>{body}</PopoverPrimitive.Portal> : body;
+});
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal };