feat: enhance AppStatusModal by adding ErrorBar component and refactor DeploymentStatusDetailRow for cleaner code

Author: AbhishekA1509

src/Shared/Components/AppStatusModal/AppStatusBody.tsx

@@ -2,6 +2,7 @@ import { ComponentProps, ReactNode, useMemo } from 'react'
 
 import { Tooltip } from '@Common/Tooltip'
 
+import { ErrorBar } from '../Error'
 import { ShowMoreText } from '../ShowMoreText'
 import { AppStatus } from '../StatusComponent'
 import { APP_STATUS_CUSTOM_MESSAGES } from './constants'
@@ -55,6 +56,8 @@ export const AppStatusBody = ({ appDetails, type }: Pick<AppStatusModalProps, 'a
                     />
                 ))}
             </div>
+
+            <ErrorBar appDetails={appDetails} />
         </div>
     )
 }

src/Shared/Components/CICDHistory/DeploymentStatusDetailRow.tsx

@@ -31,6 +31,8 @@ import { getManualSync } from './service'
 import { DeploymentStatusDetailRowType } from './types'
 import { renderIcon } from './utils'
 
+const appHealthDropDownlist = ['inprogress', 'failed', 'disconnect', 'timed_out']
+
 export const DeploymentStatusDetailRow = ({
     type,
     hideVerticalConnector,
@@ -39,7 +41,7 @@ export const DeploymentStatusDetailRow = ({
     const { appId, envId } = useParams<{ appId: string; envId: string }>()
     const statusBreakDownType = deploymentDetailedData.deploymentStatusBreakdown[type]
     const [collapsed, toggleCollapsed] = useState<boolean>(statusBreakDownType.isCollapsed)
-    const appHealthDropDownlist = ['inprogress', 'failed', 'disconnect', 'timed_out']
+
     const isHelmManifestPushFailed =
         type === TIMELINE_STATUS.HELM_MANIFEST_PUSHED_TO_HELM_REPO &&
         deploymentDetailedData.deploymentStatus === statusIcon.failed
@@ -50,8 +52,7 @@ export const DeploymentStatusDetailRow = ({
 
     async function manualSyncData() {
         try {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const response = await getManualSync({ appId, envId })
+            await getManualSync({ appId, envId })
         } catch (error) {
             showError(error)
         }

src/Shared/Components/Error/ErrorBar.tsx

@@ -14,32 +14,16 @@
  * limitations under the License.
  */
 
-import { useMemo } from 'react'
 import { NavLink } from 'react-router-dom'
 
 import { ReactComponent as ErrorInfo } from '../../../Assets/Icon/ic-errorInfo.svg'
 import { URLS } from '../../../Common'
 import { AppType } from '../../types'
-import { AppDetailsErrorType, ErrorBarType } from './types'
-import { renderErrorHeaderMessage } from './utils'
+import { ErrorBarType } from './types'
+import { getIsImagePullBackOff, renderErrorHeaderMessage } from './utils'
 
 const ErrorBar = ({ appDetails }: ErrorBarType) => {
-    const isImagePullBackOff = useMemo(() => {
-        if (appDetails?.appType === AppType.DEVTRON_APP && appDetails?.resourceTree?.nodes?.length) {
-            appDetails.resourceTree.nodes.some(
-                (node) =>
-                    !!node.info?.some((info) => {
-                        const infoValueLowerCase = info?.value?.toLowerCase()
-                        return (
-                            infoValueLowerCase === AppDetailsErrorType.ERRIMAGEPULL ||
-                            infoValueLowerCase === AppDetailsErrorType.IMAGEPULLBACKOFF
-                        )
-                    }),
-            )
-        }
-
-        return false
-    }, [appDetails])
+    const isImagePullBackOff = getIsImagePullBackOff(appDetails)
 
     if (
         !appDetails ||

src/Shared/Components/Error/utils.tsx

@@ -14,7 +14,25 @@
  * limitations under the License.
  */
 
-import { AppDetails } from '../../types'
+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) {
+        appDetails.resourceTree.nodes.some(
+            (node) =>
+                !!node.info?.some((info) => {
+                    const infoValueLowerCase = info?.value?.toLowerCase()
+                    return (
+                        infoValueLowerCase === AppDetailsErrorType.ERRIMAGEPULL ||
+                        infoValueLowerCase === AppDetailsErrorType.IMAGEPULLBACKOFF
+                    )
+                }),
+        )
+    }
+
+    return false
+}
 
 export const renderErrorHeaderMessage = (appDetails: AppDetails, key: string, onClickActionButton?): JSX.Element => (
     <div>