13 KiB
| title | publishedAt | summary |
|---|---|---|
| GSoC'24 API Dash | 2024-08-26 | Summarizing my GSoC'24 contributions to API Dash. |
GSoC'24 - Android/iOS support for API Dash
Final report summarizing my contributions to the project as part of GSoC'24
Project Details
- Contributor : Ragul Raj M
- Mentors : Ashita P, Ankit M
- Organization: API Dash
- Project: Android/iOS support for API Dash
Quick Links
Proposed Objectives
- Extend application support to Android & iOS.
- Add Environment Manager feature with unit testing & widget testing.
- Add History of Requests feature with unit testing & widget testing.
- Support for Integration testing.
Objectives Summary
The primary goal was to adapt existing desktop features to work with limited screen space ensuring that API Dash remains intuitive, user-friendly, and accesibile on both Android and iOS platforms. Thus the application should auto adjust to narrow layouts on resizing even on desktop platforms. In addition, we aimed to add some important core features such as environment variables management, and history of requests which are essential for an API Client and are currently missing.
Objectives Completed
Responsive & Adaptive Layout (Android & iOS)
Restructured the app layout with responsive breakpoints to automatically adjust based on available width. Adapted existing components to work with touch inputs, ensuring proper accessibility in Android & iOS. The UI compoents for all new features added are inherently written to be responsive.
Environment Manager
Added a way for users to manage variables with multiple environment support. Made existing fields support environment variables with custom highlighting indicating the status (availability) of the variable and popover to show current value and environment and trigger suggestions of available variables as user types a variable name. Added code to extend the feature to hold secret variables.
Extended the package multi_trigger_autocomplete to support custom triggerEnd values and handling triggers that could be a substring of another like { and {{.
History of Requests
Implemented a comprehensive request history feature that enables users to review all the requests and responses they've sent and received in the past. The history is organized with proper grouping of similar requests and sorted by timestamps for easy navigation. Users have the ability to navigate to the original request or duplicate any request directly from the history, carrying over all specific configurations, allowing them to edit the request.
Additionally, added an option for users to customize their request history retention period. They can choose from predefined periods—one week, one month, three months, or keep the history indefinitely. This setting ensures that the request history is automatically cleared according to the user's preference, maintaining a clean and efficient history log.
Integration Tests
In addition to testing each model, utility and widget added with the new features, I implemented end-to-end integration tests for both existing and new functionalities. These integration tests are written in a modular way, allowing for easy reuse of user actions across different tests.
Pull Request Report
| Feature | Pull Requests |
|---|---|
| Android & iOS Support | |
| feat: mobile support | |
| feat: desktop responsiveness | |
| Environment Manager | |
| feat: environment manager | |
| fix: environment field issues | |
| test: environment manager tests | |
| History of Requests | |
| feat: history of requests | |
| test: history of requests tests | |
| Integration Tests | |
| test: integration tests for env manager | |
| test: integration tests for history of requests | |
| test: integration tests for request editor | |
| test: common runner file for integration test | |
| UI fixes | |
| fix: color, deprecations and tests | |
| feat: about dialog | |
| fix: renderflex overflow issues in pane | |
| fix: resizing split views | |
| fix: refactored ui | |
| Fix UI inconsistencies in mobile | |
| Documentation | |
| doc: added user guides |
Challenges Faced
1. Implementing Environment Suggestion field
Task
- Implement a field that displays suitable variable suggestions when the user types the trigger character
{or{{. - Selecting the suggestion should replace the characters in the field with variable.
- The variable in the field should have appropriate styling (highlighted) according to the variable's availability in the active environment.
- Hovering the variable should show a Popover with the value the variable will get replaced with and which environment it belongs to.
Attempts, Problems and Solution
1. Attempt:
I initially found mention_tag_text_field which handled both the triggering and allowed custom styling. I configured the field provided by the package and used flutter_portal to display suggestions and popover on hovering.
Problems:
- I couldn't make the field work for both triggers
{and{{since the former is a substring of latter so, it always matches the trigger to{. - The field didn't support copying and pasting of its content with the variable.
2. Attempt:
Used multi_trigger_autocomplete for handling triggers, and extended_text_field for custom styling the variable. Using separate packages gave me more control and helped in the separation of concerns.
Problems:
- multi_trigger_autocomplete implicitly added a
" "and didn't allow customizing it. - It too couldn't choose the correct trigger among
{and{{.
Final Solution:
I had to extend the multi_trigger_autocomplete package to allow having custom end Character (triggerEnd) instead of " " and also choose the right trigger when multiple triggers match the user typed string.
Link to forked repository: foss42/multi_trigger_autocomplete
2. Loading History of Requests Optimally
Issue
The history of requests stores all instances of requests and responses sent by the user, so loading all instances into memory can cause significant overhead.
Solution
Use a normal Box to store metadata of all request history, while using a LazyBox to load the full request and response data. Ensure proper concurrency between the history requests stored in both boxes.
Implement auto-clearing to automatically remove old history requests on app start, and allow users to select their preferred request history retention period.
3. Writing Integration Tests
Issue
I encountered an issue where the integration test preview was hanging at the 'Test starting' splash screen. Initially, I assumed it was related to Hive setup, so I created a simple counter app using Hive and Riverpod to test it out. However, the integration tests worked fine in that app. Running the test on Android also resulted in the same issue, confirming that it wasn't caused by any window-related packages specific to Desktop.
Runing the test with flutter drive gave the following logs.
...
VMServiceFlutterDriver: Isolate found with number: 986834591817471
VMServiceFlutterDriver: Isolate is paused at start.
VMServiceFlutterDriver: Attempting to resume isolate
...
Investigating these logs online, I found related issues.
- integration_test package pauses isolates and calling pumpAndSettle() never finishes.
- flutter_driver pauses all isolates at their startup (even ones started from compute()), rather than only pausing initial isolate
- Integration test example boilerplate to support async main
- Can't get past splash screen after integration_test migration
- Flutter Driver hangs at splash screen
Solution
With the help of mentors gathered a list of popular open source flutter apps which have migrated to integration_test. Looked into how immich are writing their integration tests and mimicked their setup process.
4. Package and SDK upgrades
The multi_split_view introduced breaking changes that disrupted the split views in API Dash's application. To address this, we had to carefully evaluate and choose the most appropriate solution from three different options.
While implementing the new features, a Flutter SDK upgrade introduced deprecations and theme color changes that disrupted the application's appearance. As a result, I had to address the deprecations and adjust some widget stylings to maintain the original look and feel.
Future Work
Environment secrets
The environment manager feature can be extended to support secret variables whose values are obscured in the UI.
Isolate auto-clearing
The auto-clearing of requests currently happens at app start and can potentially delay the loading of the app. Optimizing this process by running the auto-clear operation asynchronously after the UI has loaded or moving it to a isolate could improve startup performance.