feat: render save service keys on web app ui

[Sayvai]

Render and Save Third Party Service Keys (API Keys and URL) on Web App UI

Description

There is a requirement to allow users to securely enter and save third-party service keys (and URLs) to be able to work with the overall app (once the backend scripts are later to be completed).

Implemented new feature to allow users to view the required configurable service keys (and urls) to set, on the web app UI.

The configurable required service keys data is dynamically derived from the backend master YAML config file (located in /scripts/similarity/config.yml), and its actual pre-saved secret key values derived from a localised programatically created git-ignored YAML secrets config file (located in /scripts/similarity/config.local.yml).

Whenever a key is no longer required by the app, then it is safe to remove key from the master config file, and in turn this key and any pre-saved secret value will no longer render on the web UI.

If a secret has yet to be set for any of the required keys, then the value will fallback to the default placeholder value defined in the master YAML config.

Related Issue

N/A

Type

• Bug Fix
• Feature Enhancement
• Documentation Update
• Code Refactoring
• Other (please specify):

Proposed Changes

• Add an additional UI section at top of UI page to allow users to view saved service keys data, and also allow them to update those keys.
• Add new backend FastAPI endpoint (GET /api/service-keys/) to dynamically retrieve required service keys, as derived from the master YAML config file /scripts/similarity/config.yml, and replace placeholder service key values with actual secrets from localised git-ignored secrets YAML config file /scripts/similarity/config.local.yml.
• Add new backend FastAPI endpoint (PUT /api/service-keys/) to dynamically update the service keys with new values, which writes to the new secrets to the localised git-ignored secrets YAML config file /scripts/similarity/config.local.yml.
• Add wildcard *.local.yml to .gitignore file to ignore programmatically created YAML file which will pre-save the secrets.
• Updated webapp/README.md with update to supported and tested Python version (3.11.5).
• Updated package.json file by replacing pip3 and python3 with pip and python commands respectively.
• Refactored web app UI React components.
• Created a new frontend utils script file environment.ts to handle retrieving frontend environment and host URL information.
• Created new types file service-keys.ts to add frontend typings for the third-party service keys.

Screenshots / Code Snippets (if applicable)

Annotated GIF demo of the new feature, showcasing the third-party service keys UI and backend secrets yaml config being created, and holding the secrets, while the master YAML config is safely left untouched.

How to Test

1. Run the web app (follow instructions from webapp/README.md), and wait for the frontend and backend servers to completely load
2. Open http://localhost:3000/ in a new browser tab
3. Replace the existing placeholder service key values from the top of the web app UI page with your own, or any other example values (see example GIF attached to this Pull Request above)

Checklist

• The code compiles successfully without any errors or warnings
• The changes have been tested and verified
• The documentation has been updated (if applicable)
• The changes follow the project's coding guidelines and best practices
• The commit messages are descriptive and follow the project's guidelines
• All tests (if applicable) pass successfully - N/A
• This pull request has been linked to the related issue (if applicable) - N/A

Additional Information

⚠️ Because the actual secrets are programatically and safely saved to local file /scripts/similarity/config.local.yml, then any pre-existing Python project scripts which referenced to /scripts/similarity/config.yml to previously retrieve hardcoded secrets, should be refactored to check for existence of saved user secrets from secrets YAML config file /scripts/similarity/config.local.yml to programmatically retrieve secrets from there instead, otherwise fallback to master YAML config file /scripts/similarity/config.yml.