Add tooltip to disabled setup buttons

Author: weltenwort

x-pack/plugins/infra/public/components/logging/log_analysis_setup/missing_setup_privileges_tooltip.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiToolTip, PropsOf } from '@elastic/eui';
+import React from 'react';
+import {
+  missingMlSetupPrivilegesDescription,
+  missingMlSetupPrivilegesTitle,
+} from './missing_privileges_messages';
+
+export const MissingSetupPrivilegesToolTip: React.FC<Omit<
+  PropsOf<EuiToolTip>,
+  'content' | 'title'
+>> = (props) => (
+  <EuiToolTip
+    {...props}
+    content={missingMlSetupPrivilegesDescription}
+    title={missingMlSetupPrivilegesTitle}
+  />
+);

x-pack/plugins/infra/public/components/logging/log_analysis_setup/setup_flyout/module_list_card.tsx

@@ -4,12 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiCard, EuiIcon } from '@elastic/eui';
-import React from 'react';
-import { EuiButton } from '@elastic/eui';
+import { EuiButton, EuiCard, EuiIcon } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { RecreateJobButton } from '../../log_analysis_job_status';
+import React from 'react';
 import { SetupStatus } from '../../../../../common/log_analysis';
+import { RecreateJobButton } from '../../log_analysis_job_status';
+import { MissingSetupPrivilegesToolTip } from '../missing_setup_privileges_tooltip';
 
 export const LogAnalysisModuleListCard: React.FC<{
   hasSetupCapabilities: boolean;
@@ -18,14 +18,38 @@ export const LogAnalysisModuleListCard: React.FC<{
   moduleStatus: SetupStatus;
   onViewSetup: () => void;
 }> = ({ hasSetupCapabilities, moduleDescription, moduleName, moduleStatus, onViewSetup }) => {
-  const icon =
+  const moduleIcon =
     moduleStatus.type === 'required' ? (
       <EuiIcon size="xxl" type="machineLearningApp" />
     ) : (
       <EuiIcon color="secondary" size="xxl" type="check" />
     );
-  const footerContent =
-    moduleStatus.type === 'required' ? (
+
+  const moduleSetupButton = (
+    <ModuleSetupButton
+      hasSetupCapabilities={hasSetupCapabilities}
+      onViewSetup={onViewSetup}
+      setupType={moduleStatus.type === 'required' ? 'create' : 'recreate'}
+    />
+  );
+
+  return (
+    <EuiCard
+      description={moduleDescription}
+      footer={<div>{moduleSetupButton}</div>}
+      icon={moduleIcon}
+      title={moduleName}
+    />
+  );
+};
+
+const ModuleSetupButton: React.FC<{
+  hasSetupCapabilities: boolean;
+  onViewSetup: () => void;
+  setupType: 'create' | 'recreate';
+}> = ({ hasSetupCapabilities, onViewSetup, setupType }) => {
+  const moduleSetupButton =
+    setupType === 'create' ? (
       <EuiButton disabled={!hasSetupCapabilities} onClick={onViewSetup}>
         <FormattedMessage
           id="xpack.infra.logs.analysis.enableAnomalyDetectionButtonLabel"
@@ -36,12 +60,11 @@ export const LogAnalysisModuleListCard: React.FC<{
       <RecreateJobButton disabled={!hasSetupCapabilities} onClick={onViewSetup} />
     );
 
-  return (
-    <EuiCard
-      description={moduleDescription}
-      footer={<div>{footerContent}</div>}
-      icon={icon}
-      title={moduleName}
-    />
+  return hasSetupCapabilities ? (
+    moduleSetupButton
+  ) : (
+    <MissingSetupPrivilegesToolTip position="bottom" delay="regular">
+      {moduleSetupButton}
+    </MissingSetupPrivilegesToolTip>
   );
 };