[FLI-709] Allow copying rollouts and linked segments when using "Copy to Namespace" on rules

[phenax]

Problem

A lot of the times, the rules set up on one namespace are meant to be the same in the other. So when you try to copy a rule between namespaces, you have to re-create all the rules and copy all the linked segments manually.

Ideal Solution

It'd be nice to have an option while copying to namespace to copy all it's rollouts and linked segments over as well. Maybe in the form of a checkbox inside the "Copy Flag" modal.

Search

• [X] I searched for other open and closed issues before opening this

Additional Context

No response

_FLI-709

[Fernabache]

Enhanced Flag Copy with Linked Resources Enhance the flag copying functionality by allowing users to copy a feature flag across namespaces while preserving its associated rollouts and linked segments. This streamlines the process of maintaining consistent configurations across different environments. Copy feature flags along with their associated rollouts and segments Choose which associated resources to include UI indicators for copying progress and resource counts Warnings about potential configuration overrides Prevents invalid copying operations

First npx shadcn-ui add dialog select button checkbox alert

Import and use the component: import CopyFlagModal from './CopyFlagModal';

// In your parent component <CopyFlagModal />

Implement the actual API calls in the handleCopy function.

Enhanced Flag Copy with Linked Resources

This feature enhances the flag copying functionality by allowing users to copy a feature flag across namespaces while preserving its associated rollouts and linked segments. This streamlines the process of maintaining consistent configurations across different environments.

Key Features

• Bulk Resource Copy: Copy feature flags along with their associated rollouts and segments
• Selective Copy Options: Choose which associated resources to include
• Clear Visual Feedback: UI indicators for copying progress and resource counts
• Safety Measures: Warnings about potential configuration overrides
• Namespace Validation: Prevents invalid copying operations

Implementation Details

UI Components The feature is implemented as a modal dialog using shadcn/ui components, providing a clean and accessible interface:

<Dialog>
  <DialogContent>
    {/* Namespace selection */}
    {/* Resource inclusion checkboxes */}
    {/* Warning alerts */}
  </DialogContent>
</Dialog>

Required Dependencies

• React 18+
• shadcn/ui components:
  • Dialog
  • Select
  • Button
  • Checkbox
  • Alert
• Lucide React icons

Installation

1. Install required dependencies:

npm install @radix-ui/react-dialog @radix-ui/react-select lucide-react

2. Install shadcn/ui components:

npx shadcn-ui add dialog select button checkbox alert

3. Import the component:

import CopyFlagModal from './components/CopyFlagModal';

Usage

// Basic usage
<CopyFlagModal />

// With custom configuration
<CopyFlagModal 
  sourceFlag={flagData}
  onCopyComplete={handleCopyComplete}
/>

Example Payload

When copying a flag with its resources, the following structure is used:

{
  sourceFlag: "new-checkout-flow",
  sourceNamespace: "production",
  targetNamespace: "staging",
  includeRollouts: true,
  includeSegments: true
}

Considerations

• Copying linked resources will override any existing configurations in the target namespace
• All segments referenced by the flag's rules will be copied if selected
• Rollout percentages are preserved in the target namespace
• Namespace-specific variables are automatically adjusted during copy

Contributing Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

Future Improvements

• [ ] Add partial selection of rollouts and segments
• [ ] Implement preview mode for copying operations
• [ ] Add validation for namespace compatibility
• [ ] Include rollback functionality
• [ ] Add support for copying scheduled changes

Implementation Details

UI Components The feature is implemented as a modal dialog using shadcn/ui components, providing a clean and accessible interface:

<Dialog>
  <DialogContent>
    {/* Namespace selection */}
    {/* Resource inclusion checkboxes */}
    {/* Warning alerts */}
  </DialogContent>
</Dialog>

Required Dependencies

• React 18+
• shadcn/ui components:
  • Dialog
  • Select
  • Button
  • Checkbox
  • Alert
• Lucide React icons

Installation

1. Install required dependencies:

npm install @radix-ui/react-dialog @radix-ui/react-select lucide-react

2. Install shadcn/ui components:

npx shadcn-ui add dialog select button checkbox alert

3. Import the component:

import CopyFlagModal from './components/CopyFlagModal';

Usage

// Basic usage
<CopyFlagModal />

// With custom configuration
<CopyFlagModal 
  sourceFlag={flagData}
  onCopyComplete={handleCopyComplete}
/>

Example Payload When copying a flag with its resources, the following structure is used:

{
  sourceFlag: "new-checkout-flow",
  sourceNamespace: "production",
  targetNamespace: "staging",
  includeRollouts: true,
  includeSegments: true
}

Considerations

• Copying linked resources will override any existing configurations in the target namespace
• All segments referenced by the flag's rules will be copied if selected
• Rollout percentages are preserved in the target namespace
• Namespace-specific variables are automatically adjusted during copy

Contributing Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

Future Improvements

• [ ] Add partial selection of rollouts and segments
• [ ] Implement preview mode for copying operations
• [ ] Add validation for namespace compatibility
• [ ] Include rollback functionality
• [ ] Add support for copying scheduled changes