Fernabache
commented
5 days ago 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
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
-
Install required dependencies:
npm install @radix-ui/react-dialog @radix-ui/react-select lucide-react -
Install shadcn/ui components:
npx shadcn-ui add dialog select button checkbox alert -
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
-
Install required dependencies:
npm install @radix-ui/react-dialog @radix-ui/react-select lucide-react -
Install shadcn/ui components:
npx shadcn-ui add dialog select button checkbox alert -
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
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
Additional Context
No response
FLI-709