Function AuditLogTable

frontend/src/react/components/AuditLogTable.tsx:518–864

({
  parent,
  canExport,
  readonlyScopes,
}: AuditLogTableProps)

}

export function AuditLogTable({
  parent,
  canExport,
  readonlyScopes,
}: AuditLogTableProps) {
  const { t } = useTranslation();
  const hasAuditLogFeature = usePlanFeature(PlanFeature.FEATURE_AUDIT_LOG);
  const columns = useColumnDefs();
  const { widths, totalWidth, onResizeStart } = useColumnWidths(columns);

  const buildDefaultParams = useCallback((): SearchParams => {
    const to = dayjs().endOf("day");
    const from = to.add(-30, "day");
    return {
      query: "",
      scopes: [
        ...(readonlyScopes?.map((s) => ({ ...s, readonly: true })) ?? []),
        {
          id: "created",
          value: `${from.valueOf()},${to.valueOf()}`,
          readonly: true,
        },
      ],
    };
  }, [readonlyScopes]);

  const [searchParams, setSearchParams] =
    useState<SearchParams>(buildDefaultParams);

  // Reset search params when readonlyScopes change (e.g. navigating between projects).
  const prevReadonlyScopesRef = useRef(readonlyScopes);
  useEffect(() => {
    if (prevReadonlyScopesRef.current !== readonlyScopes) {
      prevReadonlyScopesRef.current = readonlyScopes;
      setSearchParams(buildDefaultParams());
    }
  }, [readonlyScopes, buildDefaultParams]);

  const filter = useMemo(
    () => buildAuditLogFilter(searchParams),
    [searchParams]
  );

  // Data fetching
  const [auditLogs, setAuditLogs] = useState<AuditLog[]>([]);
  const [loading, setLoading] = useState(true);
  const nextPageTokenRef = useRef("");
  const [hasMore, setHasMore] = useState(false);
  const [isFetchingMore, setIsFetchingMore] = useState(false);
  const [pageSize, setPageSize] = useSessionPageSize("bb.audit-log-table");
  const fetchIdRef = useRef(0);

  // Sort state
  const [sortKey, setSortKey] = useState<string | null>(null);
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
  const orderBy = sortKey ? `${sortKey} ${sortOrder}` : "";

  const toggleSort = useCallback(