[SIEM] Detection engine placeholders (#50220) (#50909)

* attempt at getting nav working

* fix detection-engine href redirect issue

* rough out basic page routing

* kql placeholder

* update page and panel headers

* rough out card table poc styles

* change HeaderPanel to HeaderSection

* cleanup and unit test updates

* rough out utilityBar poc

* clean up UtilityBar naming and styles

* support popovers in utility bar

* refactor icon side

* UtilityBar unit tests

* remove page tests for now

* adjust routes

* add comment

* cleanup chart

* open/closed signals content toggle

* remove EuiFilterButton icons

* fix misaligned popover button

* add split prop for HeaderSection

* fleshing out activity monitor table

* update global header to include logo

* fix tests

* correct table types; thanks Garrett!

* LinkIcon comp poc

* fix bugs, errors, tests

* rm import

* table cleanup

* correct merge errors

* switch All Rules to EuiBasicTable

* expand table types and values

* fleshing out all rules table

* rough out rule details

* move chart to separate comp

* update supplement layout

* example rule fail

* switch to new discover-style search

* add ProgressInline comp

* update unit tests and snapshots

* cleanup

* correct merge weirdness

* move text styles to all subtitle items

* correct invalid nav markup; update tests; cleanup

* fix console errors

* add empty page

* change to EuiButtonEmpty in HeaderGlobal

* overflow popover

* rough out edit layout

* new WrapperPage comp POC

* cleanup

* var for timeline gutter

* tests and snapshots update

* fix type + review + re-arrange code

* adding feature flag + fix route issue

* fix type with unit test

* Removing unused translation

x-pack/legacy/plugins/siem/cypress/integration/lib/navigation/selectors.ts

@@ -5,16 +5,16 @@
  */
 
 /** Top-level (global) navigation link to the `Hosts` page */
-export const NAVIGATION_HOSTS = '[data-test-subj="navigation-link-hosts"]';
+export const NAVIGATION_HOSTS = '[data-test-subj="navigation-hosts"]';
 
 /** Top-level (global) navigation link to the `Network` page */
-export const NAVIGATION_NETWORK = '[data-test-subj="navigation-link-network"]';
+export const NAVIGATION_NETWORK = '[data-test-subj="navigation-network"]';
 
 /** Top-level (global) navigation link to the `Overview` page */
-export const NAVIGATION_OVERVIEW = '[data-test-subj="navigation-link-overview"]';
+export const NAVIGATION_OVERVIEW = '[data-test-subj="navigation-overview"]';
 
 /** Top-level (global) navigation link to the `Timelines` page */
-export const NAVIGATION_TIMELINES = '[data-test-subj="navigation-link-timelines"]';
+export const NAVIGATION_TIMELINES = '[data-test-subj="navigation-timelines"]';
 
 export const HOSTS_PAGE_TABS = {
   allHosts: '[data-test-subj="navigation-allHosts"]',

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+export { UtilityBar } from './utility_bar';
+export { UtilityBarAction } from './utility_bar_action';
+export { UtilityBarGroup } from './utility_bar_group';
+export { UtilityBarSection } from './utility_bar_section';
+export { UtilityBarText } from './utility_bar_text';

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/styles.tsx

@@ -0,0 +1,118 @@
+/*
+ * 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 styled, { css } from 'styled-components';
+
+/**
+ * UTILITY BAR
+ */
+
+export interface BarProps {
+  border?: boolean;
+}
+
+export const Bar = styled.aside.attrs({
+  className: 'siemUtilityBar',
+})<BarProps>`
+  ${({ border, theme }) => css`
+    ${border &&
+      css`
+        border-bottom: ${theme.eui.euiBorderThin};
+        padding-bottom: ${theme.eui.paddingSizes.s};
+      `}
+
+    @media only screen and (min-width: ${theme.eui.euiBreakpoints.l}) {
+      display: flex;
+      justify-content: space-between;
+    }
+  `}
+`;
+Bar.displayName = 'Bar';
+
+export const BarSection = styled.div.attrs({
+  className: 'siemUtilityBar__section',
+})`
+  ${({ theme }) => css`
+    & + & {
+      margin-top: ${theme.eui.euiSizeS};
+    }
+
+    @media only screen and (min-width: ${theme.eui.euiBreakpoints.m}) {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    @media only screen and (min-width: ${theme.eui.euiBreakpoints.l}) {
+      & + & {
+        margin-top: 0;
+        margin-left: ${theme.eui.euiSize};
+      }
+    }
+  `}
+`;
+BarSection.displayName = 'BarSection';
+
+export const BarGroup = styled.div.attrs({
+  className: 'siemUtilityBar__group',
+})`
+  ${({ theme }) => css`
+    align-items: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+
+    & + & {
+      margin-top: ${theme.eui.euiSizeS};
+    }
+
+    @media only screen and (min-width: ${theme.eui.euiBreakpoints.m}) {
+      border-right: ${theme.eui.euiBorderThin};
+      flex-wrap: nowrap;
+      margin-right: ${theme.eui.paddingSizes.m};
+      padding-right: ${theme.eui.paddingSizes.m};
+
+      & + & {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        border-right: none;
+        margin-right: 0;
+        padding-right: 0;
+      }
+    }
+
+    & > * {
+      margin-right: ${theme.eui.euiSize};
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  `}
+`;
+BarGroup.displayName = 'BarGroup';
+
+export const BarText = styled.p.attrs({
+  className: 'siemUtilityBar__text',
+})`
+  ${({ theme }) => css`
+    color: ${theme.eui.textColors.subdued};
+    font-size: ${theme.eui.euiFontSizeXS};
+    line-height: ${theme.eui.euiLineHeight};
+    white-space: nowrap;
+  `}
+`;
+BarText.displayName = 'BarText';
+
+export const BarAction = styled.div.attrs({
+  className: 'siemUtilityBar__action',
+})`
+  ${({ theme }) => css`
+    font-size: ${theme.eui.euiFontSizeXS};
+    line-height: ${theme.eui.euiLineHeight};
+  `}
+`;
+BarAction.displayName = 'BarAction';

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.test.tsx

@@ -0,0 +1,113 @@
+/*
+ * 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 euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import 'jest-styled-components';
+import React from 'react';
+
+import '../../../mock/ui_settings';
+import { TestProviders } from '../../../mock';
+import {
+  UtilityBar,
+  UtilityBarAction,
+  UtilityBarGroup,
+  UtilityBarSection,
+  UtilityBarText,
+} from './index';
+
+jest.mock('../../../lib/settings/use_kibana_ui_setting');
+
+describe('UtilityBar', () => {
+  test('it renders', () => {
+    const wrapper = shallow(
+      <TestProviders>
+        <UtilityBar>
+          <UtilityBarSection>
+            <UtilityBarGroup>
+              <UtilityBarText>{'Test text'}</UtilityBarText>
+            </UtilityBarGroup>
+
+            <UtilityBarGroup>
+              <UtilityBarAction iconType="" popoverContent={<p>{'Test popover'}</p>}>
+                {'Test action'}
+              </UtilityBarAction>
+            </UtilityBarGroup>
+          </UtilityBarSection>
+
+          <UtilityBarSection>
+            <UtilityBarGroup>
+              <UtilityBarAction iconType="cross">{'Test action'}</UtilityBarAction>
+            </UtilityBarGroup>
+          </UtilityBarSection>
+        </UtilityBar>
+      </TestProviders>
+    );
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  test('it applies border styles when border is true', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <UtilityBar border>
+          <UtilityBarSection>
+            <UtilityBarGroup>
+              <UtilityBarText>{'Test text'}</UtilityBarText>
+            </UtilityBarGroup>
+
+            <UtilityBarGroup>
+              <UtilityBarAction iconType="" popoverContent={<p>{'Test popover'}</p>}>
+                {'Test action'}
+              </UtilityBarAction>
+            </UtilityBarGroup>
+          </UtilityBarSection>
+
+          <UtilityBarSection>
+            <UtilityBarGroup>
+              <UtilityBarAction iconType="cross">{'Test action'}</UtilityBarAction>
+            </UtilityBarGroup>
+          </UtilityBarSection>
+        </UtilityBar>
+      </TestProviders>
+    );
+    const siemUtilityBar = wrapper.find('.siemUtilityBar').first();
+
+    expect(siemUtilityBar).toHaveStyleRule('border-bottom', euiDarkVars.euiBorderThin);
+    expect(siemUtilityBar).toHaveStyleRule('padding-bottom', euiDarkVars.paddingSizes.s);
+  });
+
+  test('it DOES NOT apply border styles when border is false', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <UtilityBar>
+          <UtilityBarSection>
+            <UtilityBarGroup>
+              <UtilityBarText>{'Test text'}</UtilityBarText>
+            </UtilityBarGroup>
+
+            <UtilityBarGroup>
+              <UtilityBarAction iconType="" popoverContent={<p>{'Test popover'}</p>}>
+                {'Test action'}
+              </UtilityBarAction>
+            </UtilityBarGroup>
+          </UtilityBarSection>
+
+          <UtilityBarSection>
+            <UtilityBarGroup>
+              <UtilityBarAction iconType="cross">{'Test action'}</UtilityBarAction>
+            </UtilityBarGroup>
+          </UtilityBarSection>
+        </UtilityBar>
+      </TestProviders>
+    );
+    const siemUtilityBar = wrapper.find('.siemUtilityBar').first();
+
+    expect(siemUtilityBar).not.toHaveStyleRule('border-bottom', euiDarkVars.euiBorderThin);
+    expect(siemUtilityBar).not.toHaveStyleRule('padding-bottom', euiDarkVars.paddingSizes.s);
+  });
+});

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.tsx

@@ -0,0 +1,18 @@
+/*
+ * 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 React from 'react';
+
+import { Bar, BarProps } from './styles';
+
+export interface UtilityBarProps extends BarProps {
+  children: React.ReactNode;
+}
+
+export const UtilityBar = React.memo<UtilityBarProps>(({ border, children }) => (
+  <Bar border={border}>{children}</Bar>
+));
+UtilityBar.displayName = 'UtilityBar';