Add VSCode tasks and documentation (#1201)

.vscode/extensions.json

@@ -7,6 +7,7 @@
     "EditorConfig.EditorConfig",
     "GraphQL.vscode-graphql",
     "christian-kohler.path-intellisense",
-    "streetsidesoftware.code-spell-checker"
+    "streetsidesoftware.code-spell-checker",
+    "spmeesseman.vscode-taskexplorer"
   ]
 }

.vscode/settings.json

@@ -12,5 +12,16 @@
   },
   "stylelint.validate": ["css", "postcss", "svelte"],
   "typescript.preferences.importModuleSpecifier": "relative",
-  "cSpell.words": ["metadatas", "unconstructable"]
+  "cSpell.words": ["metadatas", "unconstructable"],
+  "terminal.integrated.profiles.osx": {
+    "bash": {
+      "args": ["--login"],
+      "icon": "terminal-bash",
+      "path": "bash"
+    },
+    "zsh": {
+      "args": ["--login", "--interactive"],
+      "path": "zsh"
+    }
+  }
 }

.vscode/tasks.json

@@ -0,0 +1,141 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Aerie UI",
+      "type": "shell",
+      "command": "nvm use && npm run dev",
+      "detail": "Task to run the Aerie UI in development mode.",
+      "problemMatcher": [
+        {
+          "background": {
+            "activeOnStart": true,
+            "beginsPattern": "  VITE",
+            "endsPattern": "➜  press h to show help"
+          },
+          "pattern": {
+            "regexp": ""
+          }
+        }
+      ],
+      "presentation": {
+        "group": "groupA"
+      }
+    },
+    {
+      "label": "Svelte Check",
+      "type": "shell",
+      "command": "nvm use && npm run check:watch",
+      "detail": "Task to run the svelte static analysis.",
+      "problemMatcher": [],
+      "presentation": {
+        "group": "groupA"
+      }
+    },
+    {
+      "label": "Unit Tests",
+      "type": "shell",
+      "command": "nvm use && npm run test",
+      "detail": "Task to run the unit tests with watch enabled.",
+      "problemMatcher": [],
+      "presentation": {
+        "group": "groupA"
+      }
+    },
+    {
+      "label": "Update Aerie",
+      "type": "shell",
+      "command": "cd ../aerie && git pull && ./gradlew assemble",
+      "detail": "Task to update your local Aerie repo and rebuild it.",
+      "problemMatcher": [],
+      "presentation": {
+        "group": "groupB"
+      }
+    },
+    {
+      "label": "Build Aerie",
+      "type": "shell",
+      "command": "cd ../aerie && ./gradlew assemble",
+      "detail": "Task to just rebuild Aerie without updating the repo.",
+      "problemMatcher": [],
+      "presentation": {
+        "group": "groupB"
+      }
+    },
+    {
+      "label": "Clean Aerie",
+      "type": "shell",
+      "command": "cd ../aerie && docker compose down && docker compose rm -f && docker compose down -v && docker compose down --rmi all && ./gradlew clean",
+      "detail": "Task to completely clean Aerie.",
+      "problemMatcher": [],
+      "presentation": {
+        "group": "groupB"
+      }
+    },
+    {
+      "label": "Aerie Backend",
+      "type": "shell",
+      "command": "cd ../aerie && docker compose up --build aerie_gateway aerie_merlin aerie_scheduler aerie_merlin_worker_1 aerie_merlin_worker_2 aerie_scheduler_worker_1 aerie_scheduler_worker_2 aerie_sequencing hasura postgres",
+      "detail": "Task to start up Aerie containers.",
+      "problemMatcher": [],
+      "presentation": {
+        "group": "groupB"
+      }
+    },
+    {
+      "label": "Clear Aerie DB",
+      "type": "shell",
+      "command": "cd ../aerie && docker compose down -v",
+      "detail": "Task to clear the Aerie DB.",
+      "problemMatcher": [],
+      "presentation": {
+        "group": "groupB"
+      }
+    },
+    {
+      "label": "Reset Aerie DB",
+      "type": "shell",
+      "dependsOn": ["Clear Aerie DB", "Aerie Backend"],
+      "dependsOrder": "sequence",
+      "detail": "Task to clear and restart the Aerie DB."
+    },
+    {
+      "label": "Run Development",
+      "dependsOn": ["Aerie Backend", "Aerie UI", "Svelte Check", "Unit Tests"],
+      "dependsOrder": "parallel",
+      "detail": "Task to start up local development.",
+      "problemMatcher": []
+    },
+    {
+      "label": "Build UI",
+      "type": "shell",
+      "command": "nvm use && npm run build",
+      "detail": "Task to do a production build of the UI"
+    },
+    {
+      "label": "e2e Debug",
+      "type": "shell",
+      "command": "nvm use && npm run test:e2e:debug",
+      "detail": "Task to run the e2e tests in debug mode."
+    },
+    {
+      "label": "e2e Codegen",
+      "type": "shell",
+      "command": "nvm use && npm run test:e2e:codegen",
+      "detail": "Task to run Playwright codegen"
+    },
+    {
+      "label": "e2e Tests",
+      "type": "shell",
+      "dependsOn": ["Build UI"],
+      "command": "nvm use && npm run test:e2e",
+      "detail": "Task to run e2e tests"
+    },
+    {
+      "label": "e2e Rerun",
+      "type": "shell",
+      "command": "nvm use && npm run test:e2e",
+      "detail": "Task to rerun e2e tests without rebuilding the UI."
+    }
+  ]
+}

docs/DEVELOPER.md

@@ -49,6 +49,8 @@ Before you can run aerie-ui you must install and configure the following product
 
 - [Aerie](https://github.com/NASA-AMMOS/aerie) which contains the main backend services. You can use the following commands to download, build, and run Aerie:
 
+  (NOTE: For compatibility with VSCode tasks, ensure that both Aerie UI and Aerie repos share the same parent directory and that NVM is installed for node version management)
+
   ```sh
   git clone https://github.com/NASA-AMMOS/aerie.git
   cd aerie
@@ -68,14 +70,25 @@ Before you can run aerie-ui you must install and configure the following product
 
   Next build Aerie, and start the services via Docker:
 
+  Via VSCode tasks: (refer to to the [development section](#development))
+
+  - Run the `Build Aerie` task to build Aerie
+  - Run the `Aerie Containers` task, to bring up all the containers
+
+  Via CLI:
+
   ```sh
   ./gradlew assemble
 
   # Notice we exclude the aerie_ui since we run it locally (i.e. not in Docker) for development.
   docker-compose up --build --detach aerie_gateway aerie_merlin aerie_scheduler aerie_merlin_worker_1 aerie_merlin_worker_2 aerie_scheduler_worker_1 aerie_scheduler_worker_2 aerie_sequencing hasura postgres
   ```
 
-  To stop and clean the Aerie services do:
+  To stop and clean the Aerie services:
+
+  Via VSCode task:
+
+  Run the `Clean Aerie` task
 
   ```sh
   cd aerie
@@ -105,6 +118,7 @@ Your editor should follow the same settings found in [.vscode/settings.json](../
 1. [GraphQL](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql)
 1. [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
 1. [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+1. [Task Explorer](https://marketplace.visualstudio.com/items?itemName=spmeesseman.vscode-taskexplorer)
 
 ## Getting the Sources
 
@@ -123,12 +137,31 @@ Install the JavaScript modules needed to build aerie-ui:
 npm install
 ```
 
-## Start Development Server
+## Development
+
+Via VSCode task:
+
+Run the `Development` task to start everything including the Aerie containers.
+
+The `Development` task runs the following tasks:
+
+- `Aerie UI`
+- `Aerie Containers`
+- `Svelte Check`
+- `Unit Tests`
+
+Via CLI:
 
 Run `npm run dev` for a dev server. Navigate to `http://localhost:3000/`. The app will automatically reload if you change any of the source files. Since we have observed some issues using [monaco-editor](https://microsoft.github.io/monaco-editor/) with the dev server on Firefox, we recommend using Chrome for development.
 
 ## Building For Production
 
+Via VSCode task:
+
+Run the `UI Build` task
+
+Via CLI:
+
 Run `npm run build` to build a production version of the project. The build artifacts will be stored in the `build/` directory.
 
 ## Cleaning