In-App Code Editor & Dynamic Results Table

[catherinechiu]

Types of changes

• Bugfix (change which fixes an issue)
• New feature (change which adds functionality)
• Refactor (change which changes the codebase without affecting its external behavior)
• Non-breaking change (fix or feature that would causes existing functionality to work as expected)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Purpose

• The MVP will only be running off one database that is containerized in Docker. In stretch, we will add a feature to create new schemas, which will spin up a separate Postgres instance for each schema. We do not need to edit schema for MVP.
• Deliver the most important analytics for each query in a concise and readable format. This is displayed in the Results panel.
• Enhance the user experience by allowing them to write all their query and schema code in-app rather than having to open a separate code editor to see syntax highlighting.
• Keep code DRY and minimal
• Fix Typescript bugs

Approach

• Commented out edit schema button to use for stretch features
• Created dynamically rendered Results panel to update with executed query results data that will be received from backend
• Added code editor with syntax highlighting for SQL and line numbers
• Deleted unused variables
• Changed type for 'queries' in MainPanel.tsx to 'any.' Refactor to specific type in future PR.

Resources

Codmirror Example
Electron & Codemirror
Kill :5432 Before Running App

Screenshot(s)

In-App Code Editor

Dynamic Results Table

[muhammadtrad]

Works great on my machine!

[serenackuo]

Code window looks and functions great! Everything else is looking stellar.