tweaks

web/contract/console/deployments.ts

@@ -41,11 +41,6 @@ export type ConsoleUser = {
   displayName?: string
 }
 
-export type ConsoleWarning = {
-  code?: string
-  message?: string
-}
-
 export type DeploymentStatusCount = {
   status?: string
   count?: number
@@ -60,10 +55,8 @@ export type AppInstanceFilter = {
 export type AppDeploymentSummary = {
   id?: string
   name?: string
-  description?: string
   icon?: string
   mode?: string
-  sourceAppId?: string
   sourceAppName?: string
   statuses?: DeploymentStatusCount[]
   lastDeployedAt?: Timestamp | null
@@ -92,7 +85,6 @@ export type AppInstanceOverview = {
   sourceAppId?: string
   sourceAppName?: string
   mode?: string
-  icon?: string
   createdAt?: Timestamp
 }
 
@@ -114,7 +106,6 @@ export type GetDeploymentOverviewReply = {
   instance?: AppInstanceOverview
   deployments?: DeploymentSummaryRow[]
   access?: AccessSummary
-  warnings?: ConsoleWarning[]
 }
 
 export type RuntimeBindingDisplay = {
@@ -151,7 +142,6 @@ export type EnvironmentDeploymentRow = {
 
 export type ListEnvironmentDeploymentsReply = {
   data?: EnvironmentDeploymentRow[]
-  pagination?: Pagination
 }
 
 export type EnvironmentOption = ConsoleEnvironmentSummary & {
@@ -330,19 +320,21 @@ export type UpdateAppInstanceReply = GetAppInstanceSettingsReply
 
 export type DeleteAppInstanceReply = Record<string, never>
 
+export type ListAppDeploymentsQuery = {
+  environmentId?: string
+  notDeployed?: boolean
+  query?: string
+  pageNumber?: number
+  resultsPerPage?: number
+}
+
 export const listAppDeploymentsContract = base
   .route({
     path: '/enterprise/app-instances',
     method: 'GET',
   })
   .input(type<{
-    query?: {
-      environmentId?: string
-      notDeployed?: boolean
-      query?: string
-      pageNumber?: number
-      resultsPerPage?: number
-    }
+    query?: ListAppDeploymentsQuery
   }>())
   .output(type<ListAppDeploymentsReply>())
 
@@ -375,10 +367,6 @@ export const runtimeInstancesContract = base
   })
   .input(type<{
     params: { appInstanceId: string }
-    query?: {
-      pageNumber?: number
-      resultsPerPage?: number
-    }
   }>())
   .output(type<ListEnvironmentDeploymentsReply>())
 

web/features/deployments/components/deploy-drawer.tsx

@@ -8,11 +8,11 @@ import { useTranslation } from 'react-i18next'
 import { consoleQuery } from '@/service/client'
 import {
   DEPLOYMENT_PAGE_SIZE,
-  SOURCE_APPS_PAGE_SIZE,
 } from '../data'
 import { useStartDeployment } from '../hooks/use-deployment-mutations'
+import { deploymentEnvironmentDeploymentsQueryOptions } from '../queries'
 import { useDeploymentsStore } from '../store'
-import { environmentOptionsFromList } from '../utils'
+import { environmentOptionsFromDeploymentRows } from '../utils'
 import { DeployForm } from './deploy-drawer/form'
 
 const DeployDrawer: FC = () => {
@@ -22,15 +22,6 @@ const DeployDrawer: FC = () => {
   const closeDeployDrawer = useDeploymentsStore(state => state.closeDeployDrawer)
   const startDeploy = useStartDeployment()
   const open = drawer.open
-  const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({
-    input: {
-      query: {
-        pageNumber: 1,
-        resultsPerPage: SOURCE_APPS_PAGE_SIZE,
-      },
-    },
-    enabled: open,
-  }))
   const { data: releaseHistory } = useQuery(consoleQuery.deployments.releaseHistory.queryOptions({
     input: drawerAppId
       ? {
@@ -43,8 +34,15 @@ const DeployDrawer: FC = () => {
       : skipToken,
     enabled: open && Boolean(drawerAppId),
   }))
+  const { data: environmentDeployments } = useQuery({
+    ...deploymentEnvironmentDeploymentsQueryOptions(drawerAppId),
+    enabled: open && Boolean(drawerAppId),
+  })
 
-  const environmentOptions = useMemo(() => environmentOptionsFromList(listQuery.data), [listQuery.data])
+  const environmentOptions = useMemo(
+    () => environmentOptionsFromDeploymentRows(environmentDeployments?.data),
+    [environmentDeployments?.data],
+  )
   const environments = environmentOptions
   const releases = releaseHistory?.data?.map(row => row.release ?? row).filter(release => release.id) ?? []
   const defaultReleaseId = releases[0]?.id
@@ -59,7 +57,7 @@ const DeployDrawer: FC = () => {
         <DialogCloseButton />
         {!drawerAppId
           ? <div className="p-4 text-text-tertiary">{t('deployDrawer.notFound')}</div>
-          : !releaseHistory
+          : (!releaseHistory || !environmentDeployments)
               ? (
                   <div className="flex items-center gap-2 p-4 system-sm-regular text-text-tertiary">
                     <span className="h-4 w-4 animate-spin rounded-full border-2 border-components-panel-border border-t-transparent" />

web/features/deployments/components/rollback-modal.tsx

@@ -15,20 +15,21 @@ import { useTranslation } from 'react-i18next'
 import { consoleQuery } from '@/service/client'
 import {
   DEPLOYMENT_PAGE_SIZE,
-  SOURCE_APPS_PAGE_SIZE,
 } from '../data'
 import { useStartDeployment } from '../hooks/use-deployment-mutations'
+import {
+  deploymentEnvironmentDeploymentsQueryOptions,
+  deploymentOverviewQueryOptions,
+} from '../queries'
 import { useDeploymentsStore } from '../store'
 import {
   activeRelease,
   deployedRows,
   environmentId,
   environmentName,
-  environmentOptionsFromList,
+  environmentOptionsFromDeploymentRows,
   releaseCommit,
   releaseLabel,
-  sourceAppMapFromApps,
-  sourceAppsFromList,
   toAppInfoFromOverview,
 } from '../utils'
 
@@ -58,30 +59,22 @@ const RollbackModal: FC = () => {
         },
       }
     : undefined
-  const { data: overview } = useQuery(consoleQuery.deployments.overview.queryOptions({
-    input: appInput ?? skipToken,
+  const { data: overview } = useQuery({
+    ...deploymentOverviewQueryOptions(modal.appId),
     enabled: modal.open && Boolean(modal.appId),
-  }))
-  const { data: environmentDeployments } = useQuery(consoleQuery.deployments.environmentDeployments.queryOptions({
-    input: pagedInput ?? skipToken,
+  })
+  const { data: environmentDeployments } = useQuery({
+    ...deploymentEnvironmentDeploymentsQueryOptions(modal.appId),
     enabled: modal.open && Boolean(modal.appId),
-  }))
+  })
   const { data: releaseHistory } = useQuery(consoleQuery.deployments.releaseHistory.queryOptions({
     input: pagedInput ?? skipToken,
     enabled: modal.open && Boolean(modal.appId),
   }))
-  const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({
-    input: {
-      query: {
-        pageNumber: 1,
-        resultsPerPage: SOURCE_APPS_PAGE_SIZE,
-      },
-    },
-    enabled: modal.open,
-  }))
-  const sourceApps = useMemo(() => sourceAppsFromList(listQuery.data), [listQuery.data])
-  const appMap = useMemo(() => sourceAppMapFromApps(sourceApps), [sourceApps])
-  const environmentOptions = useMemo(() => environmentOptionsFromList(listQuery.data), [listQuery.data])
+  const environmentOptions = useMemo(
+    () => environmentOptionsFromDeploymentRows(environmentDeployments?.data),
+    [environmentDeployments?.data],
+  )
 
   const currentRow = deployedRows(environmentDeployments?.data)
     .find(row => environmentId(row.environment) === modal.environmentId)
@@ -92,7 +85,6 @@ const RollbackModal: FC = () => {
   const environment = currentRow?.environment
     ?? environmentOptions.find(env => env.id === modal.environmentId)
   const app = toAppInfoFromOverview(overview?.instance)
-    ?? (modal.appId ? appMap.get(modal.appId) : undefined)
 
   const confirm = () => {
     if (!modal.appId || !modal.environmentId || !modal.targetReleaseId)

web/features/deployments/detail/access-tab.tsx

@@ -9,13 +9,13 @@ import type {
 import { useQuery } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
 import { consoleQuery } from '@/service/client'
-import { DEPLOYMENT_PAGE_SIZE } from '../data'
 import {
   useGenerateDeploymentApiKey,
   useRevokeDeploymentApiKey,
   useSetEnvironmentAccessPolicy,
   useToggleDeploymentAccessChannel,
 } from '../hooks/use-deployment-mutations'
+import { deploymentEnvironmentDeploymentsQueryOptions } from '../queries'
 import {
   deployedRows,
 } from '../utils'
@@ -43,15 +43,7 @@ const AccessTab: FC<AccessTabProps> = ({ instanceId: appId }) => {
   const { data: accessConfig } = useQuery(consoleQuery.deployments.accessConfig.queryOptions({
     input: appInput,
   }))
-  const { data: environmentDeployments } = useQuery(consoleQuery.deployments.environmentDeployments.queryOptions({
-    input: {
-      ...appInput,
-      query: {
-        pageNumber: 1,
-        resultsPerPage: DEPLOYMENT_PAGE_SIZE,
-      },
-    },
-  }))
+  const { data: environmentDeployments } = useQuery(deploymentEnvironmentDeploymentsQueryOptions(appId))
   const [createdApiToken, setCreatedApiToken] = useState<{
     appId: string
     token: string

web/features/deployments/detail/deploy-tab.tsx

@@ -11,12 +11,8 @@ import {
 import { useQuery } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { consoleQuery } from '@/service/client'
-import {
-  DEPLOYMENT_PAGE_SIZE,
-  SOURCE_APPS_PAGE_SIZE,
-} from '../data'
 import { useUndeployDeployment } from '../hooks/use-deployment-mutations'
+import { deploymentEnvironmentDeploymentsQueryOptions } from '../queries'
 import { useDeploymentsStore } from '../store'
 import {
   activeRelease,
@@ -27,7 +23,7 @@ import {
   environmentId,
   environmentMode,
   environmentName,
-  environmentOptionsFromList,
+  environmentOptionsFromDeploymentRows,
   isUndeployedDeploymentRow,
   releaseCommit,
   releaseLabel,
@@ -43,26 +39,13 @@ type DeployTabProps = {
 
 const DeployTab: FC<DeployTabProps> = ({ instanceId: appId }) => {
   const { t } = useTranslation('deployments')
-  const { data: environmentDeployments } = useQuery(consoleQuery.deployments.environmentDeployments.queryOptions({
-    input: {
-      params: { appInstanceId: appId },
-      query: {
-        pageNumber: 1,
-        resultsPerPage: DEPLOYMENT_PAGE_SIZE,
-      },
-    },
-  }))
+  const { data: environmentDeployments } = useQuery(deploymentEnvironmentDeploymentsQueryOptions(appId))
   const openDeployDrawer = useDeploymentsStore(state => state.openDeployDrawer)
   const undeployDeployment = useUndeployDeployment()
-  const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({
-    input: {
-      query: {
-        pageNumber: 1,
-        resultsPerPage: SOURCE_APPS_PAGE_SIZE,
-      },
-    },
-  }))
-  const environmentOptions = useMemo(() => environmentOptionsFromList(listQuery.data), [listQuery.data])
+  const environmentOptions = useMemo(
+    () => environmentOptionsFromDeploymentRows(environmentDeployments?.data),
+    [environmentDeployments?.data],
+  )
 
   const rows = useMemo(
     () => environmentDeployments?.data?.filter(row => row.environment?.id) ?? [],

web/features/deployments/detail/index.tsx

@@ -9,17 +9,13 @@ import { useTranslation } from 'react-i18next'
 import { getAppModeLabel } from '@/app/components/app-sidebar/app-info/app-mode-labels'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useRouter, useSelectedLayoutSegment } from '@/next/navigation'
-import { consoleQuery } from '@/service/client'
 import DeployDrawer from '../components/deploy-drawer'
 import RollbackModal from '../components/rollback-modal'
 import {
-  SOURCE_APPS_PAGE_SIZE,
-} from '../data'
-import {
-  deploymentSummariesFromList,
-  sourceAppMapFromApps,
-  sourceAppsFromList,
-} from '../utils'
+  deploymentEnvironmentDeploymentsQueryOptions,
+  deploymentOverviewQueryOptions,
+} from '../queries'
+import { deployedRows, deploymentStatus, toAppInfoFromOverview } from '../utils'
 import { DeploymentSidebar } from './deployment-sidebar'
 import { isInstanceDetailTabKey } from './tabs'
 
@@ -35,31 +31,20 @@ const InstanceDetail: FC<InstanceDetailProps> = ({ instanceId, children }) => {
   const selectedSegment = useSelectedLayoutSegment()
   const selectedTab = selectedSegment ?? undefined
   const activeTab: InstanceDetailTabKey = isInstanceDetailTabKey(selectedTab) ? selectedTab : 'overview'
-  const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({
-    input: {
-      query: {
-        pageNumber: 1,
-        resultsPerPage: SOURCE_APPS_PAGE_SIZE,
-      },
-    },
-  }))
+  const overviewQuery = useQuery(deploymentOverviewQueryOptions(instanceId))
+  const { data: environmentDeployments } = useQuery(deploymentEnvironmentDeploymentsQueryOptions(instanceId))
   useDocumentTitle(t('documentTitle.detail'))
 
-  const apps = useMemo(() => sourceAppsFromList(listQuery.data), [listQuery.data])
-  const appMap = useMemo(() => sourceAppMapFromApps(apps), [apps])
-  const summaries = useMemo(() => deploymentSummariesFromList(listQuery.data), [listQuery.data])
   const app = useMemo(
-    () => appMap.get(instanceId),
-    [instanceId, appMap],
+    () => toAppInfoFromOverview(overviewQuery.data?.instance),
+    [overviewQuery.data?.instance],
+  )
+  const deploymentRows = useMemo(
+    () => deployedRows(environmentDeployments?.data),
+    [environmentDeployments?.data],
   )
-  const summary = summaries[instanceId]
-  const statusCount = (status: string) =>
-    summary?.statuses?.find(item => item.status === status)?.count ?? 0
-  const envCount = summary?.statuses
-    ?.filter(item => item.status !== 'undeployed')
-    .reduce((total, item) => total + (item.count ?? 0), 0) ?? 0
 
-  if (!app && listQuery.isLoading) {
+  if (!app && overviewQuery.isLoading) {
     return (
       <div className="flex h-full items-center justify-center bg-background-body">
         <span className="h-6 w-6 animate-spin rounded-full border-2 border-components-panel-border border-t-transparent" />
@@ -79,8 +64,9 @@ const InstanceDetail: FC<InstanceDetailProps> = ({ instanceId, children }) => {
     )
   }
 
-  const deployingCount = statusCount('deploying')
-  const failedCount = statusCount('failed') + statusCount('deploy_failed')
+  const deployingCount = deploymentRows.filter(row => deploymentStatus(row) === 'deploying').length
+  const failedCount = deploymentRows.filter(row => deploymentStatus(row) === 'deploy_failed').length
+  const envCount = deploymentRows.length
   const appModeLabel = app ? getAppModeLabel(app.mode, tCommon) : t('detail.sourceAppDeleted')
 
   return (

web/features/deployments/detail/overview-tab.tsx

@@ -9,14 +9,10 @@ import { getAppModeLabel } from '@/app/components/app-sidebar/app-info/app-mode-
 import { useRouter } from '@/next/navigation'
 import { consoleQuery } from '@/service/client'
 import { StatusBadge } from '../components/status-badge'
-import {
-  SOURCE_APPS_PAGE_SIZE,
-} from '../data'
+import { deploymentOverviewQueryOptions } from '../queries'
 import { useDeploymentsStore } from '../store'
 import {
   releaseLabel,
-  sourceAppMapFromApps,
-  sourceAppsFromList,
   toAppInfoFromOverview,
   webappUrl,
 } from '../utils'
@@ -101,24 +97,12 @@ const OverviewTab: FC<OverviewTabProps> = ({ instanceId }) => {
   const { t: tCommon } = useTranslation()
   const router = useRouter()
   const input = { params: { appInstanceId: instanceId } }
-  const { data: overview } = useQuery(consoleQuery.deployments.overview.queryOptions({
-    input,
-  }))
+  const { data: overview } = useQuery(deploymentOverviewQueryOptions(instanceId))
   const { data: accessConfig } = useQuery(consoleQuery.deployments.accessConfig.queryOptions({
     input,
   }))
-  const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({
-    input: {
-      query: {
-        pageNumber: 1,
-        resultsPerPage: SOURCE_APPS_PAGE_SIZE,
-      },
-    },
-  }))
   const openDeployDrawer = useDeploymentsStore(state => state.openDeployDrawer)
-  const sourceApps = useMemo(() => sourceAppsFromList(listQuery.data), [listQuery.data])
-  const appMap = useMemo(() => sourceAppMapFromApps(sourceApps), [sourceApps])
-  const app = toAppInfoFromOverview(overview?.instance) ?? appMap.get(instanceId)
+  const app = toAppInfoFromOverview(overview?.instance)
   const overviewApp = overview?.instance
   const deployments = useMemo(
     () => overview?.deployments?.filter(row => row.environment?.id && row.status?.toLowerCase() !== 'undeployed') ?? [],

web/features/deployments/detail/settings-tab.tsx

@@ -18,18 +18,16 @@ import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from '@/next/navigation'
 import { consoleQuery } from '@/service/client'
-import {
-  DEPLOYMENT_PAGE_SIZE,
-  SOURCE_APPS_PAGE_SIZE,
-} from '../data'
 import {
   useDeleteDeploymentInstance,
   useUpdateDeploymentInstance,
 } from '../hooks/use-deployment-mutations'
+import {
+  deploymentEnvironmentDeploymentsQueryOptions,
+  deploymentOverviewQueryOptions,
+} from '../queries'
 import {
   deployedRows,
-  sourceAppMapFromApps,
-  sourceAppsFromList,
   toAppInfoFromOverview,
 } from '../utils'
 
@@ -190,29 +188,12 @@ const SettingsTab: FC<SettingsTabProps> = ({ instanceId }) => {
   const updateInstance = useUpdateDeploymentInstance()
   const deleteInstance = useDeleteDeploymentInstance()
   const appInput = { params: { appInstanceId: instanceId } }
-  const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({
-    input: {
-      query: {
-        pageNumber: 1,
-        resultsPerPage: SOURCE_APPS_PAGE_SIZE,
-      },
-    },
-  }))
-  const { data: overview } = useQuery(consoleQuery.deployments.overview.queryOptions({
-    input: appInput,
-  }))
-  const { data: environmentDeployments } = useQuery(consoleQuery.deployments.environmentDeployments.queryOptions({
-    input: {
-      ...appInput,
-      query: {
-        pageNumber: 1,
-        resultsPerPage: DEPLOYMENT_PAGE_SIZE,
-      },
-    },
-  }))
-  const sourceApps = useMemo(() => sourceAppsFromList(listQuery.data), [listQuery.data])
-  const appMap = useMemo(() => sourceAppMapFromApps(sourceApps), [sourceApps])
-  const app = toAppInfoFromOverview(overview?.instance) ?? appMap.get(instanceId)
+  const { data: overview } = useQuery(deploymentOverviewQueryOptions(instanceId))
+  const { data: environmentDeployments } = useQuery(deploymentEnvironmentDeploymentsQueryOptions(instanceId))
+  const app = useMemo(
+    () => toAppInfoFromOverview(overview?.instance),
+    [overview?.instance],
+  )
   const settingsQuery = useQuery(consoleQuery.deployments.settings.queryOptions({
     input: appInput,
   }))

web/features/deployments/detail/versions-tab.tsx

@@ -7,6 +7,7 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { consoleQuery } from '@/service/client'
 import { DEPLOYMENT_PAGE_SIZE } from '../data'
+import { deploymentEnvironmentDeploymentsQueryOptions } from '../queries'
 import {
   deployedRows,
   formatDate,
@@ -35,12 +36,7 @@ const VersionsTab: FC<VersionsTabProps> = ({ instanceId: appId }) => {
       query,
     },
   }))
-  const { data: environmentDeployments } = useQuery(consoleQuery.deployments.environmentDeployments.queryOptions({
-    input: {
-      params: { appInstanceId: appId },
-      query,
-    },
-  }))
+  const { data: environmentDeployments } = useQuery(deploymentEnvironmentDeploymentsQueryOptions(appId))
   const releaseRows = useMemo(
     () => releaseHistory?.data?.filter(row => (row.release ?? row).id) ?? [],
     [releaseHistory?.data],

web/features/deployments/detail/versions-tab/deploy-release-menu.tsx

@@ -11,11 +11,7 @@ import {
 import { useQuery } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { consoleQuery } from '@/service/client'
-import {
-  DEPLOYMENT_PAGE_SIZE,
-  SOURCE_APPS_PAGE_SIZE,
-} from '../../data'
+import { deploymentEnvironmentDeploymentsQueryOptions } from '../../queries'
 import { useDeploymentsStore } from '../../store'
 import {
   activeRelease,
@@ -24,7 +20,7 @@ import {
   deploymentStatus,
   environmentId,
   environmentName,
-  environmentOptionsFromList,
+  environmentOptionsFromDeploymentRows,
 } from '../../utils'
 
 type DeployReleaseMenuProps = {
@@ -37,27 +33,15 @@ export const DeployReleaseMenu: FC<DeployReleaseMenuProps> = ({ appId, releaseId
   const openDeployDrawer = useDeploymentsStore(state => state.openDeployDrawer)
   const openRollbackModal = useDeploymentsStore(state => state.openRollbackModal)
   const [open, setOpen] = useState(false)
-  const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({
-    input: {
-      query: {
-        pageNumber: 1,
-        resultsPerPage: SOURCE_APPS_PAGE_SIZE,
-      },
-    },
+  const { data: environmentDeployments } = useQuery({
+    ...deploymentEnvironmentDeploymentsQueryOptions(appId),
     enabled: open,
-  }))
-  const { data: environmentDeployments } = useQuery(consoleQuery.deployments.environmentDeployments.queryOptions({
-    input: {
-      params: { appInstanceId: appId },
-      query: {
-        pageNumber: 1,
-        resultsPerPage: DEPLOYMENT_PAGE_SIZE,
-      },
-    },
-    enabled: open,
-  }))
+  })
 
-  const environmentOptions = useMemo(() => environmentOptionsFromList(listQuery.data), [listQuery.data])
+  const environmentOptions = useMemo(
+    () => environmentOptionsFromDeploymentRows(environmentDeployments?.data),
+    [environmentDeployments?.data],
+  )
   const environments = environmentOptions.filter(env => env.id)
   const deploymentRows = deployedRows(environmentDeployments?.data)
 

web/features/deployments/list/index.tsx

@@ -7,13 +7,10 @@ import { debounce, parseAsString, useQueryState } from 'nuqs'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { consoleQuery } from '@/service/client'
 import CreateInstanceModal from '../components/create-instance-modal'
 import DeployDrawer from '../components/deploy-drawer'
 import RollbackModal from '../components/rollback-modal'
-import {
-  SOURCE_APPS_PAGE_SIZE,
-} from '../data'
+import { deploymentsListQueryOptions } from '../queries'
 import { useDeploymentsStore } from '../store'
 import {
   deploymentSummariesFromList,
@@ -50,16 +47,10 @@ const DeploymentsMain: FC = () => {
   const requestedEnvironmentId = envFilter !== 'all' && envFilter !== 'not-deployed'
     ? envFilter
     : undefined
-  const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({
-    input: {
-      query: {
-        pageNumber: 1,
-        resultsPerPage: SOURCE_APPS_PAGE_SIZE,
-        ...(requestedEnvironmentId ? { environmentId: requestedEnvironmentId } : {}),
-        ...(envFilter === 'not-deployed' ? { notDeployed: true } : {}),
-        ...(queryKeywords.trim() ? { query: queryKeywords.trim() } : {}),
-      },
-    },
+  const listQuery = useQuery(deploymentsListQueryOptions({
+    ...(requestedEnvironmentId ? { environmentId: requestedEnvironmentId } : {}),
+    ...(envFilter === 'not-deployed' ? { notDeployed: true } : {}),
+    ...(queryKeywords.trim() ? { query: queryKeywords.trim() } : {}),
   }))
   const apps = useMemo(() => sourceAppsFromList(listQuery.data), [listQuery.data])
   const summaries = useMemo(() => deploymentSummariesFromList(listQuery.data), [listQuery.data])

web/features/deployments/nav/index.tsx

@@ -2,13 +2,15 @@
 
 import type { NavItem } from '@/app/components/header/nav/nav-selector'
 import type { AppIconType, AppModeEnum } from '@/types/app'
-import { skipToken, useQuery } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Nav from '@/app/components/header/nav'
 import { useParams, useRouter, useSelectedLayoutSegment } from '@/next/navigation'
-import { consoleQuery } from '@/service/client'
-import { SOURCE_APPS_PAGE_SIZE } from '../data'
+import {
+  deploymentOverviewQueryOptions,
+  deploymentsListQueryOptions,
+} from '../queries'
 import { useDeploymentsStore } from '../store'
 import {
   sourceAppsFromList,
@@ -24,23 +26,16 @@ const DeploymentsNav = () => {
   const instanceId = params?.instanceId
 
   const openCreateInstanceModal = useDeploymentsStore(state => state.openCreateInstanceModal)
-  const { data: currentInstance } = useQuery(consoleQuery.deployments.overview.queryOptions({
-    input: instanceId
-      ? { params: { appInstanceId: instanceId } }
-      : skipToken,
+  const { data: currentInstance } = useQuery({
+    ...deploymentOverviewQueryOptions(instanceId),
     enabled: isActive && Boolean(instanceId),
     select: data => toAppInfoFromOverview(data.instance),
-  }))
+  })
 
-  const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({
-    input: {
-      query: {
-        pageNumber: 1,
-        resultsPerPage: SOURCE_APPS_PAGE_SIZE,
-      },
-    },
+  const listQuery = useQuery({
+    ...deploymentsListQueryOptions(),
     enabled: isActive,
-  }))
+  })
   const apps = useMemo(() => sourceAppsFromList(listQuery.data), [listQuery.data])
 
   const navigationItems = useMemo<NavItem[]>(() => {

web/features/deployments/queries.ts

@@ -0,0 +1,29 @@
+import type { ListAppDeploymentsQuery } from '@/contract/console/deployments'
+import { skipToken } from '@tanstack/react-query'
+import { consoleQuery } from '@/service/client'
+import { SOURCE_APPS_PAGE_SIZE } from './data'
+
+export const deploymentsListQueryOptions = (query: ListAppDeploymentsQuery = {}) =>
+  consoleQuery.deployments.list.queryOptions({
+    input: {
+      query: {
+        pageNumber: 1,
+        resultsPerPage: SOURCE_APPS_PAGE_SIZE,
+        ...query,
+      },
+    },
+  })
+
+export const deploymentOverviewQueryOptions = (appInstanceId?: string) =>
+  consoleQuery.deployments.overview.queryOptions({
+    input: appInstanceId
+      ? { params: { appInstanceId } }
+      : skipToken,
+  })
+
+export const deploymentEnvironmentDeploymentsQueryOptions = (appInstanceId?: string) =>
+  consoleQuery.deployments.environmentDeployments.queryOptions({
+    input: appInstanceId
+      ? { params: { appInstanceId } }
+      : skipToken,
+  })

web/features/deployments/utils.ts

@@ -125,8 +125,6 @@ export function toAppInfoFromSummary(summary: AppDeploymentSummary): AppInfo | u
     mode: (summary.mode || 'workflow') as AppMode,
     iconType: 'emoji',
     icon: summary.icon,
-    description: summary.description ?? undefined,
-    sourceAppId: summary.sourceAppId,
     sourceAppName: summary.sourceAppName,
   }
 }
@@ -140,7 +138,6 @@ export function toAppInfoFromOverview(instance?: AppInstanceOverview): AppInfo |
     name: instance.name ?? instance.id,
     mode: (instance.mode || 'workflow') as AppMode,
     iconType: 'emoji',
-    icon: instance.icon,
     description: instance.description ?? undefined,
     sourceAppId: instance.sourceAppId,
     sourceAppName: instance.sourceAppName,
@@ -153,10 +150,6 @@ export const sourceAppsFromList = (response?: ListAppDeploymentsReply) => {
     .filter((app): app is AppInfo => Boolean(app))
 }
 
-export const sourceAppMapFromApps = (apps: AppInfo[]) => {
-  return new Map(apps.map(app => [app.id, app]))
-}
-
 export const deploymentSummariesFromList = (response?: ListAppDeploymentsReply): Record<string, AppDeploymentSummary> => {
   return Object.fromEntries(
     (response?.data ?? [])
@@ -176,6 +169,13 @@ export const environmentOptionsFromList = (response?: ListAppDeploymentsReply):
     }))
 }
 
+export const environmentOptionsFromDeploymentRows = (rows?: EnvironmentDeploymentRow[]): EnvironmentOption[] => {
+  return rows
+    ?.map(row => row.environment)
+    .filter((environment): environment is ConsoleEnvironmentSummary => Boolean(environment?.id))
+    .map(environment => ({ ...environment })) ?? []
+}
+
 export const accessModeToPermissionKey = (mode?: string): AccessPermissionKind => {
   const normalized = mode?.toLowerCase() ?? ''
   if (normalized === 'private')