[EDR Workflows]Automatic troubleshooting usage callout (elastic#224030)

Tracks elastic#221566
Closes elastic/security-team#12824

With this change, whenever a user selects the Elastic LLM connector
within the Automatic Troubleshooting feature, they'll see a callout
informing them about the potential costs of using it. Once the callout
is acknowledged, it will be dismissed and the closed state will be
stored in local storage, so it won’t appear again on future visits.

To enable EIS locally:
```
export VAULT_ADDR=https://secrets.elastic.co:8200/
vault login --method=oidc
node scripts/eis.js
```
and run ES server with provided env + start kibana with .dev.yaml entry
from the output of the command above.

https://github.com/user-attachments/assets/51a2ce77-ed25-4611-9d62-72e9d09bb789

---------

Co-authored-by: Angela Chuang <[email protected]>
Co-authored-by: Angela Chuang <[email protected]>
Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: florent-leborgne <[email protected]>
Co-authored-by: Viduni Wickramarachchi <[email protected]>
(cherry picked from commit dfe6f54)

Author: 5 people

x-pack/platform/packages/shared/kbn-elastic-assistant/impl/tour/common/hooks/use_tour_storage_key.test.tsx

@@ -52,6 +52,13 @@ const testFeatures = [
         NEW_FEATURES_TOUR_STORAGE_KEYS.CONVERSATION_CONNECTOR_ELASTIC_LLM
       ],
   },
+  {
+    featureKey: NEW_FEATURES_TOUR_STORAGE_KEYS.ELASTIC_LLM_USAGE_AUTOMATIC_TROUBLESHOOTING,
+    expectedStorageKey:
+      NEW_TOUR_FEATURES_TOUR_STORAGE_KEYS[
+        NEW_FEATURES_TOUR_STORAGE_KEYS.ELASTIC_LLM_USAGE_AUTOMATIC_TROUBLESHOOTING
+      ],
+  },
 ];
 
 describe('useTourStorageKey', () => {

x-pack/platform/packages/shared/kbn-elastic-assistant/impl/tour/const.ts

@@ -11,6 +11,7 @@ export enum NEW_FEATURES_TOUR_STORAGE_KEYS {
   ELASTIC_LLM_USAGE_ATTACK_DISCOVERY = 'ELASTIC_LLM_USAGE_ATTACK_DISCOVERY',
   ELASTIC_LLM_USAGE_ATTACK_DISCOVERY_FLYOUT = 'ELASTIC_LLM_USAGE_ATTACK_DISCOVERY_FLYOUT',
   ELASTIC_LLM_USAGE_ASSISTANT_HEADER = 'ELASTIC_LLM_USAGE_ASSISTANT_HEADER',
+  ELASTIC_LLM_USAGE_AUTOMATIC_TROUBLESHOOTING = 'ELASTIC_LLM_USAGE_AUTOMATIC_TROUBLESHOOTING',
   CONVERSATION_CONNECTOR_ELASTIC_LLM = 'CONVERSATION_CONNECTOR_ELASTIC_LLM',
 }
 
@@ -26,4 +27,6 @@ export const NEW_TOUR_FEATURES_TOUR_STORAGE_KEYS: Record<NEW_FEATURES_TOUR_STORA
     'elasticAssistant.elasticLLM.costAwarenessTour.assistantHeader.v8.19',
   CONVERSATION_CONNECTOR_ELASTIC_LLM:
     'elasticAssistant.elasticLLM.conversation.costAwarenessTour.v8.19',
+  ELASTIC_LLM_USAGE_AUTOMATIC_TROUBLESHOOTING:
+    'elasticAssistant.elasticLLM.costAwarenessTour.automaticTroubleshooting.v9.0',
 };

x-pack/solutions/security/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/insights/workflow_insights_scan.tsx

@@ -12,11 +12,15 @@ import {
   ConnectorSelectorInline,
   DEFAULT_ASSISTANT_NAMESPACE,
   useLoadConnectors,
+  useAssistantContext,
+  AssistantSpaceIdProvider,
 } from '@kbn/elastic-assistant';
 import { noop } from 'lodash/fp';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 import { some } from 'lodash';
 import { AssistantIcon } from '@kbn/ai-assistant-icon';
+import { ElasticLLMCostAwarenessTour } from '@kbn/elastic-assistant/impl/tour/elastic_llm';
+import { NEW_FEATURES_TOUR_STORAGE_KEYS } from '@kbn/elastic-assistant/impl/tour/const';
 import { useUserPrivileges } from '../../../../../../../common/components/user_privileges';
 import { useSpaceId } from '../../../../../../../common/hooks/use_space_id';
 import { WORKFLOW_INSIGHTS } from '../../../translations';
@@ -39,17 +43,20 @@ export const WorkflowInsightsScanSection = ({
 }: WorkflowInsightsScanSectionProps) => {
   const CONNECTOR_ID_LOCAL_STORAGE_KEY = 'connectorId';
 
-  const spaceId = useSpaceId() ?? 'default';
+  const spaceId = useSpaceId();
   const { http } = useKibana().services;
   const { data: aiConnectors } = useLoadConnectors({
     http,
   });
   const { canWriteWorkflowInsights } = useUserPrivileges().endpointPrivileges;
+  const { inferenceEnabled } = useAssistantContext();
 
   // Store the selected connector id in local storage so that it persists across page reloads
   const [localStorageWorkflowInsightsConnectorId, setLocalStorageWorkflowInsightsConnectorId] =
     useLocalStorage<string>(
-      `${DEFAULT_ASSISTANT_NAMESPACE}.${DEFEND_INSIGHTS_STORAGE_KEY}.${spaceId}.${CONNECTOR_ID_LOCAL_STORAGE_KEY}`
+      `${DEFAULT_ASSISTANT_NAMESPACE}.${DEFEND_INSIGHTS_STORAGE_KEY}.${
+        spaceId || 'default'
+      }.${CONNECTOR_ID_LOCAL_STORAGE_KEY}`
     );
 
   const [connectorId, setConnectorId] = React.useState<string | undefined>(
@@ -133,11 +140,24 @@ export const WorkflowInsightsScanSection = ({
         <EuiFlexItem grow={false}>
           <EuiFlexGroup alignItems="center" gutterSize="s">
             <EuiFlexItem grow={false}>
-              <ConnectorSelectorInline
-                onConnectorSelected={noop}
-                onConnectorIdSelected={onConnectorIdSelected}
-                selectedConnectorId={connectorId}
-              />
+              {spaceId && (
+                <AssistantSpaceIdProvider spaceId={spaceId}>
+                  <ElasticLLMCostAwarenessTour
+                    isDisabled={!inferenceEnabled}
+                    selectedConnectorId={connectorId}
+                    zIndex={1000}
+                    storageKey={
+                      NEW_FEATURES_TOUR_STORAGE_KEYS.ELASTIC_LLM_USAGE_AUTOMATIC_TROUBLESHOOTING
+                    }
+                  >
+                    <ConnectorSelectorInline
+                      onConnectorSelected={noop}
+                      onConnectorIdSelected={onConnectorIdSelected}
+                      selectedConnectorId={connectorId}
+                    />
+                  </ElasticLLMCostAwarenessTour>
+                </AssistantSpaceIdProvider>
+              )}
             </EuiFlexItem>
             {scanButton}
           </EuiFlexGroup>