Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

🎃 Add a shared EmptyState component and use it for the "No … yet" screens

Aperta
  • Qualcosa non va?
#852 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
55/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start with the reference empty state in packages/frontend/src/app/connectors/page.tsx:390-420, then read components/ui/stat-card.tsx for tone tokens and components/ui/button.tsx for CTA patterns. Build the shared component at components/ui/empty-state.tsx and convert the listed pages, preserving role and deployment branches. Run lint and the specified Playwright tests; done means all listed states use the component and the mobile test and CTA spec pass.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement hacktoberfest help wanted

Part of the October Challenge #846.

Why

Each page writes its own empty state. The Connectors page has a well-designed one (icon, title, explanation, three actions), while most other pages show a single grey line such as "No custom roles yet." with no next step. A new user on a fresh instance hits most of these screens, so they are effectively onboarding. One shared EmptyState (icon + title + description + action) makes them consistent and gives every one of them a next step. Linear, Vercel and GitHub all use one pattern for this.

Self-hosted vs Cloud

  • Self-hosted: frontend-only, same in Community and Business.
  • Cloud (DEPLOYMENT_MODE=cloud): same. No data or API changes. Keep the Cloud/self-hosted branches that already exist (e.g. License page: "Start 7-Day Free Trial" on Cloud vs a key form on self-hosted).
  • Who can use it: everyone. Keep the existing role checks on actions. If a page already shows an admin-only action (isAdmin in Skills and Knowledge graph), keep it admin-only, and show the "ask an admin" text to everyone else. Never show a CTA that leads to a 403.

What to build

  1. Create packages/frontend/src/components/ui/empty-state.tsx: 
    <EmptyState
  icon={<ServerIcon />}          // optional ReactNode; inline SVGs like the rest of the app
  tone="emerald"                  // optional, reuse the Tone tokens from ui/badge + stat-card.tsx
  title="No MCP servers yet"
  description="Group connectors into an endpoint your AI client can connect to."
  action={<Button onClick={…}>Create your first MCP server</Button>}   // optional, 0..n actions
  variant="card" | "dashed" | "inline"   // inline = compact, for use inside a card/table
/>
    It must work in light and dark themes (use the CSS variables only), be responsive, and use semantic markup (a heading + paragraph is enough).
  2. Replace these inline empty states with it:
    • app/mcp-server/page.tsx:170-175: "No MCP servers configured yet." (already has icon + button: convert it).
    • app/mcp-server/page.tsx:176-178: "No MCP servers match your search." → add a "Clear search" action.
    • app/logs/page.tsx:290-313: the three states (end of log / filters / nothing yet). Link the "nothing yet" one to /mcp-server.
    • app/settings/roles/page.tsx:295-297: "No custom roles yet." → CTA opens the existing create form.
    • app/knowledge-graph/skills/page.tsx:235-250: "No skills yet" (keep the admin/non-admin text).
    • app/knowledge-graph/page.tsx:322-326: "No graph yet" (keep the admin/non-admin text).
    • app/settings/license/page.tsx:229-233: "No license registered yet." (keep the Cloud/self-hosted branch).
    • app/connectors/store/page.tsx:462-463: "No adapters available yet."
    • app/mcp-server/[id]/page.tsx:795-796: "No connectors available. Create a connector first." → link to /connectors/new.
    • app/analytics/page.tsx:226 and :281: "No data in range." (inline variant).
    • app/page.tsx:290: dashboard "No health data yet" (inline variant).
    • app/connectors/page.tsx:390-420: the existing rich one. Rebuild it with the component without changing how it looks.
  3. Do not convert components/tool-editor/index.tsx:976 ("No parameters yet") or the emptyMessage strings passed to MultiSelect. Those are form hints, not page empty states.

Where to look

  • packages/frontend/src/app/connectors/page.tsx:390-420: the reference design.
  • packages/frontend/src/components/ui/stat-card.tsx:5-13: tone → color mapping to reuse.
  • packages/frontend/src/components/ui/button.tsx: Button / buttonVariants for Link CTAs.
  • packages/frontend/tests/e2e/mobile.spec.ts:295-299: asserts "No connectors yet" sits inside an ancestor with class border-dashed. Keep that class on the dashed variant, or update the test in the same PR.
  • app/admin/roles/page.tsx:262-264 is a duplicate of the settings roles page with no nav link. Leave it alone.

Acceptance criteria

  • EmptyState exists with icon, title, description, action, variant, and is used in all the places listed above.
  • No CTA shown to a role that can't use it. Existing Cloud/self-hosted branches are preserved.
  • Light/dark and phone width look right (attach before/after screenshots of 3+ pages).
  • Playwright: mobile.spec.ts still passes. Add one spec that renders /mcp-server with a stubbed empty list (pattern: redesign.spec.ts) and clicks the CTA. Run with cd packages/frontend && npm run test:e2e. npm run lint is clean.
  • No docs change needed. Add a short JSDoc on the component.

Out of scope

  • Illustrations or new icon libraries (lucide-react is installed but unused; stay with inline SVGs for consistency).
  • Rewriting copy beyond what the new layout needs.
  • Loading skeletons and error states.

Size

M (1–2 days)

How to claim

Comment "I'd like to work on this" and we'll assign you. Rules in #846.

Lingua principale
TypeScript
Stelle
856
Fork
82
Merge medio
6h 49m
PR unite (30g)
152

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di HelpCode-ai/anythingmcp

Tutte le issue di HelpCode-ai/anythingmcp

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.