Skip to content

Commit cab97a1

Browse files
dominiqueclarkedominiqueclarke
committed
design tweaks
1 parent b84c3a4 commit cab97a1

5 files changed

Lines changed: 48 additions & 52 deletions

File tree

‎x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/components/edit_mode_toggle.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,15 @@ const toggleButtons = [
2323
label: i18n.translate('xpack.alertingV2.ruleForm.editMode.form', {
2424
defaultMessage: 'Form',
2525
}),
26+
iconType: 'productDashboard',
2627
'data-test-subj': 'ruleV2FormEditModeFormButton',
2728
},
2829
{
2930
id: 'yaml',
3031
label: i18n.translate('xpack.alertingV2.ruleForm.editMode.yaml', {
3132
defaultMessage: 'YAML',
3233
}),
34+
iconType: 'code',
3335
'data-test-subj': 'ruleV2FormEditModeYamlButton',
3436
},
3537
];
@@ -48,6 +50,7 @@ export const EditModeToggle: React.FC<EditModeToggleProps> = ({ editMode, onChan
4850
idSelected={editMode}
4951
onChange={handleChange}
5052
buttonSize="compressed"
53+
isIconOnly
5154
isFullWidth={false}
5255
isDisabled={disabled}
5356
data-test-subj="ruleV2FormEditModeToggle"

‎x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/field_groups/rule_details_field_group.test.tsx‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,6 @@ describe('RuleDetailsFieldGroup', () => {
2727
expect(screen.queryByText('Rule details')).not.toBeInTheDocument();
2828
});
2929

30-
it('renders the name as an inline editable title with default text', () => {
31-
const Wrapper = createFormWrapper();
32-
33-
render(
34-
<Wrapper>
35-
<RuleDetailsFieldGroup />
36-
</Wrapper>
37-
);
38-
39-
// The inline edit title should show the default name in read mode
40-
expect(screen.getByText('Untitled rule')).toBeInTheDocument();
41-
});
42-
4330
it('renders the tags field with optional label', () => {
4431
const Wrapper = createFormWrapper();
4532

@@ -79,23 +66,6 @@ describe('RuleDetailsFieldGroup', () => {
7966
expect(screen.getByText('Description')).toBeInTheDocument();
8067
});
8168

82-
it('renders with a pre-filled name', () => {
83-
const Wrapper = createFormWrapper({
84-
metadata: {
85-
name: 'Pre-filled Rule',
86-
enabled: true,
87-
},
88-
});
89-
90-
render(
91-
<Wrapper>
92-
<RuleDetailsFieldGroup />
93-
</Wrapper>
94-
);
95-
96-
expect(screen.getByText('Pre-filled Rule')).toBeInTheDocument();
97-
});
98-
9969
it('does not render enabled or kind fields', () => {
10070
const Wrapper = createFormWrapper();
10171

‎x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/field_groups/rule_details_field_group.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,12 @@
66
*/
77

88
import React from 'react';
9-
import { NameField } from '../fields/name_field';
109
import { TagsField } from '../fields/tags_field';
1110
import { DescriptionField } from '../fields/description_field';
1211

1312
export const RuleDetailsFieldGroup: React.FC = () => {
1413
return (
1514
<>
16-
<NameField />
1715
<TagsField />
1816
<DescriptionField />
1917
</>

‎x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/rule_form.test.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ import { createFormWrapper, createMockServices } from '../test_utils';
1616
jest.mock('./fields/rule_preview_panel', () => ({
1717
RulePreviewPanel: () => <div data-test-subj="mockRulePreviewPanel">Preview Panel</div>,
1818
}));
19+
20+
// Mock NameField to avoid rendering inline edit title setup
21+
jest.mock('./fields/name_field', () => ({
22+
NameField: () => <div data-test-subj="mockNameField">Rule Name</div>,
23+
}));
1924
const mockCreateRule = jest.fn();
2025
const mockUpdateRule = jest.fn();
2126
jest.mock('./hooks/use_create_rule', () => ({

‎x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/rule_form.tsx‎

Lines changed: 40 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@
66
*/
77

88
import React, { useCallback, useRef, useMemo, useState } from 'react';
9-
import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
9+
import {
10+
EuiButton,
11+
EuiButtonEmpty,
12+
EuiFlexGroup,
13+
EuiFlexItem,
14+
EuiHorizontalRule,
15+
EuiSpacer,
16+
} from '@elastic/eui';
1017
import { useFormContext } from 'react-hook-form';
1118
import { QueryClient, QueryClientProvider } from '@kbn/react-query';
1219
import { FormattedMessage } from '@kbn/i18n-react';
@@ -22,6 +29,7 @@ import {
2229
import { YamlRuleForm } from './yaml_rule_form';
2330
import { GuiRuleForm } from './gui_rule_form';
2431
import { RulePreviewPanel } from './fields/rule_preview_panel';
32+
import { NameField } from './fields/name_field';
2533
import { useCreateRule } from './hooks/use_create_rule';
2634
import { useUpdateRule } from './hooks/use_update_rule';
2735
import { RULE_FORM_ID } from './constants';
@@ -76,19 +84,8 @@ const SubmissionButtons: React.FC<SubmissionButtonsProps> = ({
7684

7785
return (
7886
<>
79-
<EuiSpacer size="l" />
80-
<EuiFlexGroup justifyContent="flexStart" gutterSize="m">
81-
<EuiFlexItem grow={false}>
82-
<EuiButton
83-
type="submit"
84-
form={RULE_FORM_ID}
85-
isLoading={isSubmitting}
86-
fill
87-
data-test-subj="ruleV2FormSubmitButton"
88-
>
89-
{submitLabel ?? defaultSubmitLabel}
90-
</EuiButton>
91-
</EuiFlexItem>
87+
<EuiHorizontalRule />
88+
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
9289
{onCancel && (
9390
<EuiFlexItem grow={false}>
9491
<EuiButtonEmpty
@@ -100,6 +97,18 @@ const SubmissionButtons: React.FC<SubmissionButtonsProps> = ({
10097
</EuiButtonEmpty>
10198
</EuiFlexItem>
10299
)}
100+
<EuiFlexItem grow={false}>
101+
<EuiButton
102+
type="submit"
103+
form={RULE_FORM_ID}
104+
isLoading={isSubmitting}
105+
fill
106+
iconType="plusInCircle"
107+
data-test-subj="ruleV2FormSubmitButton"
108+
>
109+
{submitLabel ?? defaultSubmitLabel}
110+
</EuiButton>
111+
</EuiFlexItem>
103112
</EuiFlexGroup>
104113
</>
105114
);
@@ -182,20 +191,31 @@ const RuleFormContent: React.FC<RuleFormProps> = ({
182191

183192
const formContent = (
184193
<>
185-
{includeYaml && (
186-
<>
187-
<EuiFlexGroup justifyContent="flexEnd">
194+
{isYamlMode ? (
195+
includeYaml && (
196+
<EditModeToggle
197+
editMode={editMode}
198+
onChange={handleModeChange}
199+
disabled={isDisabled || isSubmitting}
200+
/>
201+
)
202+
) : (
203+
<EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
204+
<EuiFlexItem>
205+
<NameField />
206+
</EuiFlexItem>
207+
{includeYaml && (
188208
<EuiFlexItem grow={false}>
189209
<EditModeToggle
190210
editMode={editMode}
191211
onChange={handleModeChange}
192212
disabled={isDisabled || isSubmitting}
193213
/>
194214
</EuiFlexItem>
195-
</EuiFlexGroup>
196-
<EuiSpacer size="m" />
197-
</>
215+
)}
216+
</EuiFlexGroup>
198217
)}
218+
<EuiSpacer size="m" />
199219

200220
{isYamlMode && includeYaml ? (
201221
<YamlRuleForm

0 commit comments

Comments
 (0)