[UII] Fix _debug page errors, remove need for forwardRef (#201895)

## Summary

Resolves [#186989](https://github.com/elastic/kibana/issues/186989). As
the title says!

x-pack/plugins/fleet/public/applications/fleet/sections/debug/components/fleet_index_debugger.tsx

@@ -31,7 +31,7 @@ import { ENROLLMENT_API_KEYS_INDEX } from '../../../constants';
 import { CodeBlock } from './code_block';
 
 const fetchIndex = async (index?: string) => {
-  if (!index) return;
+  if (!index) return null;
   const response = await sendRequest({
     method: 'post',
     path: debugRoutesService.getIndexPath(),

x-pack/plugins/fleet/public/applications/fleet/sections/debug/components/saved_object_debugger.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import {
   EuiFlexGroup,
@@ -38,7 +38,7 @@ import { CodeBlock } from './code_block';
 import { SavedObjectNamesCombo } from './saved_object_names_combo';
 
 const fetchSavedObjects = async (type?: string, name?: string) => {
-  if (!type || !name) return;
+  if (!type || !name) return [];
 
   const response = await sendRequest({
     method: 'post',
@@ -101,12 +101,9 @@ export const SavedObjectDebugger: React.FunctionComponent = () => {
   const [name, setName] = useState<string | undefined>();
   const [namesStatus, setNamesStatus] = useState();
 
-  const childRef = useRef<{ refetchNames: Function }>();
-
   const onTypeChange = (e: any) => {
     setType(e.target.value);
     setName(undefined);
-    childRef.current!.refetchNames();
   };
 
   const { data: savedObjectResult, status } = useQuery(['debug-saved-objects', type, name], () =>
@@ -154,11 +151,10 @@ export const SavedObjectDebugger: React.FunctionComponent = () => {
         >
           <EuiFormRow>
             <SavedObjectNamesCombo
-              name={name!}
+              name={name}
               setName={setName}
               type={type}
               setNamesStatus={setNamesStatus}
-              ref={childRef}
             />
           </EuiFormRow>
         </EuiFlexItem>

x-pack/plugins/fleet/public/applications/fleet/sections/debug/components/saved_object_names_combo.tsx

@@ -5,12 +5,13 @@
  * 2.0.
  */
 
-import React, { forwardRef, useImperativeHandle } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import React, { useEffect } from 'react';
 import { EuiComboBox } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
+import { useQuery } from '@tanstack/react-query';
+
 import { sendRequest } from '../../../hooks';
 import { debugRoutesService } from '../../../../../../common/services';
 import { API_VERSIONS } from '../../../../../../common/constants';
@@ -30,62 +31,62 @@ const fetchSavedObjectNames = async (type: string) => {
 };
 
 interface SavedObjectNamesComboProps {
-  name: string;
+  name?: string;
   setName: Function;
   type: string;
   setNamesStatus: Function;
 }
 
-export const SavedObjectNamesCombo = forwardRef(
-  ({ name, setName, type, setNamesStatus }: SavedObjectNamesComboProps, ref) => {
-    const {
-      data: savedObjectNames,
-      refetch,
-      status,
-    } = useQuery(['debug-saved-object-names', type], () => fetchSavedObjectNames(type), {
+export const SavedObjectNamesCombo: React.FunctionComponent<SavedObjectNamesComboProps> = ({
+  name,
+  setName,
+  type,
+  setNamesStatus,
+}) => {
+  const { data: savedObjectNames, status } = useQuery(
+    ['debug-saved-object-names', type],
+    () => fetchSavedObjectNames(type),
+    {
       refetchOnWindowFocus: false,
-    });
+    }
+  );
 
-    setNamesStatus?.(status);
+  useEffect(() => {
+    setNamesStatus(status);
+  }, [status, setNamesStatus]);
 
-    useImperativeHandle(ref, () => ({
-      refetchNames: refetch,
-    }));
+  const comboBoxOptions = (savedObjectNames ?? []).map((obj: { key: string }) => ({
+    label: obj.key,
+    value: obj.key,
+  }));
 
-    const comboBoxOptions = (savedObjectNames ?? []).map((obj: { key: string }) => ({
-      label: obj.key,
-      value: obj.key,
-    }));
+  const selectedOption = comboBoxOptions.find(
+    (option: { value: string }) => option.value === name
+  )!;
+  const selectedOptions = selectedOption ? [selectedOption] : [];
 
-    const selectedOption = comboBoxOptions.find(
-      (option: { value: string }) => option.value === name
-    )!;
-    const selectedOptions = selectedOption ? [selectedOption] : [];
-
-    return (
-      <EuiComboBox
-        prepend="Name"
-        aria-label={i18n.translate(
-          'xpack.fleet.debug.savedObjectDebugger.selectedSavedObjectLabel',
-          { defaultMessage: 'Select a Saved Object' }
-        )}
-        placeholder={i18n.translate(
-          'xpack.fleet.debug.savedObjectDebugger.selectedSavedObjectLabel',
-          { defaultMessage: 'Select a Saved Object' }
-        )}
-        fullWidth
-        options={comboBoxOptions}
-        singleSelection={{ asPlainText: true }}
-        selectedOptions={selectedOptions}
-        isLoading={status === 'loading'}
-        onChange={(newSelectedOptions) => {
-          if (!newSelectedOptions.length) {
-            setName(undefined);
-          } else {
-            setName(newSelectedOptions[0].value as string);
-          }
-        }}
-      />
-    );
-  }
-);
+  return (
+    <EuiComboBox
+      prepend="Name"
+      aria-label={i18n.translate('xpack.fleet.debug.savedObjectDebugger.selectedSavedObjectLabel', {
+        defaultMessage: 'Select a Saved Object',
+      })}
+      placeholder={i18n.translate(
+        'xpack.fleet.debug.savedObjectDebugger.selectedSavedObjectLabel',
+        { defaultMessage: 'Select a Saved Object' }
+      )}
+      fullWidth
+      options={comboBoxOptions}
+      singleSelection={{ asPlainText: true }}
+      selectedOptions={selectedOptions}
+      isLoading={status === 'loading'}
+      onChange={(newSelectedOptions) => {
+        if (!newSelectedOptions.length) {
+          setName(undefined);
+        } else {
+          setName(newSelectedOptions[0].value as string);
+        }
+      }}
+    />
+  );
+};

x-pack/plugins/fleet/public/applications/fleet/sections/debug/index.tsx

@@ -162,7 +162,7 @@ export const DebugPage: React.FunctionComponent<{
           <EuiSpacer size="m" />
           <EuiPageSection>
             {panels.map(({ title, id, component }) => (
-              <>
+              <div key={id}>
                 <EuiAccordion
                   id={id}
                   initialIsOpen
@@ -177,7 +177,7 @@ export const DebugPage: React.FunctionComponent<{
                 </EuiAccordion>
 
                 <EuiHorizontalRule />
-              </>
+              </div>
             ))}
 
             <EuiTitle size="l">