From f6bec57c690bc1a5f644f989de811fbcd954785f Mon Sep 17 00:00:00 2001 From: Alice Kwong Date: Wed, 9 Oct 2024 20:32:32 +1100 Subject: [PATCH 1/2] swap the delete and selection button --- .../lib/components/GridTrackTable/index.tsx | 100 +++++++++--------- 1 file changed, 50 insertions(+), 50 deletions(-) diff --git a/packages/ui/lib/components/GridTrackTable/index.tsx b/packages/ui/lib/components/GridTrackTable/index.tsx index 160296f1a2..eafc22967e 100644 --- a/packages/ui/lib/components/GridTrackTable/index.tsx +++ b/packages/ui/lib/components/GridTrackTable/index.tsx @@ -3,13 +3,13 @@ import React, { useMemo, useState } from 'react'; import { DragDropContext, DragDropContextProps, Droppable } from 'react-beautiful-dnd'; import { FixedSizeList } from 'react-window'; import AutoSizer from 'react-virtualized-auto-sizer'; - + import { TrackTableColumn, TrackTableExtraProps, TrackTableHeaders, TrackTableSettings, TrackTableStrings } from '../TrackTable/types'; import { TextHeader } from './Headers/TextHeader'; import { TextCell } from './Cells/TextCell'; import { Track } from '../../types'; import { getTrackThumbnail } from '../TrackRow'; - + import styles from './styles.scss'; import artPlaceholder from '../../../resources/media/art_placeholder.png'; import { ThumbnailCell } from './Cells/ThumbnailCell'; @@ -25,7 +25,7 @@ import { FavoriteCell } from './Cells/FavoriteCell'; import { TitleCell } from './Cells/TitleCell'; import { Input } from 'semantic-ui-react'; import Button from '../Button'; - + export type GridTrackTableProps = { className?: string; tracks: T[]; @@ -33,61 +33,62 @@ export type GridTrackTableProps = { onDragEnd?: DragDropContextProps['onDragEnd']; strings: TrackTableStrings; customColumns?: (ColumnWithWidth)[]; -} & TrackTableHeaders - & TrackTableSettings +} & TrackTableHeaders + & TrackTableSettings & TrackTableExtraProps; - + type ColumnWithWidth = Column & { columnWidth: string; }; type TrackTableColumnInstance = ColumnInstance & UseSortByColumnProps; type TrackTableHeaderGroup = HeaderGroup & UseSortByColumnProps; type TrackTableInstance = TableInstance & UseGlobalFiltersInstanceProps & UseSortByInstanceProps & UseRowSelectInstanceProps; type TrackTableState = TableState & UseSortByState; export type TrackTableRow = Row & UseRowSelectRowProps; - -export const GridTrackTable = ({ + +export const GridTrackTable = ({ className, - tracks, + tracks, customColumns=[], isTrackFavorite, onDragEnd, - + positionHeader, thumbnailHeader, artistHeader, titleHeader, albumHeader, durationHeader, - + displayHeaders=true, displayDeleteButton=true, displayPosition=true, displayFavorite=true, - displayArtist=true, + displayArtist=true, displayAlbum=true, displayThumbnail=true, displayDuration=true, displayCustom=true, selectable=true, searchable=false, - + ...extraProps }: GridTrackTableProps) => { const shouldDisplayDuration = displayDuration && tracks.every(track => Boolean(track.duration)); const columns = useMemo(() => [ - displayDeleteButton && { - id: TrackTableColumn.Delete, - Cell: DeleteCell, - columnWidth: '3em' - } as Column, + selectable && { + id: TrackTableColumn.Selection, + Header: SelectionHeader, + Cell: SelectionCell, + columnWidth: '7.5em' + }, displayPosition && { id: TrackTableColumn.Position, Header: ({ column }) => } - header={positionHeader} + header={positionHeader} isCentered />, - accessor: (track: T) => track.position, + accessor: (track: T) => track.position, Cell: PositionCell, enableSorting: true, columnWidth: '4em' @@ -121,7 +122,7 @@ export const GridTrackTable = ({ : track.artist.name, Cell: TextCell, enableSorting: true, - columnWidth: '1fr' + columnWidth: '6em' }, displayAlbum && { id: TrackTableColumn.Album, @@ -129,7 +130,7 @@ export const GridTrackTable = ({ accessor: (track: T) => track.album, enableSorting: true, Cell: TextCell, - columnWidth: '1fr' + columnWidth: '6em' } as Column, shouldDisplayDuration && { id: TrackTableColumn.Duration, @@ -147,82 +148,81 @@ export const GridTrackTable = ({ columnWidth: '6em' }, ...customColumns, - selectable && { - id: TrackTableColumn.Selection, - Header: SelectionHeader, - Cell: SelectionCell, - columnWidth: '6em' - } + displayDeleteButton && { + id: TrackTableColumn.Delete, + Cell: DeleteCell, + columnWidth: '3em' + } as Column ].filter(Boolean), [displayDeleteButton, displayPosition, displayThumbnail, displayFavorite, isTrackFavorite, titleHeader, displayArtist, artistHeader, displayAlbum, albumHeader, shouldDisplayDuration, durationHeader, selectable, positionHeader, thumbnailHeader]); - + const data = useMemo(() => tracks, [tracks]); - + const initialState: Partial & UseSortByState> = { sortBy: [{ id: TrackTableColumn.Position, desc: false }] }; const table = useTable({ columns, data, initialState }, useGlobalFilter, useSortBy, useRowSelect); const [globalFilter, setGlobalFilterState] = useState(''); // Required, because useGlobalFilter does not provide a way to get the current filter value - + const { - getTableProps, - getTableBodyProps, - headerGroups, - rows, + getTableProps, + getTableBodyProps, + headerGroups, + rows, prepareRow, setGlobalFilter, state: tableState, selectedFlatRows } = table as TrackTableInstance; - + const onFilterClick = () => { setGlobalFilter(''); setGlobalFilterState(''); }; - + const gridTemplateColumns = columns.map((column: ColumnWithWidth) => column.columnWidth ?? '1fr').join(' '); - + // Disabled when there are selected rows, or when sorted by anything other than position const isDragDisabled = !onDragEnd || selectedFlatRows.length > 0 || (tableState as TrackTableState).sortBy[0]?.id !== TrackTableColumn.Position; - + return
{ - searchable && + searchable &&
{ setGlobalFilter(e.target.value); setGlobalFilterState(e.target.value); }} value={globalFilter} /> -
} -
{headerGroups.map(headerGroup => ( -
{ headerGroup.headers.map((column: TrackTableHeaderGroup) => ( -
({ ))}
- ({ itemSize={42} itemCount={rows.length} overscanCount={2} - itemData={{ + itemData={{ rows: rows as Row[], prepareRow: prepareRow as (row: Row) => void, gridTemplateColumns, @@ -282,4 +282,4 @@ export const GridTrackTable = ({
; }; - + From 309d644088aabc1a2bde81e2c089d11cdbed504f Mon Sep 17 00:00:00 2001 From: Alice Kwong Date: Wed, 9 Oct 2024 20:32:51 +1100 Subject: [PATCH 2/2] update snapshots for test --- .../AlbumViewContainer.test.tsx.snap | 130 ++++----- .../ArtistViewContainer.test.tsx.snap | 130 ++++----- .../DashboardContainer.test.tsx.snap | 110 ++++---- .../DeezerPlaylistAdapter.test.tsx.snap | 110 ++++---- .../FavoritesContainer.tracks.test.tsx.snap | 264 +++++++++--------- .../LibraryViewContainer.test.tsx.snap | 130 ++++----- .../PlaylistViewContainer.test.tsx.snap | 132 ++++----- .../SpotifyPlaylistAdapter.test.tsx.snap | 110 ++++---- .../gridTrackTable.test.tsx.snap | 218 +++++++-------- 9 files changed, 667 insertions(+), 667 deletions(-) diff --git a/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap b/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap index 8e76c40a0d..e3d17fecb1 100644 --- a/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap +++ b/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap @@ -131,8 +131,32 @@ exports[`Album view container should display an album 1`] = `
+
+
+
+ +
+
+
-
-
-
- -
-
-
+
+
+ +
+
02:00
+
+
-
-
01:03
+
+
- -
00:07
-
-
- -
-
diff --git a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap index 8b4b438080..44fb3e8f53 100644 --- a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap +++ b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap @@ -126,8 +126,32 @@ exports[`Artist view container should display an artist 1`] = `
+
+
+
+ +
+
+
Playcount
-
-
-
- -
-
-
+
+
+ +
+
6,900,237
+
+
- -
6,969
+
+
- -
1
-
-
- -
-
diff --git a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap index bad1a09dc1..2a74d9665a 100644 --- a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap +++ b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap @@ -574,8 +574,32 @@ exports[`Dashboard container should display top tracks after going to top tracks
+
+
+
+ +
+
+
-
-
-
- -
-
-
+
+
+ +
+
01:40
+
+
- -
01:18
-
-
- -
-
diff --git a/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap b/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap index 81a25f2e31..e904158232 100644 --- a/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap +++ b/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap @@ -117,8 +117,32 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
+
+
+
+ +
+
+
-
-
-
- -
-
-
+
+
+ +
+
artist 1
+
+
- -
artist 2
-
-
- -
-
diff --git a/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap b/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap index 36ffa9d1ff..94f4eefaee 100644 --- a/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap +++ b/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap @@ -229,14 +229,31 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
-   +
+
+ +
+
-
-
- -
-
+  
@@ -347,23 +347,27 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = ` data-rbd-draggable-id="1" data-testid="track-table-row" role="row" - style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em;" + style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em 3em;" tabindex="1" >
-