Merge pull request #556 from devtron-labs/fix/cd-card-details

fix(ui): tooltip placement and content in sequential cd card

Author: Elessar1802

.github/CODEOWNERS

@@ -1 +1 @@
-* vivek@devtron.ai @vikramdevtron
+* @vivek-devtron @vikramdevtron

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.6.9",
+    "version": "1.6.10",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -0,0 +1,33 @@
+import { Checkbox } from '@Common/Checkbox'
+import { CHECKBOX_VALUE } from '@Common/Types'
+import { AdditionalConfirmationModalOptionsProps } from './types'
+
+const ForceDeleteOption = ({
+    optionsData,
+    setOptionsData: setShouldForceDelete,
+    children,
+}: AdditionalConfirmationModalOptionsProps<boolean>) => {
+    const shouldForceDelete = optionsData ?? false
+
+    const handleToggleShouldForceDelete = () => {
+        setShouldForceDelete(!shouldForceDelete)
+    }
+
+    return (
+        <div className="flexbox-col dc__gap-12 w-100">
+            <Checkbox
+                value={CHECKBOX_VALUE.CHECKED}
+                isChecked={shouldForceDelete}
+                dataTestId="force-delete-resource"
+                rootClassName="m-0"
+                onChange={handleToggleShouldForceDelete}
+            >
+                Force delete resource
+            </Checkbox>
+
+            {children}
+        </div>
+    )
+}
+
+export default ForceDeleteOption

src/Pages/ResourceBrowser/ForceDeleteOption.tsx

@@ -72,6 +72,18 @@ export const CORDON_NODE_MODAL_MESSAGING = {
     cancel: 'Cancel',
 }
 
+export const DELETE_NODE_MODAL_MESSAGING = {
+    subtitle: (
+        <p className="fs-13 fw-4 cn-8 m-0">
+            Drain the node before deleting it as it may cause disruption because of pod deletion.
+            <br />
+            <br />
+            Are you sure you want to delete this node?
+        </p>
+    ),
+    successInfoToastMessage: 'Node deletion initiated',
+}
+
 export const NODE_DRAIN_OPTIONS_CHECKBOX_CONFIG: {
     key: Exclude<keyof NodeDrainRequest['nodeDrainOptions'], 'gracePeriodSeconds'>
     infoText: string

src/Pages/ResourceBrowser/constants.ts renamed to src/Pages/ResourceBrowser/constants.tsx

@@ -20,3 +20,4 @@ export * from './constants'
 export * from './types'
 export * from './service'
 export { default as NodeDrainOptions } from './NodeDrainOptions'
+export { default as ForceDeleteOption } from './ForceDeleteOption'

src/Pages/ResourceBrowser/index.ts

@@ -14,29 +14,29 @@
  * limitations under the License.
  */
 
-import Tippy from '@tippyjs/react'
-import { ConditionalWrap } from '../../../../../Common'
+import { Tooltip } from '../../../../../Common'
 import { DeploymentEnvStateProps } from './types'
 import { getDeploymentEnvConfig } from './utils'
 
 const DeploymentEnvState = ({ envStateText, title, tooltipContent }: DeploymentEnvStateProps) => {
     const { Icon, stateClassName } = getDeploymentEnvConfig(envStateText)
-    const renderTooltip = (children) => (
-        <Tippy content={tooltipContent} className="default-tt" placement="top" arrow={false} interactive>
-            {children}
-        </Tippy>
-    )
 
     return (
-        <ConditionalWrap condition={!!tooltipContent} wrap={renderTooltip}>
+        <Tooltip
+            alwaysShowTippyOnHover={!!tooltipContent}
+            content={tooltipContent}
+            placement="right"
+            interactive
+            className="w-250 dc__overflow-auto mxh-140"
+        >
             <div className={`${stateClassName} br-4 cn-9 pt-3 pb-3 pl-6 pr-6 bw-1 mr-6`}>
                 <span className="fw-4 fs-11 lh-16 flex">
                     {Icon}
                     {envStateText}
                     <span className="fw-6 ml-4">{title}</span>
                 </span>
             </div>
-        </ConditionalWrap>
+        </Tooltip>
     )
 }
 

src/Shared/Components/ImageCard/SequentialCDCardTitle/DeploymentEnvState/DeploymentEnvState.tsx

@@ -19,7 +19,7 @@ import { ReactNode } from 'react'
 export interface DeploymentEnvStateProps {
     envStateText: string
     title: string
-    tooltipContent?: string
+    tooltipContent?: ReactNode
 }
 
 export interface GetDeploymentEnvConfigType {

src/Shared/Components/ImageCard/SequentialCDCardTitle/DeploymentEnvState/types.tsx

@@ -50,7 +50,13 @@ const SequentialCDCardTitle = ({
                 <DeploymentEnvState
                     envStateText={getDeployedStateText()}
                     title={deployedOnTitle}
-                    tooltipContent={deployedOn.join(',')}
+                    tooltipContent={
+                        <div className="flexbox-col lh-20">
+                            {deployedOn.map((env) => (
+                                <span key={env}>{env}</span>
+                            ))}
+                        </div>
+                    }
                 />
             )
         }

src/Shared/Components/ImageCard/SequentialCDCardTitle/SequentialCDCardTitle.tsx

@@ -33,7 +33,12 @@ const TooltipContent = ({ targetPlatforms }: Pick<TargetPlatformListTooltipProps
 )
 
 const TargetPlatformListTooltip = ({ targetPlatforms, children }: TargetPlatformListTooltipProps) => (
-    <Tooltip content={<TooltipContent targetPlatforms={targetPlatforms} />} alwaysShowTippyOnHover interactive>
+    <Tooltip
+        content={<TooltipContent targetPlatforms={targetPlatforms} />}
+        placement="right"
+        alwaysShowTippyOnHover
+        interactive
+    >
         {children}
     </Tooltip>
 )