95 - Invoke js dataverse use cases in the dataset page

[MellyGray]

What this PR does / why we need it:

This PR adds the use cases of the js-dataverse module to the Dataset page. This means that we're now able to show real datasets in the frontend.

This PR also improves the containerized development environment

Which issue(s) this PR closes:

• Closes [Spike - Frontend] - Invoke js-dataverse use cases in the Dataset info UI components and integrate all components in the Dataset page #95
• Closes Improve the containerized development environment #106
• Closes Create an automated mechanism to install the unpublished js-dataverse package for testing #77

Special notes for your reviewer:

Changes dev-env

• Get js-dataverse from published npm registry
• Add withData flag when running dev-env

Changes datasets UI

• Point e2e tests to the development environment port
• Refactor Datasets use cases to filter datasets by persistentId, version or privateUrlToken
• Fix Dataset Labels to show correctly the Dataset labels depending on the version state
• Fix metadata fields values to accept all compound fields formats
• Add a Dataset Builder class to create the dataset labels depending on the version
• Create a JSDatasetMapper class to map js-daverse format to UI format
• Replace mocks from Datasets use cases with the real js-daverse implementations
• Set 'metadata' as the default tab when opening a dataset page until 'files' tab is developed
• Refactor DatasetCitation component to show the citation html directly instead of composing the citation
• Replace the .tgz file of the js-dataverse module by the npm registry version
• Divide e2e into e2e and integration folders
• Fix old e2e tests and add new ones

Suggestions on how to test this:

Step 1: Get a personal token to use the js-dataverse registry

1. create a copy of .npmrc.example file without the .example suffix
2. go to https://github.com
3. Click your profile image
4. Go to settings
5. In the lateral bar click Developer Settings
6. In the lateral bar click Personal Access Tokens and select Tokens(classic)
7. Click Generate new token (classic)
8. Add a name to your new token
9. Select read:packages check
10. Click Generate token button
11. Copy your token
12. Substitute your new token in the .npmrc file
13. To check if it works run npm i

Step 2: Run the application locally

1. Run npm i
2. cd packages/design-system && npm run build
3. cd back to the root.
4. Check that you have a .env file such as the .env.example, with the VITE_DATAVERSE_BACKEND_URL=http://localhost:8000 variable
5. npm start
6. Go to http://localhost:5173/spa to check that the app runs locally. Stop it with Ctrl-c afterwards.

Step 3: Run the development environment

1. Install jq: Download the binary for your platform from http://stedolan.github.io/jq/ and make sure it is in your $PATH (/usr/bin/jq is fine) and executable with sudo chmod +x /usr/bin/jq. On Mac, you can install it with brew install jq if you use homebrew: http://brew.sh/ .
2. cd dev-env
3. ./run-env.sh 9588-datasets-api-extension

If it gives a timeout before the containers are ready, run again the above command

4. To check the environment go to http://localhost:8000 and check your local dataverse installation

Step 4: Test Dataset View mode

1. Go to http://localhost:8000
2. Login as admin using username: dataverseAdmin and password: admin1
3. Create a new Dataset
4. From the dataset view mode copy the search parameters from the url. Ex.: ?persistentId=doi:10.5072/FK2/LHGRHP&version=DRAFT
5. Go to http://localhost:8000/spa/datasets and paste the search parameters. Ex.: http://localhost:8000/spa/datasets?persistentId=doi:10.5072/FK2/LHGRHP&version=DRAFT
6. You are seeing now the same Dataset in the SPA, check that all the data is displayed correctly

Step 4: Test an specific dataset version

1. To test a specific dataset version in the version search parameter add your exisiting version. Ex.: http://localhost:8000/spa/datasets?persistentId=doi:10.5072/FK2/LHGRHP&version=1.0

Step 5: Test a dataset using a privateUrlToken

1. Create a new Dataset in localhost:8000
2. With the Dataset in draft mode click the button Edit Dataset > Private Url > Create Private Url
3. From the url generated copy only the token search parameter value
4. Now to see the dataset with the private url in the SPA go to the datasets url and paste the privateUrlToken search parameter http://localhost:8000/spa/datasets?privateUrlToken=dfa0efbc-2a54-49e0-b16e-1bafb4c4d770

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

Is there a release notes update needed for this change?:

Display a dataset by persistentId or privateUrlToken in the SPA

Improve the development environment of the SPA

Additional documentation:

[pdurbin]

Just for the record, the token thing worked for me. Happy to help troubleshoot.

[MellyGray]

@MellyGray I followed the instructions for creating a token and updated .npmrc, but I'm getting a 403 error when I run npm i. I tried installing the package directly and I also get a 403 error -

Mmmm, that's strange. We can take a look at it together if you're available today

[ekraffmiller]

In the suggestions for testing

Step 4: Test Dataset View mode
Go to http://localhost:8000/
Login as admin using username: adminDataverse and password: admin1
Create a new Dataset

It should be username: dataverseAdmin

[ekraffmiller]

This looks great! I ran the tests in the instructions in the local environment. I made some comments about the build.
The only issue I found is that when you search for a version that doesn't exist, it displays the latest version, but doesn't have the "version not found" info box. I think this is a small thing, so we could track it in a separate issue, if it is a big fix.

[ekraffmiller]

I got an error building locally, so I changed bootstrap version to "5.2.23"

[MellyGray]

Thanks for testing it meticulously! I was thinking of assessing all the messages in this issue

• Add alert messages management mechanism to the UI #99

Because there are more info messages like this one and I was thinking of creating a react context or something like that where we can throw any message at any point of the application and then the context updates the alert banner. We can keep track of the existing messages by adding comments on that issue so we don't miss any message. What do you think?

I mean, if this info box is important for the demo I can add it now, but I'd prefer to asses all the messages at once in a separate issue

[ekraffmiller]

@MellyGray I followed the instructions for creating a token and updated .npmrc, but I'm getting a 403 error when I run npm i. I tried installing the package directly and I also get a 403 error -

Mmmm, that's strange. We can take a look at it together if you're available today

fixed, thanks for your help :)

[pdurbin]

Just a quick comment on the need for this change in packages/design-system/package.json:

-    "bootstrap": "^5.2.3",
+    "bootstrap": "5.2.3",

[pdurbin]

I've only tested "view mode" but this is looking great!

The one thing I noticed from a minimal example (screenshot below )is that the ORCID ID is not a link. The JSF xhtml was edited to support this in IQSS/dataverse#7979 but I'm in favor of merging this and working on links like this in the future.

[pdurbin]

While I'm staring at this... some comments on the dataset summary. I don't see these mentioned in the PR where it was added:

• Feature/83/create datasummary with markdown #91

• Persistent ID is missing
• For author, no separation between name, affiliation, identifier type, and identifier
• Mentioned above but for ORCID there is no link
• For Point of Contact
  • For privacy reasons, the email should be hidden. Instead we mention a button (that doesn't exist yet in the SPA).
  • Affiliation should be in parentheses.

I think that's it. Not sure how we're tracking this stuff. 🤔

Update: I created this issue:

• Dataset summary, continued #115

[pdurbin]

It should be username: dataverseAdmin

I noticed this too and went ahead and fixed it.

[ekraffmiller]

I updated the Chromatic build to accept the visual changes. Approved!