feat: add utility functions for app status management and update AppStatusModal to utilize dynamic titles

Author: AbhishekA1509

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

@@ -127,7 +127,7 @@ const AppStatusModal = ({
             >
                 <div className="flexbox-col px-20 border__primary--bottom dc__no-shrink">
                     <div className="flexbox py-12 dc__content-space">
-                        <div className="fs-16 fw-6 lh-1-5">{title}</div>
+                        {title}
 
                         <Button
                             dataTestId="close-modal-header-icon-button"

src/Shared/Components/AppStatusModal/index.ts

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

src/Shared/Components/AppStatusModal/utils.ts renamed to src/Shared/Components/AppStatusModal/utils.tsx

@@ -1,3 +1,5 @@
+import { Fragment } from 'react'
+
 import { DEPLOYMENT_STATUS } from '@Shared/constants'
 import { aggregateNodes } from '@Shared/Helpers'
 import { AppDetails, Node } from '@Shared/types'
@@ -64,3 +66,18 @@ 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">
+            {filteredSegments?.map((segment, index) => (
+                <Fragment key={segment}>
+                    {segment}
+                    {index !== segments.length - 1 && <span className="cn-6 fs-16 fw-4">/</span>}
+                </Fragment>
+            ))}
+        </h2>
+    )
+}