ERA-10487: Support EFB schemas in ER > Header #1213

gaboDev · 2025-01-16T20:49:31Z

What does this PR do?

It adds support for Header fields of EFB in ER

How does it look

Relevant link(s)

Tracking tickets: ERA-10487
Hosted demo environments

gaboDev · 2025-01-16T20:50:17Z

src/utils/parallelPaginatedRequest.test.js

@@ -1,5 +1,5 @@
 import { setupServer } from 'msw/node';


All these changes are not related with this ticket, I'm just fixing some issues We had with the msw update for this tests

gaboDev · 2025-01-16T20:51:21Z

src/SideBar/SettingsPane/SchemaSelector/mockedSchemas.js

@@ -503,6 +503,425 @@ const schemaWithDateTimes = {
  },
 };

-const schemas = [schemaWithTexts, schemaWithSections, schemaWithBasicText, schemaWithDateTimes];
+const headers = {


I added a bunch of header configs, I will be erasing most of them before merging this to develop, just to keep this file light

gaboDev · 2025-01-16T20:52:23Z

src/ReportManager/DetailsSection/SchemaForm/fields/Header/index.test.js

+    renderHeader();
+    const header = screen.getByText(headerDetails.label);
+    expect( header ).toBeVisible();
+    expect( header ).toHaveClass(styles.large);


I got mixed feelings about checking the className in this test, but I thought it is needed to check the header is being display with the specific styles based on its size

I think it makes sense since its the only programmatic difference between the three of them. Otherwise you would have 3 tests asserting the same thing.

luixlive

Nice and easy. I just retook the conversation on using h tags. I'm having second thoughts myself, I'd like to hear your opinions.

luixlive · 2025-01-17T19:24:57Z

src/ReportManager/DetailsSection/SchemaForm/fields/Header/index.js

+};
+
+const Header = ({ details, id }) => (
+  <p className={`${styles.header} ${HEADER_THEMES[details.size]}`}


So I guess here we can discuss about making this actual HTML headers like Gabo suggested:

const HEADER_THEMES = { [HEADER_ELEMENT_SIZES.LARGE]: 'h4', [HEADER_ELEMENT_SIZES.MEDIUM]: 'h5', [HEADER_ELEMENT_SIZES.SMALL]: 'h6' };

It worries me that since users will be the ones designing the forms, they can break the semantics if the use headers for other things like providing instructions or simply putting smaller headers over bigger headers. What do you think @JoshuaVulcan

luixlive · 2025-01-17T19:25:56Z

src/ReportManager/DetailsSection/SchemaForm/fields/Header/index.test.js

+    renderHeader();
+    const header = screen.getByText(headerDetails.label);
+    expect( header ).toBeVisible();
+    expect( header ).toHaveClass(styles.large);


I think it makes sense since its the only programmatic difference between the three of them. Otherwise you would have 3 tests asserting the same thing.

tiffanynwong · 2025-01-17T20:20:28Z

Hi @gaboDev Looking good 😎

Seeing the headers with the headers in the event like activity and history, I'm thinking we're adding too much variation in styles.

Can we change the large and medium header to use the same font weight as "activity"? That would make the medium header match the style of the headers that are already in the event and the large header would match the event name style.
Can you please bump up the font weight of the small header to 400? (or whatever font weight we're using for the inputs.) The weight it's at now is quite hard to read.

Sorry, I know we looked at this yesterday, but seeing it with everything else made it clearer.

AlanCalvillo · 2025-01-20T19:38:15Z

src/SideBar/SettingsPane/SchemaSelector/mockedSchemas.js

@@ -503,6 +503,425 @@ const schemaWithDateTimes = {
  },
 };

-const schemas = [schemaWithTexts, schemaWithSections, schemaWithBasicText, schemaWithDateTimes];
+const headers = {


Can we add a section with two column headers, preferably with diff sizing for the two of them just for validation purposes?

Done, it is under the label Headers and Sections in the schema selector

AlanCalvillo

looking good.

tiffanynwong · 2025-01-21T18:47:44Z

Thanks Gabo for the changes and making an example w/ the section headers.

Sorry I didn't specify this, I think that the following should match including the section headers. And I realize I didn't specify a line height so adding that here as well. You can see examples here.

Large header = Event name = 20, font weight 500 medium, line height 24
Medium header = section header = event section headers (Details, Activity, History) = 18, font weight 500 medium, line height 22
Smalle header = 16, font weight 400 regular, line height 22

gaboDev · 2025-01-21T19:45:43Z

Thanks Gabo for the changes and making an example w/ the section headers.

Sorry I didn't specify this, I think that the following should match including the section headers. And I realize I didn't specify a line height so adding that here as well. You can see examples here.

Large header = Event name = 22, font weight 500 medium, line height 27

Medium header = section header = event section headers (Details, Activity, History) = 18, font weight 500 medium, line height 22

Smalle header = 16, font weight 400 regular, line height 22

@tiffanynwong it is done, let me know if you anything else 🫡

tiffanynwong

Looks great! thank you for the tweaks to make all the styles match!

Gabriel López added 3 commits January 16, 2025 11:04

Fixing parallelPaginatedRequest tests

f8a0eda

Fixing parallelPaginatedRequest tests

9d81e21

Adding EFB header support

a92143e

gaboDev added the deploy label Jan 16, 2025

gaboDev requested review from AlanCalvillo, luixlive, JoshuaVulcan, fonzy911 and tiffanynwong January 16, 2025 20:49

gaboDev temporarily deployed to ERA-10487 January 16, 2025 20:49 — with GitHub Actions Inactive

gaboDev temporarily deployed to padas-app January 16, 2025 20:49 — with GitHub Actions Inactive

gaboDev commented Jan 16, 2025

View reviewed changes

luixlive approved these changes Jan 17, 2025

View reviewed changes

AlanCalvillo reviewed Jan 20, 2025

View reviewed changes

Adding PR feedback

35b0c9c

gaboDev temporarily deployed to ERA-10487 January 20, 2025 22:03 — with GitHub Actions Inactive

gaboDev requested a review from AlanCalvillo January 20, 2025 22:03

gaboDev temporarily deployed to padas-app January 20, 2025 22:03 — with GitHub Actions Inactive

AlanCalvillo added deploy and removed deploy labels Jan 20, 2025

AlanCalvillo temporarily deployed to ERA-10487 January 20, 2025 22:29 — with GitHub Actions Inactive

AlanCalvillo temporarily deployed to padas-app January 20, 2025 22:30 — with GitHub Actions Inactive

AlanCalvillo temporarily deployed to ERA-10487 January 20, 2025 22:45 — with GitHub Actions Inactive

AlanCalvillo temporarily deployed to padas-app January 20, 2025 22:46 — with GitHub Actions Inactive

Provoking re-build from commit

498b36e

gaboDev temporarily deployed to ERA-10487 January 20, 2025 22:54 — with GitHub Actions Inactive

gaboDev temporarily deployed to padas-app January 20, 2025 22:54 — with GitHub Actions Inactive

gaboDev added deploy and removed deploy labels Jan 20, 2025

gaboDev temporarily deployed to ERA-10487 January 20, 2025 23:04 — with GitHub Actions Inactive

gaboDev temporarily deployed to padas-app January 20, 2025 23:05 — with GitHub Actions Inactive

gaboDev added deploy and removed deploy labels Jan 21, 2025

gaboDev temporarily deployed to ERA-10487 January 21, 2025 04:14 — with GitHub Actions Inactive

gaboDev temporarily deployed to padas-app January 21, 2025 04:14 — with GitHub Actions Inactive

AlanCalvillo approved these changes Jan 21, 2025

View reviewed changes

Adding font styles

a49fdc6

gaboDev temporarily deployed to ERA-10487 January 21, 2025 19:33 — with GitHub Actions Inactive

gaboDev temporarily deployed to padas-app January 21, 2025 19:33 — with GitHub Actions Inactive

Fixing Header styles

5dfd164

gaboDev temporarily deployed to ERA-10487 January 21, 2025 20:39 — with GitHub Actions Inactive

gaboDev temporarily deployed to padas-app January 21, 2025 20:39 — with GitHub Actions Inactive

Matching section and form headers match

a0fb901

gaboDev deployed to ERA-10487 January 21, 2025 21:11 — with GitHub Actions View deployment

gaboDev temporarily deployed to padas-app January 21, 2025 21:11 — with GitHub Actions Inactive

tiffanynwong approved these changes Jan 21, 2025

View reviewed changes

gaboDev merged commit ed0fcb4 into develop Jan 21, 2025
3 checks passed

gaboDev deleted the ERA-10487 branch January 21, 2025 21:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ERA-10487: Support EFB schemas in ER > Header #1213

ERA-10487: Support EFB schemas in ER > Header #1213

Uh oh!

gaboDev commented Jan 16, 2025 •

edited by jira bot

Loading

Uh oh!

gaboDev Jan 16, 2025

Uh oh!

gaboDev Jan 16, 2025

Uh oh!

gaboDev Jan 16, 2025

Uh oh!

luixlive Jan 17, 2025

Uh oh!

luixlive left a comment

Uh oh!

luixlive Jan 17, 2025

Uh oh!

luixlive Jan 17, 2025

Uh oh!

tiffanynwong commented Jan 17, 2025

Uh oh!

AlanCalvillo Jan 20, 2025

Uh oh!

gaboDev Jan 20, 2025

Uh oh!

AlanCalvillo left a comment

Uh oh!

tiffanynwong commented Jan 21, 2025 •

edited

Loading

Uh oh!

gaboDev commented Jan 21, 2025

Uh oh!

tiffanynwong left a comment

Uh oh!

Uh oh!

Uh oh!

ERA-10487: Support EFB schemas in ER > Header #1213

ERA-10487: Support EFB schemas in ER > Header #1213

Uh oh!

Conversation

gaboDev commented Jan 16, 2025 • edited by jira bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

How does it look

Relevant link(s)

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

luixlive left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tiffanynwong commented Jan 17, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AlanCalvillo left a comment

Choose a reason for hiding this comment

Uh oh!

tiffanynwong commented Jan 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gaboDev commented Jan 21, 2025

Uh oh!

tiffanynwong left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

gaboDev commented Jan 16, 2025 •

edited by jira bot

Loading

tiffanynwong commented Jan 21, 2025 •

edited

Loading