feat: add UI support for flag metadata#3717
Conversation
- Add IFlagMetadata interface to Flag.ts - Create MetadataForm component with CRUD operations - Add validation using Yup schema - Use Radix UI components for accessibility - Style with TailwindCSS - Install required type declarations Co-Authored-By: Mark Phelps <[email protected]>
- Add metadata field to flag form - Update validation schema for metadata - Follow existing styling patterns - Add proper TypeScript types Co-Authored-By: Mark Phelps <[email protected]>
- Ensure metadata is preserved in updateFlag mutation - Preserve metadata when copying flags - Add proper TypeScript types for metadata handling Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]> Signed-off-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Co-Authored-By: Mark Phelps <[email protected]>
Signed-off-by: Mark Phelps <[email protected]>
Signed-off-by: Mark Phelps <[email protected]>
Signed-off-by: Mark Phelps <[email protected]>
|
The object could be included in the metadata. This is an example what people have https://discord.com/channels/960634591000014878/1309109822657921034/1309120286142107668. |
Signed-off-by: Mark Phelps <[email protected]>
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #3717 +/- ##
=======================================
Coverage 64.84% 64.84%
=======================================
Files 171 171
Lines 17391 17391
=======================================
Hits 11277 11277
Misses 5418 5418
Partials 696 696
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
Signed-off-by: Mark Phelps <[email protected]>
Signed-off-by: Mark Phelps <[email protected]>
Signed-off-by: Mark Phelps <[email protected]>
im updating it to support nested objects and other types such as arrays |
Signed-off-by: Mark Phelps <[email protected]>
Signed-off-by: Mark Phelps <[email protected]>
Signed-off-by: Mark Phelps <[email protected]>
Signed-off-by: Mark Phelps <[email protected]>
Signed-off-by: Mark Phelps <[email protected]>
|
Great work @markphelps. I think we have a very strict rules for keys right npw. Probably many people would like to use |
Signed-off-by: Mark Phelps <[email protected]>
Signed-off-by: Mark Phelps <[email protected]>
Cheers @erka ! I went ahead and reverted the change to the
|
Signed-off-by: Mark Phelps <[email protected]>
…lipt-io/flipt into devin/1733937099-flag-metadata * 'devin/1733937099-flag-metadata' of https://github.com/flipt-io/flipt: refactor(ui): replace headlessui Switch with radix-ui (#3774)
Signed-off-by: Mark Phelps <[email protected]>
2 participants
Implements UI components for flag metadata CRUD operations.
Closes #2682
Link to Devin run: https://app.devin.ai/sessions/d62abd8bc3cb467dba175d847f5b8f07
Metadata entries can be of type
primitive, array, or object.If array or object we render the JSONEditor.
If primitive the user selects a subtype of 'string, number, or boolean'
Handling Errors
If there is an error rendering the
MetadataFormwe use an ErrorBoundary to render a more simplified version of the metadata which just uses theJSONEditorcomponent:TODO
Robot Summary
This pull request introduces several changes across multiple files to enhance the handling of JSON editors, metadata in flags, and to update dependencies. The most significant changes include renaming and updating the JSON editor component, adding metadata support to flags, and updating test cases to reflect these changes.
JSON Editor Updates:
ContextEditortoJsonEditorand updated its implementation to support additional props such asvalue,disabled,strict, andheight. The linter function was also updated to handle strict mode. (ui/src/components/json/JsonEditor.tsx,ui/src/components/json/JsonEditor.module.css,ui/src/components/json/lint.ts) [1] [2] [3] [4] [5]Metadata Support in Flags:
FlagFormcomponent, including validation and UI changes to handle metadata input. (ui/src/components/flags/forms/FlagForm.tsx,ui/src/app/flags/flagsApi.ts,ui/src/types/Flag.ts) [1] [2] [3] [4] [5] [6] [7]Test Case Updates:
ui/tests/flags.spec.ts) [1] [2]Dependency Updates:
go.work.sum. (go.work.sum)Miscellaneous:
coverageto the.gitignorefile to exclude coverage reports from version control. (ui/.gitignore)table-skeleton.tsxand updated a helper function inhelpers.ts. (ui/src/components/ui/table-skeleton.tsx,ui/src/utils/helpers.ts) [1] [2]