[Dashboard] Standardize table empty states with a shared component

[stephenkevn]

Summary

• Add a reusable EmptyState block (a neutral icon in a 40px circle, a title, and an optional description and action) under components/elements/, plus an EmptyTableState helper in components/ui/table.jsx that renders it inside a full-width colSpan row so the column headers and pagination stay visible.
• Empty tables now show a vertically centered, fixed 280px region instead of collapsing to a thin "No data" strip.
• Applied to the clusters, jobs (managed jobs + pools), users (+ service-account tokens), volumes, and workspaces tables, with icons matching the nav and concise, action-first copy.
• Also add an empty state to the Infrastructure page's Nodes table, which previously rendered nothing when a context had no nodes.
• A ?empty URL flag forces the empty state on populated tables so the styling can be reviewed without clearing real data. Colors are inline hex because the theme CSS variables can resolve to white in some render contexts.

Test plan

• npm run lint and npx prettier --check on the touched files — both clean.
• npm run build — succeeds.
• npm run dev, then for each table visit ?empty=1: the empty state renders (icon + title + description) centered in a 280px region with the column headers and pagination intact; removing the flag renders rows normally; no console errors. For Infrastructure, a context with no nodes shows the empty state instead of a blank section.

[gemini-code-assist]

Code Review

This pull request introduces a standardized empty-state UI across the dashboard by creating the EmptyState and EmptyTableState components, which are integrated into the clusters, jobs, pools, users, volumes, and workspaces views. It also adds a isForceEmpty utility function to allow developers and QA to force empty states via a URL query parameter. The review feedback suggests refactoring the inline styles in the new EmptyState component to Tailwind CSS classes to improve maintainability and consistency with the rest of the codebase.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

While the comment explains that colors are inline on purpose, many other styling properties like width, height, margin, borderRadius, fontSize, and fontWeight are also defined using inline styles. This makes the component harder to maintain and inconsistent with the rest of the codebase that uses Tailwind CSS.

To improve maintainability, consider refactoring these inline styles into Tailwind classes. You can use Tailwind's arbitrary value support to specify hex colors directly in the class names (e.g., bg-[#f9fafb]) to address the concern about theme variables. This keeps all styling within the className prop.

Here's a suggested refactoring:

      <div
        className="mb-4 flex h-10 w-10 items-center justify-center rounded-full border border-[#e5e7eb] bg-[#f9fafb] text-[#9ca3af]"
      >
        {icon || <Inbox size={20} strokeWidth={1.75} />}
      </div>
      <div className="text-base font-medium text-[#111827]">{title}</div>
      {description ? (
        <div className="mt-1.5 max-w-[360px] text-sm leading-[1.55] text-[#6b7280]">
          {description}
        </div>
      ) : null}
      {action ? <div className="mt-5">{action}</div> : null}