Skip to content

Initial API Explorer Feature Implementation PR #837

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 26 commits into
base: main
Choose a base branch
from

Conversation

BalaSubramaniam12007
Copy link
Contributor

This is the initial PR for the API Explorer feature in APIDash. It establishes the foundation for browsing and using API templates within the application. As described in explorerreadme.md, this PR implements:

  1. Basic template browsing with a responsive grid layout displaying API templates from mock JSON files
  2. Template detail view with a split-pane interface showing requests and their details
  3. Initial request to import functionality that integrates with the main workspace
  4. Core data models and service layer using the apidash_core package for consistency

The implementation uses mock JSON data stored in lib/screens/explorer/api_templates/mock and the multi_split_view package for the resizable split view layout.

Related Issues

Checklist

Added/updated tests?

  • Yes
  • No, and this is why: This is an initial PR to establish the architecture and UI components. Comprehensive tests will be added in follow-up PRs once the core functionality is stabilized.

OS on which you have developed and tested the feature?

  • [] Windows
  • macOS
  • Linux

Implementation Overview

As detailed in explorerreadme.md, this PR introduces:

Key Components

  1. Models:

    • lib/models/explorer_model.dart: Defines ApiTemplate and Info classes with JSON serialization/deserialization
    • Reuses RequestModel, HttpRequestModel, and HttpResponseModel from apidash_core
  2. Services:

    • lib/services/templates_service.dart: Handles loading templates from mock JSON files with methods like loadTemplates()

Data Flow

  • ExplorerPage watches the templateListProvider for template data
  • TemplatesService loads JSON templates from mock files
  • Templates are parsed into ApiTemplate objects
  • UI rebuilds reactively when template data changes

Next Steps

As outlined in the explorerreadme.md future checklist, follow-up PRs will address:

  • Implementing search functionality with filtering logic in ApiSearchBar
  • Adding global state management with Riverpod providers
  • Fetching templates from GitHub repositories
  • Enhancing UI/UX with sorting and filtering options
  • Improving performance with pagination or lazy loading
  • Adding support for community contributions with an in-app Documentation Editor

Screenshots

ComponentHierarchy

DataFlow

… functionality

- Added ExplorerPage with structured layout
- Implemented ExplorerHeader with title and import button
- Created ExplorerBody containing a responsive ApiSearchBar and placeholder content
- Built reusable ApiSearchBar widget with clear and change handlers
- Set up modular file structure for future API Explorer development

Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
-Introduced ApiTemplate, Info, and Request model classes to represent structured API template data.

-Added TemplateCard, CardTitle, and CardDescription UI components for rendering API templates.

-Implemented TemplatesService to dynamically load .json templates from asset directory.

-Updated ExplorerBody to fetch and display API templates using a responsive grid layout.

Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
- Refactored ExplorerPage to a StatefulWidget to support navigation
- Introduced _showDescription state to conditionally switch between explorer and description views
- Implemented DescriptionPage as a new UI component for viewing API details
- Added DescriptionHeader with back navigation functionality
- Created DescriptionBody which includes MethodPane and DescriptionPane
- Modified ExplorerBody to accept onCardTap callback and pass it to TemplateCard tap action

Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
…Template to TemplateCard, enhance DescriptionHeader with info.description and tags, fix overflow error

- Updated explorer_model.dart to replace custom Request with RequestModel from apidash_core, ensuring mock data compatibility.
- Modified ExplorerBody and TemplateCard to pass ApiTemplate, preserving card UI (title, description, icon).
- Enhanced DescriptionPage and DescriptionHeader to display info.title, description, and tags with smaller font, maintaining theme consistency.
- Fixed 50-pixel overflow in DescriptionHeader by removing fixed height in DescriptionPage.

Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
…nBody to display scrollable request list

- Created requests_card.dart with RequestCard widget to display request title.
- Renamed method_pane.dart to request_pane.dart and MethodPane to RequestsPane, implementing scrollable ListView of RequestCard.

Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
…d button placeholder

feat: integrate UrlCard into DescriptionPane with request selection support
fix: adjust MethodWidget to show HTTPVerb as GET, PUT instead of enum names
- Extracted HTTP method display into a reusable MethodChip widget
- Styled MethodChip with method-specific colors and rounded borders
- Updated UrlCard to use MethodChip instead of inline MethodWidget

Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
- Created chip.dart with CustomChip to replace MethodChip and unify styling
- Updated UrlCard and RequestBodyCard to use new chip implementations

Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
…isplay

- Added CustomChip.tag factory method in chip.dart to centralize tag styling.
- Updated TemplateCard to use CustomChip.tag for displaying tags in a single line.

Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
…ormance

- Created import.dart to extract HttpRequestModel from RequestModel for importing requests.
- Modified description_pane.dart to pass RequestModel to UrlCard for integration.
- Updated url_card.dart to include an Import button supporting request addition via CollectionStateNotifier.
- Optimized the import process for better performance and null safety.

Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
Ensured consistent width across cards with SizedBox
Maintained 3:5:2 height ratio and responsiveness

Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
…e left in RequestsCard

Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
@BalaSubramaniam12007
Copy link
Contributor Author

@ashitaprasad @animator I have submitted my initial pull request (PR). Some parts of the proof of concept (POC) are still pending, and I am actively working on them. I plan to complete and submit the remaining work by around May 1.
Please take a look at the current PR and provide any feedback or suggestions.

…ement

- Implemented TemplatesService to load mock templates and fetch from GitHub.
- Added templatesProvider for reactive state management in ExplorerBody.
- Created FetchTemplatesButton with SnackBar feedback for fetch status

Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
- Added kTemplatesBox in hive_service.dart to store templates separately.
- Updated TemplatesService to append fetched templates to mocks in Hive.
- Enhanced templatesProvider to track cached state for UI updates.

Signed-off-by: Balasubramaniam12007 <balasubramaniam12007@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

API Explorer
2 participants