From 683fc46b39ea7ffdb81f6cd04d5766358cd05467 Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Tue, 21 Apr 2020 15:57:15 -0400
Subject: [PATCH] Reassign from details page too

---
 .../components/details_section.tsx            | 80 +++++++++++++++----
 .../fleet/agent_list_page/components/index.ts |  1 -
 .../sections/fleet/agent_list_page/index.tsx  |  5 +-
 .../agent_reassign_config_flyout/index.tsx    | 28 ++++---
 .../sections/fleet/components/index.tsx       |  1 +
 5 files changed, 88 insertions(+), 27 deletions(-)
 rename x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/{agent_list_page => }/components/agent_reassign_config_flyout/index.tsx (88%)

diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/components/details_section.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/components/details_section.tsx
index 0844368dc214b..2843cf7cf79cb 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/components/details_section.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/components/details_section.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, Fragment } from 'react';
+import React, { useState, Fragment, useCallback } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiTitle,
@@ -13,10 +13,13 @@ import {
   EuiFlexItem,
   EuiDescriptionList,
   EuiButton,
+  EuiPopover,
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
   EuiButtonEmpty,
   EuiIconTip,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
   EuiTextColor,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -26,7 +29,7 @@ import { Agent } from '../../../../types';
 import { AgentHealth } from '../../components/agent_health';
 import { useCapabilities, useGetOneAgentConfig } from '../../../../hooks';
 import { Loading } from '../../../../components';
-import { ConnectedLink } from '../../components';
+import { ConnectedLink, AgentReassignConfigFlyout } from '../../components';
 import { AgentUnenrollProvider } from '../../components/agent_unenroll_provider';
 
 const Item: React.FunctionComponent<{ label: string }> = ({ label, children }) => {
@@ -56,6 +59,15 @@ export const AgentDetailSection: React.FunctionComponent<Props> = ({ agent }) =>
   const hasWriteCapabilites = useCapabilities().write;
   const metadataFlyout = useFlyout();
   const refreshAgent = useAgentRefresh();
+  // Actions menu
+  const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false);
+  const handleCloseMenu = useCallback(() => setIsActionsPopoverOpen(false), [
+    setIsActionsPopoverOpen,
+  ]);
+  const handleToggleMenu = useCallback(() => setIsActionsPopoverOpen(!isActionsPopoverOpen), [
+    isActionsPopoverOpen,
+  ]);
+  const [isReassignFlyoutOpen, setIsReassignFlyoutOpen] = useState(false);
 
   // Fetch AgentConfig information
   const { isLoading: isAgentConfigLoading, data: agentConfigData } = useGetOneAgentConfig(
@@ -111,6 +123,12 @@ export const AgentDetailSection: React.FunctionComponent<Props> = ({ agent }) =>
 
   return (
     <>
+      {isReassignFlyoutOpen && (
+        <AgentReassignConfigFlyout
+          agentId={agent.id}
+          onClose={() => setIsReassignFlyoutOpen(false)}
+        />
+      )}
       <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle size="l">
@@ -123,21 +141,55 @@ export const AgentDetailSection: React.FunctionComponent<Props> = ({ agent }) =>
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <AgentUnenrollProvider>
-            {unenrollAgentsPrompt => (
-              <EuiButton
-                disabled={!hasWriteCapabilites || !agent.active}
-                onClick={() => {
-                  unenrollAgentsPrompt([agent.id], 1, refreshAgent);
-                }}
-              >
+          <EuiPopover
+            anchorPosition="downRight"
+            panelPaddingSize="none"
+            button={
+              <EuiButton onClick={handleToggleMenu}>
                 <FormattedMessage
-                  id="xpack.ingestManager.agentDetails.unenrollButtonText"
-                  defaultMessage="Unenroll"
+                  id="xpack.ingestManager.agentDetails.actionsButton"
+                  defaultMessage="Actions"
                 />
               </EuiButton>
-            )}
-          </AgentUnenrollProvider>
+            }
+            isOpen={isActionsPopoverOpen}
+            closePopover={handleCloseMenu}
+          >
+            <EuiContextMenuPanel
+              items={[
+                <EuiContextMenuItem
+                  icon="pencil"
+                  onClick={() => {
+                    handleCloseMenu();
+                    setIsReassignFlyoutOpen(true);
+                  }}
+                  key="reassignConfig"
+                >
+                  <FormattedMessage
+                    id="xpack.ingestManager.agentList.reassignActionText"
+                    defaultMessage="Assign new agent config"
+                  />
+                </EuiContextMenuItem>,
+
+                <AgentUnenrollProvider>
+                  {unenrollAgentsPrompt => (
+                    <EuiContextMenuItem
+                      icon="cross"
+                      disabled={!hasWriteCapabilites || !agent.active}
+                      onClick={() => {
+                        unenrollAgentsPrompt([agent.id], 1, refreshAgent);
+                      }}
+                    >
+                      <FormattedMessage
+                        id="xpack.ingestManager.agentList.unenrollOneButton"
+                        defaultMessage="Unenroll"
+                      />
+                    </EuiContextMenuItem>
+                  )}
+                </AgentUnenrollProvider>,
+              ]}
+            />
+          </EuiPopover>
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size={'xl'} />
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/index.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/index.ts
index d8a92f54a31b1..c82c82db6f713 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/index.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/index.ts
@@ -4,4 +4,3 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 export { AgentEnrollmentFlyout } from './agent_enrollment_flyout';
-export { AgentReassignConfigFlyout } from './agent_reassign_config_flyout';
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx
index b33023b068436..53249ecc4c845 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx
@@ -25,7 +25,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, FormattedRelative } from '@kbn/i18n/react';
 import { CSSProperties } from 'styled-components';
-import { AgentEnrollmentFlyout, AgentReassignConfigFlyout } from './components';
+import { AgentEnrollmentFlyout } from './components';
 import { Agent } from '../../../types';
 import {
   usePagination,
@@ -35,7 +35,7 @@ import {
   useUrlParams,
   useLink,
 } from '../../../hooks';
-import { ConnectedLink } from '../components';
+import { ConnectedLink, AgentReassignConfigFlyout } from '../components';
 import { SearchBar } from '../../../components/search_bar';
 import { AgentHealth } from '../components/agent_health';
 import { AgentUnenrollProvider } from '../components/agent_unenroll_provider';
@@ -373,7 +373,6 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
       {agentToReassignId && (
         <AgentReassignConfigFlyout
           agentId={agentToReassignId}
-          agentConfigs={agentConfigs}
           onClose={() => {
             setAgentToReassignId(undefined);
             agentsRequest.sendRequest();
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_reassign_config_flyout/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_reassign_config_flyout/index.tsx
similarity index 88%
rename from x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_reassign_config_flyout/index.tsx
rename to x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_reassign_config_flyout/index.tsx
index 68ab794ff9b9d..2bb3e89d6b30c 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_reassign_config_flyout/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_reassign_config_flyout/index.tsx
@@ -22,24 +22,27 @@ import {
   EuiBadge,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { AgentConfig, Datasource } from '../../../../../types';
-import { useGetOneAgentConfig, sendPutAgentReassign, useCore } from '../../../../../hooks';
-import { PackageIcon } from '../../../../../components/package_icon';
+import { Datasource } from '../../../../types';
+import {
+  useGetOneAgentConfig,
+  sendPutAgentReassign,
+  useCore,
+  useGetAgentConfigs,
+} from '../../../../hooks';
+import { PackageIcon } from '../../../../components/package_icon';
 
 interface Props {
   onClose: () => void;
-  agentConfigs: AgentConfig[];
   agentId: string;
 }
 
-export const AgentReassignConfigFlyout: React.FunctionComponent<Props> = ({
-  onClose,
-  agentId,
-  agentConfigs = [],
-}) => {
+export const AgentReassignConfigFlyout: React.FunctionComponent<Props> = ({ onClose, agentId }) => {
   const { notifications } = useCore();
   const [selectedAgentConfigId, setSelectedAgentConfigId] = useState<string | undefined>(undefined);
 
+  const agentConfigsRequest = useGetAgentConfigs();
+  const agentConfigs = agentConfigsRequest.data ? agentConfigsRequest.data.items : [];
+
   const agentConfigRequest = useGetOneAgentConfig(selectedAgentConfigId as string);
   const agentConfig = agentConfigRequest.data ? agentConfigRequest.data.item : null;
 
@@ -58,6 +61,13 @@ export const AgentReassignConfigFlyout: React.FunctionComponent<Props> = ({
         throw res.error;
       }
       setIsSubmitting(false);
+      const successMessage = i18n.translate(
+        'xpack.ingestManager.agentReassignConfig.successSingleNotificationTitle',
+        {
+          defaultMessage: 'Successfully changed the configuration',
+        }
+      );
+      notifications.toasts.addSuccess(successMessage);
       onClose();
     } catch (error) {
       setIsSubmitting(false);
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/index.tsx
index 19378fe2fb952..a0092f4073e5a 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/index.tsx
@@ -5,5 +5,6 @@
  */
 
 export * from './loading';
+export * from './agent_reassign_config_flyout';
 export * from './navigation/child_routes';
 export * from './navigation/connected_link';