Pipeline UI is a visual editor for creating and managing GitHub Actions workflows. Built with SolidStart, this tool simplifies the process of defining GitHub pipelines by allowing users to visually editing and update workflows. It automatically generates and updates the YAML configuration files, ensuring seamless integration with GitHub.
infoInfoThis project has been made for SolidHack 2024 entry. Although there may be alternative solutions that can help writing workflow files directly from IDE, a core principle to this work was discovering new technologies and apply them for a POC.
The amount of time dedicated is very limited (around ~3 weekends, starting from 1st of October), and the features needed for a complete project are numerous. Therefore, some features will undoubtedly be missing and may be implemented in the future.
Since October is the hacktoberfest month, this project use Appwrite Cloud (Free tier) to partecipate also in Appwrite’s Hacktoberfest 2024 Hackathon.
GitHub Workflow Supported Features
🤖 Technical info
PipelineUI is entirely built with Solid and SolidStart with enabled SSR.
The core features of this project can be summarized in a few points:
- SolidStart server fns calls for session, workflow retrieval and scratches crud
- SolidStart mutations and server actions
- Appwrite OAuth integration with SolidStart api routes
- Appwrite Database integration with SolidStart server function
- CodeMirror with LSP via web-worker and linter integration
- MDX routes for /about pages
A brief introduction with a list of some core external dependencies that should be listed here for the awesome work.
User interface
The user interface has been built with:
- @kobalte/core: Accessible components for SolidJS
- @solid-primitives/*: SolidJS primitives library
- corvu: UI primitives for SolidJS
- vanilla-extract: Zero-runtime CSS in typescript
warningWarningThe source code of @vanilla-extract/vite-plugin has been patched in order to support solid start w/ vinxi for multi-environment ssr/csr build.
YAML Editor
- CodeMirror6: used to display the YAML editor and merge view. The LSP integration is an adapted fork of codemirror-languageserver, which was a good starting point to integrate the GitHub workflow language server. Portion of CodeMirror implementation is present in the @pipelineui/yaml-editor
- actions/languageservices: The language service repo for GitHub workflows and expressions. This was used to parse the workflow files and validate them, and enhance the editor code through linting and hover-in code documentation.
warningWarningThe source code of @actions/workflow-parser has been patched and rebuilt in order to work on vite in node/browser environment without getting errors and to extend some functionalities needed to the workflow yaml parser and lsp that were not available before.
Currently @actions/languageserver has been wrapped to ship only browser compatible packages with the built-in workflow-parser patch.
Read more about this in the package README.
Flow diagram
The implemented Flow diagram is very limited and it has been built with solid taking advantage of some other dependencies:
- elkjs: ELK layout algorithm, used to calculate the flow item positions
- panzoom: Cross-browser compatible pan and zoom library
- @xyflow/system: Core of xyflow, currently used to build the smooth edge curve svg
Backend
Backend has been built with appwrite, which has been wrapped via solid server functions to provide authentication and the database persistence.
Used Appwrite features:
- Auth
- Database
Most of the code is available into packages/app/lib.
Other dependencies
This projects also uses some of mine older dependencies that were used to speed up the development. These have also been updated to fix the bugs encountered.
- @codeui/kit: CodeImage design system which wraps Kobalte.
- statebuilder: Pluggable state management
- solid-codemirror: SolidJS adapter for CodeMirror
Hosting
This application is hosted on Railway. Deploy are made via github action CI/CD