fix(dependencies): read a change request's features from its change sets

The API has no list of features by change request, and the change
request already says which features it changes. Features with no
prerequisite changes get no panel.

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

Author: talissoncosta

frontend/common/services/useFeatureDependency.ts

@@ -1,4 +1,3 @@
-import { FetchBaseQueryError } from '@reduxjs/toolkit/query'
 import { Req } from 'common/types/requests'
 import { Res } from 'common/types/responses'
 import { service } from 'common/service'
@@ -37,15 +36,6 @@ const dependencyUrl = (query: Req['createFeatureDependency']) =>
     query.changeRequestId,
   )
 
-// The API cannot list these yet, so the pending views report 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' },
@@ -134,14 +124,6 @@ export const featureDependencyService = service
           url: `environments/${query.environmentId}/features/${query.featureId}/dependents/`,
         }),
       }),
-      // Will be the features a change request stages dependencies for.
-      getFeatureIdsStaged: builder.query<
-        Res['featureIdsStaged'],
-        Req['getFeatureIdsStaged']
-      >({
-        providesTags: [{ id: 'PENDING', type: 'FeatureDependency' }],
-        queryFn: () => notListedYet,
-      }),
       // END OF ENDPOINTS
     }),
   })
@@ -209,7 +191,6 @@ export const {
   useDeleteFeatureDependencyMutation,
   useGetFeatureDependenciesQuery,
   useGetFeatureDependentsQuery,
-  useGetFeatureIdsStagedQuery,
   // END OF EXPORTS
 } = featureDependencyService
 

frontend/common/types/requests.ts

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

frontend/common/types/responses.ts

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

frontend/web/components/feature-dependencies/ChangeRequestDependencyChanges.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react'
-import { useGetFeatureDependenciesQuery } from 'common/services/useFeatureDependency'
-import { diffDependencies } from 'common/utils/diffDependencies'
 import DependencyChangesTable from './DependencyChangesTable'
+import { useDependencyChanges } from './useDependencyChanges'
 import ErrorMessage from 'components/ErrorMessage'
 
 type ChangeRequestDependencyChangesProps = {
@@ -11,30 +10,25 @@ type ChangeRequestDependencyChangesProps = {
   isEnabled?: (prerequisiteId: number) => boolean
 }
 
-// A feature's prerequisite changes in one change request: its dependencies
-// as if the change request were live, against today's.
 const ChangeRequestDependencyChanges: FC<
   ChangeRequestDependencyChangesProps
 > = ({ changeRequestId, environmentId, featureId, isEnabled }) => {
-  const live = useGetFeatureDependenciesQuery({ environmentId, featureId })
-  const scoped = useGetFeatureDependenciesQuery({
+  const { changes, isError, isLoading } = useDependencyChanges({
     changeRequestId,
     environmentId,
     featureId,
   })
 
-  if (live.isLoading || scoped.isLoading) {
+  if (isLoading) {
     return (
       <div className='text-center p-3'>
         <Loader />
       </div>
     )
   }
-  if (live.isError || scoped.isError || !live.data || !scoped.data) {
+  if (isError || !changes) {
     return <ErrorMessage error='Could not load the prerequisite changes.' />
   }
-
-  const changes = diffDependencies(live.data.results, scoped.data.results)
   if (!changes.length) {
     return (
       <p className='text-secondary px-3 py-2 mb-0'>No prerequisite changes.</p>

frontend/web/components/feature-dependencies/DiffDependencies.tsx

@@ -1,20 +1,36 @@
 import { FC } from 'react'
-import { useGetFeatureIdsStagedQuery } from 'common/services/useFeatureDependency'
+import { ChangeRequest } from 'common/types/responses'
 import { useGetProjectFlagQuery } from 'common/services/useProjectFlag'
 import { useFeatureStates } from 'common/hooks/useFeatureStates'
-import ChangeRequestDependencyChanges from './ChangeRequestDependencyChanges'
+import DependencyChangesTable from './DependencyChangesTable'
+import { useDependencyChanges } from './useDependencyChanges'
 import Panel from 'components/base/grid/Panel'
 import ErrorMessage from 'components/ErrorMessage'
 
 type DiffDependenciesProps = {
+  changeRequest: ChangeRequest
+  environmentId: string
+  projectId: string
+}
+
+type FeatureDependencyChangesProps = {
   changeRequestId: number
   environmentId: string
+  featureId: number
   projectId: string
 }
 
-const FeatureDependencyChanges: FC<
-  DiffDependenciesProps & { featureId: number }
-> = ({ changeRequestId, environmentId, featureId, projectId }) => {
+const FeatureDependencyChanges: FC<FeatureDependencyChangesProps> = ({
+  changeRequestId,
+  environmentId,
+  featureId,
+  projectId,
+}) => {
+  const { changes, isError } = useDependencyChanges({
+    changeRequestId,
+    environmentId,
+    featureId,
+  })
   const { data: feature } = useGetProjectFlagQuery({
     id: featureId,
     project: Number(projectId),
@@ -25,6 +41,16 @@ const FeatureDependencyChanges: FC<
     environmentId,
     projectId: Number(projectId),
   })
+
+  if (isError) {
+    return (
+      <div className='mt-4'>
+        <ErrorMessage error='Could not load the dependency changes in this change request.' />
+      </div>
+    )
+  }
+  // Most change sets only touch values or overrides, so no panel for those.
+  if (!changes?.length) return null
   return (
     <Panel
       title={`Dependencies${feature ? `: ${feature.name}` : ''}`}
@@ -34,10 +60,8 @@ const FeatureDependencyChanges: FC<
         Prerequisite changes in this request. Nothing changes until it is
         published.
       </p>
-      <ChangeRequestDependencyChanges
-        environmentId={environmentId}
-        featureId={featureId}
-        changeRequestId={changeRequestId}
+      <DependencyChangesTable
+        changes={changes}
         // Until the states are known, no column rather than every row "No".
         isEnabled={
           states.isLoading || states.isError ? undefined : states.isEnabled
@@ -47,29 +71,22 @@ const FeatureDependencyChanges: FC<
   )
 }
 
-// The prerequisite changes staged in a change request, per feature.
+// The prerequisite changes staged in a change request, per feature it
+// changes.
 const DiffDependencies: FC<DiffDependenciesProps> = ({
-  changeRequestId,
+  changeRequest,
   environmentId,
   projectId,
 }) => {
-  const { data: featureIds, isError } = useGetFeatureIdsStagedQuery({
-    changeRequestId,
-  })
-  // Otherwise a failed list reads as no dependency changes.
-  if (isError) {
-    return (
-      <div className='mt-4'>
-        <ErrorMessage error='Could not load the dependency changes in this change request.' />
-      </div>
-    )
-  }
+  const featureIds = [
+    ...new Set(changeRequest.change_sets?.map(({ feature }) => feature)),
+  ]
   return (
     <>
-      {featureIds?.map((featureId) => (
+      {featureIds.map((featureId) => (
         <FeatureDependencyChanges
           key={featureId}
-          changeRequestId={changeRequestId}
+          changeRequestId={changeRequest.id}
           environmentId={environmentId}
           featureId={featureId}
           projectId={projectId}

frontend/web/components/feature-dependencies/useDependencyChanges.ts

@@ -0,0 +1,33 @@
+import { useGetFeatureDependenciesQuery } from 'common/services/useFeatureDependency'
+import { diffDependencies } from 'common/utils/diffDependencies'
+
+type UseDependencyChangesArgs = {
+  environmentId: string
+  featureId: number
+  changeRequestId: number
+}
+
+// A feature's prerequisite changes in one change request: its dependencies
+// as if the change request were live, against today's.
+export const useDependencyChanges = ({
+  changeRequestId,
+  environmentId,
+  featureId,
+}: UseDependencyChangesArgs) => {
+  const live = useGetFeatureDependenciesQuery({ environmentId, featureId })
+  const scoped = useGetFeatureDependenciesQuery({
+    changeRequestId,
+    environmentId,
+    featureId,
+  })
+  const isError = live.isError || scoped.isError
+  const changes =
+    live.data && scoped.data
+      ? diffDependencies(live.data.results, scoped.data.results)
+      : undefined
+  return {
+    changes,
+    isError,
+    isLoading: !isError && !changes,
+  }
+}

frontend/web/components/pages/ChangeRequestDetailPage.tsx

@@ -412,7 +412,7 @@ const ChangeRequestDetailPage: FC<ChangeRequestPageType> = ({ match }) => {
               'flag_dependencies_change_requests',
             ) && (
               <DiffDependencies
-                changeRequestId={changeRequest.id}
+                changeRequest={changeRequest}
                 environmentId={environmentId}
                 projectId={projectId}
               />