@izumisy-tailor/tailor-data-viewer 0.1.16 → 0.1.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.1.16",
+  "version": "0.1.18",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [
@@ -66,8 +66,13 @@
   "devDependencies": {
     "@tailor-platform/app-shell": "^0.24.0",
     "@tailor-platform/sdk": "^1.6.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "happy-dom": "^20.4.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tsdown": "^0.20.1",

package/src/component/column-selector.test.tsx

@@ -0,0 +1,327 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, within, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ColumnSelector } from "./column-selector";
+import type {
+  FieldMetadata,
+  RelationMetadata,
+  TableMetadataMap,
+} from "../generator/metadata-generator";
+
+const mockFields: FieldMetadata[] = [
+  { name: "id", type: "uuid", required: true, description: "ID" },
+  { name: "name", type: "string", required: true, description: "名前" },
+  { name: "email", type: "string", required: false, description: "メール" },
+  { name: "createdAt", type: "datetime", required: false },
+];
+
+describe("ColumnSelector", () => {
+  describe("基本的な表示", () => {
+    it("カラム選択ボタンが表示される", () => {
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id", "name"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+        />,
+      );
+
+      expect(screen.getByRole("button")).toHaveTextContent("カラム選択");
+    });
+
+    it("選択数/総数が正しく表示される", () => {
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id", "name"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+        />,
+      );
+
+      expect(screen.getByRole("button")).toHaveTextContent("(2/4)");
+    });
+  });
+
+  describe("ドロップダウンメニュー", () => {
+    it("ボタンクリックでドロップダウンが開く", async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id", "name"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("全選択")).toBeInTheDocument();
+        expect(body.getByText("全解除")).toBeInTheDocument();
+      });
+    });
+
+    it("フィールド一覧が表示される", async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id", "name"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("id")).toBeInTheDocument();
+        expect(body.getByText("name")).toBeInTheDocument();
+        expect(body.getByText("email")).toBeInTheDocument();
+        expect(body.getByText("createdAt")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("フィールド選択", () => {
+    it("onToggle が呼ばれる", async () => {
+      const user = userEvent.setup();
+      const onToggle = vi.fn();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id"]}
+          onToggle={onToggle}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("name")).toBeInTheDocument();
+      });
+
+      const body = within(document.body);
+      const nameLabel = body.getByText("name").closest("label")!;
+      await user.click(nameLabel);
+
+      expect(onToggle).toHaveBeenCalledWith("name");
+    });
+
+    it("全選択ボタンで onSelectAll が呼ばれる", async () => {
+      const user = userEvent.setup();
+      const onSelectAll = vi.fn();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={[]}
+          onToggle={vi.fn()}
+          onSelectAll={onSelectAll}
+          onDeselectAll={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("全選択")).toBeInTheDocument();
+      });
+
+      const body = within(document.body);
+      await user.click(body.getByText("全選択"));
+
+      expect(onSelectAll).toHaveBeenCalled();
+    });
+
+    it("全解除ボタンで onDeselectAll が呼ばれる", async () => {
+      const user = userEvent.setup();
+      const onDeselectAll = vi.fn();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id", "name"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={onDeselectAll}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("全解除")).toBeInTheDocument();
+      });
+
+      const body = within(document.body);
+      await user.click(body.getByText("全解除"));
+
+      expect(onDeselectAll).toHaveBeenCalled();
+    });
+  });
+
+  describe("リレーション", () => {
+    const mockRelations: RelationMetadata[] = [
+      {
+        fieldName: "author",
+        targetTable: "User",
+        relationType: "manyToOne",
+        foreignKeyField: "authorId",
+      },
+      {
+        fieldName: "comments",
+        targetTable: "Comment",
+        relationType: "oneToMany",
+        foreignKeyField: "postId",
+      },
+    ];
+
+    const mockTableMetadataMap: TableMetadataMap = {
+      User: {
+        name: "User",
+        pluralForm: "Users",
+        readAllowedRoles: [],
+        fields: [
+          { name: "id", type: "uuid", required: true },
+          { name: "name", type: "string", required: true },
+          { name: "email", type: "string", required: false },
+        ],
+        relations: [],
+      },
+      Comment: {
+        name: "Comment",
+        pluralForm: "Comments",
+        readAllowedRoles: [],
+        fields: [
+          { name: "id", type: "uuid", required: true },
+          { name: "content", type: "string", required: true },
+        ],
+        relations: [],
+      },
+    };
+
+    it("リレーションセクションが表示される", async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+          relations={mockRelations}
+          selectedRelations={[]}
+          onToggleRelation={vi.fn()}
+          tableMetadataMap={mockTableMetadataMap}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("リレーション (1対1)")).toBeInTheDocument();
+        expect(body.getByText("リレーション (1対多)")).toBeInTheDocument();
+      });
+    });
+
+    it("リレーションフィールドが表示される", async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+          relations={mockRelations}
+          selectedRelations={[]}
+          onToggleRelation={vi.fn()}
+          tableMetadataMap={mockTableMetadataMap}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("author")).toBeInTheDocument();
+        expect(body.getByText("comments")).toBeInTheDocument();
+      });
+    });
+
+    it("リレーションの切り替えで onToggleRelation が呼ばれる", async () => {
+      const user = userEvent.setup();
+      const onToggleRelation = vi.fn();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+          relations={mockRelations}
+          selectedRelations={[]}
+          onToggleRelation={onToggleRelation}
+          tableMetadataMap={mockTableMetadataMap}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("author")).toBeInTheDocument();
+      });
+
+      const body = within(document.body);
+      const authorLabel = body.getByText("author").closest("label")!;
+      await user.click(authorLabel);
+
+      expect(onToggleRelation).toHaveBeenCalledWith("author");
+    });
+  });
+
+  describe("ネストフィールドのフィルタリング", () => {
+    it("nested タイプのフィールドは表示されない", async () => {
+      const user = userEvent.setup();
+      const fieldsWithNested: FieldMetadata[] = [
+        ...mockFields,
+        { name: "metadata", type: "nested", required: false },
+      ];
+
+      render(
+        <ColumnSelector
+          fields={fieldsWithNested}
+          selectedFields={["id"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("id")).toBeInTheDocument();
+      });
+
+      const body = within(document.body);
+      expect(body.queryByText("metadata")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/component/column-selector.tsx

@@ -44,6 +44,10 @@ interface ColumnSelectorProps {
     relationFieldName: string,
     fieldName: string,
   ) => boolean;
+  /** Controlled open state */
+  open?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
 }
 
 /**
@@ -62,6 +66,8 @@ export function ColumnSelector({
   expandedRelationFields = {},
   onToggleExpandedRelationField,
   isExpandedRelationFieldSelected,
+  open,
+  onOpenChange,
 }: ColumnSelectorProps) {
   // Filter out nested fields as they're not directly selectable
   const selectableFields = fields.filter((field) => field.type !== "nested");
@@ -86,7 +92,7 @@ export function ColumnSelector({
     selectedFields.length + selectedRelations.length + expandedFieldCount;
 
   return (
-    <DropdownMenu>
+    <DropdownMenu open={open} onOpenChange={onOpenChange}>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="sm" className="gap-1">
           <Columns3 className="size-4" />

package/src/component/data-table-toolbar.test.tsx

@@ -0,0 +1,200 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, within, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { DataTableToolbar } from "./data-table-toolbar";
+import type { FieldMetadata } from "../generator/metadata-generator";
+
+const mockFields: FieldMetadata[] = [
+  { name: "id", type: "uuid", required: true, description: "ID" },
+  { name: "name", type: "string", required: true, description: "名前" },
+  { name: "email", type: "string", required: false, description: "メール" },
+  { name: "age", type: "number", required: false, description: "年齢" },
+];
+
+const createDefaultProps = () => ({
+  columnSelector: {
+    fields: mockFields,
+    selectedFields: ["id", "name"],
+    onToggle: vi.fn(),
+    onSelectAll: vi.fn(),
+    onDeselectAll: vi.fn(),
+  },
+  searchFilter: {
+    fields: mockFields,
+    filters: [],
+    onFiltersChange: vi.fn(),
+  },
+});
+
+describe("DataTableToolbar", () => {
+  describe("基本的な表示", () => {
+    it("カラム選択ボタンが表示される", () => {
+      render(<DataTableToolbar {...createDefaultProps()} />);
+      expect(
+        screen.getByRole("button", { name: /カラム選択/ }),
+      ).toBeInTheDocument();
+    });
+
+    it("検索ボタンが表示される", () => {
+      render(<DataTableToolbar {...createDefaultProps()} />);
+      expect(screen.getByRole("button", { name: /検索/ })).toBeInTheDocument();
+    });
+
+    it("CSV ボタンが表示される (onDownloadCsv が渡された場合)", () => {
+      render(
+        <DataTableToolbar {...createDefaultProps()} onDownloadCsv={vi.fn()} />,
+      );
+      expect(screen.getByRole("button", { name: /CSV/ })).toBeInTheDocument();
+    });
+
+    it("更新ボタンが表示される (onRefresh が渡された場合)", () => {
+      render(
+        <DataTableToolbar {...createDefaultProps()} onRefresh={vi.fn()} />,
+      );
+      expect(screen.getByRole("button", { name: /更新/ })).toBeInTheDocument();
+    });
+  });
+
+  describe("パネルの排他制御", () => {
+    it("カラム選択パネルを開くと検索パネルは開かない", async () => {
+      const user = userEvent.setup();
+      render(<DataTableToolbar {...createDefaultProps()} />);
+
+      // カラム選択パネルを開く
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      // カラム選択のコンテンツが表示されることを確認
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("全選択")).toBeInTheDocument();
+      });
+
+      // 検索パネルのコンテンツが表示されていないことを確認
+      const body = within(document.body);
+      expect(body.queryByText("検索フィルター")).not.toBeInTheDocument();
+    });
+
+    it("検索パネルを開くとカラム選択パネルは開かない", async () => {
+      const user = userEvent.setup();
+      render(<DataTableToolbar {...createDefaultProps()} />);
+
+      // 検索パネルを開く
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      // 検索パネルのコンテンツが表示されることを確認
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("検索フィルター")).toBeInTheDocument();
+      });
+
+      // カラム選択のコンテンツが表示されていないことを確認
+      const body = within(document.body);
+      expect(body.queryByText("全選択")).not.toBeInTheDocument();
+    });
+
+    it("カラム選択パネルが開いている状態で検索パネルを開くとカラム選択パネルが閉じる", async () => {
+      const user = userEvent.setup({ pointerEventsCheck: 0 });
+      render(<DataTableToolbar {...createDefaultProps()} />);
+
+      // カラム選択パネルを開く
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("全選択")).toBeInTheDocument();
+      });
+
+      // 検索パネルを開く (ドロップダウンが開いているとaria-hiddenとpointer-events:noneになるため特別な設定を使用)
+      const searchButton = screen.getByRole("button", {
+        name: /検索/,
+        hidden: true,
+      });
+      await user.click(searchButton);
+
+      // 検索パネルが開き、カラム選択パネルが閉じることを確認
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("検索フィルター")).toBeInTheDocument();
+        expect(body.queryByText("全選択")).not.toBeInTheDocument();
+      });
+    });
+
+    it("検索パネルが開いている状態でカラム選択パネルを開くと検索パネルが閉じる", async () => {
+      const user = userEvent.setup();
+      render(<DataTableToolbar {...createDefaultProps()} />);
+
+      // 検索パネルを開く
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("検索フィルター")).toBeInTheDocument();
+      });
+
+      // カラム選択パネルを開く (検索パネルが開いていても通常アクセス可能だが一貫性のためhidden: trueを追加)
+      const columnButton = screen.getByRole("button", {
+        name: /カラム選択/,
+        hidden: true,
+      });
+      await user.click(columnButton);
+
+      // カラム選択パネルが開き、検索パネルが閉じることを確認
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("全選択")).toBeInTheDocument();
+        expect(body.queryByText("検索フィルター")).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("アクションボタン", () => {
+    it("CSV ボタンクリックで onDownloadCsv が呼ばれる", async () => {
+      const user = userEvent.setup();
+      const onDownloadCsv = vi.fn();
+      render(
+        <DataTableToolbar
+          {...createDefaultProps()}
+          onDownloadCsv={onDownloadCsv}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /CSV/ }));
+      expect(onDownloadCsv).toHaveBeenCalled();
+    });
+
+    it("更新ボタンクリックで onRefresh が呼ばれる", async () => {
+      const user = userEvent.setup();
+      const onRefresh = vi.fn();
+      render(
+        <DataTableToolbar {...createDefaultProps()} onRefresh={onRefresh} />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /更新/ }));
+      expect(onRefresh).toHaveBeenCalled();
+    });
+
+    it("loading 中は CSV と更新ボタンが無効になる", () => {
+      render(
+        <DataTableToolbar
+          {...createDefaultProps()}
+          onDownloadCsv={vi.fn()}
+          onRefresh={vi.fn()}
+          loading={true}
+        />,
+      );
+
+      expect(screen.getByRole("button", { name: /CSV/ })).toBeDisabled();
+      expect(screen.getByRole("button", { name: /更新/ })).toBeDisabled();
+    });
+
+    it("csvDisabled が true の場合、CSV ボタンが無効になる", () => {
+      render(
+        <DataTableToolbar
+          {...createDefaultProps()}
+          onDownloadCsv={vi.fn()}
+          csvDisabled={true}
+        />,
+      );
+
+      expect(screen.getByRole("button", { name: /CSV/ })).toBeDisabled();
+    });
+  });
+});

package/src/component/data-table-toolbar.tsx

@@ -0,0 +1,165 @@
+import { useState, useCallback } from "react";
+import { RefreshCw, Download } from "lucide-react";
+import { Button } from "./ui/button";
+import type {
+  FieldMetadata,
+  RelationMetadata,
+  TableMetadataMap,
+  ExpandedRelationFields,
+} from "../generator/metadata-generator";
+import { ColumnSelector } from "./column-selector";
+import { SearchFilterForm } from "./search-filter";
+import { ViewSave } from "./view-save-load";
+import type { SearchFilters } from "./types";
+
+/**
+ * Active panel type - only one panel can be open at a time
+ */
+export type ActivePanel = "column" | "search" | null;
+
+interface ColumnSelectorConfig {
+  fields: FieldMetadata[];
+  selectedFields: string[];
+  onToggle: (fieldName: string) => void;
+  onSelectAll: () => void;
+  onDeselectAll: () => void;
+  relations?: RelationMetadata[];
+  selectedRelations?: string[];
+  onToggleRelation?: (fieldName: string) => void;
+  tableMetadataMap?: TableMetadataMap;
+  expandedRelationFields?: ExpandedRelationFields;
+  onToggleExpandedRelationField?: (
+    relationFieldName: string,
+    fieldName: string,
+  ) => void;
+  isExpandedRelationFieldSelected?: (
+    relationFieldName: string,
+    fieldName: string,
+  ) => boolean;
+}
+
+interface SearchFilterConfig {
+  fields: FieldMetadata[];
+  filters: SearchFilters;
+  onFiltersChange: (filters: SearchFilters) => void;
+}
+
+interface ViewSaveConfig {
+  tableName: string;
+  filters: SearchFilters;
+  selectedFields: string[];
+  selectedRelations: string[];
+  expandedRelationFields: ExpandedRelationFields;
+}
+
+interface DataTableToolbarProps {
+  /** Column selector configuration */
+  columnSelector: ColumnSelectorConfig;
+  /** Search filter configuration */
+  searchFilter: SearchFilterConfig;
+  /** View save configuration (optional - hidden if not provided) */
+  viewSave?: ViewSaveConfig;
+  /** CSV download handler */
+  onDownloadCsv?: () => void;
+  /** Refresh handler */
+  onRefresh?: () => void;
+  /** Whether the table is loading */
+  loading?: boolean;
+  /** Whether CSV download is disabled */
+  csvDisabled?: boolean;
+}
+
+/**
+ * Data table toolbar component
+ * Combines column selector, search filter, view save, and action buttons
+ * Ensures only one panel can be open at a time
+ */
+export function DataTableToolbar({
+  columnSelector,
+  searchFilter,
+  viewSave,
+  onDownloadCsv,
+  onRefresh,
+  loading = false,
+  csvDisabled = false,
+}: DataTableToolbarProps) {
+  // Active panel state - only one panel can be open at a time
+  const [activePanel, setActivePanel] = useState<ActivePanel>(null);
+
+  const handleColumnPanelChange = useCallback((open: boolean) => {
+    setActivePanel(open ? "column" : null);
+  }, []);
+
+  const handleSearchPanelChange = useCallback((open: boolean) => {
+    setActivePanel(open ? "search" : null);
+  }, []);
+
+  return (
+    <div className="flex items-center gap-4">
+      <ColumnSelector
+        fields={columnSelector.fields}
+        selectedFields={columnSelector.selectedFields}
+        onToggle={columnSelector.onToggle}
+        onSelectAll={columnSelector.onSelectAll}
+        onDeselectAll={columnSelector.onDeselectAll}
+        relations={columnSelector.relations}
+        selectedRelations={columnSelector.selectedRelations}
+        onToggleRelation={columnSelector.onToggleRelation}
+        tableMetadataMap={columnSelector.tableMetadataMap}
+        expandedRelationFields={columnSelector.expandedRelationFields}
+        onToggleExpandedRelationField={
+          columnSelector.onToggleExpandedRelationField
+        }
+        isExpandedRelationFieldSelected={
+          columnSelector.isExpandedRelationFieldSelected
+        }
+        open={activePanel === "column"}
+        onOpenChange={handleColumnPanelChange}
+      />
+
+      <SearchFilterForm
+        fields={searchFilter.fields}
+        filters={searchFilter.filters}
+        onFiltersChange={searchFilter.onFiltersChange}
+        open={activePanel === "search"}
+        onOpenChange={handleSearchPanelChange}
+      />
+
+      {viewSave && (
+        <ViewSave
+          tableName={viewSave.tableName}
+          filters={viewSave.filters}
+          selectedFields={viewSave.selectedFields}
+          selectedRelations={viewSave.selectedRelations}
+          expandedRelationFields={viewSave.expandedRelationFields}
+        />
+      )}
+
+      <div className="flex-1" />
+
+      {onDownloadCsv && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onDownloadCsv}
+          disabled={loading || csvDisabled}
+        >
+          <Download className="size-4" />
+          CSV
+        </Button>
+      )}
+
+      {onRefresh && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onRefresh}
+          disabled={loading}
+        >
+          <RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />
+          更新
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/component/data-view-tab-content.tsx

@@ -1,7 +1,5 @@
 import { useState, useCallback, useMemo } from "react";
-import { RefreshCw, Download } from "lucide-react";
 import { Alert, AlertDescription } from "./ui/alert";
-import { Button } from "./ui/button";
 import type {
   TableMetadata,
   TableMetadataMap,
@@ -9,11 +7,9 @@ import type {
 } from "../generator/metadata-generator";
 import { formatFieldValue } from "../graphql/query-builder";
 import { TableSelector } from "./table-selector";
-import { ColumnSelector } from "./column-selector";
 import { DataTable } from "./data-table";
+import { DataTableToolbar } from "./data-table-toolbar";
 import { Pagination } from "./pagination";
-import { SearchFilterForm } from "./search-filter";
-import { ViewSave } from "./view-save-load";
 import { useColumnState } from "./hooks/use-column-state";
 import { useTableData } from "./hooks/use-table-data";
 import type { InitialQuery } from "./data-viewer";
@@ -221,64 +217,40 @@ export function DataViewTabContent({
       </div>
 
       {/* Operations row: column selector, search filter, etc. */}
-      <div className="flex items-center gap-4">
-        <ColumnSelector
-          fields={selectedTable.fields}
-          selectedFields={columnState.selectedFields}
-          onToggle={columnState.toggleField}
-          onSelectAll={columnState.selectAll}
-          onDeselectAll={columnState.deselectAll}
-          relations={selectedTable.relations}
-          selectedRelations={columnState.selectedRelations}
-          onToggleRelation={columnState.toggleRelation}
-          tableMetadataMap={tableMetadataMap}
-          expandedRelationFields={columnState.expandedRelationFields}
-          onToggleExpandedRelationField={
-            columnState.toggleExpandedRelationField
-          }
-          isExpandedRelationFieldSelected={
-            columnState.isExpandedRelationFieldSelected
-          }
-        />
-
-        {/* Search filter */}
-        <SearchFilterForm
-          fields={selectedTable.fields}
-          filters={searchFilters}
-          onFiltersChange={handleFiltersChange}
-        />
-
-        {/* View save */}
-        <ViewSave
-          tableName={selectedTable.name}
-          filters={searchFilters}
-          selectedFields={columnState.selectedFields}
-          selectedRelations={columnState.selectedRelations}
-          expandedRelationFields={columnState.expandedRelationFields}
-        />
-
-        <div className="flex-1" />
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={handleDownloadCsv}
-          disabled={tableData.loading || tableData.data.length === 0}
-        >
-          <Download className="size-4" />
-          CSV
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => tableData.refetch()}
-          disabled={tableData.loading}
-        >
-          <RefreshCw
-            className={`size-4 ${tableData.loading ? "animate-spin" : ""}`}
-          />
-          更新
-        </Button>
-      </div>
+      <DataTableToolbar
+        columnSelector={{
+          fields: selectedTable.fields,
+          selectedFields: columnState.selectedFields,
+          onToggle: columnState.toggleField,
+          onSelectAll: columnState.selectAll,
+          onDeselectAll: columnState.deselectAll,
+          relations: selectedTable.relations,
+          selectedRelations: columnState.selectedRelations,
+          onToggleRelation: columnState.toggleRelation,
+          tableMetadataMap: tableMetadataMap,
+          expandedRelationFields: columnState.expandedRelationFields,
+          onToggleExpandedRelationField:
+            columnState.toggleExpandedRelationField,
+          isExpandedRelationFieldSelected:
+            columnState.isExpandedRelationFieldSelected,
+        }}
+        searchFilter={{
+          fields: selectedTable.fields,
+          filters: searchFilters,
+          onFiltersChange: handleFiltersChange,
+        }}
+        viewSave={{
+          tableName: selectedTable.name,
+          filters: searchFilters,
+          selectedFields: columnState.selectedFields,
+          selectedRelations: columnState.selectedRelations,
+          expandedRelationFields: columnState.expandedRelationFields,
+        }}
+        onDownloadCsv={handleDownloadCsv}
+        onRefresh={() => tableData.refetch()}
+        loading={tableData.loading}
+        csvDisabled={tableData.data.length === 0}
+      />
 
       {/* Error Display */}
       {tableData.error && (

package/src/component/hooks/use-table-data.ts

@@ -106,7 +106,7 @@ export function useTableData(
     hasNextPage: false,
     endCursor: null,
   });
-  const [cursorHistory, setCursorHistory] = useState<string[]>([]);
+  const [cursorHistory, setCursorHistory] = useState<(string | null)[]>([]);
 
   const client = useMemo(() => createGraphQLClient(appUri), [appUri]);
 
@@ -286,10 +286,8 @@ export function useTableData(
 
   const nextPage = useCallback(() => {
     if (pagination.hasNextPage && pagination.endCursor) {
-      // Store current cursor for back navigation
-      if (pagination.after) {
-        setCursorHistory((prev) => [...prev, pagination.after!]);
-      }
+      // Store current cursor for back navigation (null for first page is valid)
+      setCursorHistory((prev) => [...prev, pagination.after]);
       // Use endCursor from pageInfo for pagination
       setPagination((prev) => ({
         ...prev,
@@ -301,11 +299,11 @@ export function useTableData(
   const previousPage = useCallback(() => {
     if (cursorHistory.length > 0) {
       const newHistory = [...cursorHistory];
-      newHistory.pop();
+      const previousCursor = newHistory.pop();
       setCursorHistory(newHistory);
       setPagination((prev) => ({
         ...prev,
-        after: newHistory.length > 0 ? newHistory[newHistory.length - 1] : null,
+        after: previousCursor ?? null,
       }));
     }
   }, [cursorHistory]);

package/src/component/index.ts

@@ -1,4 +1,6 @@
 export { DataViewer } from "./data-viewer";
 export type { InitialQuery } from "./data-viewer";
+export { DataTableToolbar } from "./data-table-toolbar";
+export type { ActivePanel } from "./data-table-toolbar";
 export { useSavedViews, SavedViewProvider } from "./saved-view-context";
 export type { SavedView, SaveViewInput } from "./saved-view-context";

package/src/component/search-filter.tsx

@@ -31,6 +31,10 @@ interface SearchFilterProps {
   fields: FieldMetadata[];
   filters: SearchFilters;
   onFiltersChange: (filters: SearchFilters) => void;
+  /** Controlled open state */
+  open?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
 }
 
 // Filterable field types
@@ -57,8 +61,14 @@ export function SearchFilterForm({
   fields,
   filters,
   onFiltersChange,
+  open,
+  onOpenChange,
 }: SearchFilterProps) {
-  const [isOpen, setIsOpen] = useState(false);
+  // Use controlled state if provided, otherwise use internal state
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = open !== undefined ? open : internalOpen;
+  const setIsOpen = onOpenChange ?? setInternalOpen;
+
   const [selectedField, setSelectedField] = useState<string>("");
   const [inputValue, setInputValue] = useState<string>("");
   const [booleanValue, setBooleanValue] = useState<boolean>(false);

package/src/test-setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";