feat: Add Serial number to Option in LookupField

src/modules/service-catalog/components/service-catalog-item/ItemRequestForm.tsx

@@ -9,6 +9,9 @@ import { CollapsibleDescription } from "./CollapsibleDescription";
 import type { TicketFieldObject } from "../../../ticket-fields/data-types/TicketFieldObject";
 import type { CustomObjectRecord } from "../../../ticket-fields/data-types/CustomObjectRecord";
 import { useAssetDataFetchers } from "../../../service-catalog/hooks/useAssetDataFetchers";
+import type { ITAMAssetOptionObject } from "../../data-types/ITAMAssetOptionObject";
+import { Span } from "@zendeskgarden/react-typography";
+import { Option } from "@zendeskgarden/react-dropdowns.next";
 
 const Form = styled.form`
   display: flex;
@@ -238,11 +241,17 @@ export function ItemRequestForm({
   const buildLookupFieldOptions = async (
     records: CustomObjectRecord[],
     field: TicketFieldObject
-  ) => {
+  ): Promise<ITAMAssetOptionObject[]> => {
     if (!Array.isArray(records) || records.length === 0) return [];
 
-    const options = records.map((rec) => {
-      const base = { name: rec.name, value: rec.id };
+    const options: ITAMAssetOptionObject[] = records.map((rec) => {
+      const base = {
+        name: rec.name,
+        value: rec.id,
+        serialNumber: rec.custom_object_fields["standard::serial_number"] as
+          | string
+          | undefined,
+      };
 
       if (rec.custom_object_key === "standard::itam_asset") {
         const fields = (rec.custom_object_fields ?? {}) as {
@@ -271,7 +280,31 @@ export function ItemRequestForm({
       }
       return list;
     }
-    return options.map(({ name, value }) => ({ name, value }));
+    return options.map(({ name, value, serialNumber }) => ({
+      name,
+      value,
+      serialNumber,
+    }));
+  };
+
+  const renderLookupFieldOption = (option: ITAMAssetOptionObject) => {
+    if (option.serialNumber) {
+      return (
+        <>
+          {option.name}
+          <Option.Meta>
+            <Span hue="grey">
+              {t(
+                "service-catalog.item.serial-number-label",
+                "SN: {{serialNumber}}",
+                { serialNumber: option.serialNumber }
+              )}
+            </Span>
+          </Option.Meta>
+        </>
+      );
+    }
+    return option.name;
   };
 
   return (
@@ -319,6 +352,7 @@ export function ItemRequestForm({
                 handleChange={handleChange}
                 visibleFields={requestFields}
                 buildLookupFieldOptions={buildLookupFieldOptions}
+                renderLookupFieldOption={renderLookupFieldOption}
               />
             );
           })}

src/modules/service-catalog/data-types/ITAMAssetOptionObject.ts

@@ -0,0 +1,10 @@
+import type { TicketFieldOptionObject } from "../../ticket-fields/data-types/TicketFieldObject";
+
+/**
+ * Extended option type for ITAM (IT Asset Management) assets from Service Catalog.
+ * These options include additional metadata like serial numbers and asset type IDs.
+ */
+export interface ITAMAssetOptionObject extends TicketFieldOptionObject {
+  serialNumber?: string;
+  item_asset_type_id?: string;
+}

src/modules/ticket-fields/RequestFormField.tsx

@@ -27,6 +27,7 @@ interface RequestFormFieldProps {
     value: TicketFieldObject["value"]
   ) => void;
   buildLookupFieldOptions?: LookupFieldProps["buildLookupFieldOptions"];
+  renderLookupFieldOption?: LookupFieldProps["renderOption"];
 }
 
 export const RequestFormField = ({
@@ -43,6 +44,7 @@ export const RequestFormField = ({
   handleDueDateChange,
   handleChange,
   buildLookupFieldOptions,
+  renderLookupFieldOption,
 }: RequestFormFieldProps) => {
   switch (field.type) {
     case "text":
@@ -144,6 +146,7 @@ export const RequestFormField = ({
           visibleFields={visibleFields}
           onChange={(value) => handleChange(field, value)}
           buildLookupFieldOptions={buildLookupFieldOptions}
+          renderOption={renderLookupFieldOption}
         />
       );
     default:

src/modules/ticket-fields/data-types/CustomObjectRecord.ts

@@ -2,5 +2,5 @@ export interface CustomObjectRecord {
   id: string;
   name: string;
   custom_object_key: string;
-  custom_object_fields: object;
+  custom_object_fields: Record<string, string | number | boolean | unknown>;
 }

src/modules/ticket-fields/fields/LookupField.tsx

@@ -64,7 +64,8 @@
   buildLookupFieldOptions?: (
     records: CustomObjectRecord[],
     field: TicketFieldObject
-  ) => Promise<{ name: string; value: string }[]>;
+  ) => Promise<TicketFieldOptionObject[]>;
+  renderOption?: (option: TicketFieldOptionObject) => React.ReactNode;
 }
 
 export function LookupField({
@@ -74,6 +75,7 @@
   onChange,
   visibleFields,
   buildLookupFieldOptions,
+  renderOption,
 }: LookupFieldProps) {
   const {
     id: fieldId,
@@ -252,7 +254,7 @@
     if (value) {
       fetchSelectedOption(value as string);
     }
   }, []); //we don't set dependency array as we want this hook to be called only once
 
   const onFocus = () => {
     setInputValue("");
@@ -263,7 +265,7 @@
     <GardenField>
       <Label>
         {label}
         {required && <Span aria-hidden="true">*</Span>}
       </Label>
       {description && (
         <Hint dangerouslySetInnerHTML={{ __html: description }} />
@@ -315,7 +317,9 @@
               value={option.value}
               label={option.name}
               data-test-id={`option-${option.name}`}
-            />
+            >
+              {renderOption ? renderOption(option) : option.name}
+            </Option>
           ))}
       </Combobox>
       {error && <Message validation="error">{error}</Message>}