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

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Added CRD popover 'informed action' for intentions managed by CRDs
+```

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(), {

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} {

ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs

@@ -54,7 +54,10 @@ as |item index|>
         </td>
     </BlockSlot>
     <BlockSlot @name="actions" as |index change checked|>
-      <PopoverMenu @expanded={{if (eq checked index) true false}} @onchange={{action change index}} @keyboardAccess={{false}}>
+      <PopoverMenu
+        @expanded={{if (eq checked index) true false}}
+        @onchange={{action change index}} @keyboardAccess={{false}}
+      >
         <BlockSlot @name="trigger">
           More
         </BlockSlot>
@@ -100,7 +103,38 @@ as |item index|>
             </li>
           {{else}}
             <li role="none">
-              <a role="menuitem" tabindex="-1" href={{href-to (or @routeName 'dc.intentions.edit') item.ID}}>View</a>
+              <div role="menu">
+                <InformedAction
+                  class="info kubernetes"
+                >
+                  <:header>
+                    Managed by CRD
+                  </:header>
+                  <:body>
+                    <p>
+                      This intention is being managed through an Intention Custom Resource in your Kubernetes cluster. It is view only in the UI.
+                    </p>
+                  </:body>
+                  <:actions as |Actions|>
+                    <Actions.Action>
+                      <Action
+                        tabindex="-1"
+                        class="action"
+                        @href={{href-to (or @routeName 'dc.intentions.edit') item.ID}}
+                      >
+                        View
+                      </Action>
+                    </Actions.Action>
+                    <Actions.Action>
+                      <Action
+                        @onclick={{action change}}
+                      >
+                        Cancel
+                      </Action>
+                    </Actions.Action>
+                  </:actions>
+                </InformedAction>
+              </div>
             </li>
           {{/if}}
         </BlockSlot>

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;
   }

ui/packages/consul-ui/app/components/menu-panel/index.hbs

@@ -2,7 +2,14 @@
 {{#let (hash
   change=(action "change")
 ) as |api|}}
-<div class="menu-panel {{position}}">
+<div
+  class={{join ' ' (compact (array
+    'menu-panel'
+    position
+    (if isConfirmation 'confirmation')
+  ))}}
+  {{did-insert (action 'connect')}}
+>
   <YieldSlot @name="controls">
     {{yield api}}
   </YieldSlot>

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}']`);

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;
 }
 /**/

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;
+}