refactor: simplify AppStatusModal components by removing unnecessary useMemo hooks and enhancing layout with improved styling

Author: AbhishekA1509

src/Shared/Components/AppStatusModal/AppStatusBody.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode, useMemo } from 'react'
+import { ComponentProps, ReactNode } from 'react'
 
 import { Tooltip } from '@Common/Tooltip'
 
@@ -28,7 +28,7 @@ const InfoCardItem = ({ heading, value, isLast = false }: { heading: string; val
 
 export const AppStatusBody = ({ appDetails, type, handleShowConfigDriftModal }: AppStatusBodyProps) => {
     const appStatus = appDetails.resourceTree?.status?.toUpperCase() || appDetails.appStatus
-    const message = useMemo(() => getAppStatusMessageFromAppDetails(appDetails), [appDetails])
+    const message = getAppStatusMessageFromAppDetails(appDetails)
     const customMessage =
         type === 'stack-manager'
             ? 'The installation will complete when status for all the below resources become HEALTHY.'
@@ -61,17 +61,19 @@ export const AppStatusBody = ({ appDetails, type, handleShowConfigDriftModal }:
     ]
 
     return (
-        <div className="flexbox-col dc__gap-16 p-20 dc__overflow-auto">
+        <div className="flexbox-col px-20 dc__gap-16 dc__overflow-auto">
             {/* Info card */}
-            <div className="flexbox-col br-8 border__primary bg__primary shadow__card--secondary">
-                {infoCardItems.map((item, index) => (
-                    <InfoCardItem
-                        key={item.id}
-                        heading={item.heading}
-                        value={item.value}
-                        isLast={index === infoCardItems.length - 1}
-                    />
-                ))}
+            <div className="flexbox-col pt-20">
+                <div className="flexbox-col br-8 border__primary bg__primary shadow__card--secondary">
+                    {infoCardItems.map((item, index) => (
+                        <InfoCardItem
+                            key={item.id}
+                            heading={item.heading}
+                            value={item.value}
+                            isLast={index === infoCardItems.length - 1}
+                        />
+                    ))}
+                </div>
             </div>
 
             <ErrorBar appDetails={appDetails} useParentMargin={false} />

src/Shared/Components/AppStatusModal/AppStatusContent.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 
 import { SortableTableHeaderCell } from '@Common/SortableTableHeaderCell'
 import { Tooltip } from '@Common/Tooltip'
@@ -8,6 +8,7 @@ import { Node } from '@Shared/types'
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { NodeFilters, StatusFilterButtonComponent } from '../CICDHistory'
 import { Icon } from '../Icon'
+import { ShowMoreText } from '../ShowMoreText'
 import { AppStatusContentProps } from './types'
 import { getFlattenedNodesFromAppDetails, getResourceKey } from './utils'
 
@@ -24,24 +25,16 @@ const AppStatusContent = ({
     const [currentFilter, setCurrentFilter] = useState<string>(ALL_RESOURCE_KIND_FILTER)
     const { appId, environmentId: envId } = appDetails
 
-    const flattenedNodes = useMemo(
-        () =>
-            getFlattenedNodesFromAppDetails({
-                appDetails,
-                filterHealthyNodes,
-            }),
-        [appDetails, filterHealthyNodes],
-    )
+    const flattenedNodes = getFlattenedNodesFromAppDetails({
+        appDetails,
+        filterHealthyNodes,
+    })
 
-    const filteredFlattenedNodes = useMemo(
-        () =>
-            flattenedNodes.filter(
-                (nodeDetails) =>
-                    currentFilter === ALL_RESOURCE_KIND_FILTER ||
-                    (currentFilter === NodeFilters.drifted && nodeDetails.hasDrift) ||
-                    nodeDetails.health.status?.toLowerCase() === currentFilter,
-            ),
-        [flattenedNodes, currentFilter],
+    const filteredFlattenedNodes = flattenedNodes.filter(
+        (nodeDetails) =>
+            currentFilter === ALL_RESOURCE_KIND_FILTER ||
+            (currentFilter === NodeFilters.drifted && nodeDetails.hasDrift) ||
+            nodeDetails.health.status?.toLowerCase() === currentFilter,
     )
 
     const handleFilterClick = (selectedFilter: string) => {
@@ -90,11 +83,13 @@ const AppStatusContent = ({
 
                         <span className="dc__word-break">{nodeDetails.name}</span>
 
-                        <div
-                            className={`app-summary__status-name f-${getNodeStatus(nodeDetails)?.toLowerCase() || ''} dc__first-letter-capitalize--imp fs-13 fw-4 lh-20 dc__word-break`}
-                        >
-                            {getNodeStatus(nodeDetails)}
-                        </div>
+                        <Tooltip content={getNodeStatus(nodeDetails)}>
+                            <span
+                                className={`app-summary__status-name f-${getNodeStatus(nodeDetails)?.toLowerCase() || ''} dc__first-letter-capitalize--imp fs-13 fw-4 lh-20 dc__ellipsis-right`}
+                            >
+                                {getNodeStatus(nodeDetails)}
+                            </span>
+                        </Tooltip>
 
                         <div className="flexbox-col dc__gap-4">
                             {handleShowConfigDriftModal && nodeDetails.hasDrift && (
@@ -112,7 +107,7 @@ const AppStatusContent = ({
                                     )}
                                 </div>
                             )}
-                            <div className="dc__word-break">{getNodeMessage(nodeDetails)}</div>
+                            <ShowMoreText key={getNodeMessage(nodeDetails)} text={getNodeMessage(nodeDetails)} />
                         </div>
                     </div>
                 ))}

src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx

@@ -34,12 +34,12 @@ export const StatusFilterButtonComponent = ({
     const [overflowFilterIndex, setOverflowFilterIndex] = useState(0)
 
     // STATUS FILTERS
-    const { allResourceKindFilter, statusFilters } = useMemo(() => getStatusFilters(getNodesCount(nodes)), [nodes])
+    const { allResourceKindFilter, statusFilters } = getStatusFilters(getNodesCount(nodes))
 
     useEffect(() => {
         const filterIndex = statusFilters.findIndex(({ status }) => status === selectedTab)
         setOverflowFilterIndex(Math.max(filterIndex, 0))
-    }, [statusFilters])
+    }, [JSON.stringify(statusFilters)])
 
     const showOverflowFilters = maxInlineFiltersCount > 0 && statusFilters.length > maxInlineFiltersCount
 

src/Shared/Components/Error/ErrorBar.tsx

@@ -38,7 +38,7 @@ const ErrorBar = ({ appDetails, useParentMargin = true }: ErrorBarType) => {
     return (
         isImagePullBackOff && (
             <div className={`er-2 bw-1 br-4 ${useParentMargin ? 'm-20' : ''} fs-13`}>
-                <div className="bcr-1 pl-12 pr-12 pt-8 pb-8 dc__border-bottom-r2 flex left">
+                <div className="bcr-1 pl-12 pr-12 pt-8 pb-8 dc__border-bottom-r2 flex left dc__top-radius-4">
                     <ErrorInfo className="icon-dim-24 mr-8" /> <span className="mr-8">IMAGEPULLBACKOFF:</span>
                     {renderErrorHeaderMessage(appDetails, 'error-bar')}
                 </div>