Skip to content

Commit

Permalink
Fixes visual bugs from code review and mockups
Browse files Browse the repository at this point in the history
  • Loading branch information
@FrankHassanabad
FrankHassanabad committed Oct 2, 2020
1 parent c23af14 commit 747f052
Show file tree
Hide file tree
Showing 7 changed files with 254 additions and 300 deletions.
30 changes: 0 additions & 30 deletions ...security_solution/public/common/components/wrapper_page/__snapshots__/index.test.tsx.snap
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

38 changes: 0 additions & 38 deletions x-pack/plugins/security_solution/public/common/components/wrapper_page/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,42 +22,4 @@ describe('WrapperPage', () => {

expect(wrapper.find('Memo(WrapperPageComponent)')).toMatchSnapshot();
});

describe('restrict width', () => {
test('default max width when restrictWidth is true', () => {
const wrapper = shallow(
<TestProviders>
<WrapperPage restrictWidth>
<p>{'Test page'}</p>
</WrapperPage>
</TestProviders>
);

expect(wrapper.find('Memo(WrapperPageComponent)')).toMatchSnapshot();
});

test('custom max width when restrictWidth is number', () => {
const wrapper = shallow(
<TestProviders>
<WrapperPage restrictWidth={600}>
<p>{'Test page'}</p>
</WrapperPage>
</TestProviders>
);

expect(wrapper.find('Memo(WrapperPageComponent)')).toMatchSnapshot();
});

test('custom max width when restrictWidth is string', () => {
const wrapper = shallow(
<TestProviders>
<WrapperPage restrictWidth="600px">
<p>{'Test page'}</p>
</WrapperPage>
</TestProviders>
);

expect(wrapper.find('Memo(WrapperPageComponent)')).toMatchSnapshot();
});
});
});
23 changes: 1 addition & 22 deletions x-pack/plugins/security_solution/public/common/components/wrapper_page/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,6 @@ import { AppGlobalStyle } from '../page/index';
const Wrapper = styled.div`
padding: ${(props) => `${props.theme.eui.paddingSizes.l}`};
&.siemWrapperPage--restrictWidthDefault,
&.siemWrapperPage--restrictWidthCustom {
box-sizing: content-box;
margin: 0 auto;
}
&.siemWrapperPage--restrictWidthDefault {
max-width: 1000px;
}
&.siemWrapperPage--fullHeight {
height: 100%;
display: flex;
Expand Down Expand Up @@ -58,7 +48,6 @@ interface WrapperPageProps {
const WrapperPageComponent: React.FC<WrapperPageProps & CommonProps> = ({
children,
className,
restrictWidth,
style,
noPadding,
noTimeline,
Expand All @@ -74,20 +63,10 @@ const WrapperPageComponent: React.FC<WrapperPageProps & CommonProps> = ({
'siemWrapperPage--noPadding': noPadding,
'siemWrapperPage--withTimeline': !noTimeline,
'siemWrapperPage--fullHeight': globalFullScreen,
'siemWrapperPage--restrictWidthDefault':
restrictWidth && typeof restrictWidth === 'boolean' && restrictWidth === true,
'siemWrapperPage--restrictWidthCustom': restrictWidth && typeof restrictWidth !== 'boolean',
});

let customStyle: WrapperPageProps['style'];

if (restrictWidth && typeof restrictWidth !== 'boolean') {
const value = typeof restrictWidth === 'number' ? `${restrictWidth}px` : restrictWidth;
customStyle = { ...style, maxWidth: value };
}

return (
<Wrapper className={classes} style={customStyle || style} {...otherProps}>
<Wrapper className={classes} style={style} {...otherProps}>
{children}
<AppGlobalStyle />
</Wrapper>
Expand Down
19 changes: 17 additions & 2 deletions ...k/plugins/security_solution/public/detections/components/rules/select_rule_type/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,15 +104,18 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
describedByIds={describedByIds}
label={field.label}
>
<EuiFlexGrid columns={4}>
<EuiFlexGrid columns={3}>
{querySelectableConfig.isVisible && (
<EuiFlexItem>
<EuiCard
data-test-subj="customRuleType"
title={i18n.QUERY_TYPE_TITLE}
titleSize="xs"
description={i18n.QUERY_TYPE_DESCRIPTION}
icon={<EuiIcon size="l" type="search" />}
icon={<EuiIcon size="xl" type="search" />}
selectable={querySelectableConfig}
layout="horizontal"
textAlign="left"
/>
</EuiFlexItem>
)}
Expand All @@ -121,6 +124,7 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
<EuiCard
data-test-subj="machineLearningRuleType"
title={i18n.ML_TYPE_TITLE}
titleSize="xs"
description={
<MlCardDescription
subscriptionUrl={licensingUrl}
Expand All @@ -130,6 +134,8 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
icon={<EuiIcon size="l" type="machineLearningApp" />}
isDisabled={mlSelectableConfig.isDisabled && !mlSelectableConfig.isSelected}
selectable={mlSelectableConfig}
layout="horizontal"
textAlign="left"
/>
</EuiFlexItem>
)}
Expand All @@ -138,9 +144,12 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
<EuiCard
data-test-subj="thresholdRuleType"
title={i18n.THRESHOLD_TYPE_TITLE}
titleSize="xs"
description={i18n.THRESHOLD_TYPE_DESCRIPTION}
icon={<EuiIcon size="l" type="indexFlush" />}
selectable={thresholdSelectableConfig}
layout="horizontal"
textAlign="left"
/>
</EuiFlexItem>
)}
Expand All @@ -149,9 +158,12 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
<EuiCard
data-test-subj="eqlRuleType"
title={i18n.EQL_TYPE_TITLE}
titleSize="xs"
description={i18n.EQL_TYPE_DESCRIPTION}
icon={<EuiIcon size="l" type="bullseye" />}
selectable={eqlSelectableConfig}
layout="horizontal"
textAlign="left"
/>
</EuiFlexItem>
)}
Expand All @@ -160,9 +172,12 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
<EuiCard
data-test-subj="threatMatchRuleType"
title={i18n.THREAT_MATCH_TYPE_TITLE}
titleSize="xs"
description={i18n.THREAT_MATCH_TYPE_DESCRIPTION}
icon={<EuiIcon size="l" type="list" />}
selectable={threatMatchSelectableConfig}
layout="horizontal"
textAlign="left"
/>
</EuiFlexItem>
)}
Expand Down
Loading

0 comments on commit 747f052

Please sign in to comment.