[WIP] Add extensible components API to create components which can expose API and render endpoints

app/javascript/custom-typings.ts

@@ -0,0 +1,2 @@
+declare var ManageIQ: any;
+declare var Rx: any;

app/javascript/extensible-components/index.ts

@@ -0,0 +1,67 @@
+import { IExtensionComponent, IMiQApiCallback, IMiQRenderCallback } from './lib';
+
+const source = new Rx.Subject();
+const items = new Set();
+
+/**
+ * Class for easy creation of extensible component.
+ */
+export class ExtensibleComponent {
+  public delete: () => void;
+  constructor(public name: string, public api: IMiQApiCallback, public render: IMiQRenderCallback){}
+}
+
+/**
+ * Helper function to create new component.
+ * @param name string name of new component.
+ * @param api callback functions to change inner logic of component.
+ * @param render callback function to apply render functions.
+ */
+function addComponent(name: string, api?: IMiQApiCallback, render?: IMiQRenderCallback) {
+  let newCmp = new ExtensibleComponent(name, api, render);
+  source.onNext({action: 'add', payload: newCmp});
+  return newCmp;
+}
+
+/**
+ * Helper function to subscribe to extension items based on component's name.
+ * @param cmpName name of component we want to subscribe to.
+ * @return object which has with and unsubscribe property. With is for callback to use found component and delete to
+ * unsubscribe from rxjs subject.
+ */
+function subscribe(cmpName: string) {
+  let unsubscribe;
+  return {
+    with: (callback) => {
+      unsubscribe = source
+        .map(sourceAction => sourceAction.action === 'add' ? sourceAction.payload : {})
+        .filter(component => component && component.name === cmpName)
+        .subscribe(cmp => cmp && callback(cmp));
+
+      ManageIQ.extensions.items.forEach((component) => {
+        component.name === cmpName && callback(component);
+      });
+    },
+    delete: () => unsubscribe && unsubscribe.dispose()
+  }
+}
+
+const extensions = {
+  addComponent,
+  subscribe,
+  get items() { return items; }
+}
+
+ManageIQ.extensions = ManageIQ.extensions || extensions;
+
+/**
+ * Subscribe to extensions source to add new components to items object.
+ */
+source.subscribe((component: IExtensionComponent) => {
+  if (component.action === 'add' && component.hasOwnProperty('payload')) {
+    component.payload.delete = () => ManageIQ.extensions.items.delete(component.payload);
+    ManageIQ.extensions.items.add(component.payload);
+  } else {
+    console.error('Unsupported action with extension components.');
+  }
+});

app/javascript/extensible-components/lib.ts

@@ -0,0 +1,38 @@
+export type RenderCallback = (element: HTMLElement) => void;
+
+export interface IExtensionComponent {
+  action: string;
+  payload: any;
+}
+
+export interface IMiQApiCallback {
+  [propName: string]: Function;
+}
+
+export interface IMiQRenderCallback {
+  [propName: string]: (renderCallback: RenderCallback) => void;
+}
+
+export interface IExtensibleComponent {
+  extensibleComponent: any;
+  apiCallbacks: () => IMiQApiCallback;
+  renderCallbacks: () => IMiQRenderCallback;
+}
+
+export function getItems() {
+  return ManageIQ.extensions.items;
+}
+
+export function subscribe(cmpName: string) {
+  return ManageIQ.extensions.subscribe(cmpName);
+}
+
+/**
+ * Helper function to create new component.
+ * @param name string name of new component.
+ * @param api callback functions to change inner logic of component.
+ * @param render callback function to apply render functions.
+ */
+export function addComponent(name: string, api?: IMiQApiCallback, render?: IMiQApiCallback) {
+  return ManageIQ.extensions.addComponent(name, api, render);
+}

app/javascript/packs/extensible-componenets-common.js

@@ -0,0 +1 @@
+require('../extensible-components');

spec/javascripts/packs/extensible-componenets.spec.js

@@ -0,0 +1,79 @@
+describe('Extensible components', function() {
+  var htmlPartial = '<div>something</div>';
+  var cmp;
+  var mockApi = {
+    onSomeAction: jasmine.createSpy('onSomeAction', function() {}),
+    onSomeActionWithParams: jasmine.createSpy('onSomeActionWithParams', function(someParam){}),
+  };
+
+  var mockRender = {
+    addButton: jasmine.createSpy('addButton', function(callback) {}),
+    addButton2: function(callback) { callback(htmlPartial); }
+  };
+
+  it('should be defined with empty items', function() {
+    expect(ManageIQ.extensions).toBeDefined();
+    expect(ManageIQ.extensions.items.size).toBe(0);
+  });
+
+  it('should create one item', function() {
+    cmp = ManageIQ.extensions.addComponent('testCmp', mockApi, mockRender);
+    expect(ManageIQ.extensions.items.size).toBe(1);
+  });
+
+  it('should remove newly created item', function() {
+    cmp.delete();
+    expect(ManageIQ.extensions.items.size).toBe(0);
+  });
+
+  describe('default actions', function() {
+    var subscription;
+    var someParam = 'something';
+
+    beforeEach(function() {
+      cmp = ManageIQ.extensions.addComponent('testCmp', mockApi, mockRender);
+    });
+
+    describe('subscription', function() {
+      it('should subscribe based on name', function() {
+        subscription = ManageIQ.extensions.subscribe('testCmp');
+        expect(subscription.delete).toBeDefined();
+        expect(subscription.with).toBeDefined();
+      });
+
+      it('should react to API', function() {
+        subscription.with(function(component) {
+          component.api.onSomeAction();
+          component.api.onSomeActionWithParams(someParam);
+        });
+        expect(mockApi.onSomeAction).toHaveBeenCalled();
+        expect(mockApi.onSomeActionWithParams).toHaveBeenCalledWith(someParam);
+      });
+
+      it('should react to render', function() {
+        var someCallback = jasmine.createSpy('someCallback', function(element) {});
+        subscription.with(function(component) {
+          component.render.addButton(someCallback);
+          component.render.addButton2(someCallback);
+        });
+        expect(mockRender.addButton).toHaveBeenCalledWith(someCallback);
+        expect(someCallback).toHaveBeenCalledWith(htmlPartial);
+      });
+    });
+
+    it('should not subscribe', function() {
+      subscription = ManageIQ.extensions.subscribe('somethingBad');
+      subscription.with(function(component) {
+        //callback should not be called!
+        expect(false).toBe(true);
+      });
+      expect(subscription.with).toBeDefined();
+      expect(subscription.delete).toBeDefined();
+    });
+
+    afterEach(function() {
+      cmp.delete();
+      subscription && subscription.delete();
+    });
+  });
+});

spec/javascripts/support/jasmine.yml

@@ -18,6 +18,7 @@ src_files:
   - assets/angular-mocks
   - __spec__/helpers/fixtures-fix.js
   - packs/manageiq-ui-classic/application-common.js
+  - packs/manageiq-ui-classic/extensible-componenets-common.js
 
 # stylesheets
 #
@@ -126,4 +127,3 @@ boot_files:
 #
 # rack_options:
 #   server: 'thin'
-