Fix documentation around components examples (#4375)

docs/extensions/capabilities/common-capabilities.md

@@ -207,7 +207,7 @@ export default class ExampleExtension extends Renderer.LensExtension {
   topBarItems = [
     {
       components: {
-        Item: (
+        Item: () => (
           <Icon material="favorite" onClick={() => this.navigate("/example-page" />
         )
       }
@@ -235,7 +235,7 @@ export default class ExampleExtension extends Renderer.LensExtension {
   statusBarItems = [
     {
       components: {
-        Item: (
+        Item: () => (
           <div className="flex align-center gaps hover-highlight" onClick={() => this.navigate("/example-page")} >
             <Icon material="favorite" />
           </div>
@@ -259,7 +259,7 @@ import { CustomWorkloadsOverviewItem } from "./src/custom-workloads-overview-ite
 export default class ExampleExtension extends Renderer.LensExtension {
   kubeWorkloadsOverviewItems = [
     {
-      components : {
+      components: {
         Details: () => <CustomWorkloadsOverviewItem />
       }
     }

docs/extensions/guides/renderer-extension.md

@@ -478,7 +478,7 @@ export default class HelpExtension extends Renderer.LensExtension {
   statusBarItems = [
     {
       components: {
-        Item: (
+        Item: () => (
           <div
             className="flex align-center gaps"
             onClick={() => this.navigate("help")}
@@ -741,7 +741,7 @@ export class PodsDetailsList extends React.Component<Props> {
 
   render() {
     const { pods } = this.props
-    
+
     if (!pods?.length) {
       return null;
     }

docs/extensions/guides/resource-stack.md

@@ -33,8 +33,8 @@ import * as path from "path";
 
 const {
   K8sApi: {
-    ResourceStack, 
+    ResourceStack,
-    forCluster, 
+    forCluster,
     Pod,
   }
 } = Renderer;
@@ -63,7 +63,7 @@ export class ExampleClusterFeature {
     try {
       const podApi = forCluster(this.cluster, Pod);
       const examplePod = await podApi.get({name: "example-pod", namespace: "default"});
-      
+
       if (examplePod?.kind) {
         console.log("found example-pod");
         return true;
@@ -72,7 +72,7 @@ export class ExampleClusterFeature {
       console.log("Error getting example-pod:", e);
     }
     console.log("didn't find example-pod");
-    
+
     return false;
   }
 
@@ -84,11 +84,11 @@ export class ExampleClusterFeature {
 ```
 
 The `ExampleClusterFeature` class constructor takes a `Common.Catalog.KubernetesCluster` argument.
-This is the cluster that the resource stack will be applied to, and the constructor instantiates a `Renderer.K8sApi.ResourceStack` as such. 
+This is the cluster that the resource stack will be applied to, and the constructor instantiates a `Renderer.K8sApi.ResourceStack` as such.
 `ExampleClusterFeature` implements an `install()` method which simply invokes the `kubectlApplyFolder()` method of the `Renderer.K8sApi.ResourceStack` class.
-`kubectlApplyFolder()` applies to the cluster all kubernetes resources found in the folder passed to it, in this case `../resources`. 
+`kubectlApplyFolder()` applies to the cluster all kubernetes resources found in the folder passed to it, in this case `../resources`.
 Similarly, `ExampleClusterFeature` implements an `uninstall()` method which simply invokes the `kubectlDeleteFolder()` method of the `Renderer.K8sApi.ResourceStack` class.
-`kubectlDeleteFolder()` tries to delete from the cluster all kubernetes resources found in the folder passed to it, again in this case `../resources`. 
+`kubectlDeleteFolder()` tries to delete from the cluster all kubernetes resources found in the folder passed to it, again in this case `../resources`.
 
 `ExampleClusterFeature` also implements an `isInstalled()` method, which demonstrates how you can utilize the kubernetes api to inspect the resource stack status.
 `isInstalled()` simply tries to find a pod named `example-pod`, as a way to determine if the pod is already installed.
@@ -102,17 +102,17 @@ To allow the end-user to control the life cycle of this cluster feature the foll
  import { observer } from "mobx-react";
  import { computed, observable, makeObservable } from "mobx";
  import { ExampleClusterFeature } from "./example-cluster-feature";
- 
+
  const {
    Component: {
      SubTitle, Button,
    }
  } = Renderer;
- 
+
  interface Props {
    cluster: Common.Catalog.KubernetesCluster;
  }
- 
+
  @observer
  export class ExampleClusterFeatureSettings extends React.Component<Props> {
   constructor(props: Props) {
@@ -130,14 +130,14 @@ To allow the end-user to control the life cycle of this cluster feature the foll
 
     await this.updateFeatureState();
   }
- 
+
   async updateFeatureState() {
     this.installed = await this.feature.isInstalled();
   }
- 
+
    async save() {
     this.inProgress = true;
- 
+
     try {
       if (this.installed) {
         await this.feature.uninstall();
@@ -150,18 +150,18 @@ To allow the end-user to control the life cycle of this cluster feature the foll
       await this.updateFeatureState();
     }
   }
- 
+
   @computed get buttonLabel() {
     if (this.inProgress && this.installed) return "Uninstalling ...";
     if (this.inProgress) return "Applying ...";
-    
+
     if (this.installed) {
       return "Uninstall";
     }
 
     return "Apply";
   }
- 
+
   render() {
     return (
       <>
@@ -208,11 +208,9 @@ export default class ExampleExtension extends Renderer.LensExtension {
       title: "Example Cluster Feature",
       priority: 5,
       components: {
-        View: ({ entity = null }: { entity: Common.Catalog.KubernetesCluster}) => {
+        View: ({ entity = null }: { entity: Common.Catalog.KubernetesCluster}) => (
-          return (
+           <ExampleClusterFeatureSettings cluster={entity} />
-            <ExampleClusterFeatureSettings cluster={entity} />
+        )
-          );
-        }
       }
     }
   ];
@@ -235,4 +233,4 @@ The final result looks like this:
 `ExampleClusterFeature` and `ExampleClusterFeatureSettings` demonstrate a cluster feature for a simple resource stack.
 In practice a resource stack can include many resources, and require more sophisticated life cycle management (upgrades, partial installations, etc.)
 Using `Renderer.K8sApi.ResourceStack` and `entitySettings` it is possible to implement solutions for more complex cluster features.
-The **Lens Metrics** setting (on the cluster **Settings** page) is a good example of an advanced solution.
+The **Lens Metrics** setting (on the cluster **Settings** page) is a good example of an advanced solution.