add legacy login mode to playground for old odc instances and use indexdb for multi-gigabyte storage capacity (see new storage page)

[joshunrau]

Summary by CodeRabbit

• New Features

  • Storage usage monitoring: New dialog displays current storage consumption statistics and provides a database management option to clear persisted application data
  • Legacy login mode: Introduced authentication flexibility with a new legacy login option available alongside the standard login flow

• Chores

  • Added dependency for enhanced storage management and data persistence capabilities

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

The changes introduce storage management capabilities to the playground app by adding a storage usage dialog, migrating persistence from localStorage to IndexedDB via idb-keyval, and enhancing the login flow with a legacy mode option and baseUrl parameter passing.

Changes

Cohort / File(s)	Change Summary
Storage Persistence Migration apps/playground/package.json, apps/playground/src/store/index.ts	Added idb-keyval dependency and replaced localStorage with IndexedDB-backed storage adapter in Zustand persistence layer.
Storage Usage Feature apps/playground/src/components/Header/ActionsDropdown/StorageUsageDialog.tsx, apps/playground/src/components/Header/ActionsDropdown/ActionsDropdown.tsx	New StorageUsageDialog component displaying storage metrics and providing database clearing functionality; integrated into ActionsDropdown menu.
Login Flow Enhancement apps/playground/src/components/Header/ActionsDropdown/LoginDialog.tsx	Added legacyLogin mode flag and baseUrl parameter to token retrieval functions; updated handleSubmit and UI to support legacy login branching.

Sequence Diagrams

sequenceDiagram
    actor User
    participant ActionsDropdown
    participant StorageUsageDialog
    participant Browser Storage API
    participant AppStore

    User->>ActionsDropdown: Click "Storage Usage"
    ActionsDropdown->>StorageUsageDialog: setShowStorageUsageDialog(true)
    activate StorageUsageDialog
    StorageUsageDialog->>Browser Storage API: navigator.storage.estimate()
    Browser Storage API-->>StorageUsageDialog: {usage, quota}
    StorageUsageDialog->>User: Display usage & quota

    User->>StorageUsageDialog: Click "Drop Database"
    StorageUsageDialog->>AppStore: persist.clearStorage()
    AppStore->>Browser Storage API: Clear IndexedDB
    StorageUsageDialog->>StorageUsageDialog: Refresh metrics
    StorageUsageDialog->>Browser Storage API: navigator.storage.estimate()
    Browser Storage API-->>StorageUsageDialog: Updated {usage, quota}
    StorageUsageDialog->>User: Display cleared state
    deactivate StorageUsageDialog

Loading

sequenceDiagram
    actor User
    participant LoginDialog
    participant API

    User->>LoginDialog: Submit credentials + legacyLogin flag
    
    rect rgb(200, 220, 250)
    Note over LoginDialog,API: Token Retrieval
    LoginDialog->>API: getAdminToken(credentials, baseUrl)
    API-->>LoginDialog: adminToken
    end

    alt legacyLogin = true
        rect rgb(220, 250, 220)
        Note over LoginDialog: Legacy Flow
        LoginDialog->>LoginDialog: Use adminToken directly
        end
    else legacyLogin = false
        rect rgb(250, 240, 200)
        Note over LoginDialog,API: Standard Flow
        LoginDialog->>API: getLimitedToken(adminToken, baseUrl)
        API-->>LoginDialog: limitedToken
        LoginDialog->>LoginDialog: Use limitedToken
        end
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

• LoginDialog.tsx: Multiple function signature changes and conditional login flow logic—verify parameter passing consistency and token handling paths
• StorageUsageDialog.tsx: New component with async storage API integration and state management—confirm error handling and re-fetch logic
• store/index.ts: Storage adapter migration from localStorage to idb-keyval—ensure persistence behavior is unchanged and StateStorage interface compliance

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f7c73d8 and 349e7a2.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (5)

• apps/playground/package.json (1 hunks)
• apps/playground/src/components/Header/ActionsDropdown/ActionsDropdown.tsx (4 hunks)
• apps/playground/src/components/Header/ActionsDropdown/LoginDialog.tsx (6 hunks)
• apps/playground/src/components/Header/ActionsDropdown/StorageUsageDialog.tsx (1 hunks)
• apps/playground/src/store/index.ts (3 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}