Implement searching in the web app

components/builder-web/app/AppComponent.ts

@@ -112,6 +112,11 @@ import {authenticateWithGitHub, loadSessionState, removeNotification,
         name: "PackagesForOriginAndNameAndVersion",
         component: PackagesPageComponent,
     },
+    {
+        path: "/pkgs/search/:query",
+        name: "PackagesSearch",
+        component: PackagesPageComponent,
+    },
     {
         path: "/pkgs/:origin/:name/:version/:release",
         name: "Package",

components/builder-web/app/PackageBreadcrumbsComponent.ts

@@ -14,9 +14,6 @@ import {RouterLink} from "angular2/router";
     selector: "package-breadcrumbs",
     template: `
     <span class="hab-package-breadcrumbs">
-        <span *ngIf="showAll">All Packages</span>
-        <span *ngIf="params.filter === 'mine'">My Packages</span>
-        <a *ngIf="!ident.origin && !params.filter && !showAll" [routerLink]="['Packages']">*</a>
         <a [routerLink]="['PackagesForOrigin',
             { origin: ident.origin }]">
             {{ident.origin}}
@@ -43,14 +40,9 @@ import {RouterLink} from "angular2/router";
 })
 
 export class PackageBreadcrumbsComponent {
-    private ident;
     private params;
 
     constructor() {
         this.params = this.params || {};
     }
-
-    get showAll() {
-        return Object.keys(this.ident).length === 0;
-    }
 }

components/builder-web/app/actions/index.ts

@@ -49,6 +49,8 @@ export const CLEAR_PACKAGES = packageActions.CLEAR_PACKAGES;
 export const POPULATE_EXPLORE = packageActions.POPULATE_EXPLORE;
 export const SET_CURRENT_PACKAGE = packageActions.SET_CURRENT_PACKAGE;
 export const SET_PACKAGES_NEXT_RANGE = packageActions.SET_PACKAGES_NEXT_RANGE;
+export const SET_PACKAGES_SEARCH_QUERY =
+    packageActions.SET_PACKAGES_SEARCH_QUERY;
 export const SET_PACKAGES_TOTAL_COUNT = packageActions.SET_PACKAGES_TOTAL_COUNT;
 
 export const SET_VISIBLE_PACKAGES = packageActions.SET_VISIBLE_PACKAGES;
@@ -104,6 +106,7 @@ export const fetchPackage = packageActions.fetchPackage;
 export const filterPackagesBy = packageActions.filterPackagesBy;
 export const populateExplore = packageActions.populateExplore;
 export const setCurrentPackage = packageActions.setCurrentPackage;
+export const setPackagesSearchQuery = packageActions.setPackagesSearchQuery;
 export const setVisiblePackages = packageActions.setVisiblePackages;
 
 export const addProject = projectActions.addProject;

components/builder-web/app/actions/packages.ts

@@ -12,6 +12,7 @@ export const CLEAR_PACKAGES = "CLEAR_PACKAGES";
 export const POPULATE_EXPLORE = "POPULATE_EXPLORE";
 export const SET_CURRENT_PACKAGE = "SET_CURRENT_PACKAGE";
 export const SET_PACKAGES_NEXT_RANGE = "SET_PACKAGES_NEXT_RANGE";
+export const SET_PACKAGES_SEARCH_QUERY = "SET_PACKAGES_SEARCH_QUERY";
 export const SET_PACKAGES_TOTAL_COUNT = "SET_PACKAGES_TOTAL_COUNT";
 export const SET_VISIBLE_PACKAGES = "SET_VISIBLE_PACKAGES";
 
@@ -34,19 +35,23 @@ export function fetchPackage(pkg) {
     return dispatch => {
         dispatch(clearPackages());
         depotApi.get(pkg.ident).then(response => {
-            dispatch(setCurrentPackage(response));
+            dispatch(setCurrentPackage(response["results"]));
         }).catch(error => {
             dispatch(setCurrentPackage(undefined, error));
         });
     };
 }
 
-export function filterPackagesBy(params, nextRange: number = 0) {
+export function filterPackagesBy(params, query: string, nextRange: number = 0) {
     return dispatch => {
         if (nextRange === 0) {
             dispatch(clearPackages());
         }
 
+        if (query) {
+            params = { query };
+        }
+
         depotApi.get(params, nextRange).then(response => {
             dispatch(setVisiblePackages(response["results"]));
             dispatch(setPackagesTotalCount(response["totalCount"]));
@@ -79,6 +84,13 @@ function setPackagesNextRange(payload: number) {
     };
 }
 
+export function setPackagesSearchQuery(payload: string) {
+    return {
+        type: SET_PACKAGES_SEARCH_QUERY,
+        payload,
+    };
+}
+
 function setPackagesTotalCount(payload: number) {
     return {
         type: SET_PACKAGES_TOTAL_COUNT,

components/builder-web/app/depotApi.ts

@@ -11,9 +11,13 @@ import {packageString} from "./util";
 
 const urlPrefix = config["habitat_api_url"] || "";
 
-export function get(ident, nextRange: number = 0) {
+export function get(params, nextRange: number = 0) {
+    const url = `${urlPrefix}/depot/pkgs/` +
+        ("query" in params ? `search/${params["query"]}`
+                           : packageString(params));
+
     return new Promise((resolve, reject) => {
-        fetch(`${urlPrefix}/depot/pkgs/${packageString(ident)}`, {
+        fetch(url, {
             headers: { "Range": nextRange.toString() }
         }).then(response => {
             // Fail the promise if an error happens.
@@ -25,7 +29,10 @@ export function get(ident, nextRange: number = 0) {
                 reject(new Error(response.statusText));
             }
 
-            const totalCount = parseInt(response.headers.get("Content-Range").split("=")[1], 10);
+            const totalCount = parseInt(
+                (response.headers.get("Content-Range") || "").split("=")[1],
+                10
+            );
             const nextRange = parseInt(response.headers.get("Next-Range"), 10);
 
             const headers = response.headers;

components/builder-web/app/initialState.ts

@@ -86,6 +86,7 @@ export default Record({
         explore: List(),
         visible: List(),
         nextRange: 0,
+        searchQuery: "",
         totalCount: 0,
         ui: Record({
             current: Record({

components/builder-web/app/packages-page/PackagesPageComponent.ts

@@ -5,12 +5,13 @@
 // the Software until such time that the Software is made available under an
 // open source license such as the Apache 2.0 License.
 
+import {Control} from "angular2/common";
 import {Component, OnInit} from "angular2/core";
 import {RouteParams, RouterLink} from "angular2/router";
 import {AppStore} from "../AppStore";
 import {PackageBreadcrumbsComponent} from "../PackageBreadcrumbsComponent";
 import {SpinnerComponent} from "../SpinnerComponent";
-import {filterPackagesBy} from "../actions/index";
+import {filterPackagesBy, setPackagesSearchQuery} from "../actions/index";
 import {requireSignIn} from "../util";
 
 @Component({
@@ -21,16 +22,22 @@ import {requireSignIn} from "../util";
             <h2>
                 <hab-spinner [isSpinning]="ui.loading" [onClick]="spinnerFetchPackages">
                 </hab-spinner>
-                <package-breadcrumbs [ident]="routeParams.params"
+                <span *ngIf="searchQuery || routeParams.params['query']">Search Results</span>
+                <package-breadcrumbs
+                    *ngIf="!searchQuery"
+                    [ident]="routeParams.params"
                     [params]="routeParams.params">
                 </package-breadcrumbs>
             </h2>
         </div>
         <div class="page-body">
+            <input type="search" autofocus
+                [ngFormControl]="searchBox"
+                placeholder="Search Packages&hellip;">
             <ul class="hab-packages-plan-list">
                 <div *ngIf="(!ui.exists || packages.size === 0) && !ui.loading">
                     <p>
-                        Failed to load packages.
+                        No packages found.
                         <span *ngIf="ui.errorMessage">
                             Error: {{ui.errorMessage}}
                         </span>
@@ -56,7 +63,7 @@ import {requireSignIn} from "../util";
                     </a>
                 </li>
             </ul>
-            <div *ngIf="packages.size <= totalCount">
+            <div *ngIf="packages.size < totalCount">
                 Showing {{packages.size}} of {{totalCount}} packages.
                 <a href="#" (click)="fetchMorePackages()">
                     Load
@@ -69,6 +76,7 @@ import {requireSignIn} from "../util";
 
 export class PackagesPageComponent implements OnInit {
     private perPage: number = 50;
+    private searchBox: Control;
     private spinnerFetchPackages: Function;
 
     constructor(private store: AppStore, private routeParams: RouteParams) {
@@ -79,6 +87,10 @@ export class PackagesPageComponent implements OnInit {
         return this.store.getState().packages.visible;
     }
 
+    get searchQuery() {
+        return this.store.getState().packages.searchQuery;
+    }
+
     get totalCount() {
         return this.store.getState().packages.totalCount;
     }
@@ -88,20 +100,33 @@ export class PackagesPageComponent implements OnInit {
     }
 
     public ngOnInit() {
-        if (this.routeParams.params["filter"] === "mine") {
-            requireSignIn(this);
+        if ("query" in this.routeParams.params) {
+            this.search(this.routeParams.params["query"]);
+        } else {
+            this.fetchPackages();
         }
 
-        this.fetchPackages();
+        this.searchBox = new Control(this.searchQuery);
+
+        this.searchBox.valueChanges.debounceTime(400).distinctUntilChanged().
+            subscribe(query => this.search(query));
     }
 
     private fetchPackages() {
-        this.store.dispatch(filterPackagesBy(this.routeParams.params));
+        this.store.dispatch(filterPackagesBy(this.routeParams.params,
+            this.searchQuery));
     }
 
     private fetchMorePackages() {
         this.store.dispatch(filterPackagesBy(this.routeParams.params,
+            this.searchQuery,
             this.store.getState().packages.nextRange));
         return false;
     }
+
+    private search(query) {
+        this.store.dispatch(setPackagesSearchQuery(query));
+        this.fetchPackages();
+        return false;
+    }
 }

components/builder-web/app/reducers/packages.ts

@@ -45,6 +45,9 @@ export default function packages(state = initialState["packages"], action) {
         case actionTypes.SET_PACKAGES_NEXT_RANGE:
             return state.set("nextRange", action.payload);
 
+        case actionTypes.SET_PACKAGES_SEARCH_QUERY:
+            return state.set("searchQuery", action.payload);
+
         case actionTypes.SET_PACKAGES_TOTAL_COUNT:
             return state.set("totalCount", action.payload);