@misk Dev Mode

* Scripts and package.json updates to enable easier development of @misk packages
* Change @misk/ package compiled code from serving out of loader tab only, to now also being served from a simple server on port 9100 rooted at misk/misk/web/@misk/
* Access Url for compiled code `_admin/@misk/*` remains the same
* Updated misk/web documentation

New Scripts
---
* `web/build.sh`: runs `yarn build` on every `@misk/` package and tab
* `web/develop@misk.sh`: builds all `@misk/` packages and starts server
* `web/developTabs.sh`: script to be built that will enable more developer friendly way of running Webpack-Dev-Servers for all tabs or begin development on a single one
* `web/@misk/_adminUpdateCache.sh`: flattens and copies compiled code from all `@misk/*/lib` directories into cache directory `web/@misk/_admin/@misk/*`

Updated misk/web documentation

.gitignore

@@ -8,6 +8,7 @@ build
 .git
 build
 lib
+**/@misk/_admin/@misk
 node_modules
 cachedUrls
 *.log

misk/src/main/kotlin/misk/web/AdminTabModule.kt

@@ -19,38 +19,22 @@ import misk.web.resources.StaticResourceEntry
 
 class AdminTabModule(val environment: Environment) : KAbstractModule() {
   override fun configure() {
-
-
     if (environment == Environment.DEVELOPMENT) {
       multibind<WebActionEntry>().toInstance(
           WebActionEntry<WebProxyAction>("/_admin/"))
       multibind<WebActionEntry>().toInstance(
-          WebActionEntry<WebProxyAction>("/_tab/dashboard/"))
-
-      if (false) {
-        multibind<WebActionEntry>().toInstance(
-            WebActionEntry<WebProxyAction>("/@misk/"))
-      }
+          WebActionEntry<WebProxyAction>("/_admin/@misk/"))
 
       multibind<WebProxyEntry>().toInstance(
           WebProxyEntry("/_admin/", "http://localhost:3100/"))
       multibind<WebProxyEntry>().toInstance(
-          WebProxyEntry("/_tab/dashboard/", "http://localhost:3110/"))
-
-      if (false) {
-        multibind<WebProxyEntry>().toInstance(
-            WebProxyEntry("/@misk/", "http://localhost:9100/"))
-      }
+          WebProxyEntry("/_admin/@misk/", "http://localhost:9100/"))
     } else {
       multibind<WebActionEntry>().toInstance(
           WebActionEntry<StaticResourceAction>("/_admin/"))
-      multibind<WebActionEntry>().toInstance(
-          WebActionEntry<StaticResourceAction>("/_tab/dashboard/"))
 
       multibind<StaticResourceEntry>()
           .toInstance(StaticResourceEntry("/_admin/", "classpath:/web/_admin/"))
-      multibind<StaticResourceEntry>()
-          .toInstance(StaticResourceEntry("/_tab/dashboard/", "classpath:/web/_tab/dashboard/"))
 
       if (false) {
         multibind<StaticResourceEntry>()

misk/web/@misk/_adminUpdateCache.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+
+for dir in $(pwd)/*/lib/
+do
+    dir=${dir%*/}
+    mkdir -p $(pwd)/_admin/@misk/
+    cp -r $dir/* $(pwd)/_admin/@misk/
+done

misk/web/@misk/common/package.json

@@ -20,10 +20,11 @@
   "scripts": {
     "build:lib": "npm run lib",
     "build": "npm run lib",
+    "updateDevCache": "cd ..; ./_adminUpdateCache.sh",
     "dist": "npm run lib",
-    "lib": "webpack --config webpack.config.js && webpack --config webpack.config.static.js && webpack --config webpack.config.vendors.js",
+    "lib": "webpack --config webpack.config.js && webpack --config webpack.config.static.js && webpack --config webpack.config.vendors.js; yarn run refresh; yarn run updateDevCache",
     "lint": "echo no lint",
-    "prepare": "yarn run refresh && yarn run lint && yarn run test && yarn run lib",
+    "prepare": "yarn run lint && yarn run test && yarn run lib",
     "refresh": "node refreshCachedUrls.js",
     "reinstall": "rm -rf node_modules/ && yarn install",
     "test": "echo no tests"

misk/web/@misk/components/package.json

@@ -19,8 +19,9 @@
   "scripts": {
     "build": "npm run lib",
     "build:lib": "npm run lib",
+    "updateDevCache": "cd ..; ./_adminUpdateCache.sh",
     "dist": "npm run lib",
-    "lib": "webpack",
+    "lib": "webpack; yarn run updateDevCache",
     "lint": "echo no lint",
     "prepare": "yarn run lint && yarn run test && yarn run lib",
     "reinstall": "rm -rf node_modules/ && yarn install",

misk/web/@misk/components/src/NavTopbarComponent.tsx

@@ -1,4 +1,5 @@
-import { Alignment, Navbar, NavbarDivider, NavbarGroup, NavbarHeading } from "@blueprintjs/core"
+import { Alignment, Button, Navbar, NavbarDivider, NavbarGroup, NavbarHeading } from "@blueprintjs/core"
+import { IconNames } from "@blueprintjs/icons"
 import { IMiskAdminTabs } from "@misk/common"
 import * as React from "react"
 import { Link } from "react-router-dom"
@@ -68,6 +69,7 @@ export const NavTopbarComponent = (props: INavTopbarProps) => (
   <MiskNavbar>
     <ResponsiveContainer>
       <MiskNavbarGroup align={Alignment.LEFT} className="bp3-dark">
+        {true ? <Button icon={IconNames.MENU}/>: <span></span>}
         <MiskNavbarLink to={props.homeUrl}>
           <MiskNavbarHeading>{props.homeName}</MiskNavbarHeading>
         </MiskNavbarLink>

misk/web/@misk/tabs/package.json

@@ -19,8 +19,9 @@
   "scripts": {
     "build:lib": "npm run lib",
     "build": "npm run lib",
+    "updateDevCache": "cd ..; ./_adminUpdateCache.sh",
     "dist": "npm run lib",
-    "lib": "webpack",
+    "lib": "webpack; yarn run updateDevCache",
     "lint": "echo no lint",
     "prepare": "yarn run lint && yarn run test && yarn run lib",
     "reinstall": "rm -rf node_modules/ && yarn install",

misk/web/README.md

@@ -5,34 +5,38 @@ Misk Admin
 - `@misk`: all npm packages
   - `@misk/common`: common dependencies
   - `@misk/components`: reusable React components
-  - `@misk/dev`: common devDependencies
+  - `@misk/dev`: common devDependencies, TsConfig, Webpack build configs, Webpack externals
+  - `@misk/tslint`: common TsLint configs
 - `tabs`: all modular parts of the dashboard
   - `config`: config tab
-  - `dashboard`: UI wrapper that adds dashboard navbar, menu...etc
   - `loader`: thin wrapper that has the main router, all script tags, handles hide/show each tab when it's clicked
-  - `healthcheck`: to be built
+  - ... to be built:
+  - `webActions`: show all installed `WebActions`
   - `guice`: to be built
   - `hibernate`: to be built
+  - `healthcheck`: to be built
 
 ## Framework and Languages
 - Typescript + ReactJS
 - [Blueprintjs](http://blueprintjs.com/) for UI elements + Typescript compatible Icons
+- [Styled Components](https://www.styled-components.com/) for adding CSS to React components
 - [Skeleton](http://getskeleton.com/) for very simple responsive boilerplate styling
 
 ## Getting Started
 
 1. Open Misk in IntelliJ
-2. Start `UrlShortenerService` (used for testing the request forwarding)
-3. For each tab
+1. Start `UrlShortenerService` (used for testing the request forwarding)
+1. Run `./develop@misk.sh` in `web/` directory (builds all @misk/ packages and starts dev server)
+1. Create new Tmux/Terminal sessions for each tab in `web/tabs/` and run
 
   ```
   $ cd tabs/config
   $ yarn install
   $ yarn build
   $ yarn start 
   ```
-4. Open up `http://localhost:8080/_admin/config/` for config
-5. Open up `http://localhost:8080/_admin/dashboard/` for dashboard
+1. Open up `http://localhost:8080/_admin/` for config
+1. If you want to build all the tabs, run `./build.sh` in `web/` directory
 
 
 ## Creating a new Tab

misk/web/build.sh

@@ -0,0 +1,9 @@
+#!/bin/sh
+# Build all @misk/ packages and tabs
+
+for dir in $(pwd)/*/*
+do
+    dir=${dir%*/}
+    [ -d $dir ] && echo $dir
+    [ -d $dir ] && bash -c "cd $dir; yarn build"
+done

misk/web/develop@misk.sh

@@ -0,0 +1,15 @@
+#!/bin/sh
+# Setup @misk/ packages for development forwarding from Misk service
+server () {
+  local port="${1:-8000}"
+  sleep 1 && open "http://localhost:${port}/" &
+  python -c $'import SimpleHTTPServer;\nmap = SimpleHTTPServer.SimpleHTTPRequestHandler.extensions_map;\nmap[""] = "text/plain";\nfor key, value in map.items():\n\tmap[key] = value + ";charset=UTF-8";\nSimpleHTTPServer.test();' "$port"
+}
+
+./build.sh
+cd @misk/
+# If port is changed, it must be updated in Misk::AdminTabModule multibindings
+server 9100
+
+# Now a server runs at 9100 with root at @misk/
+# Any @misk/ package being worked on will have changes served after each `$ yarn build`

misk/web/developTabs.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+echo "Not built yet..."
+# Options
+# 1. Create Tmuxinator config that opens Webpack-Dev-Servers for each tab
+# 2. Fix Misk so that failed WebProxyActions are forwarded to find StaticResource. 
+#     Then, previously compiled code stored in the Jar is served for any tabs not being currently worked on