cicd-frontend-react-ts

A React + TypeScript + Vite frontend for dispatching GitHub Actions workflow_dispatch events. Browse repositories and their workflows, configure a git ref and optional input parameters, then fire runs — sequentially or in parallel — without pushing a commit or navigating GitHub's UI.

Ported from a plain HTML/CSS/JS prototype to a typed Vite/React stack with Zustand for state management.

Features

• Multi-repo support — add any number of owner/repo targets; each is validated against the GitHub API on connect
• Workflow browser — fetches all workflows for connected repos; select one or many to dispatch
• Flexible ref targeting — dispatch to a branch, tag, or exact commit SHA
• Workflow inputs — add arbitrary key/value pairs passed as inputs in the dispatch payload
• Sequential or parallel dispatch — run selected workflows one after another, or fire them all at once
• Run history panel — view recent workflow runs across all connected repos with status, conclusion, actor, and a link back to GitHub

Project structure

src/
├── main.tsx               # React entry point
├── App.tsx                # top-level layout + section composition
├── components/            # one file per UI section
│   ├── AuthSection.tsx        # add/validate owner/repo targets + PAT
│   ├── WorkflowList.tsx       # browse & select workflows
│   ├── TriggerConfig.tsx      # ref type/value + sequential|parallel mode
│   ├── WorkflowInputs.tsx     # arbitrary inputs key/value pairs
│   ├── DispatchSection.tsx    # fire dispatches + per-run results
│   ├── WorkflowRuns.tsx       # recent-runs history panel
│   └── Nav.tsx
├── state/                 # Zustand stores
│   ├── useGitHubStore.ts      # repos, workflows, selection, dispatch
│   └── useRunsStore.ts        # run-history fetching + filters
└── types/                 # all shared domain types
    ├── index.ts               # repos, workflows, dispatch, run results
    └── runs.ts                # run-history view types

Prerequisites

• Node.js 18+
• A GitHub personal access token with repo and workflow scopes

Setup

npm install

Development

npm run dev

Opens at http://localhost:5173 by default.

Build

npm run build

Output is written to dist/. Preview the production build with:

npm run preview

Lint

npm run lint