feat: Add Tippy tooltip to MultiSelectCustomization Option component

Author: AbhishekA1509

src/Common/MultiSelectCustomization.tsx

@@ -16,21 +16,23 @@
 
 import React from 'react'
 import Select, { components } from 'react-select'
+import Tippy from '@tippyjs/react'
 import { ReactComponent as ClearIcon } from '../Assets/Icon/ic-appstatus-cancelled.svg'
 import { ReactComponent as ICErrorCross } from '@Icons/ic-error-cross.svg'
 import { ReactComponent as Check } from '../Assets/Icon/ic-check.svg'
 import { ReactComponent as RedWarning } from '../Assets/Icon/ic-error-medium.svg'
 import { Checkbox } from './Checkbox'
 import { CHECKBOX_VALUE } from './Types'
+import { ConditionalWrap } from './Helper'
 
 export const Option = (props) => {
-    const { selectOption, data } = props
+    const { selectOption, data, showTippy, tippyPlacement } = props
 
     const handleChange = (e) => {
         selectOption(data)
     }
 
-    return (
+    const renderOption = () => (
         <div
             className="flex left pl-12 cursor dc__gap-8"
             style={{ background: props.isFocused ? 'var(--N100)' : 'transparent' }}
@@ -44,6 +46,26 @@ export const Option = (props) => {
             <components.Option {...props} />
         </div>
     )
+
+    const renderTippy = (children) => {
+        const placement = tippyPlacement === 'left' || tippyPlacement === 'right' ? tippyPlacement : 'auto'
+        return (
+            <Tippy
+                content={data.label}
+                className="default-tt dc__mxw-200 dc__word-break"
+                placement={placement}
+                arrow={false}
+            >
+                {children}
+            </Tippy>
+        )
+    }
+
+    return (
+        <ConditionalWrap condition={showTippy} wrap={renderTippy}>
+            {renderOption()}
+        </ConditionalWrap>
+    )
 }
 
 export const SingleSelectOption = (props) => {

src/Shared/Components/Plugin/PluginTagSelect.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import ReactSelect, { MenuListProps, ValueContainerProps } from 'react-select'
-import { Option, OptionType } from '../../../Common'
+import { OptionType } from '../../../Common'
 import { LoadingIndicator, MenuListWithApplyButton, MultiSelectValueContainer } from '../ReactSelect'
 import { GenericSectionErrorState } from '../GenericSectionErrorState'
 import { PluginTagSelectProps } from './types'
-import { pluginTagSelectStyles } from './utils'
+import { PluginTagOption, pluginTagSelectStyles } from './utils'
 
 const PluginTagSelect = ({
     availableTags,
@@ -78,7 +78,7 @@ const PluginTagSelect = ({
                 LoadingIndicator,
                 NoOptionsMessage: renderNoOptionsMessage,
                 MenuList: renderMenuList,
-                Option,
+                Option: PluginTagOption,
                 ValueContainer: renderValueContainer,
             }}
             menuIsOpen={isMenuOpen}

src/Shared/Components/Plugin/utils.tsx

@@ -1,3 +1,6 @@
+import { OptionProps } from 'react-select'
+import { OptionType } from '@Common/Types'
+import { Option } from '@Common/MultiSelectCustomization'
 import { ParentPluginDTO, PluginCreationType, PluginDataStoreType } from './types'
 import { commonSelectStyles } from '../ReactSelect'
 import { stringComparatorBySortOrder } from '../../Helpers'
@@ -100,6 +103,10 @@ export const pluginTagSelectStyles = {
     }),
 }
 
+export const PluginTagOption = (props: OptionProps<OptionType, true>) => (
+    <Option {...props} showTippy placement="left" />
+)
+
 /**
  * @description This method takes the initial plugin data store and updates the keys with the target parent plugin store and plugin version store
  */