Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#852 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
55/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
856
Forks
82
Merge medio
6 h 15 min
PR fusionados (30 d)
141

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de HelpCode-ai/anythingmcp

Todos los issues de HelpCode-ai/anythingmcp

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.