Skip to content

Commit

Permalink
Fixes some small UI touchups/issues for new ISM UI (#85)
Browse files Browse the repository at this point in the history 
* Moves cancel secondary button next to primary on action/transition flyout

Signed-off-by: Drew Baugher <[email protected]>

* Removes default ISM template and increases width of empty prompt

Signed-off-by: Drew Baugher <[email protected]>

* Adds punctuation

Signed-off-by: Drew Baugher <[email protected]>

* Adds back X icon next to cancel for state flyout

Signed-off-by: Drew Baugher <[email protected]>

* Makes inputs in flyout full width, updates help text, and adds some spacing

Signed-off-by: Drew Baugher <[email protected]>

* Updates transition default to not include conditions empty object, and on change transition to delete conditions when selecting none

Signed-off-by: Drew Baugher <[email protected]>

* Moves edit button out of policy settings content panel and on to global page for view policy

Signed-off-by: Drew Baugher <[email protected]>

* Updates release note

Signed-off-by: Drew Baugher <[email protected]>
  • Loading branch information
@dbbaughe
dbbaughe authored Sep 9, 2021
1 parent d23f65a commit cc64e2f
Show file tree
Hide file tree
Showing 29 changed files with 119 additions and 287 deletions.
32 changes: 3 additions & 29 deletions public/pages/PolicyDetails/components/PolicySettings/PolicySettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,9 @@

import React, { Component } from "react";
import { EuiLink, EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText } from "@elastic/eui";
import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
import { ContentPanel } from "../../../../components/ContentPanel";
import { ModalConsumer } from "../../../../components/Modal";
import { ErrorNotification, ISMTemplate } from "../../../../../models/interfaces";
import CreatePolicyModal from "../../../../components/CreatePolicyModal";
import JSONModal from "../../../../components/JSONModal";

interface PolicySettingsProps {
Expand All @@ -25,14 +24,13 @@ interface PolicySettingsProps {
description: string;
sequenceNumber: number;
ismTemplates: ISMTemplate[] | ISMTemplate | null;
onEdit: (visual: boolean) => void;
}

interface PolicySettingsState {}

export default class PolicySettings extends Component<PolicySettingsProps, PolicySettingsState> {
render() {
const { policyId, errorNotification, primaryTerm, lastUpdated, description, sequenceNumber, onEdit } = this.props;
const { policyId, errorNotification, primaryTerm, lastUpdated, description, sequenceNumber } = this.props;

const updatedDate = lastUpdated ? new Date(lastUpdated).toLocaleString() : "-";

Expand All @@ -58,31 +56,7 @@ export default class PolicySettings extends Component<PolicySettingsProps, Polic
];

return (
<ContentPanel
actions={
<ModalConsumer>
{() => (
<ContentPanelActions
actions={[
{
text: "Edit",
buttonProps: {
onClick: onEdit,
},
modal: {
onClickModal: (onShow: (component: any, props: object) => void) => () =>
onShow(CreatePolicyModal, { isEdit: true, onClickContinue: onEdit }),
},
},
]}
/>
)}
</ModalConsumer>
}
bodyStyles={{ padding: "10px" }}
title="Policy settings"
titleSize="s"
>
<ContentPanel bodyStyles={{ padding: "10px" }} title="Policy settings" titleSize="s">
<div style={{ paddingLeft: "10px" }}>
<EuiSpacer size="s" />
<EuiFlexGrid columns={4}>
Expand Down
35 changes: 0 additions & 35 deletions .../pages/PolicyDetails/components/PolicySettings/__snapshots__/PolicySettings.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,41 +18,6 @@ exports[`<PolicySettings /> spec renders the component 1`] = `
Policy settings
</h3>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary"
data-test-subj="EditButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
>
<span
class="euiButton__text"
>
Edit
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<hr
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
Expand Down
15 changes: 14 additions & 1 deletion public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ import States from "../../../VisualCreatePolicy/components/States";
import JSONModal from "../../../../components/JSONModal";
import { ContentPanel } from "../../../../components/ContentPanel";
import { convertTemplatesToArray } from "../../../VisualCreatePolicy/utils/helpers";
import CreatePolicyModal from "../../../../components/CreatePolicyModal";
import { ModalConsumer } from "../../../../components/Modal";

interface PolicyDetailsProps extends RouteComponentProps {
policyService: PolicyService;
Expand Down Expand Up @@ -189,6 +191,18 @@ export default class PolicyDetails extends Component<PolicyDetailsProps, PolicyD

<EuiFlexItem grow={false}>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<ModalConsumer>
{({ onShow }) => (
<EuiButton
onClick={() => onShow(CreatePolicyModal, { isEdit: true, onClickContinue: this.onEdit })}
data-test-subj="policy-details-edit-button"
>
Edit
</EuiButton>
)}
</ModalConsumer>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton onClick={this.showDeleteModal} color="danger" data-test-subj="deleteButton">
Delete
Expand All @@ -212,7 +226,6 @@ export default class PolicyDetails extends Component<PolicyDetailsProps, PolicyD
description={policy.policy.description}
sequenceNumber={policy.seqNo}
ismTemplates={policy.policy.ism_template || []}
onEdit={this.onEdit}
/>
<EuiSpacer />
<ContentPanel bodyStyles={{ padding: "10px" }} title={`ISM Templates (${convertedISMTemplates.length})`} titleSize="s">
Expand Down
2 changes: 1 addition & 1 deletion public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ interface FlyoutFooterProps {
}

const FlyoutFooter = ({ edit, action, disabledAction = false, onClickCancel, onClickAction }: FlyoutFooterProps) => (
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={onClickCancel} flush="left" data-test-subj="flyout-footer-cancel-button">
Cancel
Expand Down
2 changes: 1 addition & 1 deletion ...pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`<FlyoutFooter /> spec renders the component 1`] = `
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
Expand Down
1 change: 1 addition & 0 deletions public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ const ISMTemplates = ({ policy, onChangePolicy }: ISMTemplatesProps) => {
{!templates.length ? (
<EuiEmptyPrompt
title={<h2>No ISM templates</h2>}
style={{ maxWidth: "37em" }}
titleSize="s"
body={
<p>
Expand Down
194 changes: 29 additions & 165 deletions ...pages/VisualCreatePolicy/components/ISMTemplates/__snapshots__/ISMTemplates.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,186 +74,50 @@ exports[`<ISMTemplates /> spec renders the component 1`] = `
style="padding: 10px 0px 0px 10px;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiEmptyPrompt"
style="max-width: 37em;"
>
<div
class="euiFlexItem"
style="max-width: 400px;"
<span
class="euiTextColor euiTextColor--subdued"
>
<div
class="euiText euiText--medium"
<h2
class="euiTitle euiTitle--small"
>
<h5>
Index patterns
</h5>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
No ISM templates
</h2>
<div
class="euiText euiText--medium"
>
<h5>
Priority
</h5>
</div>
</div>
</div>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
style="max-width: 400px;"
>
class="euiSpacer euiSpacer--m"
/>
<div
class="euiFormRow"
id="some_html_id-row"
class="euiText euiText--medium"
>
<div
class="euiFormRow__fieldWrapper"
>
<div
aria-expanded="false"
aria-haspopup="listbox"
class="euiComboBox"
data-test-subj="ism-template-index-pattern-input"
role="combobox"
>
<div
class="euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<div
class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
data-test-subj="comboBoxInput"
tabindex="-1"
>
<span
class="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
title="logs-*"
>
<span
class="euiBadge__content"
>
<span
class="euiBadge__text"
>
logs-*
</span>
<button
aria-label="Remove logs-* from selection in this group"
class="euiBadge__iconButton"
title="Remove logs-* from selection in this group"
>
EuiIconMock
</button>
</span>
</span>
<div
class="euiComboBox__input"
style="font-size: 14px; display: inline-block;"
>
<input
aria-controls=""
data-test-subj="comboBoxSearchInput"
id="some_html_id"
role="textbox"
style="box-sizing: content-box; width: 2px;"
value=""
/>
<div
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
/>
</div>
</div>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
>
<button
aria-label="Clear input"
class="euiFormControlLayoutClearButton"
data-test-subj="comboBoxClearButton"
type="button"
>
EuiIconMock
</button>
</div>
</div>
</div>
</div>
</div>
<p>
Your policy currently has no ISM templates defined. Add ISM templates to automatically apply the policy to indices created in the future.
</p>
</div>
</div>
</span>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiFormRow"
id="some_html_id-row"
>
<div
class="euiFormRow__fieldWrapper"
>
<div
class="euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<input
class="euiFieldNumber"
data-test-subj="ism-template-priority-input"
id="some_html_id"
type="number"
value="5"
/>
</div>
</div>
</div>
</div>
</div>
class="euiSpacer euiSpacer--l"
/>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
class="euiSpacer euiSpacer--s"
/>
<button
class="euiButton euiButton--primary"
data-test-subj="ism-templates-add-template-button"
type="button"
>
<button
class="euiButton euiButton--danger"
data-test-subj="ism-template-remove-button"
type="button"
<span
class="euiButtonContent euiButton__content"
>
<span
class="euiButtonContent euiButton__content"
class="euiButton__text"
>
<span
class="euiButton__text"
>
Remove
</span>
Add template
</span>
</button>
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
/>
<button
class="euiButton euiButton--primary"
data-test-subj="ism-templates-add-template-button"
type="button"
>
<span
class="euiButtonContent euiButton__content"
>
<span
class="euiButton__text"
>
Add template
</span>
</span>
</button>
</button>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion public/pages/VisualCreatePolicy/components/LegacyNotification/LegacyNotification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const LegacyNotification = ({
}: LegacyNotificationProps) => {
return (
<>
<EuiFormRow isInvalid={isInvalid} error={null} style={{ maxWidth: "100%" }}>
<EuiFormRow fullWidth isInvalid={isInvalid} error={null} style={{ maxWidth: "100%" }}>
<DarkModeConsumer>
{(isDarkMode) => (
<EuiCodeEditor
Expand Down
2 changes: 1 addition & 1 deletion ...CreatePolicy/components/LegacyNotification/__snapshots__/LegacyNotification.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`<LegacyNotification /> spec renders the component 1`] = `
<div
class="euiFormRow"
class="euiFormRow euiFormRow--fullWidth"
id="some_html_id-row"
style="max-width: 100%;"
>
Expand Down
Loading

0 comments on commit cc64e2f

Please sign in to comment.