API Token use cases integration for account page

[ChengShi-1]

What this PR does / why we need

This PR integrates the API Token account page UI with the new API token management use cases, ensuring seamless interaction between the UI and backend functionality.

• Read current API token
• Recreate API Token
• Revoke API Token

Which issue(s) this PR closes:

• Closes API Token section use cases integration #505 API Token section - Read current API Token integration #506

Special notes for your reviewer:

waiting until this PR is reviewed.

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

1. Ensure the application is running on http://localhost:8000/.
2. Navigate to http://localhost:8000/spa/account?tab=apiToken to begin testing.
3. Confirm that you are logged in and have appropriate permissions.
4. Press the "Recreate Token" button on the page.

• A new API token is displayed and an expiration date is shown in the correct format. YYYY-MM-DD
• Reload the page by refreshing the browser, ensure the same API token and expiration date remain

5. Press the "Revoke Token" button on the page.

• The API token is revoked (disappears from the page).
• "API Token for Dataverse Admin has not been created." and a "Create Token" button is shown.
• Reload the page by refreshing the browser, ensure the same API token and expiration date remain

6. Press the "Create Token" button on the page.

• A new API token is displayed and an expiration date is shown in the correct format. YYYY-MM-DD.
• Reload the page by refreshing the browser, ensure the same API token and expiration date remain

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?:

Additional documentation:

[coveralls]

coverage: 97.558% (+0.2%) from 97.388%
when pulling 4cedb79 on api-token-usecase-integration
into 110d696 on develop.

[g-saracca]

Good job @ChengShi-1 !
I've left some comments to improve things, you will need to make a refactor to avoid creating a new repository for api token info and instead use the user repository, that will need changes in several places.

Also try to add some more stories, after that I will check how they look, thanks!

[g-saracca]

Approving! nice work!! 🚀

[ofahimIQSS]

Hello @ChengShi-1,

Had an observation on this ticket.

Copy to Clipboard isn't working when I Recreate token. Can be reproduced in storybook and local.

Steps to reproduce:

1. Go to http://localhost:8000/
2. login
3. Now go to http://localhost:8000/spa/account?tab=apiToken
4. Copy API Token to clipboard
5. Paste API token anywhere to verify copying worked.
6. Recreate token
7. Copy to clipboard
8. Paste API Token

Here is where the issue lies, the recreated token isn't getting copied.

[ChengShi-1]

Hello @ChengShi-1,

Had an observation on this ticket.

Copy to Clipboard isn't working when I Recreate token. Can be reproduced in storybook and local.

Steps to reproduce:

1. Go to http://localhost:8000/
2. login
3. Now go to http://localhost:8000/spa/account?tab=apiToken
4. Copy API Token to clipboard
5. Paste API token anywhere to verify copying worked.
6. Recreate token
7. Copy to clipboard
8. Paste API Token

Here is where the issue lies, the recreated token isn't getting copied.

Thank you, Omer! one variable was wrong in the copy function, I have a new commit to fix it. Also, it may need to be reviewed and approved again @g-saracca Thanks!!

[g-saracca]

Nice catch @ofahimIQSS, new changes approved 👍

[ofahimIQSS]

Thanks for the fix @ChengShi-1 looks good now. Merging PR.

Testing of 531.docx