[WD-20743] feat: new /data/lakehouse page

[muhammad-ali-pk]

NOTE: Replace formId in /data/form-data.json once marketo team provides it. Currently using another id from a similar form.

Done

• Built a new page i.e., /data/lakehouse
• Add entry to data/sitemap.xml
• Added modal form

QA

• View the site in your web browser at: https://canonical-com-1658.demos.haus/data/lakehouse
  • Make sure to test on all screen sizes i.e., mobile, tablet and desktop.
• Verify the page design matches figma
• Verify the page content matches copydoc

Issue / Card

Fixes #WD-20743

[webteam-app]

Demo

Jenkins

demos.haus

[eliman11]

Thanks @muhammad-ali-pk, this looks great!

For Data lakehouse architecture

• Could we hide the chart image for screens smaller than 500px in width? Beyond this size the text in the chart becomes difficult to read.

For Data lakehouse vs. data lake vs. data warehouse

• On mobile, could we have the table render as cards? I've included wireframes on Figma as well. Vanilla guidelines here for reference.

For: Canonical solutions for data lakehouses

• It seems like on medium/small viewports there's a repetion of the hr under the "Canonical solutions for data lakehouses" heading

• Not sure if we need to submit a ticket to change this Vanilla pattern, but the "Apache Spark" and "Apache Kafka" option headings should have H3 tags instead of H2s (but use H2 styling).

[mattea-turic]

Thank youuu @muhammad-ali-pk !

Feedback:

For "Data lakehouse architecture":

• The image should be sized so that e.g. "ingestion and storage layer" starts at 50% and aligns with the text above and below. Not sure what's going wrong as you've copied it exactly as in Figma (using cinematic ar, starting at 5th column, etc.), so I'm a little lost and will do some further investigation

For "Data lakehouse vs. data lake...":

• Could you add a <br> after "data lake" pls

And thanks @eliman11 for bringing up the HRs!

[muhammad-ali-pk]

@eliman11 @mattea-turic Thanks! I have addressed your comments.

@eliman11 PS., just so you know, the .p-table--mobile-card vanilla class, out of the box, applies card styles to smaller screens (both mobile and tablets), so the table is only going to be visible on large screen.

@mattea-turic It could be an issue with the image itself? Not sure either. I tried playing around with grid and image's ar but couldn't make it aligned.

[eliman11]

Thanks @muhammad-ali-pk! Noted on the cards, thanks for letting me know! There's just this one comment on hiding the charts that needs to be addressed - it seems like the image is still showing for me on mobile.

For Data lakehouse architecture

• Could we hide the chart image for screens smaller than 500px in width? Beyond this size the text in the chart becomes difficult to read.

[muhammad-ali-pk]

@eliman11 Sorry about that. Should be hidden on smaller screens now.
Thanks!

[eliman11]

No worries! Perfect, thanks for the quick change :)

[mattea-turic]

Adding design +1 while I continue trying to figure out the diagram :')
As discussed on MM @muhammad-ali-pk

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 72.74%. Comparing base (d086f8c) to head (985bb1c).
Report is 35 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1658      +/-   ##
==========================================
+ Coverage   72.37%   72.74%   +0.37%     
==========================================
  Files          18       19       +1     
  Lines        1542     1563      +21     
==========================================
+ Hits         1116     1137      +21     
  Misses        426      426              

Flag	Coverage Δ
python	72.74% <ø> (+0.37%)	⬆️

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.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[britneywwc]

Looks amazing, thanks!