[Agent Builder] Connect LLM button flyout persists when on create connector page #12232

x-pack/platform/plugins/shared/agent_builder/public/application/components/access/prompts/add_llm_connection_prompt.tsx

@@ -5,12 +5,15 @@
  * 2.0.
  */
 
-import { EuiButton, EuiButtonEmpty, useEuiTheme } from '@elastic/eui';
+import { EuiButton, EuiButtonEmpty, EuiCallOut, useEuiTheme } from '@elastic/eui';
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
+import useObservable from 'react-use/lib/useObservable';
+import { MANAGEMENT_APP_ID } from '../../../hooks/use_navigation';
 import { ErrorPrompt } from '../../common/prompt/error_prompt';
 import { useAgentBuilderServices } from '../../../hooks/use_agent_builder_service';
 import { useAssetBasePath } from '../../../hooks/use_asset_base_path';
+import { useKibana } from '../../../hooks/use_kibana';
 import type { PromptLayoutVariant } from '../../common/prompt/layout';
 
 export interface AddLlmConnectionPromptProps {
@@ -22,13 +25,32 @@ export const AddLlmConnectionPrompt: React.FC<AddLlmConnectionPromptProps> = ({
   const { colorMode } = useEuiTheme();
   const assetBasePath = useAssetBasePath();
   const llmDocsHref = docLinksService.models;
+  const {
+    services: { application },
+  } = useKibana();
+  const currentAppId = useObservable(application.currentAppId$, undefined);
+  const isInManagementApp = currentAppId === MANAGEMENT_APP_ID;
 
-  const primaryButton = (
+  const primaryAction = isInManagementApp ? (
+    <EuiCallOut
+      announceOnMount
+      size="s"
+      iconType="info"
+      title={
+        <FormattedMessage
+          id="xpack.agentBuilder.access.prompt.addLlm.onConnectorsPageCalloutTitle"
+          defaultMessage="Configure your LLM connection on this page"
+        />
+      }
+      data-test-subj="connectLLMOnConnectorsPageCallout"
+    />
+  ) : (
     <EuiButton
       fill
       onClick={() => {
         navigationService.navigateToLlmConnectorsManagement();
       }}
+      data-test-subj="connectLLMButton"
     >
       <FormattedMessage
         id="xpack.agentBuilder.access.prompt.addLlm.actions.connectButton"
@@ -54,7 +76,7 @@ export const AddLlmConnectionPrompt: React.FC<AddLlmConnectionPromptProps> = ({
       variant={variant}
       errorType="ADD_LLM_CONNECTION"
       imageSrc={brainImage}
-      primaryButton={primaryButton}
+      primaryButton={primaryAction}
       secondaryButton={secondaryButton}
     />
   );

x-pack/platform/plugins/shared/agent_builder/public/application/hooks/use_navigation.ts

@@ -14,7 +14,7 @@ export interface LocationState {
   initialMessage?: string;
 }
 
-const MANAGEMENT_APP_ID = 'management';
+export const MANAGEMENT_APP_ID = 'management';
 const manageConnectorsPath = '/insightsAndAlerting/triggersActionsConnectors/connectors';
 
 export const useNavigation = () => {