plugins: Update example for new headlamp-plugin style

plugins/examples/pod-counter/jsconfig.json

+{
+  "extends": "./tsconfig.json"
+}

plugins/examples/pod-counter/package.json

@@ -6,20 +6,31 @@
   "description": "Example Headlamp (Kubernetes GUI) plugin. Gets the number of pods in the cluster and displays that information in the top bar.",
   "scripts": {
     "start": "headlamp-plugin start",
-    "build": "headlamp-plugin build"
+    "build": "headlamp-plugin build",
+    "format": "headlamp-plugin format",
+    "lint": "headlamp-plugin lint",
+    "tsc": "tsc"
   },
   "keywords": [
     "headlamp",
-    "kinvolk",
+    "headlamp-plugin",
     "kubernetes",
     "plugins"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/kinvolk/headlamp.git",
-    "directory": "plugins/headlamp-plugin-counter"
+    "directory": "plugins/examples/pod-counter"
+  },
+  "prettier": "@kinvolk/eslint-config/prettier-config",
+  "eslintConfig": {
+    "extends": [
+      "@kinvolk",
+      "prettier",
+      "plugin:jsx-a11y/recommended"
+    ]
   },
   "devDependencies": {
-    "@kinvolk/headlamp-plugin": "^0.3.0"
+    "@kinvolk/headlamp-plugin": "^0.4.1"
   }
 }

plugins/examples/pod-counter/src/index.tsx

-import { Plugin } from '@kinvolk/headlamp-plugin/types/plugin/index.d';
-import Registry from '@kinvolk/headlamp-plugin/types/plugin/registry.d';
+import { Headlamp, Plugin, Registry } from '@kinvolk/headlamp-plugin/lib';
+import { Typography } from '@material-ui/core';
 
-const pluginLib = window.pluginLib;
-const React = window.pluginLib.React;
-const K8s = pluginLib.K8s.ResourceClasses;
-const { Typography } = pluginLib.MuiCore;
+// import { SectionBox } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+// import { K8s } from '@kinvolk/headlamp-plugin/lib/K8s';
 
 function PodCounter() {
   const [pods, error] = K8s.Pod.useList();
@@ -15,9 +13,9 @@ function PodCounter() {
   );
 }
 
-class PodCounterPlugin implements Plugin {
-  initialize(register: Registry) {
-    register.registerAppBarAction('monitor', () =>
+class PodCounterPlugin extends Plugin {
+  initialize(registry: Registry) {
+    registry.registerAppBarAction('pod-counter-action', () =>
       <PodCounter />
     );
 
@@ -25,4 +23,4 @@ class PodCounterPlugin implements Plugin {
   }
 }
 
-window.registerPlugin('pod-counter', new PodCounterPlugin());
\ No newline at end of file
+Headlamp.registerPlugin('pod-counter', new PodCounterPlugin());

plugins/examples/pod-counter/tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es2017",
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "paths": {
+      "*": [
+        "node_modules/*.js",
+        "node_modules/*/index.js",
+        "node_modules/@kinvolk/headlamp-plugin/node_modules/*",
+        "node_modules/@kinvolk/headlamp-plugin/node_modules/*/index.js"
+      ],
+      "@iconify/react": [
+        "node_modules/@kinvolk/headlamp-plugin/node_modules/@iconify/react/src/icon.js"
+      ],
+      "@kinvolk/headlamp-plugin/lib/K8s": [
+        "node_modules/@kinvolk/headlamp-plugin/types/src/lib/k8s/index.d.ts"
+      ],
+      "@kinvolk/headlamp-plugin/lib/CommonComponents/*": [
+        "node_modules/@kinvolk/headlamp-plugin/types/src/components/common/*/index.d.ts",
+        "node_modules/@kinvolk/headlamp-plugin/types/src/components/common/*.d.ts"
+      ]
+    },
+    "rootDirs": ["node_modules/@kinvolk/headlamp-plugin/"],
+    "skipLibCheck": true
+  },
+  "include": ["./src/**/*"]
+}