[Editor] : Polish editor form

[cmoinier]

Description

This PR makes UI changes for the editor form.

• Added the sidebar to the form
• Styled the autocomplete form accordingly (border style, optionnal search button for spatial extent)
• Styled the textarea with new tailwind class
• Added new classes for gn-ui-button (lg/md/sm-gray) to style the form buttons (markdown btn, comeback later btn, & url/alternate text/delete btns in image-input)
• Full height for all form pages (second page was not)
• Added proper spacing to multiple fields
• Added missing translation
• Styled "About" section accordingly (date inputs should be next to each other)

Architectural changes

The form-field-resource-updated component has been renamed to form-field-date-updated component, since it is now used for both resourceUpdated and recordUpdated fields (the component being non-specific to resourceUpdated).

Screenshots

Quality Assurance Checklist

• Commit history is devoid of any merge commits and readable to facilitate reviews
• If new logic ⚙️ is introduced: unit tests were added
• If new user stories 🤏 are introduced: E2E tests were added
• If new UI components 🕹️ are introduced: corresponding stories in Storybook were created
• If breaking changes 🪚 are introduced: add the breaking change label
• If bugs 🐞 are fixed: add the backport <release branch> label
• The documentation website 📚 has received the love it deserves

[github-actions]

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

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

[github-actions]

📷 Screenshots are here!

[coveralls]

coverage: 81.648% (-0.4%) from 82.082%
when pulling 94713f1 on ME/polish-ui
into dcc96ff on main.

[Angi-Kinas]

Thank you @cmoinier and @jahow for taking the time to make the editor look better 👍 🚀 🤩

I haven't checked the code yet, but compared the local editor to the mockups and here are some differences I found:

Search page

• the search bar on the /search page has a gray border that looks off + the blue line below it should be gray instead
  
• a small detail, but the number in the badge (sidebar) is not centered vertically
  
• the pagination feature should be centered horizontally
  
• the sidebar stops at some point while the table continues, should it rather scroll with the user's position?
  
• the font sizes of the different tables (metadata records/ my records) are different (16px vs 14px):
  
  

Editor

Step 1

• the update frequency field (dropdown) should span only half of the sections size (horizontally):
  
• we use three different fonts in the editor:
  
• the background of the national/regional toggle (when selected) should not be black but a dark grey instead (grey900?). Sorry, that's on me!
  

Step 2

• small detail: the arrow inside the button is not 100% centered vertically (Attached resources component):
  
• another little detail: the distance between the upload section and the first uploaded resource should be slightly bigger:
  

In general:

• Should we make the width of the entire form a bit smaller? In the mockups we have a width of 794px and in the editor we are currently at 946px. This leads to the fact that some dropdowns look a bit too wide, e.g.:
  
  WDYT?
• UX: When I scroll down on the first page of the wizard and I continue to the third page, I will stay at the bottom of the page, but actually I should continue filling the form at the top of the page. Is it possible to scroll back up, once switching "steps"?

Note:

The autocomplete component needs to be checked once it is ready.

Let me know if anything is not clear.
Thanks again for the effort :-)
It looks really nice!

[jahow]

@Angi-Kinas thank you for your thorough review!! I've addressed all the comments about the editor.

@cmoinier I've added a commit to make the autocomplete input layout more stable and easier to use, now it looks sort of good both in the datahub and the editor.

I tried relying on the gn-ui-text-input class as much as possible to avoid creating too many global classes. Also tried to have the icons properly sized based on font size. Also I removed the searchFirst input; now if allowSubmit is false then the button is hidden and a non-interactive icon is shown on the left. I'm not 100% sure this will work, but I figure that in most of these cases the action of "submitting" (which made sense in the datahub because we would do another search) is here not really relevant. Instead we just want to pick one of the shown suggestions.

[rcaplier]

Hello, first of all : Whow ! The editor looks so much nicer with this polishing so congrats and thanks for that.

Here are my points:

• it seems that we still use 3 differents font-family as spotted by Angie
• the background of the national/regional toggle (when selected) is still black instead of dark grey (grey900?)

Lastly, regarding the auto complete input, I think it looks great now, but I feel like the CSS of the results shown just below when you type in seems to be different than the input. It feels odd to me (there is still a shadow but not on the main input anymore..., the corner seems to not have the same radius as the main input... ).

[jahow]

it seems that we still use 3 differents font-family as spotted by Angie

I'm looking but could not find the 3 different fonts, do you mean the switch toggle? Its text was changed to "font-family-main", which is one of the two fonts we use (the other being font-family-title)

• the background of the national/regional toggle (when selected) is still black instead of dark grey (grey900?)

I set it to black because "our" gray-900 is lighter than in figma, and we don't have any color dark enough to match the mockup, other than black.

Lastly, regarding the auto complete input, I think it looks great now, but I feel like the CSS of the results shown just below when you type in seems to be different than the input. It feels odd to me (there is still a shadow but not on the main input anymore..., the corner seems to not have the same radius as the main input... ).

you're right, the autocomplete output feels off (colors, borders, font...); it's actually already the case on main. I think this should be addressed in another ticket to not make this PR bigger than it already is.

Thanks for the review!

[rcaplier]

it seems that we still use 3 differents font-family as spotted by Angie

I'm looking but could not find the 3 different fonts, do you mean the switch toggle? Its text was changed to "font-family-main", which is one of the two fonts we use (the other being font-family-title)

When I filter the css in the developper tools with "font-family" I find the 3 differents font Angie reported but maybe I'm doing it wrong or maybe my browser is polluted with old cache I don't know. Let's leave it like that then.

• the background of the national/regional toggle (when selected) is still black instead of dark grey (grey900?)

I set it to black because "our" gray-900 is lighter than in figma, and we don't have any color dark enough to match the mockup, other than black.

Lastly, regarding the auto complete input, I think it looks great now, but I feel like the CSS of the results shown just below when you type in seems to be different than the input. It feels odd to me (there is still a shadow but not on the main input anymore..., the corner seems to not have the same radius as the main input... ).

you're right, the autocomplete output feels off (colors, borders, font...); it's actually already the case on main. I think this should be addressed in another ticket to not make this PR bigger than it already is.

Thanks for the review!

Well, ok, let's merge it then 👍🏻