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

package/src/component/search-filter.tsx

@@ -1,12 +1,5 @@
 import { useState, useCallback } from "react";
-import {
-  Search,
-  Plus,
-  X,
-  Filter,
-  ChevronDown,
-  ChevronRight,
-} from "lucide-react";
+import { Search, Plus, X, Filter } from "lucide-react";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Checkbox } from "./ui/checkbox";
@@ -18,10 +11,10 @@ import {
   SelectValue,
 } from "./ui/select";
 import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "./ui/collapsible";
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+} from "./ui/dropdown-menu";
 import { Badge } from "./ui/badge";
 import { Label } from "./ui/label";
 import type { FieldMetadata } from "../generator/metadata-generator";
@@ -64,11 +57,6 @@ export function SearchFilterForm({
   open,
   onOpenChange,
 }: SearchFilterProps) {
-  // 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);
@@ -194,14 +182,9 @@ export function SearchFilterForm({
   const activeFilterCount = filters.length;
 
   return (
-    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="relative">
-      <CollapsibleTrigger asChild>
+    <DropdownMenu open={open} onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger asChild>
         <Button variant="outline" size="sm" className="gap-1">
-          {isOpen ? (
-            <ChevronDown className="size-4" />
-          ) : (
-            <ChevronRight className="size-4" />
-          )}
           <Search className="size-4" />
           検索
           {activeFilterCount > 0 && (
@@ -210,120 +193,118 @@ export function SearchFilterForm({
             </Badge>
           )}
         </Button>
-      </CollapsibleTrigger>
+      </DropdownMenuTrigger>
 
-      <CollapsibleContent className="absolute top-full left-0 z-50 mt-2">
-        <div className="bg-background w-96 rounded-md border p-4 shadow-md">
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2 text-sm font-medium">
-                <Filter className="size-4" />
-                検索フィルター
-              </div>
-              {activeFilterCount > 0 && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-auto p-1 text-xs"
-                  onClick={handleClearAll}
-                >
-                  すべてクリア
-                </Button>
-              )}
+      <DropdownMenuContent align="start" className="w-96 p-4">
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2 text-sm font-medium">
+              <Filter className="size-4" />
+              検索フィルター
             </div>
+            {activeFilterCount > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-auto p-1 text-xs"
+                onClick={handleClearAll}
+              >
+                すべてクリア
+              </Button>
+            )}
+          </div>
 
-            {/* Active filters */}
-            {filters.length > 0 && (
-              <div className="space-y-2">
-                <div className="text-muted-foreground text-xs">
-                  適用中のフィルター (AND)
-                </div>
-                <div className="flex flex-wrap gap-1">
-                  {filters.map((filter) => (
-                    <Badge
-                      key={filter.field}
-                      variant="secondary"
-                      className="flex items-center gap-1 pr-1"
+          {/* Active filters */}
+          {filters.length > 0 && (
+            <div className="space-y-2">
+              <div className="text-muted-foreground text-xs">
+                適用中のフィルター (AND)
+              </div>
+              <div className="flex flex-wrap gap-1">
+                {filters.map((filter) => (
+                  <Badge
+                    key={filter.field}
+                    variant="secondary"
+                    className="flex items-center gap-1 pr-1"
+                  >
+                    <span>
+                      {filter.field}=
+                      {typeof filter.value === "boolean"
+                        ? filter.value
+                          ? "true"
+                          : "false"
+                        : filter.value}
+                    </span>
+                    <button
+                      className="text-muted-foreground hover:text-foreground ml-1"
+                      onClick={() => handleRemoveFilter(filter.field)}
                     >
-                      <span>
-                        {filter.field}=
-                        {typeof filter.value === "boolean"
-                          ? filter.value
-                            ? "true"
-                            : "false"
-                          : filter.value}
-                      </span>
-                      <button
-                        className="text-muted-foreground hover:text-foreground ml-1"
-                        onClick={() => handleRemoveFilter(filter.field)}
-                      >
-                        <X className="size-3" />
-                      </button>
-                    </Badge>
-                  ))}
-                </div>
+                      <X className="size-3" />
+                    </button>
+                  </Badge>
+                ))}
               </div>
-            )}
+            </div>
+          )}
 
-            {/* Add new filter */}
-            {filterableFields.length > 0 && (
-              <div className="space-y-3">
-                <div className="text-muted-foreground text-xs">
-                  フィルターを追加
-                </div>
+          {/* Add new filter */}
+          {filterableFields.length > 0 && (
+            <div className="space-y-3">
+              <div className="text-muted-foreground text-xs">
+                フィルターを追加
+              </div>
 
-                {/* Field selector */}
-                <Select value={selectedField} onValueChange={setSelectedField}>
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder="フィールドを選択" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {filterableFields.map((field) => (
-                      <SelectItem key={field.name} value={field.name}>
-                        {field.name}{" "}
-                        <span className="text-muted-foreground">
-                          ({field.type})
-                        </span>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+              {/* Field selector */}
+              <Select value={selectedField} onValueChange={setSelectedField}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="フィールドを選択" />
+                </SelectTrigger>
+                <SelectContent>
+                  {filterableFields.map((field) => (
+                    <SelectItem key={field.name} value={field.name}>
+                      {field.name}{" "}
+                      <span className="text-muted-foreground">
+                        ({field.type})
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
 
-                {/* Value input - changes based on field type */}
-                {selectedField && (
-                  <div className="space-y-2">
-                    {renderFilterInput()}
-                    <Button
-                      size="sm"
-                      onClick={handleAddFilter}
-                      disabled={
-                        selectedFieldMetadata?.type !== "boolean" &&
-                        !inputValue.trim()
-                      }
-                      className="w-full"
-                    >
-                      <Plus className="mr-1 size-3" />
-                      追加
-                    </Button>
-                  </div>
-                )}
-              </div>
-            )}
+              {/* Value input - changes based on field type */}
+              {selectedField && (
+                <div className="space-y-2">
+                  {renderFilterInput()}
+                  <Button
+                    size="sm"
+                    onClick={handleAddFilter}
+                    disabled={
+                      selectedFieldMetadata?.type !== "boolean" &&
+                      !inputValue.trim()
+                    }
+                    className="w-full"
+                  >
+                    <Plus className="mr-1 size-3" />
+                    追加
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
 
-            {filterableFields.length === 0 && filters.length === 0 && (
-              <div className="text-muted-foreground py-2 text-center text-sm">
-                フィルター可能なフィールドがありません
-              </div>
-            )}
+          {filterableFields.length === 0 && filters.length === 0 && (
+            <div className="text-muted-foreground py-2 text-center text-sm">
+              フィルター可能なフィールドがありません
+            </div>
+          )}
 
-            {filterableFields.length === 0 && filters.length > 0 && (
-              <div className="text-muted-foreground py-2 text-center text-sm">
-                すべてのフィールドにフィルターが適用されています
-              </div>
-            )}
-          </div>
+          {filterableFields.length === 0 && filters.length > 0 && (
+            <div className="text-muted-foreground py-2 text-center text-sm">
+              すべてのフィールドにフィルターが適用されています
+            </div>
+          )}
         </div>
-      </CollapsibleContent>
-    </Collapsible>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }

package/src/component/single-record-tab-content.test.tsx

@@ -0,0 +1,350 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SingleRecordTabContent } from "./single-record-tab-content";
+import type {
+  TableMetadata,
+  TableMetadataMap,
+} from "../generator/metadata-generator";
+import type { SingleRecordDataFetcher } from "./hooks/use-single-record-data";
+
+// Mock table metadata for "task" table
+const mockTaskTable: TableMetadata = {
+  name: "task",
+  pluralForm: "tasks",
+  description: "タスク",
+  readAllowedRoles: ["admin"],
+  fields: [
+    { name: "id", type: "uuid", required: true },
+    { name: "title", type: "string", required: true, description: "タイトル" },
+    { name: "description", type: "string", required: false },
+    { name: "status", type: "enum", required: true },
+    { name: "userId", type: "uuid", required: true },
+    { name: "createdAt", type: "datetime", required: true },
+  ],
+  relations: [
+    {
+      fieldName: "comments",
+      targetTable: "comment",
+      relationType: "oneToMany",
+      foreignKeyField: "taskId",
+    },
+    {
+      fieldName: "user",
+      targetTable: "user",
+      relationType: "manyToOne",
+      foreignKeyField: "userId",
+    },
+  ],
+};
+
+// Mock table metadata for "comment" table
+const mockCommentTable: TableMetadata = {
+  name: "comment",
+  pluralForm: "comments",
+  description: "コメント",
+  readAllowedRoles: ["admin"],
+  fields: [
+    { name: "id", type: "uuid", required: true },
+    { name: "content", type: "string", required: true },
+    { name: "taskId", type: "uuid", required: true },
+    { name: "createdAt", type: "datetime", required: true },
+  ],
+};
+
+// Mock table metadata for "user" table
+const mockUserTable: TableMetadata = {
+  name: "user",
+  pluralForm: "users",
+  description: "ユーザー",
+  readAllowedRoles: ["admin"],
+  fields: [
+    { name: "id", type: "uuid", required: true },
+    { name: "name", type: "string", required: true },
+    { name: "email", type: "string", required: true },
+  ],
+};
+
+const mockTableMetadataMap: TableMetadataMap = {
+  task: mockTaskTable,
+  comment: mockCommentTable,
+  user: mockUserTable,
+};
+
+// Mock record data
+const mockRecord = {
+  id: "task-123-456-789",
+  title: "Test Task",
+  description: "This is a test task",
+  status: "active",
+  userId: "user-123-456-789",
+  createdAt: "2024-01-01T00:00:00Z",
+};
+
+// Mock comment data
+const mockComments = [
+  {
+    id: "comment-1",
+    content: "First comment",
+    createdAt: "2024-01-02T00:00:00Z",
+  },
+  {
+    id: "comment-2",
+    content: "Second comment",
+    createdAt: "2024-01-03T00:00:00Z",
+  },
+];
+
+// Mock user data
+const mockUser = {
+  id: "user-123-456-789",
+  name: "Test User",
+  email: "test@example.com",
+};
+
+describe("SingleRecordTabContent", () => {
+  let mockFetcher: SingleRecordDataFetcher;
+
+  beforeEach(() => {
+    mockFetcher = {
+      fetchSingleRecord: vi.fn().mockResolvedValue(mockRecord),
+      fetchOneToManyRelation: vi.fn().mockResolvedValue({
+        data: mockComments,
+        hasNextPage: false,
+        endCursor: null,
+      }),
+      fetchManyToOneRelation: vi.fn().mockResolvedValue(mockUser),
+    };
+  });
+
+  describe("基本的な表示", () => {
+    it("ローディング状態が表示される", () => {
+      // Never resolve to keep loading state
+      mockFetcher.fetchSingleRecord = vi
+        .fn()
+        .mockImplementation(() => new Promise(() => {}));
+
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      expect(screen.getByText("読み込み中...")).toBeInTheDocument();
+    });
+
+    it("レコードデータが正しく表示される", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("Test Task")).toBeInTheDocument();
+      });
+
+      expect(screen.getByText("This is a test task")).toBeInTheDocument();
+      expect(screen.getByText("active")).toBeInTheDocument();
+    });
+
+    it("fetchSingleRecordが正しいパラメータで呼ばれる", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockFetcher.fetchSingleRecord).toHaveBeenCalledWith(
+          "task",
+          expect.arrayContaining([
+            "id",
+            "title",
+            "description",
+            "status",
+            "userId",
+            "createdAt",
+          ]),
+          "task-123-456-789",
+        );
+      });
+    });
+  });
+
+  describe("エラーハンドリング", () => {
+    it("エラーメッセージが表示される", async () => {
+      mockFetcher.fetchSingleRecord = vi
+        .fn()
+        .mockRejectedValue(new Error("Network error"));
+
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("データの取得に失敗しました: Network error"),
+        ).toBeInTheDocument();
+      });
+    });
+
+    it("レコードが見つからない場合、メッセージが表示される", async () => {
+      mockFetcher.fetchSingleRecord = vi.fn().mockResolvedValue(null);
+
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="nonexistent-id"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("レコードが見つかりません"),
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("リレーションデータの取得", () => {
+    it("oneToMany関係のデータがフェッチされる", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockFetcher.fetchOneToManyRelation).toHaveBeenCalledWith(
+          "comment",
+          "comments",
+          "taskId",
+          expect.arrayContaining(["id", "content"]),
+          "task-123-456-789",
+          10,
+          null,
+        );
+      });
+    });
+
+    it("manyToOne関係のデータがフェッチされる", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockFetcher.fetchManyToOneRelation).toHaveBeenCalledWith(
+          "user",
+          expect.arrayContaining(["id", "name", "email"]),
+          "user-123-456-789",
+        );
+      });
+    });
+
+    it("関連データが正しく表示される", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("First comment")).toBeInTheDocument();
+        expect(screen.getByText("Second comment")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("更新ボタン", () => {
+    it("更新ボタンをクリックするとデータが再取得される", async () => {
+      const user = userEvent.setup();
+
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("Test Task")).toBeInTheDocument();
+      });
+
+      // Clear call counts
+      vi.clearAllMocks();
+
+      // Click refresh button
+      await user.click(screen.getByRole("button", { name: /更新/ }));
+
+      await waitFor(() => {
+        expect(mockFetcher.fetchSingleRecord).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("無限ループ防止", () => {
+    it("fetchRelationDataが無限に呼ばれない", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      // Wait for initial render
+      await waitFor(() => {
+        expect(screen.getByText("Test Task")).toBeInTheDocument();
+      });
+
+      // Wait a bit to ensure no additional calls are made
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Should only be called once for the initial fetch
+      expect(mockFetcher.fetchSingleRecord).toHaveBeenCalledTimes(1);
+      expect(mockFetcher.fetchOneToManyRelation).toHaveBeenCalledTimes(1);
+      expect(mockFetcher.fetchManyToOneRelation).toHaveBeenCalledTimes(1);
+    });
+  });
+});