Add governed module and interface controls

webui/src/components/SearchableSelect.tsx

@@ -9,6 +9,7 @@ import {
 } from "react";
 import { ChevronDown, Search } from "lucide-react";
 import { usePlatformLanguage } from "../i18n/LanguageContext";
+import type { PlatformInterfaceIdentityProps } from "../types";
 
 export type SearchableSelectOption = {
   value: string;
@@ -27,7 +28,7 @@ export type SearchableSelectCreateCustomOption = (
   value: string
 ) => SearchableSelectOption | null;
 
-export type SearchableSelectProps = {
+export type SearchableSelectProps = PlatformInterfaceIdentityProps & {
   id?: string;
   value: string;
   onChange: (
@@ -95,7 +96,9 @@ export default function SearchableSelect({
   minQueryLength = 0,
   searchLimit = 50,
   debounceMs = 200,
-  className = ""
+  className = "",
+  interfaceId,
+  helpTopicId
 }: SearchableSelectProps) {
   const { translateText } = usePlatformLanguage();
   const generatedId = useId().replace(/[^a-zA-Z0-9_-]/g, "-");
@@ -294,6 +297,8 @@ export default function SearchableSelect({
     <div
       ref={rootRef}
       className={rootClassName}
+      data-interface-id={interfaceId}
+      data-help-topic-id={helpTopicId}
       onBlur={closeOnFocusLeave}
     >
       <div className="searchable-select-control">