Skip to content

Commit

Permalink
Fit and Finish UX changes (#1179) (#1181)
Browse files Browse the repository at this point in the history 
* Fixed some Fit and Finish UX changes



* Fixed a minor issue in Notification modal



* Updated artifacts to v3



---------


(cherry picked from commit 8d4e01f)

Signed-off-by: Kshitij Tandon <tandonks@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: SuZhou-Joe <suzhou@amazon.com>
  • Loading branch information
@opensearch-trigger-bot @github-actions @SuZhou-Joe
3 people committed Sep 19, 2024
1 parent 2379d16 commit c1095f4
Show file tree
Hide file tree
Showing 21 changed files with 220 additions and 201 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/cypress-workflow.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,13 @@ jobs:
wait-on: 'http://localhost:5601'
browser: chrome
# Screenshots are only captured on failure, will change this once we do visual regression tests
- uses: actions/upload-artifact@v1
- uses: actions/upload-artifact@v3
if: failure()
with:
name: cypress-screenshots
path: OpenSearch-Dashboards/plugins/index-management-dashboards-plugin/cypress/screenshots
# Test run video was always captured, so this action uses "always()" condition
- uses: actions/upload-artifact@v1
- uses: actions/upload-artifact@v3
if: always()
with:
name: cypress-videos
Expand Down
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
248 changes: 121 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,136 @@ 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 ? (
<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>
}
/>
) : (
<>
{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
Loading

0 comments on commit c1095f4

Please sign in to comment.