Upload Page Template + React: Look ups for dropdowns

[ekate]

Upload form has drop down menu for several fields "Languages", "Resource types", "Subjects", "Alternate identifier", "Related works". "Languages" and "Subjects" allow user to do the lookup but other require to scroll through the whole list. During UI testing many users asked to add the functionality the "Upload" form has for "Languages" filed to "Resource types", "Alternate Identifiers" and "Related works"
Tasks

• Add lookup for "Resource Type"
• Add lookup for "Alternate Identifiers"
• Add lookup for "Related works"

[Sinclert]

Hi @ekate 👋🏻

Could you provide a bit of context? Please consider I have been thrown into this sprint without much context of previous discussions.

• Which HTML template do you want to be updated? and how? (a link would help)
• What do you what to do with the drop-downs? create them? fix them? ...

[ekate]

Module which generates the upload form is react-invenio-deposit.

[Sinclert]

It seems that react-invenio-deposit is not the module to modify / extend.

According to the Invenio developers (Discord response reference), we are "on our own", given that the tuning of the Upload form can only be achieved by a combination of:

• Creating our own JS module (reference).
• Adding it to the Webpack theme list (reference).
• Adding it as a new entry-point (reference) [Optional].
• Injecting it into our custom deposit.html page (reference).

[ekate]

The task completion is not feasible in the duration of the current Sprint but we will start work on the new
ultraviolet-deposit-module

[Sinclert]

As discussed over Slack, i just created a new repository to serve as home for the deposit form customizations named ultraviolet-deposit-module. It contains documentation about how to create / distribute a repository-independent module.

[dismorfo]

I see that the field "Languages" calls the endpoint /api/vocabularies/languages for suggestions.

Can someone share the link to Invenio API documentation? I would like to see if there is an endpoint to query suggestions for "Alternate Identifiers" and "Related works".

By "Resource types", do you mean the field under "Basic information" or the one that is part of "Related works"? The field looks like a dropdown with a already defined set of valid input. Can you tell me more about the behavior you like to have? Make it an auto-complete? We might not need to change JS, we can try to use <datalist>. See: https://www.sitepoint.com/html5-datalist-autocomplete/

I'm talking about /uploads/new; let me know if I'm looking in the wrong place.

[Sinclert]

Hi @dismorfo,

I think this is the module we would need to customize: https://github.com/inveniosoftware/react-invenio-deposit. Sadly, it does not have any public documentation, as it is not thought to be re-used in any other context (that is literally what I was told in their Discord #newcomers-help channel).

Regarding the usage of <datalist>... I am afraid that would not make the trick. We should not depend on a static HTML list of options when rendering the drop-down menu options. The correct way to do it is by relying on the underlying APIs, which access the languages, resource-types... loaded into the DB.

Please, coordinate with @ekate if you want to know more about this. I will not check this issue any longer.

[ekate]

@dismorfo you can list all available endpoint by running pipenv run invenio routes in ultraviolet root directory. Unfortunately there is no route for resource type and affiliation. We need to add those. I will do that part. Till this is done could you look at this one - #63

[dismorfo]

@ekate Thanks. I tried $ pipenv run invenio routes | grep api and nothing, not even '/api/vocabularies/languages' that I know exist because of the "Languages" field.

[dismorfo]

See:

• ultraviolet/app_data/vocabularies/resource_types_nyu.yaml
• https://127.0.0.1:5000/api/vocabularies/resourcetypes

[ekate]

As I said above unfortunately there is no route for resource type and affiliation. We need to add those. I am looking at that part now. We need to discuss module structure. Do we want to keep python and javascript parts in one repo or separate ? What do you think

[dismorfo]

I have a prototype working for the "Resource types".

We can change the field type to be "RemoteSelectField" and then is a matter of configuring suggestionAPIUrl to use /api/vocabularies/resourcetypes and pass a fn prop serializeSuggestions for the title.