feat(components): Add GitHub connection primitives (button, status, import/connect wizard)

Open
#1,847 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
react, typescript
Domain
design, frontend

Research direction

Start with the Meshery Cloud implementation in ui/components/connect/index.tsx, ui/components/connect/stepper/, ui/components/connect/verify/, and ui/e2e/github-connection-wizard.spec.ts. Map the existing GitHub flow into composable Sistent primitives, then review package exports and Storybook conventions. Done means Cloud and Kanvas can consume the published exports without losing the current wizard capabilities, with the specified states, demos, and documentation covered.

Written by the indexing model from the issue text.

Description

area/ui component/components kind/enhancement

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 / ConnectApp patterns
  • GitHubConnectionStatus — connected / error / reconnect (may compose ConnectionChip + GithubIcon)
  • GitHubImportConnectWizard (composable stepper) — align with Cloud steps in constants.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

Contributor Guide · https://layer5.io/projects/sistent

Dominant language
TypeScript
Stars
137
Forks
239
Avg merge
4d 14h
Merged PRs (30d)
5

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from layer5io/sistent

All issues in layer5io/sistent

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.