Feat: Add item filtering by mapping status (#3164)

* feat: Add support for the migration completion flag in the collections

* feat: Add item filtering by mapping

* feat: Add item filtering by mapping status

* fix: Set min-width for the migration banner

* fix: dev file

src/components/CollectionProvider/CollectionProvider.tsx

@@ -8,9 +8,9 @@ export default class CollectionProvider extends React.PureComponent<Props> {
   }
 
   fetchCollectionItems(itemsPage: number | number[] = DEFAULT_ITEMS_PAGE) {
-    const { id, onFetchCollectionItems, itemsPageSize, fetchOptions } = this.props
+    const { id, onFetchCollectionItems, itemsPageSize, fetchCollectionItemsOptions } = this.props
     if (id) {
-      onFetchCollectionItems(id, { page: itemsPage, limit: itemsPageSize || DEFAULT_ITEMS_PAGE_SIZE, ...fetchOptions })
+      onFetchCollectionItems(id, { page: itemsPage, limit: itemsPageSize || DEFAULT_ITEMS_PAGE_SIZE, ...fetchCollectionItemsOptions })
     }
   }
 
@@ -31,7 +31,7 @@ export default class CollectionProvider extends React.PureComponent<Props> {
       itemsPage,
       itemsPageSize,
       itemSelected,
-      fetchOptions,
+      fetchCollectionItemsOptions,
       paginatedItems,
       onFetchCollection,
       onChangePage
@@ -70,7 +70,7 @@ export default class CollectionProvider extends React.PureComponent<Props> {
 
     // logic to fetch the new pages requested
     const hasChangedPage = !equal(itemsPage, prevProps.itemsPage)
-    const hasChangeFilter = !equal(fetchOptions, prevProps.fetchOptions)
+    const hasChangeFilter = !equal(fetchCollectionItemsOptions, prevProps.fetchCollectionItemsOptions)
     if (id && ((itemsPage && hasChangedPage) || hasChangeFilter)) {
       const prevPages = prevProps.itemsPage
       this.fetchCollectionItems(

src/components/CollectionProvider/CollectionProvider.types.ts

@@ -1,5 +1,5 @@
 import { Dispatch } from 'redux'
-import { FetchCollectionsParams } from 'lib/api/builder'
+import { FetchCollectionItemsParams } from 'lib/api/builder'
 import { Collection } from 'modules/collection/types'
 import { fetchCollectionRequest, FetchCollectionRequestAction } from 'modules/collection/actions'
 import { Item } from 'modules/item/types'
@@ -19,7 +19,7 @@ export type Props = {
   itemSelected?: string | null
   itemsPage?: number | number[]
   itemsPageSize?: number
-  fetchOptions?: Pick<FetchCollectionsParams, 'status' | 'synced'>
+  fetchCollectionItemsOptions?: FetchCollectionItemsParams
   curation: CollectionCuration | null
   itemCurations: ItemCuration[] | null
   isLoading: boolean

src/components/ItemEditorPage/LeftPanel/LeftPanel.tsx

@@ -195,7 +195,7 @@ export default class LeftPanel extends React.PureComponent<Props, State> {
             itemSelected={selectedItemId}
             itemsPage={pages}
             itemsPageSize={LEFT_PANEL_PAGE_SIZE}
-            fetchOptions={{ status: isReviewing ? CurationStatus.PENDING : undefined }}
+            fetchCollectionItemsOptions={{ status: isReviewing ? CurationStatus.PENDING : undefined }}
             onChangePage={page => this.setState({ pages: [page] })}
           >
             {({ paginatedCollections, collection, paginatedItems: collectionItems, initialPage: collectionInitialPage, isLoading }) => {

src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.module.css

@@ -213,6 +213,7 @@
 }
 
 .migrationBanner {
+  min-width: 1116px;
   color: black;
   display: flex;
   align-items: center;

src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.tsx

@@ -35,6 +35,7 @@ import { Props, PAGE_SIZE } from './ThirdPartyCollectionDetailPage.types'
 import { CollectionItemHeader } from './CollectionItemHeader'
 import { CollectionItemHeaderV2 } from './CollectionItemHeaderV2'
 import styles from './ThirdPartyCollectionDetailPage.module.css'
+import { ItemMappingStatus } from 'lib/api/builder'
 
 const Info = ({ children, title, info }: { children: React.ReactNode; title: string; info?: string }) => (
   <div className={styles.info}>
@@ -45,6 +46,14 @@ const Info = ({ children, title, info }: { children: React.ReactNode; title: str
   </div>
 )
 
+enum ItemStatus {
+  ALL = 'ALL',
+  SYNCED = 'SYNCED',
+  UNSYNCED = 'UNSYNCED',
+  MIGRATION_REQUIRED = 'MIGRATION_REQUIRED',
+  MAPPING_PENDING = 'MAPPING_PENDING'
+}
+
 export default function ThirdPartyCollectionDetailPage({
   currentPage,
   wallet,
@@ -62,7 +71,7 @@ export default function ThirdPartyCollectionDetailPage({
   const [page, setPage] = useState(currentPage)
   const [showSelectAllPages, setShowSelectAllPages] = useState(false)
   const [shouldFetchAllPages, setShouldFetchAllPages] = useState(false)
-  const [filters, setFilters] = useState<Record<string, any>>({})
+  const [itemStatus, setItemStatus] = useState<ItemStatus>(ItemStatus.ALL)
   const history = useHistory()
 
   useEffect(() => {
@@ -72,9 +81,6 @@ export default function ThirdPartyCollectionDetailPage({
   }, [])
 
   useEffect(() => {
-    if (thirdParty && thirdParty.availableSlots === undefined && !isLoadingAvailableSlots) {
-      onFetchAvailableSlots(thirdParty.id)
-    }
     // update the state if the page query param changes
     if (currentPage !== page) {
       setPage(currentPage)
@@ -89,7 +95,7 @@ export default function ThirdPartyCollectionDetailPage({
       setSelectedItems(selectedItems)
       setShowSelectAllPages(false)
     }
-  }, [page, shouldFetchAllPages, items, thirdParty, isLoadingAvailableSlots, onFetchAvailableSlots, currentPage])
+  }, [page, shouldFetchAllPages, items, thirdParty, currentPage])
 
   const handleNewItems = useCallback(() => {
     onOpenModal('CreateItemsModal', { collectionId: collection!.id })
@@ -173,11 +179,38 @@ export default function ThirdPartyCollectionDetailPage({
 
   const handleChangeStatus = useCallback(
     (_event: React.SyntheticEvent<HTMLElement, Event>, { value }: DropdownProps) => {
-      setFilters({ synced: value as boolean })
+      setItemStatus(value as ItemStatus)
     },
-    [setFilters]
+    [setItemStatus]
   )
 
+  const itemStatusOptions = [
+    { value: ItemStatus.ALL, text: t('third_party_collection_detail_page.synced_filter.all') },
+    { value: ItemStatus.SYNCED, text: t('item_status.synced') },
+    { value: ItemStatus.UNSYNCED, text: t('item_status.unsynced') },
+    ...(!collection?.isMappingComplete
+      ? [
+          { value: ItemStatus.MIGRATION_REQUIRED, text: t('item_status.pending_migration') },
+          { value: ItemStatus.MAPPING_PENDING, text: t('item_status.pending_mapping') }
+        ]
+      : [])
+  ]
+
+  const itemFilters = useMemo(() => {
+    switch (itemStatus) {
+      case ItemStatus.SYNCED:
+        return { synced: true }
+      case ItemStatus.UNSYNCED:
+        return { synced: false }
+      case ItemStatus.MIGRATION_REQUIRED:
+        return { mappingStatus: ItemMappingStatus.UNPUBLISHED_MAPPING }
+      case ItemStatus.MAPPING_PENDING:
+        return { mappingStatus: ItemMappingStatus.MISSING_MAPPING }
+      default:
+        return {}
+    }
+  }, [itemStatus])
+
   const renderPage = useCallback(
     (thirdParty: ThirdParty, allItems: Item[], paginatedItems: Item[], onFetchCollectionItemsPages: typeof fetchCollectionItemsRequest) => {
       const allSelectedItems = allItems.filter(item => selectedItems[item.id])
@@ -257,13 +290,8 @@ export default function ThirdPartyCollectionDetailPage({
                 <Dropdown
                   className={styles.syncedStatusList}
                   direction="left"
-                  value={filters.synced}
-                  placeholder={t('third_party_collection_detail_page.synced_filter.all')}
-                  options={[
-                    { value: undefined, text: t('third_party_collection_detail_page.synced_filter.all') },
-                    { value: true, text: t('third_party_collection_detail_page.synced_filter.synced') },
-                    { value: false, text: t('third_party_collection_detail_page.synced_filter.unsynced') }
-                  ]}
+                  value={itemStatus}
+                  options={itemStatusOptions}
                   onChange={handleChangeStatus}
                 />
               </div>
@@ -365,13 +393,13 @@ export default function ThirdPartyCollectionDetailPage({
       areAllSelected,
       handleChangeStatus,
       handleClearSelection,
-      filters
+      itemStatus
     ]
   )
 
   const shouldRender = hasAccess && collection
   return (
-    <CollectionProvider id={collection?.id} itemsPage={page} itemsPageSize={PAGE_SIZE} fetchOptions={filters}>
+    <CollectionProvider id={collection?.id} itemsPage={page} itemsPageSize={PAGE_SIZE} fetchCollectionItemsOptions={itemFilters}>
       {({ isLoading: isLoadingCollectionData, items, paginatedItems, onFetchCollectionItemsPages }) => (
         <LoggedInDetailPage
           className={styles.main}

src/lib/api/builder.ts

@@ -51,6 +51,19 @@ export type FetchCollectionsParams = {
   limit?: number
 }
 
+export enum ItemMappingStatus {
+  MISSING_MAPPING = 'missing_mapping',
+  UNPUBLISHED_MAPPING = 'unpublished_mapping'
+}
+
+export type FetchCollectionItemsParams = {
+  status?: CurationStatus
+  synced?: boolean
+  mappingStatus?: ItemMappingStatus
+  page?: number
+  limit?: number
+}
+
 export type RemoteItem = {
   id: string // uuid
   name: string
@@ -786,7 +799,7 @@ export class BuilderAPI extends BaseAPI {
     return fromRemoteItem(remoteItem)
   }
 
-  async fetchCollectionItems(collectionId: string, options: FetchCollectionsParams = {}) {
+  async fetchCollectionItems(collectionId: string, options: FetchCollectionItemsParams = {}) {
     const { page, limit } = options
     const remoteResponse = await this.request('get', `/collections/${collectionId}/items`, { params: options, retry: retryParams })
     if (page && limit && remoteResponse.results) {

src/modules/item/actions.ts

@@ -2,7 +2,7 @@ import { action } from 'typesafe-actions'
 import { ChainId } from '@dcl/schemas'
 import { buildTransactionPayload } from 'decentraland-dapps/dist/modules/transaction/utils'
 import { PaginationStats } from 'lib/api/pagination'
-import { FetchCollectionsParams } from 'lib/api/builder'
+import { FetchCollectionItemsParams } from 'lib/api/builder'
 import { Collection } from 'modules/collection/types'
 import { BuiltFile, Item, BlockchainRarity } from './types'
 
@@ -63,12 +63,14 @@ export const fetchCollectionItemsRequest = (
     limit,
     status,
     synced,
+    mappingStatus,
     overridePaginationData = true
-  }: Pick<FetchCollectionsParams, 'limit' | 'status' | 'synced'> & {
+  }: Omit<FetchCollectionItemsParams, 'page'> & {
     page?: number | number[]
     overridePaginationData?: boolean
   } = {}
-) => action(FETCH_COLLECTION_ITEMS_REQUEST, { collectionId, overridePaginationData, options: { limit, status, synced, page } })
+) =>
+  action(FETCH_COLLECTION_ITEMS_REQUEST, { collectionId, overridePaginationData, options: { limit, status, synced, mappingStatus, page } })
 export const fetchCollectionItemsSuccess = (collectionId: string, items: Item[], paginationStats?: PaginationStats) =>
   action(FETCH_COLLECTION_ITEMS_SUCCESS, { items, paginationIndex: collectionId, paginationStats })
 export const fetchCollectionItemsFailure = (collectionId: string, error: string) =>