Validate the aggregator ID with the form, not by hand

Motivation:
The create screen tracked the ID in its own state and re-checked it inside the submit handler,
which is what react-hook-form already does for every other ID field in the console. The regex
and the YAML validation helper were copied into the new editor rather than shared.

Modifications:
- Register the ID input with react-hook-form (`required` + `pattern`), following NewGroup: the
  form owns the value and the inline error, and the submit handler no longer re-checks it.
- Move the shared ID pattern to XdsTypes and the YAML validation helper to its own module; the
  resource editor uses both instead of its own copies.

Result:
One definition of what a valid xDS ID is, and one of how invalid YAML is reported.

Author: ikhoon

webapp/src/dogma/features/xds/K8sAggregatorEditor.tsx

@@ -41,6 +41,7 @@ import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
 import { default as RouteLink } from 'next/link';
 import Router from 'next/router';
 import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { AiOutlineClose, AiOutlineDelete, AiOutlineEdit, AiOutlineEye } from 'react-icons/ai';
 import { FiSave } from 'react-icons/fi';
 import * as jsYaml from 'js-yaml';
@@ -63,33 +64,24 @@ import { useGroupWriteAccess } from 'dogma/features/xds/useGroupWriteAccess';
 import { useAppDispatch } from 'dogma/hooks';
 import { newNotification } from 'dogma/features/notification/notificationSlice';
 import ErrorMessageParser from 'dogma/features/services/ErrorMessageParser';
-
-// Mirrors XdsResourceManager.RESOURCE_ID_PATTERN_STRING.
-const AGGREGATOR_ID_PATTERN = /^[a-z](?:[a-z0-9_.-]*[a-z0-9])?$/;
-
-function validateYamlOrNotify(dispatch: ReturnType<typeof useAppDispatch>, value: string): boolean {
-  try {
-    jsYaml.load(value);
-    return true;
-  } catch (e) {
-    dispatch(newNotification('Invalid YAML', (e as Error).message, 'error'));
-    return false;
-  }
-}
+import { validateYamlOrNotify } from 'dogma/features/xds/validateYaml';
+import { XDS_ID_PATTERN } from 'dogma/features/xds/XdsTypes';
 
 const NewK8sAggregatorEditor = ({ group }: { group: string }) => {
   const dispatch = useAppDispatch();
   const { hasWrite, isLoading: accessLoading } = useGroupWriteAccess(group);
-  const [id, setId] = useState('');
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<{ aggregatorId: string }>();
   const [content, setContent] = useState('');
   const [commitSummary, setCommitSummary] = useState('');
   const [createAggregator, { isLoading }] = useCreateK8sAggregatorMutation();
   const [previewAggregator, { isLoading: isPreviewing }] = usePreviewK8sAggregatorMutation();
   const { isOpen: previewOpen, onOpen: openPreview, onClose: closePreview } = useDisclosure();
   const [previewResult, setPreviewResult] = useState<K8sPreviewResult | null>(null);
 
-  const idIsInvalid = id.length > 0 && !AGGREGATOR_ID_PATTERN.test(id);
-
   const handlePreview = async () => {
     if (!validateYamlOrNotify(dispatch, content)) {
       return;
@@ -104,35 +96,18 @@ const NewK8sAggregatorEditor = ({ group }: { group: string }) => {
     }
   };
 
-  const handleCreate = async () => {
-    if (!hasWrite) {
-      return;
-    }
-    if (!id) {
-      dispatch(newNotification('ID is required', 'Please enter the aggregator ID', 'error'));
-      return;
-    }
-    if (idIsInvalid) {
-      dispatch(
-        newNotification(
-          'Invalid ID',
-          'Aggregator ID must match [a-z](?:[a-z0-9_.-]*[a-z0-9])? (dots allowed, slashes not allowed)',
-          'error',
-        ),
-      );
-      return;
-    }
+  const handleCreate = async ({ aggregatorId }: { aggregatorId: string }) => {
     if (!validateYamlOrNotify(dispatch, content)) {
       return;
     }
     try {
       await createAggregator({
         group,
-        aggregatorId: id,
+        aggregatorId,
         body: content,
         summary: commitSummary || undefined,
       }).unwrap();
-      dispatch(newNotification('Aggregator created', `Aggregator '${id}' is created`, 'success'));
+      dispatch(newNotification('Aggregator created', `Aggregator '${aggregatorId}' is created`, 'success'));
       Router.push(`/app/xds/group?name=${encodeURIComponent(group)}&type=k8sAggregators`);
     } catch (err) {
       dispatch(newNotification('Failed to create the aggregator', ErrorMessageParser.parse(err), 'error'));
@@ -153,9 +128,12 @@ const NewK8sAggregatorEditor = ({ group }: { group: string }) => {
 
   return (
     <Box>
-      <FormControl isRequired isInvalid={idIsInvalid} mb={4} maxW="md">
+      <FormControl isRequired isInvalid={errors.aggregatorId != null} mb={4} maxW="md">
         <FormLabel>Aggregator ID</FormLabel>
-        <Input value={id} onChange={(e) => setId(e.target.value)} placeholder="Enter aggregator ID ..." />
+        <Input
+          placeholder="Enter aggregator ID ..."
+          {...register('aggregatorId', { required: true, pattern: XDS_ID_PATTERN })}
+        />
         <FormErrorMessage>
           ID must match [a-z](?:[a-z0-9_.-]*[a-z0-9])? (dots allowed, slashes not allowed)
         </FormErrorMessage>
@@ -175,7 +153,12 @@ const NewK8sAggregatorEditor = ({ group }: { group: string }) => {
         >
           Preview endpoints
         </Button>
-        <Button colorScheme="teal" leftIcon={<FiSave />} onClick={handleCreate} isLoading={isLoading}>
+        <Button
+          colorScheme="teal"
+          leftIcon={<FiSave />}
+          onClick={handleSubmit(handleCreate)}
+          isLoading={isLoading}
+        >
           Create
         </Button>
       </EditorActionBar>

webapp/src/dogma/features/xds/ResourceEditor.tsx

@@ -46,7 +46,6 @@ import Router from 'next/router';
 import { useEffect, useMemo, useState } from 'react';
 import { AiOutlineClose, AiOutlineDelete, AiOutlineEdit } from 'react-icons/ai';
 import { FiSave } from 'react-icons/fi';
-import * as jsYaml from 'js-yaml';
 import { Deferred } from 'dogma/common/components/Deferred';
 import { JsonEditor } from 'dogma/common/components/JsonEditor';
 import { DeleteConfirmationModal } from 'dogma/common/components/DeleteConfirmationModal';
@@ -56,7 +55,12 @@ import {
   useGetResourceQuery,
   useUpdateResourceMutation,
 } from 'dogma/features/xds/xdsApiSlice';
-import { XdsResourceType, XDS_RESOURCE_META, XDS_RESOURCE_TEMPLATES } from 'dogma/features/xds/XdsTypes';
+import {
+  XdsResourceType,
+  XDS_RESOURCE_META,
+  XDS_RESOURCE_TEMPLATES,
+  XDS_ID_PATTERN,
+} from 'dogma/features/xds/XdsTypes';
 import { extractReferences, referenceHref, resolveReference } from 'dogma/features/xds/xdsReferences';
 import { ResourceGraph } from 'dogma/features/xds/ResourceGraph';
 import { ResourceHistory } from 'dogma/features/xds/ResourceHistory';
@@ -65,20 +69,9 @@ import { useGroupWriteAccess } from 'dogma/features/xds/useGroupWriteAccess';
 import { useAppDispatch } from 'dogma/hooks';
 import { newNotification } from 'dogma/features/notification/notificationSlice';
 import ErrorMessageParser from 'dogma/features/services/ErrorMessageParser';
+import { validateYamlOrNotify } from 'dogma/features/xds/validateYaml';
 
 // Dots are allowed (e.g. "my-service.v1"), but slashes are not.
-const RESOURCE_ID_PATTERN = /^[a-z](?:[a-z0-9_.-]*[a-z0-9])?$/;
-
-function validateYamlOrNotify(dispatch: ReturnType<typeof useAppDispatch>, value: string): boolean {
-  try {
-    jsYaml.load(value);
-    return true;
-  } catch (e) {
-    dispatch(newNotification('Invalid YAML', (e as Error).message, 'error'));
-    return false;
-  }
-}
-
 const NewResourceEditor = ({ group, type }: { group: string; type: XdsResourceType }) => {
   const meta = XDS_RESOURCE_META[type];
   const dispatch = useAppDispatch();
@@ -89,7 +82,7 @@ const NewResourceEditor = ({ group, type }: { group: string; type: XdsResourceTy
   const [commitSummary, setCommitSummary] = useState('');
   const [createResource, { isLoading }] = useCreateResourceMutation();
 
-  const idIsInvalid = id.length > 0 && !RESOURCE_ID_PATTERN.test(id);
+  const idIsInvalid = id.length > 0 && !XDS_ID_PATTERN.test(id);
 
   const handleCreate = async () => {
     if (!hasWrite) {

webapp/src/dogma/features/xds/XdsTypes.ts

@@ -17,6 +17,9 @@
 // The internal Central Dogma project that backs every xDS group.
 export const XDS_PROJECT = '@xds';
 
+// Mirrors XdsResourceManager.RESOURCE_ID_PATTERN_STRING.
+export const XDS_ID_PATTERN = /^[a-z](?:[a-z0-9_.-]*[a-z0-9])?$/;
+
 // xDS resource types. Each value is also the repository directory name and the
 // path segment used by the xDS HTTP API (e.g. /api/v1/xds/groups/{group}/clusters).
 export type XdsResourceType = 'listeners' | 'routes' | 'clusters' | 'endpoints';

webapp/src/dogma/features/xds/validateYaml.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2026 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+import * as jsYaml from 'js-yaml';
+import { useAppDispatch } from 'dogma/hooks';
+import { newNotification } from 'dogma/features/notification/notificationSlice';
+
+export function validateYamlOrNotify(dispatch: ReturnType<typeof useAppDispatch>, value: string): boolean {
+  try {
+    jsYaml.load(value);
+    return true;
+  } catch (e) {
+    dispatch(newNotification('Invalid YAML', (e as Error).message, 'error'));
+    return false;
+  }
+}

webapp/tests/dogma/features/xds/K8sAggregatorEditor.test.tsx

@@ -109,12 +109,12 @@ describe('K8sAggregatorEditor', () => {
   describe('new aggregator', () => {
     it('rejects a slash ID and does not create', async () => {
       const user = userEvent.setup();
-      const { store } = renderWithProviders(<K8sAggregatorEditor group="foo" isNew />);
+      renderWithProviders(<K8sAggregatorEditor group="foo" isNew />);
 
       await user.type(screen.getByPlaceholderText('Enter aggregator ID ...'), 'foo/bar');
       await user.click(screen.getByRole('button', { name: /^create$/i }));
 
-      await waitFor(() => expect(store.getState().notification.title).toBe('Invalid ID'));
+      await waitFor(() => expect(screen.getByText(/ID must match/)).toBeInTheDocument());
       expect(mockCreate).not.toHaveBeenCalled();
     });