@izumisy-tailor/tailor-data-viewer 0.1.4 → 0.1.5

package/src/component/data-viewer.tsx

@@ -1,16 +1,15 @@
 import { useState, useCallback } from "react";
-import { Plus, X } from "lucide-react";
-import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
-import { Button } from "../ui/button";
-import type { TableMetadata, TableMetadataMap } from "../types/table-metadata";
-import { useAccessibleTables } from "./hooks/use-accessible-tables";
+import { Plus, X, Loader2 } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { Button } from "./ui/button";
+import type { TableMetadata, TableMetadataMap } from "../generator/metadata-generator";
+import { useTableAccessCheck } from "./hooks/use-table-access-check";
 import { DataViewTabContent } from "./data-view-tab-content";
 import { SingleRecordTabContent } from "./single-record-tab-content";
 import { useSavedViews, type SavedView } from "./saved-view-context";
 
 interface DataViewerProps {
   tableMetadata: TableMetadataMap;
-  userRoles: string[];
   appUri: string;
   /** Initial view ID to load on mount */
   initialViewId?: string;
@@ -52,12 +51,15 @@ function generateTabId(): string {
  */
 export function DataViewer({
   tableMetadata,
-  userRoles,
   appUri,
   initialViewId,
 }: DataViewerProps) {
-  // Get tables accessible to the current user
-  const accessibleTables = useAccessibleTables(tableMetadata, userRoles);
+  // Get tables accessible to the current user via runtime permission check
+  const allTables = Object.values(tableMetadata);
+  const { accessibleTables, isLoading, error } = useTableAccessCheck(
+    allTables,
+    appUri,
+  );
   const { getViewById } = useSavedViews();
 
   // Tab management - initialize with saved view if provided
@@ -186,6 +188,33 @@ export function DataViewer({
     [tableMetadata],
   );
 
+  // Loading state during permission check
+  if (isLoading) {
+    return (
+      <Card>
+        <CardContent className="py-8">
+          <div className="flex flex-col items-center gap-2 text-muted-foreground">
+            <Loader2 className="size-6 animate-spin" />
+            <span>テーブルへのアクセス権限を確認中...</span>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <Card>
+        <CardContent className="py-8">
+          <div className="text-destructive text-center">
+            アクセス権限の確認中にエラーが発生しました: {error}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
   if (accessibleTables.length === 0) {
     return (
       <Card>

package/src/component/hooks/use-accessible-tables.ts

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import type {
   TableMetadata,
   TableMetadataMap,
-} from "../../types/table-metadata";
+} from "../../generator/metadata-generator";
 
 /**
  * Filter tables based on user's roles

package/src/component/hooks/use-column-state.ts

@@ -3,7 +3,7 @@ import type {
   FieldMetadata,
   RelationMetadata,
   ExpandedRelationFields,
-} from "../../types/table-metadata";
+} from "../../generator/metadata-generator";
 
 export interface ColumnState {
   selectedFields: string[];

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

@@ -3,7 +3,7 @@ import type {
   TableMetadata,
   RelationMetadata,
   TableMetadataMap,
-} from "../../types/table-metadata";
+} from "../../generator/metadata-generator";
 import {
   createGraphQLClient,
   executeQuery,

package/src/component/hooks/use-table-access-check.ts

@@ -0,0 +1,103 @@
+import { useState, useEffect } from "react";
+import { GraphQLClient } from "graphql-request";
+import type { TableMetadata } from "../../generator/metadata-generator";
+
+export interface TableAccessCheckResult {
+  /** Tables that the user has access to */
+  accessibleTables: TableMetadata[];
+  /** Whether the check is in progress */
+  isLoading: boolean;
+  /** Error message if the check failed entirely */
+  error: string | null;
+}
+
+/**
+ * Check which tables the user has access to by executing aggregate queries
+ * Uses server-side gqlPermission as the source of truth
+ */
+export function useTableAccessCheck(
+  tables: TableMetadata[],
+  appUri: string,
+): TableAccessCheckResult {
+  const [accessibleTables, setAccessibleTables] = useState<TableMetadata[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function checkAccess() {
+      setIsLoading(true);
+      setError(null);
+
+      const client = new GraphQLClient(`${appUri}/query`, {
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Tailor-Nonce": crypto.randomUUID(),
+        },
+      });
+
+      const results = await Promise.allSettled(
+        tables.map(async (table) => {
+          // Execute a lightweight aggregate query to check access
+          const query = `query CheckAccess { ${table.pluralForm}(query: {}) { total } }`;
+          await client.request(query);
+          return table;
+        }),
+      );
+
+      if (cancelled) return;
+
+      // Filter to only fulfilled results (tables with access)
+      const accessible = results
+        .filter(
+          (r): r is PromiseFulfilledResult<TableMetadata> =>
+            r.status === "fulfilled",
+        )
+        .map((r) => r.value);
+
+      setAccessibleTables(accessible);
+      setIsLoading(false);
+    }
+
+    checkAccess().catch((err) => {
+      if (!cancelled) {
+        setError(
+          err instanceof Error ? err.message : "Failed to check table access",
+        );
+        setIsLoading(false);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [tables, appUri]);
+
+  return { accessibleTables, isLoading, error };
+}
+
+/**
+ * Standalone function to check table access (non-hook version)
+ * Useful for one-time checks or server-side usage
+ */
+export async function checkTableAccess(
+  client: GraphQLClient,
+  tables: TableMetadata[],
+): Promise<TableMetadata[]> {
+  const results = await Promise.allSettled(
+    tables.map(async (table) => {
+      const query = `query CheckAccess { ${table.pluralForm}(query: {}) { total } }`;
+      await client.request(query);
+      return table;
+    }),
+  );
+
+  return results
+    .filter(
+      (r): r is PromiseFulfilledResult<TableMetadata> =>
+        r.status === "fulfilled",
+    )
+    .map((r) => r.value);
+}

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

@@ -3,7 +3,7 @@ import type {
   TableMetadata,
   TableMetadataMap,
   ExpandedRelationFields,
-} from "../../types/table-metadata";
+} from "../../generator/metadata-generator";
 import {
   createGraphQLClient,
   executeQuery,

package/src/component/index.ts

@@ -9,7 +9,10 @@ export { SearchFilterForm } from "./search-filter";
 export { ViewSave } from "./view-save-load";
 export { useTableData } from "./hooks/use-table-data";
 export { useColumnState } from "./hooks/use-column-state";
-export { useAccessibleTables } from "./hooks/use-accessible-tables";
+export {
+  useTableAccessCheck,
+  checkTableAccess,
+} from "./hooks/use-table-access-check";
 export { useSavedViews, SavedViewProvider } from "./saved-view-context";
 export type { SavedView, SaveViewInput } from "./saved-view-context";
 export type { SearchFilter, SearchFilters } from "./types";

package/src/component/pagination.tsx

@@ -1,5 +1,5 @@
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { Button } from "../ui/button";
+import { Button } from "./ui/button";
 import type { PaginationState } from "./hooks/use-table-data";
 
 interface PaginationProps {

package/src/component/relation-content.tsx

@@ -6,14 +6,14 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "../ui/table";
-import { Button } from "../ui/button";
-import { Badge } from "../ui/badge";
+} from "./ui/table";
+import { Button } from "./ui/button";
+import { Badge } from "./ui/badge";
 import type {
   TableMetadata,
   RelationMetadata,
   FieldMetadata,
-} from "../types/table-metadata";
+} from "../generator/metadata-generator";
 import { formatFieldValue } from "../utils/query-builder";
 import type { RelationDataResult } from "./hooks/use-relation-data";
 

package/src/component/saved-view-context.tsx

@@ -3,13 +3,19 @@ import {
   use,
   useState,
   useCallback,
+  useEffect,
   type ReactNode,
 } from "react";
-import type { ExpandedRelationFields } from "../types/table-metadata";
+import type { ExpandedRelationFields } from "../generator/metadata-generator";
 import type { SearchFilters } from "./types";
+import type {
+  SavedViewStore,
+  SavedView as StoreSavedView,
+  SavedViewInput as StoreSavedViewInput,
+} from "../store/types";
 
 /**
- * Saved view configuration
+ * Saved view configuration (UI format - maintains backward compatibility)
  */
 export interface SavedView {
   /** Unique identifier */
@@ -31,6 +37,8 @@ export interface SavedView {
 }
 
 export interface SaveViewInput {
+  /** ID for updating existing view */
+  id?: string;
   name: string;
   tableName: string;
   filters: SearchFilters;
@@ -41,70 +49,207 @@ export interface SaveViewInput {
 
 interface SavedViewContextValue {
   views: SavedView[];
-  saveView: (input: SaveViewInput) => SavedView;
-  deleteView: (id: string) => boolean;
-  renameView: (id: string, newName: string) => boolean;
+  isLoading: boolean;
+  saveView: (input: SaveViewInput) => Promise<SavedView>;
+  deleteView: (id: string) => Promise<boolean>;
+  renameView: (id: string, newName: string) => Promise<boolean>;
   getViewById: (id: string) => SavedView | undefined;
   getViewsByTable: (tableName: string) => SavedView[];
+  refreshViews: () => Promise<void>;
 }
 
 const SavedViewContext = createContext<SavedViewContextValue | null>(null);
 
+interface SavedViewProviderProps {
+  children: ReactNode;
+  /** Store implementation for persisting views */
+  store?: SavedViewStore;
+}
+
+/**
+ * Convert store format to UI format
+ */
+function fromStoreView(storeView: StoreSavedView): SavedView {
+  return {
+    id: storeView.id,
+    name: storeView.name,
+    tableName: storeView.tableName,
+    filters: storeView.filters,
+    selectedFields: storeView.columns,
+    selectedRelations: storeView.selectedRelations,
+    expandedRelationFields: storeView.expandedRelationFields,
+    createdAt: storeView.createdAt,
+  };
+}
+
+/**
+ * Convert UI format to store format
+ */
+function toStoreInput(input: SaveViewInput): StoreSavedViewInput {
+  return {
+    id: input.id,
+    name: input.name,
+    tableName: input.tableName,
+    columns: input.selectedFields,
+    filters: input.filters,
+    sortOrder: [],
+    selectedRelations: input.selectedRelations,
+    expandedRelationFields: input.expandedRelationFields,
+  };
+}
+
 let idCounter = 0;
 function generateId(): string {
   return `saved-view-${++idCounter}`;
 }
 
-interface SavedViewProviderProps {
-  children: ReactNode;
-}
-
-export function SavedViewProvider({ children }: SavedViewProviderProps) {
+export function SavedViewProvider({ children, store }: SavedViewProviderProps) {
   const [views, setViews] = useState<SavedView[]>([]);
+  const [isLoading, setIsLoading] = useState(!!store);
+
+  // Load views from store on mount
+  useEffect(() => {
+    if (!store) return;
+
+    let cancelled = false;
+    const currentStore = store; // Capture for closure
+
+    async function loadViews() {
+      setIsLoading(true);
+      try {
+        const storeViews = await currentStore.listViews();
+        if (!cancelled) {
+          setViews(storeViews.map(fromStoreView));
+        }
+      } catch (error) {
+        console.error("Failed to load views:", error);
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    }
+
+    loadViews();
 
-  const saveView = useCallback((input: SaveViewInput): SavedView => {
-    const newView: SavedView = {
-      id: generateId(),
-      name: input.name,
-      tableName: input.tableName,
-      filters: [...input.filters],
-      selectedFields: [...input.selectedFields],
-      selectedRelations: [...input.selectedRelations],
-      expandedRelationFields: { ...input.expandedRelationFields },
-      createdAt: new Date(),
+    return () => {
+      cancelled = true;
     };
-    setViews((prev) => [newView, ...prev]);
-    return newView;
-  }, []);
-
-  const deleteView = useCallback((id: string): boolean => {
-    let deleted = false;
-    setViews((prev) => {
-      const newViews = prev.filter((v) => {
-        if (v.id === id) {
-          deleted = true;
+  }, [store]);
+
+  const refreshViews = useCallback(async () => {
+    if (!store) return;
+
+    setIsLoading(true);
+    try {
+      const storeViews = await store.listViews();
+      setViews(storeViews.map(fromStoreView));
+    } catch (error) {
+      console.error("Failed to refresh views:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [store]);
+
+  const saveView = useCallback(
+    async (input: SaveViewInput): Promise<SavedView> => {
+      if (store) {
+        const saved = await store.saveView(toStoreInput(input));
+        const view = fromStoreView(saved);
+        setViews((prev) => {
+          const existing = prev.findIndex((v) => v.id === view.id);
+          if (existing >= 0) {
+            const newViews = [...prev];
+            newViews[existing] = view;
+            return newViews;
+          }
+          return [view, ...prev];
+        });
+        return view;
+      }
+
+      // In-memory fallback
+      const newView: SavedView = {
+        id: input.id ?? generateId(),
+        name: input.name,
+        tableName: input.tableName,
+        filters: [...input.filters],
+        selectedFields: [...input.selectedFields],
+        selectedRelations: [...input.selectedRelations],
+        expandedRelationFields: { ...input.expandedRelationFields },
+        createdAt: new Date(),
+      };
+      setViews((prev) => {
+        if (input.id) {
+          return prev.map((v) => (v.id === input.id ? newView : v));
+        }
+        return [newView, ...prev];
+      });
+      return newView;
+    },
+    [store],
+  );
+
+  const deleteView = useCallback(
+    async (id: string): Promise<boolean> => {
+      if (store) {
+        try {
+          await store.deleteView(id);
+          setViews((prev) => prev.filter((v) => v.id !== id));
+          return true;
+        } catch {
           return false;
         }
-        return true;
+      }
+
+      // In-memory fallback
+      let deleted = false;
+      setViews((prev) => {
+        const newViews = prev.filter((v) => {
+          if (v.id === id) {
+            deleted = true;
+            return false;
+          }
+          return true;
+        });
+        return newViews;
       });
-      return newViews;
-    });
-    return deleted;
-  }, []);
-
-  const renameView = useCallback((id: string, newName: string): boolean => {
-    let renamed = false;
-    setViews((prev) =>
-      prev.map((v) => {
-        if (v.id === id) {
-          renamed = true;
-          return { ...v, name: newName };
+      return deleted;
+    },
+    [store],
+  );
+
+  const renameView = useCallback(
+    async (id: string, newName: string): Promise<boolean> => {
+      const view = views.find((v) => v.id === id);
+      if (!view) return false;
+
+      if (store) {
+        try {
+          await store.saveView(
+            toStoreInput({
+              ...view,
+              id,
+              name: newName,
+            }),
+          );
+          setViews((prev) =>
+            prev.map((v) => (v.id === id ? { ...v, name: newName } : v)),
+          );
+          return true;
+        } catch {
+          return false;
         }
-        return v;
-      }),
-    );
-    return renamed;
-  }, []);
+      }
+
+      // In-memory fallback
+      setViews((prev) =>
+        prev.map((v) => (v.id === id ? { ...v, name: newName } : v)),
+      );
+      return true;
+    },
+    [store, views],
+  );
 
   const getViewById = useCallback(
     (id: string): SavedView | undefined => {
@@ -124,11 +269,13 @@ export function SavedViewProvider({ children }: SavedViewProviderProps) {
     <SavedViewContext
       value={{
         views,
+        isLoading,
         saveView,
         deleteView,
         renameView,
         getViewById,
         getViewsByTable,
+        refreshViews,
       }}
     >
       {children}

package/src/component/search-filter.tsx

@@ -7,24 +7,24 @@ import {
   ChevronDown,
   ChevronRight,
 } from "lucide-react";
-import { Button } from "../ui/button";
-import { Input } from "../ui/input";
-import { Checkbox } from "../ui/checkbox";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Checkbox } from "./ui/checkbox";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../ui/select";
+} from "./ui/select";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "../ui/collapsible";
-import { Badge } from "../ui/badge";
-import { Label } from "../ui/label";
-import type { FieldMetadata } from "../types/table-metadata";
+} from "./ui/collapsible";
+import { Badge } from "./ui/badge";
+import { Label } from "./ui/label";
+import type { FieldMetadata } from "../generator/metadata-generator";
 import type { SearchFilter, SearchFilters } from "./types";
 
 interface SearchFilterProps {

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

@@ -1,8 +1,8 @@
 import { useState, useCallback, useMemo, useEffect } from "react";
 import { RefreshCw, Loader2, ChevronDown, ExternalLink } from "lucide-react";
-import { Alert, AlertDescription } from "../ui/alert";
-import { Button } from "../ui/button";
-import { Badge } from "../ui/badge";
+import { Alert, AlertDescription } from "./ui/alert";
+import { Button } from "./ui/button";
+import { Badge } from "./ui/badge";
 import {
   Table,
   TableBody,
@@ -10,12 +10,12 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "../ui/table";
+} from "./ui/table";
 import type {
   TableMetadata,
   TableMetadataMap,
   FieldMetadata,
-} from "../types/table-metadata";
+} from "../generator/metadata-generator";
 import { createGraphQLClient, executeQuery } from "../providers/graphql-client";
 import { formatFieldValue } from "../utils/query-builder";
 import { ColumnSelector } from "./column-selector";

package/src/component/table-selector.tsx

@@ -1,12 +1,12 @@
 import { Database } from "lucide-react";
-import type { TableMetadata } from "../types/table-metadata";
+import type { TableMetadata } from "../generator/metadata-generator";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../ui/select";
+} from "./ui/select";
 
 interface TableSelectorProps {
   tables: TableMetadata[];

package/src/component/types.ts

@@ -1,4 +1,4 @@
-import type { FieldType } from "../types/table-metadata";
+import type { FieldType } from "../generator/metadata-generator";
 
 /**
  * Search filter condition for a single field

package/src/component/view-save-load.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback } from "react";
 import { Save, Filter, Columns } from "lucide-react";
-import { Button } from "../ui/button";
-import { Input } from "../ui/input";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
 import {
   Dialog,
   DialogContent,
@@ -10,8 +10,8 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "../ui/dialog";
-import type { ExpandedRelationFields } from "../types/table-metadata";
+} from "./ui/dialog";
+import type { ExpandedRelationFields } from "../generator/metadata-generator";
 import { useSavedViews, type SaveViewInput } from "./saved-view-context";
 import type { SearchFilters } from "./types";
 

package/src/generator/metadata-generator.ts

@@ -68,6 +68,13 @@ export interface TableMetadata {
  */
 export type TableMetadataMap = Record<string, TableMetadata>;
 
+/**
+ * Expanded relation fields configuration
+ * Key: relation field name (e.g., "task")
+ * Value: array of selected field names from the related table (e.g., ["name", "status"])
+ */
+export type ExpandedRelationFields = Record<string, string[]>;
+
 /**
  * Intermediate type for processed table data
  */