[TheQuint] CSV Content is not rendering on AMP pages

[SpandanaPatnam]

Zendesk ticket https://quintype.zendesk.com/agent/tickets/12307

Publisher URL : thequint.com
Client Type: Custom
CMS: thequint.quintype.com

Tested on other Instance : No

Issue: CSV Content is not rendering on AMP pages

They need help on AMP Pages to handle .csv content on FrontEnd.
Right now the CSV content is not rendering on AMP Pages for TQ.

Eg Link:- https://www.thequint.com/amp/story/tech-and-auto/bsnl-prepaid-recharge-plans-2020-list-of-all-packs-offers-combo

Screenshot of CSV content from API in story cards array

Tried https://developers.quintype.com/quintype-amp/module-Text.html from AMP DOCs
But I wasn't able to receive this through storyElement props.

Screenshot or Video

[ags1773]

CSV tables are currently not supported by AMP lib. This is a feature request which can be added to our roadmap

[SpandanaPatnam]

Thanks @ags1773 We will let the client know about this, please let us know if there's an ETA on this to communicate to them

[ags1773]

@sramalin would be able to answer that

[SpandanaPatnam]

@sramalin @ags1773 Client has come back on this as this feature is required, please let us know the ETA to share it with the client.

Client's response:

Hi team,

As a news publisher we make use of tables within our content while filing schedules which range from elections to key sports events like IPL to showcasing different plans for ISP providers. All this collectively helps bring traffic to the website.

As a News Publisher, The Quint is focusing towards AMP pages and the same has become our key source of traffic. Unavailability of tables on AMP pages affects us adversely.

Requesting your team to add a support for this.

cc: @sinimerlin @Sowbagya-lakshmi @Rachana-t

[sanju296]

Devbox scenarios - 28 Jan 2021

• Adding a CSV element to the story; An aXa matrix. Expected Result: The table should not overflow and break the layout.
• Adding a CSV element to the story; An aXb matrix. Expected Result: The table should not overflow and break the layout.
• Checking for other elements. Expected Result: The story page should not break with the table element and other elements.
• Adding multiple table elements to the same story.
• Adding an empty table with only header and no data

[sanju296]

Staging scenarios:

• AMP Cross Browser testing.
  • Chrome.
  • Firefox.
  • Safari
  • iOS Safari
  • iOS Chrome
• Check for structured data. Expected Result: Should not throw any error.
• Should not throw any amp error.

[sanju296]

Definition of Done

• All ACs are passing during the dev-box and in staging.
• All Test cases are passing.
• All High and medium bugs are closed.
• Automate the test cases.

[sanju296]

Issues:

• The margin on the header fails to display on the Firefox browser.
  https://amplib-web.qtstage.io/amp/story/health-and-well-being/cycling/story-with-table?reload.
• If the size of the CSV is too huge, the page hangs; https://amplib-web.qtstage.io/amp/story/health-and-well-being/testing-the-table-element

[ags1773]

Platform dependancies:

• limit the upload size of table element (it crashes the browser tabJavaScript heap out of memory if table size is in MBs)
• don't set is-amp-supported:false in story API when there is a table element present