fix: Unable to download the Dashboard as image in case there's an image added through Markdown

[diegomedina248]

SUMMARY

Users can add Markdown to their Dashboards, which allow to include images using <img src="$link">. However, if the Dashboard has an image added this way, the Download as image functionality will fail.

The problem is that, depending on where do we source the image from, we could run into CORS issues.
That, however, show not make the image generation fail.

The library that we use, dom-to-image, is pretty much deprecated and hasn't received updates for a long while.

This PR replaces the library for a fork that's been rewritten and well maintained: dom-to-image-more.
The library does not fail, and instead shows a placeholder if it can't fetch the image.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

Screen.Recording.2022-06-13.at.12.40.59.mov

After:

new.mov

TESTING INSTRUCTIONS

1. Access your Workspace.
2. Create a new Dashboard.
3. Add a Markdown element to it.
4. Add below code to your Markdown:

<img src="https://repository-images.githubusercontent.com/39464018/58649580-eca4-11ea-844d-c2ddca24b226">

5. Save your changes.
6. Click on the three ellipses > Download as image.

Ensure the dashboard image is generated.

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #20362 (11d94ce) into master (11d94ce) will not change coverage.
The diff coverage is n/a.

❗ Current head 11d94ce differs from pull request most recent head 302b402. Consider uploading reports for the commit 302b402 to get more accurate results

@@           Coverage Diff           @@
##           master   #20362   +/-   ##
=======================================
  Coverage   66.70%   66.70%           
=======================================
  Files        1739     1739           
  Lines       65135    65135           
  Branches     6897     6897           
=======================================
  Hits        43450    43450           
  Misses      19932    19932           
  Partials     1753     1753           

Flag	Coverage Δ
hive	53.70% <0.00%> (ø)
javascript	51.74% <0.00%> (ø)
mysql	82.29% <0.00%> (ø)
postgres	82.36% <0.00%> (ø)
presto	53.56% <0.00%> (ø)
python	82.78% <0.00%> (ø)
sqlite	82.09% <0.00%> (ø)
unit	50.15% <0.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 11d94ce...302b402. Read the comment docs.

[rusackas]

/testenv up

[github-actions]

@rusackas Ephemeral environment spinning up at http://34.214.185.119:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[rusackas]

On the ephemeral environment linked above, I added a couple images to the markdown widget, and they both appear in the screenshot just fine! Not sure what you did to get the blank/broken image to appear ¯\_(ツ)_/¯

[rusackas]

The dome-to-image-more.d.ts looks like a typo. Should it be dom-to-image-more.d.ts?

[rusackas]

Otherwise, just needs a rebase and it looks good!

[diegomedina248]

On the ephemeral environment linked above, I added a couple images to the markdown widget, and they both appear in the screenshot just fine! Not sure what you did to get the blank/broken image to appear ¯_(ツ)_/¯

Did you try the example from the testing instructions? The problem is not all images, is the one that we fail to query, due to cors issue for example.

[cccs-tom]

@diegomedina248 We ran into this as well, with different types of errors (HTTP 401, 404, etc. on the image we were trying to embed). In your opinion, could this be cherry-picked to LTS / 1.5?

[diegomedina248]

@diegomedina248 We ran into this as well, with different types of errors (HTTP 401, 404, etc. on the image we were trying to embed). In your opinion, could this be cherry-picked to LTS / 1.5?

@cccs-tom yeah, this should be good to go.

[stephenLYZ]

LGTM!

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.