rl-core-front 0.18.2 → 0.18.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.18.2",
+  "version": "0.18.3",
   "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/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";