Add checkbox parameter (and also a guide to making a PR with Flask-ML changes)

[atharvakale343]

Introduction

Before this PR, users of RBox-Desktop and Flask-ML did not have any way to specify checkbox parameters as input. A checkbox parameter is one that has a label (i.e what the checkbox is for), and a boolean value.

This PR implements the UI side of checkbox and looks like this:

This PR is part two of a two part PR series to add a checkbox to RescueBox-Desktop

Part 1 PR is here: UMass-Rescue/Flask-ML#45

If you want to follow along...

I recommend you follow through this guide. If you want to do so, checkout the commit hash before this PR:

git checkout 8c4b2c1

1. Shell commands

# Clone the repo
git clone https://github.com/UMass-Rescue/RescueBox-Desktop.git

# Ensure you have node version 18 installed (newer versions may work)
node --version

# Install dependencies (this might take a while for the first time)
npm install

# Run the development version of the app to see if it runs correctly
npm run start

# Close the Dev Build using Ctrl-C

# Switch to a feature branch
git switch -c akale-add-checkbox-parameter

2. Open up the project in a text editor of your choice

Example: In VSCode, make sure you don't have any problems in the project by checking View -> Problems

3. Ensure dummy_mode is true

Set const isDummyMode = true in src/shared/dummy_data/set_dummy_mode.ts. This lets you make changes without running a Flask-ML server in the background.

4. Copy over the new openapi.yaml

Since this PR is focused on when the datamodel contract changes between Flask-ML and RBox-Desktop (as seen in the part one PR), copy over the new openapi.yaml file to src/shared/openapi.yaml

5. Regenerate the models

Use the following command

npm run build:models

This modifies this file: src/shared/generated_models.ts

6. Fix the issues in generated_models.ts

Open the "Source Control" tab in VSCode and click on generated_models.ts.

Delete all the changes that are irrelevant to the task at hand (the command that generates this file generates a lot of additional junk we don't need).

See the updated generated_models.ts file in this PR.

7. Compiler Assisted Refactoring

Similar to the Flask-ML PR, modifying the file (generated_models.ts) would break the source code. You can see the errors in the source code by running:

npm run tsc

Again, this is good. It shows you the exact location in the code where you need to make changes after changing the data model. Observe the code and make the required changes.

Now, you can make the needed changes to actually add the checkbox element. I chose to add a shadcn UI component from here: https://ui.shadcn.com/docs/components/checkbox. Care needs to be taken to ensure the form actually works after you implement a change.

8. Manual Testing

Manually add a checkbox parameter in one of the dummy data files (here, I chose src/shared/dummy_data/task_schema4.ts)

In addition, ideally, you would also set dummyMode to false and run a real, sample Flask-ML server to make sure everything works.

9. Commit Changes

Commit the changes to Git. See the four commits below and which step it corresponds to above:

1. Copy over the new openapi.yaml -> Step 4
2. regenerate the models and fix issues in generated file -> Step 5, 6
3. Compiler Assisted Refactoring -> Step 7
4. Manual Testing -> Step 8

That's it! We're done. Release a new version of RescueBox-Desktop by bumping the version and clicking "publish" in the releases section.