From 4b41b3a94e6983792dc308973013e34478bd0bbe Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Mon, 22 Apr 2024 19:44:13 -0400 Subject: [PATCH 1/5] [PAY-2730] Artist Dashboard empty tab states --- packages/common/src/models/Analytics.ts | 2 +- .../components/ArtistContentSection.tsx | 28 +++++------ .../components/ArtistDashboardAlbumsTab.tsx | 7 +-- .../components/ArtistDashboardTracksTab.tsx | 7 +-- .../components/EmptyTabState.tsx | 48 +++++++++++++++++++ .../pages/dashboard-page/components/hooks.ts | 4 +- 6 files changed, 71 insertions(+), 25 deletions(-) create mode 100644 packages/web/src/pages/dashboard-page/components/EmptyTabState.tsx diff --git a/packages/common/src/models/Analytics.ts b/packages/common/src/models/Analytics.ts index 0c6f971aa50..4e7e9a15552 100644 --- a/packages/common/src/models/Analytics.ts +++ b/packages/common/src/models/Analytics.ts @@ -989,7 +989,7 @@ type EmbedCopy = { // Track Upload type TrackUploadOpen = { eventName: Name.TRACK_UPLOAD_OPEN - source: 'nav' | 'profile' | 'signup' | 'library' + source: 'nav' | 'profile' | 'signup' | 'library' | 'dashboard' } type TrackUploadStartUploading = { eventName: Name.TRACK_UPLOAD_START_UPLOADING diff --git a/packages/web/src/pages/dashboard-page/components/ArtistContentSection.tsx b/packages/web/src/pages/dashboard-page/components/ArtistContentSection.tsx index a28c589674b..8c76def7a6f 100644 --- a/packages/web/src/pages/dashboard-page/components/ArtistContentSection.tsx +++ b/packages/web/src/pages/dashboard-page/components/ArtistContentSection.tsx @@ -57,9 +57,9 @@ export const ArtistContentSection = () => { const filterButtonOptions = isTracks ? filterButtonTrackOptions : filterButtonAlbumOptions - const shouldShowFilterButton = - (isTracks && !hasOnlyOneTrackSection) || - (!isTracks && !hasOnlyOneAlbumSection) + const isFilterButtonDisabled = + (isTracks && hasOnlyOneTrackSection) || + (!isTracks && hasOnlyOneAlbumSection) const shouldShowPills = tracks.length && albums.length const onClickPill = useCallback( @@ -112,19 +112,15 @@ export const ArtistContentSection = () => { /> ) : null} - { - // Only show filter button if there are multiple sections for the selected content type - shouldShowFilterButton ? ( - - ) : null - } + + ) : ( + ) : ( `You haven't uploaded any ${type}s yet`, + label: (type: 'track' | 'album') => + `Upload a${type === 'album' ? 'n' : ''} ${type} and it will appear here.`, + upload: 'Upload' +} + +export const EmptyTabState = ({ type }: { type: 'track' | 'album' }) => { + const dispatch = useDispatch() + + const handleUpload = useCallback(() => { + dispatch(pushRoute(type === 'track' ? UPLOAD_PAGE : UPLOAD_ALBUM_PAGE)) + track( + make({ + eventName: Name.TRACK_UPLOAD_OPEN, + source: 'dashboard' + }) + ) + }, [dispatch, type]) + + return ( + + + + + {messages.header(type)} + + + {messages.label(type)} + + + + + ) +} diff --git a/packages/web/src/pages/dashboard-page/components/hooks.ts b/packages/web/src/pages/dashboard-page/components/hooks.ts index 65c9c8ac699..2d91d4ffaaf 100644 --- a/packages/web/src/pages/dashboard-page/components/hooks.ts +++ b/packages/web/src/pages/dashboard-page/components/hooks.ts @@ -108,7 +108,7 @@ const useSegregatedTrackData = () => { collectibleGatedTracks ] const nonEmptyArrays = arrays.filter((arr) => arr.length > 0) - const hasOnlyOneSection = nonEmptyArrays.length === 1 + const hasOnlyOneSection = nonEmptyArrays.length <= 1 return { hasOnlyOneSection, @@ -292,7 +292,7 @@ const useSegregatedAlbumData = () => { const arrays = [publicAlbums, hiddenAlbums, premiumAlbums] const nonEmptyArrays = arrays.filter((arr) => arr.length > 0) - const hasOnlyOneSection = nonEmptyArrays.length === 1 + const hasOnlyOneSection = nonEmptyArrays.length <= 1 return { hasOnlyOneSection, From d3ee2b9edceb06c44f7ac7416a582fa12f374d61 Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Mon, 22 Apr 2024 19:49:18 -0400 Subject: [PATCH 2/5] empty search results --- .../components/ArtistDashboardAlbumsTab.tsx | 7 ++++++- .../components/ArtistDashboardTracksTab.tsx | 7 ++++++- .../components/EmptySearchResults.tsx | 16 ++++++++++++++++ 3 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 packages/web/src/pages/dashboard-page/components/EmptySearchResults.tsx diff --git a/packages/web/src/pages/dashboard-page/components/ArtistDashboardAlbumsTab.tsx b/packages/web/src/pages/dashboard-page/components/ArtistDashboardAlbumsTab.tsx index b0752cfdf6d..f3537bf6377 100644 --- a/packages/web/src/pages/dashboard-page/components/ArtistDashboardAlbumsTab.tsx +++ b/packages/web/src/pages/dashboard-page/components/ArtistDashboardAlbumsTab.tsx @@ -9,6 +9,7 @@ import { useGoToRoute } from 'hooks/useGoToRoute' import { makeGetDashboard } from '../store/selectors' +import { EmptySearchResults } from './EmptySearchResults' import { EmptyTabState } from './EmptyTabState' import { SHOW_MORE_LIMIT, TABLE_PAGE_SIZE } from './constants' import { useFilteredAlbumData } from './hooks' @@ -47,7 +48,11 @@ export const ArtistDashboardAlbumsTab = ({ ) return !filteredData.length || !account ? ( - + filterText ? ( + + ) : ( + + ) ) : ( + filterText ? ( + + ) : ( + + ) ) : ( { + return ( + + + + {messages.noResults} + + + ) +} From a407b8ec059ff2210c43fb071859b1ba03b71c34 Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Mon, 22 Apr 2024 19:57:34 -0400 Subject: [PATCH 3/5] restore deleted styles --- .../dashboard-page/components/ArtistDashboardTracksTab.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/web/src/pages/dashboard-page/components/ArtistDashboardTracksTab.tsx b/packages/web/src/pages/dashboard-page/components/ArtistDashboardTracksTab.tsx index 0b23d41ea01..2a9dc395f9c 100644 --- a/packages/web/src/pages/dashboard-page/components/ArtistDashboardTracksTab.tsx +++ b/packages/web/src/pages/dashboard-page/components/ArtistDashboardTracksTab.tsx @@ -8,6 +8,7 @@ import { useDispatch, useSelector } from 'react-redux' import { TracksTable, TracksTableColumn } from 'components/tracks-table' import { useGoToRoute } from 'hooks/useGoToRoute' +import styles from '../DashboardPage.module.css' import { getDashboardTracksStatus, makeGetDashboard } from '../store/selectors' import { fetchTracks } from '../store/slice' @@ -83,6 +84,7 @@ export const ArtistDashboardTracksTab = ({ totalRowCount={account.track_count} loading={tracksStatus === Status.LOADING} isPaginated + tableHeaderClassName={styles.tableHeader} /> ) From 61932661ec85aa398e2d4b9adf568c11318fc362 Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Mon, 22 Apr 2024 20:00:19 -0400 Subject: [PATCH 4/5] sneak in kebab menu size change --- .../collections-table/CollectionsTableOverflowMenuButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/src/components/collections-table/CollectionsTableOverflowMenuButton.tsx b/packages/web/src/components/collections-table/CollectionsTableOverflowMenuButton.tsx index 56553db0d31..d7db098aa6e 100644 --- a/packages/web/src/components/collections-table/CollectionsTableOverflowMenuButton.tsx +++ b/packages/web/src/components/collections-table/CollectionsTableOverflowMenuButton.tsx @@ -54,7 +54,7 @@ export const CollectionsTableOverflowMenuButton = ( }} > - + )} From e4f733b7fbc539ff876d4a6d2bd8fe853b1d6c87 Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Tue, 23 Apr 2024 12:53:01 -0400 Subject: [PATCH 5/5] switch icons, always show pills --- .../components/ArtistContentSection.tsx | 31 +++++++++---------- .../components/EmptyTabState.tsx | 8 +++-- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/packages/web/src/pages/dashboard-page/components/ArtistContentSection.tsx b/packages/web/src/pages/dashboard-page/components/ArtistContentSection.tsx index 8c76def7a6f..0482593d63f 100644 --- a/packages/web/src/pages/dashboard-page/components/ArtistContentSection.tsx +++ b/packages/web/src/pages/dashboard-page/components/ArtistContentSection.tsx @@ -60,7 +60,6 @@ export const ArtistContentSection = () => { const isFilterButtonDisabled = (isTracks && hasOnlyOneTrackSection) || (!isTracks && hasOnlyOneAlbumSection) - const shouldShowPills = tracks.length && albums.length const onClickPill = useCallback( (pill: Pills) => { @@ -96,22 +95,20 @@ export const ArtistContentSection = () => { - {shouldShowPills ? ( - - onClickPill(Pills.TRACKS)} - /> - onClickPill(Pills.ALBUMS)} - /> - - ) : null} + + onClickPill(Pills.TRACKS)} + /> + onClickPill(Pills.ALBUMS)} + /> + { return ( - + {type === 'track' ? ( + + ) : ( + + )} {messages.header(type)}