@spaceinvoices/react-ui 0.4.8 → 0.4.10

package/src/components/request-logs/request-log-list-table.tsx

@@ -1,14 +1,21 @@
 "use client";
 
+import { getClientHeaders } from "@spaceinvoices/js-sdk";
 import { formatDistanceToNow } from "date-fns";
 import { useCallback, useMemo } from "react";
+import { Label } from "@/ui/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui/components/ui/select";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/ui/components/ui/sheet";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
 import { AUTH_COOKIES } from "@/ui/lib/auth";
 import { getCookie } from "@/ui/lib/browser-cookies";
+import { getDateFnsLocale } from "@/ui/lib/date-fns-locale";
+import { createTranslation } from "@/ui/lib/translation";
 import { cn } from "@/ui/lib/utils";
 import { DataTable } from "../table/data-table";
+import { withTableTranslations } from "../table/locales";
 import type { Column, FilterConfig, ListTableProps, TableQueryParams, TableQueryResponse } from "../table/types";
+import translations from "./locales";
 import { RequestLogDetail } from "./request-log-detail";
 
 // Request log response type (internal endpoint, not in SDK)
@@ -22,6 +29,7 @@ export interface RequestLogResponse {
   resource_type: string | null;
   resource_id: string | null;
   action: string | null;
+  client_name: string | null;
   req_body: Record<string, unknown> | null;
   res_body: Record<string, unknown> | null;
   headers: Record<string, unknown> | null;
@@ -38,6 +46,7 @@ const getApiBaseUrl = () => {
 };
 
 export const REQUEST_LOGS_CACHE_KEY = "request-logs";
+const mergedTranslations = withTableTranslations(translations);
 
 const METHOD_COLORS: Record<string, string> = {
   GET: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
@@ -82,6 +91,10 @@ type RequestLogListTableProps = ListTableProps<RequestLogResponse> & {
   selectedLog?: RequestLogResponse | null;
   /** Callback when a log is selected */
   onSelectLog?: (log: RequestLogResponse | null) => void;
+  /** Translation function */
+  t?: (key: string) => string;
+  /** Locale used for relative date formatting */
+  locale?: string;
 };
 
 export function RequestLogListTable({
@@ -92,7 +105,11 @@ export function RequestLogListTable({
   showEntityColumn = false,
   selectedLog,
   onSelectLog,
+  t = (key) => key,
+  locale,
 }: RequestLogListTableProps) {
+  const translate = createTranslation({ t, locale, translations: mergedTranslations });
+
   // Custom fetch function that handles both entity-scoped and account-scoped queries
   // Don't use useTableFetch since we need special handling for environment
   const handleFetch = useCallback(
@@ -124,6 +141,7 @@ export function RequestLogListTable({
 
       // HTTP status code filter
       if (params.filter_http_status) queryParamsUrl.set("status", params.filter_http_status);
+      if (params.filter_client_name) queryParamsUrl.set("client_name", params.filter_client_name);
 
       // Date filters
       if (params.filter_date_from) queryParamsUrl.set("date_from", params.filter_date_from);
@@ -133,6 +151,7 @@ export function RequestLogListTable({
       const response = await fetch(`${apiBaseUrl}/request-logs?${queryParamsUrl.toString()}`, {
         headers: {
           Authorization: `Bearer ${token}`,
+          ...getClientHeaders("ui"),
           "Content-Type": "application/json",
         },
       });
@@ -147,6 +166,7 @@ export function RequestLogListTable({
   );
 
   const columns: Column<RequestLogResponse>[] = useMemo(() => {
+    const dateLocale = getDateFnsLocale(locale);
     const cols: Column<RequestLogResponse>[] = [
       {
         id: "status_dot",
@@ -156,19 +176,19 @@ export function RequestLogListTable({
       },
       {
         id: "res_status",
-        header: "Status",
+        header: translate("Status"),
         className: "w-16",
         cell: (log) => <span className="font-mono text-muted-foreground text-sm">{log.res_status || "—"}</span>,
       },
       {
         id: "method",
-        header: "Method",
+        header: translate("Method"),
         className: "w-20",
         cell: (log) => <MethodBadge method={log.method} />,
       },
       {
         id: "path",
-        header: "Path",
+        header: translate("Path"),
         cell: (log) => <span className="truncate font-mono text-sm">{log.path}</span>,
       },
     ];
@@ -176,7 +196,7 @@ export function RequestLogListTable({
     if (showEntityColumn) {
       cols.push({
         id: "entity_id",
-        header: "Entity",
+        header: translate("Entity"),
         className: "hidden md:table-cell",
         cell: (log) => (
           <Tooltip>
@@ -192,14 +212,14 @@ export function RequestLogListTable({
                 {log.entity_id}
               </button>
             </TooltipTrigger>
-            <TooltipContent>Copy</TooltipContent>
+            <TooltipContent>{translate("Copy")}</TooltipContent>
           </Tooltip>
         ),
       });
     } else {
       cols.push({
         id: "resource_id",
-        header: "Resource",
+        header: translate("Resource"),
         className: "hidden sm:table-cell",
         cell: (log) => <span className="text-muted-foreground text-xs">{log.resource_id || "—"}</span>,
       });
@@ -207,20 +227,20 @@ export function RequestLogListTable({
 
     cols.push({
       id: "created_at",
-      header: "Time",
+      header: translate("Time"),
       align: "right",
       cell: (log) => (
         <span className="text-muted-foreground text-xs">
-          {formatDistanceToNow(new Date(log.created_at), { addSuffix: true })}
+          {formatDistanceToNow(new Date(log.created_at), { addSuffix: true, locale: dateLocale })}
         </span>
       ),
     });
 
     return cols;
-  }, [showEntityColumn]);
+  }, [locale, showEntityColumn, translate]);
 
   const filterConfig: FilterConfig = {
-    dateFields: [{ id: "created_at", label: "Date" }],
+    dateFields: [{ id: "created_at", label: translate("Date") }],
     httpMethodFilter: true,
     httpStatusCodeFilter: true,
   };
@@ -231,6 +251,31 @@ export function RequestLogListTable({
 
   return (
     <>
+      <div className="space-y-2">
+        <Label htmlFor="request-log-client-filter">{translate("Client")}</Label>
+        <Select
+          value={queryParams?.filter_client_name ?? "all"}
+          onValueChange={(value) =>
+            onChangeParams?.({
+              ...queryParams,
+              filter_client_name: value === "all" ? undefined : value,
+              prev_cursor: undefined,
+              next_cursor: undefined,
+            })
+          }
+        >
+          <SelectTrigger id="request-log-client-filter" className="w-full sm:w-56">
+            <SelectValue placeholder={translate("All clients")} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{translate("All clients")}</SelectItem>
+            <SelectItem value="web">web</SelectItem>
+            <SelectItem value="ui">ui</SelectItem>
+            <SelectItem value="mobile">mobile</SelectItem>
+            <SelectItem value="js-sdk">js-sdk</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
       <DataTable
         columns={columns}
         cacheKey={cacheKey}
@@ -241,6 +286,7 @@ export function RequestLogListTable({
         entityId={entityId}
         filterConfig={filterConfig}
         onRowClick={(log) => onSelectLog?.(log)}
+        t={translate}
       />
 
       <Sheet open={!!selectedLog} onOpenChange={(open) => !open && onSelectLog?.(null)}>
@@ -255,7 +301,7 @@ export function RequestLogListTable({
               )}
             </SheetTitle>
           </SheetHeader>
-          {selectedLog && <RequestLogDetail log={selectedLog} />}
+          {selectedLog && <RequestLogDetail log={selectedLog} t={translate} locale={locale} />}
         </SheetContent>
       </Sheet>
     </>

package/src/components/table/data-table.tsx

@@ -89,7 +89,8 @@ export function DataTable<T extends { id: string }>({
       queryParams?.filter_date_to ||
       queryParams?.filter_status ||
       queryParams?.filter_method ||
-      queryParams?.filter_http_status,
+      queryParams?.filter_http_status ||
+      queryParams?.filter_client_name,
   );
   const [filterPanelOpen, setFilterPanelOpen] = useState(hasInitialFilters);
 
@@ -115,7 +116,8 @@ export function DataTable<T extends { id: string }>({
       params.filter_date_to ||
       params.filter_status ||
       params.filter_method ||
-      params.filter_http_status,
+      params.filter_http_status ||
+      params.filter_client_name,
   );
 
   // Combined clear handler for both search and filters
@@ -261,6 +263,7 @@ export function DataTable<T extends { id: string }>({
             prevCursor={queryResult?.pagination.prev_cursor}
             nextCursor={queryResult?.pagination.next_cursor}
             onPageChange={handlePageChange}
+            t={t}
           />
         </div>
       </div>

package/src/components/table/date-cell.tsx

@@ -1,6 +1,7 @@
 type FormattedDateProps = {
   date: string | number | Date | null | undefined;
   format?: Intl.DateTimeFormatOptions;
+  locale?: string;
 };
 
 /**
@@ -13,6 +14,7 @@ export function FormattedDate({
     month: "short",
     day: "numeric",
   },
+  locale,
 }: FormattedDateProps) {
   if (!date) {
     return <span className="text-muted-foreground">—</span>;
@@ -27,7 +29,7 @@ export function FormattedDate({
       return <span className="text-destructive">{String(date)}</span>;
     }
 
-    return <>{dateObj.toLocaleDateString(undefined, format)}</>;
+    return <>{dateObj.toLocaleDateString(locale, format)}</>;
   } catch (error) {
     console.error("Error formatting date:", error);
     return <span className="text-destructive">{String(date)}</span>;

package/src/components/table/filter-bar.tsx

@@ -54,7 +54,13 @@ export function FilterBar({
     // No filters configured, just show search
     return (
       <div className="px-4 pt-4">
-        <SearchInput initialValue={searchValue} onSearch={onSearch} placeholder={t("Search...")} />
+        <SearchInput
+          initialValue={searchValue}
+          onSearch={onSearch}
+          placeholder={t("Search...")}
+          ariaLabel={t("Search")}
+          clearAriaLabel={t("Clear search")}
+        />
       </div>
     );
   }
@@ -62,7 +68,13 @@ export function FilterBar({
   return (
     <Collapsible open={isOpen} onOpenChange={onToggle} className="px-4 pt-4">
       <div className="flex items-center gap-2">
-        <SearchInput initialValue={searchValue} onSearch={onSearch} placeholder={t("Search...")} />
+        <SearchInput
+          initialValue={searchValue}
+          onSearch={onSearch}
+          placeholder={t("Search...")}
+          ariaLabel={t("Search")}
+          clearAriaLabel={t("Clear search")}
+        />
         <CollapsibleTrigger asChild>
           <Button variant="outline" size="sm" className="h-8 gap-1.5">
             <FilterIcon className="h-3.5 w-3.5" />

package/src/components/table/hooks/use-table-query.ts

@@ -28,7 +28,7 @@ export function useTableQuery<T>({ cacheKey, fetchFn, params, entityId, enabled
     queryKey,
     queryFn: () => fetchFn({ ...params, entity_id: entityId }),
     staleTime: 1000 * 60 * 2, // Data is fresh for 2 minutes (unless invalidated)
-    gcTime: 1000 * 60 * 30, // Keep in cache for 30 minutes
+    gcTime: 1000 * 60 * 10, // Keep table variants around for a short session without retaining them all day
     refetchOnMount: true, // Refetch when mounting if data is stale (including when invalidated)
     refetchOnWindowFocus: false, // Don't refetch on window focus
     refetchOnReconnect: true, // Refetch on reconnect