Skip to content

v0.5.0 - ⭐ New workflow engine and UI Editor
Compare
Choose a tag to compare
@scopsy scopsy released this 26 Jun 10:48
· 14833 commits to main since this release
v0.5.0
818cb86

Extremly excited to anounce our latest release which includes an entire redesign of our trigger engine, a brand new and shining workflow editor on the web management platform, notification center theme customization, and a lot more goodies! Let's check it out:

Redesigned backend trigger engine

To support a more complex Novu usecase with custom flows and events we had to reimagine how our trigger engine works, instead of processing just the hardcoded configuration of delivery a user can now specify a tree-like flow with a custom order of nodes. This infra change will help us to support the upcoming: Digest, Delay, Decision trees, and more.

Job Workflow

In this change, we also introduced BullMQ to manage or step execution Queue to support better persistency and scalability as it will allow us to scale trigger processing across multiple machines in the next upcoming releases.

Redesigned Notification Template Editor

One of the biggest steps to support our future plans is the redesigned Workflow Editor when editing a notification template. Previously, you could only decide on a channel but couldn't control more than one message of this particular channel, and couldn't control the order of execution.

Introducing the new workflow editor powered by React-Flow:
CleanShot 2022-06-24 at 09 31 06@2x

This new workflow will be the basis of more exciting features we are about to release in the upcoming weeks!

Attachment support on email providers

Thank to our amazing contributor @devblin, it is possible to send attachments with your emails. You can easily add attachments using the following API:

import { Novu } from '@novu/node';

const novu = new Novu(process.env.NOVU_API_KEY);

novu.trigger('event-name', {
  to: {
    subscriberId: '...'
  },
  payload: {
    attachments: [{
      file: fs.readFileSync(__dirname + '/data/test.jpeg'),
      name: 'test.jpeg',
      mime: 'image/jpg'
    }]
  }
})

Notification center theme customization

Based on a lot of your requests, it is possible now to customize the notification center component visuals for in our React component. Here is how you can do that:

const theme = {
   dark: {
      // Dark Theme Props
   },
   light: {
       // Light Theme Props
   },
   common: {
      // Common
   }
};

return (
   <PopoverNotificationCenter theme={theme}>
   </PopoverNotificationCenter>
);

For more information about the different parts of the theme configuration:

export interface INovuTheme {
  layout?: IThemeLayout;
  header?: IThemeHeader;
  popover?: IThemePopover;
  notificationItem?: IThemeNotificationListItem;
  footer?: IThemeFooter;
  loaderColor?: string;
  unseenBadge?: IThemeUnseenBadge;
}

export interface IThemeLayout {
  background?: string;
  boxShadow?: string;
  borderRadius?: string;
  wrapper?: {
    secondaryFontColor?: string;
  };
}

export interface IThemeHeader {
  badgeColor?: string;
  badgeTextColor?: string;
  fontColor?: string;
}

export interface IThemePopover {
  arrowColor?: string;
}

export interface IThemeNotificationListItem {
  seen?: {
    fontColor?: string;
    background?: string;
    timeMarkFontColor?: string;
  };
  unseen?: {
    fontColor?: string;
    background?: string;
    boxShadow?: string;
    notificationItemBeforeBrandColor?: string;
    timeMarkFontColor?: string;
  };
}

export interface IThemeFooter {
  logoTextColor?: string;
  logoPrefixFontColor?: string;
}

export interface IThemeUnseenBadge {
  color?: {
    fillColor?: string | ISvgStopColor;
    borderColor?: string;
  };
}

More changes and improvements

New Contributors

Full Changelog: v0.4.2...v0.5.0

Contributors

samsoft00, BiswaViraj, and 10 other contributors
Assets 2
Loading