refactor: streamline Drawer exports and enhance AppStatusModal title handling

- Updated Drawer export to simplify import paths.
- Refactored AppStatusModal to accept title segments as an array, improving title rendering.
- Removed unused utility function for title generation.
- Cleaned up imports in AppStatusModal for better clarity.
- Introduced a new constant for app health dropdown list in CICDHistory.

Author: AbhishekA1509

src/Common/Drawer/Drawer.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useRef, useEffect } from 'react'
+import { useRef, useEffect } from 'react'
 import { preventBodyScroll } from '../../Shared'
 import { VisibleModal } from '../Modals/VisibleModal'
 import './Drawer.scss'

src/Common/Drawer/index.ts

@@ -0,0 +1 @@
+export * from './Drawer'

src/Common/index.ts

@@ -32,7 +32,7 @@ export { default as DevtronCopyright } from './DevtronCopyright'
 export * from './DevtronProgressing'
 export * from './Dialogs'
 export * from './DraggableWrapper'
-export * from './Drawer/Drawer'
+export * from './Drawer'
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
 export { default as GenericFilterEmptyState } from './EmptyState/GenericFilterEmptyState'
 export { default as ErrorScreenManager } from './ErrorScreenManager'

src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx

@@ -1,13 +1,9 @@
-import { useEffect, useRef, useState } from 'react'
-
-import {
-    abortPreviousRequests,
-    DISCORD_LINK,
-    Drawer,
-    getIsRequestAborted,
-    stopPropagation,
-    useAsync,
-} from '@Common/index'
+import { Fragment, useEffect, useRef, useState } from 'react'
+
+import { abortPreviousRequests, getIsRequestAborted } from '@Common/API'
+import { DISCORD_LINK } from '@Common/Constants'
+import { Drawer } from '@Common/Drawer'
+import { stopPropagation, useAsync } from '@Common/Helper'
 import { ComponentSizeType } from '@Shared/constants'
 
 import { APIResponseHandler } from '../APIResponseHandler'
@@ -20,7 +16,7 @@ import { AppStatusModalProps } from './types'
 import './AppStatusModal.scss'
 
 const AppStatusModal = ({
-    title,
+    titleSegments,
     handleClose,
     type,
     appDetails: appDetailsProp,
@@ -119,6 +115,8 @@ const AppStatusModal = ({
         )
     }
 
+    const filteredTitleSegments = (titleSegments || []).filter((segment) => !!segment)
+
     return (
         <Drawer position="right" width="1024px" onClose={handleClose} onEscape={handleClose}>
             <div
@@ -127,7 +125,14 @@ const AppStatusModal = ({
             >
                 <div className="flexbox-col px-20 border__primary--bottom dc__no-shrink">
                     <div className="flexbox py-12 dc__content-space">
-                        {title}
+                        <h2 className="m-0 dc__truncate fs-16 fw-6 lh-1-5 dc__gap-4">
+                            {filteredTitleSegments.map((segment, index) => (
+                                <Fragment key={segment}>
+                                    {segment}
+                                    {index !== titleSegments.length - 1 && <span className="cn-6 fs-16 fw-4">/</span>}
+                                </Fragment>
+                            ))}
+                        </h2>
 
                         <Button
                             dataTestId="close-modal-header-icon-button"

src/Shared/Components/AppStatusModal/index.ts

@@ -1,3 +1,2 @@
 export { default as AppStatusContent } from './AppStatusContent'
 export { default as AppStatusModal } from './AppStatusModal.component'
-export { getAppStatusModalTitle } from './utils'

src/Shared/Components/AppStatusModal/types.ts

@@ -1,9 +1,9 @@
-import { FunctionComponent, ReactNode } from 'react'
+import { FunctionComponent } from 'react'
 
 import { AppDetails, ConfigDriftModalProps } from '@Shared/types'
 
 export type AppStatusModalProps = {
-    title: ReactNode
+    titleSegments: string[]
     handleClose: () => void
     /**
      * If given would not poll for app details and resource tree, Polling for gitops timeline would still be done

src/Shared/Components/AppStatusModal/utils.tsx

@@ -1,5 +1,3 @@
-import { Fragment } from 'react'
-
 import { DEPLOYMENT_STATUS } from '@Shared/constants'
 import { aggregateNodes } from '@Shared/Helpers'
 import { AppDetails, Node } from '@Shared/types'
@@ -66,18 +64,3 @@ export const getFlattenedNodesFromAppDetails = ({
 }
 
 export const getResourceKey = (nodeDetails: Node) => `${nodeDetails.kind}/${nodeDetails.name}`
-
-export const getAppStatusModalTitle = (segments: string[]) => {
-    const filteredSegments = (segments || []).filter((segment) => !!segment)
-
-    return (
-        <h2 className="m-0 dc__truncate fs-16 fw-6 lh-1-5 dc__gap-4">
-            {filteredSegments?.map((segment, index) => (
-                <Fragment key={segment}>
-                    {segment}
-                    {index !== segments.length - 1 && <span className="cn-6 fs-16 fw-4">/</span>}
-                </Fragment>
-            ))}
-        </h2>
-    )
-}

src/Shared/Components/CICDHistory/DeploymentStatusDetailRow.tsx

@@ -26,14 +26,12 @@ import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-
 import { DATE_TIME_FORMATS, showError } from '../../../Common'
 import { DEPLOYMENT_STATUS, statusIcon, TIMELINE_STATUS } from '../../constants'
 import { AppStatusContent } from '../AppStatusModal'
-import { MANIFEST_STATUS_HEADERS, TERMINAL_STATUS_MAP } from './constants'
+import { APP_HEALTH_DROP_DOWN_LIST, MANIFEST_STATUS_HEADERS, TERMINAL_STATUS_MAP } from './constants'
 import { ErrorInfoStatusBar } from './ErrorInfoStatusBar'
 import { getManualSync } from './service'
 import { DeploymentStatusDetailRowType } from './types'
 import { renderIcon } from './utils'
 
-const appHealthDropDownlist = ['inprogress', 'failed', 'disconnect', 'timed_out']
-
 export const DeploymentStatusDetailRow = ({
     type,
     hideVerticalConnector,
@@ -204,7 +202,7 @@ export const DeploymentStatusDetailRow = ({
                     )}
                     {((type === TIMELINE_STATUS.KUBECTL_APPLY && statusBreakDownType.kubeList?.length) ||
                         (type === TIMELINE_STATUS.APP_HEALTH &&
-                            appHealthDropDownlist.includes(statusBreakDownType.icon)) ||
+                            APP_HEALTH_DROP_DOWN_LIST.includes(statusBreakDownType.icon)) ||
                         ((type === TIMELINE_STATUS.GIT_COMMIT || type === TIMELINE_STATUS.ARGOCD_SYNC) &&
                             statusBreakDownType.icon === 'failed')) && (
                         <DropDownIcon

src/Shared/Components/CICDHistory/constants.tsx

@@ -168,3 +168,5 @@ export const FAILED_WORKFLOW_STAGE_STATUS_MAP: Record<
     [WorkflowStageStatusType.FAILED]: true,
     [WorkflowStageStatusType.TIMEOUT]: true,
 }
+
+export const APP_HEALTH_DROP_DOWN_LIST = ['inprogress', 'failed', 'disconnect', 'timed_out']

src/Shared/Components/Error/utils.tsx

@@ -18,16 +18,15 @@ import { AppDetails, AppType } from '../../types'
 import { AppDetailsErrorType } from './types'
 
 export const getIsImagePullBackOff = (appDetails: AppDetails): boolean => {
-    if (appDetails?.appType === AppType.DEVTRON_APP && appDetails?.resourceTree?.nodes?.length) {
-        return appDetails.resourceTree.nodes.some(
-            (node) =>
-                !!node.info?.some((info) => {
-                    const infoValueLowerCase = info?.value?.toLowerCase()
-                    return (
-                        infoValueLowerCase === AppDetailsErrorType.ERRIMAGEPULL ||
-                        infoValueLowerCase === AppDetailsErrorType.IMAGEPULLBACKOFF
-                    )
-                }),
+    if (appDetails?.appType === AppType.DEVTRON_APP && appDetails.resourceTree?.nodes?.length) {
+        return appDetails.resourceTree.nodes.some((node) =>
+            (node.info || []).some((info) => {
+                const infoValueLowerCase = info.value?.toLowerCase()
+                return (
+                    infoValueLowerCase === AppDetailsErrorType.ERRIMAGEPULL ||
+                    infoValueLowerCase === AppDetailsErrorType.IMAGEPULLBACKOFF
+                )
+            }),
         )
     }