feat: update edit section ui components

[dmijatovic]

Update ui

Closes #1099 Closes #1126

Changes proposed in this pull request:

• Use primary button (contained variant) in edit sections
• Use outlined inputs in edit sections
• Remove helper text (not adding a value and make layout more cluttered than needed)
• Changed order in chips input (first selection then selected items)
• Moved ConceptDOI input from left panel to central panel (edit software section). Validate DOI button will automatically update version DOI to concept DOI if possible.
• Update broken tests
• Split edit basic software information into description and links & metadata pages.

How to test:

• make start to build app and generate data
• Add new software and validate working of edit software section
• Check working of validateDOI button
  • use version DOI 10.5281/zenodo.6575742
  • use concept DOI 10.5281/zenodo.6379973
• Add new project and validate working of edit project section
• Login as rsd-admin. Visit organisation and validate working of the edit organisation settings.
• Visit rsd-admin section and validate working of the admin section

Edit software

• Description

• Links & metadata

• Contributors

• Organisations

• Mentions

• Mantainers

Edit project

• Details

• Mentions

Organisation

• Settings

RSD admin section

PR Checklist:

• [ ] Increase version numbers in docker-compose.yml
• [ ] Link to a GitHub issue
• [ ] Update documentation
• [ ] Tests

[dmijatovic]

@cmeessen, @jmaassen This PR is in draft because the documentation is not updated yet. However, all layout changes are implemented. Can you, please, test this version with your theme and styles and let us know if there are some inconsistencies specific to your styles. I would prefer to have layout feedback before I start making screen recordings updates in the documentation :-)

[cmeessen]

:+1: it's looking good also in Helmholtz style

[jmaassen]

Some initial comments (more later):

Initially, the repository URL box does not contain the "info text". Only after pasting a URL does the text appear:

Same is true for the "getting started URL".

Also, the "Platform" info text seems too low? It's not aligned properly with the line?

[jmaassen]

The concept DOI section is now really busy, and the button in strangely offset compared to the text box?

[dmijatovic]

@jmaassen Thanks for the feedback. I made improvements on software details page (print screen in description is updated too). Let me know if you have additional remarks.

[jmaassen]

I really like the validate button in the text box. Makes it really clear what data it validates.

Some more feedback:

Could we also move the "keywords" and "licenses" section below the "concept DOI" section? At the moment there is no logic why these are on the side, while the ConceptDOI is in the center. Same is true for log by the way.

I could also envision that we move these three to a separate tab. The first one could then be called "Description" (now "Software Information", while new one could maybe be called "Metadata" (with DOI, keywords and licenses).

[jmaassen]

Thinking a bit further about this last comment:

Having a separate "metadata" section would also allow us to rearrange the import buttons a bit? Something like this:

We may need an info box to explain this a bit more, but it does seem easier to understand?

[jmaassen]

Regarding the documentation:

• Overall it looks good. There's some things here and there that can improve, but that's not urgent.
• Don't we support more package managers than the ones listed in the documentation?

[dmijatovic]

@jmaassen, @cmeessen, @ewan-escience After talking to Jason about improvements in the layout and documentation we decided to split ui change and the documentation. This PR handles ui changes. The documentation update will be addressed in the separate PR #1136. Please approve and merge to main for the next release if you wish (I will be OOF tomorrow).

[dmijatovic]

@cmeessen, @jmaassen I hope this would be the last check to do on this PR :-).

After some thinking and talking with Jason we decided to simplify software basic info edit page. We divided basic info in two sections.

Can you, please, check again, escpecially edit software section? Thanks.

[jmaassen]

The subtitle "Where can users find information to start?" now relates to the second URL, not the first.

Maybe better:

"Provide links to the source code repository of your software and a webpage explaining how to use it."

[jmaassen]

Better subtitle: "Provide the DOI of your software (if available). This DOI will be used to import metadata about the software."

[jmaassen]

"Add keywords to your software, or import them using the Software DOI".

[jmaassen]

Better text:

On this page you can provide links and metadata to better describe your software. Some of this metadata can be imported automatically.

Software URLs

Providing the URL of the source code repository of the software allows the RSD show a link to the source code on the software page, and automatically harvest information about the development activity.

The getting started URL can be used to link to a webpage describing how to install and use the software. This link will be prominently shown on the top of the software page.

Software DOI

The Software DOI is a unique identifier for your software, similar to DOIs for publications or datasets. Using the Software DOI, the RSD can import metadata about the software such as contributors, keywords, and licenses. It also enables the RSD to find new versions of your software, provide citation data to visitors (in various formats such as BibTex, CodeMeta, JATS, RIS and CSL), and track who cites your software.

You can use Zenodo to create a DOI for your software. Use the Validate DOI button check it the DOI is correct.

Licences

Here you can provide the license of your software, by selecting an existing Open Source license, specifying your own, or importing the license information from the Software DOI.

Keywords

Here you can provide keyword that describe your software, by selecting from existing keyword, adding your own, or importing the keywords from the Software DOI.

[jmaassen]

Also: shouldn't we add the contributor info text to that tab instead?

[sonarcloud[bot]]

Quality Gate failed for 'rsd-frontend'

Failed conditions
4.1% Duplication on New Code (required ≤ 3%)

See analysis details on SonarCloud