feat(editor): Autocomplete info box: improve structure and add examples

[elsmr]

Summary

• Overhaul autocomplete info box styling
• Add examples to all String methods (other types coming in a next PR)
• Add argument descriptions, overhaul function descriptions
• Hide more methods from autocomplete, other tweaks

Related tickets and issues

https://linear.app/n8n/issue/NODE-1280/autocomplete-info-box-improve-structure-and-add-examples

Review / Merge checklist

• PR title and summary are descriptive. Remember, the title automatically goes into the changelog. Use (no-changelog) otherwise. (conventions)
• Docs updated or follow-up ticket created.
• Tests included.

  A bug is not considered fixed, unless a test is added to prevent it from happening again.
  A feature is not complete without tests.

[ivov]

Lovely work as always! Some findings:

Bugs

1. {{ "". }} does not show string completions.
2. Links in infoboxes have excess spacing.
3. Code snippets in infoboxes have excess spacing.
4. Dollar-sign completions are unstyled.
5. Some methods are missing info shown in the Notion spec.
6. On narrow viewports there is no infobox. Intended?
7. Notion spec: The infobox should also appear when focusing on the cursor inside the brackets → I don't know what this means / how to assess. Presumably the infobox is only relevant when the cursor is at the right position, not merely inside the double curly braces?

UX

8. Clicking on Learn more closes the infobox and opens a new tab. Shouldn't we keep the infobox open for when they return? Presumably the user needs this info as further context to understand our infobox details.
9. We are not showing optionality via ? in the header, which makes all params look required, e.g. includes(searchString, start)
10. In dark mode, the shades of grey used for comment and code look too similar. My eyesight is not the best so I'd love a bit more contrast and a slightly bigger font for examples.
11. Odd notation: concat(string1, string2, stringN) → concat(...strings)? Possibly be out of scope.
12. Don't we want to signal which are native JS methods vs. n8n-specific methods? As a user I'd appreciate it so I don't have to double check if n8n might've overloaded a native JS method with custom behavior.
13. Let's also test if scrollbars also look good on Windows.
14. On clicking the infobox disappears, but should it? I found it frustrating when trying to copy an example or when missing on trying to click a Learn more link given the very tiny font.
15. We might want to have the infobox unfurl upwards when we would block the expression editor output.

Pending

• Test on light mode
• Code review

[elsmr]

@ivov Thanks for the feedback 🙏

1-3. Fixed
4. This should've been fixed already, are you on the latest commit?
5. This PR only contains the examples for the String methods, others will follow in next PRs: https://linear.app/n8n/issue/NODE-1309/add-examples-for-all-methods-in-expressions. This PR already has a lot in it 😅
6. This is intended
7. Checking with Giulio on this one, but it might not be in scope anymore not in scope for this PR
8. Agree, fixed!
9. fixed
10. increased the contrast here
11,12. Agree, but don't want to in-scope for this PR if that's OK
13. Checked, looks normal
14. Agree this was very annoying, fixed
15. I made it unfurl upward by default, as in most cases it's covering up the output (also in the inline editor). It still shows underneath when there is not enough space.

[ivov]

Mostly nitpicks:

1. Some optional args have two question marks instead of one.
2. Args in some methods like set and endOf have excess spacing.
3. The words in this description are out of order.

Light mode looks good 👍🏻

[github-actions]

⚠️ Some Cypress E2E specs are failing, please fix them before merging

[cypress]

1 flaky test on run #4928 ↗︎

0

360

12

0

1

Details:

🌳 fix-e2e-codemirror-lang 🖥️ browsers:node18.12.0-chrome107 🤖 ivov 🗃️ e2e/*
Project: n8n	Commit: 16643b0e12
Status: Passed	Duration: 04:31 💡
Started: May 10, 2024 3:01 PM	Ended: May 10, 2024 3:05 PM

  cypress/e2e/5-ndv.cy.ts • 1 flaky test

View Output Video

Test		Artifacts
NDV > should not retrieve remote options when required params throw errors		Screenshots Video

Review all test suite changes for PR #9019 ↗︎

[ivov]

1. Closing parens can start a newline. I'd expect we line wrap after ).
2. Colons can start a newline. I'd expect we line wrap after :.
3. Parameters are listed with a colon and nothing after even when they have no description. I'd expect colons not to be there if there is nothing to add.
4. External links in (many? all?) infoboxes are broken.
5. Excess quote here.
6. For variadic params we should likely only list them once in the Parameters section.
7. JS dates are missing a ton of methods.
8. In expression editor modal, param names are offly large. Outside of the expression editor modal, they are the same size as their description.
9. Sometimes we use Suggested Methods | Other Methods and sometimes we use Suggested | Methods.
10. Suggested (Methods) are not alphabetized, not sure if intended.
11. Native methods like String.includes no longer refer the user to MDN to learn more, not sure if intended.

Did not check light mode.

[elsmr]

Fixed everything except:

6. This is fixed for string methods (.concat), other types will follow in a next PR
7. This is on purpose, the idea is to direct people to use Luxon DateTime by only showing toDateTime, so we have a single interface for dates. The JS Date methods still work, but don't appear in autocomplete anymore.
8. This is intended (only for objects), Suggested methods is used here because it appears under a fields section (to make the distinction more clear).
9. This is intended, suggested section uses a fixed order
10. This was intended but I also like these links, so I (we) convinced Product to bring them back 😄 (with another color)

[github-actions]

✅ All Cypress E2E specs passed

[janober]

Got released with n8n@1.42.0