Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#852 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
55/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
856
Fork
82
Merge trung bình
5 giờ 18 phút
Pull request đã merge (30 ngày)
162

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của HelpCode-ai/anythingmcp

Tất cả issue của HelpCode-ai/anythingmcp

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.