Feat/470 user panel api token

[g-saracca]

What this PR does / why we need it:

This is the initial work for the user panel in the SPA.
This work will include:

Add links to the user panel in the User dropdown from the application header.
Add routing to the user panel.
Create 4 tabs panel with tab open by default according to url query param.
Only the API Token tab content will be created, the rest of the tabs will remain empty for now, maybe disabling tabs.
Note that this is only UI work, it wont show real info about API token yet.

This part of the documentation Users Token Management could be useful for developing use cases for managing api tokens from the SPA.

Which issue(s) this PR closes:

• Closes User Panel UI + API Token Tab content #470

Special notes for your reviewer:

The rest of the tabs are disabled, only the API Token tab is enabled.
Also the Recreate Token and Revoke Token buttons are disabled.

Suggestions on how to test this:

Step 1: Run the Development Environment

1. Execute npm i.
2. Navigate with cd packages/design-system && npm run build.
3. Return with cd ../../.
4. Ensure you have a .env file similar to .env.example, with the variable VITE_DATAVERSE_BACKEND_URL=http://localhost:8000.
5. Navigate with cd dev-env.
6. Start the environment using ./run-env.sh unstable.
7. To verify the environment, visit http://localhost:8000 and check your local Dataverse installation.

Step 2: Test the feature
This is only UI work, but couple things could be tested.

• Check that you navigate successfully to the Account page with the apiToken tab selected by default when clicking on the Api Token item on the user dropdown in the header.
• Check that the fake api token is correctly being copied to the clipboard

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

[coveralls]

coverage: 97.331% (-0.1%) from 97.44%
when pulling b31b1ab on feat/470-user-panel-api-token
into dc857c3 on develop.

[pdurbin]

Quick question about text style.

[ekraffmiller]

Looks good! just need small updates and also a Story

[g-saracca]

I added a basic story, when we integrate with the use cases we will be able to mock responses to show different scenarios.
I think is ready for review now @ekraffmiller

[ekraffmiller]

looks good, approved!

[ChengShi-1]

Hi German, the ui looks good and works well!

I noticed that even without logging in, I was able to access the API token page by directly navigating to 'http://localhost:8000/spa/account?tab=apiToken'. Should we implement some measures to prevent unauthorized access to this page?

[g-saracca]

I noticed that even without logging in, I was able to access the API token page by directly navigating to 'http://localhost:8000/spa/account?tab=apiToken'. Should we implement some measures to prevent unauthorized access to this page?

Hi @ChengShi-1, yes, that is going to be solved when me merge the Private Routes Guards PR
But I need first this PR merged in order to have this new page and add it to the protected routes.

[ChengShi-1]

Great! Approve.