feat(dependencies): stage dependency changes in a change request

Where an environment requires change requests, the Dependencies tab holds
adds and removes until a change request is created, then stages each one in
it. If any is refused, the change request is deleted and the refused row is
marked. Environments on v1 feature versioning get a read-only tab. As the
API refuses an empty change request, it carries the feature's current value
unchanged.

Gated behind flag_dependencies_change_requests.

Refs #8450

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

Author: talissoncosta

frontend/web/components/modals/create-feature/index.tsx

@@ -460,12 +460,13 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
     controlValue < 0
   const isVersionedChangeRequest = existingChangeRequest && isVersioned
   const hideIdentityOverridesTab = Utils.getShouldHideIdentityOverridesTab()
-  // Change requests are out of scope for the first version, so the tab stays
-  // hidden where they are enforced. See #8428.
+  // Where change requests are enforced, the tab waits on its own flag while the
+  // API for staging dependencies (#8449) is faked.
   const isDependenciesTabEnabled =
     Utils.getFlagsmithHasFeature('flag_dependencies') &&
     !existingChangeRequest &&
-    !is4Eyes
+    (!is4Eyes ||
+      Utils.getFlagsmithHasFeature('flag_dependencies_change_requests'))
 
   let regexValid = true
   try {
@@ -835,6 +836,8 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
                         environmentName={environmentName}
                         projectId={projectId}
                         projectFlag={projectFlag}
+                        requiresChangeRequests={is4Eyes}
+                        isVersioned={isVersioned}
                         onSelectFeature={(featureId) => {
                           // The features list, never the current page: it
                           // owns the deep link and hydrates an off-page

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

@@ -0,0 +1,30 @@
+import { FC } from 'react'
+import Button from 'components/base/forms/Button'
+
+type ChangeRequestFooterProps = {
+  count: number
+  isSubmitting: boolean
+  onCreate: () => void
+  onDiscard: () => void
+}
+
+const ChangeRequestFooter: FC<ChangeRequestFooterProps> = ({
+  count,
+  isSubmitting,
+  onCreate,
+  onDiscard,
+}) => (
+  <div className='d-flex align-items-center gap-2 mt-3'>
+    <span className='text-secondary me-auto'>
+      {count} {count === 1 ? 'change' : 'changes'} staged
+    </span>
+    <Button theme='secondary' onClick={onDiscard} disabled={isSubmitting}>
+      Discard changes
+    </Button>
+    <Button onClick={onCreate} isLoading={isSubmitting} disabled={isSubmitting}>
+      Create Change Request
+    </Button>
+  </div>
+)
+
+export default ChangeRequestFooter

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

@@ -0,0 +1,51 @@
+import { FC } from 'react'
+import Banner from 'components/base/Banner'
+import Button from 'components/base/forms/Button'
+import { DependenciesMode } from './dependenciesMode'
+
+type ChangeRequestNoticeProps = {
+  mode: DependenciesMode
+  environmentId: string
+  environmentName: string
+  projectId: number
+}
+
+const ChangeRequestNotice: FC<ChangeRequestNoticeProps> = ({
+  environmentId,
+  environmentName,
+  mode,
+  projectId,
+}) => {
+  if (mode === 'changeRequest') {
+    return (
+      <Banner className='mb-3'>
+        {environmentName} requires change requests. Dependency changes are
+        staged here and go live when the change request is published.
+      </Banner>
+    )
+  }
+  if (mode === 'readOnly') {
+    return (
+      <Banner
+        type='warning'
+        className='mb-3'
+        title={`Read only in ${environmentName}`}
+        action={
+          <Button
+            theme='outline'
+            size='small'
+            href={`/project/${projectId}/environment/${environmentId}/settings`}
+          >
+            Enable feature versioning
+          </Button>
+        }
+      >
+        Dependency changes need feature versioning to go through a change
+        request.
+      </Banner>
+    )
+  }
+  return null
+}
+
+export default ChangeRequestNotice

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

@@ -17,7 +17,12 @@ import DependentFeatures from './DependentFeatures'
 import FeatureDependenciesSkeleton from './FeatureDependenciesSkeleton'
 import PrerequisitesTable from './PrerequisitesTable'
 import { PrerequisitesEmptyState } from './DependenciesEmptyStates'
+import ChangeRequestFooter from './ChangeRequestFooter'
+import ChangeRequestNotice from './ChangeRequestNotice'
+import { getDependenciesMode } from './dependenciesMode'
+import { withStagedChanges } from './prerequisiteState'
 import { usePrerequisites } from './hooks/usePrerequisites'
+import { useStagedPrerequisites } from './hooks/useStagedPrerequisites'
 
 // Flag dependencies have no docs page of their own yet, so this points at the
 // nearest one that exists.
@@ -29,30 +34,44 @@ type FeatureDependenciesTabProps = {
   environmentName: string
   projectId: number
   projectFlag: ProjectFlag
+  requiresChangeRequests: boolean
+  isVersioned: boolean
   // Opens another feature's modal on this tab.
   onSelectFeature: (featureId: number) => void
 }
 
 const FeatureDependenciesTab: FC<FeatureDependenciesTabProps> = ({
   environmentId,
   environmentName,
+  isVersioned,
   onSelectFeature,
   projectFlag,
   projectId,
+  requiresChangeRequests,
 }) => {
-  const { isLoading: isLoadingPermission, permission: canManage } =
-    useHasPermission({
-      id: environmentId,
-      level: 'environment',
-      permission: EnvironmentPermission.MANAGE_SEGMENT_OVERRIDES,
-    })
+  const mode = getDependenciesMode(requiresChangeRequests, isVersioned)
+  const isChangeRequest = mode === 'changeRequest'
+  const { isLoading: isLoadingPermission, permission } = useHasPermission({
+    id: environmentId,
+    level: 'environment',
+    permission: isChangeRequest
+      ? EnvironmentPermission.CREATE_CHANGE_REQUEST
+      : EnvironmentPermission.MANAGE_SEGMENT_OVERRIDES,
+  })
+  const canManage = permission && mode !== 'readOnly'
+  const staging = useStagedPrerequisites({
+    environmentId,
+    projectFlag,
+    projectId,
+  })
 
   const {
     addingName,
     conflict,
     dependentEdges,
     flashedId,
     isCreating,
+    isEnabled,
     isError,
     isLoading,
     isOpenForAdding,
@@ -80,6 +99,16 @@ const FeatureDependenciesTab: FC<FeatureDependenciesTabProps> = ({
     return <ErrorMessage error="Could not load this feature's dependencies." />
   }
 
+  const shownRows = isChangeRequest
+    ? withStagedChanges(rows, staging.staged, projectFlag.id, isEnabled)
+    : rows
+  const handleAdd = isChangeRequest
+    ? (feature: ProjectFlag) => {
+        staging.add(feature)
+        onAddingChange(false)
+      }
+    : onAdd
+
   return (
     <div>
       <div className='d-flex align-items-center gap-1 mb-2'>
@@ -107,19 +136,28 @@ const FeatureDependenciesTab: FC<FeatureDependenciesTabProps> = ({
         </div>
       )}
 
+      <ChangeRequestNotice
+        mode={mode}
+        environmentId={environmentId}
+        environmentName={environmentName}
+        projectId={projectId}
+      />
+
       {/* addingName too: on a first add the picker has closed and no row has
           arrived yet, and the empty state would take the pending row's place. */}
-      {rows.length || isOpenForAdding || addingName ? (
+      {shownRows.length || isOpenForAdding || addingName ? (
         <>
           <BlockedBanner environmentName={environmentName} rows={rows} />
           <DependenciesPanel>
             <PrerequisitesTable
-              rows={rows}
+              rows={shownRows}
               canManage={canManage}
               flashedId={flashedId}
               addingName={addingName}
               isRemoving={removingId}
-              onRemove={onRemove}
+              refusedId={staging.error?.prerequisiteId}
+              onRemove={isChangeRequest ? staging.remove : onRemove}
+              onUndo={(edge) => staging.undo(edge.prerequisite.id)}
               onSelect={(edge) => onSelectFeature(edge.prerequisite.id)}
               addControl={
                 isOpenForAdding && (
@@ -132,9 +170,9 @@ const FeatureDependenciesTab: FC<FeatureDependenciesTabProps> = ({
                     // list.
                     ignore={[
                       projectFlag.id,
-                      ...rows.map((row) => row.edge.prerequisite.id),
+                      ...shownRows.map((row) => row.edge.prerequisite.id),
                     ]}
-                    onChange={onAdd}
+                    onChange={handleAdd}
                   />
                 )
               }
@@ -159,6 +197,16 @@ const FeatureDependenciesTab: FC<FeatureDependenciesTabProps> = ({
         </Banner>
       )}
 
+      {!!staging.error && (
+        <Banner
+          type='error'
+          className='mt-3'
+          title='The change request was not created'
+        >
+          {staging.error.message}
+        </Banner>
+      )}
+
       {!isPrerequisite && canManage && !isOpenForAdding && (
         <Button
           theme='outline'
@@ -170,6 +218,15 @@ const FeatureDependenciesTab: FC<FeatureDependenciesTabProps> = ({
         </Button>
       )}
 
+      {isChangeRequest && !!staging.staged.length && (
+        <ChangeRequestFooter
+          count={staging.staged.length}
+          isSubmitting={staging.isSubmitting}
+          onCreate={staging.openChangeRequest}
+          onDiscard={staging.discard}
+        />
+      )}
+
       <ModalHR className='mt-4' />
 
       <DependentFeatures

frontend/web/components/modals/create-feature/tabs/FeatureDependenciesTab/PrerequisitesTable/PrerequisitesTable.scss

@@ -15,6 +15,30 @@
   background: var(--color-surface-muted);
 }
 
+// A button only shrinks below its text with a min width.
+.prerequisite-name > .btn {
+  min-width: 0;
+}
+
+.prerequisite-name__text {
+  min-width: 0;
+}
+
+// Held for a change request: still listed, but on its way out. On the inner
+// span, as .btn-link clears text-decoration with !important.
+.prerequisite-row--staged-remove .prerequisite-name .btn-link {
+  color: var(--color-text-secondary);
+}
+
+.prerequisite-row--staged-remove .prerequisite-name__text {
+  text-decoration: line-through;
+}
+
+// On the cell, as with the input row, so hover does not replace it.
+.prerequisite-row--refused td {
+  background: var(--color-surface-danger);
+}
+
 // The select needs permission to shrink or it pushes the row past the panel.
 .prerequisite-add-control > :first-child {
   flex: 1 1 auto;