Skip to content

Commit 8101651

Browse files
opensearch-trigger-bot[bot]AWSHurneyt
opensearch-trigger-bot[bot]
and
AWSHurneyt
authored
Implemented alias action UX. (#754) (#781)
* Implemented UX component for configuring and editing alias actions. Signed-off-by: AWSHurneyt <[email protected]> * Implemented unit and integration tests for alias action UX. Signed-off-by: AWSHurneyt <[email protected]> * Refactored existing test to accommodate addition of alias action UX. Signed-off-by: AWSHurneyt <[email protected]> * Fixed a bug preventing validation messages from appearing under both combo boxes at once. Signed-off-by: AWSHurneyt <[email protected]> * Removed redundant 'popout' icons from 'Learn more' links. Having 'target="_blank"' in the link attributes provides the icon. Updated snapshots. Signed-off-by: AWSHurneyt <[email protected]> * Added unit tests for AliasUiAction. Signed-off-by: AWSHurneyt <[email protected]> * Refactored alias action UX to include toggles to hide/display the add/remove combo boxes. Implemented a modal to confirm clearing combo box entries when toggling display. Signed-off-by: AWSHurneyt <[email protected]> * Refactored UX to remove the alias combo box clear confirmation modal based on PR feedback. Signed-off-by: AWSHurneyt <[email protected]> * Updated the 2.8 release notes. Signed-off-by: AWSHurneyt <[email protected]> --------- Signed-off-by: AWSHurneyt <[email protected]> (cherry picked from commit 5f5a172) Co-authored-by: AWSHurneyt <[email protected]>
1 parent 7a75c3d commit 8101651

File tree

38 files changed

+1426
-47
lines changed

38 files changed

+1426
-47
lines changed

‎cypress/fixtures/plugins/index-management-dashboards-plugin/sample_policy_alias_action.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"policy": {
3+
"policy_id": "test_alias_policy_id",
4+
"description": "Example policy with an alias action.",
5+
"default_state": "alias-state",
6+
"states": [
7+
{
8+
"name": "alias-state",
9+
"actions": [
10+
{
11+
"alias": {
12+
"actions": [
13+
{
14+
"remove": {
15+
"aliases": ["alias1", "alias2"]
16+
}
17+
},
18+
{
19+
"remove": {
20+
"alias": "alias3"
21+
}
22+
},
23+
{
24+
"add": {
25+
"aliases": ["alias4", "alias5"]
26+
}
27+
},
28+
{
29+
"add": {
30+
"aliases": "alias6"
31+
}
32+
}
33+
]
34+
}
35+
}
36+
],
37+
"transitions": []
38+
}
39+
]
40+
}
41+
}

‎cypress/integration/plugins/index-management-dashboards-plugin/policies_spec.js‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
import { BASE_PATH, IM_PLUGIN_NAME } from "../../../utils/constants";
77
import samplePolicy from "../../../fixtures/plugins/index-management-dashboards-plugin/sample_policy";
8+
import sampleAliasPolicy from "../../../fixtures/plugins/index-management-dashboards-plugin/sample_policy_alias_action.json";
89

910
const POLICY_ID = "test_policy_id";
1011

@@ -64,13 +65,106 @@ describe("Policies", () => {
6465
// Confirm we can see the created policy's description in table
6566
cy.contains("A simple description");
6667
});
68+
69+
it("with an alias action using the visual editor", () => {
70+
/* Create a policy with an alias action */
71+
const aliasPolicyId = "visual-editor-alias-policy";
72+
const testInputs = {
73+
add: ["alias1", "alias2"],
74+
remove: ["alias3", "alias5", "alias6"],
75+
};
76+
77+
// Route us to create policy page
78+
cy.contains("Create policy").click({ force: true });
79+
80+
// Use the visual editor
81+
cy.contains("Visual editor").click({ force: true });
82+
cy.contains("Continue").click({ force: true });
83+
84+
// Wait for input to load and then type in the policy ID
85+
cy.get(`input[placeholder="hot_cold_workflow"]`).type(aliasPolicyId, {
86+
force: true,
87+
});
88+
89+
// Type in the policy description
90+
cy.get(`[data-test-subj="create-policy-description"]`).type("{selectall}{backspace}" + sampleAliasPolicy.policy.description);
91+
92+
// Add a state
93+
cy.get("button").contains("Add state").click({ force: true });
94+
95+
// Enter a state name
96+
cy.get(`[data-test-subj="create-state-state-name"]`).type(sampleAliasPolicy.policy.states[0].name);
97+
98+
// Add a new action
99+
cy.get("button").contains("+ Add action").click({ force: true });
100+
101+
// Select 'Alias' type
102+
cy.get(`[data-test-subj="create-state-action-type"]`).select("Add / remove aliases");
103+
104+
// Confirm 'Add action' button is disabled
105+
cy.get(`[data-test-subj="flyout-footer-action-button"]`).should("be.disabled");
106+
107+
// Toggle the add alias combo box
108+
cy.get(`[data-test-subj="add-alias-toggle"]`).click({ force: true });
109+
110+
// Enter aliases to add
111+
cy.get(`[data-test-subj="add-alias-combo-box"]`).click({ force: true }).type(testInputs.add.join("{enter}"));
112+
113+
// Toggle the add alias combo box
114+
cy.get(`[data-test-subj="remove-alias-toggle"]`).click({ force: true });
115+
116+
// Enter aliases to remove
117+
cy.get(`[data-test-subj="remove-alias-combo-box"]`).click({ force: true }).type(testInputs.remove.join("{enter}"));
118+
119+
// Click the 'Add action' button
120+
cy.get(`[data-test-subj="flyout-footer-action-button"]`).click({ force: true });
121+
122+
// Click the 'Save action' button
123+
cy.get("button").contains("Save state").click({ force: true });
124+
125+
// Click the 'Create' button
126+
cy.get("button").contains("Create").click({ force: true });
127+
128+
/* Confirm policy was created as expected */
129+
130+
// Wait for the 'State management' dashboard to load
131+
cy.contains("State management policies (", { timeout: 60000 });
132+
133+
// Click on the test alias to navigate to the details page
134+
cy.contains(aliasPolicyId).click({ force: true });
135+
136+
// Wait for the details page to load, and click the 'Edit' button
137+
cy.url({ timeout: 60000 }).should("include", "policy-details");
138+
cy.contains("Edit").click({ force: true });
139+
140+
// Use the visual editor
141+
cy.contains("Visual editor").click({ force: true });
142+
cy.contains("Continue").click({ force: true });
143+
144+
// Click the state edit icon
145+
cy.get(`[aria-label="Edit"]`).click({ force: true });
146+
cy.get(`[data-test-subj="draggable"]`).within(() => {
147+
cy.get(`[aria-label="Edit"]`).click({ force: true });
148+
});
149+
150+
// Confirm all of the expected inputs are in the 'Add' combo box
151+
testInputs.add.forEach((alias) => {
152+
cy.get(`[data-test-subj="add-alias-combo-box"]`).contains(alias);
153+
});
154+
155+
// Confirm all of the expected inputs are in the 'Remove' combo box
156+
testInputs.remove.forEach((alias) => {
157+
cy.get(`[data-test-subj="remove-alias-combo-box"]`).contains(alias);
158+
});
159+
});
67160
});
68161

69162
describe("can be edited", () => {
70163
before(() => {
71164
cy.deleteAllIndices();
72165
cy.deleteIMJobs();
73166
cy.createPolicy(POLICY_ID, samplePolicy);
167+
cy.createPolicy(sampleAliasPolicy.policy.policy_id, sampleAliasPolicy);
74168
});
75169

76170
it("successfully", () => {
@@ -116,6 +210,79 @@ describe("Policies", () => {
116210
// Confirm new description shows in table
117211
cy.contains("A new description");
118212
});
213+
214+
it("with more aliases", () => {
215+
// Click on the test alias to navigate to the details page
216+
const testInputs = {
217+
add: ["alias4", "alias6"],
218+
remove: ["alias1", "alias2", "alias3", "alias7"],
219+
};
220+
/* Edit the policy */
221+
222+
// Click on the test alias to navigate to the details page
223+
cy.contains(sampleAliasPolicy.policy.policy_id).click({ force: true });
224+
225+
// Wait for the details page to load, and click the 'Edit' button
226+
cy.url({ timeout: 60000 }).should("include", "policy-details");
227+
cy.contains("Edit").click({ force: true });
228+
229+
// Use the visual editor
230+
cy.contains("Visual editor").click({ force: true });
231+
cy.contains("Continue").click({ force: true });
232+
233+
// Click the 'Edit state' icon
234+
cy.get(`[aria-label="Edit"]`).click({ force: true });
235+
236+
// Click the 'Edit action' icon
237+
cy.get(`[data-test-subj="draggable"]`).within(() => {
238+
cy.get(`[aria-label="Edit"]`).click({ force: true });
239+
});
240+
241+
// Remove an alias from the 'Add' combo box
242+
cy.get(`[aria-label="Remove alias5 from selection in this group"]`).click({ force: true });
243+
244+
// Add a new alias to the 'Remove' combo box
245+
cy.get(`[data-test-subj="remove-alias-combo-box"]`).click({ force: true }).type("alias7{enter}");
246+
247+
// Save the edits
248+
cy.get(`[data-test-subj="flyout-footer-action-button"]`).click({ force: true });
249+
cy.get("button").contains("Update state").click({ force: true });
250+
cy.get("button").contains("Update").click({ force: true });
251+
252+
/* Confirm policy was edited as expected */
253+
254+
// Wait for the 'State management' dashboard to load
255+
cy.contains("State management policies (", { timeout: 60000 });
256+
257+
// Click on the test alias to navigate to the details page
258+
cy.contains(sampleAliasPolicy.policy.policy_id).click({ force: true });
259+
260+
// Wait for the details page to load, and click the 'Edit' button
261+
cy.url({ timeout: 60000 }).should("include", "policy-details");
262+
cy.contains("Edit").click({ force: true });
263+
264+
// Use the visual editor
265+
cy.contains("Visual editor").click({ force: true });
266+
cy.contains("Continue").click({ force: true });
267+
268+
// Click the 'Edit state' icon
269+
cy.get(`[aria-label="Edit"]`).click({ force: true });
270+
271+
// Click the 'Edit action' icon
272+
cy.get(`[data-test-subj="draggable"]`).within(() => {
273+
cy.get(`[aria-label="Edit"]`).click({ force: true });
274+
});
275+
276+
// Confirm all of the expected inputs are in the 'Add' combo box
277+
testInputs.add.forEach((alias) => {
278+
cy.get(`[data-test-subj="add-alias-combo-box"]`).contains(alias);
279+
});
280+
281+
// Confirm all of the expected inputs are in the 'Remove' combo box
282+
testInputs.remove.forEach((alias) => {
283+
cy.get(`[data-test-subj="remove-alias-combo-box"]`).contains(alias);
284+
});
285+
});
119286
});
120287

121288
describe("can be deleted", () => {

‎models/interfaces.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,7 @@ export interface UIAction<Data> {
325325
clone: (action: Data) => UIAction<Data>;
326326
content: () => JSX.Element | string | null;
327327
toAction: () => Action;
328+
customDisplayText?: string;
328329
}
329330

330331
export interface ForceMergeAction extends Action {
@@ -433,6 +434,24 @@ export interface IndexPriorityAction extends Action {
433434
};
434435
}
435436

437+
export enum AliasActions {
438+
ADD = "add",
439+
REMOVE = "remove",
440+
}
441+
442+
export type AliasActionItem = {
443+
[key in AliasActions]: {
444+
alias?: string;
445+
aliases?: string[];
446+
};
447+
};
448+
449+
export interface AliasAction extends Action {
450+
alias: {
451+
actions: AliasActionItem[];
452+
};
453+
}
454+
436455
export interface AllocationAction extends Action {
437456
allocation: {
438457
// TODO: These require a complete UI and we are only supporting JSON editor for allocation for now

‎public/containers/ErrorNotification/ErrorNotification.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ class ErrorNotification extends Component<ErrorNotificationProps, ErrorNotificat
143143
<p style={{ fontWeight: 200 }}>
144144
You can set up an error notification for when a policy execution fails.{" "}
145145
<EuiLink href={ERROR_NOTIFICATION_DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer">
146-
Learn more <EuiIcon type="popout" size="s" />
146+
Learn more
147147
</EuiLink>
148148
</p>
149149
</EuiText>

‎public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,7 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
6060
rel="noopener noreferrer"
6161
target="_blank"
6262
>
63-
Learn more
64-
EuiIconMock
63+
Learn more
6564
EuiIconMock
6665
<span
6766
class="euiScreenReaderOnly"

‎public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
9494
<p>
9595
When the new policy will take effect depends on the current state of indices and the states of the new policy.{" "}
9696
<EuiLink href={DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer">
97-
Learn more <EuiIcon type="popout" size="s" />
97+
Learn more
9898
</EuiLink>
9999
</p>
100100
</EuiText>

‎public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,7 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
4646
rel="noopener noreferrer"
4747
target="_blank"
4848
>
49-
Learn more
50-
EuiIconMock
49+
Learn more
5150
EuiIconMock
5251
<span
5352
class="euiScreenReaderOnly"

‎public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -257,8 +257,7 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
257257
rel="noopener noreferrer"
258258
target="_blank"
259259
>
260-
Learn more
261-
EuiIconMock
260+
Learn more
262261
EuiIconMock
263262
<span
264263
class="euiScreenReaderOnly"

‎public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError }: Defi
5353
You can think of policies as state machines. "Actions" are the operations ISM performs when an index is in a certain state.
5454
"Transitions" define when to move from one state to another.{" "}
5555
<EuiLink href={DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer">
56-
Learn more <EuiIcon type="popout" size="s" />
56+
Learn more
5757
</EuiLink>
5858
</p>
5959
</EuiText>

‎public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,7 @@ exports[`<DefinePolicy /> spec renders the component 1`] = `
9696
rel="noopener noreferrer"
9797
target="_blank"
9898
>
99-
Learn more
100-
EuiIconMock
99+
Learn more
101100
EuiIconMock
102101
<span
103102
class="euiScreenReaderOnly"

0 commit comments

Comments
 (0)