Create new kebab component and toolbar click to merge toolbar custom buttons together

src/styles/toolbar.scss

@@ -0,0 +1,18 @@
+.dropdown-kebab-pf {
+  .dropdown-submenu {
+    .dropdown-menu {
+      top: 0;
+      left: 100%;
+      margin-top: -6px;
+      margin-left: -1px;
+
+      &:after, &:before {
+        border: none;
+      }
+
+      a:empty {
+        display: none;
+      }
+    }
+  }
+}

src/styles/ui-components.scss

@@ -2,6 +2,7 @@
 @import 'dialog-editor';
 @import 'dialog-editor-toolbox';
 @import 'dialog-editor-boxes';
+@import 'toolbar';
 
 .miq-sand-paper, .miq-sand-paper > div { /* emulates "cards-pf" background color */
   background: #f5f5f5;
@@ -34,7 +35,7 @@
 
 .miq-custom-html {
   .form-group.text, .form-group.has-clear {
-    padding-right: 20px; 
+    padding-right: 20px;
   }
 }
 

src/toolbar/components/toolbar-menu/index.ts

@@ -2,10 +2,14 @@ import Toolbar from './toolbarComponent';
 import ToolbarButton from './toolbarButtonDirective';
 import ToolbarList from './toolbarListComponent';
 import ToolbarView from './toolbarViewComponent';
+import ToolbarKebab from './toolbarKebabComponent';
+import ToolbarClick from './toolbarClickDirective';
 
 export default (module: ng.IModule) => {
   module.component('miqToolbarMenu', new Toolbar);
   module.component('miqToolbarList', new ToolbarList);
   module.component('miqToolbarView', new ToolbarView);
+  module.component('miqToolbarKebab', new ToolbarKebab);
+  module.directive('miqToolbarClick', ToolbarClick.Factory());
   module.directive('miqToolbarButton', ToolbarButton.Factory());
 };

src/toolbar/components/toolbar-menu/toolbar-item-click.html

@@ -0,0 +1,26 @@
+<a title="{{item.title}}"
+   ng-hide="item.hidden"
+   href=""
+   data-explorer="{{item.explorer}}"
+   data-confirm-tb="{{item.confirm}}"
+   data-function="{{item.data.function}}"
+   data-function-data="{{item.data['function-data']}}"
+   data-target="{{item.data.target}}"
+   data-toggle="{{item.data.toggle}}"
+   data-click="{{item.id}}"
+   name="{{item.id}}"
+   id="{{item.id}}"
+   data-url_parms="{{item.url_parms}}"
+   data-send_checked="{{item.send_checked ? 'true' : ''}}"
+   data-prompt="{{item.prompt}}"
+   data-popup="{{item.popup}}"
+   data-url="{{item.url}}"
+   ng-click="onItemClick({item: item, $event: $event})">
+  <i ng-if="item.icon && item.text" class="{{item.icon}}" ng-style="{color: (item.color | adjustColor : item.enabled)}" style="margin-right: 5px;"></i>
+  <i ng-if="item.icon && !item.text" class="{{item.icon}}" ng-style="{color: (item.color | adjustColor : item.enabled)}"></i>
+  <img ng-if="item.img_url && !item.icon"
+       ng-src="{{item.img_url}}"
+       data-enabled="{{item.img_url}}"
+       data-disabled="{{item.img_url}}">
+  <span>{{item.text}}</span>
+</a>

src/toolbar/components/toolbar-menu/toolbar-kebab.html

@@ -0,0 +1,29 @@
+<div uib-dropdown class="dropdown-kebab-pf">
+  <button uib-dropdown-toggle class="btn btn-link" type="button">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul uib-dropdown-menu aria-labelledby="dropdownKebab">
+    <li ng-repeat="kebabItem in vm.kebabItem.items"
+        role="{{kebabItem.isSeparator ? 'separator' : 'menuitem'}}"
+        ng-class="{
+          'divider': kebabItem.isSeparator,
+          'disabled': kebabItem.isDisabled,
+          'dropdown-submenu': kebabItem.type === 'buttonSelect'
+        }">
+      <miq-toolbar-click ng-if="kebabItem.type !== 'separator'"
+                         on-item-click="kebabItem.type !== 'buttonSelect' && vm.onItemClick({item: item, $event: $event})"
+                         item="kebabItem">
+      </miq-toolbar-click>
+
+      <ul ng-if="kebabItem.type === 'buttonSelect'"
+          uib-dropdown-menu>
+        <li ng-repeat="nestedItem in kebabItem.items">
+          <miq-toolbar-click ng-if="nestedItem.type !== 'separator'"
+                             item="nestedItem"
+                             on-item-click="vm.onItemClick({item: item, $event: $event})">
+          </miq-toolbar-click>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>

src/toolbar/components/toolbar-menu/toolbar-list.html

@@ -9,32 +9,10 @@
   </button>
   <ul class="uib-dropdown-menu" role="menu">
     <li ng-repeat="item in vm.toolbarList.items track by $index" ng-class="{disabled: !item.enabled}">
-      <a ng-if="item.type !== 'separator'"
-         ng-hide="item.hidden"
-         href=""
-         title="{{item.title}}"
-         data-explorer="{{item.explorer}}"
-         data-confirm-tb="{{item.confirm}}"
-         ng-click="vm.onItemClick({item: item, $event: $event})"
-         data-function="{{item.data.function}}"
-         data-function-data="{{item.data['function-data']}}"
-         data-target="{{item.data.target}}"
-         data-toggle="{{item.data.toggle}}"
-         data-click="{{item.id}}"
-         name="{{item.id}}"
-         id="{{item.id}}"
-         data-url_parms="{{item.url_parms}}"
-         data-send_checked="{{item.send_checked ? 'true' : ''}}"
-         data-prompt="{{item.prompt}}"
-         data-popup="{{item.popup}}"
-         data-url="{{item.url}}">
-        <i ng-if="item.icon && item.text" class="{{item.icon}}" ng-style="{color: (item.color | adjustColor : item.enabled)}" style="margin-right: 5px;"></i>
-        <i ng-if="item.icon && !item.text" class="{{item.icon}}" ng-style="{color: (item.color | adjustColor : item.enabled)}"></i>
-        <img ng-if="item.img_url && !item.icon" ng-src="{{item.img_url}}"
-             data-enabled="{{item.img_url}}"
-             data-disabled="{{item.img_url}}">
-        {{item.text}}
-      </a>
+      <miq-toolbar-click ng-if="item.type !== 'separator'"
+                         item="item"
+                         on-item-click="vm.onItemClick({item: item, $event: $event})">
+      </miq-toolbar-click>
       <div ng-if="item.type === 'separator'" class="divider " role="presentation" ng-hide="item.hidden"></div>
     </li>
   </ul>

src/toolbar/components/toolbar-menu/toolbar-menu.html

@@ -16,6 +16,11 @@
                         toolbar-list="item"
                         on-item-click="vm.onItemClick(item, $event)">
       </miq-toolbar-list>
+      <miq-toolbar-kebab ng-if="item.type === vm.getToolbarKebabType() && item.items.length > 0"
+                         kebab-item="item"
+                         on-item-click="vm.onItemClick(item, $event)">
+
+      </miq-toolbar-kebab>
       <div ng-if="item.name == 'custom' && item.args && item.args.html"
            ng-bind-html="vm.trustAsHtml(item.args.html)"
            class="miq-custom-html"></div>

src/toolbar/components/toolbar-menu/toolbarClickDirective.spec.ts

@@ -0,0 +1,96 @@
+import * as angular from 'angular';
+
+describe('Action click test', () =>  {
+  const onItemClick = jasmine.createSpy('onItemClick', (item, $event) => undefined);
+  const item = {
+    title: 'title',
+    text: 'someText',
+    hidden: false,
+    explorer: false,
+    confirm: 'confirm-text',
+    data: {
+      'function': 'someJsFunction',
+      'function-data': 'dataToPass',
+      target: 'targetData',
+      toggle: 'toggleData',
+    },
+    id: 'someId',
+    url_parms: 'urlParms',
+    'send_checked': true,
+    prompt: 'promptData',
+    popup: 'popupData',
+    url: 'urlString',
+    icon: 'fa',
+    img_url: 'someUrl'
+  };
+
+  describe('markup', () => {
+    let scope, compile, compiledElement;
+    beforeEach(() => {
+      angular.mock.module('miqStaticAssets.toolbar');
+      angular.mock.inject(($rootScope, $compile: ng.ICompileService) => {
+        scope = $rootScope.$new();
+        compile = $compile;
+      });
+
+      scope.item = item;
+      scope.onItemClick = onItemClick;
+      compiledElement = compile(
+        angular.element(
+          `<miq-toolbar-click item="item" on-item-click="onItemClick({item: item, $event: $event})"></miq-toolbar-click>`
+        ))(scope);
+      scope.$digest();
+    });
+
+    it('should render all data', () => {
+      expect(compiledElement.attr('title')).toBe('title');
+      expect(compiledElement.attr('data-explorer')).toBe('false');
+      expect(compiledElement.attr('data-confirm-tb')).toBe('confirm-text');
+      expect(compiledElement.attr('data-function')).toBe('someJsFunction');
+      expect(compiledElement.attr('data-function-data')).toBe('dataToPass');
+      expect(compiledElement.attr('data-target')).toBe('targetData');
+      expect(compiledElement.attr('data-toggle')).toBe('toggleData');
+      expect(compiledElement.attr('data-click')).toBe('someId');
+      expect(compiledElement.attr('name')).toBe('someId');
+      expect(compiledElement.attr('id')).toBe('someId');
+      expect(compiledElement.attr('data-url_parms')).toBe('urlParms');
+      expect(compiledElement.attr('data-send_checked')).toBe('true');
+      expect(compiledElement.attr('data-prompt')).toBe('promptData');
+      expect(compiledElement.attr('data-popup')).toBe('popupData');
+      expect(compiledElement.attr('data-url')).toBe('urlString');
+    });
+
+    it('should render icon', () => {
+      expect(compiledElement.find('i').length).toBe(1);
+      expect(compiledElement.find('img').length).toBe(0);
+      expect(compiledElement.find('i').attr('style')).toBe('margin-right: 5px;');
+      console.log();
+    });
+
+    it('should render aligned icon', () => {
+      scope.item.text = '';
+      scope.$apply();
+      expect(compiledElement.find('i').attr('style')).toBe(undefined);
+    });
+
+    it('should render image', () => {
+      scope.item.icon = '';
+      scope.$apply();
+      expect(compiledElement.find('img').length).toBe(1);
+      expect(compiledElement.find('i').length).toBe(0);
+    });
+
+    it('should not render image or icon', () => {
+      scope.item.icon = '';
+      scope.item.img_url = '';
+      scope.$apply();
+      expect(compiledElement.find('img').length).toBe(0);
+      expect(compiledElement.find('i').length).toBe(0);
+    });
+
+    it('should call onItemClick with arguments', () => {
+      compiledElement[0].click();
+      expect(onItemClick).toHaveBeenCalled();
+    });
+  });
+});

src/toolbar/components/toolbar-menu/toolbarClickDirective.ts

@@ -0,0 +1,15 @@
+export default class ToolbarClick implements ng.IDirective {
+  public replace: boolean = true;
+  public template = require('./toolbar-item-click.html');
+  public controllerAs: string = 'vm';
+  public scope: any = {
+    item: '<',
+    onItemClick: '&'
+  };
+
+  public static Factory = () => {
+    let directive: ng.IDirectiveFactory = () => new ToolbarClick();
+    directive.$inject = [];
+    return directive;
+  }
+}

src/toolbar/components/toolbar-menu/toolbarComponent.spec.ts

@@ -76,7 +76,7 @@ describe('Toolbar test', () =>  {
       compile,
       compiledElement;
 
-    const toolbarData = require('../../../../demo/data/toolbar.json');
+    let toolbarData = require('../../../../demo/data/toolbar.json');
 
     beforeEach(() => {
       angular.mock.module('miqStaticAssets.toolbar');
@@ -85,10 +85,10 @@ describe('Toolbar test', () =>  {
         compile = $compile;
       });
 
-      scope.toolbar = toolbarData;
+      scope.toolbarData = toolbarData;
       compiledElement = compile(
         angular.element(
-          `<miq-toolbar-menu toolbar-items="toolbar"></miq-toolbar-menu>`
+          `<miq-toolbar-menu toolbar-items="toolbarData"></miq-toolbar-menu>`
         ))(scope);
       scope.$digest();
     });

src/toolbar/components/toolbar-menu/toolbarComponent.ts

@@ -1,6 +1,9 @@
 import {IToolbarItem} from '../../interfaces/toolbar';
 import {ToolbarType} from '../../interfaces/toolbarType';
 import * as _ from 'lodash';
+
+const CUSTOM_ID = 'custom_';
+
 /**
  * @memberof miqStaticAssets
  * @ngdoc controller
@@ -105,6 +108,10 @@ export class ToolbarController {
     return ToolbarType.BUTTON;
   }
 
+  public getToolbarKebabType(): string {
+    return ToolbarType.KEBAB;
+  }
+
   /**
    * Helper method for getting string value of {@link ToolbarType.CUSTOM}
    * @memberof ToolbarController
@@ -119,6 +126,25 @@ export class ToolbarController {
     return ToolbarType.BUTTON_TWO_STATE;
   }
 
+  public collapseButtons() {
+    let buttonsIndex;
+    if (this.toolbarItems) {
+      buttonsIndex = _.findLastIndex(
+        this.toolbarItems,
+        (itemGroup: any) => itemGroup.filter(item => item.id.includes(CUSTOM_ID) !== false).length !== 0
+      );
+      if(buttonsIndex !== -1) {
+        this.toolbarItems[buttonsIndex] = ToolbarController.createKebabFromItems(this.toolbarItems[buttonsIndex]);
+      }
+    }
+  }
+
+  private $onChanges(changesObj) {
+    if (changesObj.toolbarItems) {
+      this.collapseButtons();
+    }
+  }
+
   /**
    * Private static function for decoding html.
    * @memberof ToolbarController
@@ -157,6 +183,7 @@ export class ToolbarController {
         (ToolbarController.isButtonSelect(item) && item.items && item.items.length !== 0)
         || ToolbarController.isButton(item)
         || ToolbarController.isButtonTwoState(item)
+        || ToolbarController.isKebabMenu(item)
       );
   }
 
@@ -175,6 +202,10 @@ export class ToolbarController {
     return item.type === ToolbarType.BUTTON_SELECT;
   }
 
+  private static isKebabMenu(item: IToolbarItem): boolean {
+    return item.type === ToolbarType.KEBAB;
+  }
+
   /**
    * Private static function for checking if toolbar item type is button.
    * @memberof ToolbarController
@@ -185,6 +216,16 @@ export class ToolbarController {
   private static isButton(item): boolean {
     return item.type === ToolbarType.BUTTON;
   }
+
+  private static createKebabFromItems(itemsGroup: any[]) {
+    if (itemsGroup.length > 3) {
+      return itemsGroup.reduce((acc, curr) => {
+        curr.id.includes(CUSTOM_ID) ? acc[0].items.push(curr) : acc.push(curr);
+        return acc;
+      }, [{type: ToolbarType.KEBAB, items: []}]);
+    }
+    return itemsGroup;
+  }
 }
 
 /**