feat: Multi-library support (#4181)
* feat(database): add user_library table and library access methods Signed-off-by: Deluan <deluan@navidrome.org> # Conflicts: # tests/mock_library_repo.go * feat(database): enhance user retrieval with library associations Signed-off-by: Deluan <deluan@navidrome.org> * feat(api): implement library management and user-library association endpoints Signed-off-by: Deluan <deluan@navidrome.org> * feat(api): restrict access to library and config endpoints to admin users Signed-off-by: Deluan <deluan@navidrome.org> * refactor(library): implement library management service and update API routes Signed-off-by: Deluan <deluan@navidrome.org> * feat(database): add library filtering to album, folder, and media file queries Signed-off-by: Deluan <deluan@navidrome.org> * refactor library service to use REST repository pattern and remove CRUD operations Signed-off-by: Deluan <deluan@navidrome.org> * add total_duration column to library and update user_library table Signed-off-by: Deluan <deluan@navidrome.org> * fix migration file name Signed-off-by: Deluan <deluan@navidrome.org> * feat(library): add library management features including create, edit, delete, and list functionalities - WIP Signed-off-by: Deluan <deluan@navidrome.org> * feat(library): enhance library validation and management with path checks and normalization - WIP Signed-off-by: Deluan <deluan@navidrome.org> * feat(library): improve library path validation and error handling - WIP Signed-off-by: Deluan <deluan@navidrome.org> * use utils/formatBytes Signed-off-by: Deluan <deluan@navidrome.org> * simplify DeleteLibraryButton.jsx Signed-off-by: Deluan <deluan@navidrome.org> * feat(library): enhance validation messages and error handling for library paths Signed-off-by: Deluan <deluan@navidrome.org> * lint Signed-off-by: Deluan <deluan@navidrome.org> * test(scanner): add tests for multi-library scanning and validation Signed-off-by: Deluan <deluan@navidrome.org> * test(scanner): improve handling of filesystem errors and ensure warnings are returned Signed-off-by: Deluan <deluan@navidrome.org> * feat(controller): add function to retrieve the most recent scan time across all libraries Signed-off-by: Deluan <deluan@navidrome.org> * feat(library): add additional fields and restructure LibraryEdit component for enhanced statistics display Signed-off-by: Deluan <deluan@navidrome.org> * feat(library): enhance LibraryCreate and LibraryEdit components with additional props and styling Signed-off-by: Deluan <deluan@navidrome.org> * feat(mediafile): add LibraryName field and update queries to include library name Signed-off-by: Deluan <deluan@navidrome.org> * feat(missingfiles): add library filter and display in MissingFilesList component Signed-off-by: Deluan <deluan@navidrome.org> * feat(library): implement scanner interface for triggering library scans on create/update Signed-off-by: Deluan <deluan@navidrome.org> # Conflicts: # cmd/wire_gen.go # cmd/wire_injectors.go # Conflicts: # cmd/wire_gen.go # Conflicts: # cmd/wire_gen.go # cmd/wire_injectors.go * feat(library): trigger scan after successful library deletion to clean up orphaned data Signed-off-by: Deluan <deluan@navidrome.org> * rename migration file for user library table to maintain versioning order Signed-off-by: Deluan <deluan@navidrome.org> * refactor: move scan triggering logic into a helper method for clarity Signed-off-by: Deluan <deluan@navidrome.org> * feat(library): add library path and name fields to album and mediafile models Signed-off-by: Deluan <deluan@navidrome.org> * feat(library): add/remove watchers on demand, not only when server starts Signed-off-by: Deluan <deluan@navidrome.org> * refactor(scanner): streamline library handling by using state-libraries for consistency Signed-off-by: Deluan <deluan@navidrome.org> * fix: track processed libraries by updating state with scan timestamps Signed-off-by: Deluan <deluan@navidrome.org> * prepend libraryID for track and album PIDs Signed-off-by: Deluan <deluan@navidrome.org> * feat(repository): apply library filtering in CountAll methods for albums, folders, and media files Signed-off-by: Deluan <deluan@navidrome.org> * feat(user): add library selection for user creation and editing Signed-off-by: Deluan <deluan@navidrome.org> * feat(library): implement library selection functionality with reducer and UI component Signed-off-by: Deluan <deluan@navidrome.org> # Conflicts: # .github/copilot-instructions.md # Conflicts: # .gitignore * feat(library): add tests for LibrarySelector and library selection hooks Signed-off-by: Deluan <deluan@navidrome.org> * test: add unit tests for file utility functions Signed-off-by: Deluan <deluan@navidrome.org> * feat(library): add library ID filtering for album resources Signed-off-by: Deluan <deluan@navidrome.org> * feat(library): streamline library ID filtering in repositories and update resource filtering logic Signed-off-by: Deluan <deluan@navidrome.org> * fix(repository): add table name handling in filter functions for SQL queries Signed-off-by: Deluan <deluan@navidrome.org> * feat(library): add refresh functionality on LibrarySelector close Signed-off-by: Deluan <deluan@navidrome.org> * feat(artist): add library ID filtering for artists in repository and update resource filtering logic Signed-off-by: Deluan <deluan@navidrome.org> # Conflicts: # persistence/artist_repository.go * Add library_id field support for smart playlists - Add library_id field to smart playlist criteria system - Supports Is and IsNot operators for filtering by library ID - Includes comprehensive test coverage for single values and lists - Enables creation of library-specific smart playlists * feat(subsonic): implement user-specific library access in GetMusicFolders Signed-off-by: Deluan <deluan@navidrome.org> * feat(library): enhance LibrarySelectionField to extract library IDs from record Signed-off-by: Deluan <deluan@navidrome.org> * feat(subsonic): update GetIndexes and GetArtists method to support library ID filtering Signed-off-by: Deluan <deluan@navidrome.org> * fix: ensure LibrarySelector dropdown refreshes on button close Added refresh() call when closing the dropdown via button click to maintain consistency with the ClickAwayListener behavior. This ensures the UI updates properly regardless of how the dropdown is closed, fixing an inconsistent refresh behavior between different closing methods. The fix tracks the previous open state and calls refresh() only when the dropdown was open and is being closed by the button click. * refactor: simplify getUserAccessibleLibraries function and update related tests Signed-off-by: Deluan <deluan@navidrome.org> * feat: enhance selectedMusicFolderIds function to handle valid music folder IDs and improve fallback logic Signed-off-by: Deluan <deluan@navidrome.org> * refactor: change ArtistRepository.GetIndex to accept multiple library IDs Updated the GetIndex method signature to accept a slice of library IDs instead of a single ID, enabling support for filtering artists across multiple libraries simultaneously. Changes include: - Modified ArtistRepository interface in model/artist.go - Updated implementation in persistence/artist_repository.go with improved library filtering logic - Refactored Subsonic API browsing.go to use new selectedMusicFolderIds helper - Added comprehensive test coverage for multiple library scenarios - Updated mock repository implementation for testing This change improves flexibility for multi-library operations while maintaining backward compatibility through the selectedMusicFolderIds helper function. * feat: add library access validation to selectedMusicFolderIds Enhanced the selectedMusicFolderIds function to validate musicFolderId parameters against the user's accessible libraries. Invalid library IDs (those the user doesn't have access to) are now silently filtered out, improving security by preventing users from accessing libraries they don't have permission for. Changes include: - Added validation logic to check musicFolderId parameters against user's accessible libraries - Added slices package import for efficient validation - Enhanced function documentation to clarify validation behavior - Added comprehensive test cases covering validation scenarios - Maintains backward compatibility with existing behavior * feat: implement multi-library support for GetAlbumList and GetAlbumList2 endpoints - Enhanced selectedMusicFolderIds helper to validate and filter library IDs - Added ApplyLibraryFilter function in filter/filters.go for library filtering - Updated getAlbumList to support musicFolderId parameter filtering - Added comprehensive tests for multi-library functionality - Supports single and multiple musicFolderId values - Falls back to all accessible libraries when no musicFolderId provided - Validates library access permissions for user security * feat: implement multi-library support for GetRandomSongs, GetSongsByGenre, GetStarred, and GetStarred2 - Added multi-library filtering to GetRandomSongs endpoint using musicFolderId parameter - Added multi-library filtering to GetSongsByGenre endpoint using musicFolderId parameter - Enhanced GetStarred and GetStarred2 to filter artists, albums, and songs by library - Added Options field to MockMediaFileRepo and MockArtistRepo for test compatibility - Added comprehensive Ginkgo/Gomega tests for all new multi-library functionality - All tests verify proper SQL filter generation and library access validation - Supports single/multiple musicFolderId values with fallback to all accessible libraries * refactor: optimize starred items queries with parallel execution and fix test isolation Refactored starred items functionality by extracting common logic into getStarredItems() method that executes artist, album, and media file queries in parallel for better performance. This eliminates code duplication between GetStarred and GetStarred2 methods while improving response times through concurrent database queries using run.Parallel(). Also fixed test isolation issues by adding missing auth.Init(ds) call in album lists test setup. This resolves nil pointer dereference errors in GetStarred and GetStarred2 tests when run independently. * fix: add ApplyArtistLibraryFilter to filter artists by associated music folders Signed-off-by: Deluan <deluan@navidrome.org> * feat: add library access methods to User model Signed-off-by: Deluan <deluan@navidrome.org> * feat: implement library access filtering for artist queries based on user permissions Signed-off-by: Deluan <deluan@navidrome.org> * feat: enhance artist library filtering based on user permissions and optimize library ID retrieval Signed-off-by: Deluan <deluan@navidrome.org> * fix: return error when any musicFolderId is invalid or inaccessible Changed behavior from silently filtering invalid library IDs to returning ErrorDataNotFound (code 70) when any provided musicFolderId parameter is invalid or the user doesn't have access to it. The error message includes the specific library number for better debugging. This affects album/song list endpoints (getAlbumList, getRandomSongs, getSongsByGenre, getStarred) to provide consistent error handling across all Subsonic API endpoints. Updated corresponding tests to expect errors instead of silent filtering. * feat: add musicFolderId parameter support to Search2 and Search3 endpoints Implemented musicFolderId parameter support for Subsonic API Search2 and Search3 endpoints, completing multi-library functionality across all Subsonic endpoints. Key changes: - Added musicFolderId parameter handling to Search2 and Search3 endpoints - Updated search logic to filter results by specified library or all accessible libraries when parameter not provided - Added proper error handling for invalid/inaccessible musicFolderId values - Refactored SearchableRepository interface to support library filtering with variadic QueryOptions - Updated repository implementations (Album, Artist, MediaFile) to handle library filtering in search operations - Added comprehensive test coverage with robust assertions verifying library filtering works correctly - Enhanced mock repositories to capture QueryOptions for test validation Signed-off-by: Deluan <deluan@navidrome.org> * feat: refresh LibraryList on scan end Signed-off-by: Deluan <deluan@navidrome.org> * fix: allow editing name of main library Signed-off-by: Deluan <deluan@navidrome.org> * refactor: implement SendBroadcastMessage method for event broadcasting Signed-off-by: Deluan <deluan@navidrome.org> * feat: add event broadcasting for library creation, update, and deletion Signed-off-by: Deluan <deluan@navidrome.org> * feat: add useRefreshOnEvents hook for custom refresh logic on event changes Signed-off-by: Deluan <deluan@navidrome.org> * feat: enhance library management with refresh event broadcasting Signed-off-by: Deluan <deluan@navidrome.org> * feat: replace AddUserLibrary and RemoveUserLibrary with SetUserLibraries for better library management Signed-off-by: Deluan <deluan@navidrome.org> * chore: remove commented-out genre repository code from persistence tests * feat: enhance library selection with master checkbox functionality Added a master checkbox to the SelectLibraryInput component, allowing users to select or deselect all libraries at once. This improves user experience by simplifying the selection process when multiple libraries are available. Additionally, updated translations in the en.json file to include a new message for selecting all libraries, ensuring consistency in user interface messaging. Signed-off-by: Deluan <deluan@navidrome.org> * feat: add default library assignment for new users Introduced a new column `default_new_users` in the library table to facilitate automatic assignment of default libraries to new regular users. When a new user is created, they will now be assigned to libraries marked as default, enhancing user experience by ensuring they have immediate access to essential resources. Additionally, updated the user repository logic to handle this new functionality and modified the user creation validation to reflect that library selection is optional for non-admin users. Signed-off-by: Deluan <deluan@navidrome.org> * fix: correct updated_at assignment in library repository Signed-off-by: Deluan <deluan@navidrome.org> * fix: improve cache buffering logic Refactored the cache buffering logic to ensure thread safety when checking the buffer length Signed-off-by: Deluan <deluan@navidrome.org> * fix formating Signed-off-by: Deluan <deluan@navidrome.org> * feat: implement per-library artist statistics with automatic aggregation Implemented comprehensive multi-library support for artist statistics that automatically aggregates stats from user-accessible libraries. This fundamental change moves artist statistics from global scope to per-library granularity while maintaining backward compatibility and transparent operation. Key changes include: - Migrated artist statistics from global artist.stats to per-library library_artist.stats - Added automatic library filtering and aggregation in existing Get/GetAll methods - Updated role-based filtering to work with per-library statistics storage - Enhanced statistics calculation to process and store stats per library - Implemented user permission-aware aggregation that respects library access control - Added comprehensive test coverage for library filtering and restricted user access - Created helper functions to ensure proper library associations in tests This enables users to see statistics that accurately reflect only the content from libraries they have access to, providing proper multi-tenant behavior while maintaining the existing API surface and UI functionality. Signed-off-by: Deluan <deluan@navidrome.org> * feat: add multi-library support with per-library tag statistics - WIP Signed-off-by: Deluan <deluan@navidrome.org> * refactor: genre and tag repositories. add comprehensive tests Signed-off-by: Deluan <deluan@navidrome.org> * feat: add multi-library support to tag repository system Implemented comprehensive library filtering for tag repositories to support the multi-library feature. This change ensures that users only see tags from libraries they have access to, while admin users can see all tags. Key changes: - Enhanced TagRepository.Add() method to accept libraryID parameter for proper library association - Updated baseTagRepository to implement library-aware queries with proper joins - Added library_tag table integration for per-library tag statistics - Implemented user permission-based filtering through user_library associations - Added comprehensive test coverage for library filtering scenarios - Updated UI data provider to include tag filtering by selected libraries - Modified scanner to pass library ID when adding tags during folder processing The implementation maintains backward compatibility while providing proper isolation between libraries for tag-based operations like genres and other metadata tags. * refactor: simplify artist repository library filtering Removed conditional admin logic from applyLibraryFilterToArtistQuery method and unified the library filtering approach to match the tag repository pattern. The method now always uses the same SQL join structure regardless of user role, with admin access handled automatically through user_library associations. Added artistLibraryIdFilter function to properly qualify library_id column references and prevent SQL ambiguity errors when multiple tables contain library_id columns. This ensures the filter targets library_artist.library_id specifically rather than causing ambiguous column name conflicts. * fix: resolve LibrarySelectionField validation error for non-admin users Fixed validation error 'At least one library must be selected for non-admin users' that appeared even when libraries were selected. The issue was caused by a data format mismatch between backend and frontend. The backend sends user data with libraries as an array of objects, but the LibrarySelectionField component expects libraryIds as an array of IDs. Added data transformation in the data provider's getOne method to automatically convert libraries array to libraryIds format when fetching user records. Also extracted validation logic into a separate userValidation module for better code organization and added comprehensive test coverage to prevent similar issues. * refactor: remove unused library access functions and related tests Signed-off-by: Deluan <deluan@navidrome.org> * refactor: rename search_test.go to searching_test.go for consistency Signed-off-by: Deluan <deluan@navidrome.org> * fix: add user context to scrobble buffer getParticipants call Added user context handling to scrobbleBufferRepository.Next method to resolve SQL error 'no such column: library_artist.library_id' when processing scrobble entries in multi-library environments. The artist repository now requires user context for proper library filtering, so we fetch the user and temporarily inject it into the context before calling getParticipants. This ensures background scrobbling operations work correctly with multi-library support. * feat: add cross-library move detection for scanner Implemented cross-library move detection for the scanner phase 2 to properly handle files moved between libraries. This prevents users from losing play counts, ratings, and other metadata when moving files across library boundaries. Changes include: - Added MediaFileRepository methods for two-tier matching: FindRecentFilesByMBZTrackID (primary) and FindRecentFilesByProperties (fallback) - Extended scanner phase 2 pipeline with processCrossLibraryMoves stage that processes files unmatched within their library - Implemented findCrossLibraryMatch with MusicBrainz Release Track ID priority and intrinsic properties fallback - Updated producer logic to handle missing tracks without matches, ensuring cross-library processing - Updated tests to reflect new producer behavior and cross-library functionality The implementation uses existing moveMatched function for unified move operations, automatically preserving all user data through database foreign key relationships. Cross-library moves are detected using the same Equals() and IsEquivalent() matching logic as within-library moves for consistency. Signed-off-by: Deluan <deluan@navidrome.org> * feat: add album annotation reassignment for cross-library moves Implemented album annotation reassignment functionality for the scanner's missing tracks phase. When tracks move between libraries and change album IDs, the system now properly reassigns album annotations (starred status, ratings) from the old album to the new album. This prevents loss of user annotations when tracks are moved across library boundaries. The implementation includes: - Thread-safe annotation reassignment using mutex protection - Duplicate reassignment prevention through processed album tracking - Graceful error handling that doesn't fail the entire move operation - Comprehensive test coverage for various scenarios including error conditions This enhancement ensures data integrity and user experience continuity during cross-library media file movements. * fix: address PR review comments for multi-library support Fixed several issues identified in PR review: - Removed unnecessary artist stats initialization check since the map is already initialized in PostScan() - Improved code clarity in user repository by extracting isNewUser variable to avoid checking count == 0 twice - Fixed library selection logic to properly handle initial library state and prevent overriding user selections These changes address code quality and logic issues identified during the multi-library support PR review. * feat: add automatic playlist statistics refreshing Implemented automatic playlist statistics (duration, size, song count) refreshing when tracks are modified. Added new refreshStats() method to recalculate statistics from playlist tracks, and SetTracks() method to update tracks and refresh statistics atomically. Modified all track manipulation methods (RemoveTracks, AddTracks, AddMediaFiles) to automatically refresh statistics. Updated playlist repository to use the new SetTracks method for consistent statistics handling. * refactor: rename AddTracks to AddMediaFilesByID for clarity Renamed the AddTracks method to AddMediaFilesByID throughout the codebase to better reflect its purpose of adding media files to a playlist by their IDs. This change improves code readability and makes the method name more descriptive of its actual functionality. Updated all references in playlist model, tests, core playlist logic, and Subsonic API handlers to use the new method name. * refactor: consolidate user context access in persistence layer Removed duplicate helper functions userId() and isAdmin() from sql_base_repository.go and consolidated all user context access to use loggedUser(r.ctx).ID and loggedUser(r.ctx).IsAdmin consistently across the persistence layer. This change eliminates code duplication and provides a single, consistent pattern for accessing user context information in repository methods. All functionality remains unchanged - this is purely a code cleanup refactoring. * refactor: eliminate MockLibraryService duplication using embedded struct - Replace 235-line MockLibraryService with 40-line embedded struct pattern - Enhance MockLibraryRepo with service-layer methods (192→310 lines) - Maintain full compatibility with existing tests - All 72 nativeapi specs pass with proper error handling Signed-off-by: Deluan <deluan@navidrome.org> * refactor: cleanup Signed-off-by: Deluan <deluan@navidrome.org> --------- Signed-off-by: Deluan <deluan@navidrome.org>
This commit is contained in:
Deluan Quintão
@@ -0,0 +1,221 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { useDataProvider, useTranslate, useRefresh } from 'react-admin'
|
||||
import {
|
||||
Box,
|
||||
Chip,
|
||||
ClickAwayListener,
|
||||
FormControl,
|
||||
FormGroup,
|
||||
FormControlLabel,
|
||||
Checkbox,
|
||||
Typography,
|
||||
Paper,
|
||||
Popper,
|
||||
makeStyles,
|
||||
} from '@material-ui/core'
|
||||
import { ExpandMore, ExpandLess, LibraryMusic } from '@material-ui/icons'
|
||||
import { setSelectedLibraries, setUserLibraries } from '../actions'
|
||||
import { useRefreshOnEvents } from './useRefreshOnEvents'
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
marginTop: theme.spacing(3),
|
||||
marginBottom: theme.spacing(3),
|
||||
paddingLeft: theme.spacing(2),
|
||||
paddingRight: theme.spacing(2),
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
chip: {
|
||||
borderRadius: theme.spacing(1),
|
||||
height: theme.spacing(4.8),
|
||||
fontSize: '1rem',
|
||||
fontWeight: 'normal',
|
||||
minWidth: '210px',
|
||||
justifyContent: 'flex-start',
|
||||
paddingLeft: theme.spacing(1),
|
||||
paddingRight: theme.spacing(1),
|
||||
marginTop: theme.spacing(0.1),
|
||||
'& .MuiChip-label': {
|
||||
paddingLeft: theme.spacing(2),
|
||||
paddingRight: theme.spacing(1),
|
||||
},
|
||||
'& .MuiChip-icon': {
|
||||
fontSize: '1.2rem',
|
||||
marginLeft: theme.spacing(0.5),
|
||||
},
|
||||
},
|
||||
popper: {
|
||||
zIndex: 1300,
|
||||
},
|
||||
paper: {
|
||||
padding: theme.spacing(2),
|
||||
marginTop: theme.spacing(1),
|
||||
minWidth: 300,
|
||||
maxWidth: 400,
|
||||
},
|
||||
headerContainer: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginBottom: 0,
|
||||
},
|
||||
masterCheckbox: {
|
||||
padding: '7px',
|
||||
marginLeft: '-9px',
|
||||
marginRight: 0,
|
||||
},
|
||||
}))
|
||||
|
||||
const LibrarySelector = () => {
|
||||
const classes = useStyles()
|
||||
const dispatch = useDispatch()
|
||||
const dataProvider = useDataProvider()
|
||||
const translate = useTranslate()
|
||||
const refresh = useRefresh()
|
||||
const [anchorEl, setAnchorEl] = useState(null)
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const { userLibraries, selectedLibraries } = useSelector(
|
||||
(state) => state.library,
|
||||
)
|
||||
|
||||
// Load user's libraries when component mounts
|
||||
const loadUserLibraries = useCallback(async () => {
|
||||
const userId = localStorage.getItem('userId')
|
||||
if (userId) {
|
||||
try {
|
||||
const { data } = await dataProvider.getOne('user', { id: userId })
|
||||
const libraries = data.libraries || []
|
||||
dispatch(setUserLibraries(libraries))
|
||||
} catch (error) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn(
|
||||
'Could not load user libraries (this may be expected for non-admin users):',
|
||||
error,
|
||||
)
|
||||
}
|
||||
}
|
||||
}, [dataProvider, dispatch])
|
||||
|
||||
// Initial load
|
||||
useEffect(() => {
|
||||
loadUserLibraries()
|
||||
}, [loadUserLibraries])
|
||||
|
||||
// Reload user libraries when library changes occur
|
||||
useRefreshOnEvents({
|
||||
events: ['library', 'user'],
|
||||
onRefresh: loadUserLibraries,
|
||||
})
|
||||
|
||||
// Don't render if user has no libraries or only has one library
|
||||
if (!userLibraries.length || userLibraries.length === 1) {
|
||||
return null
|
||||
}
|
||||
|
||||
const handleToggle = (event) => {
|
||||
setAnchorEl(event.currentTarget)
|
||||
const wasOpen = open
|
||||
setOpen(!open)
|
||||
// Refresh data when closing the dropdown
|
||||
if (wasOpen) {
|
||||
refresh()
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false)
|
||||
refresh()
|
||||
}
|
||||
|
||||
const handleLibraryToggle = (libraryId) => {
|
||||
const newSelection = selectedLibraries.includes(libraryId)
|
||||
? selectedLibraries.filter((id) => id !== libraryId)
|
||||
: [...selectedLibraries, libraryId]
|
||||
|
||||
dispatch(setSelectedLibraries(newSelection))
|
||||
}
|
||||
|
||||
const handleMasterCheckboxChange = () => {
|
||||
if (isAllSelected) {
|
||||
dispatch(setSelectedLibraries([]))
|
||||
} else {
|
||||
const allIds = userLibraries.map((lib) => lib.id)
|
||||
dispatch(setSelectedLibraries(allIds))
|
||||
}
|
||||
}
|
||||
|
||||
const selectedCount = selectedLibraries.length
|
||||
const totalCount = userLibraries.length
|
||||
const isAllSelected = selectedCount === totalCount
|
||||
const isNoneSelected = selectedCount === 0
|
||||
const isIndeterminate = selectedCount > 0 && selectedCount < totalCount
|
||||
|
||||
const displayText = isNoneSelected
|
||||
? translate('menu.librarySelector.none') + ` (0 of ${totalCount})`
|
||||
: isAllSelected
|
||||
? translate('menu.librarySelector.allLibraries', { count: totalCount })
|
||||
: translate('menu.librarySelector.multipleLibraries', {
|
||||
selected: selectedCount,
|
||||
total: totalCount,
|
||||
})
|
||||
|
||||
return (
|
||||
<Box className={classes.root}>
|
||||
<Chip
|
||||
icon={<LibraryMusic />}
|
||||
label={displayText}
|
||||
onClick={handleToggle}
|
||||
onDelete={open ? handleToggle : undefined}
|
||||
deleteIcon={open ? <ExpandLess /> : <ExpandMore />}
|
||||
variant="outlined"
|
||||
className={classes.chip}
|
||||
/>
|
||||
|
||||
<Popper
|
||||
open={open}
|
||||
anchorEl={anchorEl}
|
||||
placement="bottom-start"
|
||||
className={classes.popper}
|
||||
>
|
||||
<ClickAwayListener onClickAway={handleClose}>
|
||||
<Paper className={classes.paper}>
|
||||
<Box className={classes.headerContainer}>
|
||||
<Checkbox
|
||||
checked={isAllSelected}
|
||||
indeterminate={isIndeterminate}
|
||||
onChange={handleMasterCheckboxChange}
|
||||
size="small"
|
||||
className={classes.masterCheckbox}
|
||||
/>
|
||||
<Typography>
|
||||
{translate('menu.librarySelector.selectLibraries')}:
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<FormControl component="fieldset" variant="standard" fullWidth>
|
||||
<FormGroup>
|
||||
{userLibraries.map((library) => (
|
||||
<FormControlLabel
|
||||
key={library.id}
|
||||
control={
|
||||
<Checkbox
|
||||
checked={selectedLibraries.includes(library.id)}
|
||||
onChange={() => handleLibraryToggle(library.id)}
|
||||
size="small"
|
||||
/>
|
||||
}
|
||||
label={library.name}
|
||||
/>
|
||||
))}
|
||||
</FormGroup>
|
||||
</FormControl>
|
||||
</Paper>
|
||||
</ClickAwayListener>
|
||||
</Popper>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default LibrarySelector
|
||||
@@ -0,0 +1,517 @@
|
||||
import React from 'react'
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest'
|
||||
import LibrarySelector from './LibrarySelector'
|
||||
|
||||
// Mock dependencies
|
||||
const mockDispatch = vi.fn()
|
||||
const mockDataProvider = {
|
||||
getOne: vi.fn(),
|
||||
}
|
||||
const mockIdentity = { username: 'testuser' }
|
||||
const mockRefresh = vi.fn()
|
||||
const mockTranslate = vi.fn((key, options = {}) => {
|
||||
const translations = {
|
||||
'menu.librarySelector.allLibraries': `All Libraries (${options.count || 0})`,
|
||||
'menu.librarySelector.multipleLibraries': `${options.selected || 0} of ${options.total || 0} Libraries`,
|
||||
'menu.librarySelector.none': 'None',
|
||||
'menu.librarySelector.selectLibraries': 'Select Libraries',
|
||||
}
|
||||
return translations[key] || key
|
||||
})
|
||||
|
||||
vi.mock('react-redux', () => ({
|
||||
useDispatch: () => mockDispatch,
|
||||
useSelector: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock('react-admin', () => ({
|
||||
useDataProvider: () => mockDataProvider,
|
||||
useGetIdentity: () => ({ identity: mockIdentity }),
|
||||
useTranslate: () => mockTranslate,
|
||||
useRefresh: () => mockRefresh,
|
||||
}))
|
||||
|
||||
// Mock Material-UI components
|
||||
vi.mock('@material-ui/core', () => ({
|
||||
Box: ({ children, className, ...props }) => (
|
||||
<div className={className} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
Chip: ({ label, onClick, onDelete, deleteIcon, icon, ...props }) => (
|
||||
<button onClick={onClick} {...props}>
|
||||
{icon}
|
||||
{label}
|
||||
{deleteIcon && <span onClick={onDelete}>{deleteIcon}</span>}
|
||||
</button>
|
||||
),
|
||||
ClickAwayListener: ({ children, onClickAway }) => (
|
||||
<div data-testid="click-away-listener" onMouseDown={onClickAway}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
Collapse: ({ children, in: inProp }) =>
|
||||
inProp ? <div>{children}</div> : null,
|
||||
FormControl: ({ children }) => <div>{children}</div>,
|
||||
FormGroup: ({ children }) => <div>{children}</div>,
|
||||
FormControlLabel: ({ control, label }) => (
|
||||
<label>
|
||||
{control}
|
||||
{label}
|
||||
</label>
|
||||
),
|
||||
Checkbox: ({
|
||||
checked,
|
||||
indeterminate,
|
||||
onChange,
|
||||
size,
|
||||
className,
|
||||
...props
|
||||
}) => (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
ref={(el) => {
|
||||
if (el) el.indeterminate = indeterminate
|
||||
}}
|
||||
onChange={onChange}
|
||||
className={className}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
Typography: ({ children, variant, ...props }) => (
|
||||
<span {...props}>{children}</span>
|
||||
),
|
||||
Paper: ({ children, className }) => (
|
||||
<div className={className}>{children}</div>
|
||||
),
|
||||
Popper: ({ open, children, anchorEl, placement, className }) =>
|
||||
open ? (
|
||||
<div className={className} data-testid="popper">
|
||||
{children}
|
||||
</div>
|
||||
) : null,
|
||||
makeStyles: (styles) => () => {
|
||||
if (typeof styles === 'function') {
|
||||
return styles({
|
||||
spacing: (value) => `${value * 8}px`,
|
||||
palette: { divider: '#ccc' },
|
||||
shape: { borderRadius: 4 },
|
||||
})
|
||||
}
|
||||
return styles
|
||||
},
|
||||
}))
|
||||
|
||||
vi.mock('@material-ui/icons', () => ({
|
||||
ExpandMore: () => <span data-testid="expand-more">▼</span>,
|
||||
ExpandLess: () => <span data-testid="expand-less">▲</span>,
|
||||
LibraryMusic: () => <span data-testid="library-music">🎵</span>,
|
||||
}))
|
||||
|
||||
// Mock actions
|
||||
vi.mock('../actions', () => ({
|
||||
setSelectedLibraries: (libraries) => ({
|
||||
type: 'SET_SELECTED_LIBRARIES',
|
||||
data: libraries,
|
||||
}),
|
||||
setUserLibraries: (libraries) => ({
|
||||
type: 'SET_USER_LIBRARIES',
|
||||
data: libraries,
|
||||
}),
|
||||
}))
|
||||
|
||||
describe('LibrarySelector', () => {
|
||||
const mockLibraries = [
|
||||
{ id: '1', name: 'Music Library', path: '/music' },
|
||||
{ id: '2', name: 'Podcasts', path: '/podcasts' },
|
||||
{ id: '3', name: 'Audiobooks', path: '/audiobooks' },
|
||||
]
|
||||
|
||||
const defaultState = {
|
||||
userLibraries: mockLibraries,
|
||||
selectedLibraries: ['1'],
|
||||
}
|
||||
|
||||
let mockUseSelector
|
||||
|
||||
beforeEach(async () => {
|
||||
vi.clearAllMocks()
|
||||
const { useSelector } = await import('react-redux')
|
||||
mockUseSelector = vi.mocked(useSelector)
|
||||
mockDataProvider.getOne.mockResolvedValue({
|
||||
data: { libraries: mockLibraries },
|
||||
})
|
||||
// Setup localStorage mock
|
||||
Object.defineProperty(window, 'localStorage', {
|
||||
value: {
|
||||
getItem: vi.fn(() => null), // Default to null to prevent API calls
|
||||
setItem: vi.fn(),
|
||||
},
|
||||
writable: true,
|
||||
})
|
||||
})
|
||||
|
||||
const renderLibrarySelector = (selectorState = defaultState) => {
|
||||
mockUseSelector.mockImplementation((selector) =>
|
||||
selector({ library: selectorState }),
|
||||
)
|
||||
|
||||
return render(<LibrarySelector />)
|
||||
}
|
||||
|
||||
describe('when user has no libraries', () => {
|
||||
it('should not render anything', () => {
|
||||
const { container } = renderLibrarySelector({
|
||||
userLibraries: [],
|
||||
selectedLibraries: [],
|
||||
})
|
||||
expect(container.firstChild).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('when user has only one library', () => {
|
||||
it('should not render anything', () => {
|
||||
const singleLibrary = [mockLibraries[0]]
|
||||
const { container } = renderLibrarySelector({
|
||||
userLibraries: singleLibrary,
|
||||
selectedLibraries: ['1'],
|
||||
})
|
||||
expect(container.firstChild).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('when user has multiple libraries', () => {
|
||||
it('should render the chip with correct label when one library is selected', () => {
|
||||
renderLibrarySelector()
|
||||
|
||||
expect(screen.getByRole('button')).toBeInTheDocument()
|
||||
expect(screen.getByText('1 of 3 Libraries')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('library-music')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('expand-more')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render the chip with "All Libraries" when all libraries are selected', () => {
|
||||
renderLibrarySelector({
|
||||
userLibraries: mockLibraries,
|
||||
selectedLibraries: ['1', '2', '3'],
|
||||
})
|
||||
|
||||
expect(screen.getByText('All Libraries (3)')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render the chip with "None" when no libraries are selected', () => {
|
||||
renderLibrarySelector({
|
||||
userLibraries: mockLibraries,
|
||||
selectedLibraries: [],
|
||||
})
|
||||
|
||||
expect(screen.getByText('None (0 of 3)')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should show expand less icon when dropdown is open', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderLibrarySelector()
|
||||
|
||||
const chipButton = screen.getByRole('button')
|
||||
await user.click(chipButton)
|
||||
|
||||
expect(screen.getByTestId('expand-less')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should open dropdown when chip is clicked', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderLibrarySelector()
|
||||
|
||||
const chipButton = screen.getByRole('button')
|
||||
await user.click(chipButton)
|
||||
|
||||
expect(screen.getByTestId('popper')).toBeInTheDocument()
|
||||
expect(screen.getByText('Select Libraries:')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should display all library names in dropdown', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderLibrarySelector()
|
||||
|
||||
const chipButton = screen.getByRole('button')
|
||||
await user.click(chipButton)
|
||||
|
||||
expect(screen.getByText('Music Library')).toBeInTheDocument()
|
||||
expect(screen.getByText('Podcasts')).toBeInTheDocument()
|
||||
expect(screen.getByText('Audiobooks')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should not display library paths', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderLibrarySelector()
|
||||
|
||||
const chipButton = screen.getByRole('button')
|
||||
await user.click(chipButton)
|
||||
|
||||
expect(screen.queryByText('/music')).not.toBeInTheDocument()
|
||||
expect(screen.queryByText('/podcasts')).not.toBeInTheDocument()
|
||||
expect(screen.queryByText('/audiobooks')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
describe('master checkbox', () => {
|
||||
it('should be checked when all libraries are selected', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderLibrarySelector({
|
||||
userLibraries: mockLibraries,
|
||||
selectedLibraries: ['1', '2', '3'],
|
||||
})
|
||||
|
||||
const chipButton = screen.getByRole('button')
|
||||
await user.click(chipButton)
|
||||
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
const masterCheckbox = checkboxes[0] // First checkbox is the master checkbox
|
||||
expect(masterCheckbox.checked).toBe(true)
|
||||
expect(masterCheckbox.indeterminate).toBe(false)
|
||||
})
|
||||
|
||||
it('should be unchecked when no libraries are selected', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderLibrarySelector({
|
||||
userLibraries: mockLibraries,
|
||||
selectedLibraries: [],
|
||||
})
|
||||
|
||||
const chipButton = screen.getByRole('button')
|
||||
await user.click(chipButton)
|
||||
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
const masterCheckbox = checkboxes[0]
|
||||
expect(masterCheckbox.checked).toBe(false)
|
||||
expect(masterCheckbox.indeterminate).toBe(false)
|
||||
})
|
||||
|
||||
it('should be indeterminate when some libraries are selected', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderLibrarySelector({
|
||||
userLibraries: mockLibraries,
|
||||
selectedLibraries: ['1', '2'],
|
||||
})
|
||||
|
||||
const chipButton = screen.getByRole('button')
|
||||
await user.click(chipButton)
|
||||
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
const masterCheckbox = checkboxes[0]
|
||||
expect(masterCheckbox.checked).toBe(false)
|
||||
expect(masterCheckbox.indeterminate).toBe(true)
|
||||
})
|
||||
|
||||
it('should select all libraries when clicked and none are selected', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderLibrarySelector({
|
||||
userLibraries: mockLibraries,
|
||||
selectedLibraries: [],
|
||||
})
|
||||
|
||||
// Clear the dispatch mock after initial mount (it sets user libraries)
|
||||
mockDispatch.mockClear()
|
||||
|
||||
const chipButton = screen.getByRole('button')
|
||||
await user.click(chipButton)
|
||||
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
const masterCheckbox = checkboxes[0]
|
||||
|
||||
// Use fireEvent.click to trigger the onChange event
|
||||
fireEvent.click(masterCheckbox)
|
||||
|
||||
expect(mockDispatch).toHaveBeenCalledWith({
|
||||
type: 'SET_SELECTED_LIBRARIES',
|
||||
data: ['1', '2', '3'],
|
||||
})
|
||||
})
|
||||
|
||||
it('should deselect all libraries when clicked and all are selected', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderLibrarySelector({
|
||||
userLibraries: mockLibraries,
|
||||
selectedLibraries: ['1', '2', '3'],
|
||||
})
|
||||
|
||||
// Clear the dispatch mock after initial mount (it sets user libraries)
|
||||
mockDispatch.mockClear()
|
||||
|
||||
const chipButton = screen.getByRole('button')
|
||||
await user.click(chipButton)
|
||||
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
const masterCheckbox = checkboxes[0]
|
||||
|
||||
fireEvent.click(masterCheckbox)
|
||||
|
||||
expect(mockDispatch).toHaveBeenCalledWith({
|
||||
type: 'SET_SELECTED_LIBRARIES',
|
||||
data: [],
|
||||
})
|
||||
})
|
||||
|
||||
it('should select all libraries when clicked and some are selected', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderLibrarySelector({
|
||||
userLibraries: mockLibraries,
|
||||
selectedLibraries: ['1'],
|
||||
})
|
||||
|
||||
// Clear the dispatch mock after initial mount (it sets user libraries)
|
||||
mockDispatch.mockClear()
|
||||
|
||||
const chipButton = screen.getByRole('button')
|
||||
await user.click(chipButton)
|
||||
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
const masterCheckbox = checkboxes[0]
|
||||
|
||||
fireEvent.click(masterCheckbox)
|
||||
|
||||
expect(mockDispatch).toHaveBeenCalledWith({
|
||||
type: 'SET_SELECTED_LIBRARIES',
|
||||
data: ['1', '2', '3'],
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('individual library checkboxes', () => {
|
||||
it('should show correct checked state for each library', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderLibrarySelector({
|
||||
userLibraries: mockLibraries,
|
||||
selectedLibraries: ['1', '3'],
|
||||
})
|
||||
|
||||
const chipButton = screen.getByRole('button')
|
||||
await user.click(chipButton)
|
||||
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
// Skip master checkbox (index 0)
|
||||
expect(checkboxes[1].checked).toBe(true) // Music Library
|
||||
expect(checkboxes[2].checked).toBe(false) // Podcasts
|
||||
expect(checkboxes[3].checked).toBe(true) // Audiobooks
|
||||
})
|
||||
|
||||
it('should toggle library selection when individual checkbox is clicked', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderLibrarySelector()
|
||||
|
||||
// Clear the dispatch mock after initial mount (it sets user libraries)
|
||||
mockDispatch.mockClear()
|
||||
|
||||
const chipButton = screen.getByRole('button')
|
||||
await user.click(chipButton)
|
||||
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
const podcastsCheckbox = checkboxes[2] // Podcasts checkbox
|
||||
|
||||
fireEvent.click(podcastsCheckbox)
|
||||
|
||||
expect(mockDispatch).toHaveBeenCalledWith({
|
||||
type: 'SET_SELECTED_LIBRARIES',
|
||||
data: ['1', '2'],
|
||||
})
|
||||
})
|
||||
|
||||
it('should remove library from selection when clicking checked library', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderLibrarySelector({
|
||||
userLibraries: mockLibraries,
|
||||
selectedLibraries: ['1', '2'],
|
||||
})
|
||||
|
||||
// Clear the dispatch mock after initial mount (it sets user libraries)
|
||||
mockDispatch.mockClear()
|
||||
|
||||
const chipButton = screen.getByRole('button')
|
||||
await user.click(chipButton)
|
||||
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
const musicCheckbox = checkboxes[1] // Music Library checkbox
|
||||
|
||||
fireEvent.click(musicCheckbox)
|
||||
|
||||
expect(mockDispatch).toHaveBeenCalledWith({
|
||||
type: 'SET_SELECTED_LIBRARIES',
|
||||
data: ['2'],
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
it('should close dropdown when clicking away', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderLibrarySelector()
|
||||
|
||||
// Open dropdown
|
||||
const chipButton = screen.getByRole('button')
|
||||
await user.click(chipButton)
|
||||
|
||||
expect(screen.getByTestId('popper')).toBeInTheDocument()
|
||||
|
||||
// Click away
|
||||
const clickAwayListener = screen.getByTestId('click-away-listener')
|
||||
fireEvent.mouseDown(clickAwayListener)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByTestId('popper')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
// Should trigger refresh when closing
|
||||
expect(mockRefresh).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('should load user libraries on mount', async () => {
|
||||
// Override localStorage mock to return a userId for this test
|
||||
window.localStorage.getItem.mockReturnValue('user123')
|
||||
|
||||
mockDataProvider.getOne.mockResolvedValue({
|
||||
data: { libraries: mockLibraries },
|
||||
})
|
||||
|
||||
renderLibrarySelector({ userLibraries: [], selectedLibraries: [] })
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockDataProvider.getOne).toHaveBeenCalledWith('user', {
|
||||
id: 'user123',
|
||||
})
|
||||
})
|
||||
|
||||
expect(mockDispatch).toHaveBeenCalledWith({
|
||||
type: 'SET_USER_LIBRARIES',
|
||||
data: mockLibraries,
|
||||
})
|
||||
})
|
||||
|
||||
it('should handle API error gracefully', async () => {
|
||||
// Override localStorage mock to return a userId for this test
|
||||
window.localStorage.getItem.mockReturnValue('user123')
|
||||
|
||||
const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
|
||||
mockDataProvider.getOne.mockRejectedValue(new Error('API Error'))
|
||||
|
||||
renderLibrarySelector({ userLibraries: [], selectedLibraries: [] })
|
||||
|
||||
await waitFor(() => {
|
||||
expect(consoleSpy).toHaveBeenCalledWith(
|
||||
'Could not load user libraries (this may be expected for non-admin users):',
|
||||
expect.any(Error),
|
||||
)
|
||||
})
|
||||
|
||||
consoleSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('should not load libraries when userId is not available', () => {
|
||||
window.localStorage.getItem.mockReturnValue(null)
|
||||
|
||||
renderLibrarySelector({ userLibraries: [], selectedLibraries: [] })
|
||||
|
||||
expect(mockDataProvider.getOne).not.toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,228 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react'
|
||||
import Checkbox from '@material-ui/core/Checkbox'
|
||||
import CheckBoxIcon from '@material-ui/icons/CheckBox'
|
||||
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'
|
||||
import {
|
||||
List,
|
||||
ListItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Typography,
|
||||
Box,
|
||||
} from '@material-ui/core'
|
||||
import { useGetList, useTranslate } from 'react-admin'
|
||||
import PropTypes from 'prop-types'
|
||||
import { makeStyles } from '@material-ui/core'
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
width: '960px',
|
||||
maxWidth: '100%',
|
||||
},
|
||||
headerContainer: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginBottom: theme.spacing(1),
|
||||
paddingLeft: theme.spacing(1),
|
||||
},
|
||||
masterCheckbox: {
|
||||
padding: '7px',
|
||||
marginLeft: '-9px',
|
||||
marginRight: theme.spacing(1),
|
||||
},
|
||||
libraryList: {
|
||||
height: '120px',
|
||||
overflow: 'auto',
|
||||
border: `1px solid ${theme.palette.divider}`,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
},
|
||||
listItem: {
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
},
|
||||
emptyMessage: {
|
||||
padding: theme.spacing(2),
|
||||
textAlign: 'center',
|
||||
color: theme.palette.text.secondary,
|
||||
},
|
||||
}))
|
||||
|
||||
const EmptyLibraryMessage = () => {
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
<div className={classes.emptyMessage}>
|
||||
<Typography variant="body2">No libraries available</Typography>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const LibraryListItem = ({ library, isSelected, onToggle }) => {
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
<ListItem
|
||||
className={classes.listItem}
|
||||
button
|
||||
onClick={() => onToggle(library)}
|
||||
dense
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Checkbox
|
||||
icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
|
||||
checkedIcon={<CheckBoxIcon fontSize="small" />}
|
||||
checked={isSelected}
|
||||
tabIndex={-1}
|
||||
disableRipple
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={library.name} />
|
||||
</ListItem>
|
||||
)
|
||||
}
|
||||
|
||||
export const SelectLibraryInput = ({
|
||||
onChange,
|
||||
value = [],
|
||||
isNewUser = false,
|
||||
}) => {
|
||||
const classes = useStyles()
|
||||
const translate = useTranslate()
|
||||
const [selectedLibraryIds, setSelectedLibraryIds] = useState([])
|
||||
const [hasInitialized, setHasInitialized] = useState(false)
|
||||
|
||||
const { ids, data, isLoading } = useGetList(
|
||||
'library',
|
||||
{ page: 1, perPage: -1 },
|
||||
{ field: 'name', order: 'ASC' },
|
||||
)
|
||||
|
||||
const options = useMemo(
|
||||
() => (ids && ids.map((id) => data[id])) || [],
|
||||
[ids, data],
|
||||
)
|
||||
|
||||
// Reset initialization state when isNewUser changes
|
||||
useEffect(() => {
|
||||
if (isNewUser) {
|
||||
setHasInitialized(false)
|
||||
}
|
||||
}, [isNewUser])
|
||||
|
||||
// Pre-select default libraries for new users
|
||||
useEffect(() => {
|
||||
if (
|
||||
isNewUser &&
|
||||
!isLoading &&
|
||||
options.length > 0 &&
|
||||
!hasInitialized &&
|
||||
Array.isArray(value) &&
|
||||
value.length === 0
|
||||
) {
|
||||
const defaultLibraryIds = options
|
||||
.filter((lib) => lib.defaultNewUsers)
|
||||
.map((lib) => lib.id)
|
||||
|
||||
if (defaultLibraryIds.length > 0) {
|
||||
setSelectedLibraryIds(defaultLibraryIds)
|
||||
onChange(defaultLibraryIds)
|
||||
}
|
||||
|
||||
setHasInitialized(true)
|
||||
}
|
||||
}, [isNewUser, isLoading, options, hasInitialized, value, onChange])
|
||||
|
||||
// Update selectedLibraryIds when value prop changes (for editing mode and pre-selection)
|
||||
useEffect(() => {
|
||||
// For new users, only sync from value prop if it has actual data
|
||||
// This prevents empty initial state from overriding our pre-selection
|
||||
if (isNewUser && Array.isArray(value) && value.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
const libraryIds = value.map((item) =>
|
||||
typeof item === 'object' ? item.id : item,
|
||||
)
|
||||
setSelectedLibraryIds(libraryIds)
|
||||
} else if (value.length === 0) {
|
||||
// Handle case where value is explicitly set to empty array (for existing users)
|
||||
setSelectedLibraryIds([])
|
||||
}
|
||||
}, [value, isNewUser, hasInitialized])
|
||||
|
||||
const isLibrarySelected = (library) => selectedLibraryIds.includes(library.id)
|
||||
|
||||
const handleLibraryToggle = (library) => {
|
||||
const isSelected = selectedLibraryIds.includes(library.id)
|
||||
let newSelection
|
||||
|
||||
if (isSelected) {
|
||||
newSelection = selectedLibraryIds.filter((id) => id !== library.id)
|
||||
} else {
|
||||
newSelection = [...selectedLibraryIds, library.id]
|
||||
}
|
||||
|
||||
setSelectedLibraryIds(newSelection)
|
||||
onChange(newSelection)
|
||||
}
|
||||
|
||||
const handleMasterCheckboxChange = () => {
|
||||
const isAllSelected = selectedLibraryIds.length === options.length
|
||||
const newSelection = isAllSelected ? [] : options.map((lib) => lib.id)
|
||||
|
||||
setSelectedLibraryIds(newSelection)
|
||||
onChange(newSelection)
|
||||
}
|
||||
|
||||
const selectedCount = selectedLibraryIds.length
|
||||
const totalCount = options.length
|
||||
const isAllSelected = selectedCount === totalCount && totalCount > 0
|
||||
const isIndeterminate = selectedCount > 0 && selectedCount < totalCount
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
{options.length > 1 && (
|
||||
<Box className={classes.headerContainer}>
|
||||
<Checkbox
|
||||
checked={isAllSelected}
|
||||
indeterminate={isIndeterminate}
|
||||
onChange={handleMasterCheckboxChange}
|
||||
size="small"
|
||||
className={classes.masterCheckbox}
|
||||
/>
|
||||
<Typography variant="body2">
|
||||
{translate('resources.user.message.selectAllLibraries')}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<List className={classes.libraryList}>
|
||||
{options.length === 0 ? (
|
||||
<EmptyLibraryMessage />
|
||||
) : (
|
||||
options.map((library) => (
|
||||
<LibraryListItem
|
||||
key={library.id}
|
||||
library={library}
|
||||
isSelected={isLibrarySelected(library)}
|
||||
onToggle={handleLibraryToggle}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
SelectLibraryInput.propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
value: PropTypes.array,
|
||||
isNewUser: PropTypes.bool,
|
||||
}
|
||||
|
||||
LibraryListItem.propTypes = {
|
||||
library: PropTypes.object.isRequired,
|
||||
isSelected: PropTypes.bool.isRequired,
|
||||
onToggle: PropTypes.func.isRequired,
|
||||
}
|
||||
@@ -0,0 +1,458 @@
|
||||
import * as React from 'react'
|
||||
import { render, screen, fireEvent, cleanup } from '@testing-library/react'
|
||||
import { SelectLibraryInput } from './SelectLibraryInput'
|
||||
import { useGetList } from 'react-admin'
|
||||
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
|
||||
|
||||
// Mock Material-UI components
|
||||
vi.mock('@material-ui/core', () => ({
|
||||
List: ({ children }) => <div>{children}</div>,
|
||||
ListItem: ({ children, button, onClick, dense, className }) => (
|
||||
<button onClick={onClick} className={className}>
|
||||
{children}
|
||||
</button>
|
||||
),
|
||||
ListItemIcon: ({ children }) => <span>{children}</span>,
|
||||
ListItemText: ({ primary }) => <span>{primary}</span>,
|
||||
Typography: ({ children, variant }) => <span>{children}</span>,
|
||||
Box: ({ children, className }) => <div className={className}>{children}</div>,
|
||||
Checkbox: ({
|
||||
checked,
|
||||
indeterminate,
|
||||
onChange,
|
||||
size,
|
||||
className,
|
||||
...props
|
||||
}) => (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
ref={(el) => {
|
||||
if (el) el.indeterminate = indeterminate
|
||||
}}
|
||||
onChange={onChange}
|
||||
className={className}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
makeStyles: () => () => ({}),
|
||||
}))
|
||||
|
||||
// Mock Material-UI icons
|
||||
vi.mock('@material-ui/icons', () => ({
|
||||
CheckBox: () => <span>☑</span>,
|
||||
CheckBoxOutlineBlank: () => <span>☐</span>,
|
||||
}))
|
||||
|
||||
// Mock the react-admin hook
|
||||
vi.mock('react-admin', () => ({
|
||||
useGetList: vi.fn(),
|
||||
useTranslate: vi.fn(() => (key) => key), // Simple translation mock
|
||||
}))
|
||||
|
||||
describe('<SelectLibraryInput />', () => {
|
||||
const mockOnChange = vi.fn()
|
||||
|
||||
beforeEach(() => {
|
||||
// Reset the mock before each test
|
||||
mockOnChange.mockClear()
|
||||
})
|
||||
|
||||
afterEach(cleanup)
|
||||
|
||||
it('should render empty message when no libraries available', () => {
|
||||
// Mock empty library response
|
||||
useGetList.mockReturnValue({
|
||||
ids: [],
|
||||
data: {},
|
||||
})
|
||||
|
||||
render(<SelectLibraryInput onChange={mockOnChange} value={[]} />)
|
||||
expect(screen.getByText('No libraries available')).not.toBeNull()
|
||||
})
|
||||
|
||||
it('should render libraries when available', () => {
|
||||
// Mock libraries
|
||||
const mockLibraries = {
|
||||
1: { id: '1', name: 'Library 1' },
|
||||
2: { id: '2', name: 'Library 2' },
|
||||
}
|
||||
useGetList.mockReturnValue({
|
||||
ids: ['1', '2'],
|
||||
data: mockLibraries,
|
||||
})
|
||||
|
||||
render(<SelectLibraryInput onChange={mockOnChange} value={[]} />)
|
||||
expect(screen.getByText('Library 1')).not.toBeNull()
|
||||
expect(screen.getByText('Library 2')).not.toBeNull()
|
||||
})
|
||||
|
||||
it('should toggle selection when a library is clicked', () => {
|
||||
// Mock libraries
|
||||
const mockLibraries = {
|
||||
1: { id: '1', name: 'Library 1' },
|
||||
2: { id: '2', name: 'Library 2' },
|
||||
}
|
||||
|
||||
// Test selecting an item
|
||||
useGetList.mockReturnValue({
|
||||
ids: ['1', '2'],
|
||||
data: mockLibraries,
|
||||
})
|
||||
render(<SelectLibraryInput onChange={mockOnChange} value={[]} />)
|
||||
|
||||
// Find the library buttons by their text content
|
||||
const library1Button = screen.getByText('Library 1').closest('button')
|
||||
fireEvent.click(library1Button)
|
||||
expect(mockOnChange).toHaveBeenCalledWith(['1'])
|
||||
|
||||
// Clean up to avoid DOM duplication
|
||||
cleanup()
|
||||
mockOnChange.mockClear()
|
||||
|
||||
// Test deselecting an item
|
||||
useGetList.mockReturnValue({
|
||||
ids: ['1', '2'],
|
||||
data: mockLibraries,
|
||||
})
|
||||
render(<SelectLibraryInput onChange={mockOnChange} value={['1']} />)
|
||||
|
||||
// Find the library button again and click to deselect
|
||||
const library1ButtonDeselect = screen
|
||||
.getByText('Library 1')
|
||||
.closest('button')
|
||||
fireEvent.click(library1ButtonDeselect)
|
||||
expect(mockOnChange).toHaveBeenCalledWith([])
|
||||
})
|
||||
|
||||
it('should correctly initialize with provided values', () => {
|
||||
// Mock libraries
|
||||
const mockLibraries = {
|
||||
1: { id: '1', name: 'Library 1' },
|
||||
2: { id: '2', name: 'Library 2' },
|
||||
}
|
||||
useGetList.mockReturnValue({
|
||||
ids: ['1', '2'],
|
||||
data: mockLibraries,
|
||||
})
|
||||
|
||||
// Initial value as array of IDs
|
||||
render(<SelectLibraryInput onChange={mockOnChange} value={['1']} />)
|
||||
|
||||
// Check that checkbox for Library 1 is checked
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
// With master checkbox, individual checkboxes start at index 1
|
||||
expect(checkboxes[1].checked).toBe(true) // Library 1
|
||||
expect(checkboxes[2].checked).toBe(false) // Library 2
|
||||
})
|
||||
|
||||
it('should handle value as array of objects', () => {
|
||||
// Mock libraries
|
||||
const mockLibraries = {
|
||||
1: { id: '1', name: 'Library 1' },
|
||||
2: { id: '2', name: 'Library 2' },
|
||||
}
|
||||
useGetList.mockReturnValue({
|
||||
ids: ['1', '2'],
|
||||
data: mockLibraries,
|
||||
})
|
||||
|
||||
// Initial value as array of objects with id property
|
||||
render(<SelectLibraryInput onChange={mockOnChange} value={[{ id: '2' }]} />)
|
||||
|
||||
// Check that checkbox for Library 2 is checked
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
// With master checkbox, index shifts by 1
|
||||
expect(checkboxes[1].checked).toBe(false) // Library 1
|
||||
expect(checkboxes[2].checked).toBe(true) // Library 2
|
||||
})
|
||||
|
||||
it('should render master checkbox when there are multiple libraries', () => {
|
||||
// Mock libraries
|
||||
const mockLibraries = {
|
||||
1: { id: '1', name: 'Library 1' },
|
||||
2: { id: '2', name: 'Library 2' },
|
||||
}
|
||||
useGetList.mockReturnValue({
|
||||
ids: ['1', '2'],
|
||||
data: mockLibraries,
|
||||
})
|
||||
|
||||
render(<SelectLibraryInput onChange={mockOnChange} value={[]} />)
|
||||
|
||||
// Should render master checkbox plus individual checkboxes
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
expect(checkboxes).toHaveLength(3) // 1 master + 2 individual
|
||||
expect(
|
||||
screen.getByText('resources.user.message.selectAllLibraries'),
|
||||
).not.toBeNull()
|
||||
})
|
||||
|
||||
it('should not render master checkbox when there is only one library', () => {
|
||||
// Mock single library
|
||||
const mockLibraries = {
|
||||
1: { id: '1', name: 'Library 1' },
|
||||
}
|
||||
useGetList.mockReturnValue({
|
||||
ids: ['1'],
|
||||
data: mockLibraries,
|
||||
})
|
||||
|
||||
render(<SelectLibraryInput onChange={mockOnChange} value={[]} />)
|
||||
|
||||
// Should render only individual checkbox
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
expect(checkboxes).toHaveLength(1) // Only 1 individual checkbox
|
||||
})
|
||||
|
||||
it('should handle master checkbox selection and deselection', () => {
|
||||
// Mock libraries
|
||||
const mockLibraries = {
|
||||
1: { id: '1', name: 'Library 1' },
|
||||
2: { id: '2', name: 'Library 2' },
|
||||
}
|
||||
useGetList.mockReturnValue({
|
||||
ids: ['1', '2'],
|
||||
data: mockLibraries,
|
||||
})
|
||||
|
||||
render(<SelectLibraryInput onChange={mockOnChange} value={[]} />)
|
||||
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
const masterCheckbox = checkboxes[0] // Master is first
|
||||
|
||||
// Click master checkbox to select all
|
||||
fireEvent.click(masterCheckbox)
|
||||
expect(mockOnChange).toHaveBeenCalledWith(['1', '2'])
|
||||
|
||||
// Clean up and test deselect all
|
||||
cleanup()
|
||||
mockOnChange.mockClear()
|
||||
|
||||
render(<SelectLibraryInput onChange={mockOnChange} value={['1', '2']} />)
|
||||
const checkboxes2 = screen.getAllByRole('checkbox')
|
||||
const masterCheckbox2 = checkboxes2[0]
|
||||
|
||||
// Click master checkbox to deselect all
|
||||
fireEvent.click(masterCheckbox2)
|
||||
expect(mockOnChange).toHaveBeenCalledWith([])
|
||||
})
|
||||
|
||||
it('should show master checkbox as indeterminate when some libraries are selected', () => {
|
||||
// Mock libraries
|
||||
const mockLibraries = {
|
||||
1: { id: '1', name: 'Library 1' },
|
||||
2: { id: '2', name: 'Library 2' },
|
||||
}
|
||||
useGetList.mockReturnValue({
|
||||
ids: ['1', '2'],
|
||||
data: mockLibraries,
|
||||
})
|
||||
|
||||
render(<SelectLibraryInput onChange={mockOnChange} value={['1']} />)
|
||||
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
const masterCheckbox = checkboxes[0] // Master is first
|
||||
|
||||
// Master checkbox should not be checked when only some libraries are selected
|
||||
expect(masterCheckbox.checked).toBe(false)
|
||||
// Note: Testing indeterminate property directly through JSDOM can be unreliable
|
||||
// The important behavior is that it's not checked when only some are selected
|
||||
})
|
||||
|
||||
describe('New User Default Library Selection', () => {
|
||||
// Helper function to create mock libraries with configurable default settings
|
||||
const createMockLibraries = (libraryConfigs) => {
|
||||
const libraries = {}
|
||||
const ids = []
|
||||
|
||||
libraryConfigs.forEach(({ id, name, defaultNewUsers }) => {
|
||||
libraries[id] = {
|
||||
id,
|
||||
name,
|
||||
...(defaultNewUsers !== undefined && { defaultNewUsers }),
|
||||
}
|
||||
ids.push(id)
|
||||
})
|
||||
|
||||
return { libraries, ids }
|
||||
}
|
||||
|
||||
// Helper function to setup useGetList mock
|
||||
const setupMockLibraries = (libraryConfigs, isLoading = false) => {
|
||||
const { libraries, ids } = createMockLibraries(libraryConfigs)
|
||||
useGetList.mockReturnValue({
|
||||
ids,
|
||||
data: libraries,
|
||||
isLoading,
|
||||
})
|
||||
return { libraries, ids }
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
mockOnChange.mockClear()
|
||||
})
|
||||
|
||||
it('should pre-select default libraries for new users', () => {
|
||||
setupMockLibraries([
|
||||
{ id: '1', name: 'Library 1', defaultNewUsers: true },
|
||||
{ id: '2', name: 'Library 2', defaultNewUsers: false },
|
||||
{ id: '3', name: 'Library 3', defaultNewUsers: true },
|
||||
])
|
||||
|
||||
render(
|
||||
<SelectLibraryInput
|
||||
onChange={mockOnChange}
|
||||
value={[]}
|
||||
isNewUser={true}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(mockOnChange).toHaveBeenCalledWith(['1', '3'])
|
||||
})
|
||||
|
||||
it('should not pre-select default libraries if new user already has values', () => {
|
||||
setupMockLibraries([
|
||||
{ id: '1', name: 'Library 1', defaultNewUsers: true },
|
||||
{ id: '2', name: 'Library 2', defaultNewUsers: false },
|
||||
])
|
||||
|
||||
render(
|
||||
<SelectLibraryInput
|
||||
onChange={mockOnChange}
|
||||
value={['2']} // Already has a value
|
||||
isNewUser={true}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(mockOnChange).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should not pre-select libraries while data is still loading', () => {
|
||||
setupMockLibraries(
|
||||
[{ id: '1', name: 'Library 1', defaultNewUsers: true }],
|
||||
true,
|
||||
) // isLoading = true
|
||||
|
||||
render(
|
||||
<SelectLibraryInput
|
||||
onChange={mockOnChange}
|
||||
value={[]}
|
||||
isNewUser={true}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(mockOnChange).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should not pre-select anything if no libraries have defaultNewUsers flag', () => {
|
||||
setupMockLibraries([
|
||||
{ id: '1', name: 'Library 1', defaultNewUsers: false },
|
||||
{ id: '2', name: 'Library 2', defaultNewUsers: false },
|
||||
])
|
||||
|
||||
render(
|
||||
<SelectLibraryInput
|
||||
onChange={mockOnChange}
|
||||
value={[]}
|
||||
isNewUser={true}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(mockOnChange).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should reset initialization state when isNewUser prop changes', () => {
|
||||
setupMockLibraries([
|
||||
{ id: '1', name: 'Library 1', defaultNewUsers: true },
|
||||
])
|
||||
|
||||
const { rerender } = render(
|
||||
<SelectLibraryInput
|
||||
onChange={mockOnChange}
|
||||
value={[]}
|
||||
isNewUser={false} // Start as existing user
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(mockOnChange).not.toHaveBeenCalled()
|
||||
|
||||
// Change to new user
|
||||
rerender(
|
||||
<SelectLibraryInput
|
||||
onChange={mockOnChange}
|
||||
value={[]}
|
||||
isNewUser={true}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(mockOnChange).toHaveBeenCalledWith(['1'])
|
||||
})
|
||||
|
||||
it('should not override pre-selection when value prop is empty for new users', () => {
|
||||
setupMockLibraries([
|
||||
{ id: '1', name: 'Library 1', defaultNewUsers: true },
|
||||
{ id: '2', name: 'Library 2', defaultNewUsers: false },
|
||||
])
|
||||
|
||||
const { rerender } = render(
|
||||
<SelectLibraryInput
|
||||
onChange={mockOnChange}
|
||||
value={[]}
|
||||
isNewUser={true}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(mockOnChange).toHaveBeenCalledWith(['1'])
|
||||
mockOnChange.mockClear()
|
||||
|
||||
// Re-render with empty value prop (simulating form state update)
|
||||
rerender(
|
||||
<SelectLibraryInput
|
||||
onChange={mockOnChange}
|
||||
value={[]} // Still empty
|
||||
isNewUser={true}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(mockOnChange).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should sync from value prop for existing users even when empty', () => {
|
||||
setupMockLibraries([
|
||||
{ id: '1', name: 'Library 1', defaultNewUsers: true },
|
||||
])
|
||||
|
||||
render(
|
||||
<SelectLibraryInput
|
||||
onChange={mockOnChange}
|
||||
value={[]} // Empty value for existing user
|
||||
isNewUser={false}
|
||||
/>,
|
||||
)
|
||||
|
||||
// Check that no libraries are selected (checkboxes should be unchecked)
|
||||
const checkboxes = screen.getAllByRole('checkbox')
|
||||
// Only one checkbox since there's only one library and no master checkbox for single library
|
||||
expect(checkboxes[0].checked).toBe(false)
|
||||
})
|
||||
|
||||
it('should handle libraries with missing defaultNewUsers property', () => {
|
||||
setupMockLibraries([
|
||||
{ id: '1', name: 'Library 1', defaultNewUsers: true },
|
||||
{ id: '2', name: 'Library 2' }, // Missing defaultNewUsers property
|
||||
{ id: '3', name: 'Library 3', defaultNewUsers: false },
|
||||
])
|
||||
|
||||
render(
|
||||
<SelectLibraryInput
|
||||
onChange={mockOnChange}
|
||||
value={[]}
|
||||
isNewUser={true}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(mockOnChange).toHaveBeenCalledWith(['1'])
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -59,6 +59,7 @@ export const SongInfo = (props) => {
|
||||
]
|
||||
const data = {
|
||||
path: <PathField />,
|
||||
libraryName: <TextField source="libraryName" />,
|
||||
album: (
|
||||
<AlbumLinkField source="album" sortByOrder={'ASC'} record={record} />
|
||||
),
|
||||
|
||||
@@ -27,6 +27,7 @@ export * from './useAlbumsPerPage'
|
||||
export * from './useGetHandleArtistClick'
|
||||
export * from './useInterval'
|
||||
export * from './useResourceRefresh'
|
||||
export * from './useRefreshOnEvents'
|
||||
export * from './useToggleLove'
|
||||
export * from './useTraceUpdate'
|
||||
export * from './Writable'
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
/**
|
||||
* Hook to get the currently selected library IDs
|
||||
* Returns an array of library IDs that should be used for filtering data
|
||||
* If no libraries are selected (empty array), returns all user accessible libraries
|
||||
*/
|
||||
export const useSelectedLibraries = () => {
|
||||
const { userLibraries, selectedLibraries } = useSelector(
|
||||
(state) => state.library,
|
||||
)
|
||||
|
||||
// If no specific selection, default to all accessible libraries
|
||||
if (selectedLibraries.length === 0 && userLibraries.length > 0) {
|
||||
return userLibraries.map((lib) => lib.id)
|
||||
}
|
||||
|
||||
return selectedLibraries
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to get library filter parameters for data provider queries
|
||||
* Returns an object that can be spread into query parameters
|
||||
*/
|
||||
export const useLibraryFilter = () => {
|
||||
const selectedLibraryIds = useSelectedLibraries()
|
||||
|
||||
// If user has access to only one library or no specific selection, no filter needed
|
||||
if (selectedLibraryIds.length <= 1) {
|
||||
return {}
|
||||
}
|
||||
|
||||
return {
|
||||
libraryIds: selectedLibraryIds,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to check if a specific library is currently selected
|
||||
*/
|
||||
export const useIsLibrarySelected = (libraryId) => {
|
||||
const selectedLibraryIds = useSelectedLibraries()
|
||||
return selectedLibraryIds.includes(libraryId)
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
import { renderHook } from '@testing-library/react-hooks'
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest'
|
||||
import {
|
||||
useSelectedLibraries,
|
||||
useLibraryFilter,
|
||||
useIsLibrarySelected,
|
||||
} from './useLibrarySelection'
|
||||
|
||||
// Mock dependencies
|
||||
vi.mock('react-redux', () => ({
|
||||
useSelector: vi.fn(),
|
||||
}))
|
||||
|
||||
describe('Library Selection Hooks', () => {
|
||||
const mockLibraries = [
|
||||
{ id: '1', name: 'Music Library' },
|
||||
{ id: '2', name: 'Podcasts' },
|
||||
{ id: '3', name: 'Audiobooks' },
|
||||
]
|
||||
|
||||
let mockUseSelector
|
||||
|
||||
beforeEach(async () => {
|
||||
vi.clearAllMocks()
|
||||
const { useSelector } = await import('react-redux')
|
||||
mockUseSelector = vi.mocked(useSelector)
|
||||
})
|
||||
|
||||
const setupSelector = (
|
||||
userLibraries = mockLibraries,
|
||||
selectedLibraries = [],
|
||||
) => {
|
||||
mockUseSelector.mockImplementation((selector) =>
|
||||
selector({
|
||||
library: {
|
||||
userLibraries,
|
||||
selectedLibraries,
|
||||
},
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
describe('useSelectedLibraries', () => {
|
||||
it('should return selected library IDs when libraries are explicitly selected', async () => {
|
||||
setupSelector(mockLibraries, ['1', '2'])
|
||||
|
||||
const { result } = renderHook(() => useSelectedLibraries())
|
||||
|
||||
expect(result.current).toEqual(['1', '2'])
|
||||
})
|
||||
|
||||
it('should return all user library IDs when no libraries are selected and user has libraries', async () => {
|
||||
setupSelector(mockLibraries, [])
|
||||
|
||||
const { result } = renderHook(() => useSelectedLibraries())
|
||||
|
||||
expect(result.current).toEqual(['1', '2', '3'])
|
||||
})
|
||||
|
||||
it('should return empty array when no libraries are selected and user has no libraries', async () => {
|
||||
setupSelector([], [])
|
||||
|
||||
const { result } = renderHook(() => useSelectedLibraries())
|
||||
|
||||
expect(result.current).toEqual([])
|
||||
})
|
||||
|
||||
it('should return selected libraries even if they are all user libraries', async () => {
|
||||
setupSelector(mockLibraries, ['1', '2', '3'])
|
||||
|
||||
const { result } = renderHook(() => useSelectedLibraries())
|
||||
|
||||
expect(result.current).toEqual(['1', '2', '3'])
|
||||
})
|
||||
|
||||
it('should return single selected library', async () => {
|
||||
setupSelector(mockLibraries, ['2'])
|
||||
|
||||
const { result } = renderHook(() => useSelectedLibraries())
|
||||
|
||||
expect(result.current).toEqual(['2'])
|
||||
})
|
||||
})
|
||||
|
||||
describe('useLibraryFilter', () => {
|
||||
it('should return empty object when user has only one library', async () => {
|
||||
setupSelector([mockLibraries[0]], ['1'])
|
||||
|
||||
const { result } = renderHook(() => useLibraryFilter())
|
||||
|
||||
expect(result.current).toEqual({})
|
||||
})
|
||||
|
||||
it('should return empty object when no libraries are selected (defaults to all)', async () => {
|
||||
setupSelector([mockLibraries[0]], [])
|
||||
|
||||
const { result } = renderHook(() => useLibraryFilter())
|
||||
|
||||
expect(result.current).toEqual({})
|
||||
})
|
||||
|
||||
it('should return libraryIds filter when multiple libraries are available and some are selected', async () => {
|
||||
setupSelector(mockLibraries, ['1', '2'])
|
||||
|
||||
const { result } = renderHook(() => useLibraryFilter())
|
||||
|
||||
expect(result.current).toEqual({
|
||||
libraryIds: ['1', '2'],
|
||||
})
|
||||
})
|
||||
|
||||
it('should return libraryIds filter when multiple libraries are available and all are selected', async () => {
|
||||
setupSelector(mockLibraries, ['1', '2', '3'])
|
||||
|
||||
const { result } = renderHook(() => useLibraryFilter())
|
||||
|
||||
expect(result.current).toEqual({
|
||||
libraryIds: ['1', '2', '3'],
|
||||
})
|
||||
})
|
||||
|
||||
it('should return empty object when user has no libraries', async () => {
|
||||
setupSelector([], [])
|
||||
|
||||
const { result } = renderHook(() => useLibraryFilter())
|
||||
|
||||
expect(result.current).toEqual({})
|
||||
})
|
||||
|
||||
it('should return libraryIds filter for default selection when multiple libraries available', async () => {
|
||||
setupSelector(mockLibraries, []) // No explicit selection, should default to all
|
||||
|
||||
const { result } = renderHook(() => useLibraryFilter())
|
||||
|
||||
expect(result.current).toEqual({
|
||||
libraryIds: ['1', '2', '3'],
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('useIsLibrarySelected', () => {
|
||||
it('should return true when library is explicitly selected', async () => {
|
||||
setupSelector(mockLibraries, ['1', '3'])
|
||||
|
||||
const { result: result1 } = renderHook(() => useIsLibrarySelected('1'))
|
||||
const { result: result2 } = renderHook(() => useIsLibrarySelected('3'))
|
||||
|
||||
expect(result1.current).toBe(true)
|
||||
expect(result2.current).toBe(true)
|
||||
})
|
||||
|
||||
it('should return false when library is not explicitly selected', async () => {
|
||||
setupSelector(mockLibraries, ['1', '3'])
|
||||
|
||||
const { result } = renderHook(() => useIsLibrarySelected('2'))
|
||||
|
||||
expect(result.current).toBe(false)
|
||||
})
|
||||
|
||||
it('should return true when no explicit selection (defaults to all) and library exists', async () => {
|
||||
setupSelector(mockLibraries, [])
|
||||
|
||||
const { result: result1 } = renderHook(() => useIsLibrarySelected('1'))
|
||||
const { result: result2 } = renderHook(() => useIsLibrarySelected('2'))
|
||||
const { result: result3 } = renderHook(() => useIsLibrarySelected('3'))
|
||||
|
||||
expect(result1.current).toBe(true)
|
||||
expect(result2.current).toBe(true)
|
||||
expect(result3.current).toBe(true)
|
||||
})
|
||||
|
||||
it('should return false when library does not exist in user libraries', async () => {
|
||||
setupSelector(mockLibraries, [])
|
||||
|
||||
const { result } = renderHook(() => useIsLibrarySelected('999'))
|
||||
|
||||
expect(result.current).toBe(false)
|
||||
})
|
||||
|
||||
it('should return false when user has no libraries', async () => {
|
||||
setupSelector([], [])
|
||||
|
||||
const { result } = renderHook(() => useIsLibrarySelected('1'))
|
||||
|
||||
expect(result.current).toBe(false)
|
||||
})
|
||||
|
||||
it('should handle undefined libraryId', async () => {
|
||||
setupSelector(mockLibraries, ['1'])
|
||||
|
||||
const { result } = renderHook(() => useIsLibrarySelected(undefined))
|
||||
|
||||
expect(result.current).toBe(false)
|
||||
})
|
||||
|
||||
it('should handle null libraryId', async () => {
|
||||
setupSelector(mockLibraries, ['1'])
|
||||
|
||||
const { result } = renderHook(() => useIsLibrarySelected(null))
|
||||
|
||||
expect(result.current).toBe(false)
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,109 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
/**
|
||||
* A reusable hook for triggering custom reload logic when specific SSE events occur.
|
||||
*
|
||||
* This hook is ideal when:
|
||||
* - Your component displays derived/related data that isn't directly managed by react-admin
|
||||
* - You need custom loading logic that goes beyond simple dataProvider.getMany() calls
|
||||
* - Your data comes from non-standard endpoints or requires special processing
|
||||
* - You want to reload parent/related resources when child resources change
|
||||
*
|
||||
* @param {Object} options - Configuration options
|
||||
* @param {Array<string>} options.events - Array of event types to listen for (e.g., ['library', 'user', '*'])
|
||||
* @param {Function} options.onRefresh - Async function to call when events occur.
|
||||
* Should be wrapped in useCallback with appropriate dependencies to avoid unnecessary re-renders.
|
||||
*
|
||||
* @example
|
||||
* // Example 1: LibrarySelector - Reload user data when library changes
|
||||
* const loadUserLibraries = useCallback(async () => {
|
||||
* const userId = localStorage.getItem('userId')
|
||||
* if (userId) {
|
||||
* const { data } = await dataProvider.getOne('user', { id: userId })
|
||||
* dispatch(setUserLibraries(data.libraries || []))
|
||||
* }
|
||||
* }, [dataProvider, dispatch])
|
||||
*
|
||||
* useRefreshOnEvents({
|
||||
* events: ['library', 'user'],
|
||||
* onRefresh: loadUserLibraries
|
||||
* })
|
||||
*
|
||||
* @example
|
||||
* // Example 2: Statistics Dashboard - Reload stats when any music data changes
|
||||
* const loadStats = useCallback(async () => {
|
||||
* const stats = await dataProvider.customRequest('GET', 'stats')
|
||||
* setDashboardStats(stats)
|
||||
* }, [dataProvider, setDashboardStats])
|
||||
*
|
||||
* useRefreshOnEvents({
|
||||
* events: ['album', 'song', 'artist'],
|
||||
* onRefresh: loadStats
|
||||
* })
|
||||
*
|
||||
* @example
|
||||
* // Example 3: Permission-based UI - Reload permissions when user changes
|
||||
* const loadPermissions = useCallback(async () => {
|
||||
* const authData = await authProvider.getPermissions()
|
||||
* setUserPermissions(authData)
|
||||
* }, [authProvider, setUserPermissions])
|
||||
*
|
||||
* useRefreshOnEvents({
|
||||
* events: ['user'],
|
||||
* onRefresh: loadPermissions
|
||||
* })
|
||||
*
|
||||
* @example
|
||||
* // Example 4: Listen to all events (use sparingly)
|
||||
* const reloadAll = useCallback(async () => {
|
||||
* // This will trigger on ANY refresh event
|
||||
* await reloadEverything()
|
||||
* }, [reloadEverything])
|
||||
*
|
||||
* useRefreshOnEvents({
|
||||
* events: ['*'],
|
||||
* onRefresh: reloadAll
|
||||
* })
|
||||
*/
|
||||
export const useRefreshOnEvents = ({ events, onRefresh }) => {
|
||||
const [lastRefreshTime, setLastRefreshTime] = useState(Date.now())
|
||||
|
||||
const refreshData = useSelector(
|
||||
(state) => state.activity?.refresh || { lastReceived: lastRefreshTime },
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
const { resources, lastReceived } = refreshData
|
||||
|
||||
// Only process if we have new events
|
||||
if (lastReceived <= lastRefreshTime) {
|
||||
return
|
||||
}
|
||||
|
||||
// Check if any of the events we're interested in occurred
|
||||
const shouldRefresh =
|
||||
resources &&
|
||||
// Global refresh event
|
||||
(resources['*'] === '*' ||
|
||||
// Check for specific events we're listening to
|
||||
events.some((eventType) => {
|
||||
if (eventType === '*') {
|
||||
return true // Listen to all events
|
||||
}
|
||||
return resources[eventType] // Check if this specific event occurred
|
||||
}))
|
||||
|
||||
if (shouldRefresh) {
|
||||
setLastRefreshTime(lastReceived)
|
||||
|
||||
// Call the custom refresh function
|
||||
if (onRefresh) {
|
||||
onRefresh().catch((error) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn('Error in useRefreshOnEvents onRefresh callback:', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
}, [refreshData, lastRefreshTime, events, onRefresh])
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
import { vi } from 'vitest'
|
||||
import * as React from 'react'
|
||||
import * as Redux from 'react-redux'
|
||||
import { useRefreshOnEvents } from './useRefreshOnEvents'
|
||||
|
||||
vi.mock('react', async () => {
|
||||
const actual = await vi.importActual('react')
|
||||
return {
|
||||
...actual,
|
||||
useState: vi.fn(),
|
||||
useEffect: vi.fn(),
|
||||
}
|
||||
})
|
||||
|
||||
vi.mock('react-redux', async () => {
|
||||
const actual = await vi.importActual('react-redux')
|
||||
return {
|
||||
...actual,
|
||||
useSelector: vi.fn(),
|
||||
}
|
||||
})
|
||||
|
||||
describe('useRefreshOnEvents', () => {
|
||||
const setState = vi.fn()
|
||||
const useStateMock = (initState) => [initState, setState]
|
||||
const onRefresh = vi.fn().mockResolvedValue()
|
||||
let lastTime
|
||||
let mockUseEffect
|
||||
|
||||
beforeEach(() => {
|
||||
vi.spyOn(React, 'useState').mockImplementation(useStateMock)
|
||||
mockUseEffect = vi.spyOn(React, 'useEffect')
|
||||
lastTime = new Date(new Date().valueOf() + 1000)
|
||||
onRefresh.mockClear()
|
||||
setState.mockClear()
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('stores last time checked, to avoid redundant runs', () => {
|
||||
const useSelectorMock = () => ({
|
||||
lastReceived: lastTime,
|
||||
resources: { library: ['lib-1'] }, // Need some resources to trigger the update
|
||||
})
|
||||
vi.spyOn(Redux, 'useSelector').mockImplementation(useSelectorMock)
|
||||
|
||||
// Mock useEffect to immediately call the effect callback
|
||||
mockUseEffect.mockImplementation((callback) => callback())
|
||||
|
||||
useRefreshOnEvents({
|
||||
events: ['library'],
|
||||
onRefresh,
|
||||
})
|
||||
|
||||
expect(setState).toHaveBeenCalledWith(lastTime)
|
||||
})
|
||||
|
||||
it("does not run again if lastTime didn't change", () => {
|
||||
vi.spyOn(React, 'useState').mockImplementation(() => [lastTime, setState])
|
||||
const useSelectorMock = () => ({ lastReceived: lastTime })
|
||||
vi.spyOn(Redux, 'useSelector').mockImplementation(useSelectorMock)
|
||||
|
||||
// Mock useEffect to immediately call the effect callback
|
||||
mockUseEffect.mockImplementation((callback) => callback())
|
||||
|
||||
useRefreshOnEvents({
|
||||
events: ['library'],
|
||||
onRefresh,
|
||||
})
|
||||
|
||||
expect(setState).not.toHaveBeenCalled()
|
||||
expect(onRefresh).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
describe('Event listening and refresh triggering', () => {
|
||||
beforeEach(() => {
|
||||
// Mock useEffect to immediately call the effect callback
|
||||
mockUseEffect.mockImplementation((callback) => callback())
|
||||
})
|
||||
|
||||
it('triggers refresh when a watched event occurs', () => {
|
||||
const useSelectorMock = () => ({
|
||||
lastReceived: lastTime,
|
||||
resources: { library: ['lib-1', 'lib-2'] },
|
||||
})
|
||||
vi.spyOn(Redux, 'useSelector').mockImplementation(useSelectorMock)
|
||||
|
||||
useRefreshOnEvents({
|
||||
events: ['library'],
|
||||
onRefresh,
|
||||
})
|
||||
|
||||
expect(onRefresh).toHaveBeenCalledTimes(1)
|
||||
expect(setState).toHaveBeenCalledWith(lastTime)
|
||||
})
|
||||
|
||||
it('triggers refresh when multiple watched events occur', () => {
|
||||
const useSelectorMock = () => ({
|
||||
lastReceived: lastTime,
|
||||
resources: {
|
||||
library: ['lib-1'],
|
||||
user: ['user-1'],
|
||||
album: ['album-1'], // This shouldn't trigger since it's not watched
|
||||
},
|
||||
})
|
||||
vi.spyOn(Redux, 'useSelector').mockImplementation(useSelectorMock)
|
||||
|
||||
useRefreshOnEvents({
|
||||
events: ['library', 'user'],
|
||||
onRefresh,
|
||||
})
|
||||
|
||||
expect(onRefresh).toHaveBeenCalledTimes(1)
|
||||
expect(setState).toHaveBeenCalledWith(lastTime)
|
||||
})
|
||||
|
||||
it('does not trigger refresh when unwatched events occur', () => {
|
||||
const useSelectorMock = () => ({
|
||||
lastReceived: lastTime,
|
||||
resources: { album: ['album-1'], song: ['song-1'] },
|
||||
})
|
||||
vi.spyOn(Redux, 'useSelector').mockImplementation(useSelectorMock)
|
||||
|
||||
useRefreshOnEvents({
|
||||
events: ['library', 'user'],
|
||||
onRefresh,
|
||||
})
|
||||
|
||||
expect(onRefresh).not.toHaveBeenCalled()
|
||||
expect(setState).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('triggers refresh on global refresh event', () => {
|
||||
const useSelectorMock = () => ({
|
||||
lastReceived: lastTime,
|
||||
resources: { '*': '*' },
|
||||
})
|
||||
vi.spyOn(Redux, 'useSelector').mockImplementation(useSelectorMock)
|
||||
|
||||
useRefreshOnEvents({
|
||||
events: ['library'],
|
||||
onRefresh,
|
||||
})
|
||||
|
||||
expect(onRefresh).toHaveBeenCalledTimes(1)
|
||||
expect(setState).toHaveBeenCalledWith(lastTime)
|
||||
})
|
||||
|
||||
it('triggers refresh when listening to all events with "*"', () => {
|
||||
const useSelectorMock = () => ({
|
||||
lastReceived: lastTime,
|
||||
resources: { song: ['song-1'] },
|
||||
})
|
||||
vi.spyOn(Redux, 'useSelector').mockImplementation(useSelectorMock)
|
||||
|
||||
useRefreshOnEvents({
|
||||
events: ['*'],
|
||||
onRefresh,
|
||||
})
|
||||
|
||||
expect(onRefresh).toHaveBeenCalledTimes(1)
|
||||
expect(setState).toHaveBeenCalledWith(lastTime)
|
||||
})
|
||||
|
||||
it('handles empty events array gracefully', () => {
|
||||
const useSelectorMock = () => ({
|
||||
lastReceived: lastTime,
|
||||
resources: { library: ['lib-1'] },
|
||||
})
|
||||
vi.spyOn(Redux, 'useSelector').mockImplementation(useSelectorMock)
|
||||
|
||||
useRefreshOnEvents({
|
||||
events: [],
|
||||
onRefresh,
|
||||
})
|
||||
|
||||
expect(onRefresh).not.toHaveBeenCalled()
|
||||
expect(setState).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('handles missing onRefresh function gracefully', () => {
|
||||
const useSelectorMock = () => ({
|
||||
lastReceived: lastTime,
|
||||
resources: { library: ['lib-1'] },
|
||||
})
|
||||
vi.spyOn(Redux, 'useSelector').mockImplementation(useSelectorMock)
|
||||
|
||||
expect(() => {
|
||||
useRefreshOnEvents({
|
||||
events: ['library'],
|
||||
// onRefresh is undefined
|
||||
})
|
||||
}).not.toThrow()
|
||||
|
||||
expect(setState).toHaveBeenCalledWith(lastTime)
|
||||
})
|
||||
|
||||
it('handles onRefresh errors gracefully', async () => {
|
||||
const consoleWarnSpy = vi
|
||||
.spyOn(console, 'warn')
|
||||
.mockImplementation(() => {})
|
||||
const failingRefresh = vi
|
||||
.fn()
|
||||
.mockRejectedValue(new Error('Refresh failed'))
|
||||
|
||||
const useSelectorMock = () => ({
|
||||
lastReceived: lastTime,
|
||||
resources: { library: ['lib-1'] },
|
||||
})
|
||||
vi.spyOn(Redux, 'useSelector').mockImplementation(useSelectorMock)
|
||||
|
||||
useRefreshOnEvents({
|
||||
events: ['library'],
|
||||
onRefresh: failingRefresh,
|
||||
})
|
||||
|
||||
expect(failingRefresh).toHaveBeenCalledTimes(1)
|
||||
expect(setState).toHaveBeenCalledWith(lastTime)
|
||||
|
||||
// Wait for the promise to be rejected and handled
|
||||
await new Promise((resolve) => setTimeout(resolve, 10))
|
||||
|
||||
expect(consoleWarnSpy).toHaveBeenCalledWith(
|
||||
'Error in useRefreshOnEvents onRefresh callback:',
|
||||
expect.any(Error),
|
||||
)
|
||||
|
||||
consoleWarnSpy.mockRestore()
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -2,6 +2,67 @@ import { useSelector } from 'react-redux'
|
||||
import { useState } from 'react'
|
||||
import { useRefresh, useDataProvider } from 'react-admin'
|
||||
|
||||
/**
|
||||
* A hook that automatically refreshes react-admin managed resources when refresh events are received via SSE.
|
||||
*
|
||||
* This hook is designed for components that display react-admin managed resources (like lists, shows, edits)
|
||||
* and need to stay in sync when those resources are modified elsewhere in the application.
|
||||
*
|
||||
* **When to use this hook:**
|
||||
* - Your component displays react-admin resources (albums, songs, artists, playlists, etc.)
|
||||
* - You want automatic refresh when those resources are created/updated/deleted
|
||||
* - Your data comes from standard dataProvider.getMany() calls
|
||||
* - You're using react-admin's data management (queries, mutations, caching)
|
||||
*
|
||||
* **When NOT to use this hook:**
|
||||
* - Your component displays derived/custom data not directly managed by react-admin
|
||||
* - You need custom reload logic beyond dataProvider.getMany()
|
||||
* - Your data comes from non-standard endpoints
|
||||
* - Use `useRefreshOnEvents` instead for these scenarios
|
||||
*
|
||||
* @param {...string} visibleResources - Resource names to watch for changes.
|
||||
* If no resources specified, watches all resources.
|
||||
* If '*' is included in resources, triggers full page refresh.
|
||||
*
|
||||
* @example
|
||||
* // Example 1: Album list - refresh when albums change
|
||||
* const AlbumList = () => {
|
||||
* useResourceRefresh('album')
|
||||
* return <List resource="album">...</List>
|
||||
* }
|
||||
*
|
||||
* @example
|
||||
* // Example 2: Album show page - refresh when album or its songs change
|
||||
* const AlbumShow = () => {
|
||||
* useResourceRefresh('album', 'song')
|
||||
* return <Show resource="album">...</Show>
|
||||
* }
|
||||
*
|
||||
* @example
|
||||
* // Example 3: Dashboard - refresh when any resource changes
|
||||
* const Dashboard = () => {
|
||||
* useResourceRefresh() // No parameters = watch all resources
|
||||
* return <div>...</div>
|
||||
* }
|
||||
*
|
||||
* @example
|
||||
* // Example 4: Library management page - watch library resources
|
||||
* const LibraryList = () => {
|
||||
* useResourceRefresh('library')
|
||||
* return <List resource="library">...</List>
|
||||
* }
|
||||
*
|
||||
* **How it works:**
|
||||
* - Listens to refresh events from the SSE connection
|
||||
* - When events arrive, checks if they match the specified visible resources
|
||||
* - For specific resource IDs: calls dataProvider.getMany(resource, {ids: [...]})
|
||||
* - For global refreshes: calls refresh() to reload the entire page
|
||||
* - Uses react-admin's built-in data management and caching
|
||||
*
|
||||
* **Event format expected:**
|
||||
* - Global refresh: { '*': '*' } or { someResource: ['*'] }
|
||||
* - Specific resources: { album: ['id1', 'id2'], song: ['id3'] }
|
||||
*/
|
||||
export const useResourceRefresh = (...visibleResources) => {
|
||||
const [lastTime, setLastTime] = useState(Date.now())
|
||||
const refresh = useRefresh()
|
||||
|
||||
Reference in New Issue
Block a user