[Infra UI] Asset Details Flyout: Add tooltip with documentation link in metadata summary (#162132)

## Summary

This PR adds a tooltip with a documentation link in the metadata summary
inside the asset details overview section. It should appear only if we
have defined documentation link so currently only for the `host.ip`
field

<img width="1918" alt="Screenshot 2023-07-18 at 13 13 25"
src="e5ef2067-3a3b-48fd-a395-b763a6832bd1">

## Storybook

<img width="1917" alt="image"
src="dfbd0118-b0ff-475b-a545-9e7278815098">


## Testing
- Go to host view and open the asset details flyout for any host
- Go to the overview tab
- A question mark icon should appear next to the host ip title inside
the metadata section
- Click on the icon and check the tooltip
- the `host.ip` link should open the documentation page for the field in
a new tab



c83dcefd-34b1-4f61-aa96-b9fd0e6ef07b

x-pack/plugins/infra/public/components/asset_details/tabs/overview/metadata_summary.tsx

@@ -12,12 +12,16 @@ import {
   EuiFlexItem,
   EuiDescriptionList,
   EuiDescriptionListDescription,
+  EuiIcon,
+  EuiLink,
   EuiLoadingSpinner,
+  EuiPopover,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { useBoolean } from '../../../../hooks/use_boolean';
 import type { InfraMetadata } from '../../../../../common/http_api';
 import { NOT_AVAILABLE_LABEL } from '../../translations';
 import { useTabSwitcherContext } from '../../hooks/use_tab_switcher';
@@ -42,6 +46,8 @@ const metadataData = (metadataInfo: InfraMetadata['info']) => [
   {
     field: 'hostIp',
     value: metadataInfo?.host?.ip,
+    tooltipLinkLabel: 'host.ip',
+    tooltipLink: 'https://www.elastic.co/guide/en/ecs/current/ecs-host.html#field-host-ip',
   },
   {
     field: 'hostOsVersion',
@@ -55,6 +61,7 @@ interface MetadataSummaryProps {
 }
 
 export const MetadataSummary = ({ metadata, metadataLoading }: MetadataSummaryProps) => {
+  const [isPopoverOpen, { off: closePopover, toggle: togglePopover }] = useBoolean(false);
   const { showTab } = useTabSwitcherContext();
 
   const onClick = () => {
@@ -62,46 +69,81 @@ export const MetadataSummary = ({ metadata, metadataLoading }: MetadataSummaryPr
   };
 
   return (
-    <>
-      <EuiFlexGroup gutterSize="m" responsive={false} wrap justifyContent="spaceBetween">
-        <EuiFlexGroup alignItems="flexStart">
-          {metadataData(metadata?.info).map((metadataValue) => (
-            <EuiFlexItem key={metadataValue.field}>
-              <EuiDescriptionList data-test-subj="infraMetadataSummaryItem" compressed>
-                <EuiDescriptionListTitle
-                  css={css`
-                    white-space: nowrap;
-                  `}
-                >
-                  {columnTitles[metadataValue.field as MetadataFields]}
-                </EuiDescriptionListTitle>
-                <EuiDescriptionListDescription>
-                  {metadataLoading ? (
-                    <EuiLoadingSpinner />
-                  ) : (
-                    <ExpandableContent values={metadataValue.value ?? NOT_AVAILABLE_LABEL} />
-                  )}
-                </EuiDescriptionListDescription>
-              </EuiDescriptionList>
-            </EuiFlexItem>
-          ))}
-        </EuiFlexGroup>
-        <EuiFlexItem grow={false} key="metadata-link">
-          <EuiButtonEmpty
-            data-test-subj="infraMetadataSummaryShowAllMetadataButton"
-            onClick={onClick}
-            size="xs"
-            flush="both"
-            iconSide="right"
-            iconType="sortRight"
-          >
-            <FormattedMessage
-              id="xpack.infra.assetDetailsEmbeddable.metadataSummary.showAllMetadataButton"
-              defaultMessage="Show all"
-            />
-          </EuiButtonEmpty>
-        </EuiFlexItem>
+    <EuiFlexGroup gutterSize="m" responsive={false} wrap justifyContent="spaceBetween">
+      <EuiFlexGroup alignItems="flexStart">
+        {metadataData(metadata?.info).map((metadataValue) => (
+          <EuiFlexItem key={metadataValue.field}>
+            <EuiDescriptionList data-test-subj="infraMetadataSummaryItem" compressed>
+              <EuiDescriptionListTitle
+                css={css`
+                  white-space: nowrap;
+                `}
+              >
+                <EuiFlexGroup gutterSize="xs">
+                  <EuiFlexItem grow={false}>
+                    {columnTitles[metadataValue.field as MetadataFields]}
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    {metadataValue.tooltipLink && (
+                      <EuiPopover
+                        button={
+                          <EuiIcon
+                            data-test-subj="assetDetailsMetadataSummaryPopoverButton"
+                            type="questionInCircle"
+                            onClick={togglePopover}
+                          />
+                        }
+                        isOpen={isPopoverOpen}
+                        closePopover={closePopover}
+                        repositionOnScroll
+                        anchorPosition="upCenter"
+                      >
+                        <FormattedMessage
+                          id="xpack.infra.assetDetails.overviewMetadata.tooltip.documentationLabel"
+                          defaultMessage="See {documentation} for more details."
+                          values={{
+                            documentation: (
+                              <EuiLink
+                                data-test-subj="assetDetailsTooltipDocumentationLink"
+                                href={metadataValue.tooltipLink}
+                                target="_blank"
+                              >
+                                {metadataValue.tooltipLinkLabel}
+                              </EuiLink>
+                            ),
+                          }}
+                        />
+                      </EuiPopover>
+                    )}
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                {metadataLoading ? (
+                  <EuiLoadingSpinner />
+                ) : (
+                  <ExpandableContent values={metadataValue.value ?? NOT_AVAILABLE_LABEL} />
+                )}
+              </EuiDescriptionListDescription>
+            </EuiDescriptionList>
+          </EuiFlexItem>
+        ))}
       </EuiFlexGroup>
-    </>
+      <EuiFlexItem grow={false} key="metadata-link">
+        <EuiButtonEmpty
+          data-test-subj="infraMetadataSummaryShowAllMetadataButton"
+          onClick={onClick}
+          size="xs"
+          flush="both"
+          iconSide="right"
+          iconType="sortRight"
+        >
+          <FormattedMessage
+            id="xpack.infra.assetDetailsEmbeddable.metadataSummary.showAllMetadataButton"
+            defaultMessage="Show all"
+          />
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };