refactoring linear workflow directives

2017-02-21 15:59:26 -08:00 · 2017-02-21 15:59:26 -08:00 · e59d394491
commit e59d394491
parent a83a7fe47a
10 changed files with 240 additions and 22 deletions
--- a/static/js/directives/ui/linear-workflow/linear-workflow-section.component.html
+++ b/static/js/directives/ui/linear-workflow/linear-workflow-section.component.html
@ -0,0 +1,7 @@
+<div class="linear-workflow-section-element"
+     ng-show="$ctrl.sectionVisible"
+     ng-class="$ctrl.isCurrentSection ? 'current-section' : ''">
+  <form ng-submit="$ctrl.submitSection()">
+    <div ng-transclude />
+  </form>
+</div>
--- a/static/js/directives/ui/linear-workflow/linear-workflow-section.component.spec.ts
+++ b/static/js/directives/ui/linear-workflow/linear-workflow-section.component.spec.ts
@ -0,0 +1,25 @@
+import { LinearWorkflowSectionComponent } from './linear-workflow-section.component';
+import { LinearWorkflowComponent } from './linear-workflow.component';
+import Spy = jasmine.Spy;
+
+
+describe("LinearWorkflowSectionComponent", () => {
+  var component: LinearWorkflowSectionComponent;
+  var parentMock: LinearWorkflowComponent;
+
+  beforeEach(() => {
+    component = new LinearWorkflowSectionComponent();
+    parentMock = new LinearWorkflowComponent();
+    component.parent = parentMock;
+  });
+
+  describe("$onInit", () => {
+
+    it("calls parent component to add itself as a section", () => {
+      var addSectionSpy: Spy = spyOn(parentMock, "addSection").and.returnValue(null);
+      component.$onInit();
+
+      expect(addSectionSpy.calls.argsFor(0)[0]).toBe(component);
+    });
+  });
+});
--- a/static/js/directives/ui/linear-workflow/linear-workflow-section.component.ts
+++ b/static/js/directives/ui/linear-workflow/linear-workflow-section.component.ts
@ -0,0 +1,32 @@
+import { Component, Output, Input } from 'angular-ts-decorators';
+import { LinearWorkflowComponent } from './linear-workflow.component';
+
+
+/**
+ * A component which displays a single section in a linear workflow.
+ */
+@Component({
+  selector: 'linearWorkflowSection',
+  templateUrl: '/static/js/directives/ui/linear-workflow/linear-workflow-section.component.html',
+  transclude: true,
+  require: {
+    parent: '^linearWorkflow'
+  }
+})
+export class LinearWorkflowSectionComponent implements ng.IComponentController {
+
+  @Input('@') public sectionId: string;
+  @Input('@') public sectionTitle: string;
+  @Input() public sectionValid: boolean = false;
+  public sectionVisible: boolean = false;
+  public isCurrentSection: boolean = false;
+  public parent: LinearWorkflowComponent;
+
+  constructor() {
+
+  }
+
+  public $onInit(): void {
+    this.parent.addSection(this);
+  }
+}
--- a/static/js/directives/ui/linear-workflow/linear-workflow.component.html
+++ b/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.valid"
+                  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.title }}
+              </li>
+            </ul>
+          </div>
+        </td>
+      </tr>
+    </table>
+  </div>
+</div>
--- a/static/js/directives/ui/linear-workflow/linear-workflow.component.spec.ts
+++ b/static/js/directives/ui/linear-workflow/linear-workflow.component.spec.ts
@ -0,0 +1,19 @@
+import { LinearWorkflowComponent, SectionInfo } from './linear-workflow.component';
+import { LinearWorkflowSectionComponent } from './linear-workflow-section.component';
+
+
+describe("LinearWorkflowComponent", () => {
+  var component: LinearWorkflowComponent;
+
+  beforeEach(() => {
+    component = new LinearWorkflowComponent();
+  });
+
+  describe("addSection", () => {
+
+  });
+
+  describe("onNextSection", () => {
+
+  });
+});
--- a/static/js/directives/ui/linear-workflow/linear-workflow.component.ts
+++ b/static/js/directives/ui/linear-workflow/linear-workflow.component.ts
@ -1,10 +1,56 @@
 import { Component, Output, Input } from 'angular-ts-decorators';
+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: 'linearWorkflow',
-  templateUrl: '/static/js/directives/ui/linear-workflow/linear-workflow.component.html'
+  templateUrl: '/static/js/directives/ui/linear-workflow/linear-workflow.component.html',
+  transclude: true
 })
 export class LinearWorkflowComponent implements ng.IComponentController {

+  @Input('@') public doneTitle: string;
+  @Output() public onWorkflowComplete: (event: any) => void;
+  private sections: SectionInfo[] = [];
+  private currentSection: SectionInfo;
+
+
+  constructor() {
+
+  }
+
+  public $onInit(): void {
+
+  }
+
+  public addSection(section: LinearWorkflowSectionComponent): void {
+    this.sections.push({
+      index: this.sections.length,
+      section: section,
+    });
+  }
+
+  public onNextSection(): void {
+    if (this.currentSection.section.sectionValid) {
+      if (this.currentSection.index + 1 >= this.sections.length) {
+        this.onWorkflowComplete({});
+      }
+      else {
+        this.currentSection = this.sections[this.currentSection.index];
+      }
+    }
+  }
+}
+
+
+/**
+ * A type representing a section of the linear workflow.
+ */
+export type SectionInfo = {
+  index: number;
+  section: LinearWorkflowSectionComponent;
 }
--- a/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html
+++ b/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html
@ -1,19 +1,18 @@
 <div class="manage-trigger-custom-git-element manage-trigger-control">
-  <div class="linear-workflow"
-       workflow-state="$ctrl.currentState"
-       done-title="Create Trigger"
-       workflow-complete="$ctrl.activateTrigger({'config': $ctrl.config})">
+  <linear-workflow
+    workflow-state="$ctrl.currentState"
+    done-title="Create Trigger"
+    workflow-complete="$ctrl.activateTrigger({'config': $ctrl.config})">
    <!-- Section: Repository -->
-    <div class="linear-workflow-section row"
-         section-id="repo"
-         section-title="Git Repository"
-         section-valid="$ctrl.config.build_source">
+    <linear-workflow-section
+      class="row"
+      section-id="repo"
+      section-title="Git Repository"
+      section-valid="$ctrl.config.build_source">

      <div class="col-lg-7 col-md-7 col-sm-12 main-col">
        <h3>Enter repository</h3>
-        <strong>
-          Please enter the HTTP or SSH style URL used to clone your git repository:
-        </strong>
+        <strong>Please enter the HTTP or SSH style URL used to clone your git repository:</strong>
        <input class="form-control" type="text" placeholder="git@example.com:namespace/repository.git"
               ng-model="$ctrl.config.build_source"
               ng-pattern="/(((http|https):\/\/)(.+)|\w+@(.+):(.+))/">
@ -23,13 +22,14 @@

        <p><b>It is the responsibility of the git repository to invoke a webhook to tell <span class="registry-name" short="true"></span> that a commit has been added.</b></p>
      </div>
-    </div><!-- /Section: Repository -->
+    </linear-workflow-section><!-- /Section: Repository -->

    <!-- Section: Build context -->
-    <div class="linear-workflow-section row"
-         section-id="dockerfile"
-         section-title="Build context"
-         section-valid="$ctrl.config.subdir">
+    <linear-workflow-section
+      class="row"
+      section-id="dockerfile"
+      section-title="Build context"
+      section-valid="$ctrl.config.subdir">

      <div class="col-lg-7 col-md-7 col-sm-12 main-col">
        <h3>Select build context directory</h3>
@ -42,6 +42,56 @@
        <p>The build context directory is the path of the directory containing the Dockerfile and any other files to be made available when the build is triggered.</p>
        <p>If the Dockerfile is located at the root of the git repository, enter <code>/</code> as the build context directory.</p>
      </div>
-    </div><!-- /Section: Build context -->
-  </div>
+    </linear-workflow-section><!-- /Section: Build context -->
+  </linear-workflow>
 </div>
+
+
+
+<!-- FIXME: Remove -->
+<!--<div class="manage-trigger-custom-git-element manage-trigger-control">-->
+  <!--<div class="linear-workflow"-->
+       <!--workflow-state="$ctrl.currentState"-->
+       <!--done-title="Create Trigger"-->
+       <!--workflow-complete="$ctrl.activateTrigger({'config': $ctrl.config})">-->
+    <!--&lt;!&ndash; Section: Repository &ndash;&gt;-->
+    <!--<div class="linear-workflow-section row"-->
+         <!--section-id="repo"-->
+         <!--section-title="Git Repository"-->
+         <!--section-valid="$ctrl.config.build_source">-->
+
+      <!--<div class="col-lg-7 col-md-7 col-sm-12 main-col">-->
+        <!--<h3>Enter repository</h3>-->
+        <!--<strong>Please enter the HTTP or SSH style URL used to clone your git repository:</strong>-->
+        <!--<input class="form-control" type="text" placeholder="git@example.com:namespace/repository.git"-->
+               <!--ng-model="$ctrl.config.build_source"-->
+               <!--ng-pattern="/(((http|https):\/\/)(.+)|\w+@(.+):(.+))/">-->
+      <!--</div>-->
+      <!--<div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">-->
+        <!--<p>Custom git triggers support any externally accessible git repository, via either the normal git protocol or HTTP.</p>-->
+
+        <!--<p><b>It is the responsibility of the git repository to invoke a webhook to tell <span class="registry-name" short="true"></span> that a commit has been added.</b></p>-->
+      <!--</div>-->
+    <!--</div>&lt;!&ndash; /Section: Repository &ndash;&gt;-->
+
+    <!--&lt;!&ndash; Section: Build context &ndash;&gt;-->
+    <!--<div class="linear-workflow-section row"-->
+         <!--section-id="dockerfile"-->
+         <!--section-title="Build context"-->
+         <!--section-valid="$ctrl.config.subdir">-->
+
+      <!--<div class="col-lg-7 col-md-7 col-sm-12 main-col">-->
+        <!--<h3>Select build context directory</h3>-->
+        <!--<strong>Please select the build context directory under the git repository:</strong>-->
+        <!--<input class="form-control" type="text" placeholder="/"-->
+               <!--ng-model="$ctrl.config.subdir"-->
+               <!--ng-pattern="/^($|\/|\/.+)/">-->
+      <!--</div>-->
+      <!--<div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">-->
+        <!--<p>The build context directory is the path of the directory containing the Dockerfile and any other files to be made available when the build is triggered.</p>-->
+        <!--<p>If the Dockerfile is located at the root of the git repository, enter <code>/</code> as the build context directory.</p>-->
+      <!--</div>-->
+    <!--</div>&lt;!&ndash; /Section: Build context &ndash;&gt;-->
+  <!--</div>-->
+<!--</div>-->
+
--- a/static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.html
+++ b/static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.html
@ -11,9 +11,7 @@
         section-valid="$ctrl.local.selectedNamespace">
      <div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-show="$ctrl.local.namespaces">
        <h3>Select {{ $ctrl.namespaceTitle }}</h3>
-        <strong>
-          Please select the {{ $ctrl.namespaceTitle }} under which the repository lives
-        </strong>
+        <strong>Please select the {{ $ctrl.namespaceTitle }} under which the repository lives</strong>

        <div class="co-top-bar">
          <div class="co-filter-box">
--- a/static/js/quay.module.ts
+++ b/static/js/quay.module.ts
@ -9,6 +9,7 @@ import { DockerfilePathSelectComponent } from './directives/ui/dockerfile-path-s
 import { ManageTriggerCustomGitComponent } from './directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component';
 import { ManageTriggerGithostComponent } from './directives/ui/manage-trigger-githost/manage-trigger-githost.component';
 import { LinearWorkflowComponent } from './directives/ui/linear-workflow/linear-workflow.component';
+import { LinearWorkflowSectionComponent } from './directives/ui/linear-workflow/linear-workflow-section.component';
 import { QuayConfig } from './quay-config.module';
 import { QuayRun } from './quay-run.module';

@ -28,6 +29,7 @@ import { QuayRun } from './quay-run.module';
    ManageTriggerCustomGitComponent,
    ManageTriggerGithostComponent,
    LinearWorkflowComponent,
+    LinearWorkflowSectionComponent,
  ],
  providers: [
    ViewArrayImpl,
--- a/test/data/test.db
+++ b/test/data/test.db