From ab91bb007578827a0358a9b734082cf707d8d4fd Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Mon, 4 Oct 2021 10:52:05 -0400
Subject: [PATCH] [Fleet] Fix how we get the default output in the Fleet UI
 (#113620)

---
 .../fleet_server_on_prem_instructions.tsx       |  6 ++----
 .../public/components/settings_flyout/index.tsx |  5 ++---
 .../fleet/public/hooks/use_request/outputs.ts   | 17 +++++++++++++++++
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/components/fleet_server_on_prem_instructions.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/components/fleet_server_on_prem_instructions.tsx
index 1d43f90b80defe..a8cab77af447cf 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/components/fleet_server_on_prem_instructions.tsx
+++ b/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) {
diff --git a/x-pack/plugins/fleet/public/components/settings_flyout/index.tsx b/x-pack/plugins/fleet/public/components/settings_flyout/index.tsx
index e42733bbd2da09..9bedfca0d3bca5 100644
--- a/x-pack/plugins/fleet/public/components/settings_flyout/index.tsx
+++ b/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);
diff --git a/x-pack/plugins/fleet/public/hooks/use_request/outputs.ts b/x-pack/plugins/fleet/public/hooks/use_request/outputs.ts
index 0fcaa262cf321e..2d623da505c65d 100644
--- a/x-pack/plugins/fleet/public/hooks/use_request/outputs.ts
+++ b/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',