Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(editor): Fix ResourceLocator dropdown style #5714

Merged
merged 7 commits into from
Mar 22, 2023

Conversation

OlegIvaniv
Copy link
Contributor

@OlegIvaniv OlegIvaniv commented Mar 17, 2023

This PR fixes a bug where the ResourceLocator popover override styles wouldn't apply, resulting in a slightly broken UI of this component. What's peculiar, is that this is only happening in production build, in dev it looks as it should. After some investigation, I found it's an issue with Vite (vitejs/vite#3924) where they load CSS in different order in a dev/prod environment. To fix this, I've added :root selector to the override, to make sure the specificity of it is higher than the original. I applied the fix also for other instances where we override this class.

We also switched the hide behaviour of the dropdown from input blur to outside-click. This way user can grab the scrolling thumb without closing the dropdown. And implemented WebKit scrollbar styles to make sure the vertical scroll-bar doesn't disappear on Mac.

@OlegIvaniv OlegIvaniv self-assigned this Mar 17, 2023
@n8n-assistant n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Mar 17, 2023
@github-actions
Copy link
Contributor

Great PR! Please pay attention to the following items before merging:

Files matching packages/**:

  • If fixing bug, added test to cover scenario.
  • If addressing forum or Github issue, added link to description.

Files matching **/*.vue:

  • Used composition API for all new components.
  • Added component or unit tests to cover functionality.

Files matching packages/editor-ui/**/*.vue:

  • Added E2E if adding new features.
  • Used design system tokens (colors, spacings...) where possible.

Files matching packages/design-system/**/*.vue:

  • Used design system tokens (colors, spacings...) where possible.
  • Updated Storybook with new component or updated functionality.

Make sure to check off this list before asking for review.

@cypress
Copy link

cypress bot commented Mar 17, 2023

1 flaky tests on run #238 ↗︎

0 183 0 0 Flakiness 1

Details:

🌳 ado-378-rlc-ui-is-messed-up 🖥️ base:16.18.1 🤖 oleg 🗃️ e2e/*
Project: n8n Commit: 30820e0e5e
Status: Passed Duration: 05:49 💡
Started: Mar 22, 2023 8:13 AM Ended: Mar 22, 2023 8:18 AM
Flakiness  cypress/e2e/14-data-transformation-expressions.cy.ts • 1 flaky test

View Output Video

Test Artifacts
Data transformation expressions > $json + native array access Output Screenshots Video

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.

@codecov
Copy link

codecov bot commented Mar 17, 2023

Codecov Report

Patch coverage has no change and project coverage change: -0.01 ⚠️

Comparison is base (b199947) 14.32% compared to head (30820e0) 14.32%.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #5714      +/-   ##
==========================================
- Coverage   14.32%   14.32%   -0.01%     
==========================================
  Files        2465     2465              
  Lines      112916   112916              
  Branches    17556    17562       +6     
==========================================
- Hits        16176    16173       -3     
- Misses      96238    96241       +3     
  Partials      502      502              

see 3 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

},
methods: {
isRemoteParameterOption(option: INodePropertyOptions) {
return this.remoteParameterOptions.map((o) => o.name).includes(option.name);
return this.remoteParameterOptionsKeys.includes(option.name);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's more efficient to have remoteParameterOptions key as a computed and check if it includes option.name rather than mapping it every time for each option which leads in app hanging for several seconds if there are many options, for example, in CoinGeco node.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧐

},
methods: {
isRemoteParameterOption(option: INodePropertyOptions) {
return this.remoteParameterOptions.map((o) => o.name).includes(option.name);
return this.remoteParameterOptionsKeys.includes(option.name);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧐

@OlegIvaniv OlegIvaniv merged commit 02810a9 into master Mar 22, 2023
@OlegIvaniv OlegIvaniv deleted the ado-378-rlc-ui-is-messed-up branch March 22, 2023 14:36
@n8n-assistant n8n-assistant bot added the Upcoming Release Will be part of the upcoming release label Mar 22, 2023
MiloradFilipovic added a commit that referenced this pull request Mar 23, 2023
…nd-foundations-sheets-node-api-endpoint

* feature/resource-mapping-component:
  fix(editor): Use credentials when fetching node and credential types (#5760)
  fix: Update Posthog no-capture (#5693)
  fix(core): Return SAML service provider urls with config (#5759)
  fix(HTTP Request Node): Fix AWS credentials to automatically deconstruct the url (#5751)
  feat(editor): Fix ResourceLocator dropdown style (#5714)
  feat(Filter Node): New node
  fix(core): Require Auth on icons and nodes/credentials types static files (no-changelog) (#5745)
  refactor(core): Stop importing LoggerProxy and createDeferredPromise in nodes-base (no-changelog) (#5742)
  feat(core): Make OAuth2 error handling consistent with success handling (#5555)
  fix(Split In Batches Node): Roll back changes in v1 and create v2 (#5747)
  ci: Upgrade sanitize-html from 2.9.0 to 2.10.0 (#5744)
  fix(core): Remove circular refs from Code and push msg (#5741)
  fix(HTTP Request Node): Add streaming to binary response  (#5701)
  fix(core): Force-upgrade `http-cache-semantics` to address CVE-2022-25881 (#5733)
  fix(core): Force-upgrade `decode-uri-component` to address CVE-2022-38900 (#5734)
MiloradFilipovic added a commit that referenced this pull request Mar 24, 2023
* master: (80 commits)
  feat: Execution custom data saving and filtering (#5496)
  ci: Fix saml.api.test.ts (no-changelog) (#5764)
  docs: Refer to docker.n8n.io/n8nio/n8n for pulling n8n docker images (no-changelog) (#5763)
  🚀 Release 0.221.0 (#5726)
  fix(core): Persist CurrentAuthenticationMethod setting change (#5762)
  feat(core): Limit user invites when SAML is enabled (#5761)
  fix(core): Setup nodeHelpers that aren't exposed in the code sandbox (no-changelog) (#5753)
  fix(HTTP Request Node): Fix AWS credentials to automatically deconstruct the url (#5751)
  fix(core): Require Auth on icons and nodes/credentials types static files (no-changelog) (#5745)
  fix(Split In Batches Node): Roll back changes in v1 and create v2 (#5747)
  fix(editor): Use credentials when fetching node and credential types (#5760)
  fix: Update Posthog no-capture (#5693)
  fix(core): Return SAML service provider urls with config (#5759)
  fix(HTTP Request Node): Fix AWS credentials to automatically deconstruct the url (#5751)
  feat(editor): Fix ResourceLocator dropdown style (#5714)
  feat(Filter Node): New node
  fix(core): Require Auth on icons and nodes/credentials types static files (no-changelog) (#5745)
  refactor(core): Stop importing LoggerProxy and createDeferredPromise in nodes-base (no-changelog) (#5742)
  feat(core): Make OAuth2 error handling consistent with success handling (#5555)
  fix(Split In Batches Node): Roll back changes in v1 and create v2 (#5747)
  ...
@janober
Copy link
Member

janober commented Mar 30, 2023

Got released with n8n@0.222.0

sunilrr pushed a commit to fl-g6/qp-n8n that referenced this pull request Apr 24, 2023
* fix(editor): Fix ResourceLocator dropdown style

* Fix other popper classes

* Fix app hanging if loading many remote parameter options

* Make ResourceLocatorDropdown flex

* Override scrollbar styles

* Hide resource locator on outside click not input blur
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
n8n team Authored by the n8n team Released ui Enhancement in /editor-ui or /design-system Upcoming Release Will be part of the upcoming release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants