feat(dependencies): show dependency changes pending in change requests

Brings back the feature tab's pending section, split out of #8716 while
the API's way to list change requests by feature is discussed.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: talissoncosta

frontend/common/services/useFeatureDependency.ts

@@ -1,3 +1,4 @@
+import { FetchBaseQueryError } from '@reduxjs/toolkit/query'
 import { Req } from 'common/types/requests'
 import { Res } from 'common/types/responses'
 import { service } from 'common/service'
@@ -36,6 +37,15 @@ const dependencyUrl = (query: Req['createFeatureDependency']) =>
     query.changeRequestId,
   )
 
+// The API cannot list these yet, so the pending section reports an error
+// rather than claim nothing is pending.
+const notListedYet: { error: FetchBaseQueryError } = {
+  error: {
+    error: 'The API does not list staged dependencies yet.',
+    status: 'CUSTOM_ERROR',
+  },
+}
+
 const pendingTags = (featureId: number): DependencyTag[] => [
   { id: `PENDING-${featureId}`, type: 'FeatureDependency' },
   { id: 'PENDING', type: 'FeatureDependency' },
@@ -99,6 +109,14 @@ export const featureDependencyService = service
           url: dependencyUrl(query),
         }),
       }),
+      // Will be the change requests listed by feature.
+      getChangeRequestIdsStaging: builder.query<
+        Res['changeRequestIdsStaging'],
+        Req['getChangeRequestIdsStaging']
+      >({
+        providesTags: (res, err, query) => pendingTags(query.featureId),
+        queryFn: () => notListedYet,
+      }),
       getFeatureDependencies: builder.query<
         Res['featureDependencies'],
         Req['getFeatureDependencies']
@@ -189,6 +207,7 @@ export async function getFeatureDependents(
 export const {
   useCreateFeatureDependencyMutation,
   useDeleteFeatureDependencyMutation,
+  useGetChangeRequestIdsStagingQuery,
   useGetFeatureDependenciesQuery,
   useGetFeatureDependentsQuery,
   // END OF EXPORTS

frontend/common/types/requests.ts

@@ -908,6 +908,7 @@ export type Req = {
     approvals: Approval[]
   }
   deleteChangeRequest: { id: number }
+  getChangeRequestIdsStaging: { featureId: number }
   getSamlConfiguration: { name: string }
   getSamlConfigurations: { organisation_id: number }
   getSamlConfigurationMetadata: { name: string }

frontend/common/types/responses.ts

@@ -1627,6 +1627,7 @@ export type Res = {
   featureDependencies: { results: DependencyEdge[] }
   featureDependents: { results: DependencyEdge[] }
   featureDependency: DependencyEdge
+  changeRequestIdsStaging: number[]
   featureVersions: PagedResponse<FeatureVersion>
   users: User[]
   enableFeatureVersioning: { id: string }

frontend/documentation/components/Chip.stories.tsx

@@ -28,6 +28,10 @@ export const Accent: Story = {
   args: { children: '"hello"', variant: 'accent' },
 }
 
+export const Warning: Story = {
+  args: { children: 'Awaiting approval', variant: 'warning' },
+}
+
 export const Sizes: Story = {
   render: () => (
     <div className='d-flex align-items-center gap-2'>

frontend/web/components/base/Chip/Chip.scss

@@ -13,6 +13,10 @@
     border-color: var(--color-border-action);
   }
 
+  &--warning {
+    border-color: var(--color-border-warning);
+  }
+
   // Sizes (default is the base above).
   &--sm {
     padding: 3px 8px;

frontend/web/components/base/Chip/Chip.tsx

@@ -5,7 +5,7 @@ import { colorIconSecondary } from 'common/theme/tokens'
 import './Chip.scss'
 
 export type ChipSize = 'default' | 'sm' | 'xs'
-export type ChipVariant = 'neutral' | 'accent'
+export type ChipVariant = 'neutral' | 'accent' | 'warning'
 
 export type ChipProps = {
   children: ReactNode
@@ -31,6 +31,7 @@ export type ChipProps = {
 const VARIANT_UTILITIES: Record<ChipVariant, string> = {
   accent: 'bg-surface-action-subtle text-action',
   neutral: 'bg-surface-subtle text-default',
+  warning: 'bg-surface-warning text-warning',
 }
 
 // Token-based chip primitive. Uses `ds-chip` rather than the legacy `.chip`
@@ -61,7 +62,7 @@ const Chip = ({
         'ds-chip d-inline-flex align-items-center align-middle gap-1 rounded-sm',
         VARIANT_UTILITIES[variant],
         {
-          'ds-chip--accent': variant === 'accent',
+          [`ds-chip--${variant}`]: variant !== 'neutral',
           'ds-chip--clickable': interactive,
           [`ds-chip--${size}`]: size !== 'default',
           'ds-chip--truncate': truncate,

frontend/web/components/modals/create-feature/tabs/FeatureDependenciesTab/FeatureDependenciesTab.tsx

@@ -16,6 +16,7 @@ import ChangeRequestFooter from './ChangeRequestFooter'
 import ChangeRequestNotice from './ChangeRequestNotice'
 import DependenciesHeader from './DependenciesHeader'
 import PrerequisitePicker from './PrerequisitePicker'
+import PendingChangeRequests from './PendingChangeRequests'
 import { getDependenciesMode } from './dependenciesMode'
 import { withStagedChanges } from './prerequisiteState'
 import { usePrerequisites } from './hooks/usePrerequisites'
@@ -209,6 +210,15 @@ const FeatureDependenciesTab: FC<FeatureDependenciesTabProps> = ({
         />
       )}
 
+      {isChangeRequest && (
+        <PendingChangeRequests
+          environmentId={environmentId}
+          featureId={projectFlag.id}
+          isEnabled={isEnabled}
+          projectId={projectId}
+        />
+      )}
+
       <ModalHR className='mt-4' />
 
       <DependentFeatures

frontend/web/components/modals/create-feature/tabs/FeatureDependenciesTab/PendingChangeRequests/PendingChangeRequests.tsx

@@ -0,0 +1,110 @@
+import { FC } from 'react'
+import { ChangeRequestSummary } from 'common/types/responses'
+import Accordion from 'components/base/Accordion'
+import ChangeRequestLink from 'components/modals/create-feature/tabs/FeatureDependenciesTab/ChangeRequestLink'
+import Chip from 'components/base/Chip'
+import Icon from 'components/icons/Icon'
+import { colorIconSecondary } from 'common/theme/tokens'
+import ErrorMessage from 'components/ErrorMessage'
+import ChangeRequestDependencyChanges from 'components/feature-dependencies/ChangeRequestDependencyChanges'
+import {
+  describeStatus,
+  isScheduled,
+} from 'components/modals/create-feature/tabs/FeatureDependenciesTab/pendingChangeRequestState'
+import { usePendingChangeRequests } from 'components/modals/create-feature/tabs/FeatureDependenciesTab/hooks/usePendingChangeRequests'
+
+type PendingChangeRequestsProps = {
+  environmentId: string
+  featureId: number
+  projectId: number
+  isEnabled: (prerequisiteId: number) => boolean
+}
+
+// Changes to this feature's prerequisites that are waiting in open or
+// scheduled change requests, one group per change request.
+const PendingChangeRequests: FC<PendingChangeRequestsProps> = ({
+  environmentId,
+  featureId,
+  isEnabled,
+  projectId,
+}) => {
+  const { changeRequests: groups, isError } = usePendingChangeRequests({
+    environmentId,
+    featureId,
+  })
+
+  if (isError) {
+    return (
+      <ErrorMessage error='Could not load the change requests waiting on this feature.' />
+    )
+  }
+
+  if (!groups.length) return null
+
+  return (
+    <div className='mt-4'>
+      <h6 className='mb-1'>Pending in change requests</h6>
+      <p className='text-secondary mb-3'>
+        Not live yet. These go live when their change request is published.
+      </p>
+      <div className='d-flex flex-column gap-3'>
+        {groups.map((changeRequest) => (
+          <Accordion
+            key={changeRequest.id}
+            defaultOpen
+            flush
+            title={
+              <>
+                <Icon
+                  name='request'
+                  width={16}
+                  fill={colorIconSecondary}
+                  aria-hidden
+                />
+                #{changeRequest.id} {changeRequest.title}
+                <StatusChip
+                  className='ms-auto flex-shrink-0'
+                  changeRequest={changeRequest}
+                />
+              </>
+            }
+          >
+            <ChangeRequestDependencyChanges
+              environmentId={environmentId}
+              featureId={featureId}
+              changeRequestId={changeRequest.id}
+              isEnabled={isEnabled}
+            />
+            {/* In the body, as the header is the toggle and a link cannot
+                sit inside a button. */}
+            <div className='px-3 py-2'>
+              <ChangeRequestLink
+                projectId={projectId}
+                environmentId={environmentId}
+                changeRequestId={changeRequest.id}
+              >
+                View change request
+              </ChangeRequestLink>
+            </div>
+          </Accordion>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// Waiting on people reads as a warning; a scheduled change only needs time.
+const StatusChip: FC<{
+  changeRequest: ChangeRequestSummary
+  className?: string
+}> = ({ changeRequest, className }) => (
+  <Chip
+    className={className}
+    size='xs'
+    variant={isScheduled(changeRequest) ? undefined : 'warning'}
+  >
+    {describeStatus(changeRequest)}
+  </Chip>
+)
+
+export default PendingChangeRequests

frontend/web/components/modals/create-feature/tabs/FeatureDependenciesTab/PendingChangeRequests/index.ts

@@ -0,0 +1 @@
+export { default } from './PendingChangeRequests'

frontend/web/components/modals/create-feature/tabs/FeatureDependenciesTab/__tests__/pendingChangeRequestState.test.ts

@@ -0,0 +1,37 @@
+import { ChangeRequestSummary } from 'common/types/responses'
+import { describeStatus } from 'components/modals/create-feature/tabs/FeatureDependenciesTab/pendingChangeRequestState'
+
+const changeRequest = (
+  id: number,
+  fields: Partial<ChangeRequestSummary> = {},
+): ChangeRequestSummary => ({
+  committed_at: null,
+  committed_by: null,
+  created_at: '2026-10-13T09:00:00Z',
+  deleted_at: null,
+  description: '',
+  id,
+  live_from: null,
+  readOnly: false,
+  title: 'Add prerequisites',
+  updated_at: '2026-10-13T09:00:00Z',
+  user: 1,
+  ...fields,
+})
+
+describe('describeStatus', () => {
+  it('reads an approved change request with a live date as scheduled', () => {
+    expect(
+      describeStatus(
+        changeRequest(1, {
+          committed_at: '2026-10-13T10:00:00Z',
+          live_from: '2026-10-20T09:30:00Z',
+        }),
+      ),
+    ).toMatch(/^Scheduled for 20 Oct, /)
+  })
+
+  it('reads anything else as awaiting approval', () => {
+    expect(describeStatus(changeRequest(1))).toBe('Awaiting approval')
+  })
+})