@izumisy-tailor/tailor-data-viewer 0.1.8 → 0.1.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.1.8",
+  "version": "0.1.10",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [

package/src/component/data-viewer.tsx

@@ -1,9 +1,11 @@
-import { useState, useCallback } from "react";
-import { Plus, X, Loader2 } from "lucide-react";
+import { useState, useCallback, useEffect, useRef } 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 "../generator/metadata-generator";
-import { useTableAccessCheck } from "./hooks/use-table-access-check";
+import type {
+  TableMetadata,
+  TableMetadataMap,
+} from "../generator/metadata-generator";
 import { DataViewTabContent } from "./data-view-tab-content";
 import { SingleRecordTabContent } from "./single-record-tab-content";
 import { useSavedViews, type SavedView } from "./saved-view-context";
@@ -54,33 +56,14 @@ export function DataViewer({
   appUri,
   initialViewId,
 }: DataViewerProps) {
-  // 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();
+  const { getViewById, isLoading } = useSavedViews();
+
+  // Track if we've already initialized from the saved view
+  const initializedFromViewRef = useRef(false);
 
-  // Tab management - initialize with saved view if provided
+  // Tab management - start with empty tab, will apply saved view after loading
   const [tabs, setTabs] = useState<Tab[]>(() => {
-    if (initialViewId) {
-      const view = getViewById(initialViewId);
-      if (view) {
-        const table = tableMetadata[view.tableName];
-        if (table) {
-          return [
-            {
-              id: generateTabId(),
-              label: view.name,
-              table,
-              isLocked: true,
-              initialView: view,
-            },
-          ];
-        }
-      }
-    }
     return [
       {
         id: generateTabId(),
@@ -92,6 +75,31 @@ export function DataViewer({
   });
   const [activeTabId, setActiveTabId] = useState<string>(tabs[0].id);
 
+  // Apply saved view after views are loaded from store
+  useEffect(() => {
+    // Skip if no initialViewId, already initialized, or still loading
+    if (!initialViewId || initializedFromViewRef.current || isLoading) {
+      return;
+    }
+
+    const view = getViewById(initialViewId);
+    if (view) {
+      const table = tableMetadata[view.tableName];
+      if (table) {
+        initializedFromViewRef.current = true;
+        const newTab: Tab = {
+          id: generateTabId(),
+          label: view.name,
+          table,
+          isLocked: true,
+          initialView: view,
+        };
+        setTabs([newTab]);
+        setActiveTabId(newTab.id);
+      }
+    }
+  }, [initialViewId, isLoading, getViewById, tableMetadata]);
+
   const handleAddTab = useCallback(() => {
     const newTab: Tab = {
       id: generateTabId(),
@@ -188,45 +196,6 @@ 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>
-        <CardContent className="py-8">
-          <div className="text-muted-foreground text-center">
-            アクセス可能なテーブルがありません
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
   return (
     <Card>
       <CardHeader className="pb-2">
@@ -289,7 +258,7 @@ export function DataViewer({
               />
             ) : (
               <DataViewTabContent
-                tables={accessibleTables}
+                tables={allTables}
                 appUri={appUri}
                 initialTable={tab.table ?? undefined}
                 onTableConfirm={(table) => handleTableConfirm(tab.id, table)}

package/src/component/index.ts

@@ -9,10 +9,6 @@ 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 {
-  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/hooks/use-accessible-tables.ts

@@ -1,22 +0,0 @@
-import { useMemo } from "react";
-import type {
-  TableMetadata,
-  TableMetadataMap,
-} from "../../generator/metadata-generator";
-
-/**
- * Filter tables based on user's roles
- * Returns only tables the user has read access to
- */
-export function useAccessibleTables(
-  tableMetadata: TableMetadataMap,
-  userRoles: string[],
-): TableMetadata[] {
-  return useMemo(() => {
-    return Object.values(tableMetadata).filter((table) =>
-      table.readAllowedRoles.some((role) =>
-        userRoles.map((r) => r.toUpperCase()).includes(role.toUpperCase()),
-      ),
-    );
-  }, [tableMetadata, userRoles]);
-}

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

@@ -1,108 +0,0 @@
-import { useState, useEffect, useMemo } 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);
-
-  // Memoize tables to prevent infinite loops
-  // when the parent component passes a new array reference on each render
-  const tableKey = tables.map((t) => t.name).join(",");
-  const stableTables = useMemo(() => tables, [tableKey]);
-
-  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(
-        stableTables.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;
-    };
-  }, [stableTables, 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);
-}