[PAY-2730] Artist Dashboard empty tab states (#8192)

AudiusProject · Apr 23, 2024 · c2d0289 · c2d0289
1 parent b65db45
commit c2d0289
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 43 deletions.
diff --git 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/components/collections-table/CollectionsTableOverflowMenuButton.tsx b/packages/web/src/components/collections-table/CollectionsTableOverflowMenuButton.tsx
@@ -54,7 +54,7 @@ export const CollectionsTableOverflowMenuButton = (
             }}
           >
             <Flex ref={ref}>
-              <IconKebabHorizontal color='subdued' />
+              <IconKebabHorizontal color='subdued' size='xs' />
             </Flex>
           </Flex>
         )}

diff --git a/packages/web/src/pages/dashboard-page/components/ArtistContentSection.tsx b/packages/web/src/pages/dashboard-page/components/ArtistContentSection.tsx
@@ -57,10 +57,9 @@ export const ArtistContentSection = () => {
   const filterButtonOptions = isTracks
     ? filterButtonTrackOptions
     : filterButtonAlbumOptions
-  const shouldShowFilterButton =
-    (isTracks && !hasOnlyOneTrackSection) ||
-    (!isTracks && !hasOnlyOneAlbumSection)
-  const shouldShowPills = tracks.length && albums.length
+  const isFilterButtonDisabled =
+    (isTracks && hasOnlyOneTrackSection) ||
+    (!isTracks && hasOnlyOneAlbumSection)
 
   const onClickPill = useCallback(
     (pill: Pills) => {
@@ -96,35 +95,29 @@ export const ArtistContentSection = () => {
     <Paper w='100%' direction='column' mt='xl'>
       <Flex ph='2xl' pv='l' justifyContent='space-between'>
         <Flex gap='2xl'>
-          {shouldShowPills ? (
-            <Flex gap='s'>
-              <SelectablePill
-                isSelected={selectedPill === Pills.TRACKS}
-                label={messages.tracks}
-                size='large'
-                onClick={() => onClickPill(Pills.TRACKS)}
-              />
-              <SelectablePill
-                isSelected={selectedPill === Pills.ALBUMS}
-                label={messages.albums}
-                size='large'
-                onClick={() => onClickPill(Pills.ALBUMS)}
-              />
-            </Flex>
-          ) : null}
-          {
-            // Only show filter button if there are multiple sections for the selected content type
-            shouldShowFilterButton ? (
-              <FilterButton
-                onSelect={handleSelectFilter}
-                selection={isTracks ? selectedTrackFilter : selectedAlbumFilter}
-                label={messages.allReleases}
-                options={filterButtonOptions}
-                popupAnchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-                popupTransformOrigin={{ vertical: 'top', horizontal: 'left' }}
-              />
-            ) : null
-          }
+          <Flex gap='s'>
+            <SelectablePill
+              isSelected={selectedPill === Pills.TRACKS}
+              label={messages.tracks}
+              size='large'
+              onClick={() => onClickPill(Pills.TRACKS)}
+            />
+            <SelectablePill
+              isSelected={selectedPill === Pills.ALBUMS}
+              label={messages.albums}
+              size='large'
+              onClick={() => onClickPill(Pills.ALBUMS)}
+            />
+          </Flex>
+          <FilterButton
+            onSelect={handleSelectFilter}
+            selection={isTracks ? selectedTrackFilter : selectedAlbumFilter}
+            label={messages.allReleases}
+            options={filterButtonOptions}
+            popupAnchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+            popupTransformOrigin={{ vertical: 'top', horizontal: 'left' }}
+            isDisabled={isFilterButtonDisabled}
+          />
         </Flex>
         <Flex>
           <TextInput

diff --git a/packages/web/src/pages/dashboard-page/components/ArtistDashboardAlbumsTab.tsx b/packages/web/src/pages/dashboard-page/components/ArtistDashboardAlbumsTab.tsx
@@ -13,6 +13,8 @@ import { useGoToRoute } from 'hooks/useGoToRoute'
 import styles from '../DashboardPage.module.css'
 import { makeGetDashboard } from '../store/selectors'
 
+import { EmptySearchResults } from './EmptySearchResults'
+import { EmptyTabState } from './EmptyTabState'
 import { SHOW_MORE_LIMIT } from './constants'
 import { useFilteredAlbumData } from './hooks'
 import { AlbumFilters } from './types'
@@ -50,9 +52,13 @@ export const ArtistDashboardAlbumsTab = ({
     [account, goToRoute]
   )
 
-  if (!filteredData.length || !account) return null
-
-  return (
+  return !filteredData.length || !account ? (
+    filterText ? (
+      <EmptySearchResults />
+    ) : (
+      <EmptyTabState type='album' />
+    )
+  ) : (
     <Flex w='100%' direction='column' borderTop='default'>
       <CollectionsTable
         data={filteredData}

diff --git a/packages/web/src/pages/dashboard-page/components/ArtistDashboardTracksTab.tsx b/packages/web/src/pages/dashboard-page/components/ArtistDashboardTracksTab.tsx
@@ -12,6 +12,8 @@ import styles from '../DashboardPage.module.css'
 import { getDashboardTracksStatus, makeGetDashboard } from '../store/selectors'
 import { fetchTracks } from '../store/slice'
 
+import { EmptySearchResults } from './EmptySearchResults'
+import { EmptyTabState } from './EmptyTabState'
 import { SHOW_MORE_LIMIT, TABLE_PAGE_SIZE } from './constants'
 import { useFilteredTrackData } from './hooks'
 import { TrackFilters } from './types'
@@ -62,9 +64,13 @@ export const ArtistDashboardTracksTab = ({
     [account, goToRoute]
   )
 
-  if (!filteredData.length || !account) return null
-
-  return (
+  return !filteredData.length || !account ? (
+    filterText ? (
+      <EmptySearchResults />
+    ) : (
+      <EmptyTabState type='track' />
+    )
+  ) : (
     <Flex w='100%' direction='column' borderTop='default'>
       <TracksTable
         data={filteredData}

diff --git a/packages/web/src/pages/dashboard-page/components/EmptySearchResults.tsx b/packages/web/src/pages/dashboard-page/components/EmptySearchResults.tsx
@@ -0,0 +1,16 @@
+import { Flex, IconSearch, Text } from '@audius/harmony'
+
+const messages = {
+  noResults: 'No results match your search'
+}
+
+export const EmptySearchResults = () => {
+  return (
+    <Flex w='100%' direction='column' alignItems='center' p='unit10' gap='l'>
+      <IconSearch size='3xl' color='subdued' />
+      <Text variant='heading' size='s'>
+        {messages.noResults}
+      </Text>
+    </Flex>
+  )
+}
diff --git a/packages/web/src/pages/dashboard-page/components/EmptyTabState.tsx b/packages/web/src/pages/dashboard-page/components/EmptyTabState.tsx
@@ -0,0 +1,52 @@
+import { useCallback } from 'react'
+
+import { Name } from '@audius/common/models'
+import { Button, Flex, IconAlbum, IconNote, Text } from '@audius/harmony'
+import { push as pushRoute } from 'connected-react-router'
+import { useDispatch } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+import { track, make } from 'services/analytics'
+import { UPLOAD_ALBUM_PAGE, UPLOAD_PAGE } from 'utils/route'
+
+const messages = {
+  header: (type: 'track' | 'album') => `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 (
+    <Flex w='100%' direction='column' alignItems='center' p='unit10' gap='2xl'>
+      {type === 'track' ? (
+        <IconNote size='3xl' color='subdued' />
+      ) : (
+        <IconAlbum size='3xl' color='subdued' />
+      )}
+      <Flex gap='l' direction='column' alignItems='center'>
+        <Text variant='heading' size='s'>
+          {messages.header(type)}
+        </Text>
+        <Text variant='body' size='l'>
+          {messages.label(type)}
+        </Text>
+      </Flex>
+      <Button variant='secondary' size='small' asChild onClick={handleUpload}>
+        <Link to={UPLOAD_PAGE}>{messages.upload}</Link>
+      </Button>
+    </Flex>
+  )
+}
diff --git 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,