fix(dashboard): Improve ux for jit variables #8259
Conversation
✅ Deploy Preview for dashboard-v2-novu-staging ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| // Novu JIT namespaces | ||
| const PAYLOAD_NAMESPACE = 'payload'; | ||
| const SUBSCRIBER_DATA_NAMESPACE = 'subscriber.data'; | ||
| const STEP_PAYLOAD_REGEX = /^steps\.[^.]+\.events\[\d+\]\.payload/; |
There was a problem hiding this comment.
for the email step, we will also have current; but when iterating over the events we should probably also do current.payload
There was a problem hiding this comment.
That is correct, but this code is not used in the email. We have a different way to calculate them. It will be in a follow up PR.
| } else if (!searchText.startsWith(namespace)) { | ||
| // For all other values, suggest payload.whatever, subscriber.data.whatever | ||
| acc.push({ | ||
| name: `${namespace}.${searchLower.trim()}`, |
There was a problem hiding this comment.
we shouldn't use searchLower as in the result it will suggest me wrong variable name; for example I have variable in my payload firstName, so I typed {{firstName}}, but in the dropdown it suggests payload.firstname
There was a problem hiding this comment.
I love the attention to detail. Good catch.
| acc.push({ | ||
| name: `${namespace}.${searchLower.trim()}`, | ||
| type: 'variable', | ||
| }); |
There was a problem hiding this comment.
these doesn't seem to be correct suggestions:
here second variable, and last two
and in this one all them:
There was a problem hiding this comment.
The issue with the payload.steps and subscriber.data.steps is technically correct, as we can have a payload with a nested steps value. But from the user's perspective, it isn't very clear. So I added a specific rule to exclude them if the term starts with steps.
The sentenceSummary is shown and is boosted as it is defined as steps.digest-event.events. So there is a match.
One way to resolve this is for the special variables to be shown in a separate section in the dropdown. Any other ideas?
SokratisVidros
force-pushed
the
payload_ux
branch
from
f58d9b7 to
b3a0351
Compare
SokratisVidros
force-pushed
the
payload_ux
branch
from
b3a0351 to
260d9f9
Compare
SokratisVidros
force-pushed
the
payload_ux
branch
from
260d9f9 to
c1473cf
Compare
Introduce the concept of JIT variables that are added to JIT namespaces as you type. When the user types foo, we don't suggest anything. Users can pick a payload from the dropdown, but then they need to click on the payload pill, and edit the variable name, which is bad UX. This PR improves the DX by suggesting the following as the user types foo. - "payload.foo" - "subscriber.data.foo"
SokratisVidros
force-pushed
the
payload_ux
branch
from
c1473cf to
01796c0
Compare
This change affects every step but Email for now A PR for email will follow.
Introduce the concept of JIT variables that are added to JIT namespaces as you type.
When the user types foo, we don't suggest anything. Users can pick a payload from the dropdown, but then they need to click on the payload pill and edit the variable name, which is bad UX.
This PR improves the DX by suggesting the following as the user types foo.
Try it in the preview deployment.