support grouped and single options for debugger picker

Author: javiert-okta

src/features/common/components/debugger-picker/debugger-picker.component.tsx

@@ -1,13 +1,29 @@
 import React, { useEffect, useState } from "react";
 import styles from "./debugger-picker.module.scss";
-import Select, { SingleValue } from "react-select";
+import Select, { SingleValue, OptionsOrGroups, GroupBase } from "react-select";
 import { DebuggerPickerOptionModel } from "@/features/common/models/debugger-picker-option.model";
 import { LibraryFilterLabel } from "@/features/libraries/models/library-filters.model";
 
+
 interface PickerLabelProps {
   label: string | null;
 }
 
+const getGroupLabel = (
+  options: OptionsOrGroups<
+    DebuggerPickerOptionModel,
+    GroupBase<DebuggerPickerOptionModel>
+  >,
+  selected: DebuggerPickerOptionModel
+): LibraryFilterLabel | undefined => {
+  if (!Array.isArray(options)) return undefined;
+
+  const group = (options as GroupBase<DebuggerPickerOptionModel>[]).find(
+    (group) => group.options.some((opt) => opt.value === selected.value)
+  );
+  return group ? group.label as LibraryFilterLabel : undefined;
+};
+
 const PickerLabel: React.FC<PickerLabelProps> = ({ label }) => {
   return (
     <div className={styles.picker__label}>
@@ -19,9 +35,16 @@ const PickerLabel: React.FC<PickerLabelProps> = ({ label }) => {
 interface DebuggerPickerComponentProps {
   label: string | null;
   languageCode: string;
-  options: DebuggerPickerOptionModel[];
-  selectedOptionCode: DebuggerPickerOptionModel["options"][0] | null;
-  handleSelection: (selection: string, parentLabel?: LibraryFilterLabel) => void
+  options: OptionsOrGroups<
+    DebuggerPickerOptionModel,
+    GroupBase<DebuggerPickerOptionModel>
+  >;
+  isGrouped?: boolean;
+  selectedOptionCode: DebuggerPickerOptionModel | null;
+  handleSelection: (
+    selection: string,
+    parentLabel?: LibraryFilterLabel
+  ) => void;
   placeholder: string | null;
   minWidth: string | null;
 }
@@ -39,13 +62,13 @@ export const DebuggerPickerComponent: React.FC<
   const [isClient, setIsClient] = useState(false);
 
   const handleChange = (
-    selection: SingleValue<DebuggerPickerOptionModel["options"][0]>
+    selection: SingleValue<DebuggerPickerOptionModel>
   ) => {
     if (!selection) {
       return;
     }
-    const parentLabel = options.find(group => group.options.some(opt => opt.value === selection.value))?.label
-    handleSelection(selection.value, parentLabel);
+    const groupLabel = getGroupLabel(options, selection);
+    handleSelection(selection.value, groupLabel);
   };
 
   useEffect(() => {