feat(dashboard): email editor variable suggestions dropdown, pill, editing #7625

LetItRock · 2025-01-30T16:16:40Z

What changed? Why was the change needed?

Reuse and align the variable component in the email editor.

variable pill component
reused edit variable popover
reused variable dropdown list

Screenshots

Screen.Recording.2025-01-30.at.16.41.13.mov

…iting

linear · 2025-01-30T16:16:43Z

NV-5174 Implement the variable pill for Maily variables

netlify · 2025-01-30T16:16:58Z

✅ Deploy Preview for dev-web-novu ready!

Name	Link
🔨 Latest commit	`b92385c`
🔍 Latest deploy log	https://app.netlify.com/sites/dev-web-novu/deploys/67a31e65edf9340008a1ec05
😎 Deploy Preview	https://deploy-preview-7625.dashboard.novu-staging.co
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2025-01-30T16:17:05Z

✅ Deploy Preview for dashboard-v2-novu-staging ready!

Name	Link
🔨 Latest commit	`b92385c`
🔍 Latest deploy log	https://app.netlify.com/sites/dashboard-v2-novu-staging/deploys/67a31e6534257500082353b9
😎 Deploy Preview	https://deploy-preview-7625.dashboard-v2.novu-staging.co
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

LetItRock · 2025-01-30T16:17:33Z

apps/dashboard/package.json

@@ -23,7 +23,7 @@
    "@codemirror/autocomplete": "^6.18.3",
    "@hookform/resolvers": "^3.9.0",
    "@lezer/highlight": "^1.2.1",
-    "@maily-to/core": "^0.0.22",
+    "@maily-to/core": "file:./maily-to-core-0.0.26.tgz",


temporarily until the arikchakma/maily.to#121 is merged

LetItRock · 2025-01-30T16:18:13Z

apps/dashboard/src/components/conditions-editor/variable-select.tsx

-  hoveredOptionIndex: number;
-};
-
-const VariablesList = React.forwardRef<HTMLUListElement, VariablesListProps>(


moved to a reusable component, which is used later as the Email editor suggestions dropdown for variables

LetItRock · 2025-01-30T16:19:45Z

apps/dashboard/src/components/conditions-editor/variable-select.tsx

@@ -130,53 +64,6 @@ export const VariableSelect = ({
    }
  };

-  const scrollToOption = (index: number) => {


scrollToOption, next, prev moved to reusable hook that manages the keyboard navigation useListKeyboardNavigation

LetItRock · 2025-01-30T16:20:32Z

apps/dashboard/src/components/conditions-editor/variable-select.tsx

-  const [hoveredOptionIndex, setHoveredOptionIndex] = useState(0);
-  const variablesListRef = useRef<HTMLUListElement>(null);
+
+  const { variablesListRef, hoveredOptionIndex, next, prev, reset, focusFirst } = useListKeyboardNavigation({


TODO: better name

Do we need a a separate hook for this? Since variables-list is a reusable component I'd expect the hook to live in there.

yes we need it as it allows to control the list from the parent... for example MailyVariablesList has the useImperativeHandle with onKeyDown which is called by it's parent

LetItRock · 2025-01-30T16:21:08Z

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

@@ -117,21 +116,18 @@ export function ControlInput({
        value={value}
        onChange={onChange}
      />
-      <Popover open={!!selectedVariable} onOpenChange={handleOpenChange}>


moved to reusable component that later is used in the Email editor when editing the variable

LetItRock · 2025-01-30T16:31:14Z

apps/dashboard/src/components/workflow-editor/steps/email/extensions/maily-variables-list.tsx

+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: { event: KeyboardEvent }) => {
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        prev();
+        return true;
+      }
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        next();
+        return true;
+      }
+
+      if (event.key === 'Enter') {
+        onSelect(options[hoveredOptionIndex].value ?? '');
+        reset();
+        return true;
+      }
+
+      return false;
+    },
+  }));


The onKeyDown is called by Maily core which is used by ref passed.

LetItRock · 2025-01-30T16:33:19Z

apps/dashboard/src/components/workflow-editor/steps/email/extensions/variable-view.tsx

+import { VARIABLE_REGEX_STRING } from '@/components/primitives/control-input/variable-plugin';
+import { VariablePill } from '@/components/variable/variable-pill';
+
+export function VariableView({ node, updateAttributes, editor }: NodeViewProps) {


This component represents the variable pill plus the editing popover. It's used as a Maily variable extension view.

LetItRock · 2025-01-30T16:34:09Z

apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx

@@ -39,6 +46,85 @@ export const Maily = ({ value, onChange, className, ...rest }: MailyProps) => {
  const isForBlockEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_ND_EMAIL_FOR_BLOCK_ENABLED);
  const isShowEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_ND_EMAIL_SHOW_ENABLED);

+  const calculateVariables = useCallback(


moved from the Maily prop and reused in the variable extension

LetItRock · 2025-01-30T16:34:46Z

apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx

+      VariableExtension.extend({
+        addNodeView() {
+          return ReactNodeViewRenderer(VariableView, {
+            className: 'relative inline-block',
+            as: 'div',
+          });
+        },
+      }).configure({
+        suggestion: getVariableSuggestions(calculateVariables, VARIABLE_TRIGGER_CHARACTER, MailyVariablesList),
+      }),


that's how you override the default Maily variable and suggestions

LetItRock · 2025-01-30T16:37:30Z

apps/dashboard/src/components/workflow-editor/steps/step-drawer.tsx

+              // IMPORTANT: do not close the sheet if the interact outside is from the maily variable list
+              if (e.target instanceof HTMLDivElement && e.target.className.includes('tippy-box')) {
+                return;
+              }


The problem: Maily renders the variables dropdown with tippy which renders it outside the normal tree flow and at the bottom inside the body. Clicking inside of the list is treated as clicking outside the sidebar, which results in closing the sidebar.
I wasn't able to find a better solution to this.

SokratisVidros · 2025-02-04T12:35:37Z

apps/dashboard/src/components/conditions-editor/variable-select.tsx

-  const [hoveredOptionIndex, setHoveredOptionIndex] = useState(0);
-  const variablesListRef = useRef<HTMLUListElement>(null);
+
+  const { variablesListRef, hoveredOptionIndex, next, prev, reset, focusFirst } = useListKeyboardNavigation({


Do we need a a separate hook for this? Since variables-list is a reusable component I'd expect the hook to live in there.

apps/dashboard/src/components/conditions-editor/variable-select.tsx

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

SokratisVidros · 2025-02-04T12:38:22Z

apps/dashboard/src/components/variable/variable-pill.tsx

+        className={`bg-url-code bg-repeat-no-repeat h-[calc(1em-2px)] w-[calc(1em-2px)] min-w-[calc(1em-2px)] bg-[url("/images/code.svg")] bg-contain bg-center`}
+      ></span>
+      <span className="leading-[1.2]">{variable}</span>
+      {hasFilters && <span className="bg-feature-base h-[0.275em] w-[0.275em] rounded-full" />}


Nit-picky one, we can do the dot with an after pseudo element to remove the need of an extra span.

apps/dashboard/src/components/workflow-editor/steps/email/extensions/maily-variables-list.tsx

apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx

SokratisVidros · 2025-02-04T17:55:07Z

apps/dashboard/src/components/variable/use-variable-list-keyboard-navigation.ts

+
+import { useState } from 'react';
+
+export const useVariableListKeyboardNavigation = ({ maxIndex }: { maxIndex: number }) => {


I'd move the hook inside the component, the file is not that big in total, <200 lines.

feat(dashboard): email editor variable suggestions dropdown, pill, ed…

c211505

…iting

LetItRock requested review from SokratisVidros, scopsy, BiswaViraj, ChmaraX, tatarco, djabarovgeorge and desiprisg January 30, 2025 16:16

LetItRock self-assigned this Jan 30, 2025

github-actions bot added the @novu/dashboard label Jan 30, 2025

LetItRock commented Jan 30, 2025

View reviewed changes

Merge branch 'next' into nv-5174-maily-variable-pill-list-editing

e94c5ee

LetItRock had a problem deploying to Linting January 30, 2025 17:09 — with GitHub Actions Failure

LetItRock temporarily deployed to Linting January 30, 2025 17:09 — with GitHub Actions Inactive

LetItRock added 2 commits February 3, 2025 16:13

Merge branch 'next' into nv-5174-maily-variable-pill-list-editing

56043d9

chore(dashboard): maily bump

4797be7

LetItRock temporarily deployed to Linting February 3, 2025 15:14 — with GitHub Actions Inactive

LetItRock had a problem deploying to Linting February 3, 2025 15:15 — with GitHub Actions Failure

SokratisVidros approved these changes Feb 4, 2025

View reviewed changes

Merge branch 'next' into nv-5174-maily-variable-pill-list-editing

e548bd2

LetItRock temporarily deployed to Linting February 4, 2025 15:34 — with GitHub Actions Inactive

LetItRock had a problem deploying to Linting February 4, 2025 15:34 — with GitHub Actions Failure

chore(dashboard): suggestions from the pr

31a705c

LetItRock temporarily deployed to Linting February 4, 2025 15:48 — with GitHub Actions Inactive

LetItRock temporarily deployed to Linting February 4, 2025 15:56 — with GitHub Actions Inactive

LetItRock added 2 commits February 4, 2025 18:03

chore(dashboard): suggestions from the pr

daf4163

Merge branch 'next' into nv-5174-maily-variable-pill-list-editing

2fc39bd

LetItRock temporarily deployed to Linting February 4, 2025 17:19 — with GitHub Actions Inactive

chore(dashboard): update the lock file

e8068aa

LetItRock temporarily deployed to Linting February 4, 2025 17:46 — with GitHub Actions Inactive

SokratisVidros approved these changes Feb 4, 2025

View reviewed changes

LetItRock added 2 commits February 4, 2025 20:55

chore(dashboard): revert the lock file

6969247

Merge branch 'next' into nv-5174-maily-variable-pill-list-editing

705ab1d

LetItRock temporarily deployed to Linting February 4, 2025 19:57 — with GitHub Actions Inactive

chore(dashboard): revert the lock file

eeb10ae

LetItRock temporarily deployed to Linting February 4, 2025 20:04 — with GitHub Actions Inactive

chore(dashboard): update maily again

1ef0fba

LetItRock temporarily deployed to Linting February 4, 2025 20:25 — with GitHub Actions Inactive

chore(dashboard): suggestions from the pr

b92385c

LetItRock temporarily deployed to Linting February 5, 2025 08:16 — with GitHub Actions Inactive

LetItRock merged commit fc18806 into next Feb 5, 2025
32 checks passed

LetItRock deleted the nv-5174-maily-variable-pill-list-editing branch February 5, 2025 08:50


		import { useState } from 'react';

		export const useVariableListKeyboardNavigation = ({ maxIndex }: { maxIndex: number }) => {

feat(dashboard): email editor variable suggestions dropdown, pill, editing #7625

feat(dashboard): email editor variable suggestions dropdown, pill, editing #7625

Uh oh!

Conversation

LetItRock commented Jan 30, 2025

What changed? Why was the change needed?

Screenshots

Uh oh!

linear bot commented Jan 30, 2025

Uh oh!

netlify bot commented Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for dev-web-novu ready!

Uh oh!

netlify bot commented Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for dashboard-v2-novu-staging ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

netlify bot commented Jan 30, 2025 •

edited

Loading

netlify bot commented Jan 30, 2025 •

edited

Loading