feat(schema-registry): improve schema metadata UI

- Add Properties subheading under Metadata section
- Display metadata properties in a table format
- Load existing metadata when adding new schema version
- Fix version selection to show latest after creating new version
- Invalidate React Query cache after schema creation

Author: c-julin

frontend/src/components/pages/schemas/schema-create.tsx

@@ -23,8 +23,10 @@ import {
   IconButton,
   Input,
   RadioGroup,
+  Text,
   useToast,
 } from '@redpanda-data/ui';
+import { useQueryClient } from '@tanstack/react-query';
 import { TrashIcon } from 'components/icons';
 import { InfoIcon } from 'lucide-react';
 import { observable } from 'mobx';
@@ -150,6 +152,16 @@ export class SchemaAddVersionPage extends PageComponent<{ subjectName: string }>
       this.editorState.references = schema.references;
       this.editorState.strategy = 'CUSTOM';
       this.editorState.userInput = subject.name;
+
+      // Load existing metadata properties for editing
+      if (schema.metadata?.properties) {
+        this.editorState.metadataProperties = Object.entries(schema.metadata.properties).map(([key, value]) => ({
+          key,
+          value,
+        }));
+        // Add an empty row for adding new properties
+        this.editorState.metadataProperties.push({ key: '', value: '' });
+      }
     }
 
     return (
@@ -176,6 +188,7 @@ const SchemaPageButtons = observer(
     editorState: SchemaEditorStateHelper;
   }) => {
     const toast = useToast();
+    const queryClient = useQueryClient();
     const [isValidating, setValidating] = useState(false);
     const [isCreating, setCreating] = useState(false);
     const [persistentValidationError, setPersistentValidationError] = useState<{
@@ -248,6 +261,7 @@ const SchemaPageButtons = observer(
                     schemaType: editorState.format as SchemaTypeType,
                     schema: editorState.schemaText,
                     references: editorState.references.filter((x) => x.name && x.subject),
+                    metadata: editorState.computedMetadata,
                     params: {
                       normalize: editorState.normalize,
                     },
@@ -256,15 +270,17 @@ const SchemaPageButtons = observer(
 
                 await api.refreshSchemaDetails(subjectName, true);
 
-                // success: navigate to details
-                const latestVersion = api.schemaDetails.get(subjectName)?.latestActiveVersion;
+                // Invalidate React Query cache so details page shows latest data
+                await queryClient.invalidateQueries({
+                  queryKey: ['schemaRegistry', 'subjects', subjectName, 'details'],
+                });
+
+                // success: navigate to details with "latest" so it picks up the new version
                 // biome-ignore lint/suspicious/noConsole: intentional console usage
                 console.log('schema created', { response: r });
                 // biome-ignore lint/suspicious/noConsole: intentional console usage
-                console.log('navigating to details', { subjectName, latestVersion });
-                appGlobal.historyReplace(
-                  `/schema-registry/subjects/${encodeURIComponent(subjectName)}?version=${latestVersion}`
-                );
+                console.log('navigating to details', { subjectName });
+                appGlobal.historyReplace(`/schema-registry/subjects/${encodeURIComponent(subjectName)}?version=latest`);
               } catch (err) {
                 // error: open modal
                 // biome-ignore lint/suspicious/noConsole: intentional console usage
@@ -547,6 +563,13 @@ const SchemaEditor = observer((p: { state: SchemaEditorStateHelper; mode: 'CREAT
         {/* <Text>This is an example help text about the references list, to be updated later</Text> */}
 
         <ReferencesEditor state={state} />
+
+        <Heading mt="8" variant="lg">
+          Schema metadata
+        </Heading>
+        <Text>Optional key-value properties to associate with this schema.</Text>
+
+        <MetadataPropertiesEditor state={state} />
       </Flex>
     </>
   );
@@ -636,6 +659,59 @@ const ReferencesEditor = observer((p: { state: SchemaEditorStateHelper }) => {
   );
 });
 
+const MetadataPropertiesEditor = observer((p: { state: SchemaEditorStateHelper }) => {
+  const { state } = p;
+  const props = state.metadataProperties;
+
+  const renderRow = (prop: { key: string; value: string }, index: number) => (
+    <Flex alignItems="flex-end" gap="4" key={index}>
+      <FormField label="Key">
+        <Input
+          data-testid={`schema-create-metadata-key-input-${index}`}
+          onChange={(e) => {
+            prop.key = e.target.value;
+          }}
+          placeholder="e.g. owner"
+          value={prop.key}
+        />
+      </FormField>
+      <FormField label="Value">
+        <Input
+          data-testid={`schema-create-metadata-value-input-${index}`}
+          onChange={(e) => {
+            prop.value = e.target.value;
+          }}
+          placeholder="e.g. team-platform"
+          value={prop.value}
+        />
+      </FormField>
+      <IconButton
+        aria-label="delete"
+        data-testid={`schema-create-metadata-delete-btn-${index}`}
+        icon={<TrashIcon fontSize="19px" />}
+        onClick={() => props.remove(prop)}
+        variant="ghost"
+      />
+    </Flex>
+  );
+
+  return (
+    <Flex direction="column" gap="4">
+      {props.map((x, index) => renderRow(x, index))}
+
+      <Button
+        data-testid="schema-create-add-metadata-btn"
+        onClick={() => props.push({ key: '', value: '' })}
+        size="sm"
+        variant="outline"
+        width="fit-content"
+      >
+        Add property
+      </Button>
+    </Flex>
+  );
+});
+
 function createSchemaState() {
   return observable({
     strategy: 'TOPIC' as
@@ -654,6 +730,17 @@ function createSchemaState() {
       version: number;
     }[],
     normalize: false,
+    metadataProperties: [{ key: '', value: '' }] as { key: string; value: string }[],
+
+    get computedMetadata(): { properties: Record<string, string> } | undefined {
+      const properties: Record<string, string> = {};
+      for (const prop of this.metadataProperties) {
+        if (prop.key && prop.value) {
+          properties[prop.key] = prop.value;
+        }
+      }
+      return Object.keys(properties).length > 0 ? { properties } : undefined;
+    },
 
     get isInvalidKeyOrValue() {
       return this.strategy === 'TOPIC' && this.userInput.length > 0 && !this.keyOrValue;

frontend/src/components/pages/schemas/schema-details.tsx

@@ -29,6 +29,7 @@ import {
 } from '@redpanda-data/ui';
 import { useQueryClient } from '@tanstack/react-query';
 import { getRouteApi, Link, useNavigate } from '@tanstack/react-router';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'components/redpanda-ui/components/table';
 
 const routeApi = getRouteApi('/schema-registry/subjects/$subjectName/');
 
@@ -307,6 +308,13 @@ const SubjectDefinition = (p: { subject: SchemaRegistrySubjectDetails }) => {
     }
   }, [versionNumber, requestedVersionExists, fallbackVersion, toast, navigate]);
 
+  // When URL is "latest", sync selectedVersion with the actual latest version from data
+  useEffect(() => {
+    if (queryVersion === 'latest' && fallbackVersion && selectedVersion !== fallbackVersion) {
+      setSelectedVersion(fallbackVersion);
+    }
+  }, [queryVersion, fallbackVersion, selectedVersion]);
+
   const schema = subjectData.schemas.first((x) => x.version === selectedVersion);
 
   useEffect(() => {
@@ -645,6 +653,46 @@ const VersionDiff = (p: { subject: SchemaRegistrySubjectDetails }) => {
   );
 };
 
+const SchemaMetadataSection = ({ schema }: { schema: SchemaRegistryVersionedSchema }) => {
+  const metadata = schema.metadata;
+  const properties = metadata?.properties;
+  const hasProperties = properties && Object.keys(properties).length > 0;
+
+  return (
+    <>
+      <Text data-testid="schema-metadata-heading" fontSize="lg" fontWeight="bold" mt="20">
+        Metadata
+      </Text>
+      <Text mb="4">Metadata associated with this schema version.</Text>
+
+      <Text fontSize="md" fontWeight="bold" mb="3">
+        Properties
+      </Text>
+
+      {hasProperties ? (
+        <Table testId="schema-metadata-properties">
+          <TableHeader>
+            <TableRow>
+              <TableHead width="sm">Key</TableHead>
+              <TableHead>Value</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {Object.entries(properties).map(([key, value]) => (
+              <TableRow key={key}>
+                <TableCell weight="semibold">{key}</TableCell>
+                <TableCell>{value}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      ) : (
+        <Text color="gray.500">No properties defined.</Text>
+      )}
+    </>
+  );
+};
+
 const SchemaReferences = (p: { subject: SchemaRegistrySubjectDetails; schema: SchemaRegistryVersionedSchema }) => {
   const { subject, schema } = p;
   const version = schema.version;
@@ -654,6 +702,8 @@ const SchemaReferences = (p: { subject: SchemaRegistrySubjectDetails; schema: Sc
 
   return (
     <>
+      <SchemaMetadataSection schema={schema} />
+
       <Text data-testid="schema-references-heading" fontSize="lg" fontWeight="bold" mt="20">
         References
       </Text>