[SIEM] Map Docs Link & Intrinsic Ratios (#49267)

* rough out markup and intrinsic ratio poc

* reorganize comps

* media queries for aspect ratios

* disable ratio when error; add translations

* unit tests, translations & cleanup

* update copy per ben’s suggestions

* snapshots and translations

* move paddingSize prop inline

* change panel selector

* fix FormattedMessage id

* update snapshots

x-pack/legacy/plugins/siem/public/components/embeddables/embeddable.test.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+
+import '../../mock/ui_settings';
+import { TestProviders } from '../../mock';
+import { Embeddable } from './embeddable';
+
+jest.mock('../../lib/settings/use_kibana_ui_setting');
+
+describe('Embeddable', () => {
+  test('it renders', () => {
+    const wrapper = shallow(
+      <TestProviders>
+        <Embeddable>
+          <p>{'Test content'}</p>
+        </Embeddable>
+      </TestProviders>
+    );
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});

x-pack/legacy/plugins/siem/public/components/embeddables/embeddable.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiPanel } from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+
+const Panel = styled(EuiPanel)`
+  overflow: hidden;
+`;
+Panel.displayName = 'Panel';
+
+export interface EmbeddableProps {
+  children: React.ReactNode;
+}
+
+export const Embeddable = React.memo<EmbeddableProps>(({ children }) => (
+  <section className="siemEmbeddable">
+    <Panel paddingSize="none">{children}</Panel>
+  </section>
+));
+Embeddable.displayName = 'Embeddable';

x-pack/legacy/plugins/siem/public/components/embeddables/embeddable_header.test.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+
+import '../../mock/ui_settings';
+import { TestProviders } from '../../mock';
+import { EmbeddableHeader } from './embeddable_header';
+
+jest.mock('../../lib/settings/use_kibana_ui_setting');
+
+describe('EmbeddableHeader', () => {
+  test('it renders', () => {
+    const wrapper = shallow(
+      <TestProviders>
+        <EmbeddableHeader title="Test title" />
+      </TestProviders>
+    );
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  test('it renders the title', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <EmbeddableHeader title="Test title" />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="header-embeddable-title"]')
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it renders supplements when children provided', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <EmbeddableHeader title="Test title">
+          <p>{'Test children'}</p>
+        </EmbeddableHeader>
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="header-embeddable-supplements"]')
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it DOES NOT render supplements when children not provided', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <EmbeddableHeader title="Test title" />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="header-embeddable-supplements"]')
+        .first()
+        .exists()
+    ).toBe(false);
+  });
+});

x-pack/legacy/plugins/siem/public/components/embeddables/embeddable_header.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+const Header = styled.header.attrs({
+  className: 'siemEmbeddable__header',
+})`
+  ${({ theme }) => css`
+    border-bottom: ${theme.eui.euiBorderThin};
+    padding: ${theme.eui.paddingSizes.m};
+  `}
+`;
+Header.displayName = 'Header';
+
+export interface EmbeddableHeaderProps {
+  children?: React.ReactNode;
+  title: string | React.ReactNode;
+}
+
+export const EmbeddableHeader = React.memo<EmbeddableHeaderProps>(({ children, title }) => (
+  <Header>
+    <EuiFlexGroup alignItems="center" gutterSize="m">
+      <EuiFlexItem>
+        <EuiTitle size="xxxs">
+          <h6 data-test-subj="header-embeddable-title">{title}</h6>
+        </EuiTitle>
+      </EuiFlexItem>
+
+      {children && (
+        <EuiFlexItem data-test-subj="header-embeddable-supplements" grow={false}>
+          {children}
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  </Header>
+));
+EmbeddableHeader.displayName = 'EmbeddableHeader';