add typing to service components

assets/eslint.config.mjs

@@ -7,9 +7,7 @@ import globals from 'globals'
 import tseslint from 'typescript-eslint'
 
 export default [
-  {
-    ignores: ['src/archive/*'],
-  },
+  { ignores: ['src/archive/*', 'src/generated/**/*'] },
   ...tseslint.configs.recommendedTypeChecked,
   react.configs.flat.recommended,
   react.configs.flat['jsx-runtime'],

assets/src/components/cd/cluster/Cluster.tsx

@@ -49,7 +49,12 @@ import {
 } from 'routes/cdRoutesConsts'
 import { useTheme } from 'styled-components'
 
-import { ClusterFragment, useClusterQuery } from '../../../generated/graphql'
+import {
+  ClusterFragment,
+  ClusterMinimalFragment,
+  MakeOptional,
+  useClusterQuery,
+} from '../../../generated/graphql'
 import LoadingIndicator from '../../utils/LoadingIndicator'
 import { MoreMenu } from '../../utils/MoreMenu.tsx'
 import {
@@ -110,24 +115,20 @@ export const getClusterBreadcrumbs = ({
   cluster,
   tab,
 }: {
-  cluster: {
-    name?: Nullable<string>
-    handle?: Nullable<string>
-    id: Nullable<string>
-  }
+  cluster?: Nullable<MakeOptional<ClusterMinimalFragment, 'name'>>
   tab?: string
 }) => {
   const clustersPath = `${CD_ABS_PATH}/${CLUSTERS_REL_PATH}` as const
-  const clusterPath = `${clustersPath}/${cluster.id}` as const
+  const clusterPath = `${clustersPath}/${cluster?.id}` as const
   const tabPath = `${clusterPath}/${tab || ''}` as const
 
   return [
     ...CD_BASE_CRUMBS,
     { label: 'clusters', url: clustersPath },
-    ...(cluster.id
+    ...(cluster?.id
       ? [
           {
-            label: cluster?.handle || cluster?.name || cluster.id,
+            label: cluster?.handle || cluster?.name || cluster?.id,
             url: clusterPath,
           },
           ...(tab ? [{ label: tab, url: tabPath }] : []),

assets/src/components/cd/cluster/pod/PodsList.tsx

@@ -4,8 +4,9 @@ import {
   Tooltip,
   TrashCanIcon,
 } from '@pluralsh/design-system'
-import { useNavigate } from 'react-router-dom'
-import { Row, createColumnHelper } from '@tanstack/react-table'
+import { createColumnHelper, Row } from '@tanstack/react-table'
+import { filesize } from 'filesize'
+import { isEmpty } from 'lodash'
 import {
   ComponentProps,
   createContext,
@@ -14,17 +15,18 @@ import {
   useMemo,
   useState,
 } from 'react'
-import { filesize } from 'filesize'
-import { isEmpty } from 'lodash'
+import { useNavigate } from 'react-router-dom'
 
-import { Maybe, Pod, useDeletePodMutation } from 'generated/graphql'
+import { Pod, PodFragment, useDeletePodMutation } from 'generated/graphql'
 import { ReadinessT } from 'utils/status'
 
 import { Confirm } from 'components/utils/Confirm'
 
 import { TruncateStart } from 'components/utils/table/Truncate'
 
 import { getKubernetesAbsPath } from 'routes/kubernetesRoutesConsts'
+import { getPodContainersStats } from '../../../cluster/containers/getPodContainersStats.tsx'
+import { ContainerStatuses } from '../../../cluster/ContainerStatuses.tsx'
 import {
   LabelWithIcon,
   numishSort,
@@ -33,9 +35,7 @@ import {
   Usage,
 } from '../../../cluster/TableElements.tsx'
 import { DateTimeCol } from '../../../utils/table/DateTimeCol.tsx'
-import { ContainerStatuses } from '../../../cluster/ContainerStatuses.tsx'
 import { getPodResources } from './getPodResources.tsx'
-import { getPodContainersStats } from '../../../cluster/containers/getPodContainersStats.tsx'
 
 export const PODS_TABLE_MAX_HEIGHT = '256px'
 
@@ -289,11 +289,8 @@ export const ColDelete = columnHelper.display({
   header: '',
 })
 
-export type PodWithId = Pod & {
-  id?: Maybe<string>
-}
 type PodListProps = Omit<ComponentProps<typeof Table>, 'data'> & {
-  pods?: Maybe<PodWithId>[] & PodWithId[]
+  pods?: PodFragment[]
   refetch: Nullable<() => void>
   columns: any[]
   linkToK8sDashboard?: boolean
@@ -302,6 +299,8 @@ type PodListProps = Omit<ComponentProps<typeof Table>, 'data'> & {
   serviceId?: string | null
 }
 
+export type PodWithId = PodFragment & { id: string }
+
 function getRestarts(status: Pod['status']) {
   return (status.containerStatuses || []).reduce(
     (count, status) => count + ((status as any)?.restartCount || 0),

assets/src/components/cd/services/component/ServiceComponent.tsx

@@ -1,8 +1,11 @@
-import { useSetBreadcrumbs } from '@pluralsh/design-system'
-import { ReactNode, useMemo } from 'react'
+import { EmptyState, useSetBreadcrumbs } from '@pluralsh/design-system'
+import { useMemo } from 'react'
 import { useParams } from 'react-router-dom'
 
-import { useServiceDeploymentQuery } from 'generated/graphql'
+import {
+  ServiceDeploymentComponentFragment,
+  useServiceDeploymentQuery,
+} from 'generated/graphql'
 
 import {
   COMPONENT_PARAM_ID,
@@ -12,15 +15,16 @@ import {
   getServiceComponentPath,
 } from 'routes/cdRoutesConsts'
 
-import LoadingIndicator from 'components/utils/LoadingIndicator'
 import { ComponentDetails } from 'components/component/ComponentDetails'
 import { GqlError } from 'components/utils/Alert'
+import LoadingIndicator from 'components/utils/LoadingIndicator'
 
 import { useDeploymentSettings } from 'components/contexts/DeploymentSettingsContext'
 
 import { getServiceComponentsBreadcrumbs } from '../service/ServiceComponents'
+import { isNonNullable } from 'utils/isNonNullable'
 
-export const getServiceComponentBreadcrumbs = ({
+const getServiceComponentBreadcrumbs = ({
   service,
   cluster,
   componentName,
@@ -38,85 +42,60 @@ export const getServiceComponentBreadcrumbs = ({
   {
     label: componentName || componentId || '',
     url: getServiceComponentPath({
-      clusterId: cluster.id,
-      serviceId: service.id,
+      clusterId: cluster?.id,
+      serviceId: service?.id,
       componentId,
     }),
   },
 ]
 
-function BreadcrumbWrapper({
-  cluster,
-  service,
-  componentId,
-  componentName,
-  children,
-}: {
-  cluster: any
-  service: any
-  componentId: string | undefined
-  componentName: string | undefined
-  children: ReactNode
-}) {
-  useSetBreadcrumbs(
-    useMemo(
-      () =>
-        getServiceComponentBreadcrumbs({
-          cluster,
-          service,
-          componentId,
-          componentName,
-        }),
-      [cluster, service, componentId, componentName]
-    )
-  )
-
-  return <>{children}</>
-}
-
 export default function ServiceComponent() {
   const params = useParams()
   const componentId = params[COMPONENT_PARAM_ID]
   const clusterId = params[SERVICE_PARAM_CLUSTER_ID]!
   const serviceId = params[SERVICE_PARAM_ID]!
 
   const settings = useDeploymentSettings()
-  const { data, error } = useServiceDeploymentQuery({
+  const { data, loading, error } = useServiceDeploymentQuery({
     variables: { id: serviceId || '' },
   })
 
   const serviceDeployment = data?.serviceDeployment
-  const components = data?.serviceDeployment?.components
-
-  const component = components?.find(
-    (component) => component?.id === componentId
+  const components = useMemo(
+    () => serviceDeployment?.components?.filter(isNonNullable) ?? [],
+    [serviceDeployment?.components]
   )
+
+  const component: Nullable<ServiceDeploymentComponentFragment> =
+    data?.serviceDeployment?.components?.find(
+      (component) => component?.id === componentId
+    )
   const componentName = component?.name
 
-  const breadcrumbProps = {
-    cluster: serviceDeployment?.cluster || { id: serviceId },
-    service: serviceDeployment || { id: clusterId },
-    componentId,
-    componentName,
-  }
+  useSetBreadcrumbs(
+    useMemo(
+      () =>
+        getServiceComponentBreadcrumbs({
+          cluster: serviceDeployment?.cluster || { id: serviceId },
+          service: serviceDeployment || { id: clusterId },
+          componentId,
+          componentName,
+        }),
+      [serviceDeployment, serviceId, clusterId, componentId, componentName]
+    )
+  )
 
-  if (error) {
-    return <GqlError error={error} />
-  }
-  if (!component) {
-    return <LoadingIndicator />
-  }
+  if (error) return <GqlError error={error} />
+  if (!data && loading) return <LoadingIndicator />
+  if (!component) return <EmptyState message="Component not found" />
 
   return (
-    <BreadcrumbWrapper {...breadcrumbProps}>
-      <ComponentDetails
-        component={component}
-        serviceComponents={components}
-        service={data?.serviceDeployment}
-        hasPrometheus={!!settings?.prometheusConnection}
-        pathMatchString={SERVICE_COMPONENT_PATH_MATCHER_ABS}
-        cdView
-      />
-    </BreadcrumbWrapper>
+    <ComponentDetails
+      component={component}
+      serviceComponents={components}
+      service={data?.serviceDeployment}
+      hasPrometheus={!!settings?.prometheusConnection}
+      pathMatchString={SERVICE_COMPONENT_PATH_MATCHER_ABS}
+    />
   )
 }

assets/src/components/cd/services/service/ServiceComponents.tsx

@@ -11,6 +11,7 @@ import {
 import { type Key } from '@react-types/shared'
 import {
   ComponentState,
+  ServiceDeploymentComponentFragment,
   useServiceDeploymentComponentsQuery,
 } from 'generated/graphql'
 import { useMemo, useState } from 'react'
@@ -43,6 +44,7 @@ import {
   getServiceDetailsBreadcrumbs,
   useServiceContext,
 } from './ServiceDetails'
+import { GqlError } from 'components/utils/Alert.tsx'
 
 export const getServiceComponentsBreadcrumbs = ({
   service,
@@ -52,8 +54,8 @@ export const getServiceComponentsBreadcrumbs = ({
   {
     label: 'components',
     url: `${getServiceDetailsPath({
-      clusterId: cluster.id,
-      serviceId: service.id,
+      clusterId: cluster?.id,
+      serviceId: service?.id,
     })}/components`,
   },
 ]
@@ -73,8 +75,8 @@ export default function ServiceComponents() {
   const breadcrumbs: Breadcrumb[] = useMemo(
     () =>
       getServiceComponentsBreadcrumbs({
-        cluster: outletContext?.service?.cluster as any,
-        service: outletContext?.service as any,
+        cluster: outletContext?.service?.cluster,
+        service: outletContext?.service,
       }),
     [outletContext.service]
   )
@@ -88,17 +90,13 @@ export default function ServiceComponents() {
     () => countDeprecations(data?.serviceDeployment?.components),
     [data?.serviceDeployment?.components]
   )
-  const components = useMemo(
-    () => data?.serviceDeployment?.components?.filter(isNonNullable) || [],
+  const components: ServiceDeploymentComponentFragment[] = useMemo(
+    () => data?.serviceDeployment?.components?.filter(isNonNullable) ?? [],
     [data?.serviceDeployment?.components]
   )
 
-  if (error) {
-    return null
-  }
-  if (!data) {
-    return <LoadingIndicator />
-  }
+  if (error) return <GqlError error={error} />
+  if (!data) return <LoadingIndicator />
 
   return (
     <ScrollablePage

assets/src/components/cd/services/service/ServiceDetails.tsx

@@ -111,15 +111,15 @@ export const getServiceDetailsBreadcrumbs = ({
   ...getClusterBreadcrumbs({ cluster }),
   {
     label: 'services',
-    url: `${getClusterDetailsPath({ clusterId: cluster.id })}/services`,
+    url: `${getClusterDetailsPath({ clusterId: cluster?.id })}/services`,
   },
-  ...(service.id && cluster.id
+  ...(service?.id && cluster?.id
     ? [
         {
           label: service?.name || service?.id,
           url: getServiceDetailsPath({
-            clusterId: cluster.id,
-            serviceId: service.id,
+            clusterId: cluster?.id,
+            serviceId: service?.id,
           }),
         },
       ]