New Library manager

.travis.yml

@@ -24,7 +24,6 @@ install:
 - npm install -g typescript
 - npm install -g gulp
 - npm install
-- gulp install
 - npm run vscode:prepublish
 
 script:

gulpfile.js

@@ -1,7 +1,6 @@
 const gulp = require("gulp");
 const tslint = require("gulp-tslint");
 const gutil = require("gulp-util");
-const install = require("gulp-install");
 const ts = require("gulp-typescript");
 const sourcemaps = require("gulp-sourcemaps");
 const webpack = require("webpack");
@@ -12,15 +11,11 @@ const path = require("path");
 
 //...
 gulp.task("tslint", () => {
-    return gulp.src(["**/*.ts", "!**/*.d.ts", "!node_modules/**"])
+    return gulp.src(["**/*.ts", "**/*.tsx", "!**/*.d.ts", "!node_modules/**", "!./html/node_modules/**"])
         .pipe(tslint())
         .pipe(tslint.report());
 });
 
-gulp.task("install", () => {
-    return gulp.src(['./package.json', './html/package.json']).pipe(install());
-});
-
 gulp.task("html-webpack", (done) => {
     const config = require("./html/webpack.config.js");
     config.context = `${__dirname}/html`;

html/app/actions/api.ts

@@ -37,3 +37,26 @@ export function openLink(link) {
         link,
     }).then((response) => response.json());
 }
+
+export function getLibraries() {
+    return window.fetch("/api/libraries").then((response) => response.json());
+}
+
+export function installLibrary(libraryName, version) {
+    return postHTTP("/api/installlibrary", {
+        libraryName,
+        version,
+    }).then((response) => response.json());
+}
+
+export function uninstallLibrary(libraryPath) {
+    return postHTTP("/api/uninstalllibrary", {
+        libraryPath,
+    }).then((response) => response.json());
+}
+
+export function addLibPath(path) {
+    return postHTTP("/api/addlibpath", {
+        path,
+    }).then((response) => response.json());
+}

html/app/actions/index.ts

@@ -15,6 +15,15 @@ export const INSTALL_BOARD_FAILURE = "INSTALL_BOARD_FAILURE";
 export const UNINSTALL_BOARD_REQUEST = "UNINSTALL_BOARD_REQUEST";
 export const UNINSTALL_BOARD_SUCCESS = "UNINSTALL_BOARD_SUCCESS";
 export const UNINSTALL_BOARD_FAILURE = "UNINSTALL_BOARD_FAILURE";
+export const LIBRARIES_REQUEST = "LIBRARIES_REQUEST";
+export const LIBRARIES_SUCCESS = "LIBRARIES_SUCCESS";
+export const LIBRARIES_FAILURE = "LIBRARIES_FAILURE";
+export const INSTALL_LIBRARY_REQUEST = "INSTALL_LIBRARY_REQUEST";
+export const INSTALL_LIBRARY_SUCCESS = "INSTALL_LIBRARY_SUCCESS";
+export const INSTALL_LIBRARY_FAILURE = "INSTALL_LIBRARY_FAILURE";
+export const UNINSTALL_LIBRARY_REQUEST = "UNINSTALL_LIBRARY_REQUEST";
+export const UNINSTALL_LIBRARY_SUCCESS = "UNINSTALL_LIBRARY_SUCCESS";
+export const UNINSTALL_LIBRARY_FAILURE = "UNINSTALL_LIBRARY_FAILURE";
 
 export function boardPackagesRequest() {
     return {
@@ -76,6 +85,70 @@ export function uninstallBoardFailure(errorMessage) {
     };
 }
 
+export function librariesRequest() {
+    return {
+        type: LIBRARIES_REQUEST,
+    };
+}
+
+export function librariesSuccess(libraries) {
+    return {
+        type: LIBRARIES_SUCCESS,
+        libraries,
+    };
+}
+
+export function librariesFailure(errorMessage) {
+    return {
+        type: LIBRARIES_FAILURE,
+        errorMessage,
+    };
+}
+
+export function installLibraryRequest(libraryName) {
+    return {
+        type: INSTALL_LIBRARY_REQUEST,
+        libraryName,
+    };
+}
+
+export function installLibrarySuccess(libraryName) {
+    return {
+        type: INSTALL_LIBRARY_SUCCESS,
+        libraryName,
+    };
+}
+
+export function installLibraryFailure(libraryName, errorMessage) {
+    return {
+        type: INSTALL_LIBRARY_FAILURE,
+        libraryName,
+        errorMessage,
+    };
+}
+
+export function uninstallLibraryRequest(libraryName) {
+    return {
+        type: UNINSTALL_LIBRARY_REQUEST,
+        libraryName,
+    };
+}
+
+export function uninstallLibrarySuccess(libraryName) {
+    return {
+        type: UNINSTALL_LIBRARY_SUCCESS,
+        libraryName,
+    };
+}
+
+export function uninstallLibraryFailure(libraryName, errorMessage) {
+    return {
+        type: UNINSTALL_LIBRARY_FAILURE,
+        libraryName,
+        errorMessage,
+    };
+}
+
 export function getBoardPackages(dispatch) {
     dispatch(boardPackagesRequest());
     API.getBoardPackages().then((response) => {
@@ -109,3 +182,49 @@ export function uninstallBoard(dispatch, boardName, packagePath, callback?: Func
         dispatch(uninstallBoardFailure(error));
     });
 }
+
+export function getLibraries(dispatch, callback?: Function) {
+    dispatch(librariesRequest());
+    API.getLibraries().then((response) => {
+        const { libraries } = <any> response;
+        dispatch(librariesSuccess(libraries));
+        if (callback) {
+            callback();
+        }
+    }).catch((error) => {
+        dispatch(librariesFailure(error));
+        if (callback) {
+            callback();
+        }
+    });
+}
+
+export function installLibrary(dispatch, libraryName, version, callback?: Function) {
+    dispatch(installLibraryRequest(libraryName));
+    API.installLibrary(libraryName, version).then((response) => {
+        dispatch(installLibrarySuccess(libraryName));
+        if (callback) {
+            callback();
+        }
+    }).catch((error) => {
+        dispatch(installLibraryFailure(libraryName, error));
+        if (callback) {
+            callback(error);
+        }
+    });
+}
+
+export function uninstallLibrary(dispatch, libraryName, libraryPath, callback?: Function) {
+    dispatch(uninstallLibraryRequest(libraryName));
+    API.uninstallLibrary(libraryPath).then((response) => {
+        dispatch(uninstallLibrarySuccess(libraryName));
+        if (callback) {
+            callback();
+        }
+    }).catch((error) => {
+        dispatch(uninstallLibraryFailure(libraryName, error));
+        if (callback) {
+            callback(error);
+        }
+    });
+}

html/app/components/BoardItemView.tsx

@@ -0,0 +1,142 @@
+/*--------------------------------------------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ *-------------------------------------------------------------------------------------------*/
+
+import * as React from "react";
+import { Button, DropdownButton, MenuItem } from "react-bootstrap";
+import * as API from "../actions/api";
+import { versionCompare } from "../utils/util";
+
+interface IBoardProps extends React.Props<any> {
+    platform: any;
+    installingBoardName: string;
+    installErrorMessage: string;
+    uninstallingBoardName: string;
+    uninstallErrorMessage: string;
+    installBoard: (boardName, packageName, arch, version) => void;
+    uninstallBoard: (boardName, packagePath) => void;
+}
+
+interface IBoardState extends React.Props<any> {
+    version: string;
+}
+
+export default class BoardView extends React.Component<IBoardProps, IBoardState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            version: "",
+        };
+        this.versionUpdate = this.versionUpdate.bind(this);
+    }
+
+    public render() {
+        return (<div className="listitem">
+            { this.buildBoardSectionHeader(this.props.platform) }
+            { this.buildBoardSectionBody(this.props.platform) }
+            { this.buildBoardSecionButtons(this.props.platform) }
+        </div>);
+    }
+
+    private versionUpdate(eventKey: any, event?: React.SyntheticEvent<{}>): void {
+        this.setState({
+            version: eventKey,
+        });
+    }
+
+    private openLink(url) {
+        API.openLink(url);
+    }
+
+    private buildBoardSectionHeader(p) {
+        return (<div>
+            <span className="listitem-header">{p.name}</span>
+            <span className="listitem-author"> by <span className="listitem-header">{p.package.maintainer}</span></span>
+            {
+                p.installedVersion && (
+                    <span className="listitem-author"> Version {p.installedVersion} <span className="listitem-installed-header">INSTALLED</span>
+                    </span>)
+            }
+        </div>);
+    }
+
+    private buildBoardSectionBody(p) {
+        const helpLinks = [];
+        if (p.help && p.help.online) {
+            helpLinks.push({
+                url: p.help.online,
+                label: "Online help",
+            });
+        }
+        if (p.package.help && p.package.help.online) {
+            if (p.help && p.help.online === p.package.help.online) {
+                // do nothing.
+            } else {
+                helpLinks.push({
+                    url: p.package.help.online,
+                    label: "Online help",
+                });
+            }
+        }
+        helpLinks.push({
+            url: p.package.websiteURL,
+            label: "More info",
+        });
+        return (<div className="listitem-container">
+            <div>
+                Boards included in this package:<br/> {p.boards.map((board: any) => board.name).join(", ")}  
+            </div>
+            {
+                helpLinks.map((helpLink, index) => {
+                    return (<div key={index}><a className="help-link" onClick={() => this.openLink(helpLink.url)}>{helpLink.label}</a></div>);
+                })
+            }
+        </div>);
+    }
+
+    private buildBoardSecionButtons(p) {
+        return (<div className="listitem-footer">
+            {
+                this.props.installingBoardName === p.name && (<div className="toolbar-mask">Installing...</div>)
+            }
+            {
+                this.props.uninstallingBoardName === p.name && (<div className="toolbar-mask">Removing...</div>)
+            }
+            {
+                p.installedVersion && (
+                    <div className="right-side">
+                        {
+                            p.versions && p.versions.length && versionCompare(p.versions[0], p.installedVersion) > 0 && (
+                                <Button className="operation-btn"
+                                onClick={() => this.props.installBoard(p.name, p.package.name, p.architecture, p.versions[0])}>
+                                Update
+                                </Button>
+                            )
+                        }
+                        <Button className="operation-btn" onClick={() => this.props.uninstallBoard(p.name, p.rootBoardPath)}>Remove</Button>
+                    </div>
+                )
+            }
+            {
+                !p.defaultPlatform && (
+                    <div className="left-side">
+                        <DropdownButton id="versionselector" title={this.state.version || "Select version"}
+                        placeholder="Select version" onSelect={this.versionUpdate}>
+                            { p.versions.map((v, index) => {
+                                if (v === p.installedVersion) {
+                                    return "";
+                                }
+                                return (<MenuItem key={index} eventKey={v} active={v === this.state.version}>{v}</MenuItem>);
+                            })}
+                        </DropdownButton>
+                        <Button className="operation-btn" disabled={!this.state.version}
+                        onClick={() => this.props.installBoard(p.name, p.package.name, p.architecture, this.state.version)}>
+                        Install
+                        </Button>
+                    </div>
+                )
+            }
+        </div>);
+    }
+}