Shutterbug Support

[scytacki]

In order to use shutterbug without a lot of changes, we send shutterbug a html page that embeds CLUE as a iframe. The html page includes the JSON of the document that we want to screenshot. Javascript on the html page sends this document to the iframe via postMessage so CLUE can render the document. The CMS already has an iframe version of CLUE which supports receiving a document via postMessage.

One challenge with snapshots of CLUE is getting the height of the image based on the height of the document. We have a local screenshot script which was figuring this out by summing the height of each row within puppeteer.

So changes in this PR:

• fix a Cypress check that was breaking when CLUE was running in a parent frame that was in a different domain
• add a script shutterbug.ts to generate the html from a document file passed as an argument
• add url param to unwrap document in standalone document editor to test the simplification of puppeteer screenshot which captures the full height with just a simple fullPage:true option. This param is also supported in iframe.html
• rename cms-editor.html to iframe.html, since this is now a generic iframe'd CLUE.
• add height monitoring and messaging to iframe.html. It uses a ResizeObserver to monitor the height it needs and sends this back to the parent window with an updateHeight message.
• add iframe height adjusting to the html generated by shutterbug.ts: when it gets the updateHeight message from the iframe it changes the height of the <iframe> to match the requested height.

Separate work:
In order for this dynamic height to work properly in shutterbug, shutterbug has to be updated so it has an option to send fullPage:true to puppeteer. That work will take place in https://github.com/concord-consortium/shutterbug-lambda/

[cypress]

collaborative-learning    Run #13929

Run Properties:   Passed #13929  •  b0aa8e931d: automatic height handling in iframe'd CLUE

Project	collaborative-learning
Branch Review	186204732-shutterbug-support
Run status	Passed #13929
Run duration	15m 10s
Commit	b0aa8e931d: automatic height handling in iframe'd CLUE
Committer	Scott Cytacki
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	1
Pending	3
Skipped	0
Passing	112
View all changes introduced in this branch ↗︎

[codecov]

Codecov Report

Attention: Patch coverage is 77.77778% with 2 lines in your changes missing coverage. Please review.

Project coverage is 86.27%. Comparing base (d23f00b) to head (b0aa8e9).
Report is 17 commits behind head on master.

Files with missing lines	Patch %	Lines
src/components/doc-editor/doc-editor-app.tsx	50.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2420      +/-   ##
==========================================
- Coverage   86.30%   86.27%   -0.04%     
==========================================
  Files         741      741              
  Lines       38256    38261       +5     
  Branches     9775     9776       +1     
==========================================
- Hits        33018    33010       -8     
- Misses       4937     4949      +12     
- Partials      301      302       +1     

Flag	Coverage Δ
cypress	?
cypress-regression	78.05% <77.77%> (+1.67%)	⬆️
cypress-smoke	27.87% <100.00%> (+<0.01%)	⬆️
jest	48.88% <100.00%> (ø)

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

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

[bgoldowsky]

This looks good. I also tried shutterbug.ts on a document and it worked nicely.

[scytacki]

Here is the shutterbug-lambda PR: concord-consortium/shutterbug-lambda#23