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

fix(editor): Tweak hover area of workflow / cred cards #7108

Merged
merged 3 commits into from
Sep 13, 2023

Conversation

cstuncsik
Copy link
Contributor

@cstuncsik cstuncsik commented Sep 5, 2023

Context

When a user is attempting to interact with a foreground action inside an entity card (workflow, credential, community node, logging destination), they might accidentally open that entity instead of interacting with a foreground action.

For these card components, actions are always placed on right side.

A/C

Area around right "column" of entity cards (workflow, cred, community node, logging destination) should not be a hoverable area (that opens that entity when clicked). This area is roughly highlighted in screen shot below in orange.

image

@github-actions
Copy link
Contributor

github-actions bot commented Sep 5, 2023

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.

@n8n-assistant n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Sep 5, 2023
event.target['className'] === 'el-switch__core'
this.$refs.cardActions === event.target ||
this.$refs.cardActions?.contains(event.target) ||
event.target?.contains(this.$refs.cardActions)
Copy link
Member

Choose a reason for hiding this comment

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

This condition could run into a situation where the click event is cancelled even when the event is triggered by clicking the card itself (the wrapper does contain the card actions).

To avoid this, you could add height: 100% to the cardActions class and then align child items to the center.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

And actually with that in place we can also remove event.target?.contains(this.$refs.cardActions) because the outer most target can only be cardActions which is already checked by this.$refs.cardActions === event.target

@codecov
Copy link

codecov bot commented Sep 13, 2023

Codecov Report

Patch coverage: 68.29% and project coverage change: +0.40% 🎉

Comparison is base (5c6cccd) 32.00% compared to head (0c6e182) 32.40%.
Report is 8 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #7108      +/-   ##
==========================================
+ Coverage   32.00%   32.40%   +0.40%     
==========================================
  Files        3277     3277              
  Lines      197964   198007      +43     
  Branches    21593    21651      +58     
==========================================
+ Hits        63349    64157     +808     
+ Misses     133554   132789     -765     
  Partials     1061     1061              
Files Changed Coverage Δ
packages/editor-ui/src/components/WorkflowCard.vue 52.01% <40.90%> (+0.47%) ⬆️
...s/SettingsLogStreaming/EventDestinationCard.ee.vue 62.89% <60.00%> (+0.96%) ⬆️
...ckages/editor-ui/src/components/CredentialCard.vue 59.22% <81.57%> (+1.07%) ⬆️
...ages/design-system/src/components/N8nCard/Card.vue 100.00% <100.00%> (+1.92%) ⬆️

... and 15 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@cypress
Copy link

cypress bot commented Sep 13, 2023

2 flaky tests on run #2155 ↗︎

0 238 0 0 Flakiness 2

Details:

🌳 pay-97-tweak-hover-area-of-wf-cred-cards 🖥️ browsers:node18.12.0-chrome107 ?...
Project: n8n Commit: 0c6e18280e
Status: Passed Duration: 07:44 💡
Started: Sep 13, 2023 10:08 AM Ended: Sep 13, 2023 10:16 AM
Flakiness  24-ndv-paired-item.cy.ts • 1 flaky test

View Output Video

Test Artifacts
NDV > resolves expression with default item when input node is not parent, while still pairing items Output Screenshots Video
Flakiness  28-debug.cy.ts • 1 flaky test

View Output Video

Test Artifacts
Debug > should be able to debug executions Output Screenshots Video

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

@github-actions
Copy link
Contributor

✅ All Cypress E2E specs passed

@cstuncsik cstuncsik merged commit 217de21 into master Sep 13, 2023
18 checks passed
@cstuncsik cstuncsik deleted the pay-97-tweak-hover-area-of-wf-cred-cards branch September 13, 2023 10:21
@github-actions github-actions bot mentioned this pull request Sep 13, 2023
netroy added a commit that referenced this pull request Sep 13, 2023
# [1.7.0](https://github.com/n8n-io/n8n/compare/[email protected]@1.7.0)
(2023-09-13)


### Bug Fixes

* **Code Node:** Disable WASM to address CVE-2023-37903
([#7122](#7122))
([36a8e91](36a8e91))
* **Code Node:** Upgrade vm2 to address CVE-2023-37466
([#7123](#7123))
([0a35025](0a35025))
* **core:** Disable Node.js custom inspection to address CVE-2023-37903
([#7125](#7125))
([a223734](a223734))
* **editor** Account for nanoid workflow ids for subworkflow execute
policy ([#7094](#7094))
([67092c0](67092c0))
* **editor:** Tweak hover area of workflow / cred cards
([#7108](#7108))
([217de21](217de21))
* **editor:** Unbind workflow endpoint events in case of workspace reset
([#7129](#7129))
([c9b7948](c9b7948))
* **editor:** Update git repo url validation regex
([#7151](#7151))
([e51f173](e51f173))
* **Google Cloud Firestore Node:** Fix empty string interpreted as
number ([#7136](#7136))
([915cfa0](915cfa0))
* **HubSpot Node:** Fix issue with contact lists not working
([#5582](#5582))
([6e5a4f6](6e5a4f6))
* **Postgres Node:** Fix automatic column mapping
([#7121](#7121))
([92af131](92af131))
* **Zoho CRM Node:** Fix issue with Sales Order not updating
([#6959](#6959))
([fd800b6](fd800b6))


### Features

* **core:** Add an option to enable WAL mode for SQLite
([#7118](#7118))
([1d1a022](1d1a022))
* **core:** Add commands to workers to respond with current state
([#7029](#7029))
([7b49cf2](7b49cf2))
* **Salesforce Node:** Add fax field to lead option
([#7030](#7030))
([01f875a](01f875a))

Co-authored-by: netroy <[email protected]>
MiloradFilipovic added a commit that referenced this pull request Sep 13, 2023
* master:
  ci: Add reusable unit test workflow (no-changelog) (#7159)
  🚀 Release 1.7.0 (#7162)
  refactor(core): Move workerCommandHandler into worker.ts (no-changelog) (#7160)
  fix(editor): Tweak hover area of workflow / cred cards (#7108)
@janober
Copy link
Member

janober commented Sep 14, 2023

Got released with [email protected]

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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants