[Datahub] [Resdesign] Header section

[cmoinier]

This PR applies the redesign of the header section, namely :

• add text to the star toggle
• redesign and position the language switcher on the top right
• redesign the back button
• remove sticky navigation bar
• redesign the title layout
• show the dataset type below the title on the left
• show update date below the title
• show status below the title

To do :

• Address review
• Add condition to language switcher (if in conf)

This is NOT COVERED (will be in another PR):

• thumbnail
• "share" link

To test

Dataset /dataset/01491630-78ce-49f3-b479-4b30dabc4c69 has all of the needed parameters of the design.

Screenshot

[github-actions]

Affected libs: feature-search, feature-router, feature-map, feature-dataviz, feature-record, ui-catalog, feature-catalog, ui-inputs, feature-editor, ui-elements, ui-search,
Affected apps: datahub, metadata-editor, demo, webcomponents, search, map-viewer, metadata-converter, datafeeder,

• 🚀 Build and deploy storybook and demo on GitHub Pages
• 📦 Build and push affected docker images

[coveralls]

coverage: 82.169% (+0.04%) from 82.13%
when pulling b1d76bb on DH/redesign-header
into 3678ce5 on main.

[Angi-Kinas]

Thank you, this looks good already! :-)
Only some minor comments.

[tkohr]

Thanks for the clean adaptions @cmoinier! There are still some details that don't exactly match the mockups. Could you have a second check on that? Some I see at first glance are:

• the margin/padding below the "Geographical dataset" etc. line should be slightly larger
• background color of language switcher should be primary
• letter spacing of "BACK" should be wider
• should the time of last update be displayed? (It is not included in mockups)
• the date is not formatted as in mockups (which is not french btw) and not localized. We should eventually pass the current locale to toLocaleString().

I'm also wondering if there is a specific reason why we need to reload the page when switching the language (cc @fgravin)? The line does not come from this PR, but its effect is visible here.

[cmoinier]

Thanks @Angi-Kinas & @tkohr for your helpful reviews 🙂

I made the following changes :

• Changed displayMap$ name to isGeodata$

• Changed displayCount type to Boolean and made it optionnal

• Changed the margin below the "Geographical dataset" etc. line

• Added the primary color to the language switcher

• Spaced out the "BACK" letters

• Formatted the date as in the mockups, but yes, I agree that the date should be in current locale.

• I didn't add the time of last update, since it's not in the mockups. wdyt @fgravin @jahow ?

[fgravin]

I'm also wondering if there is a specific reason why we need to reload the page when switching the language (cc @fgravin)? The line does not come from this PR, but its effect is visible here.

It is because changing the language has many consequences <hich are not handled internally:

• reload the search as the search is driven by the language (the index language we apply the search on)
• reload advanced filter values etc...

[fgravin]

• Changed displayMap$ name to isGeodata$

to me this is 2 different things, cf my comments in Slack

[tkohr]

Thanks for all the adaptions @cmoinier! The date formats adapts well when switching the language on my side 👍

When using the geo2france config (header_background = "#1f4490" from mockups or the similar value from primary color), I still encounter a couple of problems:

• The favorite star disappears when favoring a record due to used colors
• "Donnée géographique" is not distinct anymore => should perhaps be bg-primary-darker if this is ok for generic design
• I'd guess the [] around the status were just to represent a placeholder and can actually be removed

Maybe it'd be nice to add some e2e tests as well.

[tkohr]

Thanks for the continued effort on this @cmoinier ! I let you apply the last suggested change and then it LGTM.