enhancement: Stacks breadcrumbs improvements (#1323)

assets/src/components/stacks/Stacks.tsx

@@ -77,9 +77,14 @@ export type StackOutletContextT = {
   refetch?: Nullable<() => void>
 }
 
-export const getBreadcrumbs = (stackId: string) => [
+export const getBreadcrumbs = (
+  stackId: Nullable<string>,
+  stackName: Nullable<string>
+) => [
   { label: 'stacks', url: getStacksAbsPath('') },
-  ...(stackId ? [{ label: stackId, url: getStacksAbsPath(stackId) }] : []),
+  ...(stackId
+    ? [{ label: stackName || stackId, url: getStacksAbsPath(stackId) }]
+    : []),
 ]
 
 enum MenuItemKey {
@@ -138,8 +143,6 @@ export default function Stacks() {
     [selectedTagKeys]
   )
 
-  useSetBreadcrumbs(useMemo(() => [...getBreadcrumbs(stackId)], [stackId]))
-
   const { data, loading, error, refetch, pageInfo, fetchNextPage } =
     useFetchPaginatedData(
       {
@@ -190,6 +193,13 @@ export default function Stacks() {
     if (!isEmpty(stacks) && !stackId) navigate(getStacksAbsPath(stacks[0].id))
   }, [stacks, stackId, navigate])
 
+  useSetBreadcrumbs(
+    useMemo(
+      () => [...getBreadcrumbs(fullStack?.id, fullStack?.name)],
+      [fullStack]
+    )
+  )
+
   if (error)
     return (
       <div css={{ padding: theme.spacing.large }}>

assets/src/components/stacks/environment/StackEnvironment.tsx

@@ -128,8 +128,8 @@ export default function StackEnvironment() {
 
   useSetBreadcrumbs(
     useMemo(
-      () => [...getBreadcrumbs(stack.id ?? ''), { label: 'environment' }],
-      [stack.id]
+      () => [...getBreadcrumbs(stack.id, stack.name), { label: 'environment' }],
+      [stack]
     )
   )
 

assets/src/components/stacks/files/StackFiles.tsx

@@ -39,8 +39,8 @@ export default function StackFiles() {
 
   useSetBreadcrumbs(
     useMemo(
-      () => [...getBreadcrumbs(stack.id ?? ''), { label: 'files' }],
-      [stack.id]
+      () => [...getBreadcrumbs(stack.id, stack.name), { label: 'files' }],
+      [stack]
     )
   )
 

assets/src/components/stacks/job/StackJob.tsx

@@ -19,8 +19,8 @@ export default function StackJob() {
 
   useSetBreadcrumbs(
     useMemo(
-      () => [...getBreadcrumbs(stack.id ?? ''), { label: 'job' }],
-      [stack.id]
+      () => [...getBreadcrumbs(stack.id, stack.name), { label: 'job' }],
+      [stack]
     )
   )
 

assets/src/components/stacks/output/StackOutput.tsx

@@ -107,8 +107,8 @@ export default function StackOutput() {
 
   useSetBreadcrumbs(
     useMemo(
-      () => [...getBreadcrumbs(stack.id ?? ''), { label: 'output' }],
-      [stack.id]
+      () => [...getBreadcrumbs(stack.id, stack.name), { label: 'output' }],
+      [stack]
     )
   )
 

assets/src/components/stacks/overview/StackOverview.tsx

@@ -17,8 +17,8 @@ export default function StackOverview() {
 
   useSetBreadcrumbs(
     useMemo(
-      () => [...getBreadcrumbs(stack.id ?? ''), { label: 'overview' }],
-      [stack.id]
+      () => [...getBreadcrumbs(stack.id, stack.name), { label: 'overview' }],
+      [stack]
     )
   )
 

assets/src/components/stacks/prs/PrStackRunsAccordion.tsx

@@ -7,14 +7,12 @@ import {
   IconFrame,
   ReloadIcon,
   Toast,
-  useSetBreadcrumbs,
 } from '@pluralsh/design-system'
 import {
   PullRequestFragment,
   useKickStackPullRequestMutation,
   useStackRunsQuery,
 } from 'generated/graphql'
-import { useMemo } from 'react'
 import { Link, useParams } from 'react-router-dom'
 
 import { isEmpty } from 'lodash'
@@ -24,7 +22,6 @@ import styled, { useTheme } from 'styled-components'
 import { PrStatusChip } from 'components/pr/queue/PrQueueColumns'
 
 import { StackRunsScroller } from '../runs/StackRunsScroller'
-import { getBreadcrumbs } from '../Stacks'
 
 const pollInterval = 5 * 1000
 
@@ -43,10 +40,6 @@ export function PrStackRunsAccordion({
   const theme = useTheme()
   const { stackId = '' } = useParams()
 
-  useSetBreadcrumbs(
-    useMemo(() => [...getBreadcrumbs(stackId), { label: 'prs' }], [stackId])
-  )
-
   const queryResult = useStackRunsQuery({
     variables: { id: stackId, pullRequestId: pr.id },
     fetchPolicy: 'cache-and-network',

assets/src/components/stacks/prs/StackPrs.tsx

@@ -1,7 +1,7 @@
-import { Table } from '@pluralsh/design-system'
+import { Table, useSetBreadcrumbs } from '@pluralsh/design-system'
 import { createColumnHelper } from '@tanstack/react-table'
 import { PullRequestEdge, useStackPrsQuery } from 'generated/graphql'
-import { useParams } from 'react-router-dom'
+import { useOutletContext, useParams } from 'react-router-dom'
 
 import { FullHeightTableWrap } from 'components/utils/layout/FullHeightTableWrap'
 
@@ -10,18 +10,29 @@ import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData
 import { GqlError } from 'components/utils/Alert'
 import LoadingIndicator from 'components/utils/LoadingIndicator'
 
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+
+import { StackOutletContextT, getBreadcrumbs } from '../Stacks'
 
 import { PrStackRunsAccordion } from './PrStackRunsAccordion'
 
 export function StackPrs() {
   const { stackId } = useParams()
+  const { stack } = useOutletContext() as StackOutletContextT
+
   const [openRowIdx, setOpenRowIdx] = useState(-1)
 
   const reactTableOptions = {
     meta: { openRowIdx, setOpenRowIdx },
   }
 
+  useSetBreadcrumbs(
+    useMemo(
+      () => [...getBreadcrumbs(stack.id, stack.name), { label: 'prs' }],
+      [stack]
+    )
+  )
+
   const { data, loading, error, pageInfo, fetchNextPage, setVirtualSlice } =
     useFetchPaginatedData(
       {

assets/src/components/stacks/run/Route.tsx

@@ -21,9 +21,13 @@ import { ResponsiveLayoutContentContainer } from '../../utils/layout/ResponsiveL
 import StackRunHeader from './Header'
 import StackRunSidecar from './Sidecar'
 
-export function getRunBreadcrumbs(stackId: string, runId: string) {
+export function getRunBreadcrumbs(
+  stackName: Nullable<string>,
+  stackId: string,
+  runId: string
+) {
   return [
-    ...getBreadcrumbs(stackId ?? ''),
+    ...getBreadcrumbs(stackId, stackName),
     {
       label: 'runs',
       url: `${getStacksAbsPath(stackId)}/${STACK_RUNS_REL_PATH}`,
@@ -51,15 +55,16 @@ export default function StackRunDetail(): ReactNode {
     pollInterval: 5_000,
   })
 
+  const stackRun: StackRun = stackRunQuery?.stackRun as StackRun
+
   useSetBreadcrumbs(
     useMemo(
-      () => getRunBreadcrumbs(stackId || '', runId || ''),
-      [runId, stackId]
+      () =>
+        getRunBreadcrumbs(stackRun?.stack?.name, stackId || '', runId || ''),
+      [runId, stackId, stackRun?.stack?.name]
     )
   )
 
-  const stackRun: StackRun = stackRunQuery?.stackRun as StackRun
-
   if (loadingStackRun) {
     return <LoadingIndicator />
   }

assets/src/components/stacks/run/job/RunJob.tsx

@@ -3,13 +3,11 @@ import {
   BriefcaseIcon,
   LoopingLogo,
   Tooltip,
-  useSetBreadcrumbs,
 } from '@pluralsh/design-system'
 import { createContext, useContext, useMemo } from 'react'
 import {
   Outlet,
   useLocation,
-  useMatch,
   useOutletContext,
   useParams,
 } from 'react-router-dom'
@@ -29,7 +27,6 @@ import { Subtitle2H1 } from 'components/utils/typography/Text'
 import { POLL_INTERVAL } from 'components/cd/ContinuousDeployment'
 import { getStackRunsAbsPath } from 'routes/stacksRoutesConsts'
 
-import { getRunBreadcrumbs } from '../Route'
 import { TRUNCATE } from '../../../utils/truncate'
 
 const DIRECTORY = [
@@ -39,20 +36,6 @@ const DIRECTORY = [
   { path: 'specs', label: 'Specs' },
 ]
 
-const getStackRunJobCrumbs = ({
-  stackId,
-  runId,
-  tab,
-}: {
-  stackId: string
-  runId: string
-  tab: string
-}) => [
-  ...getRunBreadcrumbs(stackId, runId),
-  { label: 'job' },
-  { label: tab, url: `${getStackRunsAbsPath(stackId, runId)}/${tab}` },
-]
-
 const PodsContext =
   createContext<Nullable<PipelineGateJobFragment['pods']>>(undefined)
 
@@ -85,24 +68,12 @@ export default function RunJob() {
   const { pathname } = useLocation()
 
   const pathPrefix = `${getStackRunsAbsPath(stackId, runId)}/job`
-  const tab = useMatch(`${pathPrefix}/:tab/*`)?.params?.tab || ''
 
   const { data, error, refetch } = useStackRunJobQuery({
     variables: { id: runId || '' },
     pollInterval: POLL_INTERVAL,
   })
 
-  useSetBreadcrumbs(
-    useMemo(
-      () =>
-        getStackRunJobCrumbs({
-          runId: runId || '',
-          stackId: stackId || '',
-          tab: tab || '',
-        }),
-      [runId, stackId, tab]
-    )
-  )
   const outletContext: OutletContextT = useMemo(
     () => ({
       refetch,

assets/src/components/stacks/runs/StackRuns.tsx

@@ -1,23 +1,25 @@
 import { Card, EmptyState, useSetBreadcrumbs } from '@pluralsh/design-system'
 import { useMemo } from 'react'
 import { isEmpty } from 'lodash'
-import { useOutletContext, useParams } from 'react-router-dom'
+import { useOutletContext } from 'react-router-dom'
 
-import { StackFragment, useStackRunsQuery } from '../../../generated/graphql'
+import { useStackRunsQuery } from '../../../generated/graphql'
 import { ScrollablePage } from '../../utils/layout/ScrollablePage'
 
-import { getBreadcrumbs } from '../Stacks'
+import { StackOutletContextT, getBreadcrumbs } from '../Stacks'
 
 import { StackRunsScroller } from './StackRunsScroller'
 
 const pollInterval = 5 * 1000
 
 export default function StackRuns() {
-  const { stackId = '' } = useParams()
-  const { stack } = useOutletContext() as { stack?: Nullable<StackFragment> }
+  const { stack } = useOutletContext() as StackOutletContextT
 
   useSetBreadcrumbs(
-    useMemo(() => [...getBreadcrumbs(stackId), { label: 'runs' }], [stackId])
+    useMemo(
+      () => [...getBreadcrumbs(stack.id, stack.name), { label: 'runs' }],
+      [stack]
+    )
   )
 
   const queryResult = useStackRunsQuery({

assets/src/components/stacks/state/StackState.tsx

@@ -15,8 +15,8 @@ export default function StackState() {
 
   useSetBreadcrumbs(
     useMemo(
-      () => [...getBreadcrumbs(stack.id ?? ''), { label: 'state' }],
-      [stack.id]
+      () => [...getBreadcrumbs(stack.id, stack.name), { label: 'state' }],
+      [stack]
     )
   )
 

assets/src/generated/graphql.ts

@@ -9708,7 +9708,7 @@ export type StackRunQueryVariables = Exact<{
 }>;
 
 
-export type StackRunQuery = { __typename?: 'RootQueryType', stackRun?: { __typename?: 'StackRun', id: string, status: StackStatus, updatedAt?: string | null, insertedAt?: string | null, type: StackType, message?: string | null, approval?: boolean | null, approvedAt?: string | null, cancellationReason?: string | null, approver?: { __typename?: 'User', id: string, pluralId?: string | null, name: string, email: string, profile?: string | null, backgroundColor?: string | null, readTimestamp?: string | null, roles?: { __typename?: 'UserRoles', admin?: boolean | null } | null, personas?: Array<{ __typename?: 'Persona', id: string, name: string, description?: string | null, bindings?: Array<{ __typename?: 'PolicyBinding', id?: string | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null, group?: { __typename?: 'Group', id: string, name: string } | null } | null> | null, configuration?: { __typename?: 'PersonaConfiguration', all?: boolean | null, deployments?: { __typename?: 'PersonaDeployment', addOns?: boolean | null, clusters?: boolean | null, pipelines?: boolean | null, providers?: boolean | null, repositories?: boolean | null, services?: boolean | null } | null, home?: { __typename?: 'PersonaHome', manager?: boolean | null, security?: boolean | null } | null, sidebar?: { __typename?: 'PersonaSidebar', audits?: boolean | null, kubernetes?: boolean | null, pullRequests?: boolean | null, settings?: boolean | null, backups?: boolean | null, stacks?: boolean | null } | null } | null } | null> | null } | null, stack?: { __typename?: 'InfrastructureStack', observableMetrics?: Array<{ __typename?: 'ObservableMetric', identifier: string, provider?: { __typename?: 'ObservabilityProvider', name: string, type: ObservabilityProviderType } | null } | null> | null } | null, configuration: { __typename?: 'StackConfiguration', version?: string | null, image?: string | null }, state?: { __typename?: 'StackState', id: string, plan?: string | null, state?: Array<{ __typename?: 'StackStateResource', name: string, resource: string, identifier: string, links?: Array<string | null> | null, configuration?: Record<string, unknown> | null } | null> | null } | null, repository?: { __typename?: 'GitRepository', id: string, url: string, health?: GitHealth | null, authMethod?: AuthMethod | null, editable?: boolean | null, error?: string | null, insertedAt?: string | null, pulledAt?: string | null, updatedAt?: string | null, urlFormat?: string | null, httpsPath?: string | null } | null, git: { __typename?: 'GitRef', files?: Array<string> | null, ref: string, folder: string }, pullRequest?: { __typename?: 'PullRequest', id: string, title?: string | null, url: string, labels?: Array<string | null> | null, creator?: string | null, status?: PrStatus | null, insertedAt?: string | null, updatedAt?: string | null, service?: { __typename?: 'ServiceDeployment', id: string, name: string, protect?: boolean | null, deletedAt?: string | null } | null, cluster?: { __typename?: 'Cluster', handle?: string | null, protect?: boolean | null, deletedAt?: string | null, version?: string | null, currentVersion?: string | null, id: string, name: string, self?: boolean | null, distro?: ClusterDistro | null, provider?: { __typename?: 'ClusterProvider', cloud: string } | null, upgradePlan?: { __typename?: 'ClusterUpgradePlan', compatibilities?: boolean | null, deprecations?: boolean | null, incompatibilities?: boolean | null } | null } | null } | null, output?: Array<{ __typename?: 'StackOutput', name: string, value: string, secret?: boolean | null } | null> | null, cluster?: { __typename?: 'Cluster', id: string, name: string, self?: boolean | null, distro?: ClusterDistro | null, provider?: { __typename?: 'ClusterProvider', cloud: string } | null, upgradePlan?: { __typename?: 'ClusterUpgradePlan', compatibilities?: boolean | null, deprecations?: boolean | null, incompatibilities?: boolean | null } | null } | null, environment?: Array<{ __typename?: 'StackEnvironment', name: string, value: string, secret?: boolean | null } | null> | null, errors?: Array<{ __typename?: 'ServiceError', source: string, message: string } | null> | null, files?: Array<{ __typename?: 'StackFile', path: string, content: string } | null> | null, jobSpec?: { __typename?: 'JobGateSpec', annotations?: Record<string, unknown> | null, labels?: Record<string, unknown> | null, namespace: string, raw?: string | null, serviceAccount?: string | null, containers?: Array<{ __typename?: 'ContainerSpec', args?: Array<string | null> | null, image: string, env?: Array<{ __typename?: 'ContainerEnv', name: string, value: string } | null> | null, envFrom?: Array<{ __typename?: 'ContainerEnvFrom', configMap: string, secret: string } | null> | null } | null> | null } | null, steps?: Array<{ __typename?: 'RunStep', id: string, name: string, insertedAt?: string | null, updatedAt?: string | null, status: StepStatus, stage: StepStage, args?: Array<string> | null, cmd: string, index: number, logs?: Array<{ __typename?: 'RunLogs', id: string, updatedAt?: string | null, insertedAt?: string | null, logs: string } | null> | null } | null> | null } | null };
+export type StackRunQuery = { __typename?: 'RootQueryType', stackRun?: { __typename?: 'StackRun', id: string, status: StackStatus, updatedAt?: string | null, insertedAt?: string | null, type: StackType, message?: string | null, approval?: boolean | null, approvedAt?: string | null, cancellationReason?: string | null, approver?: { __typename?: 'User', id: string, pluralId?: string | null, name: string, email: string, profile?: string | null, backgroundColor?: string | null, readTimestamp?: string | null, roles?: { __typename?: 'UserRoles', admin?: boolean | null } | null, personas?: Array<{ __typename?: 'Persona', id: string, name: string, description?: string | null, bindings?: Array<{ __typename?: 'PolicyBinding', id?: string | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null, group?: { __typename?: 'Group', id: string, name: string } | null } | null> | null, configuration?: { __typename?: 'PersonaConfiguration', all?: boolean | null, deployments?: { __typename?: 'PersonaDeployment', addOns?: boolean | null, clusters?: boolean | null, pipelines?: boolean | null, providers?: boolean | null, repositories?: boolean | null, services?: boolean | null } | null, home?: { __typename?: 'PersonaHome', manager?: boolean | null, security?: boolean | null } | null, sidebar?: { __typename?: 'PersonaSidebar', audits?: boolean | null, kubernetes?: boolean | null, pullRequests?: boolean | null, settings?: boolean | null, backups?: boolean | null, stacks?: boolean | null } | null } | null } | null> | null } | null, stack?: { __typename?: 'InfrastructureStack', name: string, observableMetrics?: Array<{ __typename?: 'ObservableMetric', identifier: string, provider?: { __typename?: 'ObservabilityProvider', name: string, type: ObservabilityProviderType } | null } | null> | null } | null, configuration: { __typename?: 'StackConfiguration', version?: string | null, image?: string | null }, state?: { __typename?: 'StackState', id: string, plan?: string | null, state?: Array<{ __typename?: 'StackStateResource', name: string, resource: string, identifier: string, links?: Array<string | null> | null, configuration?: Record<string, unknown> | null } | null> | null } | null, repository?: { __typename?: 'GitRepository', id: string, url: string, health?: GitHealth | null, authMethod?: AuthMethod | null, editable?: boolean | null, error?: string | null, insertedAt?: string | null, pulledAt?: string | null, updatedAt?: string | null, urlFormat?: string | null, httpsPath?: string | null } | null, git: { __typename?: 'GitRef', files?: Array<string> | null, ref: string, folder: string }, pullRequest?: { __typename?: 'PullRequest', id: string, title?: string | null, url: string, labels?: Array<string | null> | null, creator?: string | null, status?: PrStatus | null, insertedAt?: string | null, updatedAt?: string | null, service?: { __typename?: 'ServiceDeployment', id: string, name: string, protect?: boolean | null, deletedAt?: string | null } | null, cluster?: { __typename?: 'Cluster', handle?: string | null, protect?: boolean | null, deletedAt?: string | null, version?: string | null, currentVersion?: string | null, id: string, name: string, self?: boolean | null, distro?: ClusterDistro | null, provider?: { __typename?: 'ClusterProvider', cloud: string } | null, upgradePlan?: { __typename?: 'ClusterUpgradePlan', compatibilities?: boolean | null, deprecations?: boolean | null, incompatibilities?: boolean | null } | null } | null } | null, output?: Array<{ __typename?: 'StackOutput', name: string, value: string, secret?: boolean | null } | null> | null, cluster?: { __typename?: 'Cluster', id: string, name: string, self?: boolean | null, distro?: ClusterDistro | null, provider?: { __typename?: 'ClusterProvider', cloud: string } | null, upgradePlan?: { __typename?: 'ClusterUpgradePlan', compatibilities?: boolean | null, deprecations?: boolean | null, incompatibilities?: boolean | null } | null } | null, environment?: Array<{ __typename?: 'StackEnvironment', name: string, value: string, secret?: boolean | null } | null> | null, errors?: Array<{ __typename?: 'ServiceError', source: string, message: string } | null> | null, files?: Array<{ __typename?: 'StackFile', path: string, content: string } | null> | null, jobSpec?: { __typename?: 'JobGateSpec', annotations?: Record<string, unknown> | null, labels?: Record<string, unknown> | null, namespace: string, raw?: string | null, serviceAccount?: string | null, containers?: Array<{ __typename?: 'ContainerSpec', args?: Array<string | null> | null, image: string, env?: Array<{ __typename?: 'ContainerEnv', name: string, value: string } | null> | null, envFrom?: Array<{ __typename?: 'ContainerEnvFrom', configMap: string, secret: string } | null> | null } | null> | null } | null, steps?: Array<{ __typename?: 'RunStep', id: string, name: string, insertedAt?: string | null, updatedAt?: string | null, status: StepStatus, stage: StepStage, args?: Array<string> | null, cmd: string, index: number, logs?: Array<{ __typename?: 'RunLogs', id: string, updatedAt?: string | null, insertedAt?: string | null, logs: string } | null> | null } | null> | null } | null };
 
 export type StackRunJobQueryVariables = Exact<{
   id: Scalars['ID']['input'];
@@ -19934,6 +19934,7 @@ export const StackRunDocument = gql`
     }
     cancellationReason
     stack {
+      name
       observableMetrics {
         provider {
           name

assets/src/graph/stacks.graphql

@@ -311,6 +311,7 @@ query StackRun($id: ID!) {
     }
     cancellationReason
     stack {
+      name
       observableMetrics {
         provider {
           name