From cec54242c3aeffd4004acd181eab8584f880a9fc Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Mon, 11 Dec 2023 10:21:32 -0500
Subject: [PATCH] Align inference pipeline card/option styling (#172952)

## Summary

More closely align the styling used for inference pipeline cards on the
indices page and existing inference pipeline options on the "Add an
inference pipeline" flyout.

Also used this as an opportunity to refactor
`inference_pipeline_card.tsx` to improve readability and change the
model/pipeline management popover to make the "Fix issue in Trained
Models" button fit better with the other buttons.

(cherry picked from commit 1abc0c2df75110512bd1069fe1cbd208b0895052)
---
 .../inference_pipeline_card.test.tsx          |  36 ++-
 .../pipelines/inference_pipeline_card.tsx     | 249 +++++++++---------
 .../ml_inference/pipeline_select_option.tsx   |  12 +-
 3 files changed, 156 insertions(+), 141 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx
index 970b1488010c0..62ac53004a773 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx
@@ -11,11 +11,11 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiButtonIcon, EuiPanel, EuiTextColor, EuiTitle } from '@elastic/eui';
+import { EuiButtonEmpty, EuiPanel, EuiText, EuiTitle } from '@elastic/eui';
 
 import { InferencePipeline, TrainedModelState } from '../../../../../../common/types/pipelines';
 
-import { InferencePipelineCard } from './inference_pipeline_card';
+import { InferencePipelineCard, TrainedModelHealthPopover } from './inference_pipeline_card';
 import { MLModelTypeBadge } from './ml_model_type_badge';
 
 export const DEFAULT_VALUES: InferencePipeline = {
@@ -40,7 +40,7 @@ describe('InferencePipelineCard', () => {
   it('renders pipeline as title', () => {
     const wrapper = shallow(<InferencePipelineCard {...mockValues} />);
     expect(wrapper.find(EuiTitle)).toHaveLength(1);
-    const title = wrapper.find(EuiTitle).dive();
+    const title = wrapper.find(EuiTitle).at(0).children();
     expect(title.text()).toBe(DEFAULT_VALUES.pipelineName);
   });
   it('renders pipeline as title with unknown model type', () => {
@@ -51,14 +51,14 @@ describe('InferencePipelineCard', () => {
     const wrapper = shallow(<InferencePipelineCard {...values} />);
     expect(wrapper.find(EuiTitle)).toHaveLength(1);
     // does not render subtitle
-    expect(wrapper.find(EuiTextColor)).toHaveLength(0);
-    const title = wrapper.find(EuiTitle).dive();
+    expect(wrapper.find(EuiText)).toHaveLength(0);
+    const title = wrapper.find(EuiTitle).at(0).children();
     expect(title.text()).toBe(DEFAULT_VALUES.pipelineName);
   });
   it('renders model ID as subtitle', () => {
     const wrapper = shallow(<InferencePipelineCard {...mockValues} />);
-    expect(wrapper.find(EuiTextColor)).toHaveLength(1);
-    const subtitle = wrapper.find(EuiTextColor).dive();
+    expect(wrapper.find(EuiText)).toHaveLength(1);
+    const subtitle = wrapper.find(EuiText).at(0).children();
     expect(subtitle.text()).toBe(DEFAULT_VALUES.modelId);
   });
   it('renders model type as badge', () => {
@@ -67,20 +67,28 @@ describe('InferencePipelineCard', () => {
     const badge = wrapper.find(MLModelTypeBadge).render();
     expect(badge.text()).toBe('ner');
   });
-  it('renders fix button when model not deployed', () => {
+});
+
+describe('TrainedModelHealthPopover', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockValues(mockValues);
+  });
+  it('popover renders fix button when model not deployed', () => {
     const values = {
       ...DEFAULT_VALUES,
       modelState: TrainedModelState.NotDeployed,
     };
-    const wrapper = shallow(<InferencePipelineCard {...values} />);
-    expect(wrapper.find(EuiButtonIcon)).toHaveLength(1);
+    const wrapper = shallow(<TrainedModelHealthPopover {...values} />);
+    expect(wrapper.find(EuiButtonEmpty)).toHaveLength(3);
 
-    const fixButton = wrapper.find(EuiButtonIcon);
+    const fixButton = wrapper.find(EuiButtonEmpty).at(0);
     expect(fixButton.prop('iconType')).toBe('wrench');
     expect(fixButton.prop('href')).toBe('/app/ml/trained_models');
+    expect(fixButton.children().text()).toBe('Fix issue in Trained Models');
   });
-  it('does not render fix button when model deployed', () => {
-    const wrapper = shallow(<InferencePipelineCard {...mockValues} />);
-    expect(wrapper.find(EuiButtonIcon)).toHaveLength(0);
+  it('popover does not render fix button when model deployed', () => {
+    const wrapper = shallow(<TrainedModelHealthPopover {...mockValues} />);
+    expect(wrapper.find(EuiButtonEmpty)).toHaveLength(2);
   });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx
index dcc4b2a0cad8f..342d05c398878 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx
@@ -11,16 +11,14 @@ import { useActions, useValues } from 'kea';
 
 import {
   EuiButtonEmpty,
-  EuiButtonIcon,
   EuiConfirmModal,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
   EuiPopover,
   EuiText,
-  EuiTextColor,
   EuiTitle,
-  EuiToolTip,
+  useIsWithinMaxBreakpoint,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -39,20 +37,18 @@ import { TrainedModelHealth } from './ml_model_health';
 import { MLModelTypeBadge } from './ml_model_type_badge';
 import { PipelinesLogic } from './pipelines_logic';
 
-export const InferencePipelineCard: React.FC<InferencePipeline> = (pipeline) => {
+export const TrainedModelHealthPopover: React.FC<InferencePipeline> = (pipeline) => {
   const { http } = useValues(HttpLogic);
   const { indexName } = useValues(IndexNameLogic);
   const { ingestionMethod } = useValues(IndexViewLogic);
+
+  const { deleteMlPipeline, detachMlPipeline } = useActions(PipelinesLogic);
+
   const [isPopOverOpen, setIsPopOverOpen] = useState(false);
   const [showConfirmDelete, setShowConfirmDelete] = useState(false);
-  const { deleteMlPipeline, detachMlPipeline } = useActions(PipelinesLogic);
-  const showConfirmDeleteModal = () => {
-    setShowConfirmDelete(true);
-    setIsPopOverOpen(false);
-  };
-  const { modelId, pipelineName, types: modelTypes } = pipeline;
-  const modelType = getMLType(modelTypes);
-  const modelTitle = getModelDisplayTitle(modelType);
+
+  const { pipelineName } = pipeline;
+
   const actionButton = (
     <EuiButtonEmpty
       iconSide="right"
@@ -67,119 +63,88 @@ export const InferencePipelineCard: React.FC<InferencePipeline> = (pipeline) =>
     </EuiButtonEmpty>
   );
 
+  const showConfirmDeleteModal = () => {
+    setShowConfirmDelete(true);
+    setIsPopOverOpen(false);
+  };
+
   return (
-    <EuiPanel color="subdued">
-      <EuiFlexGroup alignItems="center">
-        <EuiFlexItem>
-          <EuiFlexGroup direction="column" gutterSize="xs">
+    <>
+      <EuiPopover
+        button={actionButton}
+        isOpen={isPopOverOpen}
+        closePopover={() => setIsPopOverOpen(false)}
+      >
+        <EuiFlexGroup direction="column" gutterSize="none">
+          {pipeline.modelState === TrainedModelState.NotDeployed && (
             <EuiFlexItem>
-              <EuiFlexGroup alignItems="center">
-                <EuiFlexItem>
-                  <EuiTitle size="xs">
-                    <h4>{pipelineName ?? modelTitle}</h4>
-                  </EuiTitle>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false} />
-              </EuiFlexGroup>
-            </EuiFlexItem>
-            {modelTitle && (
-              <EuiFlexItem>
-                <EuiFlexGroup gutterSize="s">
-                  <EuiFlexItem grow={false}>
-                    <EuiTextColor color="subdued">{modelId}</EuiTextColor>
-                  </EuiFlexItem>
-                  <EuiFlexItem>
-                    <span>
-                      <MLModelTypeBadge type={modelType} />
-                    </span>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiPopover
-            button={actionButton}
-            isOpen={isPopOverOpen}
-            closePopover={() => setIsPopOverOpen(false)}
-          >
-            {pipeline.modelState === TrainedModelState.NotDeployed && (
-              <EuiFlexItem grow={false} style={{ paddingRight: '1rem' }}>
-                <EuiToolTip
-                  position="top"
-                  content={i18n.translate(
+              <span>
+                <EuiButtonEmpty
+                  data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-fixIssueInTrainedModels`}
+                  size="s"
+                  flush="both"
+                  iconType="wrench"
+                  color="text"
+                  href={http.basePath.prepend(ML_MANAGE_TRAINED_MODELS_PATH)}
+                >
+                  {i18n.translate(
                     'xpack.enterpriseSearch.inferencePipelineCard.modelState.notDeployed.fixLink',
-                    { defaultMessage: 'Fix issue in Trained Models' }
+                    {
+                      defaultMessage: 'Fix issue in Trained Models',
+                    }
                   )}
-                >
-                  <EuiButtonIcon
-                    aria-label={i18n.translate(
-                      'xpack.enterpriseSearch.inferencePipelineCard.modelState.notDeployed.fixLink',
-                      {
-                        defaultMessage: 'Fix issue in Trained Models',
-                      }
-                    )}
-                    data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-fixIssueInTrainedModels`}
-                    href={http.basePath.prepend(ML_MANAGE_TRAINED_MODELS_PATH)}
-                    display="base"
-                    size="xs"
-                    iconType="wrench"
-                  />
-                </EuiToolTip>
-              </EuiFlexItem>
-            )}
-            <EuiFlexGroup direction="column" gutterSize="none">
-              <EuiFlexItem>
-                <div>
-                  <EuiButtonEmpty
-                    data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-stackManagement`}
-                    size="s"
-                    flush="both"
-                    iconType="eye"
-                    color="text"
-                    href={http.basePath.prepend(
-                      `/app/management/ingest/ingest_pipelines/?pipeline=${pipelineName}`
-                    )}
-                  >
-                    {i18n.translate('xpack.enterpriseSearch.inferencePipelineCard.action.view', {
-                      defaultMessage: 'View in Stack Management',
-                    })}
-                  </EuiButtonEmpty>
-                </div>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <div>
-                  <EuiButtonEmpty
-                    data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-detachPipeline`}
-                    size="s"
-                    flush="both"
-                    iconType="unlink"
-                    color="text"
-                    onClick={() => {
-                      detachMlPipeline({ indexName, pipelineName });
-                      setIsPopOverOpen(false);
-                    }}
-                  >
-                    {i18n.translate('xpack.enterpriseSearch.inferencePipelineCard.action.detach', {
-                      defaultMessage: 'Detach pipeline',
-                    })}
-                  </EuiButtonEmpty>
-                </div>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <div>
-                  <DeleteInferencePipelineButton
-                    data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-deletePipeline`}
-                    onClick={showConfirmDeleteModal}
-                    pipeline={pipeline}
-                  />
-                </div>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPopover>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+                </EuiButtonEmpty>
+              </span>
+            </EuiFlexItem>
+          )}
+          <EuiFlexItem>
+            <span>
+              <EuiButtonEmpty
+                data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-stackManagement`}
+                size="s"
+                flush="both"
+                iconType="eye"
+                color="text"
+                href={http.basePath.prepend(
+                  `/app/management/ingest/ingest_pipelines/?pipeline=${pipelineName}`
+                )}
+              >
+                {i18n.translate('xpack.enterpriseSearch.inferencePipelineCard.action.view', {
+                  defaultMessage: 'View in Stack Management',
+                })}
+              </EuiButtonEmpty>
+            </span>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <span>
+              <EuiButtonEmpty
+                data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-detachPipeline`}
+                size="s"
+                flush="both"
+                iconType="unlink"
+                color="text"
+                onClick={() => {
+                  detachMlPipeline({ indexName, pipelineName });
+                  setIsPopOverOpen(false);
+                }}
+              >
+                {i18n.translate('xpack.enterpriseSearch.inferencePipelineCard.action.detach', {
+                  defaultMessage: 'Detach pipeline',
+                })}
+              </EuiButtonEmpty>
+            </span>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <span>
+              <DeleteInferencePipelineButton
+                data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-deletePipeline`}
+                onClick={showConfirmDeleteModal}
+                pipeline={pipeline}
+              />
+            </span>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPopover>
 
       {showConfirmDelete && (
         <EuiConfirmModal
@@ -217,6 +182,48 @@ export const InferencePipelineCard: React.FC<InferencePipeline> = (pipeline) =>
           </EuiText>
         </EuiConfirmModal>
       )}
+    </>
+  );
+};
+
+export const InferencePipelineCard: React.FC<InferencePipeline> = (pipeline) => {
+  const { modelId, pipelineName, types: modelTypes } = pipeline;
+  const modelType = getMLType(modelTypes);
+  const modelTitle = getModelDisplayTitle(modelType);
+  const isSmallScreen = useIsWithinMaxBreakpoint('s');
+
+  return (
+    <EuiPanel color="subdued">
+      <EuiFlexGroup alignItems="center" gutterSize={isSmallScreen ? 'xs' : undefined}>
+        <EuiFlexItem>
+          <EuiFlexGroup direction="column" gutterSize="xs">
+            <EuiFlexItem>
+              <EuiTitle size="xs">
+                <h4>{pipelineName ?? modelTitle}</h4>
+              </EuiTitle>
+            </EuiFlexItem>
+            {modelTitle && (
+              <EuiFlexItem>
+                <EuiFlexGroup gutterSize="s">
+                  <EuiFlexItem grow={false}>
+                    <EuiText size="s" color="subdued">
+                      {modelId}
+                    </EuiText>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <span>
+                      <MLModelTypeBadge type={modelType} />
+                    </span>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <TrainedModelHealthPopover {...pipeline} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiPanel>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
index deea940cfe68d..49e00f30c12d4 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
@@ -45,21 +45,21 @@ export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipe
     // TODO: Add model state & pipeline info link. Make sure to check mobile rendering when doing this!
     <EuiFlexGroup direction="column" gutterSize="xs">
       <EuiFlexItem>
-        <EuiTitle size="xxs">
-          <h5>{pipeline.pipelineName}</h5>
+        <EuiTitle size="xs">
+          <h4>{pipeline.pipelineName}</h4>
         </EuiTitle>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiFlexGroup gutterSize="s" justifyContent="flexStart">
+        <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="center">
           <EuiFlexItem grow={pipeline.modelType.length === 0}>
             <EuiText size="s">{modelIdDisplay}</EuiText>
           </EuiFlexItem>
           {pipeline.modelType.length > 0 && (
             <EuiFlexItem>
-              {/* Wrap in a div to prevent the badge from growing to a whole row on mobile*/}
-              <div>
+              {/* Wrap in a span to prevent the badge from growing to a whole row on mobile*/}
+              <span>
                 <MLModelTypeBadge type={pipeline.modelType} />
-              </div>
+              </span>
             </EuiFlexItem>
           )}
         </EuiFlexGroup>