Merge branch 'v2' into jamangia/tf-pascal-voc-exporter-v2

.codecov.yml

@@ -15,3 +15,5 @@ coverage:
     patch:  # provides an indication on how well the pull request is tested
       default:
         target: 70% # min coverage ratio to be considered a success
+  ignore:
+    - "src/electron/start.js"

.env.test

@@ -0,0 +1 @@
+HOST_TYPE=electron

docs/DEBUG.md

@@ -0,0 +1 @@
+# Debugging Guide  

package.json

@@ -12,6 +12,7 @@
         "md5.js": "^1.3.5",
         "react": "^16.6.3",
         "react-dom": "^16.6.3",
+        "react-keydown": "^1.9.7",
         "react-localization": "^1.0.13",
         "react-redux": "^5.1.1",
         "react-router-dom": "^4.3.1",
@@ -27,20 +28,25 @@
     },
     "scripts": {
         "start": "nf start -p 3000",
+        "compile": "tsc",
         "build": "react-scripts build",
+        "webpack:dev": "webpack --config ./config/webpack.dev.js",
+        "webpack:prod": "webpack -p --config ./config/webpack.prod.js",
+        "react-start": "react-scripts start",
+        "electron:run:dev": "npm run webpack:dev && electron . --remote-debugging-port=9223",
+        "electron:run:prod": "npm run webpack:prod && electron . --remote-debugging-port=9223",
+        "electron:start:dev": "npm run webpack:dev && npm run electron-start",
+        "electron:start:prod": "npm run webpack:prod && npm run electron-start",
+        "electron-start": "node src/electron/start",
+        "eject": "react-scripts eject",
+        "release": "npm run build && npm run webpack:prod && electron-builder",
         "pretest": "./node_modules/.bin/tslint 'src/**/*.ts*'",
         "lintfix": "./node_modules/.bin/tslint 'src/**/*.ts*' --fix",
         "test": "react-scripts test --env=jsdom --silent",
         "test:ci": "cross-env CI=true npm run test",
         "test:coverage": "npm run test -- --coverage",
-        "eject": "react-scripts eject",
-        "electron": "webpack --config ./config/webpack.dev.js && electron .",
-        "electron:prod": "webpack -p --config ./config/webpack.prod.js",
-        "electron-start": "node src/electron/start",
-        "react-start": "react-scripts start",
-        "compile": "tsc",
-        "release": "npm run build && npm run electron:prod && electron-builder",
-        "postinstall": "electron-builder install-app-deps"
+        "postinstall": "electron-builder install-app-deps",
+        "predebug": "npm run build && npm run webpack:dev"
     },
     "eslintConfig": {
         "extends": "react-app"
@@ -61,6 +67,7 @@
         "@types/react-dom": "16.0.9",
         "@types/react-jsonschema-form": "^1.0.12",
         "@types/react-router-dom": "^4.3.1",
+        "@types/react-toastify": "^4.0.1",
         "@types/reactstrap": "^6.4.3",
         "@types/redux-logger": "^3.0.6",
         "@types/redux-mock-store": "^1.0.0",
@@ -78,6 +85,7 @@
         "react-jsonschema-form": "^1.0.6",
         "react-modal": "^3.6.1",
         "react-tag-input": "^6.1.0",
+        "react-toastify": "^4.5.2",
         "redux-mock-store": "^1.5.3",
         "ts-loader": "^5.3.0",
         "tslint": "^5.11.0",

src/App.tsx

@@ -1,11 +1,13 @@
 import React from "react";
 import { connect } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
 import Navbar from "./react/components/shell/navbar";
 import Sidebar from "./react/components/shell/sidebar";
 import MainContentRouter from "./react/components/shell/mainContentRouter";
 import { IApplicationState, IProject } from "./models/applicationState";
 import "./App.scss";
+import "react-toastify/dist/ReactToastify.css";
 
 interface IAppProps {
     currentProject?: IProject;
@@ -36,6 +38,7 @@ class App extends React.Component<IAppProps> {
                         <Sidebar project={this.props.currentProject} />
                         <MainContentRouter />
                     </div>
+                    <ToastContainer />
                 </div>
             </Router>
         );

src/common/hostProcess.test.ts

@@ -0,0 +1,41 @@
+import getHostProcess, { HostProcessType } from "./hostProcess";
+
+jest.mock("os");
+import os from "os";
+
+describe("Host Process", () => {
+    let originalHostType: string = null;
+
+    beforeAll(() => {
+        originalHostType = process.env.HOST_TYPE;
+        process.env.HOST_TYPE = "";
+    });
+
+    afterAll(() => {
+        process.env.HOST_TYPE = originalHostType;
+    });
+
+    it("sets host process type to electron when running as electron", () => {
+        // tslint:disable-next-line:max-line-length
+        const expectedRelease = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) vott-react-typescript/0.1.0 Chrome/66.0.3359.181 Electron/3.0.13 Safari/537.36";
+        const releaseMock = os.release as jest.Mock;
+        releaseMock.mockImplementationOnce(() => expectedRelease);
+
+        const hostProcess = getHostProcess();
+
+        expect(hostProcess.type).toEqual(HostProcessType.Electron);
+        expect(hostProcess.release).toEqual(expectedRelease.toLowerCase());
+    });
+
+    it("sets host process type to browser when not electron", () => {
+        // tslint:disable-next-line:max-line-length
+        const expectedRelease = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36";
+        const releaseMock = os.release as jest.Mock;
+        releaseMock.mockImplementationOnce(() => expectedRelease);
+
+        const hostProcess = getHostProcess();
+
+        expect(hostProcess.type).toEqual(HostProcessType.Browser);
+        expect(hostProcess.release).toEqual(expectedRelease.toLowerCase());
+    });
+});

src/common/hostProcess.ts

@@ -0,0 +1,39 @@
+import os from "os";
+
+/**
+ * @name - Host Process
+ * @description - Describes the host process
+ * @member type - The type of the host process (electron, browser, etc)
+ * @member release - The release string of the host process
+ */
+export interface IHostProcess {
+    type: HostProcessType;
+    release: string;
+}
+
+/**
+ * @enum ELECTRON - Electron Host Process Type
+ * @enum BROWSER - Browser Host Process Type
+ */
+export enum HostProcessType {
+    Electron = 1, // bits: 01
+    Browser = 2,  // bits: 10
+    All = 3,      // bits: 11
+}
+
+function getHostProcess(): IHostProcess {
+    const osRelease = os.release().toLowerCase();
+    let hostProcessType: HostProcessType;
+    if (osRelease.indexOf("electron") > -1 || process.env.HOST_TYPE === "electron") {
+        hostProcessType = HostProcessType.Electron;
+    } else {
+        hostProcessType = HostProcessType.Browser;
+    }
+
+    return {
+        release: osRelease,
+        type: hostProcessType,
+    };
+}
+
+export default getHostProcess;

src/common/htmlFileReader.test.ts

@@ -1,5 +1,5 @@
+import axios, { AxiosResponse } from "axios";
 import HtmlFileReader from "./htmlFileReader";
-import MockFactory from "./mockFactory";
 import { AssetService } from "../services/assetService";
 
 describe("Html File Reader", () => {
@@ -72,4 +72,40 @@ describe("Html File Reader", () => {
         expect(result.width).toEqual(expected.width);
         expect(result.height).toEqual(expected.height);
     });
+
+    describe("Download asset binaries", () => {
+        it("Downloads a blob from the asset path", async () => {
+            const asset = AssetService.createAssetFromFilePath("https://server.com/image.jpg");
+            axios.get = jest.fn((url, config) => {
+                return Promise.resolve<AxiosResponse>({
+                    config,
+                    headers: null,
+                    status: 200,
+                    statusText: "OK",
+                    data: new Blob(["Some binary data"]),
+                });
+            });
+
+            const result = await HtmlFileReader.getAssetBlob(asset);
+            expect(result).not.toBeNull();
+            expect(result).toBeInstanceOf(Blob);
+            expect(axios.get).toBeCalledWith(asset.path, { responseType: "blob" });
+        });
+
+        it("Rejects the promise when request receives non 200 result", async () => {
+            const asset = AssetService.createAssetFromFilePath("https://server.com/image.jpg");
+            axios.get = jest.fn((url, config) => {
+                return Promise.resolve<AxiosResponse>({
+                    config,
+                    headers: null,
+                    status: 404,
+                    statusText: "Not Found",
+                    data: null,
+                });
+            });
+
+            await expect(HtmlFileReader.getAssetBlob(asset)).rejects.not.toBeNull();
+            expect(axios.get).toBeCalledWith(asset.path, { responseType: "blob" });
+        });
+    });
 });

src/common/htmlFileReader.ts

@@ -1,3 +1,4 @@
+import axios, { AxiosRequestConfig } from "axios";
 import { IAsset, AssetType } from "../models/applicationState";
 import Guard from "./guard";
 
@@ -44,6 +45,26 @@ export default class HtmlFileReader {
 
         return await this.readImageAttributes("data:image;base64," + base64);
     }
+
+    /**
+     * Downloads the binary blob from the blob path
+     * @param asset The asset to download
+     */
+    public static async getAssetBlob(asset: IAsset): Promise<Blob> {
+        Guard.null(asset);
+
+        const config: AxiosRequestConfig = {
+            responseType: "blob",
+        };
+
+        // Download the asset binary from the storage provider
+        const response = await axios.get<Blob>(asset.path, config);
+        if (response.status !== 200) {
+            throw new Error("Error downloading asset binary");
+        }
+
+        return response.data;
+    }
 
     private static readVideoAttributes(url: string): Promise<{ width: number, height: number, duration: number }> {
         return new Promise((resolve, reject) => {