initial import for Open Source 🎉

static/js/directives/ui/regex-match-view/regex-match-view.component.html

@@ -0,0 +1,29 @@
+<div class="regex-match-view-element">
+  <div ng-if="$ctrl.filterMatches($ctrl.regex, $ctrl.items, false) == null">
+    <i class="fa fa-exclamation-triangle"></i>Invalid Regular Expression!
+  </div>
+  <div ng-if="$ctrl.filterMatches($ctrl.regex, $ctrl.items, false) != null">
+    <table class="match-table">
+      <tr>
+        <td>Matching:</td>
+        <td>
+          <ul class="matching match-list">
+            <li ng-repeat="item in $ctrl.filterMatches($ctrl.regex, $ctrl.items, true)">
+              <i class="fa {{ item.icon }}"></i>{{ item.title }}
+            </li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>Not Matching:</td>
+        <td>
+          <ul class="not-matching match-list">
+            <li ng-repeat="item in $ctrl.filterMatches($ctrl.regex, $ctrl.items, false)">
+              <i class="fa {{ item.icon }}"></i>{{ item.title }}
+            </li>
+          </ul>
+        </td>
+      </tr>
+    </table>
+  </div>
+</div>

static/js/directives/ui/regex-match-view/regex-match-view.component.spec.ts

@@ -0,0 +1,44 @@
+import { RegexMatchViewComponent } from './regex-match-view.component';
+
+
+describe("RegexMatchViewComponent", () => {
+  var component: RegexMatchViewComponent;
+
+  beforeEach(() => {
+    component = new RegexMatchViewComponent();
+  });
+
+  describe("filterMatches", () => {
+    var items: ({value: string})[];
+
+    beforeEach(() => {
+      items = [{value: "heads/master"}, {value: "heads/develop"}, {value: "heads/production"}];
+    });
+
+    it("returns null if given invalid regex expression", () => {
+      var regexstr: string = "\\asfd\\";
+
+      expect(component.filterMatches(regexstr, items, true)).toBe(null);
+    });
+
+    it("returns a subset of given items matching the given regex expression if given 'shouldMatch' as true", () => {
+      var regexstr: string = `^${items[0].value}$`;
+      var matches: ({value: string})[] = component.filterMatches(regexstr, items, true);
+
+      expect(matches.length).toBeGreaterThan(0);
+      matches.forEach((match) => {
+        expect(items).toContain(match);
+      });
+    });
+
+    it("returns a subset of given items not matching the given regex expression if given 'shouldMatch' as false", () => {
+      var regexstr: string = `^${items[0].value}$`;
+      var nonMatches: ({value: string})[] = component.filterMatches(regexstr, items, false);
+
+      expect(nonMatches.length).toBeGreaterThan(0);
+      nonMatches.forEach((nonMatch) => {
+        expect(items).toContain(nonMatch);
+      });
+    });
+  });
+});

static/js/directives/ui/regex-match-view/regex-match-view.component.ts

@@ -0,0 +1,34 @@
+import { Input, Component } from 'ng-metadata/core';
+
+
+/**
+ * A component that displays the matches and non-matches for a regular expression against a set of
+ * items.
+ */
+@Component({
+  selector: 'regex-match-view',
+  templateUrl: '/static/js/directives/ui/regex-match-view/regex-match-view.component.html'
+})
+export class RegexMatchViewComponent {
+
+  // FIXME: Use one-way data binding
+  @Input('=') private regex: string;
+  @Input('=') private items: any[];
+
+  public filterMatches(regexstr: string, items: ({value: string})[], shouldMatch: boolean): ({value: string})[] | null {
+    regexstr = regexstr || '.+';
+
+    try {
+      var regex = new RegExp(regexstr);
+    } catch (ex) {
+      return null;
+    }
+
+    return items.filter(function(item) {
+      var value: string = item.value;
+      var m: RegExpMatchArray = value.match(regex);
+      var matches: boolean = !!(m && m[0].length == value.length);
+      return matches == shouldMatch;
+    });
+  }
+}