Skip to content

Commit

Permalink
Fixed some Fit and Finish UX changes
Browse files Browse the repository at this point in the history 
Signed-off-by: Kshitij Tandon <[email protected]>
  • Loading branch information
@tandonks
tandonks committed Sep 18, 2024
1 parent a343286 commit 445f134
Show file tree
Hide file tree
Showing 20 changed files with 220 additions and 199 deletions.
2 changes: 1 addition & 1 deletion ...exTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ exports[`<CreateIndexTemplate /> spec render template pages 1`] = `
</button>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--m"
/>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
Expand Down
2 changes: 1 addition & 1 deletion public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,7 +387,7 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
</EuiTab>
))}
</EuiTabs>
<EuiSpacer />
<EuiSpacer size="m" />
</>
) : null}
{subCompontentProps.readonly ? null : (
Expand Down
6 changes: 3 additions & 3 deletions public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export default function IndexDetail(props: IndexDetailModalProps) {
mode: IndicesUpdateMode.settings,
content: (
<>
<EuiSpacer />
<EuiSpacer size="m" />
<EuiPanel>
<EuiText size="s">
<h2>Index settings</h2>
Expand All @@ -168,7 +168,7 @@ export default function IndexDetail(props: IndexDetailModalProps) {
mode: IndicesUpdateMode.mappings,
content: (
<>
<EuiSpacer />
<EuiSpacer size="m" />
<EuiPanel>
<EuiText size="s">
<h2>Index mappings</h2>
Expand Down Expand Up @@ -206,7 +206,7 @@ export default function IndexDetail(props: IndexDetailModalProps) {
mode: IndicesUpdateMode.alias,
content: (
<>
<EuiSpacer />
<EuiSpacer size="m" />
<EuiPanel>
<EuiText size="s">
<h2>Index alias</h2>
Expand Down
5 changes: 4 additions & 1 deletion public/pages/Indices/components/IndexControls/IndexControls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
EuiSearchBar,
EuiCompressedSwitch,
EuiButtonEmpty,
EuiToolTip,
} from "@elastic/eui";
import { DataStream, ManagedCatIndex } from "../../../../../server/models/interfaces";
import IndicesActions from "../../containers/IndicesActions";
Expand Down Expand Up @@ -96,7 +97,9 @@ export default class IndexControls extends Component<IndexControlsProps, IndexCo
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon iconType="refresh" data-test-subj="refreshButton" display="base" size="s" />
<EuiToolTip content="Refresh">
<EuiButtonIcon iconType="refresh" data-test-subj="refreshButton" display="base" size="s" onClick={onRefresh} />
</EuiToolTip>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<IndicesActions
Expand Down
250 changes: 123 additions & 127 deletions public/pages/Indices/components/NotificationModal/NotificationModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,142 +190,138 @@ const Notifications = ({ onClose, visible }: NotificationsProps) => {
</EuiText>
</EuiModalHeaderTitle>
<EuiFlexItem grow={false}>
<EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
<EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank" iconSide="right">
Manage channels
</EuiSmallButton>
</EuiFlexItem>
</EuiModalHeader>
<EuiModalBody>
<>
{noPermission ? (
<EuiPanel>
<EuiEmptyPrompt
iconType="alert"
iconColor="danger"
title={
<EuiText size="s">
{" "}
<h2>Error loading Notification settings</h2>{" "}
</EuiText>
}
body={
<EuiText size="s">
{" "}
<p>You do not have permissions to view Notification settings. Contact your administrator to request permissions.</p>
</EuiText>
}
/>
</EuiPanel>
) : (
<EuiPanel>
{submitClicked && allErrors.length ? (
<EuiCallOut iconType="iInCircle" color="danger" title="Address the following error(s) in the form">
<ul>
{allErrors.reduce((total, [key, errors]) => {
const pattern = /^dataSource\.(\d+)\.(\w+)$/;
const matchResult = key.match(pattern);
if (matchResult) {
const index = matchResult[1];
const itemField = matchResult[2];
const notificationItem = (field.getValues().dataSource || [])[parseInt(index, 10)];
const errorMessagePrefix = `${notificationItem.title} — ${
FieldMapLabel[itemField as keyof typeof FieldMapLabel]
}: `;
return [
...total,
...(errors || []).map((item) => (
<li key={`${errorMessagePrefix}${item}`} className="ISM-notifications-first-letter-uppercase">
{errorMessagePrefix}
{item}
</li>
)),
];
}
{noPermission ? (
<EuiPanel>
<EuiEmptyPrompt
iconType="alert"
iconColor="danger"
title={
<EuiText size="s">
{" "}
<h2>Error loading Notification settings</h2>{" "}
</EuiText>
}
body={
<EuiText size="s">
{" "}
<p>You do not have permissions to view Notification settings. Contact your administrator to request permissions.</p>
</EuiText>
}
/>
</EuiPanel>
) : (
<>
{submitClicked && allErrors.length ? (
<EuiCallOut iconType="iInCircle" color="danger" title="Address the following error(s) in the form">
<ul>
{allErrors.reduce((total, [key, errors]) => {
const pattern = /^dataSource\.(\d+)\.(\w+)$/;
const matchResult = key.match(pattern);
if (matchResult) {
const index = matchResult[1];
const itemField = matchResult[2];
const notificationItem = (field.getValues().dataSource || [])[parseInt(index, 10)];
const errorMessagePrefix = `${notificationItem.title} — ${FieldMapLabel[itemField as keyof typeof FieldMapLabel]}: `;
return [
...total,
...(errors || []).map((item) => (
<li key={`${errorMessagePrefix}${item}`} className="ISM-notifications-first-letter-uppercase">
{errorMessagePrefix}
{item}
</li>
)),
];
}

return total;
}, [] as ReactChild[])}
</ul>
</EuiCallOut>
) : null}
<EuiSpacer />
{(values.dataSource || []).map((record) => {
const { value, onChange, ...others } = field.registerField<ILronPlainConfig["channels"]>({
name: ["dataSource", `${record.index}`, FieldEnum.channels],
rules: [
{
validator(rule, value) {
const values = field.getValues();
const item = values.dataSource?.[record.index];
if (item?.[FieldEnum.failure] || item?.[FieldEnum.success]) {
if (!value || !value.length) {
return Promise.reject(VALIDATE_ERROR_FOR_CHANNELS);
}
return total;
}, [] as ReactChild[])}
</ul>
</EuiCallOut>
) : null}
<EuiSpacer />
{(values.dataSource || []).map((record) => {
const { value, onChange, ...others } = field.registerField<ILronPlainConfig["channels"]>({
name: ["dataSource", `${record.index}`, FieldEnum.channels],
rules: [
{
validator(rule, value) {
const values = field.getValues();
const item = values.dataSource?.[record.index];
if (item?.[FieldEnum.failure] || item?.[FieldEnum.success]) {
if (!value || !value.length) {
return Promise.reject(VALIDATE_ERROR_FOR_CHANNELS);
}
}

return Promise.resolve("");
},
return Promise.resolve("");
},
],
});
return (
<CustomFormRow
label={
<div className="ISM-notifications-first-letter-uppercase">
<EuiText size="s">
{" "}
<h3>{record.title}</h3>{" "}
</EuiText>
</div>
}
helpText={ActionTypeMapDescription[getKeyByValue(ActionTypeMapTitle, record.title) as ActionType]}
direction="hoz"
key={record.action_name}
>
<>
<CustomFormRow label={LABEL_FOR_CONDITION}>
<EuiFlexGroup alignItems="flexStart">
<EuiFlexItem>
<AllBuiltInComponents.CheckBox
{...field.registerField({
name: ["dataSource", `${record.index}`, FieldEnum.failure],
})}
data-test-subj={["dataSource", `${record.index}`, FieldEnum.failure].join(".")}
label="Has failed"
/>
</EuiFlexItem>
<EuiFlexItem>
<AllBuiltInComponents.CheckBox
{...field.registerField({
name: ["dataSource", `${record.index}`, FieldEnum.success],
})}
data-test-subj={["dataSource", `${record.index}`, FieldEnum.success].join(".")}
label="Has completed"
/>
</EuiFlexItem>
</EuiFlexGroup>
</CustomFormRow>
{field.getValue(["dataSource", `${record.index}`, FieldEnum.failure]) ||
field.getValue(["dataSource", `${record.index}`, FieldEnum.success]) ? (
<>
<EuiSpacer />
<CustomFormRow
label={FieldMapLabel[FieldEnum.channels]}
isInvalid={!!field.getError(["dataSource", `${record.index}`, FieldEnum.channels])}
error={field.getError(["dataSource", `${record.index}`, FieldEnum.channels])}
data-test-subj={["dataSource", `${record.index}`, FieldEnum.channels].join(".")}
>
<ChannelSelect {...others} value={value} onChange={onChange} />
</CustomFormRow>
</>
) : null}
</>
</CustomFormRow>
);
})}
<EuiSpacer />
</EuiPanel>
)}
</>
},
],
});
return (
<CustomFormRow
label={
<div className="ISM-notifications-first-letter-uppercase">
<EuiText size="s">
{" "}
<h3>{record.title}</h3>{" "}
</EuiText>
</div>
}
helpText={ActionTypeMapDescription[getKeyByValue(ActionTypeMapTitle, record.title) as ActionType]}
direction="hoz"
key={record.action_name}
>
<>
<CustomFormRow label={LABEL_FOR_CONDITION}>
<EuiFlexGroup alignItems="flexStart">
<EuiFlexItem>
<AllBuiltInComponents.CheckBox
{...field.registerField({
name: ["dataSource", `${record.index}`, FieldEnum.failure],
})}
data-test-subj={["dataSource", `${record.index}`, FieldEnum.failure].join(".")}
label="Has failed"
/>
</EuiFlexItem>
<EuiFlexItem>
<AllBuiltInComponents.CheckBox
{...field.registerField({
name: ["dataSource", `${record.index}`, FieldEnum.success],
})}
data-test-subj={["dataSource", `${record.index}`, FieldEnum.success].join(".")}
label="Has completed"
/>
</EuiFlexItem>
</EuiFlexGroup>
</CustomFormRow>
{field.getValue(["dataSource", `${record.index}`, FieldEnum.failure]) ||
field.getValue(["dataSource", `${record.index}`, FieldEnum.success]) ? (
<>
<EuiSpacer />
<CustomFormRow
label={FieldMapLabel[FieldEnum.channels]}
isInvalid={!!field.getError(["dataSource", `${record.index}`, FieldEnum.channels])}
error={field.getError(["dataSource", `${record.index}`, FieldEnum.channels])}
data-test-subj={["dataSource", `${record.index}`, FieldEnum.channels].join(".")}
>
<ChannelSelect {...others} value={value} onChange={onChange} />
</CustomFormRow>
</>
) : null}
</>
</CustomFormRow>
);
})}
<EuiSpacer />
</>
)}
</EuiModalBody>
<EuiModalFooter>
<UnsavedChangesButtons
Expand Down
26 changes: 12 additions & 14 deletions public/pages/Indices/components/NotificationModal/UnsavedChangesButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
// FILE: UnsavedChangesButtons.tsx

import React, { useCallback, useRef, useState } from "react";
import { EuiSmallButton, EuiSmallButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from "@elastic/eui";
import classNames from "classnames";

import { EuiSmallButton, EuiSmallButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText, EuiPanel } from "@elastic/eui";
interface UnsavedChangesButtonsProps {
unsavedCount: number;
formErrorsCount?: number;
Expand Down Expand Up @@ -37,7 +35,7 @@ const UnsavedChangesButtons: React.FC<UnsavedChangesButtonsProps> = ({

const renderCancel = useCallback(
() => (
<EuiSmallButtonEmpty onClick={onClickCancel} iconType="cross" target="_blank">
<EuiSmallButtonEmpty onClick={onClickCancel} target="_blank">
Cancel
</EuiSmallButtonEmpty>
),
Expand All @@ -51,7 +49,6 @@ const UnsavedChangesButtons: React.FC<UnsavedChangesButtonsProps> = ({
onClick={onClick}
isLoading={loading}
disabled={loading}
iconType="check"
color="primary"
fill
>
Expand All @@ -62,27 +59,28 @@ const UnsavedChangesButtons: React.FC<UnsavedChangesButtonsProps> = ({
);

return (
<EuiFlexGroup alignItems="center" justifyContent="flexEnd">
<>
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween" style={{ padding: "0px 16px" }}>
<EuiFlexGroup gutterSize="s" alignItems="center">
{formErrorsCount ? (
<EuiFlexItem grow={false}>
<EuiText color="danger" size="s">
{" "}
{formErrorsCount} form errors{" "}
{formErrorsCount} form errors
</EuiText>
</EuiFlexItem>
) : null}
{unsavedCount && !formErrorsCount ? (
<EuiFlexItem grow={false}>
<EuiText color="warning" size="s">
{" "}
{unsavedCount} unsaved changes{" "}
{unsavedCount} unsaved changes
</EuiText>
</EuiFlexItem>
) : null}
</>
<EuiFlexItem grow={false}>{renderCancel()}</EuiFlexItem>
<EuiFlexItem grow={false}>{renderConfirm()}</EuiFlexItem>
</EuiFlexGroup>

<EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="flexEnd">
<EuiFlexItem grow={false}>{renderCancel()}</EuiFlexItem>
<EuiFlexItem grow={false}>{renderConfirm()}</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexGroup>
);
};
Expand Down
Loading

0 comments on commit 445f134

Please sign in to comment.