feat: add other app list api from fe-lib

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.12.0-pre-1",
+    "version": "1.12.0-pre-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Common/Common.service.ts

@@ -22,11 +22,7 @@ import {
     sanitizeUserApprovalList,
     stringComparatorBySortOrder,
 } from '@Shared/Helpers'
-import {
-    PolicyBlockInfo,
-    RuntimeParamsAPIResponseType,
-    RuntimePluginVariables,
-} from '@Shared/types'
+import { PolicyBlockInfo, RuntimeParamsAPIResponseType, RuntimePluginVariables } from '@Shared/types'
 import { GitProviderType, ROUTES } from './Constants'
 import { getUrlWithSearchParams, sortCallback } from './Helper'
 import {
@@ -49,10 +45,14 @@ import {
     GlobalVariableDTO,
     GlobalVariableOptionType,
     UserRole,
+    EnvAppsMetaDTO,
+    GetAppsInfoForEnvProps,
+    AppMeta,
 } from './Types'
 import { ApiResourceType, STAGE_MAP } from '../Pages'
 import { RefVariableType, VariableTypeFormat } from './CIPipeline.Types'
 import { get, post } from './API'
+import { StatusType } from '@Shared/Components'
 
 export const getTeamListMin = (): Promise<TeamList> => {
     // ignore active field
@@ -264,7 +264,7 @@ export const parseRuntimeParams = (response: RuntimeParamsAPIResponseType): Runt
     const runtimeParams = (response?.runtimePluginVariables ?? []).map<RuntimePluginVariables>((variable) => ({
         ...variable,
         defaultValue: variable.value,
-        stepVariableId: variable.stepVariableId || Math.floor(new Date().valueOf() * Math.random())
+        stepVariableId: variable.stepVariableId || Math.floor(new Date().valueOf() * Math.random()),
     }))
 
     runtimeParams.push(...envVariables)
@@ -515,3 +515,25 @@ export const getGlobalVariables = async ({
         throw err
     }
 }
+
+export const getAppsInfoForEnv = async ({ envId, appIds }: GetAppsInfoForEnvProps): Promise<EnvAppsMetaDTO> => {
+    const url = getUrlWithSearchParams(`${ROUTES.ENV}/${envId}/${ROUTES.APP_METADATA}`, {
+        appIds: appIds?.join(),
+    })
+    const response = await get<EnvAppsMetaDTO>(url)
+
+    return {
+        appCount: response.result?.appCount ?? 0,
+        apps: (response.result?.apps ?? []).reduce<AppMeta[]>((agg, { appId, appName, appStatus }) => {
+            if (!appId) {
+                return agg
+            }
+            agg.push({
+                appId,
+                appName: appName || '',
+                appStatus: appStatus || StatusType.UNKNOWN,
+            })
+            return agg
+        }, []),
+    }
+}

src/Common/Constants.ts

@@ -157,6 +157,8 @@ export const ROUTES = {
     ENVIRONMENT_DATA: 'global/environment-variables',
     DASHBOARD_EVENT: 'dashboard-event',
     LICENSE_DATA: 'license/data',
+    ENV: 'env',
+    APP_METADATA: 'app-metadata',
 } as const
 
 export enum KEY_VALUE {

src/Common/Types.ts

@@ -27,6 +27,7 @@ import {
     TargetPlatformItemDTO,
     ButtonProps,
     ComponentLayoutType,
+    StatusType,
 } from '../Shared'
 import {
     ACTION_STATE,
@@ -1109,3 +1110,19 @@ export enum ActionTypes {
     EDIT = 'edit',
     APPROVER = 'approver',
 }
+
+export interface GetAppsInfoForEnvProps {
+    envId: number
+    appIds?: number[]
+}
+
+export interface AppMeta {
+    appId: number
+    appStatus: StatusType
+    appName: string
+}
+
+export interface EnvAppsMetaDTO {
+    appCount: number
+    apps: AppMeta[]
+}

src/Shared/Components/AnimatedDeployButton/AnimatedDeployButton.tsx

@@ -17,11 +17,11 @@
 import { SyntheticEvent, useEffect, useRef, useState } from 'react'
 import { motion } from 'framer-motion'
 
-import { ReactComponent as ICDeploy } from '@Icons/ic-nav-rocket.svg'
 import DeployAudio from '@Sounds/DeployAudio.mp3'
 import { ComponentSizeType } from '@Shared/constants'
 
 import { Button } from '../Button'
+import { Icon } from '../Icon'
 import { AnimatedDeployButtonProps } from './types'
 
 import './animatedDeployButton.scss'
@@ -83,7 +83,7 @@ const AnimatedDeployButton = ({ isVirtualEnvironment, onButtonClick }: AnimatedD
                                 : {}
                         }
                     >
-                        <ICDeploy className="icon-dim-16" />
+                        <Icon name="ic-rocket-launch" color={null} />
                     </motion.div>
                 }
                 size={ComponentSizeType.large}

src/Shared/Components/Icon/Icon.tsx

@@ -56,6 +56,7 @@ import { ReactComponent as ICGoogle } from '@IconsV2/ic-google.svg'
 import { ReactComponent as ICGoogleArtifactRegistry } from '@IconsV2/ic-google-artifact-registry.svg'
 import { ReactComponent as ICGoogleContainerRegistry } from '@IconsV2/ic-google-container-registry.svg'
 import { ReactComponent as ICGridView } from '@IconsV2/ic-grid-view.svg'
+import { ReactComponent as ICHandPointing } from '@IconsV2/ic-hand-pointing.svg'
 import { ReactComponent as ICHeartGreen } from '@IconsV2/ic-heart-green.svg'
 import { ReactComponent as ICHeartRed } from '@IconsV2/ic-heart-red.svg'
 import { ReactComponent as ICHeartRedAnimated } from '@IconsV2/ic-heart-red-animated.svg'
@@ -91,6 +92,7 @@ import { ReactComponent as ICPaperPlaneColor } from '@IconsV2/ic-paper-plane-col
 import { ReactComponent as ICPencil } from '@IconsV2/ic-pencil.svg'
 import { ReactComponent as ICQuay } from '@IconsV2/ic-quay.svg'
 import { ReactComponent as ICQuote } from '@IconsV2/ic-quote.svg'
+import { ReactComponent as ICRocketLaunch } from '@IconsV2/ic-rocket-launch.svg'
 import { ReactComponent as ICShieldCheck } from '@IconsV2/ic-shield-check.svg'
 import { ReactComponent as ICSlidersVertical } from '@IconsV2/ic-sliders-vertical.svg'
 import { ReactComponent as ICSortAscending } from '@IconsV2/ic-sort-ascending.svg'
@@ -172,6 +174,7 @@ export const iconMap = {
     'ic-google-container-registry': ICGoogleContainerRegistry,
     'ic-google': ICGoogle,
     'ic-grid-view': ICGridView,
+    'ic-hand-pointing': ICHandPointing,
     'ic-heart-green': ICHeartGreen,
     'ic-heart-red-animated': ICHeartRedAnimated,
     'ic-heart-red': ICHeartRed,
@@ -207,6 +210,7 @@ export const iconMap = {
     'ic-pencil': ICPencil,
     'ic-quay': ICQuay,
     'ic-quote': ICQuote,
+    'ic-rocket-launch': ICRocketLaunch,
     'ic-shield-check': ICShieldCheck,
     'ic-sliders-vertical': ICSlidersVertical,
     'ic-sort-ascending': ICSortAscending,

src/Shared/Components/ImageCard/ArtifactInfo/ArtifactInfo.tsx

@@ -16,11 +16,11 @@
 
 import Tippy from '@tippyjs/react'
 
+import { ReactComponent as ICBot } from '@Icons/ic-bot.svg'
 import { Tooltip } from '@Common/Tooltip'
+import { Icon } from '@Shared/Components/Icon'
 import { RegistryIcon } from '@Shared/Components/RegistryIcon'
 
-import { ReactComponent as ICBot } from '../../../../Assets/Icon/ic-bot.svg'
-import { ReactComponent as DeployIcon } from '../../../../Assets/Icon/ic-nav-rocket.svg'
 import { ConditionalWrap, getRandomColor } from '../../../../Common/Helper'
 import { DefaultUserKey } from '../../../types'
 import { ArtifactInfoProps } from '../types'
@@ -62,7 +62,7 @@ const ArtifactInfo = ({
 
         return (
             <div className="material-history__info flex left fs-13 dc__gap-8">
-                <DeployIcon className="icon-dim-16 scn-6" />
+                <Icon name="ic-rocket-launch" color="N600" />
                 <span className="fs-13 fw-4">{deployedTime}</span>
             </div>
         )