From 1b042943e9a02741b908dc014592649705204570 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Fri, 6 Nov 2020 14:57:19 +0000 Subject: [PATCH] ui: Intention "Action change" warning modal (#9108) * ui: Add a warning dialog if you go to remove permissions from an intention * ui: Move modal styles next to component, add warning style * ui: Move back to using the input name for a selector * ui: Fixup negative "isn't" step so its optional * Add warning modal to pageobject * Fixup test for whether to show the warning modal or not * Intention change action warning acceptence test * Add a null/undefined Action --- .../consul/intention/form/index.hbs | 48 +++++++++++++++- .../components/consul/intention/form/index.js | 29 ++++++---- .../consul/intention/form/index.scss | 11 ++++ .../components/consul/intention/index.scss | 1 + .../app/components/modal-dialog/index.hbs | 32 ++++++++--- .../app/components/modal-dialog/index.js | 2 +- .../app/components/modal-dialog/index.scss | 14 +++++ .../components/modal-dialog/layout.scss | 5 +- .../app/components/modal-dialog/skin.scss | 55 +++++++++++++++++++ .../consul-ui/app/serializers/intention.js | 5 +- .../app/styles/base/components/index.scss | 1 - .../base/components/modal-dialog/index.scss | 2 - .../base/components/modal-dialog/skin.scss | 32 ----------- .../consul-ui/app/styles/components.scss | 2 +- .../styles/components/auth-modal/layout.scss | 5 +- .../app/styles/components/form-elements.scss | 6 ++ .../app/styles/components/modal-dialog.scss | 18 ------ .../dc/intentions/permissions/warn.feature | 31 +++++++++++ .../dc/intentions/permissions/warn-steps.js | 10 ++++ ui/packages/consul-ui/tests/pages.js | 9 ++- .../tests/pages/dc/intentions/edit.js | 14 +++++ .../consul-ui/tests/steps/assertions/page.js | 2 +- 22 files changed, 251 insertions(+), 83 deletions(-) create mode 100644 ui/packages/consul-ui/app/components/consul/intention/form/index.scss create mode 100644 ui/packages/consul-ui/app/components/modal-dialog/index.scss rename ui/packages/consul-ui/app/{styles/base => }/components/modal-dialog/layout.scss (95%) create mode 100644 ui/packages/consul-ui/app/components/modal-dialog/skin.scss delete mode 100644 ui/packages/consul-ui/app/styles/base/components/modal-dialog/index.scss delete mode 100644 ui/packages/consul-ui/app/styles/base/components/modal-dialog/skin.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/modal-dialog.scss create mode 100644 ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/warn.feature create mode 100644 ui/packages/consul-ui/tests/acceptance/steps/dc/intentions/permissions/warn-steps.js diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs index e8e4fbd70..bfc0aee5a 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs @@ -1,3 +1,7 @@ +
- {{#let api.data as |item|}} {{#if item.IsEditable}} + +{{#if this.warn}} + {{#let (changeset-get item 'Action') as |newAction|}} + + +

Set intention to {{newAction}}?

+
+ +

+ When you change this Intention to {{newAction}}, you will remove all the L7 policy permissions currently saved to this Intention. Are you sure you want to set it to {{newAction}}? +

+
+ + + + +
+ {{/let}} +{{/if}} + {{#if (and api.isCreate this.isManagedByCRDs)}} {{/if}} -
+ +
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.js b/ui/packages/consul-ui/app/components/consul/intention/form/index.js index c2d8b2d06..37810c892 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/index.js +++ b/ui/packages/consul-ui/app/components/consul/intention/form/index.js @@ -4,7 +4,6 @@ import { action } from '@ember/object'; import { tracked } from '@glimmer/tracking'; export default class ConsulIntentionForm extends Component { - @tracked services; @tracked SourceName; @tracked DestinationName; @@ -15,6 +14,8 @@ export default class ConsulIntentionForm extends Component { @tracked isManagedByCRDs; + @tracked warn = false; + @service('repository/intention') repo; constructor(owner, args) { @@ -23,7 +24,7 @@ export default class ConsulIntentionForm extends Component { } ondelete() { - if(this.args.ondelete) { + if (this.args.ondelete) { this.args.ondelete(...arguments); } else { this.onsubmit(...arguments); @@ -31,7 +32,7 @@ export default class ConsulIntentionForm extends Component { } oncancel() { - if(this.args.oncancel) { + if (this.args.oncancel) { this.args.oncancel(...arguments); } else { this.onsubmit(...arguments); @@ -39,7 +40,7 @@ export default class ConsulIntentionForm extends Component { } onsubmit() { - if(this.args.onsubmit) { + if (this.args.onsubmit) { this.args.onsubmit(...arguments); } } @@ -48,9 +49,19 @@ export default class ConsulIntentionForm extends Component { updateCRDManagement() { this.isManagedByCRDs = this.repo.isManagedByCRDs(); } - @action - createServices (item, e) { + submit(item, submit, e) { + e.preventDefault(); + // if the action of the intention has changed and its non-empty then warn + // the user + if (typeof item.change.Action !== 'undefined' && typeof item.data.Action === 'undefined') { + this.warn = true; + } else { + submit(); + } + } + @action + createServices(item, e) { // Services in the menus should: // 1. Be unique (they potentially could be duplicated due to services from different namespaces) // 2. Only include services that shold have intentions @@ -59,9 +70,7 @@ export default class ConsulIntentionForm extends Component { let items = e.data .uniqBy('Name') .toArray() - .filter( - item => !['connect-proxy', 'mesh-gateway', 'terminating-gateway'].includes(item.Kind) - ) + .filter(item => !['connect-proxy', 'mesh-gateway', 'terminating-gateway'].includes(item.Kind)) .sort((a, b) => a.Name.localeCompare(b.Name)); items = [{ Name: '*' }].concat(items); let source = items.findBy('Name', item.SourceName); @@ -80,7 +89,7 @@ export default class ConsulIntentionForm extends Component { } @action - createNspaces (item, e) { + createNspaces(item, e) { // Nspaces in the menus should: // 1. Include an 'All Namespaces' option // 2. Include the current SourceNS and DestinationNS incase they don't exist yet diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.scss b/ui/packages/consul-ui/app/components/consul/intention/form/index.scss new file mode 100644 index 000000000..c3413ab3c --- /dev/null +++ b/ui/packages/consul-ui/app/components/consul/intention/form/index.scss @@ -0,0 +1,11 @@ +.consul-intention-action-warn-modal { + .modal-dialog-window { + max-width: 450px; + } + .modal-dialog-body p { + font-size: $typo-size-600; + } + button.dangerous { + @extend %dangerous-button; + } +} diff --git a/ui/packages/consul-ui/app/components/consul/intention/index.scss b/ui/packages/consul-ui/app/components/consul/intention/index.scss index c7539a74c..47026b68e 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/index.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/index.scss @@ -2,6 +2,7 @@ @import './search-bar'; @import './list'; +@import './form'; @import './form/fieldsets'; @import './permission/list'; @import './permission/form'; diff --git a/ui/packages/consul-ui/app/components/modal-dialog/index.hbs b/ui/packages/consul-ui/app/components/modal-dialog/index.hbs index ad8930ff7..8cb052be4 100644 --- a/ui/packages/consul-ui/app/components/modal-dialog/index.hbs +++ b/ui/packages/consul-ui/app/components/modal-dialog/index.hbs @@ -1,28 +1,44 @@ {{on-window 'resize' (action "resize") }} {{yield}} -
- -
+