From 4533a5e959a199105a6f103611bd4d12d711a522 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Tue, 4 May 2021 17:21:54 +0100 Subject: [PATCH] ui: Adds CRD popover 'informed action' for intentions managed by CRDs (#10100) * ui: Adds CRD popover 'informed action' for intentions add via CRDs --- .changelog/10100.txt | 3 ++ .../app/components/aria-menu/index.js | 6 +++ .../consul/intention/list/layout.scss | 3 ++ .../consul/intention/list/table/index.hbs | 38 ++++++++++++++++++- .../app/components/informed-action/skin.scss | 7 ++++ .../app/components/menu-panel/index.hbs | 9 ++++- .../app/components/menu-panel/index.js | 15 ++++++++ .../app/components/menu-panel/layout.scss | 8 +++- .../styles/base/icons/icon-placeholders.scss | 6 +++ 9 files changed, 90 insertions(+), 5 deletions(-) create mode 100644 .changelog/10100.txt diff --git a/.changelog/10100.txt b/.changelog/10100.txt new file mode 100644 index 0000000000..1bdedd2876 --- /dev/null +++ b/.changelog/10100.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Added CRD popover 'informed action' for intentions managed by CRDs +``` diff --git a/ui/packages/consul-ui/app/components/aria-menu/index.js b/ui/packages/consul-ui/app/components/aria-menu/index.js index 2033b725ce..4162a1995d 100644 --- a/ui/packages/consul-ui/app/components/aria-menu/index.js +++ b/ui/packages/consul-ui/app/components/aria-menu/index.js @@ -129,6 +129,12 @@ export default Component.extend({ }, open: function(e) { set(this, 'expanded', true); + const $items = [...this.dom.elements(MENU_ITEMS, this.$menu)]; + if ($items.length === 0) { + this.dom + .element('input[type="checkbox"]', this.$menu.parentElement) + .dispatchEvent(new MouseEvent('click')); + } // Take the trigger out of the tabbing whilst the menu is open this.$trigger.setAttribute('tabindex', '-1'); this._listeners.add(this.dom.document(), { diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/layout.scss b/ui/packages/consul-ui/app/components/consul/intention/list/layout.scss index e208890f77..7b7e3338a3 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/list/layout.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/list/layout.scss @@ -20,6 +20,9 @@ tr > *:last-child { width: 60px; } + .menu-panel.confirmation { + width: 200px; + } } @media #{$--lt-horizontal-nav} { diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs index d54b8b0cd4..ad3faa2d5d 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs @@ -54,7 +54,10 @@ as |item index|> - + More @@ -100,7 +103,38 @@ as |item index|> {{else}}
  • - View +
    + + <:header> + Managed by CRD + + <:body> +

    + This intention is being managed through an Intention Custom Resource in your Kubernetes cluster. It is view only in the UI. +

    + + <:actions as |Actions|> + + + View + + + + + Cancel + + + +     +
    • {{/if}}     diff --git a/ui/packages/consul-ui/app/components/informed-action/skin.scss b/ui/packages/consul-ui/app/components/informed-action/skin.scss index 0e1ab9c406..266eb5340f 100644 --- a/ui/packages/consul-ui/app/components/informed-action/skin.scss +++ b/ui/packages/consul-ui/app/components/informed-action/skin.scss @@ -66,6 +66,13 @@ background-color: $yellow-050; } } + /* brands */ + &.kubernetes { + header::before { + @extend %with-logo-kubernetes-color-icon, %without-mask, %as-pseudo; + } + } + /**/ > ul > .action > * { color: $blue-500; } diff --git a/ui/packages/consul-ui/app/components/menu-panel/index.hbs b/ui/packages/consul-ui/app/components/menu-panel/index.hbs index a07a628660..b114d3876c 100644 --- a/ui/packages/consul-ui/app/components/menu-panel/index.hbs +++ b/ui/packages/consul-ui/app/components/menu-panel/index.hbs @@ -2,7 +2,14 @@ {{#let (hash change=(action "change") ) as |api|}} -
    +
    {{yield api}} diff --git a/ui/packages/consul-ui/app/components/menu-panel/index.js b/ui/packages/consul-ui/app/components/menu-panel/index.js index 01c78ed689..32270f8a40 100644 --- a/ui/packages/consul-ui/app/components/menu-panel/index.js +++ b/ui/packages/consul-ui/app/components/menu-panel/index.js @@ -1,12 +1,27 @@ import Component from '@ember/component'; import { inject as service } from '@ember/service'; +import { next } from '@ember/runloop'; +import { set } from '@ember/object'; import Slotted from 'block-slots'; export default Component.extend(Slotted, { tagName: '', dom: service('dom'), + isConfirmation: false, actions: { + connect: function($el) { + next(() => { + // if theres only a single choice in the menu and it doesn't have an + // immediate button/link/label to click then it will be a + // confirmation/informed action + const isConfirmationMenu = this.dom.element( + 'li:only-child > [role="menu"]:first-child', + $el + ); + set(this, 'isConfirmation', typeof isConfirmationMenu !== 'undefined'); + }); + }, change: function(e) { const id = e.target.getAttribute('id'); const $trigger = this.dom.element(`[for='${id}']`); diff --git a/ui/packages/consul-ui/app/components/menu-panel/layout.scss b/ui/packages/consul-ui/app/components/menu-panel/layout.scss index 9dcf2fa6ba..6974243c08 100644 --- a/ui/packages/consul-ui/app/components/menu-panel/layout.scss +++ b/ui/packages/consul-ui/app/components/menu-panel/layout.scss @@ -9,12 +9,15 @@ transition: min-height 150ms, max-height 150ms; min-height: 0; } -%menu-panel [type='checkbox'] ~ * { +%menu-panel:not(.confirmation) [type='checkbox'] ~ * { transition: transform 150ms; } %menu-panel [type='checkbox']:checked ~ * { transform: translateX(calc(-100% - 10px)); } +%menu-panel.confirmation [role='menu'] { + min-height: 200px !important; +} %menu-panel [role='menuitem'] { display: flex; justify-content: space-between; @@ -37,7 +40,8 @@ min-height: 143px; max-height: 143px; } -%menu-panel [id$='-']:first-child:checked ~ ul label[for$='-'] + [role='menu'] { +%menu-panel [id$='-']:first-child:checked ~ ul label[for$='-'] * [role='menu'], +%menu-panel [id$='-']:first-child:checked ~ ul > li > [role='menu'] { display: block; } /**/ diff --git a/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss index 43d10d4565..082ff1cc1c 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss @@ -1874,3 +1874,9 @@ -webkit-mask-image: $webhook-svg; mask-image: $webhook-svg; } + +%without-mask { + -webkit-mask-image: none; + mask-image: none; + background-color: $transparent !important; +}