feat: add UI support for flag metadata

ui/.gitignore

@@ -27,4 +27,5 @@ dist-ssr
 /playwright/.cache/
 .packagehash
 /screenshots/
-.env
+.env
+coverage

ui/src/app/console/Console.tsx

@@ -12,7 +12,7 @@ import { useListAuthProvidersQuery } from '~/app/auth/authApi';
 import { useListFlagsQuery } from '~/app/flags/flagsApi';
 import { selectCurrentNamespace } from '~/app/namespaces/namespacesSlice';
 import { selectCurrentRef } from '~/app/refs/refsSlice';
-import { ContextEditor } from '~/components/console/ContextEditor';
+import { JsonEditor } from '~/components/json/JsonEditor';
 import EmptyState from '~/components/EmptyState';
 import { Button } from '~/components/ui/button';
 import Combobox from '~/components/forms/Combobox';
@@ -286,8 +286,9 @@ export default function Console() {
                             Request Context
                           </label>
                           <div className="mt-1 text-sm">
-                            <ContextEditor
+                            <JsonEditor
                               id="context"
+                              value={formik.values.context}
                               setValue={(v) => {
                                 formik.setFieldValue('context', v);
                               }}

ui/src/app/flags/flagsApi.ts

@@ -91,9 +91,9 @@ export const flagsApi = createApi({
       { namespaceKey: string; flagKey: string; values: IFlagBase }
     >({
       query({ namespaceKey, flagKey, values }) {
-        // create new object 'values' to remap defaultVariant to defaultVariantId
         const update = {
           defaultVariantId: values.defaultVariant?.id || null,
+          metadata: values.metadata || [],
           ...values
         };
         delete update.defaultVariant;

ui/src/components/flags/forms/FlagForm.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon, ClipboardDocumentIcon } from '@heroicons/react/20/solid';
+import { CheckIcon, ClipboardDocumentIcon } from '@heroicons/react/24/outline';
 import { Form, Formik } from 'formik';
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -14,6 +14,7 @@ import Button from '~/components/forms/buttons/Button';
 import Input from '~/components/forms/Input';
 import Toggle from '~/components/forms/Toggle';
 import Loading from '~/components/Loading';
+import { MetadataForm } from '~/components/flags/forms/MetadataForm';
 import { useError } from '~/data/hooks/error';
 import { useSuccess } from '~/data/hooks/success';
 import { keyValidation, requiredValidation } from '~/data/validations';
@@ -37,7 +38,8 @@ const flagTypes = [
 
 const flagValidationSchema = Yup.object({
   key: keyValidation,
-  name: requiredValidation
+  name: requiredValidation,
+  metadata: Yup.object()
 });
 
 export default function FlagForm(props: { flag?: IFlag }) {
@@ -61,14 +63,14 @@ export default function FlagForm(props: { flag?: IFlag }) {
     if (isNew) {
       return createFlag({
         namespaceKey: namespace.key,
-        values: values
+        values
       }).unwrap();
     }
 
     return updateFlag({
       namespaceKey: namespace.key,
       flagKey: flag?.key,
-      values: values
+      values
     }).unwrap();
   };
 
@@ -78,7 +80,8 @@ export default function FlagForm(props: { flag?: IFlag }) {
     description: flag?.description || '',
     type: flag?.type || FlagType.VARIANT,
     enabled: flag?.enabled || false,
-    defaultVariant: flag?.defaultVariant
+    defaultVariant: flag?.defaultVariant,
+    metadata: flag?.metadata || {}
   };
 
   const [keyCopied, setKeyCopied] = useState(false);
@@ -285,6 +288,31 @@ export default function FlagForm(props: { flag?: IFlag }) {
                     disabled={readOnly}
                   />
                 </div>
+                <div className="col-span-3">
+                  <div className="flex justify-between">
+                    <label
+                      htmlFor="metadata"
+                      className="block text-sm font-medium text-gray-700"
+                    >
+                      Metadata
+                    </label>
+                    <span
+                      className="text-xs text-gray-500"
+                      id="metadata-optional"
+                    >
+                      Optional
+                    </span>
+                  </div>
+                  <div className="mt-1">
+                    <MetadataForm
+                      metadata={formik.values.metadata}
+                      onChange={(metadata) =>
+                        formik.setFieldValue('metadata', metadata)
+                      }
+                      disabled={readOnly}
+                    />
+                  </div>
+                </div>
               </div>
               <div className="flex justify-end">
                 <Button type="button" onClick={() => navigate(-1)}>