@rozenite/storage-plugin 1.13.0 → 2.1.0

package/src/ui/__tests__/type-conversion.test.ts

@@ -25,13 +25,9 @@ describe('convertValue', () => {
     });
 
     it('UTF-8 encodes a string to a byte array', () => {
-      expect(convertValue('string', 'buffer', 'hello')).toEqual([
-        0x68, 0x65, 0x6c, 0x6c, 0x6f,
-      ]);
+      expect(convertValue('string', 'buffer', 'hello')).toEqual([0x68, 0x65, 0x6c, 0x6c, 0x6f]);
       // 'é' is two bytes in UTF-8: 0xC3 0xA9.
-      expect(convertValue('string', 'buffer', 'café')).toEqual([
-        0x63, 0x61, 0x66, 0xc3, 0xa9,
-      ]);
+      expect(convertValue('string', 'buffer', 'café')).toEqual([0x63, 0x61, 0x66, 0xc3, 0xa9]);
       expect(convertValue('string', 'buffer', '')).toEqual([]);
     });
   });
@@ -66,20 +62,14 @@ describe('convertValue', () => {
     });
 
     it('encodes the literal "true" / "false" bytes for buffer conversion', () => {
-      expect(convertValue('boolean', 'buffer', true)).toEqual([
-        0x74, 0x72, 0x75, 0x65,
-      ]);
-      expect(convertValue('boolean', 'buffer', false)).toEqual([
-        0x66, 0x61, 0x6c, 0x73, 0x65,
-      ]);
+      expect(convertValue('boolean', 'buffer', true)).toEqual([0x74, 0x72, 0x75, 0x65]);
+      expect(convertValue('boolean', 'buffer', false)).toEqual([0x66, 0x61, 0x6c, 0x73, 0x65]);
     });
   });
 
   describe('from buffer', () => {
     it('UTF-8 decodes bytes back to a string (the headline round-trip)', () => {
-      expect(
-        convertValue('buffer', 'string', [0x68, 0x65, 0x6c, 0x6c, 0x6f]),
-      ).toBe('hello');
+      expect(convertValue('buffer', 'string', [0x68, 0x65, 0x6c, 0x6c, 0x6f])).toBe('hello');
     });
 
     it('returns an empty string when bytes are not valid UTF-8', () => {
@@ -88,19 +78,13 @@ describe('convertValue', () => {
 
     it('decodes then parses to number, falls back to 0 on failure', () => {
       expect(convertValue('buffer', 'number', [0x34, 0x32])).toBe(42); // "42"
-      expect(
-        convertValue('buffer', 'number', [0x68, 0x65, 0x6c, 0x6c, 0x6f]),
-      ).toBe(0); // "hello" → NaN → 0
+      expect(convertValue('buffer', 'number', [0x68, 0x65, 0x6c, 0x6c, 0x6f])).toBe(0); // "hello" → NaN → 0
       expect(convertValue('buffer', 'number', [0xff])).toBe(0); // invalid UTF-8 → 0
     });
 
     it('decodes then matches "true" for boolean conversion', () => {
-      expect(convertValue('buffer', 'boolean', [0x74, 0x72, 0x75, 0x65])).toBe(
-        true,
-      );
-      expect(
-        convertValue('buffer', 'boolean', [0x66, 0x61, 0x6c, 0x73, 0x65]),
-      ).toBe(false);
+      expect(convertValue('buffer', 'boolean', [0x74, 0x72, 0x75, 0x65])).toBe(true);
+      expect(convertValue('buffer', 'boolean', [0x66, 0x61, 0x6c, 0x73, 0x65])).toBe(false);
       expect(convertValue('buffer', 'boolean', [0xff])).toBe(false);
     });
   });

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

@@ -0,0 +1,337 @@
+// @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,6 @@
+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 type { StorageEntry, StorageEntryType, StorageEntryValue } from '../shared/types';
 import { TypedValueEditor } from './typed-value-editor';
 import { defaultValueForType } from './type-conversion';
 
@@ -50,11 +45,7 @@ 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 +70,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 +78,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,120 +90,80 @@ export const AddEntryDialog = ({
   };
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      resetAndClose();
-      return;
-    }
-    if (
-      event.key === 'Enter' &&
-      newEntryKey.trim() &&
-      currentType !== 'buffer'
-    ) {
+    if (event.key === 'Enter' && newEntryKey.trim() && currentType !== 'buffer') {
       handleAdd();
     }
   };
 
-  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;
+  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>
+    </>
   );
 };