[Fleet] Fix how we get the default output in the Fleet UI (#113620)

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/components/fleet_server_on_prem_instructions.tsx

@@ -31,7 +31,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { DownloadStep } from '../../../../components';
 import {
   useStartServices,
-  useGetOutputs,
+  useDefaultOutput,
   sendGenerateServiceToken,
   usePlatform,
   PLATFORM_OPTIONS,
@@ -242,7 +242,7 @@ export const FleetServerCommandStep = ({
 };
 
 export const useFleetServerInstructions = (policyId?: string) => {
-  const outputsRequest = useGetOutputs();
+  const { output, refresh: refreshOutputs } = useDefaultOutput();
   const { notifications } = useStartServices();
   const [serviceToken, setServiceToken] = useState<string>();
   const [isLoadingServiceToken, setIsLoadingServiceToken] = useState<boolean>(false);
@@ -250,9 +250,7 @@ export const useFleetServerInstructions = (policyId?: string) => {
   const [deploymentMode, setDeploymentMode] = useState<DeploymentMode>('production');
   const { data: settings, resendRequest: refreshSettings } = useGetSettings();
   const fleetServerHost = settings?.item.fleet_server_hosts?.[0];
-  const output = outputsRequest.data?.items?.[0];
   const esHost = output?.hosts?.[0];
-  const refreshOutputs = outputsRequest.resendRequest;
 
   const installCommand = useMemo((): string => {
     if (!serviceToken || !esHost) {

x-pack/plugins/fleet/public/components/settings_flyout/index.tsx

@@ -36,7 +36,7 @@ import {
   useGetSettings,
   useInput,
   sendPutSettings,
-  useGetOutputs,
+  useDefaultOutput,
   sendPutOutput,
 } from '../../hooks';
 import { isDiffPathProtocol, normalizeHostsForAgents } from '../../../common';
@@ -258,8 +258,7 @@ export const SettingFlyout: React.FunctionComponent<Props> = ({ onClose }) => {
 
   const settingsRequest = useGetSettings();
   const settings = settingsRequest?.data?.item;
-  const outputsRequest = useGetOutputs();
-  const output = outputsRequest.data?.items?.[0];
+  const { output } = useDefaultOutput();
   const { inputs, submit, validate, isLoading } = useSettingsForm(output?.id, onClose);
 
   const [isConfirmModalVisible, setConfirmModalVisible] = React.useState(false);

x-pack/plugins/fleet/public/hooks/use_request/outputs.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { useMemo, useCallback } from 'react';
+
 import { outputRoutesService } from '../../services';
 import type { PutOutputRequest, GetOutputsResponse } from '../../types';
 
@@ -17,6 +19,21 @@ export function useGetOutputs() {
   });
 }
 
+export function useDefaultOutput() {
+  const outputsRequest = useGetOutputs();
+  const output = useMemo(() => {
+    return outputsRequest.data?.items.find((o) => o.is_default);
+  }, [outputsRequest.data]);
+
+  const refresh = useCallback(() => {
+    return outputsRequest.resendRequest();
+  }, [outputsRequest]);
+
+  return useMemo(() => {
+    return { output, refresh };
+  }, [output, refresh]);
+}
+
 export function sendPutOutput(outputId: string, body: PutOutputRequest['body']) {
   return sendRequest({
     method: 'put',