rl-core-front 0.18.2 → 0.18.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.18.2",
+  "version": "0.18.4",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/components/ui/combobox.tsx

@@ -324,11 +324,18 @@ export function Combobox({
          * fecha em seguida. No modo múltiplo o campo é onde ficam os itens já
          * escolhidos: cobri-lo esconderia justamente o que se acabou de marcar,
          * e o painel continua aberto para marcar o próximo.
+         *
+         * Só quando abre para **baixo**: ali o que fica sobre o campo é a
+         * busca, e soltar o clique nela não faz nada. Virado para cima — campo
+         * no fim da tela, lista longa — cobrir o campo punha a **última opção**
+         * sob o cursor, e o `pointerup` do mesmo clique que abriu a escolhia:
+         * o painel fechava na hora com um valor que ninguém pediu, e a tela
+         * parecia um select que "não abre". Para cima, o painel encosta no
+         * campo sem cobri-lo.
          */
         className={cn(
           "max-h-[min(18rem,var(--radix-dropdown-menu-content-available-height))] w-(--radix-dropdown-menu-trigger-width) overflow-y-auto p-1",
-          !multiple &&
-            "data-[side=bottom]:-mt-(--radix-dropdown-menu-trigger-height) data-[side=top]:-mb-(--radix-dropdown-menu-trigger-height)",
+          !multiple && "data-[side=bottom]:-mt-(--radix-dropdown-menu-trigger-height)",
         )}
         align="start"
         sideOffset={multiple ? 4 : 0}

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

@@ -31,7 +31,11 @@ import {
   GripVertical,
   SlidersHorizontal,
 } from "lucide-react";
-import type { JSX, PointerEvent as ReactPointerEvent } from "react";
+import type {
+  CSSProperties,
+  JSX,
+  PointerEvent as ReactPointerEvent,
+} from "react";
 import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 
 import { countConditions } from "#core/_utils/advanced-filter";
@@ -257,6 +261,15 @@ interface DataTableProps<T extends RowData> {
    * enquanto a listagem estiver na tela; não é gravada.
    */
   collapsibleGroups?: boolean;
+  /**
+   * As seções que nascem fechadas — por chave.
+   *
+   * Para a listagem longa em que só uma seção interessa de saída: o ano
+   * agrupado por mês abre com o mês corrente à vista e os outros na faixa.
+   * Lida uma vez, na montagem; quem quiser reaplicar quando os dados trocam
+   * remonta a tabela (`key`). Sem `collapsibleGroups` não tem efeito.
+   */
+  defaultCollapsedGroups?: string[];
   /**
    * A ordem das seções.
    *
@@ -286,6 +299,26 @@ export interface DataTableColumnMeta {
    * É o caso da coluna de ações: sem isso o `<table>` a esticava.
    */
   shrink?: boolean;
+  /**
+   * A célula quebra em várias linhas em vez de cortar com reticências.
+   *
+   * O padrão é cortar: numa tabela, a linha que cresce para caber um texto
+   * desloca todas as vizinhas, e correr o olho por uma coluna deixa de ser
+   * possível. Quem precisa do texto inteiro tem o detalhe da linha.
+   *
+   * Liga-se onde a célula não é texto corrido e sim um conjunto que empilha —
+   * marcadores, chips, uma lista de badges: ali a quebra é o desenho, e cortar
+   * esconderia item, não fim de frase.
+   */
+  wrap?: boolean;
+  /**
+   * O teto de largura da célula, quando o padrão não serve.
+   *
+   * Aceita qualquer largura CSS (`"12rem"`, `"320px"`). Existe porque a coluna
+   * que carrega o nome principal da linha merece mais espaço que a de apoio, e
+   * sem isso as duas cortariam no mesmo ponto.
+   */
+  maxWidth?: string;
   /**
    * A coluna existe, mas não aparece até alguém ligá-la em "Colunas".
    *
@@ -418,6 +451,38 @@ function shrinkClass(columnDef: { meta?: unknown }): string | undefined {
   return meta?.shrink ? "w-px whitespace-nowrap" : undefined;
 }
 
+/**
+ * O teto padrão de uma célula — 24rem, a largura em que uma frase ainda se lê
+ * inteira e duas colunas de apoio ainda cabem ao lado.
+ */
+const CELL_MAX_WIDTH = "24rem";
+
+/**
+ * Como a célula se comporta quando o conteúdo não cabe: corta com reticências.
+ *
+ * É o padrão, e não um ajuste por tela: sem ele, cada tabela nova volta a
+ * crescer em altura no primeiro texto longo, e quem monta a coluna precisa
+ * lembrar de podá-la — lembrar é o que ninguém faz.
+ *
+ * A coluna que encolhe (`shrink`) fica fora: ela já não cresce, e um teto ali
+ * cortaria botão de ação. A que declara `wrap` também: nela a quebra é o
+ * desenho.
+ */
+function cellStyle(columnDef: {
+  meta?: unknown;
+}): { className?: string; style?: CSSProperties } {
+  const meta = columnDef.meta as DataTableColumnMeta | undefined;
+
+  if (meta?.shrink || meta?.wrap) {
+    return { className: shrinkClass(columnDef) };
+  }
+
+  return {
+    className: "truncate",
+    style: { maxWidth: meta?.maxWidth ?? CELL_MAX_WIDTH },
+  };
+}
+
 export function DataTable<T extends RowData>({
   columns,
   data,
@@ -448,11 +513,14 @@ export function DataTable<T extends RowData>({
   renderGroupHeader,
   groupOrder,
   collapsibleGroups = false,
+  defaultCollapsedGroups,
 }: DataTableProps<T>): JSX.Element {
   const { t } = useI18n();
   const [colsOpen, setColsOpen] = useState(false);
   /** As seções fechadas, por chave. */
-  const [collapsedGroups, setCollapsedGroups] = useState<string[]>([]);
+  const [collapsedGroups, setCollapsedGroups] = useState<string[]>(
+    () => defaultCollapsedGroups ?? [],
+  );
   const [filtersOpen, setFiltersOpen] = useState(false);
   /** A linha na mão e a linha embaixo do dedo, enquanto o arrasto dura. */
   const [draggedRow, setDraggedRow] = useState<string | null>(null);
@@ -1114,7 +1182,7 @@ export function DataTable<T extends RowData>({
                           {row.getVisibleCells().map((cell) => (
                             <TableCell
                               key={cell.id}
-                              className={shrinkClass(cell.column.columnDef)}
+                              {...cellStyle(cell.column.columnDef)}
                             >
                               {flexRender(
                                 cell.column.columnDef.cell,
@@ -1139,7 +1207,7 @@ export function DataTable<T extends RowData>({
                     {grupo.headers.map((header) => (
                       <TableCell
                         key={header.id}
-                        className={shrinkClass(header.column.columnDef)}
+                        {...cellStyle(header.column.columnDef)}
                       >
                         {header.isPlaceholder
                           ? null

package/src/features/logs/hooks/use-request-logs.ts

@@ -10,6 +10,7 @@ import {
 } from "react";
 
 import type { FilterValues } from "#core/_utils/filter";
+import { safeStorage } from "#core/_utils/storage";
 import { RequestOutcome } from "#core/features/logs/enums/request-outcome.enum";
 import { logsService, RequestLog } from "#core/features/logs/services/logs.service";
 import type { FiltersState } from "#core/hooks/use-filters";
@@ -17,15 +18,22 @@ import { useLatestRequest } from "#core/hooks/use-latest-request";
 import { useListQuery } from "#core/hooks/use-list-query";
 import { useRequest } from "#core/hooks/use-request";
 
+/** Onde o navegador guarda o último desfecho escolhido na barra. */
+export const LOGS_OUTCOME_STORAGE_KEY = "tab:logs-outcome";
+
 /**
- * A tela abre no sucesso, não em tudo.
+ * A tela abre no último desfecho escolhido — e no sucesso, na primeira vez.
  *
- * Fora do módulo para não recriar o objeto a cada render: ele é dependência do
- * efeito de hidratação, e um literal novo por render o refaria sem parar.
+ * O desfecho é filtro (§11) e por isso vive na URL, que o F5 e o link já
+ * carregam. O que a URL não cobre é voltar pelo menu: aí entra o navegador,
+ * como nas abas. Lido uma vez por montagem porque é dependência do efeito de
+ * hidratação do filtro, e um literal novo por render o refaria sem parar.
  */
-const DEFAULT_FILTER: FilterValues = {
-  outcome: { values: [String(RequestOutcome.SUCCESS)] },
-};
+const defaultFilter = (): FilterValues => ({
+  outcome: {
+    values: [safeStorage.get(LOGS_OUTCOME_STORAGE_KEY) ?? String(RequestOutcome.SUCCESS)],
+  },
+});
 
 export interface UseRequestLogsResult {
   rows: RequestLog[];
@@ -46,11 +54,8 @@ export function useRequestLogs(): UseRequestLogsResult {
   const { run, loading } = useRequest();
 
   const latest = useLatestRequest();
-  const list = useListQuery(
-    "/audit/requests/filter-schema",
-    20,
-    DEFAULT_FILTER,
-  );
+  const [initialFilter] = useState(defaultFilter);
+  const list = useListQuery("/audit/requests/filter-schema", 20, initialFilter);
 
   const [rows, setRows] = useState<RequestLog[]>([]);
   const [total, setTotal] = useState(0);

package/src/features/logs/panels/request-logs-panel.tsx

@@ -10,6 +10,7 @@ import { Eye } from "lucide-react";
 import type { JSX } from "react";
 import { useMemo, useState } from "react";
 
+import { safeStorage } from "#core/_utils/storage";
 import {
   Badge,
   Button,
@@ -29,7 +30,10 @@ import {
   ErrorTypeLabelKey,
 } from "#core/features/logs/enums/error-type.enum";
 import { RequestOutcomeLabelKey } from "#core/features/logs/enums/request-outcome.enum";
-import { useRequestLogs } from "#core/features/logs/hooks/use-request-logs";
+import {
+  LOGS_OUTCOME_STORAGE_KEY,
+  useRequestLogs,
+} from "#core/features/logs/hooks/use-request-logs";
 import { RequestLog } from "#core/features/logs/services/logs.service";
 
 function statusVariant(
@@ -72,6 +76,8 @@ export function RequestLogsPanel(): JSX.Element {
       outcome: { values: [value] },
     });
     logs.setPage(0);
+    // O navegador lembra para a próxima visita pelo menu; a URL já leva o resto.
+    safeStorage.set(LOGS_OUTCOME_STORAGE_KEY, value);
   };
 
   const outcomeOptions = useMemo<SegmentedOption[]>(

package/src/features/queues/hooks/use-queue-jobs.ts

@@ -12,6 +12,7 @@ import {
 } from "#core/features/queues/services/queues.service";
 import { useLatestRequest } from "#core/hooks/use-latest-request";
 import { useRequest } from "#core/hooks/use-request";
+import { useTabState } from "#core/hooks/use-tab-state";
 
 const EMPTY_COUNTS: QueueCounts = {
   waiting: 0,
@@ -47,6 +48,9 @@ export interface UseQueueJobsResult {
  * Abre em `failed` de propósito: quem entra aqui está atrás do que deu errado.
  * O que está andando bem não precisa de tela.
  */
+const QUEUE_JOB_STATES = Object.values(QueueJobState);
+const QUEUE_NAMES = Object.values(QueueName);
+
 export function useQueueJobs(): UseQueueJobsResult {
   const { run, loading } = useRequest();
   const latest = useLatestRequest();
@@ -56,8 +60,21 @@ export function useQueueJobs(): UseQueueJobsResult {
   const [total, setTotal] = useState(0);
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(20);
-  const [state, setStateValue] = useState<QueueJobState>(QueueJobState.FAILED);
-  const [queue, setQueueValue] = useState<QueueName>(QueueName.JOBS);
+  // Os dois seletores ficam salvos — na URL para o F5 e o link, no navegador
+  // para o menu — cada um com o próprio parâmetro, que na mesma tela não
+  // podem dividir o `?tab=`.
+  const { tab: state, setTab: setStateValue } = useTabState(
+    "queues-state",
+    QUEUE_JOB_STATES,
+    QueueJobState.FAILED,
+    { param: "state" },
+  );
+  const { tab: queue, setTab: setQueueValue } = useTabState(
+    "queues-queue",
+    QUEUE_NAMES,
+    QueueName.JOBS,
+    { param: "queue" },
+  );
   // Sem ordem escolhida, a lista sai na ordem do Redis — que é a mais recente
   // primeiro e não custa varredura nenhuma no backend.
   const [sorting, setSorting] = useState<SortingState>([]);

package/src/features/rbac/panels/definitions-panel.tsx

@@ -8,6 +8,7 @@ import { ActionsPanel } from "#core/features/rbac/panels/actions-panel";
 import { PermissionsPanel } from "#core/features/rbac/panels/permissions-panel";
 import { ResourcesPanel } from "#core/features/rbac/panels/resources-panel";
 import { ScopesPanel } from "#core/features/rbac/panels/scopes-panel";
+import { useTabState } from "#core/hooks/use-tab-state";
 
 /**
  * A mecânica do RBAC — as peças de que um código `resource:action:scope` é
@@ -49,6 +50,14 @@ export function DefinitionsPanel(): JSX.Element {
     },
   ].filter((tab) => hasPermission(tab.perm));
 
+  // `sub`, e não `tab`: este está dentro da aba Definições do RBAC, que já usa `?tab=`.
+  const { tab, setTab } = useTabState(
+    "rbac-definitions",
+    tabs.map((item) => item.value),
+    undefined,
+    { param: "sub" },
+  );
+
   if (tabs.length === 0) {
     return <></>;
   }
@@ -56,7 +65,7 @@ export function DefinitionsPanel(): JSX.Element {
   return (
     <div className="space-y-4">
       <p className="text-sm text-muted-foreground">{t("rbac.definitionsHint")}</p>
-      <Tabs defaultValue={tabs[0].value}>
+      <Tabs value={tab} onValueChange={setTab}>
         <TabsList>
           {tabs.map((tab) => (
             <TabsTrigger key={tab.value} value={tab.value}>

package/src/hooks/use-tab-state.ts

@@ -5,7 +5,16 @@ import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { safeStorage } from "#core/_utils/storage";
 
 const STORAGE_PREFIX = "tab:";
-const QUERY_PARAM = "tab";
+const DEFAULT_PARAM = "tab";
+
+export interface UseTabStateOptions {
+  /**
+   * O nome do parâmetro na URL. `tab` por padrão; muda quando a tela tem mais
+   * de um seletor (a fila e a situação, em Filas) ou abas dentro de abas
+   * (Definições dentro do RBAC) — dois com o mesmo nome se sobrescreveriam.
+   */
+  param?: string;
+}
 
 export interface UseTabStateResult<T extends string> {
   tab: T;
@@ -16,13 +25,13 @@ export interface UseTabStateResult<T extends string> {
   setTab: (next: string) => void;
 }
 
-const readFromUrl = (): string | null =>
-  new URLSearchParams(window.location.search).get(QUERY_PARAM);
+const readFromUrl = (param: string): string | null =>
+  new URLSearchParams(window.location.search).get(param);
 
-/** Troca só o `?tab=`, preservando o resto — o `?filter=` da listagem mora ao lado. */
-const writeToUrl = (value: string): void => {
+/** Troca só o próprio parâmetro, preservando o resto — o `?filter=` da listagem mora ao lado. */
+const writeToUrl = (param: string, value: string): void => {
   const params = new URLSearchParams(window.location.search);
-  params.set(QUERY_PARAM, value);
+  params.set(param, value);
   window.history.replaceState(null, "", `${window.location.pathname}?${params.toString()}`);
 };
 
@@ -50,6 +59,7 @@ export function useTabState<T extends string>(
   storageKey: string,
   tabs: readonly T[],
   defaultTab: T = tabs[0],
+  { param = DEFAULT_PARAM }: UseTabStateOptions = {},
 ): UseTabStateResult<T> {
   const [tab, setStoredTab] = useState<T>(defaultTab);
 
@@ -74,7 +84,7 @@ export function useTabState<T extends string>(
   // O de layout corre antes de o navegador desenhar — a primeira imagem já é
   // a aba salva. No servidor o React o ignora, que é o que se quer.
   useLayoutEffect(() => {
-    const fromUrl = readFromUrl();
+    const fromUrl = readFromUrl(param);
     const fromStorage = safeStorage.get(`${STORAGE_PREFIX}${storageKey}`);
     const resolved = isTab(fromUrl) ? fromUrl : isTab(fromStorage) ? fromStorage : defaultTab;
 
@@ -84,9 +94,9 @@ export function useTabState<T extends string>(
     // isso, copiar o link depois de cair na aba do storage levaria à padrão.
     // Lista vazia (nenhuma aba permitida) não tem o que dizer.
     if (resolved !== undefined && fromUrl !== resolved) {
-      writeToUrl(resolved);
+      writeToUrl(param, resolved);
     }
-  }, [storageKey, defaultTab, isTab]);
+  }, [storageKey, defaultTab, isTab, param]);
 
   const setTab = useCallback(
     (next: string): void => {
@@ -95,10 +105,10 @@ export function useTabState<T extends string>(
       }
 
       setStoredTab(next);
-      writeToUrl(next);
+      writeToUrl(param, next);
       safeStorage.set(`${STORAGE_PREFIX}${storageKey}`, next);
     },
-    [storageKey, isTab],
+    [storageKey, isTab, param],
   );
 
   return { tab, setTab };

package/src/index.ts

@@ -121,7 +121,7 @@ export {
   TAB_SHORTCUT_DIGITS,
   useShortcut,
 } from "#core/hooks/use-shortcut";
-export type { UseTabStateResult } from "#core/hooks/use-tab-state";
+export type { UseTabStateOptions, UseTabStateResult } from "#core/hooks/use-tab-state";
 export { useTabState } from "#core/hooks/use-tab-state";
 export type { TableView, UseTableViewResult } from "#core/hooks/use-table-view";
 export { useTableView } from "#core/hooks/use-table-view";