[Ingest Manager] Fix create data source from integration (#66626)

* Fix add datasource button from integration not responsive

* Fix React key prop warnings

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: jen-huang

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/index.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -95,32 +95,46 @@ export const CreateDatasourcePage: React.FunctionComponent = () => {
   // Datasource validation state
   const [validationResults, setValidationResults] = useState<DatasourceValidationResults>();
 
+  // Form state
+  const [formState, setFormState] = useState<DatasourceFormState>('INVALID');
+
   // Update package info method
-  const updatePackageInfo = (updatedPackageInfo: PackageInfo | undefined) => {
-    if (updatedPackageInfo) {
-      setPackageInfo(updatedPackageInfo);
-      setFormState('VALID');
-    } else {
-      setFormState('INVALID');
-      setPackageInfo(undefined);
-    }
+  const updatePackageInfo = useCallback(
+    (updatedPackageInfo: PackageInfo | undefined) => {
+      if (updatedPackageInfo) {
+        setPackageInfo(updatedPackageInfo);
+        if (agentConfig) {
+          setFormState('VALID');
+        }
+      } else {
+        setFormState('INVALID');
+        setPackageInfo(undefined);
+      }
 
-    // eslint-disable-next-line no-console
-    console.debug('Package info updated', updatedPackageInfo);
-  };
+      // eslint-disable-next-line no-console
+      console.debug('Package info updated', updatedPackageInfo);
+    },
+    [agentConfig, setPackageInfo, setFormState]
+  );
 
   // Update agent config method
-  const updateAgentConfig = (updatedAgentConfig: AgentConfig | undefined) => {
-    if (updatedAgentConfig) {
-      setAgentConfig(updatedAgentConfig);
-    } else {
-      setFormState('INVALID');
-      setAgentConfig(undefined);
-    }
+  const updateAgentConfig = useCallback(
+    (updatedAgentConfig: AgentConfig | undefined) => {
+      if (updatedAgentConfig) {
+        setAgentConfig(updatedAgentConfig);
+        if (packageInfo) {
+          setFormState('VALID');
+        }
+      } else {
+        setFormState('INVALID');
+        setAgentConfig(undefined);
+      }
 
-    // eslint-disable-next-line no-console
-    console.debug('Agent config updated', updatedAgentConfig);
-  };
+      // eslint-disable-next-line no-console
+      console.debug('Agent config updated', updatedAgentConfig);
+    },
+    [packageInfo, setAgentConfig, setFormState]
+  );
 
   const hasErrors = validationResults ? validationHasErrors(validationResults) : false;
 
@@ -163,7 +177,6 @@ export const CreateDatasourcePage: React.FunctionComponent = () => {
       : getHref('integration_details', { pkgkey });
 
   // Save datasource
-  const [formState, setFormState] = useState<DatasourceFormState>('INVALID');
   const saveDatasource = async () => {
     setFormState('LOADING');
     const result = await sendCreateDatasource(datasource);
@@ -215,33 +228,43 @@ export const CreateDatasourcePage: React.FunctionComponent = () => {
     packageInfo,
   };
 
+  const stepSelectConfig = useMemo(
+    () => (
+      <StepSelectConfig
+        pkgkey={pkgkey}
+        updatePackageInfo={updatePackageInfo}
+        agentConfig={agentConfig}
+        updateAgentConfig={updateAgentConfig}
+      />
+    ),
+    [pkgkey, updatePackageInfo, agentConfig, updateAgentConfig]
+  );
+
+  const stepSelectPackage = useMemo(
+    () => (
+      <StepSelectPackage
+        agentConfigId={configId}
+        updateAgentConfig={updateAgentConfig}
+        packageInfo={packageInfo}
+        updatePackageInfo={updatePackageInfo}
+      />
+    ),
+    [configId, updateAgentConfig, packageInfo, updatePackageInfo]
+  );
+
   const steps: EuiStepProps[] = [
     from === 'package'
       ? {
           title: i18n.translate('xpack.ingestManager.createDatasource.stepSelectAgentConfigTitle', {
             defaultMessage: 'Select an agent configuration',
           }),
-          children: (
-            <StepSelectConfig
-              pkgkey={pkgkey}
-              updatePackageInfo={updatePackageInfo}
-              agentConfig={agentConfig}
-              updateAgentConfig={updateAgentConfig}
-            />
-          ),
+          children: stepSelectConfig,
         }
       : {
           title: i18n.translate('xpack.ingestManager.createDatasource.stepSelectPackageTitle', {
             defaultMessage: 'Select an integration',
           }),
-          children: (
-            <StepSelectPackage
-              agentConfigId={configId}
-              updateAgentConfig={updateAgentConfig}
-              packageInfo={packageInfo}
-              updatePackageInfo={updatePackageInfo}
-            />
-          ),
+          children: stepSelectPackage,
         },
     {
       title: i18n.translate('xpack.ingestManager.createDatasource.stepDefineDatasourceTitle', {

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/datasources/datasources_table.tsx

@@ -275,6 +275,7 @@ export const DatasourcesTable: React.FunctionComponent<Props> = ({
       search={{
         toolsRight: [
           <EuiButton
+            key="addDatasourceButton"
             isDisabled={!hasWriteCapabilities}
             iconType="plusInCircle"
             href={getHref('add_datasource_from_configuration', { configId: config.id })}

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/data_stream/list_page/index.tsx

@@ -241,7 +241,12 @@ export const DataStreamListPage: React.FunctionComponent<{}> = () => {
         sorting={true}
         search={{
           toolsRight: [
-            <EuiButton color="primary" iconType="refresh" onClick={() => sendRequest()}>
+            <EuiButton
+              key="reloadButton"
+              color="primary"
+              iconType="refresh"
+              onClick={() => sendRequest()}
+            >
               <FormattedMessage
                 id="xpack.ingestManager.dataStreamList.reloadDataStreamsButtonText"
                 defaultMessage="Reload"