refactor: optimize RegistryIcon component and enhance AppStatus rendering logic

Author: RohitRaj011

src/Shared/Components/RegistryIcon/RegistryIcon.tsx

@@ -3,34 +3,21 @@ import { RegistryType } from '@Shared/types'
 import { Icon, IconName } from '../Icon'
 import { RegistryIconProps } from './types'
 
-const getRegistryIcon = (registryType: RegistryType): IconName => {
-    switch (registryType) {
-        case RegistryType.GIT:
-            return 'ic-git'
-        case RegistryType.GITHUB:
-            return 'ic-github'
-        case RegistryType.GITLAB:
-            return 'ic-gitlab'
-        case RegistryType.BITBUCKET:
-            return 'ic-bitbucket'
-        case RegistryType.DOCKER:
-        case RegistryType.DOCKER_HUB:
-            return 'ic-dockerhub'
-        case RegistryType.ACR:
-            return 'ic-azure'
-        case RegistryType.QUAY:
-            return 'ic-quay'
-        case RegistryType.ECR:
-            return 'ic-ecr'
-        case RegistryType.ARTIFACT_REGISTRY:
-            return 'ic-google-artifact-registry'
-        case RegistryType.GCR:
-            return 'ic-google-container-registry'
-        default:
-            return 'ic-container'
-    }
+const registryIconMap: Record<RegistryType, IconName> = {
+    [RegistryType.GIT]: 'ic-git',
+    [RegistryType.GITHUB]: 'ic-github',
+    [RegistryType.GITLAB]: 'ic-gitlab',
+    [RegistryType.BITBUCKET]: 'ic-bitbucket',
+    [RegistryType.DOCKER]: 'ic-dockerhub',
+    [RegistryType.DOCKER_HUB]: 'ic-dockerhub',
+    [RegistryType.ACR]: 'ic-azure',
+    [RegistryType.QUAY]: 'ic-quay',
+    [RegistryType.ECR]: 'ic-ecr',
+    [RegistryType.ARTIFACT_REGISTRY]: 'ic-google-artifact-registry',
+    [RegistryType.GCR]: 'ic-google-container-registry',
+    [RegistryType.OTHER]: 'ic-container',
 }
 
 export const RegistryIcon = ({ registryType, size = 20 }: RegistryIconProps) => (
-    <Icon name={getRegistryIcon(registryType)} size={size} color={null} />
+    <Icon name={registryIconMap[registryType] || 'ic-container'} size={size} color={null} />
 )

src/Shared/Components/StatusComponent/AppStatus.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { Icon } from '../Icon'
 import { AppStatusProps } from './types'
 import { StatusComponent } from './StatusComponent'
 import { APP_STATUS } from './constants'
@@ -26,5 +27,21 @@ export const AppStatus = ({ status, isJobView = false, isVirtualEnv = false, ...
     const notDeployedMessage = isJobView ? APP_STATUS.JOB_VIEW_NOT_DEPLOYED_MESSAGE : APP_STATUS.NOT_DEPLOYED_MESSAGE
     const textContent = isNotDeployed ? notDeployedMessage : appStatus
 
-    return <StatusComponent status={appStatus} message={textContent} {...restProps} />
+    return appStatus ? (
+        <StatusComponent status={appStatus} message={textContent} {...restProps} />
+    ) : (
+        <div className="flexbox dc__align-items-center dc__gap-6">
+            <Icon
+                name="ic-info-outline"
+                size={restProps.iconSize}
+                tooltipProps={{
+                    alwaysShowTippyOnHover: true,
+                    placement: 'top',
+                    content: 'To fetch app status for Helm based deployments open the app detail page',
+                }}
+                color="N600"
+            />
+            <span className="fs-13 lh-20 cn-6">-</span>
+        </div>
+    )
 }

src/Shared/Components/StatusComponent/StatusComponent.tsx

@@ -34,12 +34,12 @@ export const StatusComponent = ({
     hideIconTooltip = false,
     message,
 }: StatusComponentProps) => {
-    const appStatusLowerCase = (status || '').toLowerCase().replace(/ /g, '-')
-    const textContent = message || status || '-'
+    const statusLowercase = (status || '').toLowerCase().replace(/ /g, '-')
+    const textContent = message || status || ''
 
     const renderIcon = () => {
-        const iconName = getIconName(appStatusLowerCase, showAnimatedIcon)
-        const iconColor = getIconColor(appStatusLowerCase)
+        const iconName = getIconName(statusLowercase, showAnimatedIcon)
+        const iconColor = getIconColor(statusLowercase)
 
         if (iconName) {
             return (
@@ -56,30 +56,20 @@ export const StatusComponent = ({
             )
         }
 
-        return (
-            <Icon
-                name="ic-info-outline"
-                size={iconSize}
-                tooltipProps={{
-                    alwaysShowTippyOnHover: true,
-                    placement: 'top',
-                    content: 'To fetch app status for Helm based deployments open the app detail page',
-                }}
-                color="N600"
-            />
-        )
+        return null
     }
 
-    const renderMessage = () => (
-        <Tooltip content={textContent}>
-            <p
-                data-testid={`${status || 'status-is-null'}-status`}
-                className="m-0 dc__ellipsis-right dc__first-letter-capitalize fs-13 lh-20 cn-6"
-            >
-                {textContent}
-            </p>
-        </Tooltip>
-    )
+    const renderMessage = () =>
+        textContent ? (
+            <Tooltip content={textContent}>
+                <p
+                    data-testid={`${status || 'status-is-null'}-status`}
+                    className="m-0 dc__ellipsis-right dc__first-letter-capitalize fs-13 lh-20 cn-6"
+                >
+                    {textContent}
+                </p>
+            </Tooltip>
+        ) : null
 
     return (
         <ConditionalWrap condition={!hideIcon && !hideMessage} wrap={statusWrapComponent}>