From 73ab2d08e281da0cde337fcc2b70f778f7a92833 Mon Sep 17 00:00:00 2001
From: Lautaro Petaccio <1120791+LautaroPetaccio@users.noreply.github.com>
Date: Thu, 3 Oct 2024 15:54:19 -0300
Subject: [PATCH] feat: Show the linked to tooltip on the item creation modal
 (#3201)

---
 .../LinkedToTooltip/LinkedToToolip.types.ts   |  3 +
 .../LinkedToTooltip.module.css                | 64 ++++++++++++++++++
 .../LinkedToTooltip/LinkedToTooltip.tsx       | 50 ++++++++++++++
 src/components/LinkedToTooltip/index.ts       |  1 +
 .../MappingEditor/MappingEditor.module.css    |  8 +++
 .../MappingEditor/MappingEditor.tsx           |  9 ++-
 .../CreateSingleItemModal.css                 |  4 ++
 .../CollectionItemHeaderV2.module.css         | 65 -------------------
 .../CollectionItemHeaderV2.tsx                | 53 ++-------------
 9 files changed, 142 insertions(+), 115 deletions(-)
 create mode 100644 src/components/LinkedToTooltip/LinkedToToolip.types.ts
 create mode 100644 src/components/LinkedToTooltip/LinkedToTooltip.module.css
 create mode 100644 src/components/LinkedToTooltip/LinkedToTooltip.tsx
 create mode 100644 src/components/LinkedToTooltip/index.ts

diff --git a/src/components/LinkedToTooltip/LinkedToToolip.types.ts b/src/components/LinkedToTooltip/LinkedToToolip.types.ts
new file mode 100644
index 000000000..71b9a5345
--- /dev/null
+++ b/src/components/LinkedToTooltip/LinkedToToolip.types.ts
@@ -0,0 +1,3 @@
+export type Props = {
+  className?: string
+}
diff --git a/src/components/LinkedToTooltip/LinkedToTooltip.module.css b/src/components/LinkedToTooltip/LinkedToTooltip.module.css
new file mode 100644
index 000000000..901e697d9
--- /dev/null
+++ b/src/components/LinkedToTooltip/LinkedToTooltip.module.css
@@ -0,0 +1,64 @@
+.linkedTooltip {
+  display: grid;
+  width: 458px;
+  margin: 14px;
+  grid-template-columns: auto auto;
+  gap: 4px;
+  overflow: hidden;
+}
+
+.gridItem {
+  position: relative;
+  padding: 10px;
+  display: flex;
+  align-items: start;
+}
+
+.mappingExample {
+  color: #cfcdd4;
+}
+
+.mappingType {
+  display: flex;
+  align-items: center;
+}
+
+.mappingDescription {
+  flex-direction: column;
+}
+
+.mappingIcon {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.tooltipHeader {
+  display: flex;
+  align-items: center;
+  grid-column-start: 1;
+  grid-column-end: 3;
+  padding: 10px;
+  text-transform: uppercase;
+}
+
+.tooltipHeader img {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.gridItem::before,
+.gridItem::after {
+  content: '';
+  position: absolute;
+  background-color: #a09ba8;
+  z-index: 1;
+}
+
+.gridItem::after {
+  width: 100vw;
+  height: 1px;
+  left: 0;
+  top: -1px;
+}
diff --git a/src/components/LinkedToTooltip/LinkedToTooltip.tsx b/src/components/LinkedToTooltip/LinkedToTooltip.tsx
new file mode 100644
index 000000000..f1bfb471f
--- /dev/null
+++ b/src/components/LinkedToTooltip/LinkedToTooltip.tsx
@@ -0,0 +1,50 @@
+import classNames from 'classnames'
+import { InfoTooltip } from 'decentraland-ui'
+import { t } from 'decentraland-dapps/dist/modules/translation'
+import { MappingType } from '@dcl/schemas'
+import allIcon from '../../icons/all.svg'
+import multipleIcon from '../../icons/multiple.svg'
+import singleIcon from '../../icons/single.svg'
+import rangeIcon from '../../icons/range.svg'
+import lightbulbIcon from '../../icons/lightbulb.svg'
+import styles from './LinkedToTooltip.module.css'
+import { Props } from './LinkedToToolip.types'
+
+const mappingTypeIcons = {
+  [MappingType.ANY]: allIcon,
+  [MappingType.MULTIPLE]: multipleIcon,
+  [MappingType.SINGLE]: singleIcon,
+  [MappingType.RANGE]: rangeIcon
+}
+
+const LinkingTooltipMappingType = ({ type }: { type: MappingType }) => {
+  return (
+    <>
+      <div className={styles.gridItem}>
+        <div className={styles.mappingType}>
+          <img className={styles.mappingIcon} src={mappingTypeIcons[type]} />
+          {t(`mapping_editor.mapping_types.${type}`)}
+        </div>
+      </div>
+      <div className={classNames(styles.gridItem, styles.mappingDescription)}>
+        <div>{t(`mapping_editor.mapping_descriptions.${type}`)}</div>
+        {type !== MappingType.ANY && <div className={styles.mappingExample}>{t(`mapping_editor.mapping_examples.${type}`)}</div>}
+      </div>
+    </>
+  )
+}
+
+export const LinkingToTooltip = ({ className }: Props) => (
+  <InfoTooltip className={className}>
+    <div className={styles.linkedTooltip}>
+      <div className={styles.tooltipHeader}>
+        <img src={lightbulbIcon} />
+        {t('collection_row.linking_tooltip.title')}
+      </div>
+      <LinkingTooltipMappingType type={MappingType.ANY} />
+      <LinkingTooltipMappingType type={MappingType.SINGLE} />
+      <LinkingTooltipMappingType type={MappingType.MULTIPLE} />
+      <LinkingTooltipMappingType type={MappingType.RANGE} />
+    </div>
+  </InfoTooltip>
+)
diff --git a/src/components/LinkedToTooltip/index.ts b/src/components/LinkedToTooltip/index.ts
new file mode 100644
index 000000000..6c1d4ac6e
--- /dev/null
+++ b/src/components/LinkedToTooltip/index.ts
@@ -0,0 +1 @@
+export * from './LinkedToTooltip'
diff --git a/src/components/MappingEditor/MappingEditor.module.css b/src/components/MappingEditor/MappingEditor.module.css
index 12747f4cb..83c702d6e 100644
--- a/src/components/MappingEditor/MappingEditor.module.css
+++ b/src/components/MappingEditor/MappingEditor.module.css
@@ -127,3 +127,11 @@
 .mappings :global(.dcl.text-area) {
   width: 100%;
 }
+
+/* Tooltip */
+
+.typeLabel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
diff --git a/src/components/MappingEditor/MappingEditor.tsx b/src/components/MappingEditor/MappingEditor.tsx
index d521eae04..d9c6e1d3f 100644
--- a/src/components/MappingEditor/MappingEditor.tsx
+++ b/src/components/MappingEditor/MappingEditor.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import { DropdownProps, Field, InputOnChangeData, SelectField, TextAreaField, TextAreaProps } from 'decentraland-ui'
 import { MappingType, MultipleMapping } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation'
+import { LinkingToTooltip } from 'components/LinkedToTooltip'
 import allIcon from '../../icons/all.svg'
 import multipleIcon from '../../icons/multiple.svg'
 import singleIcon from '../../icons/single.svg'
@@ -117,7 +118,13 @@ export const MappingEditor = (props: Props) => {
   return (
     <div className={classNames(styles.main, isCompact ? styles.compact : styles.full)}>
       <SelectField
-        label={isCompact ? undefined : t('mapping_editor.mapping_type_label')}
+        label={
+          isCompact ? undefined : (
+            <div className={styles.typeLabel}>
+              {t('mapping_editor.mapping_type_label')} <LinkingToTooltip />
+            </div>
+          )
+        }
         onChange={handleMappingTypeChange}
         placeholder={t('mapping_editor.mapping_type_placeholder')}
         value={mappingType}
diff --git a/src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.css b/src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.css
index bd5cace92..3b2619363 100644
--- a/src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.css
+++ b/src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.css
@@ -3,6 +3,10 @@
   visibility: hidden !important;
 }
 
+.CreateSingleItemModalContainer > .ui.page.modals {
+  z-index: 1900;
+}
+
 .CreateSingleItemModal.ui.modal > .content {
   margin-bottom: 32px;
 }
diff --git a/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.module.css b/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.module.css
index d12bbb89c..172458a0c 100644
--- a/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.module.css
+++ b/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.module.css
@@ -17,71 +17,6 @@
   margin-right: 10px;
 }
 
-.linkedTooltip {
-  display: grid;
-  width: 458px;
-  margin: 14px;
-  grid-template-columns: auto auto;
-  gap: 4px;
-  overflow: hidden;
-}
-
-.gridItem {
-  position: relative;
-  padding: 10px;
-  display: flex;
-  align-items: start;
-}
-
-.mappingExample {
-  color: #cfcdd4;
-}
-
-.mappingType {
-  display: flex;
-  align-items: center;
-}
-
-.mappingDescription {
-  flex-direction: column;
-}
-
-.mappingIcon {
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
-}
-
-.tooltipHeader {
-  display: flex;
-  align-items: center;
-  grid-column-start: 1;
-  grid-column-end: 3;
-  padding: 10px;
-  text-transform: uppercase;
-}
-
-.tooltipHeader img {
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
-}
-
-.gridItem::before,
-.gridItem::after {
-  content: '';
-  position: absolute;
-  background-color: #a09ba8;
-  z-index: 1;
-}
-
-.gridItem::after {
-  width: 100vw;
-  height: 1px;
-  left: 0;
-  top: -1px;
-}
-
 .linkedToColumn > span {
   margin-right: 6px;
 }
diff --git a/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.tsx b/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.tsx
index 4ca4a37a1..a90ae32b5 100644
--- a/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.tsx
+++ b/src/components/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.tsx
@@ -1,52 +1,9 @@
-import classNames from 'classnames'
-import { MappingType } from '@dcl/schemas'
-import { Checkbox, Grid, InfoTooltip } from 'decentraland-ui'
-import allIcon from '../../../icons/all.svg'
-import multipleIcon from '../../../icons/multiple.svg'
-import singleIcon from '../../../icons/single.svg'
-import rangeIcon from '../../../icons/range.svg'
-import lightbulbIcon from '../../../icons/lightbulb.svg'
-import { Props } from './CollectionItemHeaderV2.types'
+import { Checkbox, Grid } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation'
+import { LinkingToTooltip } from 'components/LinkedToTooltip'
+import { Props } from './CollectionItemHeaderV2.types'
 import styles from './CollectionItemHeaderV2.module.css'
 
-const mappingTypeIcons = {
-  [MappingType.ANY]: allIcon,
-  [MappingType.MULTIPLE]: multipleIcon,
-  [MappingType.SINGLE]: singleIcon,
-  [MappingType.RANGE]: rangeIcon
-}
-
-const LinkingTooltipMappingType = ({ type }: { type: MappingType }) => {
-  return (
-    <>
-      <div className={styles.gridItem}>
-        <div className={styles.mappingType}>
-          <img className={styles.mappingIcon} src={mappingTypeIcons[type]} />
-          {t(`mapping_editor.mapping_types.${type}`)}
-        </div>
-      </div>
-      <div className={classNames(styles.gridItem, styles.mappingDescription)}>
-        <div>{t(`mapping_editor.mapping_descriptions.${type}`)}</div>
-        {type !== MappingType.ANY && <div className={styles.mappingExample}>{t(`mapping_editor.mapping_examples.${type}`)}</div>}
-      </div>
-    </>
-  )
-}
-
-const LinkingTooltipContent = () => (
-  <div className={styles.linkedTooltip}>
-    <div className={styles.tooltipHeader}>
-      <img src={lightbulbIcon} />
-      {t('collection_row.linking_tooltip.title')}
-    </div>
-    <LinkingTooltipMappingType type={MappingType.ANY} />
-    <LinkingTooltipMappingType type={MappingType.SINGLE} />
-    <LinkingTooltipMappingType type={MappingType.MULTIPLE} />
-    <LinkingTooltipMappingType type={MappingType.RANGE} />
-  </div>
-)
-
 export const CollectionItemHeaderV2 = ({ areAllSelected, onSelectedAllClick }: Props) => {
   return (
     <Grid columns="equal" className={styles.gridHeader}>
@@ -58,9 +15,7 @@ export const CollectionItemHeaderV2 = ({ areAllSelected, onSelectedAllClick }: P
         </Grid.Column>
         <Grid.Column className={styles.linkedToColumn}>
           <span>{t('third_party_collection_detail_page.linked_to')}</span>
-          <InfoTooltip>
-            <LinkingTooltipContent />
-          </InfoTooltip>
+          <LinkingToTooltip />
         </Grid.Column>
         <Grid.Column width={3}> {t('collection_row.status')} </Grid.Column>
         <Grid.Column width={1}></Grid.Column>