feat: add AppStatusContent component with styling for improved layout in AppStatusModal

Author: AbhishekA1509

…nents/AppStatusModal/AppStatusModal.scss …nts/AppStatusModal/AppStatusContent.scsssrc/Shared/Components/AppStatusModal/AppStatusModal.scss renamed to src/Shared/Components/AppStatusModal/AppStatusContent.scss src/Shared/Components/AppStatusModal/AppStatusModal.scss renamed to src/Shared/Components/AppStatusModal/AppStatusContent.scss

@@ -1,4 +1,4 @@
-.app-status-modal {
+.app-status-content {
     .app-status-content {
         &__row {
             grid-template-columns: 150px 200px 100px auto;

src/Shared/Components/AppStatusModal/AppStatusContent.tsx

@@ -11,6 +11,8 @@ import { Icon } from '../Icon'
 import { AppStatusContentProps } from './types'
 import { getFlattenedNodesFromAppDetails, getResourceKey } from './utils'
 
+import './AppStatusContent.scss'
+
 const APP_STATUS_ROWS_BASE_CLASS = 'px-16 py-8 dc__grid dc__column-gap-16 app-status-content__row'
 
 const AppStatusContent = ({
@@ -119,7 +121,7 @@ const AppStatusContent = ({
     }
 
     return (
-        <div className={`flexbox-col ${isCardLayout ? 'br-6 border__primary' : ''}`}>
+        <div className={`flexbox-col app-status-content ${isCardLayout ? 'br-6 border__primary' : ''}`}>
             {!!flattenedNodes.length && (
                 <div className="p-12">
                     <StatusFilterButtonComponent

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

@@ -17,8 +17,6 @@ import { AppStatusBody } from './AppStatusBody'
 import { getAppDetails } from './service'
 import { AppStatusModalProps } from './types'
 
-import './AppStatusModal.scss'
-
 const AppStatusModal = ({
     title,
     handleClose,

src/Shared/Components/CICDHistory/DeploymentStatusDetailRow.tsx

@@ -155,7 +155,6 @@ export const DeploymentStatusDetailRow = ({
                     </div>
                 )}
                 <div>
-                    {/* TODO: Test */}
                     <AppStatusContent appDetails={appDetails} filterHealthyNodes isCardLayout={false} />
                 </div>
             </div>

src/Shared/Components/Error/ErrorBar.tsx

@@ -23,8 +23,6 @@ import { ErrorBarType } from './types'
 import { getIsImagePullBackOff, renderErrorHeaderMessage } from './utils'
 
 const ErrorBar = ({ appDetails }: ErrorBarType) => {
-    const isImagePullBackOff = getIsImagePullBackOff(appDetails)
-
     if (
         !appDetails ||
         appDetails.appType !== AppType.DEVTRON_APP ||
@@ -35,6 +33,8 @@ const ErrorBar = ({ appDetails }: ErrorBarType) => {
         return null
     }
 
+    const isImagePullBackOff = getIsImagePullBackOff(appDetails)
+
     return (
         isImagePullBackOff && (
             <div className="er-2 bw-1 br-4 m-20 fs-13">