refactor: update AppStatusModal components to improve error handling and layout, including adjustments to ErrorBar and AppStatusContent styling

Author: AbhishekA1509

src/Shared/Components/AppStatusModal/AppStatusBody.tsx

@@ -74,8 +74,7 @@ export const AppStatusBody = ({ appDetails, type, handleShowConfigDriftModal }:
                 ))}
             </div>
 
-            {/* TODO: Test */}
-            <ErrorBar appDetails={appDetails} />
+            <ErrorBar appDetails={appDetails} useParentMargin={false} />
 
             <AppStatusContent appDetails={appDetails} handleShowConfigDriftModal={handleShowConfigDriftModal} />
         </div>

src/Shared/Components/AppStatusModal/AppStatusContent.scss

@@ -4,8 +4,4 @@
             grid-template-columns: 150px 200px 100px auto;
         }
     }
-
-    .info-card-item {
-        grid-template-columns: 140px 1fr;
-    }
 }

src/Shared/Components/AppStatusModal/AppStatusContent.tsx

@@ -91,7 +91,7 @@ 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`}
+                            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>

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

@@ -17,6 +17,8 @@ import { AppStatusBody } from './AppStatusBody'
 import { getAppDetails } from './service'
 import { AppStatusModalProps } from './types'
 
+import './AppStatusModal.scss'
+
 const AppStatusModal = ({
     title,
     handleClose,
@@ -47,7 +49,7 @@ const AppStatusModal = ({
         fetchedAppDetailsError,
         reloadInitialAppDetails,
         setFetchedAppDetails,
-    ] = useAsync(getAppDetailsWrapper, [appId, envId, type], type === 'release')
+    ] = useAsync(getAppDetailsWrapper, [appId, envId], type === 'release')
 
     const handleExternalSync = async () => {
         try {

src/Shared/Components/AppStatusModal/AppStatusModal.scss

@@ -0,0 +1,5 @@
+.app-status-modal {
+    .info-card-item {
+        grid-template-columns: 140px 1fr;
+    }
+}

src/Shared/Components/AppStatusModal/service.ts

@@ -1,26 +1,33 @@
 import { get, getIsRequestAborted } from '@Common/API'
 import { ROUTES } from '@Common/Constants'
-import { showError } from '@Common/Helper'
+import { getUrlWithSearchParams, showError } from '@Common/Helper'
 import { APIOptions } from '@Common/Types'
+import { AppDetails, AppType } from '@Shared/types'
 
 export const getAppDetails = async (
     appId: number,
     envId: number,
     abortControllerRef: APIOptions['abortControllerRef'],
-) => {
+): Promise<AppDetails> => {
     try {
+        const queryParams = getUrlWithSearchParams('', {
+            'app-id': appId,
+            'env-id': envId,
+        })
+
         const [appDetails, resourceTree] = await Promise.all([
-            get(`${ROUTES.APP_DETAIL}/v2?app-id=${appId}&env-id=${envId}`, {
+            get(`${ROUTES.APP_DETAIL}/v2?${queryParams}`, {
                 abortControllerRef,
             }),
-            get(`${ROUTES.APP_DETAIL}/resource-tree?app-id=${appId}&env-id=${envId}`, {
+            get(`${ROUTES.APP_DETAIL}/resource-tree?${queryParams}`, {
                 abortControllerRef,
             }),
         ])
 
         return {
             ...(appDetails.result || {}),
             resourceTree: resourceTree.result,
+            appType: AppType.DEVTRON_APP,
         }
     } catch (error) {
         if (getIsRequestAborted(error)) {

src/Shared/Components/AppStatusModal/types.ts

@@ -18,7 +18,7 @@ export type AppStatusModalProps = {
           envId: number
       }
     | {
-          type: 'devtron-app' | 'external-apps' | 'stack-manager'
+          type: 'devtron-app' | 'other-apps' | 'stack-manager'
           appId?: never
           envId?: never
       }

src/Shared/Components/AppStatusModal/utils.tsx

@@ -71,7 +71,7 @@ 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">
+        <h2 className="m-0 dc__truncate fs-16 fw-6 lh-1-5 dc__gap-4">
             {filteredSegments?.map((segment, index) => (
                 <Fragment key={segment}>
                     {segment}

src/Shared/Components/Error/ErrorBar.tsx

@@ -22,7 +22,7 @@ import { AppType } from '../../types'
 import { ErrorBarType } from './types'
 import { getIsImagePullBackOff, renderErrorHeaderMessage } from './utils'
 
-const ErrorBar = ({ appDetails }: ErrorBarType) => {
+const ErrorBar = ({ appDetails, useParentMargin = true }: ErrorBarType) => {
     if (
         !appDetails ||
         appDetails.appType !== AppType.DEVTRON_APP ||
@@ -37,7 +37,7 @@ const ErrorBar = ({ appDetails }: ErrorBarType) => {
 
     return (
         isImagePullBackOff && (
-            <div className="er-2 bw-1 br-4 m-20 fs-13">
+            <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">
                     <ErrorInfo className="icon-dim-24 mr-8" /> <span className="mr-8">IMAGEPULLBACKOFF:</span>
                     {renderErrorHeaderMessage(appDetails, 'error-bar')}

src/Shared/Components/Error/types.tsx

@@ -18,6 +18,10 @@ import { AppDetails } from '../../types'
 
 export interface ErrorBarType {
     appDetails: AppDetails
+    /**
+     * @default true
+     */
+    useParentMargin?: boolean
 }
 
 export enum AppDetailsErrorType {