[Security Assistant] Show license upgrade CTA within new flyout (elas…

…tic#183576)

## Summary

This is a fix for showing the license upgrade CTA when using the new
flyout experience with the Security Assistant.

To test, downgrade your license from `trial` to `basic` in Stack
Management and view that the CTA is now back.

The `New Chat` and `Expand Conversations` button are now also disabled
if `!isAssistantAvailable`.

> [!NOTE]
> No logic around determining if the assistant should be shown has
changed, so all existing tests around `assistantAvailability` are still
in place and relevant. This was a surgical fix, and we short-circuit to
show this UI if `!isAssistantAvailable`.

This is a functional change to ESS only, as Serverless completely hides
the assistant when unavailable (`essentials` productTier) as originally
implemented in elastic#164763.

Before / After:
<p align="center">
<img width="300"
src="https://github.com/elastic/kibana/assets/2946766/92b512b6-9cec-4f83-948a-d1e101bdc9ec"
/> <img width="295"
src="https://github.com/elastic/kibana/assets/2946766/c3e39812-27e6-4c4f-ba4c-efb70adff6b5"
/>
</p>

(cherry picked from commit dff2d29)

x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/assistant_header_flyout.tsx

@@ -45,6 +45,7 @@ interface OwnProps {
   conversations: Record<string, Conversation>;
   refetchConversationsState: () => Promise<void>;
   onConversationCreate: () => Promise<void>;
+  isAssistantEnabled: boolean;
 }
 
 type Props = OwnProps;
@@ -70,6 +71,7 @@ export const AssistantHeaderFlyout: React.FC<Props> = ({
   conversations,
   refetchConversationsState,
   onConversationCreate,
+  isAssistantEnabled,
 }) => {
   const showAnonymizedValuesChecked = useMemo(
     () =>
@@ -140,6 +142,7 @@ export const AssistantHeaderFlyout: React.FC<Props> = ({
         isExpanded={!!chatHistoryVisible}
         setIsExpanded={setChatHistoryVisible}
         onConversationCreate={onConversationCreate}
+        isAssistantEnabled={isAssistantEnabled}
       >
         <EuiFlexGroup gutterSize="s">
           <EuiFlexItem grow={false}>

x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx

@@ -18,6 +18,7 @@ export interface FlyoutNavigationProps {
   setIsExpanded?: (value: boolean) => void;
   children: React.ReactNode;
   onConversationCreate?: () => Promise<void>;
+  isAssistantEnabled: boolean;
 }
 
 const VerticalSeparator = styled.div`
@@ -34,7 +35,7 @@ const VerticalSeparator = styled.div`
  */
 
 export const FlyoutNavigation = memo<FlyoutNavigationProps>(
-  ({ isExpanded, setIsExpanded, children, onConversationCreate }) => {
+  ({ isExpanded, setIsExpanded, children, onConversationCreate, isAssistantEnabled }) => {
     const onToggle = useCallback(
       () => setIsExpanded && setIsExpanded(!isExpanded),
       [isExpanded, setIsExpanded]
@@ -43,6 +44,7 @@ export const FlyoutNavigation = memo<FlyoutNavigationProps>(
     const toggleButton = useMemo(
       () => (
         <EuiButtonIcon
+          disabled={!isAssistantEnabled}
           onClick={onToggle}
           iconType={isExpanded ? 'arrowEnd' : 'arrowStart'}
           size="xs"
@@ -63,7 +65,7 @@ export const FlyoutNavigation = memo<FlyoutNavigationProps>(
           }
         />
       ),
-      [isExpanded, onToggle]
+      [isAssistantEnabled, isExpanded, onToggle]
     );
 
     return (
@@ -96,6 +98,7 @@ export const FlyoutNavigation = memo<FlyoutNavigationProps>(
                       color="primary"
                       iconType="newChat"
                       onClick={onConversationCreate}
+                      disabled={!isAssistantEnabled}
                     >
                       {NEW_CHAT}
                     </EuiButtonEmpty>

x-pack/packages/kbn-elastic-assistant/impl/assistant/block_bot/cta.tsx

@@ -6,9 +6,10 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { HttpSetup } from '@kbn/core-http-browser';
+import { ENTERPRISE } from '../../content/prompts/welcome/translations';
 import { UpgradeButtons } from '../../upgrade/upgrade_buttons';
 
 interface OwnProps {
@@ -33,11 +34,24 @@ export const BlockBotCallToAction: React.FC<Props> = ({
   const basePath = http.basePath.get();
   return !isAssistantEnabled ? (
     <EuiFlexGroup
-      justifyContent="spaceAround"
+      justifyContent="center"
+      direction="column"
+      alignItems="center"
+      gutterSize="l"
       css={css`
         width: 100%;
       `}
     >
+      <EuiFlexItem
+        grow={false}
+        css={css`
+          width: 400px;
+        `}
+      >
+        <EuiText>
+          <p>{ENTERPRISE}</p>
+        </EuiText>
+      </EuiFlexItem>
       <EuiFlexItem grow={false}>{<UpgradeButtons basePath={basePath} />}</EuiFlexItem>
     </EuiFlexGroup>
   ) : isWelcomeSetup ? (

x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx

@@ -944,6 +944,7 @@ const AssistantComponent: React.FC<Props> = ({
                     conversations={conversations}
                     refetchConversationsState={refetchConversationsState}
                     onConversationCreate={handleCreateConversation}
+                    isAssistantEnabled={isAssistantEnabled}
                   />
 
                   {/* Create portals for each EuiCodeBlock to add the `Investigate in Timeline` action */}
@@ -983,16 +984,19 @@ const AssistantComponent: React.FC<Props> = ({
                     )
                   }
                 >
-                  <EuiFlexGroup direction="column" justifyContent="spaceBetween">
-                    <EuiFlexItem grow={false}>{flyoutBodyContent}</EuiFlexItem>
-                    <EuiFlexItem grow={false}>{disclaimer}</EuiFlexItem>
-                  </EuiFlexGroup>
-                  {/* <BlockBotCallToAction
-                    connectorPrompt={connectorPrompt}
-                    http={http}
-                    isAssistantEnabled={isAssistantEnabled}
-                    isWelcomeSetup={isWelcomeSetup}
-                  /> */}
+                  {!isAssistantEnabled ? (
+                    <BlockBotCallToAction
+                      connectorPrompt={connectorPrompt}
+                      http={http}
+                      isAssistantEnabled={isAssistantEnabled}
+                      isWelcomeSetup={isWelcomeSetup}
+                    />
+                  ) : (
+                    <EuiFlexGroup direction="column" justifyContent="spaceBetween">
+                      <EuiFlexItem grow={false}>{flyoutBodyContent}</EuiFlexItem>
+                      <EuiFlexItem grow={false}>{disclaimer}</EuiFlexItem>
+                    </EuiFlexGroup>
+                  )}
                 </EuiFlyoutBody>
                 <EuiFlyoutFooter
                   css={css`

x-pack/packages/kbn-elastic-assistant/impl/upgrade/upgrade_buttons.tsx

@@ -11,7 +11,12 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import * as i18n from './translations';
 
 export const UpgradeButtonsComponent = ({ basePath }: { basePath: string }) => (
-  <EuiFlexGroup gutterSize="s" wrap={true} data-test-subj="upgrade-buttons">
+  <EuiFlexGroup
+    gutterSize="s"
+    wrap={true}
+    data-test-subj="upgrade-buttons"
+    justifyContent="spaceAround"
+  >
     <EuiFlexItem grow={false}>
       <EuiButton
         href="https://www.elastic.co/subscriptions"