Fix linter issues

elastic · Sep 24, 2024 · e9b1124 · e9b1124
1 parent 1d27973
commit e9b1124
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 99 deletions.
diff --git a/src/plugins/console/public/application/components/help_popover.tsx b/src/plugins/console/public/application/components/help_popover.tsx
@@ -7,17 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import {
-  EuiPopover,
-  EuiTitle,
-  EuiText,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButtonIcon,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiPopover, EuiTitle, EuiText, EuiPanel, EuiSpacer, EuiListGroup } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { useServicesContext } from '../contexts';
 
 interface HelpPopoverProps {
@@ -27,9 +20,81 @@ interface HelpPopoverProps {
   resetTour: () => void;
 }
 
+const styles = {
+  // Hide the external svg icon for the link given that we have a custom icon for it.
+  // Also remove the the hover effect on the action icon since it's a bit distracting.
+  listItem: css`
+    .euiListGroupItem__button {
+      > svg {
+        display: none;
+      }
+    }
+
+    .euiButtonIcon:hover {
+      background: transparent;
+    }
+  `,
+};
+
 export const HelpPopover = ({ button, isOpen, closePopover, resetTour }: HelpPopoverProps) => {
   const { docLinks } = useServicesContext();
 
+  const listItems = useMemo(
+    () => [
+      {
+        label: i18n.translate('console.helpPopover.aboutConsoleLabel', {
+          defaultMessage: 'About Console',
+        }),
+        href: docLinks.console.guide,
+        target: '_blank',
+        css: styles.listItem,
+        extraAction: {
+          iconType: 'popout',
+          href: docLinks.console.guide,
+          target: '_blank',
+          alwaysShow: true,
+          'aria-label': i18n.translate('console.helpPopover.aboutConsoleButtonAriaLabel', {
+            defaultMessage: 'About Console link',
+          }),
+        },
+      },
+      {
+        label: i18n.translate('console.helpPopover.aboutQueryDSLLabel', {
+          defaultMessage: 'About Query DSL',
+        }),
+        href: docLinks.query.queryDsl,
+        target: '_blank',
+        css: styles.listItem,
+        extraAction: {
+          iconType: 'popout',
+          href: docLinks.query.queryDsl,
+          target: '_blank',
+          alwaysShow: true,
+          'aria-label': i18n.translate('console.helpPopover.aboutQueryDSLButtonAriaLabel', {
+            defaultMessage: 'About QueryDSL link',
+          }),
+        },
+      },
+      {
+        label: i18n.translate('console.helpPopover.rerunTourLabel', {
+          defaultMessage: 'Re-run feature tour',
+        }),
+        css: styles.listItem,
+        onClick: resetTour,
+        extraAction: {
+          iconType: 'refresh',
+          alwaysShow: true,
+          onClick: resetTour,
+          'data-test-subj': 'consoleRerunTourButton',
+          'aria-label': i18n.translate('console.helpPopover.rerunTourButtonAriaLabel', {
+            defaultMessage: 'Re-run feature tour button',
+          }),
+        },
+      },
+    ],
+    [docLinks, resetTour]
+  );
+
   return (
     <EuiPopover
       button={button}
@@ -38,99 +103,31 @@ export const HelpPopover = ({ button, isOpen, closePopover, resetTour }: HelpPop
       anchorPosition="downRight"
       buffer={4}
       ownFocus={false}
+      panelPaddingSize="none"
       data-test-subj="consoleHelpPopover"
     >
-      <EuiTitle size="xs">
-        <h4>
-          {i18n.translate('console.helpPopover.title', {
-            defaultMessage: 'Elastic Console',
-          })}
-        </h4>
-      </EuiTitle>
-
-      <EuiSpacer size="s" />
-
-      <EuiText style={{ width: 300 }} color="subdued" size="s">
-        <p>
-          {i18n.translate('console.helpPopover.description', {
-            defaultMessage:
-              'Console is an interactive UI for calling Elasticsearch and Kibana APIs and viewing their responses. Search your data, manage settings, and more, using Query DSL and REST API syntax.',
-          })}
-        </p>
-      </EuiText>
-
-      <EuiSpacer />
+      <EuiPanel paddingSize="m" hasShadow={false} hasBorder={false}>
+        <EuiTitle size="xs">
+          <h4>
+            {i18n.translate('console.helpPopover.title', {
+              defaultMessage: 'Elastic Console',
+            })}
+          </h4>
+        </EuiTitle>
 
-      <EuiFlexGroup gutterSize="m" direction="column">
-        <EuiFlexItem>
-          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-            <EuiFlexItem grow={false}>
-              <p>
-                {i18n.translate('console.helpPopover.aboutConsoleLabel', {
-                  defaultMessage: 'About Console',
-                })}
-              </p>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonIcon
-                iconType="popout"
-                href={docLinks.console.guide}
-                target="_blank"
-                color="text"
-                aria-label={i18n.translate('console.helpPopover.aboutConsoleButtonAriaLabel', {
-                  defaultMessage: 'About Console link',
-                })}
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
+        <EuiSpacer size="s" />
 
-        <EuiFlexItem>
-          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-            <EuiFlexItem grow={false}>
-              <p>
-                {i18n.translate('console.helpPopover.aboutQueryDSLLabel', {
-                  defaultMessage: 'About Query DSL',
-                })}
-              </p>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonIcon
-                iconType="popout"
-                href={docLinks.query.queryDsl}
-                target="_blank"
-                color="text"
-                aria-label={i18n.translate('console.helpPopover.aboutQueryDSLButtonAriaLabel', {
-                  defaultMessage: 'About QueryDSL link',
-                })}
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
+        <EuiText style={{ width: 300 }} color="subdued" size="s">
+          <p>
+            {i18n.translate('console.helpPopover.description', {
+              defaultMessage:
+                'Console is an interactive UI for calling Elasticsearch and Kibana APIs and viewing their responses. Search your data, manage settings, and more, using Query DSL and REST API syntax.',
+            })}
+          </p>
+        </EuiText>
+      </EuiPanel>
 
-        <EuiFlexItem>
-          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-            <EuiFlexItem grow={false}>
-              <p>
-                {i18n.translate('console.helpPopover.rerunTourLabel', {
-                  defaultMessage: 'Re-run feature tour',
-                })}
-              </p>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonIcon
-                iconType="refresh"
-                onClick={resetTour}
-                color="text"
-                aria-label={i18n.translate('console.helpPopover.rerunTourButtonAriaLabel', {
-                  defaultMessage: 'Re-run feature tour button',
-                })}
-                data-test-subj="consoleRerunTourButton"
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <EuiListGroup listItems={listItems} color="primary" size="s" />
     </EuiPopover>
   );
 };
diff --git a/src/plugins/console/public/application/containers/history/history.tsx b/src/plugins/console/public/application/containers/history/history.tsx
@@ -65,7 +65,9 @@ const CheckeableCardLabel = ({ historyItem }: { historyItem: HistoryProps }) =>
     <EuiFlexGroup>
       <EuiFlexItem>
         <EuiText size="s">
-          <b>{historyItem.endpoint}</b>
+          <b>
+            {historyItem.method} - {historyItem.endpoint}
+          </b>
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>