initial import for Open Source 🎉

static/js/directives/ui/linear-workflow/linear-workflow-section.component.html

@@ -0,0 +1,7 @@
+<div class="linear-workflow-section-element"
+     ng-if="$ctrl.sectionVisible"
+     ng-class="$ctrl.isCurrentSection ? 'current-section' : ''">
+  <form ng-submit="$ctrl.onSubmitSection()">
+    <div ng-transclude />
+  </form>
+</div>

static/js/directives/ui/linear-workflow/linear-workflow-section.component.spec.ts

@@ -0,0 +1,104 @@
+import { LinearWorkflowSectionComponent } from './linear-workflow-section.component';
+import { LinearWorkflowComponent } from './linear-workflow.component';
+import { SimpleChanges } from 'ng-metadata/core';
+import { Mock } from 'ts-mocks';
+import Spy = jasmine.Spy;
+
+
+describe("LinearWorkflowSectionComponent", () => {
+  var component: LinearWorkflowSectionComponent;
+  var parentMock: Mock<LinearWorkflowComponent>;
+
+  beforeEach(() => {
+    parentMock = new Mock<LinearWorkflowComponent>();
+    component = new LinearWorkflowSectionComponent(parentMock.Object);
+    component.sectionId = "mysection";
+  });
+
+  describe("ngOnInit", () => {
+
+    it("calls parent component to add itself as a section", () => {
+      parentMock.setup(mock => mock.addSection).is((section) => null);
+      component.ngOnInit();
+
+      expect((<Spy>parentMock.Object.addSection).calls.argsFor(0)[0]).toBe(component);
+    });
+  });
+
+  describe("ngOnChanges", () => {
+    var changesObj: SimpleChanges;
+
+    beforeEach(() => {
+      parentMock.setup(mock => mock.onSectionInvalid).is((section) => null);
+      changesObj = {
+        sectionValid: {
+          currentValue: true,
+          previousValue: false,
+          isFirstChange: () => false,
+        },
+        skipSection: {
+          currentValue: true,
+          previousValue: false,
+          isFirstChange: () => false,
+        },
+      };
+    });
+
+    it("does nothing if 'sectionValid' input not changed", () => {
+      component.ngOnChanges({});
+
+      expect((<Spy>parentMock.Object.onSectionInvalid)).not.toHaveBeenCalled();
+    });
+
+    it("does nothing if 'sectionValid' input's previous value is falsy", () => {
+      changesObj['sectionValid'].previousValue = null;
+      component.ngOnChanges(changesObj);
+
+      expect((<Spy>parentMock.Object.onSectionInvalid)).not.toHaveBeenCalled();
+    });
+
+    it("does nothing if 'sectionValid' input is true", () => {
+      component.ngOnChanges(changesObj);
+
+      expect((<Spy>parentMock.Object.onSectionInvalid)).not.toHaveBeenCalled();
+    });
+
+    it("calls parent method to inform that section is invalid if 'sectionValid' input changed to false", () => {
+      changesObj['sectionValid'].previousValue = true;
+      changesObj['sectionValid'].currentValue = false;
+      component.ngOnChanges(changesObj);
+
+      expect((<Spy>parentMock.Object.onSectionInvalid).calls.argsFor(0)[0]).toEqual(component.sectionId);
+    });
+
+    it("calls parent method to go to next section if 'skipSection' input is true and is current section", () => {
+      delete changesObj['sectionValid'];
+      parentMock.setup(mock => mock.onNextSection).is(() => null);
+      component.isCurrentSection = true;
+      component.ngOnChanges(changesObj);
+
+      expect(<Spy>parentMock.Object.onNextSection).toHaveBeenCalled();
+    });
+  });
+
+  describe("onSubmitSection", () => {
+
+    beforeEach(() => {
+      parentMock.setup(mock => mock.onNextSection).is(() => null);
+    });
+
+    it("does nothing if section is invalid", () => {
+      component.sectionValid = false;
+      component.onSubmitSection();
+
+      expect(<Spy>parentMock.Object.onNextSection).not.toHaveBeenCalled();
+    });
+
+    it("calls parent method to go to next section if section is valid", () => {
+      component.sectionValid = true;
+      component.onSubmitSection();
+
+      expect(<Spy>parentMock.Object.onNextSection).toHaveBeenCalled();
+    });
+  });
+});

static/js/directives/ui/linear-workflow/linear-workflow-section.component.ts

@@ -0,0 +1,55 @@
+import { Component, Input, Inject, Host, OnChanges, OnInit, SimpleChanges, HostListener } from 'ng-metadata/core';
+import { LinearWorkflowComponent } from './linear-workflow.component';
+
+
+/**
+ * A component which displays a single section in a linear workflow.
+ */
+@Component({
+  selector: 'linear-workflow-section',
+  templateUrl: '/static/js/directives/ui/linear-workflow/linear-workflow-section.component.html',
+  legacy: {
+    transclude: true
+  }
+})
+export class LinearWorkflowSectionComponent implements OnChanges, OnInit {
+
+  @Input('@') public sectionId: string;
+  @Input('@') public sectionTitle: string;
+  @Input('<') public sectionValid: boolean = false;
+  @Input('<') public skipSection: boolean = false;
+  public sectionVisible: boolean = false;
+  public isCurrentSection: boolean = false;
+
+  constructor(@Host() @Inject(LinearWorkflowComponent) private parent: LinearWorkflowComponent) {
+
+  }
+
+  public ngOnInit(): void {
+    if (!this.skipSection) {
+      this.parent.addSection(this);
+    }
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    switch (Object.keys(changes)[0]) {
+      case 'sectionValid':
+        if (changes['sectionValid'].previousValue && !changes['sectionValid'].currentValue && this.parent) {
+          this.parent.onSectionInvalid(this.sectionId);
+        }
+        break;
+
+      case 'skipSection':
+        if (changes['skipSection'].currentValue && this.isCurrentSection && this.parent) {
+          this.parent.onNextSection();
+        }
+        break;
+    }
+  }
+
+  public onSubmitSection(): void {
+    if (this.sectionValid) {
+      this.parent.onNextSection();
+    }
+  }
+}

static/js/directives/ui/linear-workflow/linear-workflow.component.html

@@ -0,0 +1,39 @@
+<div class="linear-workflow-element">
+  <!-- Contents -->
+  <div ng-transclude />
+
+  <div class="bottom-controls">
+    <table class="upcoming-table">
+      <tr>
+        <td>
+          <!-- Next button -->
+          <button class="btn btn-primary"
+                  ng-disabled="!$ctrl.currentSection.component.sectionValid"
+                  ng-click="$ctrl.onNextSection()"
+                  ng-class="{
+                    'btn-success': $ctrl.currentSection.index == $ctrl.sections.length - 1,
+                    'btn-lg': $ctrl.currentSection.index == $ctrl.sections.length - 1
+                  }">
+            <span ng-if="$ctrl.currentSection.index != sections.length - 1">Continue</span>
+            <span ng-if="$ctrl.currentSection.index == sections.length - 1">
+              <i class="fa fa-check-circle"></i>{{ ::$ctrl.doneTitle }}
+            </span>
+          </button>
+        </td>
+        <td>
+          <!-- Next sections -->
+          <div class="upcoming"
+               ng-if="$ctrl.currentSection.index < $ctrl.sections.length - 1">
+            <b>Next:</b>
+            <ul>
+              <li ng-repeat="section in $ctrl.sections"
+                  ng-if="section.index > $ctrl.currentSection.index && !section.component.skipSection">
+                {{ section.component.sectionTitle }}
+              </li>
+            </ul>
+          </div>
+        </td>
+      </tr>
+    </table>
+  </div>
+</div>

static/js/directives/ui/linear-workflow/linear-workflow.component.spec.ts

@@ -0,0 +1,132 @@
+import { LinearWorkflowComponent, SectionInfo } from './linear-workflow.component';
+import { LinearWorkflowSectionComponent } from './linear-workflow-section.component';
+import Spy = jasmine.Spy;
+
+
+describe("LinearWorkflowComponent", () => {
+  var component: LinearWorkflowComponent;
+
+  beforeEach(() => {
+    component = new LinearWorkflowComponent();
+  });
+
+  describe("addSection", () => {
+    var newSection: LinearWorkflowSectionComponent;
+
+    beforeEach(() => {
+      newSection = new LinearWorkflowSectionComponent(component);
+    });
+
+    it("sets 'sectionVisible' and 'isCurrentSection' to first section in list that is not skipped", () => {
+      var skippedSection: LinearWorkflowSectionComponent = new LinearWorkflowSectionComponent(component);
+      skippedSection.skipSection = true;
+      component.addSection(skippedSection);
+      component.addSection(newSection);
+
+      expect(newSection.sectionVisible).toBe(true);
+      expect(newSection.isCurrentSection).toBe(true);
+    });
+  });
+
+  describe("onNextSection", () => {
+    var currentSection: LinearWorkflowSectionComponent;
+
+    beforeEach(() => {
+      component.onWorkflowComplete = jasmine.createSpyObj("onWorkflowCompleteSpy", ['emit']);
+      currentSection = new LinearWorkflowSectionComponent(component);
+      currentSection.sectionValid = true;
+      component.addSection(currentSection);
+    });
+
+    it("does not complete workflow or change current section if current section is invalid", () => {
+      currentSection.sectionValid = false;
+      component.onNextSection();
+
+      expect(component.onWorkflowComplete.emit).not.toHaveBeenCalled();
+      expect(currentSection.isCurrentSection).toBe(true);
+    });
+
+    it("calls workflow completed output callback if current section is the last section and is valid", () => {
+      component.onNextSection();
+
+      expect(component.onWorkflowComplete.emit).toHaveBeenCalled();
+    });
+
+    it("sets the current section to the next section if there are remaining sections and current section valid", () => {
+      var nextSection: LinearWorkflowSectionComponent = new LinearWorkflowSectionComponent(component);
+      component.addSection(nextSection);
+      component.onNextSection();
+
+      expect(currentSection.isCurrentSection).toBe(false);
+      expect(nextSection.isCurrentSection).toBe(true);
+      expect(nextSection.sectionVisible).toBe(true);
+    });
+
+    it("does not set the current section to a skipped section", () => {
+      var skippedSection: LinearWorkflowSectionComponent = new LinearWorkflowSectionComponent(component);
+      var nextSection: LinearWorkflowSectionComponent = new LinearWorkflowSectionComponent(component);
+      skippedSection.skipSection = true;
+      component.addSection(skippedSection);
+      component.addSection(nextSection);
+      component.onNextSection();
+
+      expect(currentSection.isCurrentSection).toBe(false);
+      expect(skippedSection.isCurrentSection).toBe(false);
+      expect(skippedSection.sectionVisible).toBe(false);
+      expect(nextSection.isCurrentSection).toBe(true);
+      expect(nextSection.sectionVisible).toBe(true);
+    });
+  });
+
+  describe("onSectionInvalid", () => {
+    var invalidSection: LinearWorkflowSectionComponent;
+    var sections: LinearWorkflowSectionComponent[];
+
+    beforeEach(() => {
+      invalidSection = new LinearWorkflowSectionComponent(component);
+      invalidSection.sectionId = "Git Repository";
+      invalidSection.sectionValid = false;
+      component.addSection(invalidSection);
+
+      sections = [
+        new LinearWorkflowSectionComponent(component),
+        new LinearWorkflowSectionComponent(component),
+        new LinearWorkflowSectionComponent(component),
+      ];
+      sections.forEach((section) => {
+        section.sectionVisible = false;
+        section.isCurrentSection = false;
+        component.addSection(section);
+      });
+    });
+
+    it("does nothing if invalid section is after the current section", () => {
+      sections[sections.length - 1].sectionValid = false;
+      sections[sections.length - 1].sectionId = "Some Section";
+      component.onSectionInvalid(sections[sections.length - 1].sectionId);
+
+      expect(sections[sections.length - 1].isCurrentSection).toBe(false);
+      expect(sections[sections.length - 1].sectionVisible).toBe(false);
+    });
+
+    it("sets the section with the given id to be the current section", () => {
+      component.onSectionInvalid(invalidSection.sectionId);
+
+      expect(invalidSection.isCurrentSection).toBe(true);
+    });
+
+    it("hides all sections after the section with the given id", () => {
+      sections.forEach((section) => {
+        section.sectionVisible = true;
+        section.isCurrentSection = true;
+        component.addSection(section);
+      });
+      component.onSectionInvalid(invalidSection.sectionId);
+
+      sections.forEach((section) => {
+        expect(section.sectionVisible).toBe(false);
+        expect(section.isCurrentSection).toBe(false);
+      });
+    });
+  });
+});

static/js/directives/ui/linear-workflow/linear-workflow.component.ts

@@ -0,0 +1,78 @@
+import { Component, Output, Input, EventEmitter } from 'ng-metadata/core';
+import { LinearWorkflowSectionComponent } from './linear-workflow-section.component';
+
+
+/**
+ * A component that which displays a linear workflow of sections, each completed in order before the next
+ * step is made visible.
+ */
+@Component({
+  selector: 'linear-workflow',
+  templateUrl: '/static/js/directives/ui/linear-workflow/linear-workflow.component.html',
+  legacy: {
+    transclude: true
+  }
+})
+export class LinearWorkflowComponent {
+
+  @Input('@') public doneTitle: string;
+  @Output() public onWorkflowComplete: EventEmitter<any> = new EventEmitter();
+  private sections: SectionInfo[] = [];
+  private currentSection: SectionInfo;
+
+  public addSection(component: LinearWorkflowSectionComponent): void {
+    this.sections.push({
+      index: this.sections.length,
+      component: component,
+    });
+
+    if (this.sections.length > 0 && !this.currentSection) {
+      this.setNextSection(0);
+    }
+  }
+
+  public onNextSection(): void {
+    if (this.currentSection.component.sectionValid && this.currentSection.index + 1 >= this.sections.length) {
+      this.onWorkflowComplete.emit({});
+    }
+    else if (this.currentSection.component.sectionValid && this.currentSection.index + 1 < this.sections.length) {
+      this.currentSection.component.isCurrentSection = false;
+      this.setNextSection(this.currentSection.index + 1);
+    }
+  }
+
+  public onSectionInvalid(sectionId: string): void {
+    var invalidSection = this.sections.filter(section => section.component.sectionId == sectionId)[0];
+    if (invalidSection.index <= this.currentSection.index) {
+      invalidSection.component.isCurrentSection = true;
+      this.currentSection = invalidSection;
+
+      this.sections.forEach((section) => {
+        if (section.index > invalidSection.index) {
+          section.component.sectionVisible = false;
+          section.component.isCurrentSection = false;
+        }
+      });
+    }
+  }
+
+  private setNextSection(startingIndex: number = 0): void {
+    // Find the next section that is not set to be skipped
+    this.currentSection = this.sections.slice(startingIndex)
+      .filter(section => !section.component.skipSection)[0];
+
+    if (this.currentSection) {
+      this.currentSection.component.sectionVisible = true;
+      this.currentSection.component.isCurrentSection = true;
+    }
+  }
+}
+
+
+/**
+ * A type representing a section of the linear workflow.
+ */
+export type SectionInfo = {
+  index: number;
+  component: LinearWorkflowSectionComponent;
+};