fat: Add migration support to collection window (#3161)

* feat: Add migration support to collection window

* feat: Add ItemStatusBadge

* fix: Update imports

* fix: Revert URL change

* fix: Remove unused translations

* fix: Add translations

Author: LautaroPetaccio

src/components/ItemStatusBadge/ItemStatusBadge.module.css

@@ -0,0 +1,39 @@
+.status {
+  text-transform: uppercase;
+  padding: 4px 8px 4px 8px;
+  border-radius: 32px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.status :global(.icon) {
+  height: 18px;
+}
+
+.pending_migration {
+  color: #ffbc5b;
+  background-color: rgb(255, 188, 91, 0.2);
+}
+
+.synced {
+  color: #65d890;
+  background-color: rgb(101, 216, 144, 0.2);
+}
+
+.unpublished,
+.unsynced {
+  color: #63b4f6;
+  background-color: rgb(99, 180, 246, 0.2);
+}
+
+.pending_mapping,
+.under_review {
+  color: #ecebed;
+  background-color: rgb(236, 235, 237, 0.2);
+}
+
+.icon {
+  width: 17px;
+  height: 17px;
+}

src/components/ItemStatusBadge/ItemStatusBadge.tsx

@@ -0,0 +1,57 @@
+import { useMemo } from 'react'
+import classNames from 'classnames'
+import { Icon } from 'decentraland-ui'
+import { t } from 'decentraland-dapps/dist/modules/translation'
+import { SyncStatus } from 'modules/item/types'
+import mapIcon from '../../icons/map.svg'
+import underReviewIcon from '../../icons/under_review.svg'
+import { isThirdParty } from 'lib/urn'
+import { Props } from './ItemStatusBadge.types'
+import styles from './ItemStatusBadge.module.css'
+
+export const ItemStatusBadge = (props: Props) => {
+  const { status, item } = props
+  const isMappingMissingFromItem = !item.mappings && isThirdParty(item.urn)
+  const isMappingMissingInCatalysts = !item.isMappingComplete && isThirdParty(item.urn)
+
+  const icon = useMemo(() => {
+    if (isMappingMissingFromItem) {
+      return <img src={mapIcon} className={styles.icon} />
+    } else if (isMappingMissingInCatalysts) {
+      return <Icon name="warning circle" />
+    }
+    switch (status) {
+      case SyncStatus.UNDER_REVIEW:
+        return <img src={underReviewIcon} className={styles.icon} />
+      case SyncStatus.SYNCED:
+        return <Icon name="check circle" />
+      case SyncStatus.UNSYNCED:
+      case SyncStatus.UNPUBLISHED:
+        return <Icon name="cloud upload" />
+    }
+  }, [status])
+
+  const text = useMemo(() => {
+    if (isMappingMissingFromItem) {
+      return t('item_status.pending_mapping')
+    } else if (isMappingMissingInCatalysts) {
+      return t('item_status.pending_migration')
+    }
+    return t(`item_status.${status}`)
+  }, [status])
+
+  const style = useMemo(() => {
+    if (!item.mappings) {
+      return 'pending_mapping'
+    } else if (isMappingMissingInCatalysts) {
+      return 'pending_migration'
+    }
+    return status
+  }, [status])
+
+  return (
+    <div className={classNames(styles[style], styles.status)}>
+      {icon} {text}
+    </div>
+  )
+}

src/components/ItemStatusBadge/ItemStatusBadge.types.ts

@@ -0,0 +1,6 @@
+import { SyncStatus, Item } from 'modules/item/types'
+
+export type Props = {
+  status: SyncStatus
+  item: Item
+}

src/components/ItemStatusBadge/index.ts

@@ -0,0 +1 @@
+export * from './ItemStatusBadge'

src/components/MappingEditor/MappingEditor.module.css

@@ -35,6 +35,7 @@
 /* Input margin */
 
 .compact .any,
+.compact .none,
 .compact .multiple {
   margin-top: 19px;
 }
@@ -53,6 +54,24 @@
   margin-top: 0px;
 }
 
+.mappingType :global(.default.text) {
+  display: flex !important;
+  flex-direction: row;
+  align-items: center;
+}
+
+.mappingType :global(.default.text)::before {
+  content: ' ';
+  background-size: contain;
+  background-repeat: no-repeat;
+  display: block;
+  background-image: url(../../icons/map.svg);
+  bottom: 4px;
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+}
+
 /* Linked contract select class */
 
 .linkedContractSelect :global(.divider.text),

src/components/MappingEditor/MappingEditor.tsx

@@ -21,6 +21,10 @@ export const MappingEditor = (props: Props) => {
   const { mapping, error, loading, disabled, isCompact, onChange } = props
 
   const [mappingType, mappingValue] = useMemo(() => {
+    if (!mapping) {
+      return [undefined, '']
+    }
+
     switch (mapping.type) {
       case MappingType.MULTIPLE:
         return [MappingType.MULTIPLE, mapping.ids.join(', ')]
@@ -115,13 +119,16 @@ export const MappingEditor = (props: Props) => {
       <SelectField
         label={isCompact ? undefined : t('mapping_editor.mapping_type_label')}
         onChange={handleMappingTypeChange}
+        placeholder={t('mapping_editor.mapping_type_placeholder')}
         value={mappingType}
         disabled={disabled}
         className={classNames(styles.mappingType, isCompact ? styles.compact : styles.full)}
         options={mappingTypeOptions}
       />
       <div className={classNames(styles.mappings, isCompact ? styles.compact : styles.full)}>
-        {mappingType === MappingType.ANY ? (
+        {mappingType === undefined ? (
+          <Field loading={loading} className={styles.none} disabled />
+        ) : mappingType === MappingType.ANY ? (
           <Field
             label={isCompact ? undefined : t('mapping_editor.mapping_value_label')}
             loading={loading}

src/components/MappingEditor/MappingEditor.types.ts

@@ -1,7 +1,7 @@
 import { Mapping } from '@dcl/schemas'
 
 export type Props = {
-  mapping: Mapping
+  mapping: Mapping | null
   loading?: boolean
   isCompact?: boolean
   error?: string

src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.tsx

@@ -62,7 +62,7 @@ export const CollectionItemHeaderV2 = ({ areAllSelected, onSelectedAllClick }: P
             <LinkingTooltipContent />
           </InfoTooltip>
         </Grid.Column>
-        <Grid.Column width={2}> {t('collection_row.status')} </Grid.Column>
+        <Grid.Column width={3}> {t('collection_row.status')} </Grid.Column>
         <Grid.Column width={1}></Grid.Column>
       </Grid.Row>
     </Grid>

src/components/ThirdPartyCollectionDetailPage/CollectionItemV2/CollectionItemV2.module.css

@@ -32,19 +32,6 @@
   display: flex !important;
 }
 
-.statusColumn {
-  font-size: 13px;
-  text-transform: uppercase;
-}
-
-.statusColumn.synced {
-  color: #34ce76;
-}
-
-.statusColumn.unsynced {
-  color: #fc9965;
-}
-
 .avatarColumn {
   align-items: center;
   padding-left: 10px !important;

src/components/ThirdPartyCollectionDetailPage/CollectionItemV2/CollectionItemV2.tsx

@@ -7,9 +7,9 @@ import { Link, useHistory } from 'react-router-dom'
 import { locations } from 'routing/locations'
 import { preventDefault } from 'lib/event'
 import { debounce } from 'lib/debounce'
-import { SyncStatus } from 'modules/item/types'
 import { FromParam } from 'modules/location/types'
 import ConfirmDelete from 'components/ConfirmDelete'
+import { ItemStatusBadge } from 'components/ItemStatusBadge'
 import { buildItemMappings, getMapping } from 'modules/item/utils'
 import { MappingEditor } from 'components/MappingEditor'
 import { LinkedContract } from 'modules/thirdParty/types'
@@ -51,7 +51,13 @@ export default function CollectionItemV2({
   }, [localMapping, contract])
 
   useEffect(() => {
-    if (mapping && localMapping && contract && !error && !areMappingsEqual(mapping, localMapping)) {
+    if (!contract || error) {
+      return
+    }
+
+    if (!mapping && localMapping) {
+      handleSaveItem(localMapping, contract)
+    } else if (mapping && localMapping && !areMappingsEqual(mapping, localMapping)) {
       handleSaveItem(localMapping, contract)
     }
   }, [mapping, error, localMapping, contract])
@@ -94,19 +100,6 @@ export default function CollectionItemV2({
     onDelete(item)
   }, [onDelete, item])
 
-  const statusIcon = useMemo(() => {
-    switch (status) {
-      case SyncStatus.UNDER_REVIEW:
-        return <Icon name="clock outline" />
-      case SyncStatus.SYNCED:
-        return <Icon name="check circle outline" />
-      case SyncStatus.UNSYNCED:
-        return <Icon name="exclamation circle" />
-      default:
-        return null
-    }
-  }, [status])
-
   return (
     <Grid className={classNames(styles.grid, loading && styles.loading)} columns="equal">
       {loading && (
@@ -125,13 +118,10 @@ export default function CollectionItemV2({
           </div>
         </Grid.Column>
         <Grid.Column>
-          {contract && localMapping && (
-            <MappingEditor disabled={loading} mapping={localMapping} error={error} onChange={setLocalMapping} isCompact />
-          )}
+          {contract && <MappingEditor disabled={loading} mapping={localMapping} error={error} onChange={setLocalMapping} isCompact />}
         </Grid.Column>
-        <Grid.Column width={2} className={`${styles.column} ${styles.statusColumn} ${styles[status]}`}>
-          {statusIcon}
-          <div>{t(`third_party_collection_detail_page.synced_statuses.${status}`)}</div>
+        <Grid.Column width={3} className={classNames(styles.column, styles.statusColumn)}>
+          <ItemStatusBadge status={status} item={item} />
         </Grid.Column>
         <Grid.Column width={1} className={styles.column}>
           <div className={styles.itemActions}>

src/icons/map.svg

@@ -79,6 +79,7 @@ export type RemoteItem = {
   mappings: Partial<Record<ContractNetwork, Record<ContractAddress, Mapping[]>>> | null
   local_content_hash: string | null
   catalyst_content_hash: string | null
+  isMappingComplete?: boolean
 }
 
 export type RemoteCollection = {
@@ -382,6 +383,7 @@ function fromRemoteItem(remoteItem: RemoteItem) {
     catalystContentHash: remoteItem.catalyst_content_hash,
     metrics: remoteItem.metrics,
     mappings: remoteItem.mappings,
+    isMappingComplete: remoteItem.isMappingComplete,
     createdAt: +new Date(remoteItem.created_at),
     updatedAt: +new Date(remoteItem.created_at)
   }

src/icons/under_review.svg

@@ -123,6 +123,7 @@ export type Item<T = ItemType.WEARABLE> = Omit<BaseItem, 'metrics'> & {
   data: T extends ItemType.WEARABLE ? WearableData : EmoteDataADR74
   metrics: T extends ItemType.WEARABLE ? ModelMetrics : AnimationMetrics
   mappings: Partial<Record<ContractNetwork, Record<ContractAddress, Mapping[]>>> | null
+  isMappingComplete?: boolean
 }
 
 export const isEmoteItemType = (item: Item | Item<ItemType.EMOTE>): item is Item<ItemType.EMOTE> =>

src/lib/api/builder.ts

@@ -278,6 +278,7 @@
       "range": "e.g. [1, 1000]"
     },
     "mapping_type_label": "Linked to",
+    "mapping_type_placeholder": "Select",
     "mapping_value_label": "Token ID",
     "mapping_value_multiple_label": "Token IDs",
     "mapping_value_any": "Any token ID",
@@ -2339,5 +2340,13 @@
     "description_dcl": "Meanwhile, Worlds from Decentraland NAMEs will have a dynamic maximum file size limit depending on a user's Decentraland holdings. <b>Each NAME, LAND, and set of 2,000 MANA tokens owned </b> will grant an additional <b>100 Mb of storage</b> on the Worlds content server to be used as you wish.",
     "start_building": "start building",
     "learn_more": "learn more"
+  },
+  "item_status": {
+    "unpublished": "Ready to publish",
+    "under_review": "Under Review",
+    "synced": "Published",
+    "unsynced": "Ready to push changes",
+    "pending_migration": "Pending Migration",
+    "pending_mapping": "Pending Mapping"
   }
 }

src/modules/item/types.ts

@@ -279,6 +279,7 @@
       "range": "p. ej. [1, 1000]"
     },
     "mapping_type_label": "Vinculado a",
+    "mapping_type_placeholder": "Seleccionar",
     "mapping_value_label": "Token ID",
     "mapping_value_multiple_label": "Token IDs",
     "mapping_value_any": "Todos los token IDs",
@@ -2357,5 +2358,13 @@
     "description_dcl": "Mientras tanto, los Mundos de los NAMEs de Decentraland tendrán un límite de tamaño máximo dinámico dependiendo de las tenencias del usuario. <b>Cada NAME, LAND y 2,000 tokens MANA poseídos</b> otorgarán un adicional de <b>100 Mb de almacenamiento</b> en el servidor de contenido de Mundos para ser utilizado como desee.",
     "start_building": "comenzar a construir",
     "learn_more": "aprende más"
+  },
+  "item_status": {
+    "unpublished": "Listos para publicar",
+    "under_review": "Bajo revisión",
+    "synced": "Published",
+    "unsynced": "Listo para enviar cambios",
+    "pending_migration": "Migración pendiente",
+    "pending_mapping": "Mapeo pendiente"
   }
 }

src/modules/translation/languages/en.json

@@ -273,6 +273,7 @@
       "range": "例如 [1, 1000]"
     },
     "mapping_type_label": "链接到",
+    "mapping_type_placeholder": "选择",
     "mapping_value_label": "代币 ID",
     "mapping_value_multiple_label": "代币 ID",
     "mapping_value_any": "任何代币 ID",
@@ -2339,5 +2340,13 @@
     "description_dcl": "同时，来自Decentraland NAME的世界将具有动态的最大文件大小限制，具体取决于用户的Decentraland持有量。 <b>每个NAME、LAND和2,000个MANA代币的集合所拥有的</b>将在Worlds内容服务器上额外获得<b>100 Mb的存储空间</b>，可随意使用。",
     "start_building": "开始建设",
     "learn_more": "了解更多"
+  },
+  "item_status": {
+    "unpublished": "准备发布",
+    "under_review": "审查中",
+    "synced": "已发表",
+    "unsynced": "已准备好发送更改",
+    "pending_migration": "待迁移",
+    "pending_mapping": "待定映射"
   }
 }