Skip to content

Commit

Permalink
Review feedback: Add preview button on rule editing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@e40pud
e40pud committed Jan 16, 2023
1 parent 7b68f25 commit 7cdee93
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 87 deletions.
198 changes: 111 additions & 87 deletions ...s/security_solution/public/detection_engine/rule_creation_ui/pages/rule_editing/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,8 @@ const EditRulePageComponent: FC = () => {
const { mutateAsync: updateRule, isLoading } = useUpdateRule();
const [dataViewOptions, setDataViewOptions] = useState<{ [x: string]: DataViewListItem }>({});
const [isPreviewDisabled, setIsPreviewDisabled] = useState(false);
const [isRulePreviewVisible, setIsRulePreviewVisible] = useState(true);
const collapseFn = useRef<() => void | undefined>();

useEffect(() => {
const fetchDataViews = async () => {
Expand Down Expand Up @@ -463,99 +465,121 @@ const EditRulePageComponent: FC = () => {
<>
<SecuritySolutionPageWrapper>
<EuiResizableContainer>
{(EuiResizablePanel, EuiResizableButton) => (
<>
<EuiResizablePanel initialSize={70} minSize={'40%'} mode="main">
<EuiFlexGroup direction="row" justifyContent="spaceAround">
<MaxWidthEuiFlexItem>
<HeaderPage
backOptions={{
path: getRuleDetailsUrl(ruleId ?? ''),
text: `${i18n.BACK_TO} ${rule?.name ?? ''}`,
pageId: SecurityPageName.rules,
dataTestSubj: 'ruleEditBackToRuleDetails',
}}
isLoading={isLoading}
title={i18n.PAGE_TITLE}
/>
{invalidSteps.length > 0 && (
<EuiCallOut title={i18n.SORRY_ERRORS} color="danger" iconType="alert">
<FormattedMessage
id="xpack.securitySolution.detectionEngine.rule.editRule.errorMsgDescription"
defaultMessage="You have an invalid input in {countError, plural, one {this tab} other {these tabs}}: {tabHasError}"
values={{
countError: invalidSteps.length,
tabHasError: invalidSteps
.map((t) => {
if (t === RuleStep.aboutRule) {
return ruleI18n.ABOUT;
} else if (t === RuleStep.defineRule) {
return ruleI18n.DEFINITION;
} else if (t === RuleStep.scheduleRule) {
return ruleI18n.SCHEDULE;
} else if (t === RuleStep.ruleActions) {
return ruleI18n.RULE_ACTIONS;
}
return t;
})
.join(', '),
{(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
collapseFn.current = () => togglePanel?.('preview', { direction: 'left' });
return (
<>
<EuiResizablePanel initialSize={70} minSize={'40%'} mode="main">
<EuiFlexGroup direction="row" justifyContent="spaceAround">
<MaxWidthEuiFlexItem>
<HeaderPage
backOptions={{
path: getRuleDetailsUrl(ruleId ?? ''),
text: `${i18n.BACK_TO} ${rule?.name ?? ''}`,
pageId: SecurityPageName.rules,
dataTestSubj: 'ruleEditBackToRuleDetails',
}}
isLoading={isLoading}
title={i18n.PAGE_TITLE}
>
<EuiButton
data-test-subj="preview-container"
isSelected={isRulePreviewVisible}
fill={isRulePreviewVisible}
iconType="visBarVerticalStacked"
onClick={() => {
collapseFn.current?.();
setIsRulePreviewVisible((isVisible) => !isVisible);
}}
/>
</EuiCallOut>
)}
>
{ruleI18n.RULE_PREVIEW_TITLE}
</EuiButton>
</HeaderPage>
{invalidSteps.length > 0 && (
<EuiCallOut title={i18n.SORRY_ERRORS} color="danger" iconType="alert">
<FormattedMessage
id="xpack.securitySolution.detectionEngine.rule.editRule.errorMsgDescription"
defaultMessage="You have an invalid input in {countError, plural, one {this tab} other {these tabs}}: {tabHasError}"
values={{
countError: invalidSteps.length,
tabHasError: invalidSteps
.map((t) => {
if (t === RuleStep.aboutRule) {
return ruleI18n.ABOUT;
} else if (t === RuleStep.defineRule) {
return ruleI18n.DEFINITION;
} else if (t === RuleStep.scheduleRule) {
return ruleI18n.SCHEDULE;
} else if (t === RuleStep.ruleActions) {
return ruleI18n.RULE_ACTIONS;
}
return t;
})
.join(', '),
}}
/>
</EuiCallOut>
)}

<EuiTabbedContent
initialSelectedTab={tabs[0]}
selectedTab={tabs.find((t) => t.id === activeStep)}
onTabClick={onTabClick}
tabs={tabs}
/>
<EuiTabbedContent
initialSelectedTab={tabs[0]}
selectedTab={tabs.find((t) => t.id === activeStep)}
onTabClick={onTabClick}
tabs={tabs}
/>

<EuiSpacer />
<EuiSpacer />

<EuiFlexGroup
alignItems="center"
gutterSize="s"
justifyContent="flexEnd"
responsive={false}
>
<EuiFlexItem grow={false}>
<EuiButton iconType="cross" onClick={goToDetailsRule}>
{i18n.CANCEL}
</EuiButton>
</EuiFlexItem>
<EuiFlexGroup
alignItems="center"
gutterSize="s"
justifyContent="flexEnd"
responsive={false}
>
<EuiFlexItem grow={false}>
<EuiButton iconType="cross" onClick={goToDetailsRule}>
{i18n.CANCEL}
</EuiButton>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButton
data-test-subj="ruleEditSubmitButton"
fill
onClick={onSubmit}
iconType="save"
isLoading={isLoading}
isDisabled={loading}
>
{i18n.SAVE_CHANGES}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</MaxWidthEuiFlexItem>
</EuiFlexGroup>
</EuiResizablePanel>
<EuiResizableButton />
<EuiFlexItem grow={false}>
<EuiButton
data-test-subj="ruleEditSubmitButton"
fill
onClick={onSubmit}
iconType="save"
isLoading={isLoading}
isDisabled={loading}
>
{i18n.SAVE_CHANGES}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</MaxWidthEuiFlexItem>
</EuiFlexGroup>
</EuiResizablePanel>
<EuiResizableButton />

<EuiResizablePanel mode="collapsible" initialSize={30} minSize={'20%'}>
{defineStep.data && aboutStep.data && scheduleStep.data && (
<RulePreview
isDisabled={isPreviewDisabled}
defineRuleData={defineStep.data}
aboutRuleData={aboutStep.data}
scheduleRuleData={scheduleStep.data}
exceptionsList={rule?.exceptions_list}
/>
)}
</EuiResizablePanel>
</>
)}
<EuiResizablePanel
id={'preview'}
mode="collapsible"
initialSize={30}
minSize={'20%'}
onToggleCollapsed={() => setIsRulePreviewVisible((isVisible) => !isVisible)}
>
{defineStep.data && aboutStep.data && scheduleStep.data && (
<RulePreview
isDisabled={isPreviewDisabled}
defineRuleData={defineStep.data}
aboutRuleData={aboutStep.data}
scheduleRuleData={scheduleStep.data}
exceptionsList={rule?.exceptions_list}
/>
)}
</EuiResizablePanel>
</>
);
}}
</EuiResizableContainer>
</SecuritySolutionPageWrapper>

Expand Down
7 changes: 7 additions & 0 deletions .../plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1107,6 +1107,13 @@ export const RULES_BULK_EDIT_FAILURE_DESCRIPTION = (
}
);

export const RULE_PREVIEW_TITLE = i18n.translate(
'xpack.securitySolution.detectionEngine.createRule.rulePreviewTitle',
{
defaultMessage: 'Rule preview',
}
);

export const CANCEL_BUTTON_LABEL = i18n.translate(
'xpack.securitySolution.detectionEngine.createRule.cancelButtonLabel',
{
Expand Down

0 comments on commit 7cdee93

Please sign in to comment.