[SECURITY_SOLUTION] Trusted apps list expand/collapse details (#78601) (#78989)

Co-authored-by: Bohdan Tsymbala <bohdan.tsymbala@elastic.co>

Author: kevinlog

x-pack/plugins/security_solution/public/common/components/conditions_table/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,27 @@
+/*
+ * 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 { ThemeProvider } from 'styled-components';
+import { storiesOf, addDecorator } from '@storybook/react';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+
+import { createItems, TEST_COLUMNS } from './test_utils';
+import { ConditionsTable } from '.';
+
+addDecorator((storyFn) => (
+  <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>{storyFn()}</ThemeProvider>
+));
+
+storiesOf('Components|ConditionsTable', module)
+  .add('single item', () => {
+    return <ConditionsTable items={createItems(1)} columns={TEST_COLUMNS} badge="and" />;
+  })
+  .add('and', () => {
+    return <ConditionsTable items={createItems(3)} columns={TEST_COLUMNS} badge="and" />;
+  })
+  .add('or', () => {
+    return <ConditionsTable items={createItems(3)} columns={TEST_COLUMNS} badge="or" />;
+  });

x-pack/plugins/security_solution/public/common/components/conditions_table/index.stories.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 React from 'react';
+
+import { ConditionsTable } from '.';
+import { createItems, TEST_COLUMNS } from './test_utils';
+
+describe('conditions_table', () => {
+  describe('ConditionsTable', () => {
+    it('should render single item table correctly', () => {
+      const element = shallow(
+        <ConditionsTable badge="and" columns={TEST_COLUMNS} items={createItems(1)} />
+      );
+
+      expect(element).toMatchSnapshot();
+    });
+
+    it('should render multi item table with and badge correctly', () => {
+      const element = shallow(
+        <ConditionsTable badge="and" columns={TEST_COLUMNS} items={createItems(3)} />
+      );
+
+      expect(element).toMatchSnapshot();
+    });
+
+    it('should render multi item table with or badge correctly', () => {
+      const element = shallow(
+        <ConditionsTable badge="or" columns={TEST_COLUMNS} items={createItems(3)} />
+      );
+
+      expect(element).toMatchSnapshot();
+    });
+  });
+});

x-pack/plugins/security_solution/public/common/components/conditions_table/index.test.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 styled from 'styled-components';
+import {
+  EuiBasicTableProps,
+  EuiBasicTable,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHideFor,
+} from '@elastic/eui';
+
+import { AndOr, AndOrBadge } from '../and_or_badge';
+
+const AndOrBadgeContainer = styled(EuiFlexItem)`
+  padding-top: ${({ theme }) => theme.eui.euiSizeXL};
+  padding-bottom: ${({ theme }) => theme.eui.euiSizeS};
+`;
+
+type ConditionsTableProps<T> = EuiBasicTableProps<T> & {
+  badge: AndOr;
+};
+
+export const ConditionsTable = <T,>({ badge, ...props }: ConditionsTableProps<T>) => {
+  return (
+    <EuiFlexGroup direction="row" gutterSize="none">
+      {props.items.length > 1 && (
+        <EuiHideFor sizes={['xs', 's']}>
+          <AndOrBadgeContainer grow={false}>
+            <AndOrBadge type={badge} includeAntennas />
+          </AndOrBadgeContainer>
+        </EuiHideFor>
+      )}
+      <EuiFlexItem grow={1}>
+        <EuiBasicTable {...props} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+ConditionsTable.displayName = 'ConditionsTable';

x-pack/plugins/security_solution/public/common/components/conditions_table/index.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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 { EuiTableFieldDataColumnType } from '@elastic/eui';
+
+export interface TestItem {
+  name: string;
+  value: string;
+}
+
+export const TEST_COLUMNS: Array<EuiTableFieldDataColumnType<TestItem>> = [
+  { field: 'name', name: 'Name', textOnly: true, width: '50%' },
+  { field: 'value', name: 'Value', textOnly: true, width: '50%' },
+];
+
+export const createItems = (count: number): TestItem[] =>
+  [...new Array(count).keys()].map((item) => ({ name: `item ${item}`, value: `value ${item}` }));