feat(editor): Make PDF and Audio binary-data viewable in the UI #7367

netroy · 2023-10-06T11:50:52Z

fixes #7361

github-actions · 2023-10-06T11:51:06Z

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 packages/**/*.ts:

Added unit tests to cover new or updated functionality.

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/nodes-base/nodes/**:

Added workflow tests for nodes if possible.

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

mutdmour

Great thanks. Can you please add a test to avoid seeing this bug again?

netroy · 2023-10-06T13:14:45Z

Great thanks. Can you please add a test to avoid seeing this bug again?

I tried to add a test in RunData.test.ts, but it's always rendering the schema tab, so I can't add assertions on the binary data. Can you please have a look into the test I added 🙏🏽

codecov · 2023-10-06T13:29:15Z

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (b3247e5) 33.46% compared to head (d1036a6) 33.44%.
Report is 3 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7367      +/-   ##
==========================================
- Coverage   33.46%   33.44%   -0.02%     
==========================================
  Files        3389     3389              
  Lines      206598   206605       +7     
  Branches    22286    22298      +12     
==========================================
- Hits        69135    69107      -28     
- Misses     136344   136378      +34     
- Partials     1119     1120       +1

Files	Coverage Δ
...ditor-ui/src/components/BinaryDataDisplayEmbed.vue	`67.61% <100.00%> (+1.61%)`	⬆️
packages/editor-ui/src/components/RunData.vue	`60.06% <100.00%> (-2.15%)`	⬇️
packages/workflow/src/Interfaces.ts	`77.77% <ø> (ø)`
packages/workflow/src/utils.ts	`64.77% <100.00%> (+5.47%)`	⬆️

... and 5 files with indirect coverage changes

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

krynble

LGTM

github-actions · 2023-10-09T11:15:02Z

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

cypress · 2023-10-09T11:15:07Z

1 flaky test on run #2440 ↗︎

0	250	0	0	1

Details:

🌳 fix-7361 🖥️ browsers:node18.12.0-chrome107 🤖 netroy 🗃️ e2e/*
Project: n8n	Commit: `d1036a6146`
Status: Passed	Duration: 09:04 💡
Started: Oct 9, 2023 3:32 PM	Ended: Oct 9, 2023 3:41 PM

cypress/e2e/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`

Review all test suite changes for PR #7367 ↗︎

fixes #7361

packages/workflow/test/utils.test.ts

packages/editor-ui/src/components/__tests__/RunData.test.ts

netroy · 2023-10-09T12:22:56Z

packages/workflow/src/Interfaces.ts

@@ -35,7 +35,7 @@ export type IAllExecuteFunctions =
 	| ITriggerFunctions
 	| IWebhookFunctions;

-export type BinaryFileType = 'text' | 'json' | 'image' | 'video';
+export type BinaryFileType = 'text' | 'json' | 'image' | 'audio' | 'video' | 'pdf';


should we use document instead of pdf here? are there any other document types that browsers can easily render via the <embed> tag, that are also relevant to us?

text/html could be rendered in <embed>, but that might be a security risk, as the html file could be used for arbitrary code execution.

I can see more documents being needed.. but as long as users can download them, it's fine as is. or until a user requests it

github-actions · 2023-10-09T15:41:34Z

✅ All Cypress E2E specs passed

* master: (42 commits) fix(editor): Make workflow history button available only for dev builds (#7392) refactor: Upgrade to pnpm 8.9 (no-changelog) (#7393) ci: Identify NPM releases as `stable` (no-changelog) fix(editor): Implement canvas zoom UX improvements (#7376) feat(core): Switch binary filesystem mode to nested path structure (#7307) fix(editor): Fix completions for `.json` on quoted node name in Code node (#7382) fix(Notion Node): Handle empty values correctly for Notion selects + multi selects (#7383) feat(editor): Make PDF and Audio binary-data viewable in the UI (#7367) fix(Google Sheets Node): Fix "Maximum call stack size exceeded" error on too many rows (#7384) refactor(core): Refactor nodes loading (no-changelog) (#7283) fix(core): Add an option to enable postgres ssl with default certs (#6889) feat(editor): Workflow history [WIP]- Add restore and clone into new workflow actions (no-changelog) (#7359) fix(HTML Node): Update property fields to not use expressions on drag (#7379) fix: Add role check for upgrade path (#7374) fix(editor): Remove excess margin below run data editor (#7372) fix(Google Drive Trigger Node): Add Shared Drives support (#7369) feat(core): Add Job Summary to Worker response (#7360) feat(Execute Workflow Node): Run once for each item mode (#7289) refactor(core): Move `copyInputItems` to node helpers (no-changelog) (#7299) refactor(core): Create controller for binary data (no-changelog) (#7363) ... # Conflicts: # cypress/e2e/5-ndv.cy.ts

@Version

# [1.11.0](https://github.com/n8n-io/n8n/compare/n8n@1.10.0...n8n@1.11.0) (2023-10-11) ### Bug Fixes * **core:** Add an option to enable postgres ssl with default certs ([#6889](#6889)) ([789e1e7](789e1e7)) * **core:** Fix error on missing paired item data ([#7399](#7399)) ([47e8953](47e8953)) * **core:** Missing pairing info ([#7326](#7326)) ([e2c3c7a](e2c3c7a)) * **core:** Prevent object deletion request on no prefix match ([#7366](#7366)) ([63e11e4](63e11e4)) * **editor:** Fix completions for `.json` on quoted node name in Code node ([#7382](#7382)) ([86e7ec7](86e7ec7)) * **editor:** Implement canvas zoom UX improvements ([#7376](#7376)) ([7e06b31](7e06b31)) * **editor:** Make workflow history button available only for dev builds ([#7392](#7392)) ([7ed466d](7ed466d)) * **editor:** Remove excess margin below run data editor ([#7372](#7372)) ([3fa2764](3fa2764)) * **editor:** Sanitize HTML binary-data before rendering in the UI ([#7400](#7400)) ([2b075bf](2b075bf)) * **editor:** Use display option's @Version specifier ([#7351](#7351)) ([afbf0c3](afbf0c3)) * **Google BigQuery Node:** Location default to jobReference ([#7354](#7354)) ([97bb703](97bb703)) * **Google Drive Trigger Node:** Add Shared Drives support ([#7369](#7369)) ([3e7a4d3](3e7a4d3)) * **Google Sheets Node:** Fix "Maximum call stack size exceeded" error on too many rows ([#7384](#7384)) ([732b15a](732b15a)) * **HTML Node:** Update property fields to not use expressions on drag ([#7379](#7379)) ([77643e5](77643e5)) * **Notion Node:** Handle empty values correctly for Notion selects + multi selects ([#7383](#7383)) ([fbcd1d4](fbcd1d4)) * **Set Node:** Increase search priority ([#7358](#7358)) ([e5ad1e7](e5ad1e7)) * **Webhook Node:** Backward compatible form-data parsing for non-array files ([#7385](#7385)) ([6479eb1](6479eb1)) ### Features * **core:** Add Job Summary to Worker response ([#7360](#7360)) ([b8608ce](b8608ce)) * **core:** Integrate object store as binary data manager ([#7253](#7253)) ([1a661e6](1a661e6)) * **core:** Switch binary filesystem mode to nested path structure ([#7307](#7307)) ([0847623](0847623)) * **editor:** Make PDF and Audio binary-data viewable in the UI ([#7367](#7367)) ([8187be1](8187be1)) * **editor:** Support autologin for upgrade path ([#7316](#7316)) ([1dfa052](1dfa052)) * **Execute Workflow Node:** Run once for each item mode ([#7289](#7289)) ([c8c14ca](c8c14ca)) * **Item Lists Node:** Split merge binary data ([#7297](#7297)) ([965db8f](965db8f)) * **Loop Over Items (Split in Batches) Node:** Automatically add a loop + rename ([#7228](#7228)) ([7b773cc](7b773cc)) * **Notion Node:** Fetch child blocks recursively ([#7304](#7304)) ([193181a](193181a)) Co-authored-by: netroy <netroy@users.noreply.github.com>

janober · 2023-10-11T13:57:09Z

Got released with n8n@1.11.0

@Version

# [1.11.0](https://github.com/n8n-io/n8n/compare/n8n@1.10.0...n8n@1.11.0) (2023-10-11) ### Bug Fixes * **core:** Add an option to enable postgres ssl with default certs ([#6889](#6889)) ([789e1e7](789e1e7)) * **core:** Fix error on missing paired item data ([#7399](#7399)) ([47e8953](47e8953)) * **core:** Missing pairing info ([#7326](#7326)) ([e2c3c7a](e2c3c7a)) * **core:** Prevent object deletion request on no prefix match ([#7366](#7366)) ([63e11e4](63e11e4)) * **editor:** Fix completions for `.json` on quoted node name in Code node ([#7382](#7382)) ([86e7ec7](86e7ec7)) * **editor:** Implement canvas zoom UX improvements ([#7376](#7376)) ([7e06b31](7e06b31)) * **editor:** Make workflow history button available only for dev builds ([#7392](#7392)) ([7ed466d](7ed466d)) * **editor:** Remove excess margin below run data editor ([#7372](#7372)) ([3fa2764](3fa2764)) * **editor:** Sanitize HTML binary-data before rendering in the UI ([#7400](#7400)) ([2b075bf](2b075bf)) * **editor:** Use display option's @Version specifier ([#7351](#7351)) ([afbf0c3](afbf0c3)) * **Google BigQuery Node:** Location default to jobReference ([#7354](#7354)) ([97bb703](97bb703)) * **Google Drive Trigger Node:** Add Shared Drives support ([#7369](#7369)) ([3e7a4d3](3e7a4d3)) * **Google Sheets Node:** Fix "Maximum call stack size exceeded" error on too many rows ([#7384](#7384)) ([732b15a](732b15a)) * **HTML Node:** Update property fields to not use expressions on drag ([#7379](#7379)) ([77643e5](77643e5)) * **Notion Node:** Handle empty values correctly for Notion selects + multi selects ([#7383](#7383)) ([fbcd1d4](fbcd1d4)) * **Set Node:** Increase search priority ([#7358](#7358)) ([e5ad1e7](e5ad1e7)) * **Webhook Node:** Backward compatible form-data parsing for non-array files ([#7385](#7385)) ([6479eb1](6479eb1)) ### Features * **core:** Add Job Summary to Worker response ([#7360](#7360)) ([b8608ce](b8608ce)) * **core:** Integrate object store as binary data manager ([#7253](#7253)) ([1a661e6](1a661e6)) * **core:** Switch binary filesystem mode to nested path structure ([#7307](#7307)) ([0847623](0847623)) * **editor:** Make PDF and Audio binary-data viewable in the UI ([#7367](#7367)) ([8187be1](8187be1)) * **editor:** Support autologin for upgrade path ([#7316](#7316)) ([1dfa052](1dfa052)) * **Execute Workflow Node:** Run once for each item mode ([#7289](#7289)) ([c8c14ca](c8c14ca)) * **Item Lists Node:** Split merge binary data ([#7297](#7297)) ([965db8f](965db8f)) * **Loop Over Items (Split in Batches) Node:** Automatically add a loop + rename ([#7228](#7228)) ([7b773cc](7b773cc)) * **Notion Node:** Fetch child blocks recursively ([#7304](#7304)) ([193181a](193181a)) Co-authored-by: netroy <netroy@users.noreply.github.com>

mutdmour reviewed Oct 6, 2023

View reviewed changes

n8n-assistant bot added core Enhancement outside /nodes-base and /editor-ui n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Oct 6, 2023

netroy changed the title ~~fix(editor): Make PDF binary-data viewable in the UI~~ fix(editor): Make PDF and Audio binary-data viewable in the UI Oct 6, 2023

netroy force-pushed the fix-7361 branch from dfd2d19 to 7216f14 Compare October 6, 2023 13:21

krynble previously approved these changes Oct 9, 2023

View reviewed changes

netroy added 5 commits October 9, 2023 13:52

fix(editor): Make PDF binary-data viewable in the UI

de246ac

fixes #7361

add audio binary-data type, and add tests for fileTypeFromMimeType

20c0eef

fix nodes tests

093efac

add more tests to RunData

42bc209

Update RunData.test.ts

01f0fe3

netroy dismissed krynble’s stale review via 01f0fe3 October 9, 2023 11:52

netroy force-pushed the fix-7361 branch from 7216f14 to 01f0fe3 Compare October 9, 2023 11:52

netroy requested a review from mutdmour October 9, 2023 11:52

mutdmour reviewed Oct 9, 2023

View reviewed changes

packages/workflow/test/utils.test.ts Show resolved Hide resolved

packages/editor-ui/src/components/__tests__/RunData.test.ts Outdated Show resolved Hide resolved

packages/editor-ui/src/components/__tests__/RunData.test.ts Outdated Show resolved Hide resolved

add proper assertions

d1036a6

netroy requested a review from mutdmour October 9, 2023 12:14

netroy commented Oct 9, 2023

View reviewed changes

netroy changed the title ~~fix(editor): Make PDF and Audio binary-data viewable in the UI~~ feat(editor): Make PDF and Audio binary-data viewable in the UI Oct 9, 2023

mutdmour approved these changes Oct 9, 2023

View reviewed changes

netroy merged commit 8187be1 into master Oct 9, 2023
61 of 62 checks passed

netroy deleted the fix-7361 branch October 9, 2023 15:43

github-actions bot mentioned this pull request Oct 11, 2023

🚀 Release 1.11.0 #7402

Merged

janober added the Released label Oct 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(editor): Make PDF and Audio binary-data viewable in the UI #7367

feat(editor): Make PDF and Audio binary-data viewable in the UI #7367

netroy commented Oct 6, 2023

github-actions bot commented Oct 6, 2023 •

edited

mutdmour left a comment

netroy commented Oct 6, 2023

codecov bot commented Oct 6, 2023 •

edited

krynble left a comment

github-actions bot commented Oct 9, 2023

cypress bot commented Oct 9, 2023 •

edited

netroy Oct 9, 2023

netroy Oct 9, 2023

mutdmour Oct 9, 2023

github-actions bot commented Oct 9, 2023

janober commented Oct 11, 2023

feat(editor): Make PDF and Audio binary-data viewable in the UI #7367

feat(editor): Make PDF and Audio binary-data viewable in the UI #7367

Conversation

netroy commented Oct 6, 2023

github-actions bot commented Oct 6, 2023 • edited

mutdmour left a comment

Choose a reason for hiding this comment

netroy commented Oct 6, 2023

codecov bot commented Oct 6, 2023 • edited

Codecov Report

krynble left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 9, 2023

cypress bot commented Oct 9, 2023 • edited

1 flaky test on run #2440 ↗︎

Review all test suite changes for PR #7367 ↗︎

netroy Oct 9, 2023

Choose a reason for hiding this comment

netroy Oct 9, 2023

Choose a reason for hiding this comment

mutdmour Oct 9, 2023

Choose a reason for hiding this comment

github-actions bot commented Oct 9, 2023

janober commented Oct 11, 2023

github-actions bot commented Oct 6, 2023 •

edited

codecov bot commented Oct 6, 2023 •

edited

cypress bot commented Oct 9, 2023 •

edited