fix: review comments

Author: Elessar1802

src/Common/AddCDButton/AddCDButton.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react'
 import Tippy from '@tippyjs/react'
 import { AddCDButtonProps, TooltipContentProps } from './types'
 import { AddCDPositions } from '../Types'

src/Common/RJSF/common/FieldRow.tsx

@@ -14,11 +14,9 @@
  * limitations under the License.
  */
 
-import React from 'react'
-import { ConditionalWrap } from '../../Helper'
+import { Tooltip } from '@Common/Tooltip'
 import { FieldRowProps } from './types'
 import { DEFAULT_FIELD_TITLE } from '../constants'
-import { getTippyWrapperWithContent } from '../utils'
 
 export const FieldRowWithLabel = ({
     showLabel,
@@ -38,11 +36,11 @@ export const FieldRowWithLabel = ({
     >
         {showLabel && (
             <label className="cn-7 fs-13 lh-20 fw-4 flexbox mb-0" htmlFor={id}>
-                <ConditionalWrap condition={!!rawDescription} wrap={getTippyWrapperWithContent(rawDescription, 'top')}>
+                <Tooltip alwaysShowTippyOnHover={!!rawDescription}>
                     <span className={`dc__ellipsis-right ${rawDescription ? 'text-underline-dashed-300' : ''}`}>
                         {label || DEFAULT_FIELD_TITLE}
                     </span>
-                </ConditionalWrap>
+                </Tooltip>
                 {required && <span className="cr-5">&nbsp;*</span>}
             </label>
         )}

src/Common/RJSF/templates/ButtonTemplates/AddButton.tsx

@@ -16,7 +16,7 @@
 
 import { IconButtonProps } from '@rjsf/utils'
 
-import Tippy from '../../../Tippy'
+import Tooltip from '../../../Tooltip/Tooltip'
 import { ReactComponent as PlusIcon } from '../../../../Assets/Icon/ic-add.svg'
 
 export const AddButton = ({
@@ -31,7 +31,7 @@ export const AddButton = ({
 
     return (
         <div className="flexbox flex-justify-start">
-            <Tippy
+            <Tooltip
                 showOnTruncate
                 className="default-tt dc__word-break"
                 arrow={false}
@@ -47,7 +47,7 @@ export const AddButton = ({
                     <PlusIcon className="icon-dim-16 fcb-5" />
                     <span className="cb-5 fs-13 lh-34 dc__truncate">{content}</span>
                 </button>
-            </Tippy>
+            </Tooltip>
         </div>
     )
 }

src/Common/RJSF/templates/TitleField.tsx

@@ -14,16 +14,14 @@
  * limitations under the License.
  */
 
-import React from 'react'
-import { ConditionalWrap } from '../../Helper'
 import { TitleFieldProps } from '@rjsf/utils'
-import { getTippyWrapperWithContent } from '../utils'
+import { Tooltip } from '@Common/Tooltip'
 
 export const TitleField = ({ id, title, required, description }: TitleFieldProps & Partial<Record<'description', string>>) => (
     <legend className="fs-13 fw-6 cn-9 lh-20 dc__no-border py-9 mb-0" id={id}>
-        <ConditionalWrap condition={!!description} wrap={getTippyWrapperWithContent(description, 'top')}>
+        <Tooltip alwaysShowTippyOnHover={!!description}>
             <span className={`${description ? 'text-underline-dashed-300' : ''}`}>{title}</span>
-        </ConditionalWrap>
+        </Tooltip>
         {required && <span className="cr-5">&nbsp;*</span>}
     </legend>
 )

src/Common/RJSF/utils.tsx

@@ -15,7 +15,6 @@
  */
 
 import { TranslatableString, englishStringTranslator } from '@rjsf/utils'
-import Tippy from '../Tippy'
 
 /**
  * Override for the TranslatableString from RJSF
@@ -136,10 +135,3 @@ export const getInferredTypeFromValueType = (value) => {
             return 'null'
     }
 }
-
-export const getTippyWrapperWithContent =
-    (content, placement?: React.ComponentProps<typeof Tippy>['placement']) => (children) => (
-        <Tippy className="default-tt" maxWidth={300} arrow={false} placement={placement || 'right'} content={content}>
-            {children}
-        </Tippy>
-    )

src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Tippy } from '..'
+import { Tooltip } from '@Common/Tooltip'
 import { ReactComponent as SortIcon } from '../../Assets/Icon/ic-arrow-up-down.svg'
 import { ReactComponent as SortArrowDown } from '../../Assets/Icon/ic-sort-arrow-down.svg'
 import { SortingOrder } from '../Constants'
@@ -63,19 +63,19 @@ const SortableTableHeaderCell = ({
     return (
         <button
             type="button"
-            className="dc__transparent p-0 bcn-0 cn-7 flex dc__content-start dc__gap-4 dc__select-text"
+            className="dc__transparent p-0 cn-7 flex dc__content-start dc__gap-4 dc__select-text"
             onClick={isSortable ? triggerSorting : noop}
             disabled={disabled}
         >
-            <Tippy
+            <Tooltip
                 showOnTruncate={showTippyOnTruncate}
                 className="default-tt"
                 placement="top"
                 arrow={false}
                 content={title}
             >
                 <span className="dc__uppercase dc__ellipsis-right">{title}</span>
-            </Tippy>
+            </Tooltip>
             {renderSortIcon()}
         </button>
     )

src/Common/SortableTableHeaderCell/types.ts

@@ -44,5 +44,9 @@ export interface SortableTableHeaderCellProps {
      * @default true
      */
     isSortable?: boolean
+    /**
+     * If true, the tippy is shown on Sortable header if text is truncated
+     * @default false
+     */
     showTippyOnTruncate?: boolean
 }

src/Common/Tippy.tsx

@@ -19,7 +19,6 @@ import { Placement } from 'tippy.js'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
 import { ACTION_STATE, DEPLOYMENT_WINDOW_TYPE, DockerConfigOverrideType, SortingOrder, TaskErrorObj } from '.'
 import { RegistryType } from '../Shared'
-import { TippyProps as TippyJSProps } from '@tippyjs/react'
 
 /**
  * Generic response type object with support for overriding the result type
@@ -936,7 +935,3 @@ export interface EnvironmentHelmResult {
 }
 
 export type EnvironmentListHelmResponse = ResponseType<EnvironmentListHelmResult[]>
-
-export interface TippyProps extends TippyJSProps {
-    showOnTruncate?: boolean
-}

src/Common/Types.ts

@@ -71,4 +71,4 @@ export * from './GenericDescription'
 export * from './SegmentedBarChart'
 export * from './CodeEditor'
 export * from './AppStatus'
-export { default as Tippy } from './Tippy'
+export * from './Tooltip'