Skip to content

Commit

Permalink
move utiitly out of package until moving all + fixing css
Browse files Browse the repository at this point in the history
  • Loading branch information
WafaaNasr committed Sep 27, 2022
1 parent 853cedc commit a633535
Show file tree
Hide file tree
Showing 20 changed files with 202 additions and 186 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@ load("@npm//@bazel/typescript:index.bzl", "ts_config")
load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")


PKG_DIRNAME = "kbn-securitysolution-exception-list-components"
PKG_REQUIRE_NAME = "@kbn/securitysolution-exception-list-components"

SOURCE_FILES = glob(
[
"**/*.ts",
"**/*.tsx",
"**/*.svg",
"**/*.d.ts",
],
exclude = [
"**/*.config.js",
Expand Down Expand Up @@ -56,6 +59,7 @@ RUNTIME_DEPS = [
"//packages/kbn-i18n",
"@npm//@elastic/eui",
"@npm//@emotion/css",
"@npm//@emotion/react",
"@npm//@testing-library/jest-dom",
"@npm//jest",
]
Expand All @@ -79,7 +83,9 @@ TYPES_DEPS = [
"//packages/kbn-i18n-react:npm_module_types",
"@npm//@elastic/eui",
"@npm//@emotion/css",
"@npm//@emotion/react",
"@npm//jest",

]

jsts_transpiler(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
export * from './src/search_bar/search_bar';
export * from './src/empty_viewer_state/empty_viewer_state';
export * from './src/pagination/pagination';
export * from './src/exceptions_utility/exceptions_utility';
// export * from './src/exceptions_utility/exceptions_utility';
export * from './src/exception_items/exception_items';
export * from './src/exception_item_card';
export * from './src/value_with_space_warning';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@
*/

export const illustrationImageURL =
'../assets/images/illustration_product_no_results_magnifying_glass.svg';
'./assets/images/illustration_product_no_results_magnifying_glass.svg';
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

declare module '*.svg' {
const content: string;
// eslint-disable-next-line import/no-default-export
export default content;
}
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

import React, { useMemo } from 'react';
import type { FC } from 'react';
import { css } from '@emotion/css';
import { css } from '@emotion/react';
import {
EuiLoadingContent,
EuiImage,
Expand All @@ -22,7 +22,7 @@ import type { EuiFacetGroupLayout } from '@elastic/eui/src/components/facet/face
import { euiThemeVars } from '@kbn/ui-theme';
import { ListTypeText, ViewerStatus } from '../types';
import * as i18n from '../translations';
import { illustrationImageURL } from '../constants';
import illustration from '../assets/images/illustration_product_no_results_magnifying_glass.svg';

interface EmptyViewerStateProps {
title?: string;
Expand All @@ -47,7 +47,6 @@ const EmptyViewerStateComponent: FC<EmptyViewerStateProps> = ({
viewerStatus,
onCreateExceptionListItem,
}) => {
// console.log(viewerStatus);
const { euiTheme } = useEuiTheme();

const euiEmptyPromptProps = useMemo(() => {
Expand Down Expand Up @@ -92,7 +91,7 @@ const EmptyViewerStateComponent: FC<EmptyViewerStateProps> = ({
layout: 'horizontal' as EuiFacetGroupLayout,
hasBorder: true,
hasShadow: false,
icon: <EuiImage size="fullWidth" alt="" url={illustrationImageURL} />,
icon: <EuiImage size="fullWidth" alt="" src={illustration} />,
title: (
<h3 data-test-subj="emptySearchTitle">
{title || i18n.EMPTY_VIEWER_STATE_EMPTY_SEARCH_TITLE}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import React, { memo } from 'react';
import type { EuiCommentProps } from '@elastic/eui';
import { EuiAccordion, EuiCommentList, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
import { css } from '@emotion/css';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';
import * as i18n from '../translations';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

import { css, cx } from '@emotion/css';
import { cx } from '@emotion/css';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';

// TODO check font Roboto Mono
Expand All @@ -16,18 +16,21 @@ export const nestedGroupSpaceCss = css`
padding-top: ${euiThemeVars.euiSizeXS};
`;

export const borderCss = css`
export const borderCss = cx(
'eui-xScroll',
`
border: 1px;
border-color: #d3dae6;
border-style: solid;
`;
`
);

export const valueContainerCss = cx(`
export const valueContainerCss = css`
display: flex;
align-items: center;
margin-left: ${euiThemeVars.euiSizeS};
`);
export const expressionContainerCss = cx(`
`;
export const expressionContainerCss = css`
display: flex;
align-items: center;
`);
`;
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,13 @@ export const ExceptionItemCardConditions = memo<CriteriaConditionsProps>(
({ os, entries, dataTestSubj }) => {
return (
<EuiPanel
css={borderCss}
color="subdued"
hasBorder={true}
hasShadow={false}
data-test-subj={dataTestSubj}
className="eui-xScroll"
className={borderCss}
>
<OsCondition os={os} dataTestSubj={dataTestSubj} />

{os?.length ? <OsCondition os={os} dataTestSubj={dataTestSubj} /> : null}
{entries.map((entry: Entry, index: number) => {
const nestedEntries = 'entries' in entry ? entry.entries : [];
return (
Expand All @@ -37,16 +35,17 @@ export const ExceptionItemCardConditions = memo<CriteriaConditionsProps>(
index={index}
dataTestSubj={dataTestSubj}
/>
{nestedEntries?.length &&
nestedEntries.map((nestedEntry: Entry, nestedIndex: number) => (
<EntryContent
key={`nestedEntry-${index}-${nestedIndex}`}
entry={nestedEntry}
index={nestedIndex}
isNestedEntry={true}
dataTestSubj={dataTestSubj}
/>
))}
{nestedEntries?.length
? nestedEntries.map((nestedEntry: Entry, nestedIndex: number) => (
<EntryContent
key={`nestedEntry-${index}-${nestedIndex}`}
entry={nestedEntry}
index={nestedIndex}
isNestedEntry={true}
dataTestSubj={dataTestSubj}
/>
))
: null}
</div>
);
})}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@
import React, { memo } from 'react';
import { EuiExpression, EuiToken, EuiFlexGroup } from '@elastic/eui';
import { ListOperatorTypeEnum } from '@kbn/securitysolution-io-ts-list-types';
import { nestedGroupSpaceCss, valueContainerCss } from '../conditions.styles';
import {
nestedGroupSpaceCss,
valueContainerCss,
expressionContainerCss,
} from '../conditions.styles';
import type { Entry } from '../types';
import * as i18n from '../../translations';
import { getValue, getValueExpression } from './entry_content.helper';
Expand All @@ -33,7 +37,7 @@ export const EntryContent = memo(
const entryKey = `${field}${type}${value}${index}`;
return (
<div data-test-subj={`${dataTestSubj}${entryKey}Condition`} key={entryKey}>
<div className="expressionContainerCss">
<div css={expressionContainerCss}>
{isNestedEntry ? (
<EuiFlexGroup
css={nestedGroupSpaceCss}
Expand All @@ -43,7 +47,7 @@ export const EntryContent = memo(
>
<EuiToken iconType="tokenNested" size="s" />

<div className={valueContainerCss}>
<div css={valueContainerCss}>
<EuiExpression description="" value={field} color="subdued" />
{getValueExpression(type as ListOperatorTypeEnum, operator, value)}
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,15 @@ import * as i18n from '../../translations';

export interface OsConditionsProps {
dataTestSubj: string;
os?: ExceptionListItemSchema['os_types'];
os: ExceptionListItemSchema['os_types'];
}

export const OsCondition = memo<OsConditionsProps>(({ os, dataTestSubj }) => {
const osLabel = useMemo(() => {
if (os?.length) {
return os.map((osValue) => OS_LABELS[osValue] ?? osValue).join(', ');
}

return null;
return os.map((osValue) => OS_LABELS[osValue] ?? osValue).join(', ');
}, [os]);
return osLabel ? (
<div data-test-subj={`${dataTestSubj}-os`}>
<div data-test-subj={`${dataTestSubj}Os`}>
<strong>
<EuiExpression description="" value={i18n.CONDITION_OS} />
<EuiExpression description={i18n.CONDITION_OPERATOR_TYPE_MATCH} value={osLabel} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,6 @@ import { getExceptionListItemSchemaMock } from '@kbn/lists-plugin/common/schemas
import { getCommentsArrayMock } from '@kbn/lists-plugin/common/schemas/types/comment.mock';
import { ExceptionListTypeEnum } from '@kbn/securitysolution-io-ts-list-types';

// import type { RuleReferenceSchema } from '../types';

// jest.mock('../../../../../common/lib/kibana');

const ruleReferences: unknown[] = [
{
exception_lists: [
Expand Down Expand Up @@ -52,6 +48,8 @@ describe('ExceptionItemCard', () => {
onDeleteException={jest.fn()}
onEditException={jest.fn()}
securityLinkAnchorComponent={() => null}
formattedDateComponent={() => null}
getFormattedComments={() => []}
/>
);

Expand All @@ -73,6 +71,8 @@ describe('ExceptionItemCard', () => {
onDeleteException={jest.fn()}
onEditException={jest.fn()}
securityLinkAnchorComponent={() => null}
formattedDateComponent={() => null}
getFormattedComments={() => []}
/>
);

Expand All @@ -95,6 +95,8 @@ describe('ExceptionItemCard', () => {
listType={ExceptionListTypeEnum.DETECTION}
ruleReferences={ruleReferences}
securityLinkAnchorComponent={() => null}
formattedDateComponent={() => null}
getFormattedComments={() => []}
/>
);
expect(wrapper.queryByTestId('itemActionButton')).not.toBeInTheDocument();
Expand All @@ -113,6 +115,8 @@ describe('ExceptionItemCard', () => {
onDeleteException={jest.fn()}
onEditException={mockOnEditException}
securityLinkAnchorComponent={() => null}
formattedDateComponent={() => null}
getFormattedComments={() => []}
/>
);

Expand All @@ -134,6 +138,8 @@ describe('ExceptionItemCard', () => {
onEditException={jest.fn()}
onDeleteException={mockOnDeleteException}
securityLinkAnchorComponent={() => null}
formattedDateComponent={() => null}
getFormattedComments={() => []}
/>
);
fireEvent.click(wrapper.getByTestId('exceptionItemCardHeaderActionButton'));
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

import React, { memo } from 'react';
import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
import { css } from '@emotion/css';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';
import * as i18n from '../../translations';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
} from '@elastic/eui';
import type { ExceptionListItemSchema } from '@kbn/securitysolution-io-ts-list-types';

import { css } from '@emotion/css';
import { css } from '@emotion/react';
import * as i18n from '../translations';
import type { RuleReference } from '../../types';
import { MetaInfoDetails } from './details_info/details_info';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,10 @@ import { getExceptionListItemSchemaMock } from '@kbn/lists-plugin/common/schemas
import { ExceptionListTypeEnum } from '@kbn/securitysolution-io-ts-list-types';

import { ExceptionItems } from './exception_items';
// import { getMockTheme } from '../../../../../common/lib/kibana/kibana_react.mock';
// import { TestProviders } from '../../../../../common/mock';

import { ViewerStatus } from '../types';
import { render } from '@testing-library/react';

// const mockTheme = getMockTheme({
// eui: {
// euiSize: '10px',
// euiColorPrimary: '#ece',
// euiColorDanger: '#ece',
// euiBreakpoints: {
// l: '400px',
// },
// },
// });

const onCreateExceptionListItem = jest.fn();
const onDeleteException = jest.fn();
const onEditExceptionItem = jest.fn();
Expand All @@ -52,6 +40,9 @@ describe('ExceptionsViewerItems', () => {
onEditExceptionItem={onEditExceptionItem}
onPaginationChange={onPaginationChange}
securityLinkAnchorComponent={() => null}
formattedDateComponent={() => null}
exceptionsUtilityComponent={() => null}
getFormattedComments={() => []}
/>
);
// expect(wrapper).toMatchSnapshot();
Expand All @@ -61,8 +52,6 @@ describe('ExceptionsViewerItems', () => {

it('it renders no search results found prompt if "viewerStatus" is "empty_search"', () => {
const wrapper = render(
// <TestProviders>
// <ThemeProvider theme={mockTheme}>
<ExceptionItems
viewerStatus={ViewerStatus.EMPTY_SEARCH}
exceptions={[]}
Expand All @@ -76,9 +65,10 @@ describe('ExceptionsViewerItems', () => {
onEditExceptionItem={onEditExceptionItem}
onPaginationChange={onPaginationChange}
securityLinkAnchorComponent={() => null}
formattedDateComponent={() => null}
exceptionsUtilityComponent={() => null}
getFormattedComments={() => []}
/>
// </ThemeProvider>
// </TestProviders>
);
// expect(wrapper).toMatchSnapshot();
expect(wrapper.getByTestId('emptySearchViewerState')).toBeInTheDocument();
Expand All @@ -87,8 +77,6 @@ describe('ExceptionsViewerItems', () => {

it('it renders exceptions if "viewerStatus" and "null"', () => {
const wrapper = render(
// <TestProviders>
// <ThemeProvider theme={mockTheme}>
<ExceptionItems
viewerStatus={'' as ViewerStatus}
exceptions={[getExceptionListItemSchemaMock()]}
Expand All @@ -102,9 +90,10 @@ describe('ExceptionsViewerItems', () => {
onEditExceptionItem={onEditExceptionItem}
onPaginationChange={onPaginationChange}
securityLinkAnchorComponent={() => null}
formattedDateComponent={() => null}
exceptionsUtilityComponent={() => null}
getFormattedComments={() => []}
/>
// </ThemeProvider>
// </TestProviders>
);
// expect(wrapper).toMatchSnapshot();
expect(wrapper.getByTestId('exceptionsContainer')).toBeTruthy();
Expand Down
Loading

0 comments on commit a633535

Please sign in to comment.