[Datahub] Add an API form generator for OGC API Records

[cmoinier]

This PR creates an API form component to handle customization of OGC API urls.

It also adds a date-range picker component to gn-ui (because such an input was in the original mockup, and will be used in gn-editor in the future).

Funded by Métropole de Lille

[github-actions]

Affected libs: api-metadata-converter, api-repository, feature-catalog, feature-record, feature-router, feature-search, feature-map, feature-dataviz, feature-auth, feature-editor, ui-search, common-domain, common-fixtures, ui-elements, ui-catalog, util-shared, ui-widgets, ui-inputs, ui-map, ui-dataviz,
Affected apps: datahub, metadata-converter, metadata-editor, datafeeder, demo, webcomponents, search, map-viewer, data-platform,

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

[fgravin]

Hi @cmoinier, not a real review but some thoughts from here to there ☺️

[fgravin]

Thanks @cmoinier for your progress on this.
I've made some general remarks regarding code practice.
Let me know if it make sense for you ☺️

[coveralls]

coverage: 83.069% (+0.09%) from 82.98%
when pulling ee4ffb6 on DH/vue-api-datahub
into c9e78c3 on main.

[fgravin]

Could we see a screenshot ?? ☺️

[tkohr]

Great work @cmoinier ! Thanks for your continued effort on this. I've left some minor comments. Besides that, I still see two points to address:

• Currently, the form breaks on mobile. I guess we can just hide the three dots button on mobile or replace it with the copy url button. Not sure if this has been discussed.
• Comparing the form with the mockup I still see quite some differences, like font sizes, paddings and margins, line breaks of the labels.

[fgravin]

Very good work, you've added a bunch of e2e & unit tests so it's very complete 👏

Just yes like @tkohr says, there are many slight differences between the mockup and your design (fonts, sizes, margin etc..). Please try to replicate the mockup with accuracy, it's all about details 😄

Thanks

[cmoinier]

Thanks @tkohr @fgravin for your reviews. I have corrected most of the things you mentionned as per the last commit. I still need to improve the design before it's considered done. 🙂

[fgravin]

Thanks @tkohr @fgravin for your reviews. I have corrected most of the things you mentionned as per the last commit. I still need to improve the design before it's considered done. 🙂

Thanks @cmoinier we will have a look.
BTW I am wondering how do you test ? I think that having a metadata which references an OGC API Features resources in the support-services compo would help.
I don't know how hard it is though.

Thanks

[cmoinier]

@fgravin I added a dump with a metadata that has two OGC API Features resources (so we can also test switching between cards).

[fgravin]

Still some issues with the rendering.
You don't handle the width of your form correctly, see the "preview" container which behave the same.

• on full screen, the form is too large
• on mobile, it's too narrow.

Also, the style of the copy text input is not like the mockup.

[fgravin]

On my tests, the cross of the close button is bigger than the text.

[fgravin]

Using the support-services locally, the dataset "Accroche velo" with the ogc api features has lost the "similar records" panel.
Is it related to the PR ?

[cmoinier]

Noted for the rendering issues, I'm on it.

For the "similar records" panel, yes, it is related to the PR. I think I have accidentally deleted the similar record link and therefore, the panel isn't displaying anymore. I will add it again and push another dump.

EDIT : After checking on main, it seems that this particular record never had any similar records in the first place. I added an OGC API service to the record /dataset/ee965118-2416-4d48-b07e-bbc696f002c2 and the similar record section stays on, so it is unrelated.

[tkohr]

Thanks, @cmoinier, everything looks good on my side! I just added a last commit to add some opacity to the transition and remove some unnecessary code, I still came across.

I let you have a look at it and wait for the CI to pass, before merging :-)

Changes done & reviewed by tobias