@rozenite/storage-plugin 1.12.0 → 2.0.0

package/src/ui/__tests__/use-storage-entries.test.tsx

@@ -0,0 +1,353 @@
+// @vitest-environment jsdom
+
+import { QueryClientProvider } from '@tanstack/react-query';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { RozeniteDevToolsRequestClient } from '@rozenite/plugin-bridge';
+import type { StorageEventMap } from '../../shared/messaging';
+import type { StorageTarget } from '../../shared/types';
+import { createStorageQueryClient } from '../query-client';
+import {
+  resetSelectedStorageQueries,
+  dropStorageFullEntries,
+  invalidateStorageEntryPreviews,
+  storageEntryPreviewQueryKey,
+  useStorageEntryPreviews,
+  useStorageFullEntry,
+} from '../use-storage-entries';
+
+declare global {
+  var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
+}
+
+const target: StorageTarget = { adapterId: 'mmkv', storageId: 'default' };
+const otherTarget: StorageTarget = { adapterId: 'async', storageId: 'other' };
+
+const response = (
+  cursor: string | undefined,
+  options: { next?: string; previous?: string } = {},
+) => ({
+  type: 'entry-previews' as const,
+  requestId: `request-${cursor ?? 'first'}`,
+  target,
+  items: [
+    {
+      key: cursor ?? 'first',
+      type: 'string' as const,
+      preview: cursor ?? 'first',
+      valueSize: (cursor ?? 'first').length,
+      isTruncated: false,
+    },
+  ],
+  nextCursor: options.next,
+  previousCursor: options.previous,
+});
+
+type PreviewProps = Parameters<typeof useStorageEntryPreviews>[0];
+
+const renderPreviewHook = async (initialProps: PreviewProps) => {
+  const queryClient = createStorageQueryClient();
+  let result: ReturnType<typeof useStorageEntryPreviews> | undefined;
+  const container = document.createElement('div');
+  const root = createRoot(container);
+
+  const Hook = (props: PreviewProps) => {
+    result = useStorageEntryPreviews(props);
+    return null;
+  };
+
+  const render = async (props: PreviewProps) => {
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <Hook {...props} />
+        </QueryClientProvider>,
+      );
+    });
+  };
+
+  await render(initialProps);
+  return {
+    get result() {
+      if (!result) throw new Error('Hook did not render.');
+      return result;
+    },
+    queryClient,
+    rerender: render,
+    unmount: async () => {
+      await act(async () => root.unmount());
+      container.remove();
+    },
+  };
+};
+
+const asClient = (request: ReturnType<typeof vi.fn>) =>
+  ({ request }) as unknown as RozeniteDevToolsRequestClient<StorageEventMap>;
+
+describe('storage entry query hooks', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    delete globalThis.IS_REACT_ACT_ENVIRONMENT;
+  });
+
+  it('loads both directions and bounds retained pages', async () => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    const request = vi.fn(({ payload }) => {
+      if (payload.cursor === undefined)
+        return Promise.resolve(response(undefined, { next: 'next' }));
+      if (payload.cursor === 'next')
+        return Promise.resolve(
+          response('next', { next: 'last', previous: 'first' }),
+        );
+      if (payload.cursor === 'last')
+        return Promise.resolve(response('last', { previous: 'next' }));
+      return Promise.resolve(response('first', { next: 'next' }));
+    });
+    const hook = await renderPreviewHook({
+      client: asClient(request),
+      target,
+      search: '',
+      keySortDirection: 'ascending',
+      maxPages: 2,
+    });
+
+    await act(async () => {
+      await vi.waitFor(() => expect(hook.result.isSuccess).toBe(true));
+    });
+    await act(async () => hook.result.fetchNextPage());
+    await act(async () => hook.result.fetchNextPage());
+    expect(
+      request.mock.calls.map(([options]) => options.payload.cursor),
+    ).toEqual([undefined, 'next', 'last']);
+    const queryKey = storageEntryPreviewQueryKey(target, '', 'ascending');
+    const pageKeys = () =>
+      hook.queryClient
+        .getQueryData<{ pages: Array<ReturnType<typeof response>> }>(queryKey)
+        ?.pages.map((page) => page.items[0].key);
+    await vi.waitFor(() => expect(pageKeys()).toEqual(['next', 'last']));
+
+    await act(async () => hook.result.fetchPreviousPage());
+    await vi.waitFor(() => expect(pageKeys()).toEqual(['first', 'next']));
+    await hook.unmount();
+  });
+
+  it('cancels stale target requests and starts a new sequence at the first page', async () => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    let resolveFirst:
+      | ((value: ReturnType<typeof response>) => void)
+      | undefined;
+    const request = vi.fn(({ payload }) => {
+      if (payload.target === target) {
+        return new Promise((resolve) => {
+          resolveFirst = resolve;
+        });
+      }
+      return Promise.resolve({ ...response(undefined), target: otherTarget });
+    });
+    const hook = await renderPreviewHook({
+      client: asClient(request),
+      target,
+      search: 'one',
+      keySortDirection: 'ascending',
+    });
+    const firstSignal = request.mock.calls[0][0].signal as AbortSignal;
+
+    await hook.rerender({
+      client: asClient(request),
+      target: otherTarget,
+      search: 'two',
+      keySortDirection: 'descending',
+    });
+    expect(firstSignal.aborted).toBe(true);
+    expect(request.mock.calls[1][0].payload).toMatchObject({
+      cursor: undefined,
+      search: 'two',
+      keySortDirection: 'descending',
+    });
+
+    await act(async () => resolveFirst?.(response(undefined)));
+    await vi.waitFor(() =>
+      expect(
+        hook.queryClient.getQueryData<{
+          pages: Array<ReturnType<typeof response>>;
+        }>(storageEntryPreviewQueryKey(otherTarget, 'two', 'descending'))
+          ?.pages[0].target,
+      ).toEqual(otherTarget),
+    );
+    await hook.unmount();
+  });
+
+  it('keeps the previous pages while a search or sort change is loading', async () => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    let resolveNext: ((value: ReturnType<typeof response>) => void) | undefined;
+    const request = vi.fn(({ payload }) => {
+      if (payload.search === 'next') {
+        return new Promise((resolve) => {
+          resolveNext = resolve;
+        });
+      }
+      return Promise.resolve(response(undefined));
+    });
+    const hook = await renderPreviewHook({
+      client: asClient(request),
+      target,
+      search: 'current',
+      keySortDirection: 'ascending',
+    });
+
+    await act(async () => {
+      await vi.waitFor(() => expect(hook.result.isSuccess).toBe(true));
+    });
+    expect(hook.result.data?.pages[0].items[0].key).toBe('first');
+
+    await hook.rerender({
+      client: asClient(request),
+      target,
+      search: 'next',
+      keySortDirection: 'descending',
+    });
+
+    expect(hook.result.isFetching).toBe(true);
+    expect(hook.result.isPlaceholderData).toBe(true);
+    expect(hook.result.data?.pages[0].items[0].key).toBe('first');
+    expect(request.mock.calls[1][0].payload).toMatchObject({
+      search: 'next',
+      keySortDirection: 'descending',
+    });
+
+    await act(async () => {
+      resolveNext?.(response('new'));
+      await vi.waitFor(() => expect(hook.result.isPlaceholderData).toBe(false));
+    });
+    expect(hook.result.data?.pages[0].items[0].key).toBe('new');
+    await hook.unmount();
+  });
+
+  it('exposes request errors without retrying bridge work', async () => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    const request = vi.fn(() => Promise.reject(new Error('device failed')));
+    const hook = await renderPreviewHook({
+      client: asClient(request),
+      target,
+      search: '',
+      keySortDirection: 'ascending',
+    });
+
+    await act(async () => {
+      await vi.waitFor(() => expect(hook.result.isError).toBe(true));
+    });
+    expect(request).toHaveBeenCalledTimes(1);
+    await hook.unmount();
+  });
+
+  it('resets every selected-storage preview variant but refetches only the active first page', async () => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    const request = vi.fn(({ payload }) =>
+      Promise.resolve(response(payload.cursor)),
+    );
+    const hook = await renderPreviewHook({
+      client: asClient(request),
+      target,
+      search: 'active',
+      keySortDirection: 'ascending',
+    });
+    await act(async () => {
+      await vi.waitFor(() => expect(hook.result.isSuccess).toBe(true));
+    });
+    hook.queryClient.setQueryData(
+      storageEntryPreviewQueryKey(target, 'inactive', 'ascending'),
+      { pages: [response(undefined)], pageParams: [undefined] },
+    );
+
+    await act(async () =>
+      resetSelectedStorageQueries(hook.queryClient, target),
+    );
+    expect(request).toHaveBeenCalledTimes(2);
+    expect(
+      hook.queryClient.getQueryData(
+        storageEntryPreviewQueryKey(target, 'inactive', 'ascending'),
+      ),
+    ).toBeUndefined();
+    await hook.unmount();
+  });
+
+  it('invalidates only the changed storage preview prefix and drops its stale full value', async () => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    const request = vi.fn(({ payload }) =>
+      Promise.resolve(response(payload.cursor)),
+    );
+    const hook = await renderPreviewHook({
+      client: asClient(request),
+      target,
+      search: 'active',
+      keySortDirection: 'ascending',
+    });
+    await act(async () => {
+      await vi.waitFor(() => expect(hook.result.isSuccess).toBe(true));
+    });
+    const otherQueryKey = storageEntryPreviewQueryKey(
+      otherTarget,
+      'other',
+      'ascending',
+    );
+    hook.queryClient.setQueryDefaults(otherQueryKey, { gcTime: Infinity });
+    hook.queryClient.setQueryData(otherQueryKey, {
+      pages: [response(undefined)],
+      pageParams: [undefined],
+    });
+    hook.queryClient.setQueryData(
+      ['storage-full-entry', target.adapterId, target.storageId, 'changed'],
+      { entry: { key: 'changed', type: 'string', value: 'stale full value' } },
+    );
+
+    await act(async () => {
+      await invalidateStorageEntryPreviews(hook.queryClient, target);
+      await dropStorageFullEntries(hook.queryClient, target, 'changed');
+    });
+
+    expect(request).toHaveBeenCalledTimes(2);
+    expect(hook.queryClient.getQueryData(otherQueryKey)).toBeDefined();
+    expect(
+      hook.queryClient.getQueryData([
+        'storage-full-entry',
+        target.adapterId,
+        target.storageId,
+        'changed',
+      ]),
+    ).toBeUndefined();
+    await hook.unmount();
+  });
+
+  it('removes a full value when its interaction unmounts', async () => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    const queryClient = createStorageQueryClient();
+    const request = vi.fn(() =>
+      Promise.resolve({
+        type: 'entry' as const,
+        requestId: 'entry-1',
+        target,
+        entry: { key: 'large', type: 'string' as const, value: 'full value' },
+      }),
+    );
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    const Hook = () => {
+      useStorageFullEntry({ client: asClient(request), target, key: 'large' });
+      return null;
+    };
+
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <Hook />
+        </QueryClientProvider>,
+      );
+    });
+    await act(async () => {
+      await vi.waitFor(() => expect(request).toHaveBeenCalledTimes(1));
+    });
+    await act(async () => root.unmount());
+    expect(queryClient.getQueryCache().getAll()).toHaveLength(0);
+  });
+});

package/src/ui/add-entry-dialog.tsx

@@ -1,11 +1,10 @@
+import { Button, ConfirmDialog, Dialog, Field, Input } from '@rozenite/ui';
 import { useEffect, useState } from 'react';
-import { X } from 'lucide-react';
 import type {
   StorageEntry,
   StorageEntryType,
   StorageEntryValue,
 } from '../shared/types';
-import { ConfirmDialog } from './confirm-dialog';
 import { TypedValueEditor } from './typed-value-editor';
 import { defaultValueForType } from './type-conversion';
 
@@ -50,11 +49,9 @@ export const AddEntryDialog = ({
   const [currentValue, setCurrentValue] = useState<StorageEntryValue | null>(
     defaultValueForType(initialType),
   );
-  const [confirmDialog, setConfirmDialog] = useState<{
-    isOpen: boolean;
-    title: string;
-    message: string;
-  }>({ isOpen: false, title: '', message: '' });
+  const [alert, setAlert] = useState<{ title: string; message: string } | null>(
+    null,
+  );
 
   // Reset state every time the dialog opens, so a previous session's
   // type / value doesn't bleed in.
@@ -79,8 +76,7 @@ export const AddEntryDialog = ({
     if (!newEntryKey.trim() || currentValue === null) return;
 
     if (!isCurrentTypeSupported) {
-      setConfirmDialog({
-        isOpen: true,
+      setAlert({
         title: 'Unsupported Type',
         message: 'Selected type is not supported by this storage.',
       });
@@ -88,8 +84,7 @@ export const AddEntryDialog = ({
     }
 
     if (existingKeys.includes(newEntryKey)) {
-      setConfirmDialog({
-        isOpen: true,
+      setAlert({
         title: 'Key Already Exists',
         message: 'An entry with this key already exists.',
       });
@@ -101,10 +96,6 @@ export const AddEntryDialog = ({
   };
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      resetAndClose();
-      return;
-    }
     if (
       event.key === 'Enter' &&
       newEntryKey.trim() &&
@@ -114,107 +105,76 @@ export const AddEntryDialog = ({
     }
   };
 
-  if (!isOpen) {
-    return null;
-  }
-
   // Unsavable when no key, no supported type, or when the value is
   // null — the hex editor signals invalid / empty hex via null.
   const isAddDisabled =
     !newEntryKey.trim() || !isCurrentTypeSupported || currentValue === null;
 
   return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      onClick={resetAndClose}
-    >
-      <div
-        className="bg-gray-800 rounded-lg p-6 w-[32rem] max-w-full mx-4"
-        onClick={(event) => event.stopPropagation()}
-        onKeyDown={handleKeyDown}
+    <>
+      <Dialog
+        open={isOpen}
+        onOpenChange={(open) => {
+          if (!open) resetAndClose();
+        }}
       >
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold text-gray-100">Add New Entry</h2>
-          <button
-            onClick={resetAndClose}
-            className="p-1 text-gray-400 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
-            title="Close dialog"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        <div className="space-y-4">
-          <div>
-            <label
-              htmlFor="new-entry-key"
-              className="block text-sm font-medium text-gray-200 mb-1"
-            >
-              Key
-            </label>
-            <input
-              id="new-entry-key"
-              type="text"
-              value={newEntryKey}
-              onChange={(event) => setNewEntryKey(event.target.value)}
-              placeholder="Enter key name"
-              className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              autoFocus
-            />
+        <Dialog.Content onKeyDown={handleKeyDown}>
+          <Dialog.Header>
+            <Dialog.Title>Add New Entry</Dialog.Title>
+          </Dialog.Header>
+
+          <div className="flex flex-col gap-4">
+            <Field>
+              <Field.Label htmlFor="new-entry-key">Key</Field.Label>
+              <Input
+                id="new-entry-key"
+                value={newEntryKey}
+                onChange={(event) => setNewEntryKey(event.target.value)}
+                placeholder="Enter key name"
+                autoFocus
+              />
+            </Field>
+
+            <Field>
+              <Field.Label htmlFor="new-entry-value">Value</Field.Label>
+              <TypedValueEditor
+                supportedTypes={supportedTypes}
+                type={currentType}
+                value={currentValue}
+                onChange={(nextType, nextValue) => {
+                  setCurrentType(nextType);
+                  setCurrentValue(nextValue);
+                }}
+                inputId="new-entry-value"
+              />
+              {!isCurrentTypeSupported && (
+                <Field.Description className="text-destructive">
+                  Selected type is not supported by this storage.
+                </Field.Description>
+              )}
+            </Field>
           </div>
 
-          <div>
-            <label
-              htmlFor="new-entry-value"
-              className="block text-sm font-medium text-gray-200 mb-1"
-            >
-              Value
-            </label>
-            <TypedValueEditor
-              supportedTypes={supportedTypes}
-              type={currentType}
-              value={currentValue}
-              onChange={(nextType, nextValue) => {
-                setCurrentType(nextType);
-                setCurrentValue(nextValue);
-              }}
-              inputId="new-entry-value"
-            />
-            {!isCurrentTypeSupported && (
-              <p className="text-xs text-amber-400 mt-1">
-                Selected type is not supported by this storage.
-              </p>
-            )}
-          </div>
-        </div>
-
-        <div className="flex items-center justify-end gap-2 mt-6">
-          <button
-            onClick={resetAndClose}
-            className="px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-gray-700 rounded transition-colors"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleAdd}
-            disabled={isAddDisabled}
-            className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded transition-colors"
-          >
-            Add Entry
-          </button>
-        </div>
-      </div>
+          <Dialog.Footer>
+            <Button variant="outline" onClick={resetAndClose}>
+              Cancel
+            </Button>
+            <Button onClick={handleAdd} disabled={isAddDisabled}>
+              Add Entry
+            </Button>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog>
 
       <ConfirmDialog
-        isOpen={confirmDialog.isOpen}
-        onClose={() =>
-          setConfirmDialog((previous) => ({ ...previous, isOpen: false }))
-        }
-        onConfirm={() => {}}
-        title={confirmDialog.title}
-        message={confirmDialog.message}
-        type="alert"
+        open={alert !== null}
+        onOpenChange={(open) => {
+          if (!open) setAlert(null);
+        }}
+        variant="alert"
+        title={alert?.title ?? ''}
+        description={alert?.message}
       />
-    </div>
+    </>
   );
 };

package/src/ui/binary-value-editor-state.ts

@@ -17,7 +17,8 @@ export type EditorState = {
 export type EditorAction =
   | { type: 'set-text'; text: string }
   | { type: 'normalize-paste'; text: string }
-  | { type: 'switch-mode'; mode: EditorMode };
+  | { type: 'switch-mode'; mode: EditorMode }
+  | { type: 'replace-bytes'; bytes: number[] };
 
 export type Validation =
   | { ok: true; bytes: number[] }
@@ -108,6 +109,14 @@ export const reduce = (
         error: null,
       };
     }
+    case 'replace-bytes': {
+      return {
+        mode: state.mode,
+        text: encode(action.bytes, state.mode),
+        bytes: action.bytes,
+        error: null,
+      };
+    }
   }
 };