Skip to content

Commit

Permalink
fix pr comments
Browse files Browse the repository at this point in the history
  • Loading branch information
christineweng committed Aug 9, 2023
1 parent 0ce6eaa commit 0a1c401
Show file tree
Hide file tree
Showing 19 changed files with 247 additions and 430 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ export const PreviewSection: React.FC<PreviewSectionProps> = ({
css={css`
margin: ${euiTheme.size.xs};
height: 99%;
box-shadow: 0px 0px 5px 5px #999999;
box-shadow: 0px 0px 5px 5px ${euiTheme.colors.darkShade};
`}
className="eui-yScroll"
data-test-subj={PREVIEW_SECTION}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
DOCUMENT_DETAILS_FLYOUT_RULE_PREVIEW_TITLE,
DOCUMENT_DETAILS_FLYOUT_CREATED_BY,
DOCUMENT_DETAILS_FLYOUT_UPDATED_BY,
DOCUMENT_DETAILS_FLYOUT_RULE_SWITCH,
DOCUMENT_DETAILS_FLYOUT_RULE_PREVIEW_BODY,
DOCUMENT_DETAILS_FLYOUT_RULE_PREVIEW_ABOUT_SECTION_HEADER,
DOCUMENT_DETAILS_FLYOUT_RULE_PREVIEW_ABOUT_SECTION_CONTENT,
Expand Down Expand Up @@ -64,8 +63,6 @@ describe(
cy.get(DOCUMENT_DETAILS_FLYOUT_RULE_PREVIEW_TITLE).should('be.visible');
cy.get(DOCUMENT_DETAILS_FLYOUT_CREATED_BY).should('be.visible');
cy.get(DOCUMENT_DETAILS_FLYOUT_UPDATED_BY).should('be.visible');
cy.get(DOCUMENT_DETAILS_FLYOUT_RULE_SWITCH).should('not.be.disabled');
cy.get(DOCUMENT_DETAILS_FLYOUT_RULE_SWITCH).should('be.enabled');

cy.log('about');

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,6 @@ export const DOCUMENT_DETAILS_FLYOUT_UPDATED_BY = getDataTestSubjectSelector(
RULE_PREVIEW_RULE_UPDATED_BY_TEST_ID
);

export const DOCUMENT_DETAILS_FLYOUT_RULE_SWITCH = getDataTestSubjectSelector('ruleSwitch');

export const DOCUMENT_DETAILS_FLYOUT_RULE_PREVIEW_BODY =
getDataTestSubjectSelector(RULE_PREVIEW_BODY_TEST_ID);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import type { Filter } from '@kbn/es-query';
import { i18n as i18nTranslate } from '@kbn/i18n';
import { Routes, Route } from '@kbn/shared-ux-router';

import { FormattedMessage } from '@kbn/i18n-react';
import { noop, omit } from 'lodash/fp';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useParams } from 'react-router-dom';
Expand Down Expand Up @@ -53,7 +52,6 @@ import {
import { useKibana } from '../../../../common/lib/kibana';
import type { UpdateDateRange } from '../../../../common/components/charts/common';
import { FiltersGlobal } from '../../../../common/components/filters_global';
import { FormattedDate } from '../../../../common/components/formatted_date';
import {
getDetectionEngineUrl,
getRuleDetailsTabUrl,
Expand Down Expand Up @@ -81,6 +79,7 @@ import {
getStepsData,
redirectToDetections,
} from '../../../../detections/pages/detection_engine/rules/helpers';
import { CreatedBy, UpdatedBy } from '../../../../detections/components/rules/rule_info';
import { useGlobalTime } from '../../../../common/containers/use_global_time';
import { inputsSelectors } from '../../../../common/store/inputs';
import { setAbsoluteRangeDatePicker } from '../../../../common/store/inputs/actions';
Expand Down Expand Up @@ -468,32 +467,16 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
() =>
rule ? (
[
<FormattedMessage
<CreatedBy
id="xpack.securitySolution.detectionEngine.ruleDetails.ruleCreationDescription"
defaultMessage="Created by: {by} on {date}"
values={{
by: rule?.created_by ?? i18n.UNKNOWN,
date: (
<FormattedDate
value={rule?.created_at ?? new Date().toISOString()}
fieldName="createdAt"
/>
),
}}
createdBy={rule?.created_by}
createdAt={rule?.created_at}
/>,
rule?.updated_by != null ? (
<FormattedMessage
<UpdatedBy
id="xpack.securitySolution.detectionEngine.ruleDetails.ruleUpdateDescription"
defaultMessage="Updated by: {by} on {date}"
values={{
by: rule?.updated_by ?? i18n.UNKNOWN,
date: (
<FormattedDate
value={rule?.updated_at ?? new Date().toISOString()}
fieldName="updatedAt"
/>
),
}}
updatedBy={rule?.updated_by}
updatedAt={rule?.updated_at}
/>
) : (
''
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { EuiDescriptionList, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { isEmpty, chunk, get, pick, isNumber } from 'lodash/fp';
import React, { memo, useState } from 'react';
import styled from 'styled-components';

import { css } from '@emotion/css';
import type { ThreatMapping, Threats, Type } from '@kbn/securitysolution-io-ts-alerting-types';
import type { DataViewBase, Filter } from '@kbn/es-query';
import { FilterStateStore } from '@kbn/es-query';
Expand Down Expand Up @@ -68,21 +68,19 @@ const DescriptionListContainer = styled(EuiDescriptionList)`
}
`;

export const DescriptionListPanelContainer = styled(EuiDescriptionList)`
${({ theme }) => `
dt {
font-size: ${theme.eui.euiFontSizeXS} !important;
}
text-overflow: ellipsis;
`}
const panelViewStyle = css`
dt {
font-size: 90% !important;
}
text-overflow: ellipsis;
`;

interface StepRuleDescriptionProps<T> {
columns?: 'multi' | 'single' | 'singleSplit';
data: unknown;
indexPatterns?: DataViewBase;
schema: FormSchema<T>;
isInPanelView?: boolean;
isInPanelView?: boolean; // Option to show description list in smaller font
}

export const StepRuleDescriptionComponent = <T,>({
Expand Down Expand Up @@ -141,7 +139,7 @@ export const StepRuleDescriptionComponent = <T,>({
return (
<EuiFlexGroup>
<EuiFlexItem data-test-subj="listItemColumnStepRuleDescriptionPanel">
<DescriptionListPanelContainer listItems={listItems} />
<EuiDescriptionList listItems={listItems} className={panelViewStyle} />
</EuiFlexItem>
</EuiFlexGroup>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/*
* 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; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React from 'react';
import { CreatedBy, UpdatedBy } from '.';
import { render } from '@testing-library/react';
import { TestProviders } from '../../../../common/mock';

describe('Rule related info', () => {
describe('<CreatedBy />', () => {
it('should render created correctly when by and date are passed', () => {
const { getByTestId } = render(
<TestProviders>
<CreatedBy
id="id"
createdBy="test"
createdAt="2023-01-01T22:01:00.000Z"
data-test-subj="createdBy"
/>
</TestProviders>
);
expect(getByTestId('createdBy')).toHaveTextContent(
'Created by: test on Jan 1, 2023 @ 22:01:00.000'
);
});

it('should render created unknown when created by is not available', () => {
const { getByTestId } = render(
<TestProviders>
<CreatedBy id="id" createdAt="2023-01-01T22:01:00.000Z" data-test-subj="createdBy" />
</TestProviders>
);
expect(getByTestId('createdBy')).toHaveTextContent(
'Created by: Unknown on Jan 1, 2023 @ 22:01:00.000'
);
});
});
describe('<UpdatedBy />', () => {
it('should render updated by correctly when by and date are passed', () => {
const { getByTestId } = render(
<TestProviders>
<UpdatedBy
id="id"
updatedBy="test"
updatedAt="2023-01-01T22:01:00.000Z"
data-test-subj="updatedBy"
/>
</TestProviders>
);
expect(getByTestId('updatedBy')).toHaveTextContent(
'Updated by: test on Jan 1, 2023 @ 22:01:00.000'
);
});

it('should render updated by correctly when updated by is not available', () => {
const { getByTestId } = render(
<TestProviders>
<UpdatedBy id="id" updatedAt="2023-01-01T22:01:00.000Z" data-test-subj="updatedBy" />
</TestProviders>
);
expect(getByTestId('updatedBy')).toHaveTextContent(
'Updated by: Unknown on Jan 1, 2023 @ 22:01:00.000'
);
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/*
* 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; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import { UNKNOWN_TEXT } from './translations';
import { FormattedDate } from '../../../../common/components/formatted_date';

interface CreatedByProps {
id: string;
createdBy?: string;
createdAt?: string;
['data-test-subj']?: string;
}

/**
* Created by and created at text that are shown on rule details
*/
export const CreatedBy: React.FC<CreatedByProps> = ({
id,
createdBy,
createdAt,
'data-test-subj': dataTestSubj,
}) => {
return (
<div data-test-subj={dataTestSubj}>
<FormattedMessage
id={id}
defaultMessage="Created by: {by} on {date}"
values={{
by: createdBy ?? UNKNOWN_TEXT,
date: (
<FormattedDate value={createdAt ?? new Date().toISOString()} fieldName="createdAt" />
),
}}
/>
</div>
);
};

CreatedBy.displayName = 'CreatedBy';

interface UpdatedByProps {
id: string;
updatedBy?: string;
updatedAt?: string;
['data-test-subj']?: string;
}

/**
* Updated by and updated at text that are shown on rule details
*/
export const UpdatedBy: React.FC<UpdatedByProps> = ({
id,
updatedBy,
updatedAt,
'data-test-subj': dataTestSubj,
}) => {
return (
<div data-test-subj={dataTestSubj}>
<FormattedMessage
id={id}
defaultMessage="Updated by: {by} on {date}"
values={{
by: updatedBy ?? UNKNOWN_TEXT,
date: (
<FormattedDate value={updatedAt ?? new Date().toISOString()} fieldName="updatedAt" />
),
}}
/>
</div>
);
};

UpdatedBy.displayName = 'UpdatedBy';
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/*
* 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; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import { i18n } from '@kbn/i18n';

export const UNKNOWN_TEXT = i18n.translate(
'xpack.securitySolution.detectionEngine.ruleInfo.UnknownText',
{
defaultMessage: 'Unknown',
}
);
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ interface StepAboutRuleReadOnlyProps {
addPadding: boolean;
descriptionColumns: 'multi' | 'single' | 'singleSplit';
defaultValues: AboutStepRule;
isInPanelView?: boolean;
isInPanelView?: boolean; // Option to show description list in smaller font
}

const ThreeQuartersContainer = styled.div`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ interface StepDefineRuleReadOnlyProps {
descriptionColumns: 'multi' | 'single' | 'singleSplit';
defaultValues: DefineStepRule;
indexPattern: DataViewBase;
isInPanelView?: boolean;
isInPanelView?: boolean; // Option to show description list in smaller font
}

export const MyLabelButton = styled(EuiButtonEmpty)`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ interface StepScheduleRuleReadOnlyProps {
addPadding: boolean;
descriptionColumns: 'multi' | 'single' | 'singleSplit';
defaultValues: ScheduleStepRule;
isInPanelView?: boolean;
isInPanelView?: boolean; // Option to show description list in smaller font
}

const StepScheduleRuleComponent: FC<StepScheduleRuleProps> = ({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,8 @@ import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context';
import { ThemeProvider } from 'styled-components';
import { getMockTheme } from '../../../common/lib/kibana/kibana_react.mock';
import { TestProviders } from '../../../common/mock';
import { useAppToasts } from '../../../common/hooks/use_app_toasts';
import { useAppToastsMock } from '../../../common/hooks/use_app_toasts.mock';
import { useRuleWithFallback } from '../../../detection_engine/rule_management/logic/use_rule_with_fallback';
import { getStepsData } from '../../../detections/pages/detection_engine/rules/helpers';
import { useRuleSwitch } from '../hooks/use_rule_switch';
import {
mockAboutStepRule,
mockDefineStepRule,
Expand All @@ -46,16 +43,6 @@ jest.mock('../../../detection_engine/rule_management/logic/use_rule_with_fallbac
const mockGetStepsData = getStepsData as jest.Mock;
jest.mock('../../../detections/pages/detection_engine/rules/helpers');

const mockUseRuleSwitch = useRuleSwitch as jest.Mock;
jest.mock('../hooks/use_rule_switch');

jest.mock('../../../detection_engine/rule_management/logic/use_start_ml_jobs', () => ({
useStartMlJobs: jest.fn().mockReturnValue({ startMlJobs: jest.fn() }),
}));

jest.mock('../../../common/hooks/use_app_toasts');
const useAppToastsValueMock = useAppToastsMock.create();

const mockTheme = getMockTheme({ eui: { euiColorMediumShade: '#ece' } });

const contextValue = {
Expand All @@ -65,13 +52,7 @@ const contextValue = {

describe('<RulePreview />', () => {
beforeEach(() => {
(useAppToasts as jest.Mock).mockReturnValue(useAppToastsValueMock);
mockUseRuleSwitch.mockReturnValue({
tooltipText: '',
userInfoLoading: false,
isButtonDisabled: false,
isRuleEnabled: true,
});
// (useAppToasts as jest.Mock).mockReturnValue(useAppToastsValueMock);
});

afterEach(() => {
Expand Down
Loading

0 comments on commit 0a1c401

Please sign in to comment.