ENG-3832: Render multi-select dropdown for taxonomy[] custom fields

changelog/8197-multi-select-taxonomy-custom-fields.yaml

@@ -0,0 +1,4 @@
+type: Added
+description: Support multi-select taxonomy custom fields via the "taxonomy_key[]" field_type convention — frontend now renders a multi-select dropdown for [] fields on taxonomy detail pages
+pr: 8197
+labels: []

clients/admin-ui/src/features/common/custom-fields/hooks.ts

@@ -110,7 +110,8 @@ export const useCustomFields = ({
       activeCustomFieldDefinition.forEach((value) => {
         const customField = definitionIdToCustomField.get(value.id || "");
         if (customField) {
-          if (!!value.allow_list_id && value.field_type === "string[]") {
+          // Preserve array values for any multi-value field_type (legacy "string[]" or taxonomy "risk[]")
+          if (value.field_type.endsWith("[]")) {
             values[customField.custom_field_definition_id] = customField.value;
           } else {
             values[customField.custom_field_definition_id] =

clients/admin-ui/src/features/custom-fields/CustomFieldForm.tsx

@@ -79,6 +79,8 @@ const CustomFieldForm = ({
   const [form] = Form.useForm<CustomFieldsFormValues>();
   const valueType = Form.useWatch("value_type", form);
   const selectedTemplate = Form.useWatch("template", form);
+  const isTaxonomyTemplate =
+    !!selectedTemplate && selectedTemplate !== CUSTOM_TEMPLATE_VALUE;
   const router = useRouter();
   const { resource_type: queryResourceType } = router.query;
 
@@ -185,17 +187,26 @@ const CustomFieldForm = ({
       return undefined;
     }
     const fieldType = getCustomFieldType(field);
-    const template =
+    const isCustomTemplate =
       fieldType === FieldTypes.OPEN_TEXT ||
       fieldType === FieldTypes.SINGLE_SELECT ||
-      fieldType === FieldTypes.MULTIPLE_SELECT
-        ? CUSTOM_TEMPLATE_VALUE
-        : undefined;
+      fieldType === FieldTypes.MULTIPLE_SELECT;
+
+    // Detect taxonomy multi-select: field_type ends with "[]" and is not a standard type
+    const isTaxonomyMulti =
+      !isCustomTemplate && field.field_type.endsWith("[]");
+    const taxonomyBaseKey = isTaxonomyMulti
+      ? field.field_type.slice(0, -2)
+      : field.field_type;
+
+    const template = isCustomTemplate ? CUSTOM_TEMPLATE_VALUE : taxonomyBaseKey;
+
     return {
       ...field,
-      value_type: field.field_type,
+      value_type: taxonomyBaseKey,
       template,
       field_type: fieldType,
+      selection_mode: isTaxonomyMulti ? "multiple" : "single",
       resource_type: parseResourceType(field.resource_type),
       options: allowList?.allowed_values ?? [],
     };
@@ -205,10 +216,11 @@ const CustomFieldForm = ({
 
   const initialValues = queryResourceType
     ? {
+        selection_mode: "single" as const,
         ...defaultInitialValues,
         resource_type: `taxonomy:${queryResourceType}`,
       }
-    : defaultInitialValues;
+    : { selection_mode: "single" as const, ...defaultInitialValues };
 
   if (isLoading || isAllowListLoading || isLocationsLoading) {
     return <SkeletonCustomFieldForm />;
@@ -256,8 +268,10 @@ const CustomFieldForm = ({
           onChange={(value) => {
             if (value === CUSTOM_TEMPLATE_VALUE) {
               form.setFieldValue("value_type", undefined);
+              form.setFieldValue("selection_mode", undefined);
             } else {
               form.setFieldValue("value_type", value);
+              form.setFieldValue("selection_mode", "single");
             }
           }}
           data-testid="select-template"
@@ -277,6 +291,27 @@ const CustomFieldForm = ({
         />
       </Form.Item>
 
+      {isTaxonomyTemplate && (
+        <Form.Item
+          label="Selection mode"
+          name="selection_mode"
+          rules={[
+            { required: true, message: "Please select a selection mode" },
+          ]}
+        >
+          <Select
+            options={[
+              { label: "Single select", value: "single" },
+              { label: "Multiple select", value: "multiple" },
+            ]}
+            data-testid="select-selection-mode"
+            getPopupContainer={(trigger) =>
+              trigger.parentElement || document.body
+            }
+          />
+        </Form.Item>
+      )}
+
       {selectedTemplate === CUSTOM_TEMPLATE_VALUE && (
         <>
           <Form.Item

clients/admin-ui/src/features/custom-fields/CustomFieldFormValues.ts

@@ -8,6 +8,7 @@ export interface CustomFieldsFormValues extends Omit<
   field_type?: string;
   template?: string;
   value_type: string;
+  selection_mode?: "single" | "multiple";
 }
 
 export const CUSTOM_TEMPLATE_VALUE = "create-custom-values";

clients/admin-ui/src/features/custom-fields/useCreateOrUpdateCustomField.ts

@@ -48,8 +48,10 @@ const useCreateOrUpdateCustomField = () => {
       values.resource_type as string,
     );
     if (values.field_type === FieldTypes.OPEN_TEXT) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { selection_mode: selectionMode, ...rest } = values;
       const payload = {
-        ...values,
+        ...rest,
         field_type: LegacyAllowedTypes.STRING,
         id: initialField ? initialField.id : undefined,
         resource_type: normalizedResourceType,
@@ -67,7 +69,8 @@ const useCreateOrUpdateCustomField = () => {
       values.field_type === FieldTypes.MULTIPLE_SELECT
     ) {
       if (!initialField) {
-        const { options, ...rest } = values;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { options, selection_mode: selectionMode, ...rest } = values;
         // first create the allow list
         const allowListPayload = {
           name: generateNewAllowListName(),
@@ -92,7 +95,8 @@ const useCreateOrUpdateCustomField = () => {
       }
       // update  the allow list if it's changed
       let allowListResult: RTKResult | undefined;
-      const { options, ...rest } = values;
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { options, selection_mode: selectionMode, ...rest } = values;
       if (!isEqual(initialAllowList?.allowed_values, options)) {
         const allowListPayload = {
           ...initialAllowList,
@@ -123,11 +127,15 @@ const useCreateOrUpdateCustomField = () => {
       return result;
     }
     // field type is a taxonomy
-    const { value_type: valueType, ...rest } = values;
+    const {
+      value_type: valueType,
+      selection_mode: selectionMode,
+      ...rest
+    } = values;
     const payload = {
       ...rest,
       id: initialField ? initialField.id : undefined,
-      field_type: valueType,
+      field_type: selectionMode === "multiple" ? `${valueType}[]` : valueType,
       resource_type: normalizedResourceType,
     };
     let result: RTKResult | undefined;

clients/admin-ui/src/features/custom-fields/useCustomFieldsTable.tsx

@@ -81,10 +81,15 @@ const useCustomFieldsTable = () => {
         dataIndex: "field_type",
         key: "field_type",
         render: (_, record) => {
+          const baseFieldType = record.field_type.endsWith("[]")
+            ? record.field_type.slice(0, -2)
+            : record.field_type;
           const customTaxonomy = customTaxonomies?.find(
-            (taxonomy) => taxonomy.fides_key === record.field_type,
+            (taxonomy) => taxonomy.fides_key === baseFieldType,
           );
-          const label = customTaxonomy?.name ?? getCustomFieldTypeLabel(record);
+          const label =
+            customTaxonomy?.name ??
+            getCustomFieldTypeLabel({ ...record, field_type: baseFieldType });
           return <TagCell value={label} />;
         },
       },

clients/admin-ui/src/features/taxonomy/components/TaxonomyCustomFieldsForm.tsx

@@ -59,6 +59,11 @@ const TaxonomyCustomFieldsForm = ({
                 } = customFieldDefinition;
 
                 if (!allowListId) {
+                  const isMultiSelectTaxonomy = fieldType.endsWith("[]");
+                  const taxonomyKey = isMultiSelectTaxonomy
+                    ? fieldType.slice(0, -2)
+                    : fieldType;
+
                   return (
                     <Form.Item
                       key={definitionId}
@@ -70,7 +75,8 @@ const TaxonomyCustomFieldsForm = ({
                         <Input />
                       ) : (
                         <CustomTaxonomySelect
-                          taxonomyKey={fieldType}
+                          taxonomyKey={taxonomyKey}
+                          mode={isMultiSelectTaxonomy ? "multiple" : undefined}
                           defaultValue={customFields.customFieldValues[id]}
                         />
                       )}