update lens to use SearchResponseWarningsBadgePopoverContent

elastic · Oct 24, 2023 · 17d2f1b · 17d2f1b
1 parent b0d06b4
commit 17d2f1b
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 32 deletions.
diff --git a/packages/kbn-search-response-warnings/index.ts b/packages/kbn-search-response-warnings/index.ts
@@ -10,6 +10,7 @@ export type { SearchResponseWarning, WarningHandlerCallback } from './src/types'
 
 export {
   SearchResponseWarningsBadge,
+  SearchResponseWarningsBadgePopoverContent,
   SearchResponseWarningsCallout,
   SearchResponseWarningsEmptyPrompt,
 } from './src/components/search_response_warnings';

diff --git a/...earch-response-warnings/src/components/search_response_warnings/badge_popover_content.tsx b/...earch-response-warnings/src/components/search_response_warnings/badge_popover_content.tsx
@@ -56,6 +56,7 @@ export const SearchResponseWarningsBadgePopoverContent = (props: Props) => {
         </EuiText>
         <EuiButtonEmpty
           color="primary"
+          flush="left"
           iconSide={props.warnings.length > 1 ? 'right' : undefined}
           iconType={props.warnings.length > 1 ? 'arrowRight' : undefined}
           onClick={() => {

diff --git a/packages/kbn-search-response-warnings/src/components/search_response_warnings/index.ts b/packages/kbn-search-response-warnings/src/components/search_response_warnings/index.ts
@@ -7,5 +7,6 @@
  */
 
 export { SearchResponseWarningsBadge } from './badge';
+export { SearchResponseWarningsBadgePopoverContent } from './badge_popover_content';
 export { SearchResponseWarningsCallout } from './callout';
 export { SearchResponseWarningsEmptyPrompt } from './empty_prompt';
diff --git a/x-pack/plugins/lens/public/datasources/form_based/utils.tsx b/x-pack/plugins/lens/public/datasources/form_based/utils.tsx
@@ -19,7 +19,7 @@ import { groupBy, escape, uniq, uniqBy } from 'lodash';
 import type { Query } from '@kbn/data-plugin/common';
 import { SearchRequest } from '@kbn/data-plugin/common';
 
-import { type SearchResponseWarning, ViewWarningButton } from '@kbn/search-response-warnings';
+import { type SearchResponseWarning, SearchResponseWarningsBadgePopoverContent } from '@kbn/search-response-warnings';
 
 import { estypes } from '@elastic/elasticsearch';
 import { isQueryValid } from '@kbn/visualization-ui-components';
@@ -307,19 +307,10 @@ export function getSearchWarningMessages(
               displayLocations: [{ id: 'toolbar' }, { id: 'embeddableBadge' }],
               shortMessage: '',
               longMessage: (closePopover) => (
-                <>
-                  <EuiText size="s">{warning.message}</EuiText>
-                  <EuiSpacer size="s" />
-                  <ViewWarningButton
-                    onClick={() => {
-                      closePopover();
-                      warning.openInInspector();
-                    }}
-                    size="m"
-                    color="primary"
-                    isButtonEmpty={true}
-                  />
-                </>
+                <SearchResponseWarningsBadgePopoverContent
+                  onViewDetailsClick={closePopover}
+                  warnings={[warning]}
+                />
               ),
             } as UserMessage,
           ];

diff --git a/...k/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/message_list.scss b/...k/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/message_list.scss
@@ -11,13 +11,15 @@
 }
 
 .lnsWorkspaceWarningList__item {
-  padding: $euiSize;
-
   & + & {
     border-top: $euiBorderThin;
   }
 }
 
+.lnsWorkspaceWarningList__textItem {
+  padding: $euiSize;
+}
+
 .lnsWorkspaceWarningList__description {
   overflow-wrap: break-word;
   min-width: 0;

diff --git a/...ck/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/message_list.tsx b/...ck/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/message_list.tsx
@@ -113,22 +113,23 @@ export const MessageList = ({
             className="lnsWorkspaceWarningList__item"
             data-test-subj={`lens-message-list-${message.severity}`}
           >
-            <EuiFlexGroup gutterSize="s" responsive={false}>
-              <EuiFlexItem grow={false}>
-                {message.severity === 'error' ? (
-                  <EuiIcon type="error" color="danger" />
-                ) : (
-                  <EuiIcon type="alert" color="warning" />
-                )}
-              </EuiFlexItem>
-              <EuiFlexItem grow={1} className="lnsWorkspaceWarningList__description">
-                <EuiText size="s">
-                  {typeof message.longMessage === 'function'
-                    ? message.longMessage(closePopover)
-                    : message.longMessage}
-                </EuiText>
-              </EuiFlexItem>
-            </EuiFlexGroup>
+            {typeof message.longMessage === 'function'
+              ? message.longMessage(closePopover)
+              : <EuiFlexGroup gutterSize="s" responsive={false} className="lnsWorkspaceWarningList__textItem">
+                  <EuiFlexItem grow={false}>
+                    {message.severity === 'error' ? (
+                      <EuiIcon type="error" color="danger" />
+                    ) : (
+                      <EuiIcon type="alert" color="warning" />
+                    )}
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={1} className="lnsWorkspaceWarningList__description">
+                    <EuiText size="s">
+                      {message.longMessage}
+                    </EuiText>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+            }
           </li>
         ))}
       </ul>