docs plugins: Improve app-menu README, docs and description

docs/development/plugins/functionality.md

@@ -74,6 +74,16 @@ Change the logo (at the top left) with
 - Example plugin shows [How To Change The Logo](https://github.com/kinvolk/headlamp/tree/main/plugins/examples/change-logo)
 - API reference for [registerAppLogo](../api/modules/plugin_registry.md#registerapplogo)
 
+### App Menus
+
+Add menus when Headlamp is running as an app.
+[Headlamp.setAppMenu](../api/classes/plugin_lib.Headlamp/#setAppMenu)
+
+![screenshot of the logo being changed](./images/app-menus.png)
+
+- Example plugin shows [How To Add App Menus](https://github.com/kinvolk/headlamp/tree/main/plugins/examples/app-menus)
+- API reference for [Headlamp.setAppMenu](../api/classes/plugin_lib.Headlamp/#setAppMenu)
+
 ### Cluster Chooser
 
 Change the Cluster Chooser button (in the middle top of the Headlamp app bar) with

plugins/examples/app-menus/README.md

@@ -1,17 +1,20 @@
-# cra-template-headlamp
+# Example Plugin: App Menus
 
-This is the official TypeScript template for [Headlamp Plugins](https://github.com/kinvolk/headlamp).
+Add menus when Headlamp is running as an app.
 
-To use this template to start a new plugin with the npx command (comes with Node.js):
+![screenshot of the custom details view section and action button](../../../docs/development/plugins/images/app-menus.png)
 
-```sh
-npx create-react-app headlamp-myfancy --template headlamp
+To run the plugin:
+
+```bash
+cd plugins/examples/app-menus
+npm install
+npm start
+# See the menu in the app.
 ```
 
-For more information, please refer to:
+The main code for the example plugin is in [src/index.tsx](src/index.tsx).
+
+See the API documentation for:
 
-- [Create React App Custom Templates](https://create-react-app.dev/docs/custom-templates/)
-- [Getting Started](https://kinvolk.io/docs/headlamp/latest/development/plugins/), How to create a new Headlamp plugin.
-- [API Reference](https://kinvolk.io/docs/headlamp/latest/development/api/), API documentation for what you can do
-- [UI Component Storybook](https://kinvolk.io/docs/headlamp/latest/development/storybook/), pre-existing components you can use when creating your plugin.
-- [Plugin Examples](https://kinvolk.io/docs/headlamp/latest/development/plugins/examples/), Example plugins you can look at to see how it's done.
+- [Headlamp.setAppMenu](https://kinvolk.github.io/headlamp/docs/latest/development/api/classes/plugin_lib.Headlamp/#setAppMenu)

plugins/examples/app-menus/package.json

@@ -1,7 +1,7 @@
 {
   "name": "app-menus",
   "version": "0.0.1",
-  "description": "Your Headlamp plugin",
+  "description": "Add menus when Headlamp is running as an app",
   "scripts": {
     "start": "headlamp-plugin start",
     "build": "headlamp-plugin build",
@@ -14,6 +14,8 @@
     "headlamp",
     "headlamp-plugin",
     "kubernetes",
+    "kubernetes-ui",
+    "kubernetes-debugging",
     "plugins"
   ],
   "prettier": "@kinvolk/eslint-config/prettier-config",
@@ -25,6 +27,6 @@
     ]
   },
   "devDependencies": {
-    "@kinvolk/headlamp-plugin": "^0.4.8"
+    "@kinvolk/headlamp-plugin": "^0.4.9"
   }
 }

plugins/examples/app-menus/src/index.tsx

@@ -1,16 +1,13 @@
 import { Headlamp, Plugin } from '@kinvolk/headlamp-plugin/lib';
-// 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 {
+class AppMenuDemo extends Plugin {
   static warnedOnce = false;
 
   initialize() {
     console.log('app-menus plugin initialized');
 
-    if (!MyPlugin.warnedOnce && !Headlamp.isRunningAsApp()) {
-      MyPlugin.warnedOnce = true;
+    if (!AppMenuDemo.warnedOnce && !Headlamp.isRunningAsApp()) {
+      AppMenuDemo.warnedOnce = true;
       window.alert(
         'app-menus plugin: Headland is running as an app. This plugin will not do anything!'
       );
@@ -44,4 +41,4 @@ class MyPlugin extends Plugin {
   }
 }
 
-Headlamp.registerPlugin('app-menus', new MyPlugin());
+Headlamp.registerPlugin('app-menus', new AppMenuDemo());