Version 0.0.2 (#45)

* refactor structure of project

* moves the Edit submenu into a top level Menu

* add sticky topbar

* integrate mui tabs and react-router-dom

* finish add edit form

* add tag interface

* fix theme background colors

* decouple connection data and connection status

* list page ui mostly done

* some linting

* added eslint in my editor

* refactor channelID to connectionID

* add view connection page

* poc for native menu

* Grpc api ts proto (#46)

* generate via ts-proto

* add grpc-js dep

* fix tsc error

* regenerate to pick up proto changes

Co-authored-by: Travis Groth <[email protected]>
Co-authored-by: wasaga <>

* hook up form and view page to backend

* update to match selector

* manage page updated to work with backend and deletion methods

* connect/disconnect

* fix stale event listeners and nulls for backend

* some work on the system menu tray

* connections and system tray updated

* search

* import/export

* import order

* better search

* toast message instead of basic alert

* duplicate functionality

* get context menu working with menubar

* fix discard and no connections issues

* add more time to toast

* cleanup some listeners

* deletion and export fixes

* cleanup redirectTo listener

* code review

Co-authored-by: Travis Groth <[email protected]>

.erb/scripts/protoc

@@ -0,0 +1,62 @@
+#!/bin/bash
+set -euo pipefail
+
+_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" >/dev/null 2>&1 && pwd)"
+_protoc_version="3.14.0"
+_protoc_path="/tmp/pomerium-protoc/protoc-$_protoc_version"
+_protoc_3pp_path="/tmp/pomerium-protoc-3pp"
+
+_os="linux"
+if [ "$(uname -s)" == "Darwin" ]; then
+ _os="osx"
+fi
+
+# fetch_zip dir name url
+download() {
+ local dst="$1/$2"
+ if [ -d "$dst" ]; then
+ return
+ fi
+
+ echo downloading "$2"
+ local archive
+ archive="$(mktemp)"
+ curl -L -o "$archive" "$3"
+ mkdir -p "$dst"
+ tar xzf "$archive" -C "$dst" --strip-components=1
+ rm "$archive"
+}
+
+download $_protoc_3pp_path protoc-gen-validate https://github.com/envoyproxy/protoc-gen-validate/tarball/v0.6.1
+download $_protoc_3pp_path data-plane-api https://github.com/envoyproxy/data-plane-api/tarball/main
+download $_protoc_3pp_path xds https://github.com/cncf/xds/tarball/main
+download $_protoc_3pp_path googleapis https://github.com/googleapis/googleapis/tarball/master
+
+mkdir -p "$_protoc_path" "$_protoc_3pp_path"
+if [ ! -f "$_protoc_path/bin/protoc" ]; then
+ echo "downloading protoc"
+ curl -L \
+ -o protoc.zip \
+ "https://github.com/protocolbuffers/protobuf/releases/download/v$_protoc_version/protoc-$_protoc_version-$_os-x86_64.zip"
+ unzip -o -d "$_protoc_path" protoc.zip
+ rm protoc.zip
+fi
+
+if [ ! -x "$GOPATH/bin/protoc-gen-validate" ]; then
+ echo "installing protoc-gen-validate"
+ pushd $(pwd)
+ cd "$_protoc_3pp_path/protoc-gen-validate" && make build
+ popd
+fi
+
+exec "$_protoc_path/bin/protoc" \
+ -I "$_protoc_3pp_path/data-plane-api" \
+ -I "$_protoc_3pp_path/udpa" \
+ -I "$_protoc_3pp_path/xds" \
+ -I "$_protoc_3pp_path/protoc-gen-validate" \
+ -I "$_protoc_3pp_path/googleapis" \
+ --experimental_allow_proto3_optional \
+ --plugin="protoc-gen-go=$_dir/protoc-gen-go" \
+ --plugin="protoc-gen-validate=$_dir/protoc-gen-validate" \
+ --plugin="node_modules/ts-proto/protoc-gen-ts_proto" \
+ "$@"

.eslintrc.js

@@ -3,6 +3,8 @@ module.exports = {
  rules: {
  // A temporary hack related to IDE not resolving correct package.json
  'import/no-extraneous-dependencies': 'off',
+ // cause sometimes concat is more readable
+ 'prefer-template': 'off',
  },
  parserOptions: {
  ecmaVersion: 2020,

api.proto

@@ -0,0 +1 @@
+../pomerium/pkg/grpc/cli/api.proto

package.json

@@ -15,7 +15,8 @@
  "start": "node -r @babel/register ./.erb/scripts/CheckPortInUse.js && cross-env yarn start:renderer",
  "start:main": "cross-env NODE_ENV=development electron -r ./.erb/scripts/BabelRegister ./src/main.dev.ts",
  "start:renderer": "cross-env NODE_ENV=development webpack serve --config ./.erb/configs/webpack.config.renderer.dev.babel.js",
- "test": "jest --passWithNoTests "
+ "test": "jest --passWithNoTests ",
+ "protoc": ".erb/scripts/protoc --ts_proto_out=./src/shared/pb/ --ts_proto_opt=outputServices=grpc-js,esModuleInterop=true --proto_path=. api.proto && prettier --write ./src/shared/pb"
  },
  "lint-staged": {
  "*.{js,jsx,ts,tsx}": [
@@ -257,7 +258,10 @@
  "@babel/plugin-proposal-numeric-separator": "^7.14.5",
  "@babel/plugin-proposal-private-methods": "^7.14.5",
  "@babel/plugin-proposal-private-property-in-object": "^7.14.5",
+ "@grpc/grpc-js": "^1.4.2",
  "@material-ui/core": "^4.11.2",
+ "@material-ui/lab": "^4.0.0-alpha.60",
+ "electron-context-menu": "^3.1.1",
  "electron-debug": "^3.1.0",
  "electron-is-packaged": "^1.0.2",
  "electron-log": "^4.4.1",
@@ -272,6 +276,7 @@
  "react-router-dom": "5.2.0",
  "regenerator-runtime": "^0.13.9",
  "source-map-support": "^0.5.19",
+ "ts-proto": "^1.85.0",
  "validator": "^13.6.0"
  },
  "devEngines": {

src/App.tsx

@@ -1,5 +1,5 @@
 import { ipcRenderer } from 'electron';
-import React, { FC } from 'react';
+import React, { FC, PropsWithChildren, useEffect } from 'react';
 import {
  useHistory,
  HashRouter,
@@ -10,23 +10,37 @@ import {
 
 import {
  createStyles,
+ CssBaseline,
  jssPreset,
  makeStyles,
  StylesProvider,
  ThemeProvider,
 } from '@material-ui/core';
 import { create } from 'jss';
-import { createMuiTheme } from './utils/theme';
-import ConnectForm from './pages/ConnectForm';
-import { THEMES } from './utils/constants';
+import { createMuiTheme } from './shared/theme';
+import ConnectForm from './renderer/pages/ConnectForm';
+import { THEMES } from './shared/constants';
+import TopBar from './renderer/components/TopBar';
+import ManageConnections from './renderer/pages/ManageConnections';
+import TopTabs from './renderer/components/TopTabs';
+import ConnectionView from './renderer/pages/ConnectionView';
 
-const RouteListener: FC = (x) => {
+const RouteListener: FC = ({
+ children,
+}: PropsWithChildren<unknown>): JSX.Element => {
  const history = useHistory();
- ipcRenderer?.on('redirectTo', (_, arg) => {
- history.replace(arg);
- });
+
+ useEffect(() => {
+ ipcRenderer?.on('redirectTo', (_, arg) => {
+ history.replace(arg);
+ });
+ return function cleanup() {
+ ipcRenderer.removeAllListeners('redirectTo');
+ };
+ }, []);
+
  // eslint-disable-next-line react/destructuring-assignment
- return <>{x.children}</>;
+ return <>{children}</>;
 };
 
 const jss = create({ plugins: [...jssPreset().plugins] });
@@ -74,18 +88,27 @@ const App: FC = () => {
  useStyles();
  return (
  <ThemeProvider theme={createMuiTheme(defaultSettings)}>
+ <CssBaseline />
  <StylesProvider jss={jss}>
  <HashRouter>
+ <TopBar>
+ <TopTabs />
+ </TopBar>
  <Switch>
  <RouteListener>
  <Route exact path="/">
- <Redirect to="/connect" />
+ <Redirect to="/connectForm" />
  </Route>
- <Route exact path="/connect" component={ConnectForm} />
+ <Route exact path="/connectForm" component={ConnectForm} />
  <Route
- path="/edit_connect/:channelId/:editingConnected"
+ path="/edit_connect/:connectionID"
  component={ConnectForm}
  />
+ <Route
+ path="/view_connection/:connectionID"
+ component={ConnectionView}
+ />
+ <Route exact path="/manage" component={ManageConnections} />
  </RouteListener>
  </Switch>
  </HashRouter>