adding more page params examples

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

extensions/example-extension/page.tsx

@@ -63,3 +63,77 @@ export class ExamplePage extends React.Component<ExamplePageProps> {
     );
   }
 }
+
+@observer
+export class SimplePage extends React.Component<{ extension: LensRendererExtension }> {
+  render() {
+
+    return (
+      <div className="flex column gaps align-flex-start" style={{ padding: 24 }}>
+        <div style={{ width: 200 }}>
+          <CoffeeDoodle accent="#3d90ce"/>
+        </div>
+
+        <div>Hello from Example extension!</div>
+        <div>Location: <i>{location.href}</i></div>
+      </div>
+    );
+  }
+}
+
+export interface SimpleParamsPageProps extends Interface.PageComponentProps<SimpleParamsPageParams> {
+  extension: LensRendererExtension; // provided in "./renderer.tsx"
+}
+
+export interface SimpleParamsPageParams {
+  exampleId: string;
+  namespace: string;
+}
+
+@observer
+export class SimpleParamsPage extends React.Component<SimpleParamsPageProps> {
+  async componentDidMount() {
+    await namespaceStore.loadAll();
+  }
+
+  deactivate = () => {
+    const { extension } = this.props;
+
+    extension.disable();
+  };
+
+  renderNamespace() {
+    const { namespace } = this.props.params;
+    const name = namespace.get();
+
+    return (
+      <div className="flex gaps inline">
+        <Component.Badge key={name} label={name} />;
+      </div>
+    );
+  }
+
+  render() {
+    const { exampleId } = this.props.params;
+
+    return (
+      <div className="flex column gaps align-flex-start" style={{ padding: 24 }}>
+        <div style={{ width: 200 }}>
+          <CoffeeDoodle accent="#3d90ce"/>
+        </div>
+
+        <div>Hello from Example extension!</div>
+        <div>Location: <i>{location.href}</i></div>
+        <div>Namespaces: {this.renderNamespace()}</div>
+
+        <p className="url-params-demo flex column gaps">
+          <a onClick={() => exampleId.set("secret")}>Show secret button</a>
+          {exampleId.get() === "secret" && (
+            <Component.Button accent label="Deactivate" onClick={this.deactivate}/>
+          )}
+        </p>
+      </div>
+    );
+  }
+}
+

extensions/example-extension/renderer.tsx

@@ -1,11 +1,36 @@
 import { Component, Interface, K8sApi, LensRendererExtension } from "@k8slens/extensions";
-import { ExamplePage, ExamplePageParams, namespaceStore } from "./page";
+import { 
+  ExamplePage, ExamplePageParams, namespaceStore,
+  SimplePage, SimpleParamsPage, SimpleParamsPageParams
+} from "./page";
 import React from "react";
 import path from "path";
 
 export default class ExampleExtension extends LensRendererExtension {
   clusterPages: Interface.PageRegistration[] = [
     {
+      id: "simple-page",
+      components: {
+        Page: () => {
+          return <SimplePage extension={this}/>;
+        },
+      },
+    },
+    {
+      id: "page-with-simple-params",
+      components: {
+        Page: (props: Interface.PageComponentProps<SimpleParamsPageParams>) => {
+          return <SimpleParamsPage {...props} extension={this}/>;
+        },
+      },
+      params: {
+        // setup basic param "exampleId" with default value "demo"
+        exampleId: "demo",
+        namespace: "default"
+      }
+    },
+    {
+      id: "page-with-complicated-params",
       components: {
         Page: (props: Interface.PageComponentProps<ExamplePageParams>) => {
           return <ExamplePage {...props} extension={this}/>;
@@ -32,11 +57,46 @@ export default class ExampleExtension extends LensRendererExtension {
 
   clusterPageMenus: Interface.ClusterPageMenuRegistration[] = [
     {
+      id: "top-example-menu",
       title: "Example extension",
       components: {
         Icon: ExampleIcon,
       },
     },
+    {
+      parentId: "top-example-menu",
+      title: "Simple Page",
+      target: {
+        pageId: "simple-page"
+      },
+      components: {
+        Icon: ExampleIcon,
+      },
+    },
+    {
+      parentId: "top-example-menu",
+      title: "Simple Params",
+      target: {
+        pageId: "page-with-simple-parms",
+        params: {
+          exampleId: "no-secret",
+          namespace: "test"
+        }
+      },
+      components: {
+        Icon: ExampleIcon,
+      },
+    },
+    {
+      parentId: "top-example-menu",
+      title: "Complicated Params",
+      target: {
+        pageId: "page-with-complicated-params"
+      },
+      components: {
+        Icon: ExampleIcon,
+      },
+    },
   ];
 }
 

package.json

@@ -191,7 +191,8 @@
       "node-menu",
       "metrics-cluster-feature",
       "license-menu-item",
-      "kube-object-event-status"
+      "kube-object-event-status",
+      "example-extension"
     ]
   },
   "dependencies": {