Repository navigation
feat(components): Add GitHub connection primitives (button, status, import/connect wizard) #1847
Description
Summary
Net-new Sistent components, grounded in the existing Meshery Cloud GitHub connection implementation — do not redesign from scratch.
If Cloud’s flow can be enhanced, enhance it; Sistent primitives should be extracted / generalized from that current UI, then published so Kanvas and Cloud both consume @sistent/sistent instead of forking the experience.
Today Sistent still has no GitHub-connection component (only GithubIcon, a github color token, and a generic ConnectionChip). The product UI to start from lives in Meshery Cloud.
Start from Meshery Cloud (source of truth for behavior/UX)
Repo: layer5io/meshery-cloud
| Area | Location |
|---|---|
| Route / page | ui/pages/connect/[...connection].tsx → /connect/github/... |
| Wizard shell | ui/components/connect/index.tsx |
| Stepper | ui/components/connect/stepper/ (index.tsx, stepper.tsx, stepper-content.tsx, constants.tsx, info-panel.tsx) |
| GitHub App step | ui/components/connect/stepper/github.tsx (+ getGithubInstallationId) |
| Step labels (today) | Connect GitHub App → Select Repositories → Import Designs → Enable Snapshots (…) → Finish (constants.tsx steps) |
| Verify | ui/components/connect/verify/ |
| API client | ui/api/github.ts |
| Redux | ui/store/slices/connection.ts |
| Integrations cards | ui/components/workspaces/integrations/ (connection-card.tsx, connectionsTable.tsx, metadata.tsx) |
| E2E reference | ui/e2e/github-connection-wizard.spec.ts |
Guidance: Lift presentational patterns (stepper chrome, CONNECT CTA states, empty/error, repo/file pick lists, finish) into Sistent; leave Cloud-specific data fetching, GitHub App URLs, and persistence in Cloud. Enhance Cloud where needed, then mirror the same primitives in Kanvas.
Goal
Create new Sistent primitives for GitHub connections, derived from the Cloud wizard above, and publish via @sistent/sistent.
Proposed new primitives (from Cloud, not greenfield fantasy)
- GitHubConnectButton — from Cloud CONNECT CTA /
ConnectApppatterns - GitHubConnectionStatus — connected / error / reconnect (may compose
ConnectionChip+GithubIcon) - GitHubImportConnectWizard (composable stepper) — align with Cloud
stepsinconstants.tsx; apps supply data/callbacks - Empty / error / popup-blocked / same-tab fallback presentation
- Storybook demos + package exports
- Document: “extract from Cloud → publish → Cloud & Kanvas consume”
Out of scope: MeshKit Trees crawl (meshery/meshkit#1119).
Related product issues (consume these primitives; start from Cloud UX)
| Issue | Repo | Role |
|---|---|---|
| https://github.com/layer5io/meshery-cloud/issues/6116 | Cloud | Silent CONNECT dead-end |
| https://github.com/layer5labs/meshery-extensions/issues/4367 | Kanvas | Shared React wizard for Kanvas |
| https://github.com/layer5io/meshery-cloud/issues/6117 | Cloud | Shorten Kanvas-first onboarding |
| https://github.com/layer5io/meshery-cloud/issues/6118 | Cloud | Import inventory / refresh / idempotent import |
| https://github.com/layer5io/meshery-cloud/issues/6119 | Cloud | Remap + commit-SHA pin |
Acceptance criteria
- Primitives clearly mapped to Cloud files listed above (no from-scratch redesign)
- Cloud can swap to Sistent exports without losing current wizard capabilities
- Kanvas consumes the same exports
- Related issues state dependency on this issue + “start from Cloud implementation”
Research context
layer5labs/meshery-extensions#4366 · layer5io/meshery-cloud#6115 · meshery/meshkit#1118
Activity
bhushan4work commentedon Oct 6, 2026
I would like to work on this issue, could u plz assign it to me .
feat(github): add GitHub connection primitives extracted from Meshery…