[Enterprise Search] Support for compact mode in ELSER panel (#156887)

## Summary

This PR adds compact mode to the ELSER panel, which is used in the
Pipeline Configuration flyout for the "model started" state, in order to
be less distractive.

Normal mode:
![Screenshot 2023-05-05 at 12 17 19
PM](https://user-images.githubusercontent.com/14224983/236513175-211b27d6-442c-4a94-8adc-d6e11feb916a.png)

Compact mode:
![Screenshot 2023-05-05 at 12 17 27
PM](https://user-images.githubusercontent.com/14224983/236513203-0e658f23-5d16-4037-ba19-250be3396e35.png)


### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx

@@ -318,7 +318,7 @@ export const ConfigurePipeline: React.FC = () => {
               <InferenceConfiguration />
             </EuiForm>
             <EuiSpacer />
-            <TextExpansionCallOut />
+            <TextExpansionCallOut isCompact />
           </EuiPanel>
         </EuiFlexItem>
       </EuiFlexGroup>

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/text_expansion_callout.test.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiButton } from '@elastic/eui';
+import { EuiButton, EuiText } from '@elastic/eui';
 
 import { HttpError } from '../../../../../../../common/types/api';
 
@@ -214,12 +214,18 @@ describe('TextExpansionCallOut', () => {
 
   describe('ModelStarted', () => {
     it('renders dismiss button if it is set to dismissable', () => {
-      const wrapper = shallow(<ModelStarted dismiss={() => {}} isDismissable />);
+      const wrapper = shallow(<ModelStarted dismiss={() => {}} isCompact={false} isDismissable />);
       expect(wrapper.find(TextExpansionDismissButton).length).toBe(1);
     });
     it('does not render dismiss button if it is set to non-dismissable', () => {
-      const wrapper = shallow(<ModelStarted dismiss={() => {}} isDismissable={false} />);
+      const wrapper = shallow(
+        <ModelStarted dismiss={() => {}} isCompact={false} isDismissable={false} />
+      );
       expect(wrapper.find(TextExpansionDismissButton).length).toBe(0);
     });
+    it('does not render description if it is set to compact', () => {
+      const wrapper = shallow(<ModelStarted dismiss={() => {}} isCompact isDismissable />);
+      expect(wrapper.find(EuiText).length).toBe(1); // Title only
+    });
   });
 });

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/text_expansion_callout.tsx

@@ -37,6 +37,7 @@ import { TextExpansionErrors } from './text_expansion_errors';
 export interface TextExpansionCallOutState {
   dismiss: () => void;
   ingestionMethod: string;
+  isCompact: boolean;
   isCreateButtonDisabled: boolean;
   isDismissable: boolean;
   isStartButtonDisabled: boolean;
@@ -44,6 +45,7 @@ export interface TextExpansionCallOutState {
 }
 
 export interface TextExpansionCallOutProps {
+  isCompact?: boolean;
   isDismissable?: boolean;
 }
 
@@ -298,8 +300,9 @@ export const ModelDeployed = ({
 
 export const ModelStarted = ({
   dismiss,
+  isCompact,
   isDismissable,
-}: Pick<TextExpansionCallOutState, 'dismiss' | 'isDismissable'>) => (
+}: Pick<TextExpansionCallOutState, 'dismiss' | 'isCompact' | 'isDismissable'>) => (
   <EuiCallOut color="success">
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem grow>
@@ -310,10 +313,15 @@ export const ModelStarted = ({
           <EuiFlexItem grow>
             <EuiText color="success" size="xs">
               <h3>
-                {i18n.translate(
-                  'xpack.enterpriseSearch.content.index.pipelines.textExpansionCallOut.startedTitle',
-                  { defaultMessage: 'Your ELSER model has started.' }
-                )}
+                {isCompact
+                  ? i18n.translate(
+                      'xpack.enterpriseSearch.content.index.pipelines.textExpansionCallOut.startedTitleCompact',
+                      { defaultMessage: 'Your ELSER model is running.' }
+                    )
+                  : i18n.translate(
+                      'xpack.enterpriseSearch.content.index.pipelines.textExpansionCallOut.startedTitle',
+                      { defaultMessage: 'Your ELSER model has started.' }
+                    )}
               </h3>
             </EuiText>
           </EuiFlexItem>
@@ -324,22 +332,24 @@ export const ModelStarted = ({
           )}
         </EuiFlexGroup>
       </EuiFlexItem>
-      <EuiFlexItem grow>
-        <EuiText size="s">
-          <p>
-            {i18n.translate(
-              'xpack.enterpriseSearch.content.index.pipelines.textExpansionCallOut.startedBody',
-              { defaultMessage: 'Enjoy the power of ELSER in your custom Inference pipeline.' }
-            )}
-          </p>
-        </EuiText>
-      </EuiFlexItem>
+      {!isCompact && (
+        <EuiFlexItem grow>
+          <EuiText size="s">
+            <p>
+              {i18n.translate(
+                'xpack.enterpriseSearch.content.index.pipelines.textExpansionCallOut.startedBody',
+                { defaultMessage: 'Enjoy the power of ELSER in your custom Inference pipeline.' }
+              )}
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+      )}
     </EuiFlexGroup>
   </EuiCallOut>
 );
 
 export const TextExpansionCallOut: React.FC<TextExpansionCallOutProps> = (props) => {
-  const { dismiss, isDismissable, show } = useTextExpansionCallOutData(props);
+  const { dismiss, isCompact, isDismissable, show } = useTextExpansionCallOutData(props);
   const { ingestionMethod } = useValues(IndexViewLogic);
   const {
     createTextExpansionModelError,
@@ -374,7 +384,7 @@ export const TextExpansionCallOut: React.FC<TextExpansionCallOutProps> = (props)
       />
     );
   } else if (isModelStarted) {
-    return <ModelStarted dismiss={dismiss} isDismissable={isDismissable} />;
+    return <ModelStarted dismiss={dismiss} isCompact={isCompact} isDismissable={isDismissable} />;
   }
 
   return (

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/text_expansion_callout_data.tsx

@@ -20,6 +20,7 @@ export const TEXT_EXPANSION_CALL_OUT_DISMISSED_KEY =
 const isDismissed = () => localStorage.getItem(TEXT_EXPANSION_CALL_OUT_DISMISSED_KEY) === 'true';
 
 export const useTextExpansionCallOutData = ({
+  isCompact = false,
   isDismissable = false,
 }: TextExpansionCallOutProps): TextExpansionCallOutState => {
   const { ingestionMethod } = useValues(IndexViewLogic);
@@ -52,6 +53,7 @@ export const useTextExpansionCallOutData = ({
   return {
     dismiss,
     ingestionMethod,
+    isCompact,
     isCreateButtonDisabled,
     isDismissable,
     isStartButtonDisabled,