headlamp-plugin: Update index.tsx template to use new init style

Fix action type so it works with react elements too. The default
template uses a react element now to keep things simple.

frontend/src/redux/actions/actions.tsx

@@ -1,4 +1,5 @@
 import { OptionsObject as SnackbarProps } from 'notistack';
+import { ReactElement } from 'react';
 import { ClusterChooserType } from '../../components/cluster/ClusterChooser';
 import { DetailsViewSectionType } from '../../components/DetailsViewSection';
 import { SidebarEntryProps } from '../../components/Sidebar';
@@ -75,7 +76,7 @@ export interface Action {
 
 type SidebarType = UIState['sidebar'];
 
-export type HeaderActionType = (...args: any[]) => JSX.Element | null;
+export type HeaderActionType = ((...args: any[]) => JSX.Element | null) | null | ReactElement;
 export type DetailsViewFunc = HeaderActionType;
 
 export function setNamespaceFilter(namespaces: string[]) {

plugins/headlamp-plugin/template/src/index.tsx

@@ -1,23 +1,9 @@
-import { Headlamp, Plugin, Registry } from '@kinvolk/headlamp-plugin/lib';
-import React from 'react';
+import { registerAppBarAction } from '@kinvolk/headlamp-plugin/lib';
 
-// Here are some imports you may want to use.
+// Below are some imports you may want to use.
+//   See README.md for links to plugin development documentation.
 // import { SectionBox } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 // import { K8s } from '@kinvolk/headlamp-plugin/lib/K8s';
 // import { Typography } from '@material-ui/core';
 
-class MyPlugin extends Plugin {
-  initialize(registry: Registry) {
-    console.log('$${name} initialized');
-
-    // Register your plugin methods here, like:
-    // registry.registerSidebarItem(...);
-    // registry.registerRoute(...);
-
-    registry.registerAppBarAction('$${name}-hello', () => <span>Hello</span>);
-
-    return true;
-  }
-}
-
-Headlamp.registerPlugin('$${name}', new MyPlugin());
+registerAppBarAction(<span>Hello</span>);