Remove Link to Blog in QE + Refactor quayRequire Directive (#2523)

* refactoring quayRequire directive

* added tests, show element if input changes

* use ngIfDirective in QuayRequireDirective

static/directives/header-bar.html

@@ -25,7 +25,7 @@
           <li><a ng-href="/tutorial/" quay-section="tutorial">Tutorial</a></li>
           <li quay-require="['BILLING']"><a ng-href="/plans/" quay-section="plans">Pricing</a></li>
           <li><a href="https://docs.quay.io/" ng-safenewtab>Docs</a></li>
-          <li><a href="https://blog.quay.io/" ng-safenewtab>Blog</a></li>
+          <li quay-require="['BILLING']"><a href="https://blog.quay.io/" ng-safenewtab>Blog</a></li>
         </ul>
 
         <!-- Signed in -->
@@ -34,7 +34,7 @@
           <li><a ng-href="/repository/" quay-section="repository">Repositories</a></li>
           <li><a ng-href="/tutorial/" quay-section="tutorial">Tutorial</a></li>
           <li><a href="https://docs.quay.io/" ng-safenewtab>Docs</a></li>
-          <li><a href="https://blog.quay.io/" ng-safenewtab>Blog</a></li>
+          <li quay-require="['BILLING']"><a href="https://blog.quay.io/" ng-safenewtab>Blog</a></li>
         </ul>
 
         <!-- Phone -->

static/js/directives/quay-layout.js

@@ -2,20 +2,6 @@
  * Directives which show, hide, include or otherwise mutate the DOM based on Features and Config.
  */
 
-/**
- * Adds a quay-require attribute includes an element in the DOM iff the features specified are true.
- */
-angular.module('quay').directive('quayRequire', function ($animate, Features, AngularHelper) {
-  return {
-    transclude: 'element',
-    priority: 600,
-    terminal: true,
-    restrict: 'A',
-    link: AngularHelper.buildConditionalLinker($animate, 'quayRequire', function(value) {
-      return Features.matchesFeatures(value);
-    })
-  };
-});
 
 /**
  * Adds a quay-show attribute that shows the element only if the attribute evaluates to true.

static/js/directives/structural/quay-require/quay-require.directive.spec.ts

@@ -0,0 +1,59 @@
+import { QuayRequireDirective } from './quay-require.directive';
+import { Mock } from 'ts-mocks';
+import Spy = jasmine.Spy;
+
+
+describe("QuayRequireDirective", () => {
+  var directive: QuayRequireDirective;
+  var featuresMock: Mock<any>;
+  var $elementMock: Mock<ng.IAugmentedJQuery>;
+  var $scopeMock: Mock<ng.IScope>;
+  var $transcludeMock: Mock<ng.ITranscludeFunction>;
+  var ngIfDirectiveMock: Mock<ng.IDirective>;
+
+  beforeEach(() => {
+    featuresMock = new Mock<any>();
+    $elementMock = new Mock<ng.IAugmentedJQuery>();
+    $scopeMock = new Mock<ng.IScope>();
+    $transcludeMock = new Mock<ng.ITranscludeFunction>();
+    ngIfDirectiveMock = new Mock<ng.IDirective>();
+
+    directive = new QuayRequireDirective(featuresMock.Object,
+                                         $elementMock.Object,
+                                         $scopeMock.Object,
+                                         $transcludeMock.Object,
+                                         [ngIfDirectiveMock.Object]);
+    directive.requiredFeatures = ['BILLING', 'SOME_OTHER_FEATURE'];
+  });
+
+  describe("ngAfterContentInit", () => {
+    var linkMock: Mock<ng.IDirectiveLinkFn>;
+
+    beforeEach(() => {
+      linkMock = new Mock<ng.IDirectiveLinkFn>();
+      linkMock.setup(mock => (<Function>mock).apply);
+      ngIfDirectiveMock.setup(mock => mock.link).is(linkMock.Object);
+    });
+
+    it("calls ngIfDirective link method with own element's arguments to achieve ngIf functionality", () => {
+      featuresMock.setup(mock => mock.matchesFeatures).is((features) => false);
+      directive.ngAfterContentInit();
+
+      expect((<Spy>(<Function>linkMock.Object).apply).calls.argsFor(0)[0]).toEqual(ngIfDirectiveMock.Object);
+      expect((<Spy>(<Function>linkMock.Object).apply).calls.argsFor(0)[1][0]).toEqual($elementMock.Object);
+      expect((<Spy>(<Function>linkMock.Object).apply).calls.argsFor(0)[1][1]).toEqual($scopeMock.Object);
+      expect(Object.keys((<Spy>(<Function>linkMock.Object).apply).calls.argsFor(0)[1][2])).toEqual(['ngIf']);
+      expect((<Spy>(<Function>linkMock.Object).apply).calls.argsFor(0)[1][3]).toEqual(null);
+      expect((<Spy>(<Function>linkMock.Object).apply).calls.argsFor(0)[1][4]).toEqual($transcludeMock.Object);
+    });
+
+    it("calls feature service to check if given features are present in application", () => {
+      featuresMock.setup(mock => mock.matchesFeatures).is((features) => false);
+      directive.ngAfterContentInit();
+
+      expect((<Spy>(<Function>linkMock.Object).apply).calls.argsFor(0)[1][2]['ngIf']()).toBe(false);
+      expect(featuresMock.Object.matchesFeatures).toHaveBeenCalled();
+      expect((<Spy>featuresMock.Object.matchesFeatures).calls.argsFor(0)[0]).toEqual(directive.requiredFeatures);
+    });
+  });
+});

static/js/directives/structural/quay-require/quay-require.directive.ts

@@ -0,0 +1,41 @@
+import { Directive, Inject, Input, AfterContentInit } from 'ng-metadata/core';
+
+
+/**
+ * Structural directive that adds/removes its host element if the given list of feature flags are set.
+ * Utilizes the existing AngularJS ngIf directive by applying its 'link' function to the host element's properties.
+ *
+ * Inspired by http://stackoverflow.com/a/29010910
+ */
+@Directive({
+  selector: '[quayRequire]',
+  legacy: {
+    transclude: 'element',
+  }
+})
+export class QuayRequireDirective implements AfterContentInit {
+
+  @Input('<quayRequire') public requiredFeatures: string[] = [];
+  private ngIfDirective: ng.IDirective;
+
+  constructor(@Inject('Features') private features: any,
+              @Inject('$element') private $element: ng.IAugmentedJQuery,
+              @Inject('$scope') private $scope: ng.IScope,
+              @Inject('$transclude') private $transclude: ng.ITranscludeFunction,
+              @Inject('ngIfDirective') ngIfDirective: ng.IDirective[]) {
+    this.ngIfDirective = ngIfDirective[0];
+  }
+
+  public ngAfterContentInit(): void {
+    const attrs: {[name: string]: any} = {'ngIf': () => this.features.matchesFeatures(this.requiredFeatures)};
+
+    (<Function>this.ngIfDirective.link).apply(this.ngIfDirective,
+                                              [
+                                                this.$scope,
+                                                this.$element,
+                                                attrs,
+                                                null,
+                                                this.$transclude
+                                              ]);
+  }
+}

static/js/quay.module.ts

@@ -19,6 +19,7 @@ import { AvatarServiceImpl } from './services/avatar/avatar.service.impl';
 import { DockerfileServiceImpl } from './services/dockerfile/dockerfile.service.impl';
 import { DataFileServiceImpl } from './services/datafile/datafile.service.impl';
 import { UtilServiceImpl } from './services/util/util.service.impl';
+import { QuayRequireDirective } from './directives/structural/quay-require/quay-require.directive';
 
 
 /**
@@ -42,6 +43,7 @@ import { UtilServiceImpl } from './services/util/util.service.impl';
     CorTableComponent,
     CorTableColumn,
     ChannelIconComponent,
+    QuayRequireDirective,
   ],
   providers: [
     ViewArrayImpl,

yarn.lock

@@ -30,10 +30,6 @@
   version "0.9.39"
   resolved "https://registry.yarnpkg.com/@types/core-js/-/core-js-0.9.39.tgz#9b3d9869c2b7de02d372d32d6c6d9f5db3178c65"
 
-"@types/es6-shim@^0.31.32":
-  version "0.31.32"
-  resolved "https://registry.yarnpkg.com/@types/es6-shim/-/es6-shim-0.31.32.tgz#8196c09e1e40ac977c713bf258090989f501d8ff"
-
 "@types/jasmine@^2.5.41":
   version "2.5.43"
   resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.43.tgz#6328a8c26082f2fd84f043c802c9ed7fa110b2dd"