diff --git a/master/extensions/api/classes/Renderer.Component.DrawerParamToggler/index.html b/master/extensions/api/classes/Renderer.Component.DrawerParamToggler/index.html index 9cf42481f6..0f03e30cd0 100644 --- a/master/extensions/api/classes/Renderer.Component.DrawerParamToggler/index.html +++ b/master/extensions/api/classes/Renderer.Component.DrawerParamToggler/index.html @@ -1049,11 +1049,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1083,16 +1083,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.Input/index.html b/master/extensions/api/classes/Renderer.Component.Input/index.html index 8c9763bf2d..083c010eaa 100644 --- a/master/extensions/api/classes/Renderer.Component.Input/index.html +++ b/master/extensions/api/classes/Renderer.Component.Input/index.html @@ -1199,11 +1199,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1242,16 +1242,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.PageLayout/index.html b/master/extensions/api/classes/Renderer.Component.PageLayout/index.html index f906f10231..3bcaf8d61f 100644 --- a/master/extensions/api/classes/Renderer.Component.PageLayout/index.html +++ b/master/extensions/api/classes/Renderer.Component.PageLayout/index.html @@ -1059,11 +1059,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1093,16 +1093,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.PodDetailsList/index.html b/master/extensions/api/classes/Renderer.Component.PodDetailsList/index.html index bfe8cbf4d1..ba68b3978d 100644 --- a/master/extensions/api/classes/Renderer.Component.PodDetailsList/index.html +++ b/master/extensions/api/classes/Renderer.Component.PodDetailsList/index.html @@ -1040,11 +1040,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1074,16 +1074,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.SettingLayout/index.html b/master/extensions/api/classes/Renderer.Component.SettingLayout/index.html index 1d1db96aa7..6dcd945bf5 100644 --- a/master/extensions/api/classes/Renderer.Component.SettingLayout/index.html +++ b/master/extensions/api/classes/Renderer.Component.SettingLayout/index.html @@ -1059,11 +1059,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1093,16 +1093,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.Slider/index.html b/master/extensions/api/classes/Renderer.Component.Slider/index.html index dac4dfed8d..29e2111c5c 100644 --- a/master/extensions/api/classes/Renderer.Component.Slider/index.html +++ b/master/extensions/api/classes/Renderer.Component.Slider/index.html @@ -1049,11 +1049,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1083,16 +1083,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.Spinner/index.html b/master/extensions/api/classes/Renderer.Component.Spinner/index.html index f7710a69da..eb3019ce9f 100644 --- a/master/extensions/api/classes/Renderer.Component.Spinner/index.html +++ b/master/extensions/api/classes/Renderer.Component.Spinner/index.html @@ -1049,11 +1049,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1083,16 +1083,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.Stepper/index.html b/master/extensions/api/classes/Renderer.Component.Stepper/index.html index 26cb3d28b6..1c0eda2976 100644 --- a/master/extensions/api/classes/Renderer.Component.Stepper/index.html +++ b/master/extensions/api/classes/Renderer.Component.Stepper/index.html @@ -1041,11 +1041,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1075,16 +1075,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.SubTitle/index.html b/master/extensions/api/classes/Renderer.Component.SubTitle/index.html index f01b36f0e6..598c000d56 100644 --- a/master/extensions/api/classes/Renderer.Component.SubTitle/index.html +++ b/master/extensions/api/classes/Renderer.Component.SubTitle/index.html @@ -1041,11 +1041,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1075,16 +1075,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.TableCell/index.html b/master/extensions/api/classes/Renderer.Component.TableCell/index.html index c75803398a..debd2c329f 100644 --- a/master/extensions/api/classes/Renderer.Component.TableCell/index.html +++ b/master/extensions/api/classes/Renderer.Component.TableCell/index.html @@ -1040,11 +1040,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1074,16 +1074,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.TableHead/index.html b/master/extensions/api/classes/Renderer.Component.TableHead/index.html index 5b4965234b..5e80a4d81d 100644 --- a/master/extensions/api/classes/Renderer.Component.TableHead/index.html +++ b/master/extensions/api/classes/Renderer.Component.TableHead/index.html @@ -1049,11 +1049,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1083,16 +1083,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.TableRow/index.html b/master/extensions/api/classes/Renderer.Component.TableRow/index.html index 65363ff641..b84448f42c 100644 --- a/master/extensions/api/classes/Renderer.Component.TableRow/index.html +++ b/master/extensions/api/classes/Renderer.Component.TableRow/index.html @@ -1087,11 +1087,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1121,16 +1121,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.Tabs/index.html b/master/extensions/api/classes/Renderer.Component.Tabs/index.html index b93386651f..aca9d86957 100644 --- a/master/extensions/api/classes/Renderer.Component.Tabs/index.html +++ b/master/extensions/api/classes/Renderer.Component.Tabs/index.html @@ -1095,11 +1095,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1132,16 +1132,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.Tooltip/index.html b/master/extensions/api/classes/Renderer.Component.Tooltip/index.html index 605aacd4c4..f4da08b790 100644 --- a/master/extensions/api/classes/Renderer.Component.Tooltip/index.html +++ b/master/extensions/api/classes/Renderer.Component.Tooltip/index.html @@ -1138,11 +1138,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1181,16 +1181,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.Wizard/index.html b/master/extensions/api/classes/Renderer.Component.Wizard/index.html index e3d14bc17a..a61f2a5b8d 100644 --- a/master/extensions/api/classes/Renderer.Component.Wizard/index.html +++ b/master/extensions/api/classes/Renderer.Component.Wizard/index.html @@ -1182,11 +1182,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1216,16 +1216,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.WizardLayout/index.html b/master/extensions/api/classes/Renderer.Component.WizardLayout/index.html index ee819e5a0e..e51e13dbd8 100644 --- a/master/extensions/api/classes/Renderer.Component.WizardLayout/index.html +++ b/master/extensions/api/classes/Renderer.Component.WizardLayout/index.html @@ -1041,11 +1041,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1075,16 +1075,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/api/classes/Renderer.Component.WizardStep/index.html b/master/extensions/api/classes/Renderer.Component.WizardStep/index.html index 6d71cdf7e1..5ec8d6c3e7 100644 --- a/master/extensions/api/classes/Renderer.Component.WizardStep/index.html +++ b/master/extensions/api/classes/Renderer.Component.WizardStep/index.html @@ -1135,11 +1135,11 @@

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

-
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
+
static contextType = MyContext
+// For TS pre-3.7:
+context!: React.ContextType<typeof MyContext>
+// For TS 3.7 and above:
+declare context: React.ContextType<typeof MyContext>
 

See

https://reactjs.org/docs/context.html

@@ -1172,16 +1172,16 @@ Should be used with type annotation or static contextType.

Static Optional contextType: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

-
type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
+
type MyContext = number
+const Ctx = React.createContext<MyContext>(0)
 
-class Foo extends React.Component {
-  static contextType = Ctx
-  context!: React.ContextType<typeof Ctx>
-  render () {
-    return <>My context's value: {this.context}</>;
-  }
-}
+class Foo extends React.Component {
+  static contextType = Ctx
+  context!: React.ContextType<typeof Ctx>
+  render () {
+    return <>My context's value: {this.context}</>;
+  }
+}
 

See

https://reactjs.org/docs/context.html#classcontexttype

diff --git a/master/extensions/capabilities/common-capabilities/index.html b/master/extensions/capabilities/common-capabilities/index.html index 704a3123a0..8ebb4e6f09 100644 --- a/master/extensions/capabilities/common-capabilities/index.html +++ b/master/extensions/capabilities/common-capabilities/index.html @@ -1003,270 +1003,270 @@ It adds app menu items to the Lens UI. In order to see logs from this extension, you need to start Lens from the command line.

Activate#

This extension can register a custom callback that is executed when an extension is activated (started).

-
import { Main } from "@k8slens/extensions"
+
import { Main } from "@k8slens/extensions"
 
-export default class ExampleMainExtension extends Main.LensExtension {
-  async onActivate() {
-    console.log("hello world")
-  }
-}
+export default class ExampleMainExtension extends Main.LensExtension {
+  async onActivate() {
+    console.log("hello world")
+  }
+}
 

Deactivate#

This extension can register a custom callback that is executed when an extension is deactivated (stopped).

-
import { Main } from "@k8slens/extensions"
+
import { Main } from "@k8slens/extensions"
 
-export default class ExampleMainExtension extends Main.LensExtension {
-  async onDeactivate() {
-    console.log("bye bye")
-  }
-}
+export default class ExampleMainExtension extends Main.LensExtension {
+  async onDeactivate() {
+    console.log("bye bye")
+  }
+}
 

This extension can register custom app and tray menus that will be displayed on OS native menus.

Example:

-
import { Main } from "@k8slens/extensions"
+
import { Main } from "@k8slens/extensions"
 
-export default class ExampleMainExtension extends Main.LensExtension {
-  appMenus = [
-    {
-      parentId: "help",
-      label: "Example item",
-      click() {
-        Main.Navigation.navigate("https://k8slens.dev");
-      }
-    }
-  ]
+export default class ExampleMainExtension extends Main.LensExtension {
+  appMenus = [
+    {
+      parentId: "help",
+      label: "Example item",
+      click() {
+        Main.Navigation.navigate("https://k8slens.dev");
+      }
+    }
+  ]
 
-  trayMenus = [
-    {
-      label: "My links",
-      submenu: [
-        {
-          label: "Lens",
-          click() {
-            Main.Navigation.navigate("https://k8slens.dev");
-          }
-        },
-        {
-          type: "separator"
-        },
-        {
-          label: "Lens Github",
-          click() {
-            Main.Navigation.navigate("https://github.com/lensapp/lens");
-          }
-        }
-      ]
-    }
-  ]
-}
+  trayMenus = [
+    {
+      label: "My links",
+      submenu: [
+        {
+          label: "Lens",
+          click() {
+            Main.Navigation.navigate("https://k8slens.dev");
+          }
+        },
+        {
+          type: "separator"
+        },
+        {
+          label: "Lens Github",
+          click() {
+            Main.Navigation.navigate("https://github.com/lensapp/lens");
+          }
+        }
+      ]
+    }
+  ]
+}
 

Renderer Extension#

The renderer extension runs in a browser context, and is visible in Lens's main window. In order to see logs from this extension you need to check them via View > Toggle Developer Tools > Console.

Activate#

This extension can register a custom callback that is executed when an extension is activated (started).

-
import { Renderer } from "@k8slens/extensions"
+
import { Renderer } from "@k8slens/extensions"
 
-export default class ExampleExtension extends Renderer.LensExtension {
-  async onActivate() {
-    console.log("hello world")
-  }
-}
+export default class ExampleExtension extends Renderer.LensExtension {
+  async onActivate() {
+    console.log("hello world")
+  }
+}
 

Deactivate#

This extension can register a custom callback that is executed when an extension is deactivated (stopped).

-
import { Renderer } from "@k8slens/extensions"
+
import { Renderer } from "@k8slens/extensions"
 
-export default class ExampleMainExtension extends Renderer.LensExtension {
-  async onDeactivate() {
-    console.log("bye bye")
-  }
-}
+export default class ExampleMainExtension extends Renderer.LensExtension {
+  async onDeactivate() {
+    console.log("bye bye")
+  }
+}
 

Global Pages#

This extension can register custom global pages (views) to Lens's main window. The global page is a full-screen page that hides all other content from a window.

-
import React from "react"
-import { Renderer } from "@k8slens/extensions"
-import { ExamplePage } from "./src/example-page"
+
import React from "react"
+import { Renderer } from "@k8slens/extensions"
+import { ExamplePage } from "./src/example-page"
 
-const {
-  Component: {
-    Icon,
-  }
-} = Renderer;
+const {
+  Component: {
+    Icon,
+  }
+} = Renderer;
 
-export default class ExampleRendererExtension extends Renderer.LensExtension {
-  globalPages = [
-    {
-      id: "example",
-      components: {
-        Page: ExamplePage,
-      }
-    }
-  ]
+export default class ExampleRendererExtension extends Renderer.LensExtension {
+  globalPages = [
+    {
+      id: "example",
+      components: {
+        Page: ExamplePage,
+      }
+    }
+  ]
 
-  globalPageMenus = [
-    {
-      title: "Example page", // used in icon's tooltip
-      target: { pageId: "example" }
-      components: {
-        Icon: () => <Icon material="arrow"/>,
-      }
-    }
-  ]
-}
+  globalPageMenus = [
+    {
+      title: "Example page", // used in icon's tooltip
+      target: { pageId: "example" }
+      components: {
+        Icon: () => <Icon material="arrow"/>,
+      }
+    }
+  ]
+}
 

App Preferences#

This extension can register custom app preferences. It is responsible for storing a state for custom preferences.

-
import React from "react"
-import { Renderer } from "@k8slens/extensions"
-import { myCustomPreferencesStore } from "./src/my-custom-preferences-store"
-import { MyCustomPreferenceHint, MyCustomPreferenceInput } from "./src/my-custom-preference"
+
import React from "react"
+import { Renderer } from "@k8slens/extensions"
+import { myCustomPreferencesStore } from "./src/my-custom-preferences-store"
+import { MyCustomPreferenceHint, MyCustomPreferenceInput } from "./src/my-custom-preference"
 
 
-export default class ExampleRendererExtension extends Renderer.LensExtension {
-  appPreferences = [
-    {
-      title: "My Custom Preference",
-      components: {
-        Hint: () => <MyCustomPreferenceHint/>,
-        Input: () => <MyCustomPreferenceInput store={myCustomPreferencesStore}/>
-      }
-    }
-  ]
-}
+export default class ExampleRendererExtension extends Renderer.LensExtension {
+  appPreferences = [
+    {
+      title: "My Custom Preference",
+      components: {
+        Hint: () => <MyCustomPreferenceHint/>,
+        Input: () => <MyCustomPreferenceInput store={myCustomPreferencesStore}/>
+      }
+    }
+  ]
+}
 

Cluster Pages#

This extension can register custom cluster pages. These pages are visible in a cluster menu when a cluster is opened.

-
import React from "react"
-import { Renderer } from "@k8slens/extensions";
-import { ExampleIcon, ExamplePage } from "./src/page"
+
import React from "react"
+import { Renderer } from "@k8slens/extensions";
+import { ExampleIcon, ExamplePage } from "./src/page"
 
-export default class ExampleExtension extends Renderer.LensExtension {
-  clusterPages = [
-    {
-      id: "extension-example", // optional
-      exact: true, // optional
-      components: {
-        Page: () => <ExamplePage extension={this}/>,
-      }
-    }
-  ]
+export default class ExampleExtension extends Renderer.LensExtension {
+  clusterPages = [
+    {
+      id: "extension-example", // optional
+      exact: true, // optional
+      components: {
+        Page: () => <ExamplePage extension={this}/>,
+      }
+    }
+  ]
 
-  clusterPageMenus = [
-    {
-      url: "/extension-example", // optional
-      title: "Example Extension",
-      components: {
-        Icon: ExampleIcon,
-      }
-    }
-  ]
-}
+  clusterPageMenus = [
+    {
+      url: "/extension-example", // optional
+      title: "Example Extension",
+      components: {
+        Icon: ExampleIcon,
+      }
+    }
+  ]
+}
 

Top Bar Items#

This extension can register custom components to a top bar area.

-
import React from "react";
-import { Renderer } from "@k8slens/extensions";
+
import React from "react";
+import { Renderer } from "@k8slens/extensions";
 
-const {
-  Component: {
-    Icon,
-  }
-} = Renderer;
+const {
+  Component: {
+    Icon,
+  }
+} = Renderer;
 
-export default class ExampleExtension extends Renderer.LensExtension {
-  topBarItems = [
-    {
-      components: {
-        Item: () => (
-          <Icon material="favorite" onClick={() => this.navigate("/example-page" />
-        )
-      }
-    }
-  ]
-}
+export default class ExampleExtension extends Renderer.LensExtension {
+  topBarItems = [
+    {
+      components: {
+        Item: () => (
+          <Icon material="favorite" onClick={() => this.navigate("/example-page" />
+        )
+      }
+    }
+  ]
+}
 

Status Bar Items#

This extension can register custom icons and text to a status bar area.

-
import React from "react";
-import { Renderer } from "@k8slens/extensions";
+
import React from "react";
+import { Renderer } from "@k8slens/extensions";
 
-const {
-  Component: {
-    Icon,
-  }
-} = Renderer;
+const {
+  Component: {
+    Icon,
+  }
+} = Renderer;
 
-export default class ExampleExtension extends Renderer.LensExtension {
-  statusBarItems = [
-    {
-      components: {
-        Item: () => (
-          <div className="flex align-center gaps hover-highlight" onClick={() => this.navigate("/example-page")} >
-            <Icon material="favorite" />
-          </div>
-        )
-      }
-    }
-  ]
-}
+export default class ExampleExtension extends Renderer.LensExtension {
+  statusBarItems = [
+    {
+      components: {
+        Item: () => (
+          <div className="flex align-center gaps hover-highlight" onClick={() => this.navigate("/example-page")} >
+            <Icon material="favorite" />
+          </div>
+        )
+      }
+    }
+  ]
+}
 

Kubernetes Workloads Overview Items#

This extension can register custom workloads overview items.

-
import React from "react"
-import { Renderer } from "@k8slens/extensions";
-import { CustomWorkloadsOverviewItem } from "./src/custom-workloads-overview-item"
+
import React from "react"
+import { Renderer } from "@k8slens/extensions";
+import { CustomWorkloadsOverviewItem } from "./src/custom-workloads-overview-item"
 
-export default class ExampleExtension extends Renderer.LensExtension {
-  kubeWorkloadsOverviewItems = [
-    {
-      components: {
-        Details: () => <CustomWorkloadsOverviewItem />
-      }
-    }
-  ]
-}
+export default class ExampleExtension extends Renderer.LensExtension {
+  kubeWorkloadsOverviewItems = [
+    {
+      components: {
+        Details: () => <CustomWorkloadsOverviewItem />
+      }
+    }
+  ]
+}
 

Kubernetes Object Menu Items#

This extension can register custom menu items (actions) for specified Kubernetes kinds/apiVersions.

-
import React from "react"
-import { Renderer } from "@k8slens/extensions";
-import { CustomMenuItem, CustomMenuItemProps } from "./src/custom-menu-item"
+
import React from "react"
+import { Renderer } from "@k8slens/extensions";
+import { CustomMenuItem, CustomMenuItemProps } from "./src/custom-menu-item"
 
-export default class ExampleExtension extends Renderer.LensExtension {
-  kubeObjectMenuItems = [
-    {
-      kind: "Node",
-      apiVersions: ["v1"],
-      components: {
-        MenuItem: (props: CustomMenuItemProps) => <CustomMenuItem {...props} />
-      }
-    }
-  ]
-}
+export default class ExampleExtension extends Renderer.LensExtension {
+  kubeObjectMenuItems = [
+    {
+      kind: "Node",
+      apiVersions: ["v1"],
+      components: {
+        MenuItem: (props: CustomMenuItemProps) => <CustomMenuItem {...props} />
+      }
+    }
+  ]
+}
 

Kubernetes Object Details#

This extension can register custom details (content) for specified Kubernetes kinds/apiVersions.

-
import React from "react"
-import { Renderer } from "@k8slens/extensions";
-import { CustomKindDetails, CustomKindDetailsProps } from "./src/custom-kind-details"
+
import React from "react"
+import { Renderer } from "@k8slens/extensions";
+import { CustomKindDetails, CustomKindDetailsProps } from "./src/custom-kind-details"
 
-export default class ExampleExtension extends Renderer.LensExtension {
-  kubeObjectDetailItems = [
-    {
-      kind: "CustomKind",
-      apiVersions: ["custom.acme.org/v1"],
-      components: {
-        Details: (props: CustomKindDetailsProps) => <CustomKindDetails {...props} />
-      }
-    }
-  ]
-}
+export default class ExampleExtension extends Renderer.LensExtension {
+  kubeObjectDetailItems = [
+    {
+      kind: "CustomKind",
+      apiVersions: ["custom.acme.org/v1"],
+      components: {
+        Details: (props: CustomKindDetailsProps) => <CustomKindDetails {...props} />
+      }
+    }
+  ]
+}
 
diff --git a/master/extensions/capabilities/styling/index.html b/master/extensions/capabilities/styling/index.html index ec78e8864e..98c7ba4be4 100644 --- a/master/extensions/capabilities/styling/index.html +++ b/master/extensions/capabilities/styling/index.html @@ -903,27 +903,27 @@ For example, consider the following HTML and its associated CSS properties:

<div className="flex column align-center"></div>
 
-
div {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
+
div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 

However, you are free to use any styling technique or framework you like, including Emotion or even plain CSS.

Layout Variables#

There is a set of CSS variables available for for basic layout needs. They are located inside :root and are defined in app.scss:

-
--unit: 8px;
---padding: var(--unit);
---margin: var(--unit);
---border-radius: 3px;
+
--unit: 8px;
+--padding: var(--unit);
+--margin: var(--unit);
+--border-radius: 3px;
 

These variables are intended to set consistent margins and paddings across components. For example:

-
.status {
-  padding-left: calc(var(--padding) * 2);
-  border-radius: var(--border-radius);
-}
+
.status {
+  padding-left: calc(var(--padding) * 2);
+  border-radius: var(--border-radius);
+}
 

Themes#

Lens uses two built-in themes defined in the themes directory – one light and one dark.

@@ -935,14 +935,14 @@ This list then gets injected into the :root element so that any of

If you want to preserve Lens's native look and feel, with respect to the lightness or darkness of your extension, you can use the provided variables and built-in Lens components such as Button, Select, Table, and so on.

There is a set of CSS variables available for extensions to use for theming. They are all located inside :root and are defined in app.scss:

-
--font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif;
---font-monospace: Lucida Console, Monaco, Consolas, monospace;
---font-size-small: calc(1.5 * var(--unit));
---font-size: calc(1.75 * var(--unit));
---font-size-big: calc(2 * var(--unit));
---font-weight-thin: 300;
---font-weight-normal: 400;
---font-weight-bold: 500;
+
--font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+--font-monospace: Lucida Console, Monaco, Consolas, monospace;
+--font-size-small: calc(1.5 * var(--unit));
+--font-size: calc(1.75 * var(--unit));
+--font-size-big: calc(2 * var(--unit));
+--font-weight-thin: 300;
+--font-weight-normal: 400;
+--font-weight-bold: 500;
 

as well as in the theme modules:

--blue: #3d90ce;
@@ -965,30 +965,30 @@ They are all located inside :root and are defined in 
.status {
-  font-size: var(--font-size-small);
-  background-color: var(--colorSuccess);
-}
+
.status {
+  font-size: var(--font-size-small);
+  background-color: var(--colorSuccess);
+}
 

Theme Switching#

When the light theme is active, the <body> element gets a "theme-light" class, or: <body class="theme-light">. If the class isn't there, the theme defaults to dark. The active theme can be changed in the Preferences page: Color Theme

There is a way of detect active theme and its changes in JS. MobX observer function/decorator can be used for this purpose.

-
import React from "react"
-import { observer } from "mobx-react"
-import { Renderer } from "@k8slens/extensions";
+
import React from "react"
+import { observer } from "mobx-react"
+import { Renderer } from "@k8slens/extensions";
 
-@observer
-export class SupportPage extends React.Component {
-  render() {
-    return (
-      <div className="SupportPage">
-        <h1>Active theme is {Renderer.Theme.getActiveTheme().name}</h1>
-      </div>
-    );
-  }
-}
+@observer
+export class SupportPage extends React.Component {
+  render() {
+    return (
+      <div className="SupportPage">
+        <h1>Active theme is {Renderer.Theme.getActiveTheme().name}</h1>
+      </div>
+    );
+  }
+}
 

Theme entity from @k8slens/extensions provides active theme object and @observer decorator makes component reactive - so it will rerender each time any of the observables (active theme in our case) will be changed.

Working example provided in Styling with Emotion sample extension.

@@ -1004,9 +1004,9 @@ If the class isn't there, the theme defaults to dark. The active theme can be ch

Extensions may overwrite these defaults if needed. They have low CSS specificity, so overriding them should be fairly easy.

CSS-in-JS#

If an extension uses a system like Emotion to work with styles, it can use CSS variables as follows:

-
const Container = styled.div(() => ({
-  backgroundColor: 'var(--mainBackground)'
-}));
+
const Container = styled.div(() => ({
+  backgroundColor: 'var(--mainBackground)'
+}));
 

Examples#

You can explore samples for each styling technique that you can use for extensions:

diff --git a/master/extensions/get-started/anatomy/index.html b/master/extensions/get-started/anatomy/index.html index 6461c77d9b..178fe1ba89 100644 --- a/master/extensions/get-started/anatomy/index.html +++ b/master/extensions/get-started/anatomy/index.html @@ -868,36 +868,36 @@ Some of the most-important fields include:

We only support the ^ range, which is also optional to specify, and only major and minor version numbers. Meaning that ^5.4 and 5.4 both mean the same thing, and the patch version in 5.4.2 is ignored. -
{
-  "name": "helloworld-sample",
-  "publisher": "lens-samples",
-  "version": "0.0.1",
-  "description": "Lens helloworld-sample",
-  "license": "MIT",
-  "homepage": "https://github.com/lensapp/lens-extension-samples",
-  "engines": {
-    "node": "^16.14.2",
-    "lens": "5.4"
-  },
-  "main": "dist/main.js",
-  "renderer": "dist/renderer.js",
-  "scripts": {
-    "build": "webpack --config webpack.config.js",
-    "dev": "npm run build --watch"
-  },
-  "dependencies": {
-    "react-open-doodles": "^1.0.5"
-  },
-  "devDependencies": {
-    "@k8slens/extensions": "^5.4.6",
-    "ts-loader": "^8.0.4",
-    "typescript": "^4.5.5",
-    "@types/react": "^17.0.44",
-    "@types/node": "^16.14.2",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.11"
-  }
-}
+
{
+  "name": "helloworld-sample",
+  "publisher": "lens-samples",
+  "version": "0.0.1",
+  "description": "Lens helloworld-sample",
+  "license": "MIT",
+  "homepage": "https://github.com/lensapp/lens-extension-samples",
+  "engines": {
+    "node": "^16.14.2",
+    "lens": "5.4"
+  },
+  "main": "dist/main.js",
+  "renderer": "dist/renderer.js",
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "dev": "npm run build --watch"
+  },
+  "dependencies": {
+    "react-open-doodles": "^1.0.5"
+  },
+  "devDependencies": {
+    "@k8slens/extensions": "^5.4.6",
+    "ts-loader": "^8.0.4",
+    "typescript": "^4.5.5",
+    "@types/react": "^17.0.44",
+    "@types/node": "^16.14.2",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.11"
+  }
+}
 

Webpack configuration#

The following webpack externals are provided by Lens and must be used (when available) to make sure that the versions used are in sync.

@@ -958,20 +958,20 @@ Some of the most-important fields include:

What is exported is the whole of the packages as a * import (within typescript).

For example, the following is how you would specify these within your webpack configuration files.

-
{
-  ...
-  "externals": [
-    ...
-    {
-      "mobx": "var global.Mobx"
-      "mobx-react": "var global.MobxReact"
-      "react": "var global.React"
-      "react-router": "var global.ReactRouter"
-      "react-router-dom": "var global.ReactRouterDom"
-      "react-dom": "var global.ReactDOM"
-    }
-  ]
-}
+
{
+  ...
+  "externals": [
+    ...
+    {
+      "mobx": "var global.Mobx"
+      "mobx-react": "var global.MobxReact"
+      "react": "var global.React"
+      "react-router": "var global.ReactRouter"
+      "react-router-dom": "var global.ReactRouterDom"
+      "react-dom": "var global.ReactDOM"
+    }
+  ]
+}
 

Extension Entry Files#

Lens extensions can have two separate entry files. @@ -988,20 +988,20 @@ On the renderer entry point, the Hello World sample extension defin The Cluster Page object registers the /extension-example path, and this path renders the ExamplePage React component. It also registers the MenuItem component that displays the ExampleIcon React component and the "Hello World" text in the left-side menu of the cluster dashboard. These React components are defined in the additional ./src/page.tsx file.

-
import { Renderer } from "@k8slens/extensions";
-import { ExampleIcon, ExamplePage } from "./page";
-import React from "react";
+
import { Renderer } from "@k8slens/extensions";
+import { ExampleIcon, ExamplePage } from "./page";
+import React from "react";
 
-export default class ExampleExtension extends Renderer.LensExtension {
-  clusterPages = [
-    {
-      id: "extension-example",
-      components: {
-        Page: () => <ExamplePage extension={this} />,
-      },
-    },
-  ];
-}
+export default class ExampleExtension extends Renderer.LensExtension {
+  clusterPages = [
+    {
+      id: "extension-example",
+      components: {
+        Page: () => <ExamplePage extension={this} />,
+      },
+    },
+  ];
+}
 

The Hello World sample extension uses the Cluster Page capability, which is just one of the Lens extension API's capabilities. The Common Capabilities page will help you home in on the right capabilities to use with your own extensions.

diff --git a/master/extensions/get-started/your-first-extension/index.html b/master/extensions/get-started/your-first-extension/index.html index 86a74779af..6519291ae3 100644 --- a/master/extensions/get-started/your-first-extension/index.html +++ b/master/extensions/get-started/your-first-extension/index.html @@ -878,41 +878,41 @@

In this topic, you'll learn the basics of building extensions by creating an extension that adds a "Hello World" page to a cluster menu.

Install the Extension#

To install the extension, clone the Lens Extension samples repository to your local machine:

-
git clone https://github.com/lensapp/lens-extension-samples.git
+
git clone https://github.com/lensapp/lens-extension-samples.git
 

Next you need to create a symlink. A symlink connects the directory that Lens will monitor for user-installed extensions to the sample extension. In this case the sample extension is helloworld-sample.

Linux & macOS#

-
mkdir -p ~/.k8slens/extensions
-cd ~/.k8slens/extensions
-ln -s lens-extension-samples/helloworld-sample helloworld-sample
+
mkdir -p ~/.k8slens/extensions
+cd ~/.k8slens/extensions
+ln -s lens-extension-samples/helloworld-sample helloworld-sample
 

Windows#

Create the directory that Lens will monitor for user-installed extensions:

-
mkdir C:\Users\<user>\.k8slens\extensions -force
-cd C:\Users\<user>\.k8slens\extensions
+
mkdir C:\Users\<user>\.k8slens\extensions -force
+cd C:\Users\<user>\.k8slens\extensions
 

If you have administrator rights, you can create symlink to the sample extension – in this case helloworld-sample:

-
cmd /c mklink /D helloworld-sample lens-extension-samples\helloworld-sample
+
cmd /c mklink /D helloworld-sample lens-extension-samples\helloworld-sample
 

Without administrator rights, you need to copy the extensions sample directory into C:\Users\<user>\.k8slens\extensions:

-
Copy-Item 'lens-extension-samples\helloworld-sample' 'C:\Users\<user>\.k8slens\extensions\helloworld-sample'
+
Copy-Item 'lens-extension-samples\helloworld-sample' 'C:\Users\<user>\.k8slens\extensions\helloworld-sample'
 

Build the Extension#

To build the extension you can use make or run the npm commands manually:

-
cd <lens-extension-samples directory>/helloworld-sample
-make build
+
cd <lens-extension-samples directory>/helloworld-sample
+make build
 

To run the npm commands, enter:

-
cd <lens-extension-samples directory>/helloworld-sample
-npm install
-npm run build
+
cd <lens-extension-samples directory>/helloworld-sample
+npm install
+npm run build
 

Optionally, automatically rebuild the extension by watching for changes to the source code. To do so, enter:

-
cd <lens-extension-samples directory>/helloworld-sample
-npm run dev
+
cd <lens-extension-samples directory>/helloworld-sample
+npm run dev
 

You must restart Lens for the extension to load. After this initial restart, reload Lens and it will automatically pick up changes any time the extension rebuilds.

diff --git a/master/extensions/guides/catalog/index.html b/master/extensions/guides/catalog/index.html index 86250e0088..75d2b9a40b 100644 --- a/master/extensions/guides/catalog/index.html +++ b/master/extensions/guides/catalog/index.html @@ -835,26 +835,26 @@ It declares the currently supported versions of that kind of entity but providin It is possible to register custom views for specific categories by registering them on your Renderer.LensExtension class.

A registration takes the form of a Common.Types.CustomCategoryViewRegistration

For example:

-
import { Renderer, Common } from "@k8slens/extensions";
+
import { Renderer, Common } from "@k8slens/extensions";
 
-function MyKubernetesClusterView({
-  category,
-}: Common.Types.CustomCategoryViewProps) {
-  return <div>My view: {category.getId()}</div>;
-}
+function MyKubernetesClusterView({
+  category,
+}: Common.Types.CustomCategoryViewProps) {
+  return <div>My view: {category.getId()}</div>;
+}
 
-export default class extends Renderer.LensExtension {
-  customCategoryViews = [
-    {
-      group: "entity.k8slens.dev",
-      kind: "KubernetesCluster",
-      priority: 10,
-      components: {
-        View: MyKubernetesClusterView,
-      },
-    },
-  ];
-}
+export default class extends Renderer.LensExtension {
+  customCategoryViews = [
+    {
+      group: "entity.k8slens.dev",
+      kind: "KubernetesCluster",
+      priority: 10,
+      components: {
+        View: MyKubernetesClusterView,
+      },
+    },
+  ];
+}
 

Will register a new view for the KubernetesCluster category, and because the priority is < 50 it will be displayed above the default list view.

The default list view has a priority of 50 and and custom views with priority (defaulting to 50) >= 50 will be displayed afterwards.

diff --git a/master/extensions/guides/extending-kubernetes-cluster/index.html b/master/extensions/guides/extending-kubernetes-cluster/index.html index 66b66e864f..6eeff74c72 100644 --- a/master/extensions/guides/extending-kubernetes-cluster/index.html +++ b/master/extensions/guides/extending-kubernetes-cluster/index.html @@ -791,55 +791,55 @@

Extending KubernetesCluster#

Extension can specify it's own subclass of Common.Catalog.KubernetesCluster. Extension can also specify a new Category for it in the Catalog.

Extending Common.Catalog.KubernetesCluster#

-
import { Common } from "@k8slens/extensions";
+
import { Common } from "@k8slens/extensions";
 
-// The kind must be different from KubernetesCluster's kind
-export const kind = "ManagedDevCluster";
+// The kind must be different from KubernetesCluster's kind
+export const kind = "ManagedDevCluster";
 
-export class ManagedDevCluster extends Common.Catalog.KubernetesCluster {
-  public static readonly kind = kind;
+export class ManagedDevCluster extends Common.Catalog.KubernetesCluster {
+  public static readonly kind = kind;
 
-  public readonly kind = kind;
-}
+  public readonly kind = kind;
+}
 

Extending Common.Catalog.CatalogCategory#

These custom Catalog entities can be added a new Category in the Catalog.

-
import { Common } from "@k8slens/extensions";
-import { kind, ManagedDevCluster } from "../entities/ManagedDevCluster";
+
import { Common } from "@k8slens/extensions";
+import { kind, ManagedDevCluster } from "../entities/ManagedDevCluster";
 
-class ManagedDevClusterCategory extends Common.Catalog.CatalogCategory {
-  public readonly apiVersion = "catalog.k8slens.dev/v1alpha1";
-  public readonly kind = "CatalogCategory";
-  public metadata = {
-    name: "Managed Dev Clusters",
-    icon: ""
-  };
-  public spec: Common.Catalog.CatalogCategorySpec = {
-    group: "entity.k8slens.dev",
-    versions: [
-      {
-        name: "v1alpha1",
-        entityClass: ManagedDevCluster as any,
-      },
-    ],
-    names: {
-      kind
-    },
-  };
-}
+class ManagedDevClusterCategory extends Common.Catalog.CatalogCategory {
+  public readonly apiVersion = "catalog.k8slens.dev/v1alpha1";
+  public readonly kind = "CatalogCategory";
+  public metadata = {
+    name: "Managed Dev Clusters",
+    icon: ""
+  };
+  public spec: Common.Catalog.CatalogCategorySpec = {
+    group: "entity.k8slens.dev",
+    versions: [
+      {
+        name: "v1alpha1",
+        entityClass: ManagedDevCluster as any,
+      },
+    ],
+    names: {
+      kind
+    },
+  };
+}
 
-export { ManagedDevClusterCategory };
-export type { ManagedDevClusterCategory as ManagedDevClusterCategoryType };
+export { ManagedDevClusterCategory };
+export type { ManagedDevClusterCategory as ManagedDevClusterCategoryType };
 

The category needs to be registered in the onActivate() method both in main and renderer

-
// in main's on onActivate
-Main.Catalog.catalogCategories.add(new ManagedDevClusterCategory());
+
// in main's on onActivate
+Main.Catalog.catalogCategories.add(new ManagedDevClusterCategory());
 
-
// in renderer's on onActivate
-Renderer.Catalog.catalogCategories.add(new ManagedDevClusterCategory());
+
// in renderer's on onActivate
+Renderer.Catalog.catalogCategories.add(new ManagedDevClusterCategory());
 

You can then add the entities to the Catalog as a new source:

-
this.addCatalogSource("managedDevClusters", this.managedDevClusters);
+
this.addCatalogSource("managedDevClusters", this.managedDevClusters);
 
diff --git a/master/extensions/guides/generator/index.html b/master/extensions/guides/generator/index.html index 1d44ff299a..889339fc01 100644 --- a/master/extensions/guides/generator/index.html +++ b/master/extensions/guides/generator/index.html @@ -820,7 +820,7 @@

The Lens Extension Generator creates a directory with the necessary files for developing an extension.

Installing and Getting Started with the Generator#

To begin, install Yeoman and the Lens Extension Generator with the following command:

-
npm install -g yo generator-lens-ext
+
npm install -g yo generator-lens-ext
 

Run the generator by entering the following command: yo lens-ext.

Answer the following questions:

@@ -835,8 +835,8 @@

Next, you'll need to have webpack watch the my-first-lens-ext folder. Start webpack by entering:

-
cd my-first-lens-ext
-npm start # start the webpack server in watch mode
+
cd my-first-lens-ext
+npm start # start the webpack server in watch mode
 

Open Lens and you will see a Hello World item in the left-side menu under Custom Resources:

Hello World

@@ -844,15 +844,15 @@ npm start # start the webpack server in watch mode

Next, you'll try changing the way the new menu item appears in the UI. You'll change it from "Hello World" to "Hello Lens".

Open my-first-lens-ext/renderer.tsx and change the value of title from "Hello World" to "Hello Lens":

-
clusterPageMenus = [
-  {
-    target: { pageId: "hello" },
-    title: "Hello Lens",
-    components: {
-      Icon: ExampleIcon,
-    },
-  },
-];
+
clusterPageMenus = [
+  {
+    target: { pageId: "hello" },
+    title: "Hello Lens",
+    components: {
+      Icon: ExampleIcon,
+    },
+  },
+];
 

Reload Lens and you will see that the menu item text has changed to "Hello Lens". To reload Lens, enter CMD+R on Mac and Ctrl+R on Windows/Linux.

diff --git a/master/extensions/guides/ipc/index.html b/master/extensions/guides/ipc/index.html index a5a3d44f90..3f03ba5c13 100644 --- a/master/extensions/guides/ipc/index.html +++ b/master/extensions/guides/ipc/index.html @@ -899,54 +899,54 @@ Only renderer can initiate this kind of request, and only mai

To register either a handler or a listener, you should do something like the following:

main.ts: -

import { Main } from "@k8slens/extensions";
-import { IpcMain } from "./helpers/main";
+
import { Main } from "@k8slens/extensions";
+import { IpcMain } from "./helpers/main";
 
-export class ExampleExtensionMain extends Main.LensExtension {
-  onActivate() {
-    IpcMain.createInstance(this);
-  }
-}
+export class ExampleExtensionMain extends Main.LensExtension {
+  onActivate() {
+    IpcMain.createInstance(this);
+  }
+}
 

This file shows that you need to create an instance of the store to be able to use IPC. Lens will automatically clean up that store and all the handlers on deactivation and uninstall.


helpers/main.ts: -

import { Main } from "@k8slens/extensions";
+
import { Main } from "@k8slens/extensions";
 
-export class IpcMain extends Main.Ipc {
-  constructor(extension: Main.LensExtension) {
-    super(extension);
+export class IpcMain extends Main.Ipc {
+  constructor(extension: Main.LensExtension) {
+    super(extension);
 
-    this.listen("initialize", onInitialize);
-  }
-}
+    this.listen("initialize", onInitialize);
+  }
+}
 
-function onInitialize(event: Types.IpcMainEvent, id: string) {
-  console.log(`starting to initialize: ${id}`);
-}
+function onInitialize(event: Types.IpcMainEvent, id: string) {
+  console.log(`starting to initialize: ${id}`);
+}
 

In other files, it is not necessary to pass around any instances. You should be able to just call IpcMain.getInstance() anywhere it is needed in your extension.


renderer.ts: -

import { Renderer } from "@k8slens/extensions";
-import { IpcRenderer } from "./helpers/renderer";
+
import { Renderer } from "@k8slens/extensions";
+import { IpcRenderer } from "./helpers/renderer";
 
-export class ExampleExtensionRenderer extends Renderer.LensExtension {
-  onActivate() {
-    const ipc = IpcRenderer.createInstance(this);
+export class ExampleExtensionRenderer extends Renderer.LensExtension {
+  onActivate() {
+    const ipc = IpcRenderer.createInstance(this);
 
-    setTimeout(() => ipc.broadcast("initialize", "an-id"), 5000);
-  }
-}
+    setTimeout(() => ipc.broadcast("initialize", "an-id"), 5000);
+  }
+}
 

It is also needed to create an instance to broadcast messages too.


helpers/renderer.ts: -

import { Renderer } from "@k8slens/extensions";
+
import { Renderer } from "@k8slens/extensions";
 
-export class IpcRenderer extends Renderer.Ipc {}
+export class IpcRenderer extends Renderer.Ipc {}
 

It is necessary to create child classes of these abstract class's in your extension before you can use them.


diff --git a/master/extensions/guides/kube-object-list-layout/index.html b/master/extensions/guides/kube-object-list-layout/index.html index 42d0770a65..0c7964543b 100644 --- a/master/extensions/guides/kube-object-list-layout/index.html +++ b/master/extensions/guides/kube-object-list-layout/index.html @@ -787,51 +787,51 @@ To achieve our goal, we need to:

Register clusterPage and clusterPageMenu Objects#

First thing we need to do with our extension is to register new menu item in the cluster menu and create a cluster page that is opened when clicking the menu item. We will do this in our extension class CrdSampleExtension that is derived LensRendererExtension class:

-
export default class CrdSampleExtension extends Renderer.LensExtension {
-}
+
export default class CrdSampleExtension extends Renderer.LensExtension {
+}
 

To register menu item in the cluster menu we need to register PageMenuRegistration object. This object will register a menu item with "Certificates" text. It will also use CertificateIcon component to render an icon and navigate to cluster page that is having certificates page id.

-
import { Renderer } from "@k8slens/extensions";
+
import { Renderer } from "@k8slens/extensions";
 
-type IconProps = Renderer.Component.IconProps;
+type IconProps = Renderer.Component.IconProps;
 
-const {
-  Component: {
-    Icon,
-  },
-} = Renderer;
+const {
+  Component: {
+    Icon,
+  },
+} = Renderer;
 
-export function CertificateIcon(props: IconProps) {
-  return <Icon {...props} material="security" tooltip="Certificates"/>
-}
+export function CertificateIcon(props: IconProps) {
+  return <Icon {...props} material="security" tooltip="Certificates"/>
+}
 
-export default class CrdSampleExtension extends Renderer.LensExtension {
+export default class CrdSampleExtension extends Renderer.LensExtension {
 
-  clusterPageMenus = [
-    {
-      target: { pageId: "certificates" },
-      title: "Certificates",
-      components: {
-        Icon: CertificateIcon,
-      }
-    },
-  ]
-}
+  clusterPageMenus = [
+    {
+      target: { pageId: "certificates" },
+      title: "Certificates",
+      components: {
+        Icon: CertificateIcon,
+      }
+    },
+  ]
+}
 

Then we need to register PageRegistration object with certificates id and define CertificatePage component to render certificates.

-
export default class CrdSampleExtension extends Renderer.LensExtension {
-  ...
+
export default class CrdSampleExtension extends Renderer.LensExtension {
+  ...
 
-  clusterPages = [{
-    id: "certificates",
-    components: {
-      Page: () => <CertificatePage extension={this} />,
-      MenuIcon: CertificateIcon,
-    }
-  }]
-}
+  clusterPages = [{
+    id: "certificates",
+    components: {
+      Page: () => <CertificatePage extension={this} />,
+      MenuIcon: CertificateIcon,
+    }
+  }]
+}
 

List Certificate Objects on the Cluster Page#

In the previous step we defined CertificatePage component to render certificates. @@ -842,211 +842,211 @@ In this step we will actually implement that. Lens Extensions API provides easy mechanism to do this. We just need to define Certificate class derived from Renderer.K8sApi.KubeObject, CertificatesApiderived from Renderer.K8sApi.KubeApi and CertificatesStore derived from Renderer.K8sApi.KubeObjectStore.

Certificate class defines properties found in the CRD object:

-
import { Renderer } from "@k8slens/extensions";
+
import { Renderer } from "@k8slens/extensions";
 
-const {
-  K8sApi: {
-    KubeObject,
-    KubeObjectStore,
-    KubeApi,
-    apiManager,
-  },
-} = Renderer;
+const {
+  K8sApi: {
+    KubeObject,
+    KubeObjectStore,
+    KubeApi,
+    apiManager,
+  },
+} = Renderer;
 
-export class Certificate extends KubeObject {
-  static kind = "Certificate"
-  static namespaced = true
-  static apiBase = "/apis/cert-manager.io/v1alpha2/certificates"
+export class Certificate extends KubeObject {
+  static kind = "Certificate"
+  static namespaced = true
+  static apiBase = "/apis/cert-manager.io/v1alpha2/certificates"
 
-  kind: string
-  apiVersion: string
-  metadata: {
-    name: string;
-    namespace: string;
-    selfLink: string;
-    uid: string;
-    resourceVersion: string;
-    creationTimestamp: string;
-    labels: {
-      [key: string]: string;
-    };
-    annotations: {
-      [key: string]: string;
-    };
-  }
-  spec: {
-    dnsNames: string[];
-    issuerRef: {
-      group: string;
-      kind: string;
-      name: string;
-    }
-    secretName: string
-  }
-  status: {
-    conditions: {
-      lastTransitionTime: string;
-      message: string;
-      reason: string;
-      status: string;
-      type?: string;
-    }[];
-  }
-}
+  kind: string
+  apiVersion: string
+  metadata: {
+    name: string;
+    namespace: string;
+    selfLink: string;
+    uid: string;
+    resourceVersion: string;
+    creationTimestamp: string;
+    labels: {
+      [key: string]: string;
+    };
+    annotations: {
+      [key: string]: string;
+    };
+  }
+  spec: {
+    dnsNames: string[];
+    issuerRef: {
+      group: string;
+      kind: string;
+      name: string;
+    }
+    secretName: string
+  }
+  status: {
+    conditions: {
+      lastTransitionTime: string;
+      message: string;
+      reason: string;
+      status: string;
+      type?: string;
+    }[];
+  }
+}
 

With CertificatesApi class we are able to manage Certificate objects in Kubernetes API:

-
export class CertificatesApi extends KubeApi<Certificate> {}
+
export class CertificatesApi extends KubeApi<Certificate> {}
 
-export const certificatesApi = new CertificatesApi({
-  objectConstructor: Certificate
-});
+export const certificatesApi = new CertificatesApi({
+  objectConstructor: Certificate
+});
 

CertificateStore defines storage for Certificate objects

-
export class CertificatesStore extends KubeObjectStore<Certificate> {
-  api = certificatesApi
-}
+
export class CertificatesStore extends KubeObjectStore<Certificate> {
+  api = certificatesApi
+}
 
-export const certificatesStore = new CertificatesStore();
+export const certificatesStore = new CertificatesStore();
 

And, finally, we register this store to Lens's API manager.

-
apiManager.registerStore(certificatesStore);
+
apiManager.registerStore(certificatesStore);
 

Create CertificatePage component#

Now we have created mechanism to manage Certificate objects in Kubernetes API. Then we need to fetch those and render them in the UI.

First we define CertificatePage class that extends React.Component.

-
import { Renderer } from "@k8slens/extensions";
-import React from "react";
-import { certificatesStore } from "../certificate-store";
-import { Certificate } from "../certificate"
+
import { Renderer } from "@k8slens/extensions";
+import React from "react";
+import { certificatesStore } from "../certificate-store";
+import { Certificate } from "../certificate"
 
-export class CertificatePage extends React.Component<{ extension: Renderer.LensExtension }> {
+export class CertificatePage extends React.Component<{ extension: Renderer.LensExtension }> {
 
-}
+}
 

Next we will implement render method that will display certificates in a list. To do that, we just need to add Renderer.Component.KubeObjectListLayout component inside Renderer.Component.TabLayout component in render method. To define which objects the list is showing, we need to pass certificateStore object to Renderer.Component.KubeObjectListLayout in store property. Renderer.Component.KubeObjectListLayout will fetch automatically items from the given store when component is mounted. Also, we can define needed sorting callbacks and search filters for the list:

-
import { Renderer } from "@k8slens/extensions";
+
import { Renderer } from "@k8slens/extensions";
 
-const {
-  Component: {
-    TabLayout,
-    KubeObjectListLayout,
-  },
-} = Renderer;
+const {
+  Component: {
+    TabLayout,
+    KubeObjectListLayout,
+  },
+} = Renderer;
 
-enum sortBy {
-  name = "name",
-  namespace = "namespace",
-  issuer = "issuer"
-}
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  issuer = "issuer"
+}
 
-export class CertificatePage extends React.Component<{ extension: LensRendererExtension }> {
-  // ...
+export class CertificatePage extends React.Component<{ extension: LensRendererExtension }> {
+  // ...
 
-  render() {
-    return (
-      <TabLayout>
-        <KubeObjectListLayout
-          className="Certificates" store={certificatesStore}
-          sortingCallbacks={{
-            [sortBy.name]: (certificate: Certificate) => certificate.getName(),
-            [sortBy.namespace]: (certificate: Certificate) => certificate.metadata.namespace,
-            [sortBy.issuer]: (certificate: Certificate) => certificate.spec.issuerRef.name
-          }}
-          searchFilters={[
-            (certificate: Certificate) => certificate.getSearchFields()
-          ]}
-          renderHeaderTitle="Certificates"
-          renderTableHeader={[
-            { title: "Name", className: "name", sortBy: sortBy.name },
-            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-            { title: "Issuer", className: "issuer", sortBy: sortBy.namespace },
-          ]}
-          renderTableContents={(certificate: Certificate) => [
-            certificate.getName(),
-            certificate.metadata.namespace,
-            certificate.spec.issuerRef.name
-          ]}
-        />
-      </TabLayout>
-    )
-  }
-}
+  render() {
+    return (
+      <TabLayout>
+        <KubeObjectListLayout
+          className="Certificates" store={certificatesStore}
+          sortingCallbacks={{
+            [sortBy.name]: (certificate: Certificate) => certificate.getName(),
+            [sortBy.namespace]: (certificate: Certificate) => certificate.metadata.namespace,
+            [sortBy.issuer]: (certificate: Certificate) => certificate.spec.issuerRef.name
+          }}
+          searchFilters={[
+            (certificate: Certificate) => certificate.getSearchFields()
+          ]}
+          renderHeaderTitle="Certificates"
+          renderTableHeader={[
+            { title: "Name", className: "name", sortBy: sortBy.name },
+            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+            { title: "Issuer", className: "issuer", sortBy: sortBy.namespace },
+          ]}
+          renderTableContents={(certificate: Certificate) => [
+            certificate.getName(),
+            certificate.metadata.namespace,
+            certificate.spec.issuerRef.name
+          ]}
+        />
+      </TabLayout>
+    )
+  }
+}
 

Customize Details panel#

We have learned now, how to list CRD objects in a list view. Next, we will learn how to customize details panel that will be opened when the object is clicked in the list.

First, we need to register our custom component to render details for the specific Kubernetes custom resource, in our case Certificate. We will do this again in CrdSampleExtension class:

-
export default class CrdSampleExtension extends Renderer.LensExtension {
-  //...
+
export default class CrdSampleExtension extends Renderer.LensExtension {
+  //...
 
-  kubeObjectDetailItems = [{
-    kind: Certificate.kind,
-    apiVersions: ["cert-manager.io/v1alpha2"],
-    components: {
-      Details: (props: CertificateDetailsProps) => <CertificateDetails {...props} />
-    }
-  }]
-}
+  kubeObjectDetailItems = [{
+    kind: Certificate.kind,
+    apiVersions: ["cert-manager.io/v1alpha2"],
+    components: {
+      Details: (props: CertificateDetailsProps) => <CertificateDetails {...props} />
+    }
+  }]
+}
 

Here we defined that CertificateDetails component will render the resource details. So, next we need to implement that component. Lens will inject Certificate object into our component so we just need to render some information out of it. We can use Renderer.Component.DrawerItem component from Lens Extensions API to give the same look and feel as Lens is using elsewhere:

-
import { Renderer } from "@k8slens/extensions";
-import React from "react";
-import { Certificate } from "../certificate";
+
import { Renderer } from "@k8slens/extensions";
+import React from "react";
+import { Certificate } from "../certificate";
 
-const {
-  Component: {
-    KubeObjectDetailsProps,
-    DrawerItem,
-    Badge,
-  }
-} = Renderer;
+const {
+  Component: {
+    KubeObjectDetailsProps,
+    DrawerItem,
+    Badge,
+  }
+} = Renderer;
 
-export interface CertificateDetailsProps extends KubeObjectDetailsProps<Certificate>{
-}
+export interface CertificateDetailsProps extends KubeObjectDetailsProps<Certificate>{
+}
 
-export class CertificateDetails extends React.Component<CertificateDetailsProps> {
+export class CertificateDetails extends React.Component<CertificateDetailsProps> {
 
-  render() {
-    const { object: certificate } = this.props;
-    if (!certificate) return null;
-    return (
-      <div className="Certificate">
-        <DrawerItem name="Created">
-          {certificate.getAge(true, false)} ago ({certificate.metadata.creationTimestamp })
-        </DrawerItem>
-        <DrawerItem name="DNS Names">
-          {certificate.spec.dnsNames.join(",")}
-        </DrawerItem>
-        <DrawerItem name="Secret">
-          {certificate.spec.secretName}
-        </DrawerItem>
-        <DrawerItem name="Status" className="status" labelsOnly>
-          {certificate.status.conditions.map((condition, index) => {
-            const { type, reason, message, status } = condition;
-            const kind = type || reason;
-            if (!kind) return null;
-            return (
-              <Badge
-                key={kind + index} label={kind}
-                className={"success "+kind.toLowerCase()}
-                tooltip={message}
-              />
-            );
-          })}
-        </DrawerItem>
-      </div>
-    )
-  }
-}
+  render() {
+    const { object: certificate } = this.props;
+    if (!certificate) return null;
+    return (
+      <div className="Certificate">
+        <DrawerItem name="Created">
+          {certificate.getAge(true, false)} ago ({certificate.metadata.creationTimestamp })
+        </DrawerItem>
+        <DrawerItem name="DNS Names">
+          {certificate.spec.dnsNames.join(",")}
+        </DrawerItem>
+        <DrawerItem name="Secret">
+          {certificate.spec.secretName}
+        </DrawerItem>
+        <DrawerItem name="Status" className="status" labelsOnly>
+          {certificate.status.conditions.map((condition, index) => {
+            const { type, reason, message, status } = condition;
+            const kind = type || reason;
+            if (!kind) return null;
+            return (
+              <Badge
+                key={kind + index} label={kind}
+                className={"success "+kind.toLowerCase()}
+                tooltip={message}
+              />
+            );
+          })}
+        </DrawerItem>
+      </div>
+    )
+  }
+}
 

Summary#

Like we can see above, it's very easy to add custom pages and fetch Kubernetes resources by using Extensions API. diff --git a/master/extensions/guides/main-extension/index.html b/master/extensions/guides/main-extension/index.html index ac49352adf..a5712acd5f 100644 --- a/master/extensions/guides/main-extension/index.html +++ b/master/extensions/guides/main-extension/index.html @@ -850,17 +850,17 @@ It also provides convenient methods for navigating to built-in Lens pages and ex

Main.LensExtension Class#

onActivate() and onDeactivate() Methods#

To create a main extension simply extend the Main.LensExtension class:

-
import { Main } from "@k8slens/extensions";
+
import { Main } from "@k8slens/extensions";
 
-export default class ExampleExtensionMain extends Main.LensExtension {
-  onActivate() {
-    console.log("custom main process extension code started");
-  }
+export default class ExampleExtensionMain extends Main.LensExtension {
+  onActivate() {
+    console.log("custom main process extension code started");
+  }
 
-  onDeactivate() {
-    console.log("custom main process extension de-activated");
-  }
-}
+  onDeactivate() {
+    console.log("custom main process extension de-activated");
+  }
+}
 

Two methods enable you to run custom code: onActivate() and onDeactivate(). Enabling your extension calls onActivate() and disabling your extension calls onDeactivate(). @@ -879,19 +879,19 @@ Achieve this by starting Lens from the command prompt.

appMenus#

The Main Extension API allows you to customize the UI application menu. The following example demonstrates adding an item to the Help menu.

-
import { Main } from "@k8slens/extensions";
+
import { Main } from "@k8slens/extensions";
 
-export default class SamplePageMainExtension extends Main.LensExtension {
-  appMenus = [
-    {
-      parentId: "help",
-      label: "Sample",
-      click() {
-        console.log("Sample clicked");
-      },
-    },
-  ];
-}
+export default class SamplePageMainExtension extends Main.LensExtension {
+  appMenus = [
+    {
+      parentId: "help",
+      label: "Sample",
+      click() {
+        console.log("Sample clicked");
+      },
+    },
+  ];
+}
 

appMenus is an array of objects that satisfy the MenuRegistration interface. MenuRegistration extends Electron's MenuItemConstructorOptions interface. @@ -907,45 +907,45 @@ The properties of the appMenus array objects are defined as follows:

Note that pages are associated with the Renderer.LensExtension class and can be defined in the process of extending it.

The following example demonstrates how an application menu can be used to navigate to such a page:

-
import { Main } from "@k8slens/extensions";
+
import { Main } from "@k8slens/extensions";
 
-export default class SamplePageMainExtension extends Main.LensExtension {
-  appMenus = [
-    {
-      parentId: "help",
-      label: "Sample",
-      click: () => this.navigate("myGlobalPage"),
-    },
-  ];
-}
+export default class SamplePageMainExtension extends Main.LensExtension {
+  appMenus = [
+    {
+      parentId: "help",
+      label: "Sample",
+      click: () => this.navigate("myGlobalPage"),
+    },
+  ];
+}
 

When the menu item is clicked the navigate() method looks for and displays a global page with id "myGlobalPage". This page would be defined in your extension's Renderer.LensExtension implementation (See Renderer.LensExtension).

trayMenus#

trayMenus is an array of TrayMenuRegistration objects. Most importantly you can define a label and a click handler. Other properties are submenu, enabled, toolTip, id and type.

-
interface TrayMenuRegistration {
-  label?: string;
-  click?: (menuItem: TrayMenuRegistration) => void;
-  id?: string;
-  type?: "normal" | "separator" | "submenu";
-  toolTip?: string;
-  enabled?: boolean;
-  submenu?: TrayMenuRegistration[];
-}
+
interface TrayMenuRegistration {
+  label?: string;
+  click?: (menuItem: TrayMenuRegistration) => void;
+  id?: string;
+  type?: "normal" | "separator" | "submenu";
+  toolTip?: string;
+  enabled?: boolean;
+  submenu?: TrayMenuRegistration[];
+}
 

The following example demonstrates how tray menus can be added from extension:

-
import { Main } from "@k8slens/extensions";
+
import { Main } from "@k8slens/extensions";
 
-export default class SampleTrayMenuMainExtension extends Main.LensExtension {
-  trayMenus = [
-    {
-      label: "menu from the extension",
-      click: () => {
-        console.log("tray menu clicked!");
-      },
-    },
-  ];
-}
+export default class SampleTrayMenuMainExtension extends Main.LensExtension {
+  trayMenus = [
+    {
+      label: "menu from the extension",
+      click: () => {
+        console.log("tray menu clicked!");
+      },
+    },
+  ];
+}
 

addCatalogSource() and removeCatalogSource() Methods#

The Main.LensExtension class also provides the addCatalogSource() and removeCatalogSource() methods, for managing custom catalog items (or entities). diff --git a/master/extensions/guides/protocol-handlers/index.html b/master/extensions/guides/protocol-handlers/index.html index fa31d60866..3c5082857b 100644 --- a/master/extensions/guides/protocol-handlers/index.html +++ b/master/extensions/guides/protocol-handlers/index.html @@ -815,18 +815,18 @@ Handlers will be run in both main and renderer in para Furthermore, both main and renderer are routed separately. In other words, which handler is selected in either process is independent from the list of possible handlers in the other.

Example of registering a handler:

-
import { Main, Common } from "@k8slens/extensions";
+
import { Main, Common } from "@k8slens/extensions";
 
-function rootHandler(params: Common.Types.ProtocolRouteParams) {
-  console.log("routed to ExampleExtension", params);
-}
+function rootHandler(params: Common.Types.ProtocolRouteParams) {
+  console.log("routed to ExampleExtension", params);
+}
 
-export default class ExampleExtensionMain extends Main.LensExtension {
-  protocolHandlers = [
-    pathSchema: "/",
-    handler: rootHandler,
-  ]
-}
+export default class ExampleExtensionMain extends Main.LensExtension {
+  protocolHandlers = [
+    pathSchema: "/",
+    handler: rootHandler,
+  ]
+}
 

For testing the routing of URIs the open (on macOS) or xdg-open (on most linux) CLI utilities can be used. For the above handler, the following URI would be always routed to it:

@@ -840,14 +840,14 @@ For example consider an extension example-extension which is publis If it were to register a handler with "/display/:type" as its corresponding link then we would match the following URI like this:

Lens Protocol Link Resolution

Once matched, the handler would be called with the following argument (note both "search" and "pathname" will always be defined):

-
{
-  "search": {
-    "text": "Hello"
-  },
-  "pathname": {
-    "type": "notification"
-  }
-}
+
{
+  "search": {
+    "text": "Hello"
+  },
+  "pathname": {
+    "type": "notification"
+  }
+}
 

As the diagram above shows, the search (or query) params are not considered as part of the handler resolution. If the URI had instead been lens://extension/@mirantis/example-extension/display/notification/green then a third (and optional) field will have the rest of the path. diff --git a/master/extensions/guides/renderer-extension/index.html b/master/extensions/guides/renderer-extension/index.html index 330c4ab159..1635870ee9 100644 --- a/master/extensions/guides/renderer-extension/index.html +++ b/master/extensions/guides/renderer-extension/index.html @@ -1042,17 +1042,17 @@ The Renderer Extension API allows you to access, configure, and customize Lens d

Renderer.LensExtension Class#

onActivate() and onDeactivate() Methods#

To create a renderer extension, extend the Renderer.LensExtension class:

-
import { Renderer } from "@k8slens/extensions";
+
import { Renderer } from "@k8slens/extensions";
 
-export default class ExampleExtensionMain extends Renderer.LensExtension {
-  onActivate() {
-    console.log("custom renderer process extension code started");
-  }
+export default class ExampleExtensionMain extends Renderer.LensExtension {
+  onActivate() {
+    console.log("custom renderer process extension code started");
+  }
 
-  onDeactivate() {
-    console.log("custom renderer process extension de-activated");
-  }
-}
+  onDeactivate() {
+    console.log("custom renderer process extension de-activated");
+  }
+}
 

Two methods enable you to run custom code: onActivate() and onDeactivate(). Enabling your extension calls onActivate() and disabling your extension calls onDeactivate(). @@ -1073,20 +1073,20 @@ Use cluster pages to display information about or add functionality to the activ It is also possible to include custom details from other clusters. Use your extension to access Kubernetes resources in the active cluster with ClusterStore.getInstance().

Add a cluster page definition to a Renderer.LensExtension subclass with the following example:

-
import { Renderer } from "@k8slens/extensions";
-import { ExampleIcon, ExamplePage } from "./page";
-import React from "react";
+
import { Renderer } from "@k8slens/extensions";
+import { ExampleIcon, ExamplePage } from "./page";
+import React from "react";
 
-export default class ExampleExtension extends Renderer.LensExtension {
-  clusterPages = [
-    {
-      id: "hello",
-      components: {
-        Page: () => <ExamplePage extension={this} />,
-      },
-    },
-  ];
-}
+export default class ExampleExtension extends Renderer.LensExtension {
+  clusterPages = [
+    {
+      id: "hello",
+      components: {
+        Page: () => <ExamplePage extension={this} />,
+      },
+    },
+  ];
+}
 

clusterPages is an array of objects that satisfy the PageRegistration interface. The properties of the clusterPages array objects are defined as follows:

@@ -1097,20 +1097,20 @@ The properties of the clusterPages array objects are defined as fol It offers flexibility in defining the appearance and behavior of your page.

ExamplePage in the example above can be defined in page.tsx:

-
import { Renderer } from "@k8slens/extensions";
-import React from "react";
+
import { Renderer } from "@k8slens/extensions";
+import React from "react";
 
-export class ExamplePage extends React.Component<{
-  extension: LensRendererExtension;
-}> {
-  render() {
-    return (
-      <div>
-        <p>Hello world!</p>
-      </div>
-    );
-  }
-}
+export class ExamplePage extends React.Component<{
+  extension: LensRendererExtension;
+}> {
+  render() {
+    return (
+      <div>
+        <p>Hello world!</p>
+      </div>
+    );
+  }
+}
 

Note that the ExamplePage class defines the extension property. This allows the ExampleExtension object to be passed in the cluster page definition in the React style. @@ -1120,30 +1120,30 @@ Use clusterPageMenus, covered in the next section, to add cluster p

clusterPageMenus#

clusterPageMenus allows you to add cluster page menu items to the secondary left nav, below Lens's standard cluster menus like Workloads, Custom Resources, etc.

By expanding on the above example, you can add a cluster page menu item to the ExampleExtension definition:

-
import { Renderer } from "@k8slens/extensions";
-import { ExampleIcon, ExamplePage } from "./page";
-import React from "react";
+
import { Renderer } from "@k8slens/extensions";
+import { ExampleIcon, ExamplePage } from "./page";
+import React from "react";
 
-export default class ExampleExtension extends Renderer.LensExtension {
-  clusterPages = [
-    {
-      id: "hello",
-      components: {
-        Page: () => <ExamplePage extension={this} />,
-      },
-    },
-  ];
+export default class ExampleExtension extends Renderer.LensExtension {
+  clusterPages = [
+    {
+      id: "hello",
+      components: {
+        Page: () => <ExamplePage extension={this} />,
+      },
+    },
+  ];
 
-  clusterPageMenus = [
-    {
-      target: { pageId: "hello" },
-      title: "Hello World",
-      components: {
-        Icon: ExampleIcon,
-      },
-    },
-  ];
-}
+  clusterPageMenus = [
+    {
+      target: { pageId: "hello" },
+      title: "Hello World",
+      components: {
+        Icon: ExampleIcon,
+      },
+    },
+  ];
+}
 

clusterPageMenus is an array of objects that satisfy the ClusterPageMenuRegistration interface. This element defines how the cluster page menu item will appear and what it will do when you click it. @@ -1157,30 +1157,30 @@ The properties of the clusterPageMenus array objects are defined as

The above example creates a menu item that reads Hello World. When users click Hello World, the cluster dashboard will show the contents of Example Page.

This example requires the definition of another React-based component, ExampleIcon, which has been added to page.tsx, as follows:

-
import { Renderer } from "@k8slens/extensions";
-import React from "react";
+
import { Renderer } from "@k8slens/extensions";
+import React from "react";
 
-type IconProps = Renderer.Component.IconProps;
+type IconProps = Renderer.Component.IconProps;
 
-const {
-  Component: { Icon },
-} = Renderer;
+const {
+  Component: { Icon },
+} = Renderer;
 
-export function ExampleIcon(props: IconProps) {
-  return <Icon {...props} material="pages" tooltip={"Hi!"} />;
-}
+export function ExampleIcon(props: IconProps) {
+  return <Icon {...props} material="pages" tooltip={"Hi!"} />;
+}
 
-export class ExamplePage extends React.Component<{
-  extension: Renderer.LensExtension;
-}> {
-  render() {
-    return (
-      <div>
-        <p>Hello world!</p>
-      </div>
-    );
-  }
-}
+export class ExamplePage extends React.Component<{
+  extension: Renderer.LensExtension;
+}> {
+  render() {
+    return (
+      <div>
+        <p>Hello world!</p>
+      </div>
+    );
+  }
+}
 

Lens includes various built-in components available for extension developers to use. One of these is the Renderer.Component.Icon, introduced in ExampleIcon, which you can use to access any of the icons available at Material Design. @@ -1191,52 +1191,52 @@ The properties that Renderer.Component.Icon uses are defined as fol

clusterPageMenus can also be used to define sub menu items, so that you can create groups of cluster pages. The following example groups two sub menu items under one parent menu item:

-
import { Renderer } from "@k8slens/extensions";
-import { ExampleIcon, ExamplePage } from "./page";
-import React from "react";
+
import { Renderer } from "@k8slens/extensions";
+import { ExampleIcon, ExamplePage } from "./page";
+import React from "react";
 
-export default class ExampleExtension extends Renderer.LensExtension {
-  clusterPages = [
-    {
-      id: "hello",
-      components: {
-        Page: () => <ExamplePage extension={this} />,
-      },
-    },
-    {
-      id: "bonjour",
-      components: {
-        Page: () => <ExamplePage extension={this} />,
-      },
-    },
-  ];
+export default class ExampleExtension extends Renderer.LensExtension {
+  clusterPages = [
+    {
+      id: "hello",
+      components: {
+        Page: () => <ExamplePage extension={this} />,
+      },
+    },
+    {
+      id: "bonjour",
+      components: {
+        Page: () => <ExamplePage extension={this} />,
+      },
+    },
+  ];
 
-  clusterPageMenus = [
-    {
-      id: "example",
-      title: "Greetings",
-      components: {
-        Icon: ExampleIcon,
-      },
-    },
-    {
-      parentId: "example",
-      target: { pageId: "hello" },
-      title: "Hello World",
-      components: {
-        Icon: ExampleIcon,
-      },
-    },
-    {
-      parentId: "example",
-      target: { pageId: "bonjour" },
-      title: "Bonjour le monde",
-      components: {
-        Icon: ExampleIcon,
-      },
-    },
-  ];
-}
+  clusterPageMenus = [
+    {
+      id: "example",
+      title: "Greetings",
+      components: {
+        Icon: ExampleIcon,
+      },
+    },
+    {
+      parentId: "example",
+      target: { pageId: "hello" },
+      title: "Hello World",
+      components: {
+        Icon: ExampleIcon,
+      },
+    },
+    {
+      parentId: "example",
+      target: { pageId: "bonjour" },
+      title: "Bonjour le monde",
+      components: {
+        Icon: ExampleIcon,
+      },
+    },
+  ];
+}
 

The above defines two cluster pages and three cluster page menu objects. The cluster page definitions are straightforward. @@ -1256,20 +1256,20 @@ A cluster page menu object is defined to be a submenu item by setting the Their primary use is to display information and provide functionality across clusters (or catalog entities), including customized data and functionality unique to your extension.

Unlike cluster pages, users can trigger global pages even when there is no active cluster (or catalog entity).

The following example defines a Renderer.LensExtension subclass with a single global page definition:

-
import { Renderer } from "@k8slens/extensions";
-import { HelpPage } from "./page";
-import React from "react";
+
import { Renderer } from "@k8slens/extensions";
+import { HelpPage } from "./page";
+import React from "react";
 
-export default class HelpExtension extends Renderer.LensExtension {
-  globalPages = [
-    {
-      id: "help",
-      components: {
-        Page: () => <HelpPage extension={this} />,
-      },
-    },
-  ];
-}
+export default class HelpExtension extends Renderer.LensExtension {
+  globalPages = [
+    {
+      id: "help",
+      components: {
+        Page: () => <HelpPage extension={this} />,
+      },
+    },
+  ];
+}
 

globalPages is an array of objects that satisfy the PageRegistration interface. The properties of the globalPages array objects are defined as follows:

@@ -1280,20 +1280,20 @@ The properties of the globalPages array objects are defined as foll It offers flexibility in defining the appearance and behavior of your page.

HelpPage in the example above can be defined in page.tsx:

-
import { Renderer } from "@k8slens/extensions";
-import React from "react";
+
import { Renderer } from "@k8slens/extensions";
+import React from "react";
 
-export class HelpPage extends React.Component<{
-  extension: LensRendererExtension;
-}> {
-  render() {
-    return (
-      <div>
-        <p>Help yourself</p>
-      </div>
-    );
-  }
-}
+export class HelpPage extends React.Component<{
+  extension: LensRendererExtension;
+}> {
+  render() {
+    return (
+      <div>
+        <p>Help yourself</p>
+      </div>
+    );
+  }
+}
 

Note that the HelpPage class defines the extension property. This allows the HelpExtension object to be passed in the global page definition in the React-style. @@ -1310,27 +1310,27 @@ Global pages are typically made available in the following ways:

The Lens Preferences page is a built-in global page. You can use Lens extensions to add custom preferences to the Preferences page, providing a single location for users to configure global options.

The following example demonstrates adding a custom preference:

-
import { Renderer } from "@k8slens/extensions";
-import {
-  ExamplePreferenceHint,
-  ExamplePreferenceInput,
-} from "./src/example-preference";
-import { observable } from "mobx";
-import React from "react";
+
import { Renderer } from "@k8slens/extensions";
+import {
+  ExamplePreferenceHint,
+  ExamplePreferenceInput,
+} from "./src/example-preference";
+import { observable } from "mobx";
+import React from "react";
 
-export default class ExampleRendererExtension extends Renderer.LensExtension {
-  @observable preference = { enabled: false };
+export default class ExampleRendererExtension extends Renderer.LensExtension {
+  @observable preference = { enabled: false };
 
-  appPreferences = [
-    {
-      title: "Example Preferences",
-      components: {
-        Input: () => <ExamplePreferenceInput preference={this.preference} />,
-        Hint: () => <ExamplePreferenceHint />,
-      },
-    },
-  ];
-}
+  appPreferences = [
+    {
+      title: "Example Preferences",
+      components: {
+        Input: () => <ExamplePreferenceInput preference={this.preference} />,
+        Hint: () => <ExamplePreferenceHint />,
+      },
+    },
+  ];
+}
 

appPreferences is an array of objects that satisfies the AppPreferenceRegistration interface. The properties of the appPreferences array objects are defined as follows:

@@ -1348,47 +1348,47 @@ The properties of the appPreferences array objects are defined as f This is how ExampleRendererExtension handles the state of the preference input. ExampleRendererExtension has a preference field, which you will add to ExamplePreferenceInput.

In this example ExamplePreferenceInput, ExamplePreferenceHint, and ExamplePreferenceProps are defined in ./src/example-preference.tsx as follows:

-
import { Renderer } from "@k8slens/extensions";
-import { makeObservable } from "mobx";
-import { observer } from "mobx-react";
-import React from "react";
+
import { Renderer } from "@k8slens/extensions";
+import { makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import React from "react";
 
-const {
-  Component: { Checkbox },
-} = Renderer;
+const {
+  Component: { Checkbox },
+} = Renderer;
 
-export class ExamplePreferenceProps {
-  preference: {
-    enabled: boolean;
-  };
-}
+export class ExamplePreferenceProps {
+  preference: {
+    enabled: boolean;
+  };
+}
 
-@observer
-export class ExamplePreferenceInput extends React.Component<ExamplePreferenceProps> {
-  public constructor() {
-    super({ preference: { enabled: false } });
-    makeObservable(this);
-  }
+@observer
+export class ExamplePreferenceInput extends React.Component<ExamplePreferenceProps> {
+  public constructor() {
+    super({ preference: { enabled: false } });
+    makeObservable(this);
+  }
 
-  render() {
-    const { preference } = this.props;
-    return (
-      <Checkbox
-        label="I understand appPreferences"
-        value={preference.enabled}
-        onChange={(v) => {
-          preference.enabled = v;
-        }}
-      />
-    );
-  }
-}
+  render() {
+    const { preference } = this.props;
+    return (
+      <Checkbox
+        label="I understand appPreferences"
+        value={preference.enabled}
+        onChange={(v) => {
+          preference.enabled = v;
+        }}
+      />
+    );
+  }
+}
 
-export class ExamplePreferenceHint extends React.Component {
-  render() {
-    return <span>This is an example of an appPreference for extensions.</span>;
-  }
-}
+export class ExamplePreferenceHint extends React.Component {
+  render() {
+    return <span>This is an example of an appPreference for extensions.</span>;
+  }
+}
 

ExamplePreferenceInput implements a simple checkbox using Lens's Renderer.Component.Checkbox using the following properties:

NamespaceDetailsItem is defined in ./src/namespace-details-item.tsx:

-
import { Renderer } from "@k8slens/extensions";
-import { PodsDetailsList } from "./pods-details-list";
-import React from "react";
-import { observable } from "mobx";
-import { observer } from "mobx-react";
+
import { Renderer } from "@k8slens/extensions";
+import { PodsDetailsList } from "./pods-details-list";
+import React from "react";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
 
-const {
-  K8sApi: { podsApi },
-  Component: { DrawerTitle },
-} = Renderer;
+const {
+  K8sApi: { podsApi },
+  Component: { DrawerTitle },
+} = Renderer;
 
-type KubeObjectMenuProps = Renderer.Component.KubeObjectMenuProps;
-type Namespace = Renderer.K8sApi.Namespace;
-type Pod = Renderer.K8sApi.Pod;
+type KubeObjectMenuProps = Renderer.Component.KubeObjectMenuProps;
+type Namespace = Renderer.K8sApi.Namespace;
+type Pod = Renderer.K8sApi.Pod;
 
-@observer
-export class NamespaceDetailsItem extends React.Component<
-  KubeObjectDetailsProps<Namespace>
-> {
-  @observable private pods: Pod[];
+@observer
+export class NamespaceDetailsItem extends React.Component<
+  KubeObjectDetailsProps<Namespace>
+> {
+  @observable private pods: Pod[];
 
-  async componentDidMount() {
-    const namespace = this.props.object.getName();
+  async componentDidMount() {
+    const namespace = this.props.object.getName();
 
-    this.pods = await podsApi.list({ namespace });
-  }
+    this.pods = await podsApi.list({ namespace });
+  }
 
-  render() {
-    return (
-      <div>
-        <DrawerTitle>Pods</DrawerTitle>
-        <PodsDetailsList pods={this.pods} />
-      </div>
-    );
-  }
-}
+  render() {
+    return (
+      <div>
+        <DrawerTitle>Pods</DrawerTitle>
+        <PodsDetailsList pods={this.pods} />
+      </div>
+    );
+  }
+}
 

Since NamespaceDetailsItem extends React.Component<KubeObjectDetailsProps<Namespace>>, it can access the current namespace object (type Namespace) through this.props.object. You can query this object for many details about the current namespace. @@ -1638,51 +1638,51 @@ This is done simply by marking the pods field as an observabl Details are placed in drawers, and using Renderer.Component.DrawerTitle provides a separator from details above this one. Multiple details in a drawer can be placed in <Renderer.Component.DrawerItem> elements for further separation, if desired. The rest of this example's details are defined in PodsDetailsList, found in ./pods-details-list.tsx:

-
import React from "react";
-import { Renderer } from "@k8slens/extensions";
+
import React from "react";
+import { Renderer } from "@k8slens/extensions";
 
-const {
-  Component: { TableHead, TableRow, TableCell, Table },
-} = Renderer;
+const {
+  Component: { TableHead, TableRow, TableCell, Table },
+} = Renderer;
 
-type Pod = Renderer.K8sApi.Pod;
+type Pod = Renderer.K8sApi.Pod;
 
-interface PodsDetailsListProps {
-  pods?: Pod[];
-}
+interface PodsDetailsListProps {
+  pods?: Pod[];
+}
 
-export class PodsDetailsList extends React.Component<PodsDetailsListProps> {
-  getTableRow = (pod: Pod) => {
-    return (
-      <TableRow key={index} nowrap>
-        <TableCell className="podName">{pods[index].getName()}</TableCell>
-        <TableCell className="podAge">{pods[index].getAge()}</TableCell>
-        <TableCell className="podStatus">{pods[index].getStatus()}</TableCell>
-      </TableRow>
-    );
-  };
+export class PodsDetailsList extends React.Component<PodsDetailsListProps> {
+  getTableRow = (pod: Pod) => {
+    return (
+      <TableRow key={index} nowrap>
+        <TableCell className="podName">{pods[index].getName()}</TableCell>
+        <TableCell className="podAge">{pods[index].getAge()}</TableCell>
+        <TableCell className="podStatus">{pods[index].getStatus()}</TableCell>
+      </TableRow>
+    );
+  };
 
-  render() {
-    const { pods } = this.props;
+  render() {
+    const { pods } = this.props;
 
-    if (!pods?.length) {
-      return null;
-    }
+    if (!pods?.length) {
+      return null;
+    }
 
-    return (
-      <div>
-        <Table>
-          <TableHead>
-            <TableCell className="podName">Name</TableCell>
-            <TableCell className="podAge">Age</TableCell>
-            <TableCell className="podStatus">Status</TableCell>
-          </TableHead>
-          {pods.map(this.getTableRow)}
-        </Table>
-      </div>
-    );
-  }
-}
+    return (
+      <div>
+        <Table>
+          <TableHead>
+            <TableCell className="podName">Name</TableCell>
+            <TableCell className="podAge">Age</TableCell>
+            <TableCell className="podStatus">Status</TableCell>
+          </TableHead>
+          {pods.map(this.getTableRow)}
+        </Table>
+      </div>
+    );
+  }
+}
 

PodsDetailsList produces a simple table showing a list of the pods found in this namespace:

DetailsWithPods

diff --git a/master/extensions/guides/resource-stack/index.html b/master/extensions/guides/resource-stack/index.html index 0b70339560..90fd4fc502 100644 --- a/master/extensions/guides/resource-stack/index.html +++ b/master/extensions/guides/resource-stack/index.html @@ -740,70 +740,70 @@ It could be applied automatically to a cluster by the extension, or the end-user

To access the cluster Settings page, right-click the relevant cluster in the left side menu and click Settings.

The resource stack in this example consists of a single kubernetes resource:

-
apiVersion: v1
-kind: Pod
-metadata:
-  name: example-pod
-spec:
-  containers:
-  - name: example-pod
-    image: nginx
+
apiVersion: v1
+kind: Pod
+metadata:
+  name: example-pod
+spec:
+  containers:
+  - name: example-pod
+    image: nginx
 

It is simply a pod named example-pod, running nginx. Assume this content is in the file ../resources/example-pod.yml.

The following code sample shows how to use the Renderer.K8sApi.ResourceStack to manage installing and uninstalling this resource stack:

-
import { Renderer, Common } from "@k8slens/extensions";
-import * as path from "path";
+
import { Renderer, Common } from "@k8slens/extensions";
+import * as path from "path";
 
-const {
-  K8sApi: {
-    ResourceStack,
-    forCluster,
-    Pod,
-  }
-} = Renderer;
+const {
+  K8sApi: {
+    ResourceStack,
+    forCluster,
+    Pod,
+  }
+} = Renderer;
 
-type ResourceStack = Renderer.K8sApi.ResourceStack;
-type Pod = Renderer.K8sApi.Pod;
-type KubernetesCluster = Common.Catalog.KubernetesCluster;
+type ResourceStack = Renderer.K8sApi.ResourceStack;
+type Pod = Renderer.K8sApi.Pod;
+type KubernetesCluster = Common.Catalog.KubernetesCluster;
 
-export class ExampleClusterFeature {
-  protected stack: ResourceStack;
+export class ExampleClusterFeature {
+  protected stack: ResourceStack;
 
-  constructor(protected cluster: KubernetesCluster) {
-    this.stack = new ResourceStack(cluster, "example-resource-stack");
-  }
+  constructor(protected cluster: KubernetesCluster) {
+    this.stack = new ResourceStack(cluster, "example-resource-stack");
+  }
 
-  get resourceFolder() {
-    return path.join(__dirname, "../resources/");
-  }
+  get resourceFolder() {
+    return path.join(__dirname, "../resources/");
+  }
 
-  install(): Promise<string> {
-    console.log("installing example-pod");
-    return this.stack.kubectlApplyFolder(this.resourceFolder);
-  }
+  install(): Promise<string> {
+    console.log("installing example-pod");
+    return this.stack.kubectlApplyFolder(this.resourceFolder);
+  }
 
-  async isInstalled(): Promise<boolean> {
-    try {
-      const podApi = forCluster(this.cluster, Pod);
-      const examplePod = await podApi.get({name: "example-pod", namespace: "default"});
+  async isInstalled(): Promise<boolean> {
+    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;
-      }
-    } catch(e) {
-      console.log("Error getting example-pod:", e);
-    }
-    console.log("didn't find example-pod");
+      if (examplePod?.kind) {
+        console.log("found example-pod");
+        return true;
+      }
+    } catch(e) {
+      console.log("Error getting example-pod:", e);
+    }
+    console.log("didn't find example-pod");
 
-    return false;
-  }
+    return false;
+  }
 
-  async uninstall(): Promise<string> {
-    console.log("uninstalling example-pod");
-    return this.stack.kubectlDeleteFolder(this.resourceFolder);
-  }
-}
+  async uninstall(): Promise<string> {
+    console.log("uninstalling example-pod");
+    return this.stack.kubectlDeleteFolder(this.resourceFolder);
+  }
+}
 

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. @@ -815,86 +815,86 @@ Similarly, ExampleClusterFeature implements an uninstall()isInstalled() simply tries to find a pod named example-pod, as a way to determine if the pod is already installed. This method can be useful in creating a context-sensitive UI for installing/uninstalling the feature, as demonstrated in the next sample code.

To allow the end-user to control the life cycle of this cluster feature the following code sample shows how to implement a user interface based on React and custom Lens UI components:

-
 import React from "react";
- import { Common, Renderer } from "@k8slens/extensions";
- import { observer } from "mobx-react";
- import { computed, observable, makeObservable } from "mobx";
- import { ExampleClusterFeature } from "./example-cluster-feature";
+
 import React from "react";
+ import { Common, Renderer } from "@k8slens/extensions";
+ import { observer } from "mobx-react";
+ import { computed, observable, makeObservable } from "mobx";
+ import { ExampleClusterFeature } from "./example-cluster-feature";
 
- const {
-   Component: {
-     SubTitle, Button,
-   }
- } = Renderer;
+ const {
+   Component: {
+     SubTitle, Button,
+   }
+ } = Renderer;
 
- interface ExampleClusterFeatureSettingsProps {
-   cluster: Common.Catalog.KubernetesCluster;
- }
+ interface ExampleClusterFeatureSettingsProps {
+   cluster: Common.Catalog.KubernetesCluster;
+ }
 
- @observer
- export class ExampleClusterFeatureSettings extends React.Component<ExampleClusterFeatureSettingsProps> {
-  constructor(props: ExampleClusterFeatureSettingsProps) {
-    super(props);
-    makeObservable(this);
-  }
+ @observer
+ export class ExampleClusterFeatureSettings extends React.Component<ExampleClusterFeatureSettingsProps> {
+  constructor(props: ExampleClusterFeatureSettingsProps) {
+    super(props);
+    makeObservable(this);
+  }
 
-  @observable installed = false;
-  @observable inProgress = false;
+  @observable installed = false;
+  @observable inProgress = false;
 
-  feature: ExampleClusterFeature;
+  feature: ExampleClusterFeature;
 
-  async componentDidMount() {
-    this.feature = new ExampleClusterFeature(this.props.cluster);
+  async componentDidMount() {
+    this.feature = new ExampleClusterFeature(this.props.cluster);
 
-    await this.updateFeatureState();
-  }
+    await this.updateFeatureState();
+  }
 
-  async updateFeatureState() {
-    this.installed = await this.feature.isInstalled();
-  }
+  async updateFeatureState() {
+    this.installed = await this.feature.isInstalled();
+  }
 
-   async save() {
-    this.inProgress = true;
+   async save() {
+    this.inProgress = true;
 
-    try {
-      if (this.installed) {
-        await this.feature.uninstall();
-      } else {
-        await this.feature.install();
-      }
-    } finally {
-      this.inProgress = false;
+    try {
+      if (this.installed) {
+        await this.feature.uninstall();
+      } else {
+        await this.feature.install();
+      }
+    } finally {
+      this.inProgress = false;
 
-      await this.updateFeatureState();
-    }
-  }
+      await this.updateFeatureState();
+    }
+  }
 
-  @computed get buttonLabel() {
-    if (this.inProgress && this.installed) return "Uninstalling ...";
-    if (this.inProgress) return "Applying ...";
+  @computed get buttonLabel() {
+    if (this.inProgress && this.installed) return "Uninstalling ...";
+    if (this.inProgress) return "Applying ...";
 
-    if (this.installed) {
-      return "Uninstall";
-    }
+    if (this.installed) {
+      return "Uninstall";
+    }
 
-    return "Apply";
-  }
+    return "Apply";
+  }
 
-  render() {
-    return (
-      <>
-        <section>
-          <SubTitle title="Example Cluster Feature using a Resource Stack" />
-          <Button
-            label={this.buttonLabel}
-            waiting={this.inProgress}
-            onClick={() => this.save()}
-            primary />
-        </section>
-      </>
-    );
-  }
-}
+  render() {
+    return (
+      <>
+        <section>
+          <SubTitle title="Example Cluster Feature using a Resource Stack" />
+          <Button
+            label={this.buttonLabel}
+            waiting={this.inProgress}
+            onClick={() => this.save()}
+            primary />
+        </section>
+      </>
+    );
+  }
+}
 

The ExampleClusterFeatureSettings class extends React.Component and simply renders a subtitle and a button. ExampleClusterFeatureSettings takes the cluster as a prop and when the React component has mounted the ExampleClusterFeature is instantiated using this cluster (in componentDidMount()). @@ -908,26 +908,26 @@ The ExampleClusterFeatureSettings class is marked as an @obse As well, the installed and inProgress fields are marked as @observable, ensuring that the button gets rerendered any time these fields change.

Finally, ExampleClusterFeatureSettings needs to be connected to the extension, and would typically appear on the cluster Settings page via a Renderer.LensExtension.entitySettings entry. The ExampleExtension would look like this:

-
import { Common, Renderer } from "@k8slens/extensions";
-import { ExampleClusterFeatureSettings } from "./src/example-cluster-feature-settings"
-import React from "react"
+
import { Common, Renderer } from "@k8slens/extensions";
+import { ExampleClusterFeatureSettings } from "./src/example-cluster-feature-settings"
+import React from "react"
 
-export default class ExampleExtension extends Renderer.LensExtension {
-  entitySettings = [
-    {
-      apiVersions: ["entity.k8slens.dev/v1alpha1"],
-      kind: "KubernetesCluster",
-      title: "Example Cluster Feature",
-      priority: 5,
-      components: {
-        View: ({ entity = null }: { entity: Common.Catalog.KubernetesCluster}) => (
-           <ExampleClusterFeatureSettings cluster={entity} />
-        )
-      }
-    }
-  ];
+export default class ExampleExtension extends Renderer.LensExtension {
+  entitySettings = [
+    {
+      apiVersions: ["entity.k8slens.dev/v1alpha1"],
+      kind: "KubernetesCluster",
+      title: "Example Cluster Feature",
+      priority: 5,
+      components: {
+        View: ({ entity = null }: { entity: Common.Catalog.KubernetesCluster}) => (
+           <ExampleClusterFeatureSettings cluster={entity} />
+        )
+      }
+    }
+  ];
 
-}
+}
 

An entity setting is added to the entitySettings array field of the Renderer.LensExtension class. Because Lens's catalog can contain different kinds of entities, the kind must be identified. diff --git a/master/extensions/guides/stores/index.html b/master/extensions/guides/stores/index.html index 25e3743c80..9e7c66b5bc 100644 --- a/master/extensions/guides/stores/index.html +++ b/master/extensions/guides/stores/index.html @@ -793,37 +793,37 @@ It is also recommenced to delete the instance, using the inherited static method Everywhere else in your code you should use the getInstance() static method. This is so that your data is kept up to date and not persisted longer than expected.

The following example code creates a store for the appPreferences guide example:

-
import { Common } from "@k8slens/extensions";
-import { observable, makeObservable } from "mobx";
+
import { Common } from "@k8slens/extensions";
+import { observable, makeObservable } from "mobx";
 
-export type ExamplePreferencesModel = {
-  enabled: boolean;
-};
+export type ExamplePreferencesModel = {
+  enabled: boolean;
+};
 
-export class ExamplePreferencesStore extends Common.Store.ExtensionStore<ExamplePreferencesModel> {
+export class ExamplePreferencesStore extends Common.Store.ExtensionStore<ExamplePreferencesModel> {
 
-  @observable  enabled = false;
+  @observable  enabled = false;
 
-  private constructor() {
-    super({
-      configName: "example-preferences-store",
-      defaults: {
-        enabled: false
-      }
-    });
-    makeObservable(this);
-  }
+  private constructor() {
+    super({
+      configName: "example-preferences-store",
+      defaults: {
+        enabled: false
+      }
+    });
+    makeObservable(this);
+  }
 
-  protected fromStore({ enabled }: ExamplePreferencesModel): void {
-    this.enabled = enabled;
-  }
+  protected fromStore({ enabled }: ExamplePreferencesModel): void {
+    this.enabled = enabled;
+  }
 
-  toJSON(): ExamplePreferencesModel {
-    return {
-      enabled: this.enabled
-    };
-  }
-}
+  toJSON(): ExamplePreferencesModel {
+    return {
+      enabled: this.enabled
+    };
+  }
+}
 

First, our example defines the extension's data model using the simple ExamplePreferencesModel type. This has a single field, enabled, which represents the preference's state. @@ -849,74 +849,74 @@ Thus it prevents an instance from being created when the constructor args are no

The following example code, modified from the appPreferences guide demonstrates how to use the extension store. ExamplePreferencesStore must be loaded in the main process, where loaded stores are automatically saved when exiting Lens. This can be done in ./main.ts:

-
import { Main } from "@k8slens/extensions";
-import { ExamplePreferencesStore } from "./src/example-preference-store";
+
import { Main } from "@k8slens/extensions";
+import { ExamplePreferencesStore } from "./src/example-preference-store";
 
-export default class ExampleMainExtension extends Main.LensExtension {
-  async onActivate() {
-    await ExamplePreferencesStore.getInstanceOrCreate().loadExtension(this);
-  }
-}
+export default class ExampleMainExtension extends Main.LensExtension {
+  async onActivate() {
+    await ExamplePreferencesStore.getInstanceOrCreate().loadExtension(this);
+  }
+}
 

Here, ExamplePreferencesStore loads with ExamplePreferencesStore.getInstanceOrCreate().loadExtension(this), which is conveniently called from the onActivate() method of ExampleMainExtension. Similarly, ExamplePreferencesStore must load in the renderer process where the appPreferences are handled. This can be done in ./renderer.ts:

-
import { Renderer } from "@k8slens/extensions";
-import { ExamplePreferenceHint, ExamplePreferenceInput } from "./src/example-preference";
-import { ExamplePreferencesStore } from "./src/example-preference-store";
-import React from "react";
+
import { Renderer } from "@k8slens/extensions";
+import { ExamplePreferenceHint, ExamplePreferenceInput } from "./src/example-preference";
+import { ExamplePreferencesStore } from "./src/example-preference-store";
+import React from "react";
 
-export default class ExampleRendererExtension extends Renderer.LensExtension {
+export default class ExampleRendererExtension extends Renderer.LensExtension {
 
-  async onActivate() {
-    await ExamplePreferencesStore.getInstanceOrCreate().loadExtension(this);
-  }
+  async onActivate() {
+    await ExamplePreferencesStore.getInstanceOrCreate().loadExtension(this);
+  }
 
-  appPreferences = [
-    {
-      title: "Example Preferences",
-      components: {
-        Input: () => <ExamplePreferenceInput />,
-        Hint: () => <ExamplePreferenceHint/>
-      }
-    }
-  ];
-}
+  appPreferences = [
+    {
+      title: "Example Preferences",
+      components: {
+        Input: () => <ExamplePreferenceInput />,
+        Hint: () => <ExamplePreferenceHint/>
+      }
+    }
+  ];
+}
 

Again, ExamplePreferencesStore.getInstanceOrCreate().loadExtension(this) is called to load ExamplePreferencesStore, this time from the onActivate() method of ExampleRendererExtension.

ExamplePreferenceInput is defined in ./src/example-preference.tsx:

-
import { Renderer } from "@k8slens/extensions";
-import { observer } from "mobx-react";
-import React from "react";
-import { ExamplePreferencesStore } from "./example-preference-store";
+
import { Renderer } from "@k8slens/extensions";
+import { observer } from "mobx-react";
+import React from "react";
+import { ExamplePreferencesStore } from "./example-preference-store";
 
-const {
-  Component: {
-    Checkbox,
-  },
-} = Renderer;
+const {
+  Component: {
+    Checkbox,
+  },
+} = Renderer;
 
-@observer
-export class ExamplePreferenceInput extends React.Component {
+@observer
+export class ExamplePreferenceInput extends React.Component {
 
-  render() {
-    return (
-      <Checkbox
-        label="I understand appPreferences"
-        value={ExamplePreferencesStore.getInstance().enabled}
-        onChange={v => { ExamplePreferencesStore.getInstance().enabled = v; }}
-      />
-    );
-  }
-}
+  render() {
+    return (
+      <Checkbox
+        label="I understand appPreferences"
+        value={ExamplePreferencesStore.getInstance().enabled}
+        onChange={v => { ExamplePreferencesStore.getInstance().enabled = v; }}
+      />
+    );
+  }
+}
 
-export class ExamplePreferenceHint extends React.Component {
-  render() {
-    return (
-      <span>This is an example of an appPreference for extensions.</span>
-    );
-  }
-}
+export class ExamplePreferenceHint extends React.Component {
+  render() {
+    return (
+      <span>This is an example of an appPreference for extensions.</span>
+    );
+  }
+}
 

The only change here is that ExamplePreferenceProps defines its preference field as an ExamplePreferencesStore type. Everything else works as before, except that now the enabled state persists across Lens restarts because it is managed by the diff --git a/master/extensions/testing-and-publishing/publishing/index.html b/master/extensions/testing-and-publishing/publishing/index.html index 30ef760914..1a231dd950 100644 --- a/master/extensions/testing-and-publishing/publishing/index.html +++ b/master/extensions/testing-and-publishing/publishing/index.html @@ -845,7 +845,7 @@ Once you have set up an account with NPM (https://www.npmjs.com/signup) and logg

  • Run git push && git push --tags to push the commit that NPM creates to your git remote.
  • It is probably a good idea to put into your README.md the following instructions for your users to get the tarball download link.

    -
    npm view <extension-name> dist.tarball
    +
    npm view <extension-name> dist.tarball
     

    This will output the link that they will need to give to Lens to install your extension.

    Publish via GitHub Releases#

    diff --git a/master/extensions/testing-and-publishing/testing/index.html b/master/extensions/testing-and-publishing/testing/index.html index 32fdd21ff6..d66a3908fc 100644 --- a/master/extensions/testing-and-publishing/testing/index.html +++ b/master/extensions/testing-and-publishing/testing/index.html @@ -864,35 +864,35 @@ These components can be tested by popular React testing tools like
    import React from "react"
    -import { Renderer } from "@k8slens/extensions";
    +
    import React from "react"
    +import { Renderer } from "@k8slens/extensions";
     
    -const {
    -  Component: {
    -    Icon,
    -  },
    -} = Renderer;
    +const {
    +  Component: {
    +    Icon,
    +  },
    +} = Renderer;
     
    -const GlobalPageMenuIcon = ({ navigate }: { navigate?: () => void }): JSX.Element => (
    -  <Icon
    -    material="trip_origin"
    -    onClick={() => navigate()}
    -    data-testid="global-page-menu-icon"
    -  />
    -)
    +const GlobalPageMenuIcon = ({ navigate }: { navigate?: () => void }): JSX.Element => (
    +  <Icon
    +    material="trip_origin"
    +    onClick={() => navigate()}
    +    data-testid="global-page-menu-icon"
    +  />
    +)
     

    The test

    -
    import React from "react"
    -import { render, screen, fireEvent } from "@testing-library/react";
    +
    import React from "react"
    +import { render, screen, fireEvent } from "@testing-library/react";
     
    -import GlobalPageMenuIcon from "./GlobalPageMenuIcon";
    +import GlobalPageMenuIcon from "./GlobalPageMenuIcon";
     
    -test("click called navigate()", () => {
    -    const navigate = jest.fn();
    -    render(<GlobalPageMenuIcon navigate={navigate} />);
    -    fireEvent.click(screen.getByTestId("global-page-menu-icon"));
    -    expect(navigate).toHaveBeenCalled();
    -  });
    +test("click called navigate()", () => {
    +    const navigate = jest.fn();
    +    render(<GlobalPageMenuIcon navigate={navigate} />);
    +    fireEvent.click(screen.getByTestId("global-page-menu-icon"));
    +    expect(navigate).toHaveBeenCalled();
    +  });
     

    In the example we used React Testing Library but any React testing framework can be used to test renderer process UI components.

    There are more example tests in the generator's template. @@ -917,11 +917,11 @@ To use console.log(), note that Lens is based on Electron, and that

    Linux#

    On Linux, you can access the Main process logs using the Lens PID. First get the PID:

    -
    ps aux | grep Lens | grep -v grep
    +
    ps aux | grep Lens | grep -v grep
     

    Then get the Main process logs using the PID:

    -
    tail -f /proc/[pid]/fd/1 # stdout (console.log)
    -tail -f /proc/[pid]/fd/2 # stdout (console.error)
    +
    tail -f /proc/[pid]/fd/1 # stdout (console.log)
    +tail -f /proc/[pid]/fd/2 # stdout (console.error)
     
    diff --git a/master/sitemap.xml b/master/sitemap.xml index 7cba80c9d8..fa1bab5aa3 100644 --- a/master/sitemap.xml +++ b/master/sitemap.xml @@ -2,1462 +2,1462 @@ https://api-docs.k8slens.dev/master/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/architecture/decisions/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/extension-migration/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Common.Catalog.CatalogCategory/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Common.Catalog.CatalogEntity/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Common.Catalog.GeneralEntity/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Common.Catalog.KubernetesCluster/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Common.Catalog.WebLink/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Common.Store.ExtensionStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Main.Ipc/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Main.K8sApi.KubeObjectStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Main.K8sApi.ResourceStack/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Main.LensExtension/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Catalog.CatalogEntityRegistry/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.DrawerParamToggler/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.Input/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.MenuItem/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.NotificationsStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.PageLayout/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.PodDetailsList/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.SettingLayout/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.Slider/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.Spinner/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.Stepper/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.SubTitle/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.Tab/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.TableCell/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.TableHead/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.TableRow/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.Tabs/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.TerminalStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.Tooltip/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.Wizard/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.WizardLayout/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Component.WizardStep/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Ipc/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.CRDResourceStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.CRDStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.ClusterRole/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.ClusterRoleBinding/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.ConfigMap/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.ConfigMapsStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.CronJob/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.CronJobStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.CustomResourceDefinition/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.DaemonSet/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.DaemonSetStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.Deployment/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.DeploymentApi/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.DeploymentStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.Endpoint/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.EndpointStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.EventStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.HPAStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.HorizontalPodAutoscaler/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.Ingress/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.IngressApi/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.IngressStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.Job/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.JobStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.KubeApi/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.KubeEvent/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.KubeJsonApi/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.KubeObject/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.KubeObjectStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.KubeStatus/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.LimitRange/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.LimitRangesStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.Namespace/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.NamespaceStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.NetworkPolicy/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.NetworkPolicyStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.Node/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.NodesApi/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.NodesStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.PersistentVolume/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.PersistentVolumeClaim/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.PersistentVolumeClaimsApi/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.PersistentVolumesStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.Pod/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.PodDisruptionBudget/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.PodDisruptionBudgetsStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.PodsApi/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.PodsStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.PriorityClass/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.PriorityClassStoreStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.ReplicaSet/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.ReplicaSetStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.ResourceQuota/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.ResourceQuotasStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.ResourceStack/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.Role/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.RoleBinding/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.RoleBindingsStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.RolesStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.Secret/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.SecretsStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.Service/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.ServiceAccount/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.ServiceAccountsStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.ServiceStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.StatefulSet/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.StatefulSetStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.StorageClass/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.StorageClassStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.K8sApi.VolumeClaimStore/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.LensExtension/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/classes/Renderer.Navigation.PageParam/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/enums/Renderer.Component.NotificationStatus/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/enums/Renderer.Component.TooltipPosition/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/enums/Renderer.K8sApi.KubeObjectStatusLevel/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogCategoryEvents/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogCategoryMetadata/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogCategorySpec/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogCategoryVersion/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogEntityActionContext/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogEntityAddMenu/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogEntityAddMenuContext/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogEntityContextMenu/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogEntityContextMenuContext/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogEntityContextMenuNavigate/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogEntityData/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogEntityKindData/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogEntityMetadata/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogEntitySettingsContext/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogEntitySettingsMenu/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.CatalogEntityStatus/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.KubernetesClusterMetadata/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.KubernetesClusterPrometheusMetrics/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.KubernetesClusterSpec/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.KubernetesClusterStatus/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.WebLinkSpec/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Catalog.WebLinkStatus/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.EventBus.AppEvent/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.AppPreferenceComponents/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.AppPreferenceRegistration/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.ClusterPageMenuComponents/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.ClusterPageMenuRegistration/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.CustomCategoryViewComponents/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.CustomCategoryViewProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.CustomCategoryViewRegistration/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.KubeObjectContextMenuItem/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.KubeObjectDetailComponents/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.KubeObjectDetailRegistration/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.KubeObjectHandlers/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.KubeObjectMenuComponents/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.KubeObjectMenuRegistration/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.KubeObjectOnContextMenuOpenContext/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.KubeObjectStatusRegistration/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.PageComponentProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.PageComponents/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.PageParams/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.PageRegistration/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.PageTarget/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.ProtocolHandlerRegistration/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.ProtocolRouteHandler/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.ProtocolRouteParams/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.RegisteredPage/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.ShellEnvContext/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.StatusBarRegistration/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Common.Types.TrayMenuRegistration/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Main.Catalog.CatalogEntityRegistry/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Main.K8sApi.IKubeApiCluster/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.AdditionalCategoryColumnRegistration/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.BadgeProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.BarChartProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.BaseIconProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.ButtonProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.CategoryColumnRegistration/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.CheckboxProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.ConfirmDialogBooleanParams/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.ConfirmDialogParams/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.ConfirmDialogProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.CreateNotificationOptions/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.CustomPlaceholderProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.DialogProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.DrawerItemLabelsProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.DrawerItemProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.DrawerParamTogglerProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.DrawerProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.DrawerTitleProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.IconDataFnArg/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.IconProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.KubeEventDetailsProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.KubeObjectDetailsProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.KubeObjectListLayoutProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.KubeObjectMenuProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.KubeObjectMetaProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.LineProgressProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.MainLayoutProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.MenuActionsProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.MenuContextValue/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.MenuItemProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.MenuPosition/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.MenuProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.MenuStyle/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.MonacoEditorProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.NamespaceSelectProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.Notification/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.PieChartData/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.PieChartProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.PodDetailsListProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.RadioGroupProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.RadioProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.SearchInputProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.SelectOption/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.SelectProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.SettingLayoutProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.SliderProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.SpinnerProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.StatusBrickProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.StepperProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.SubTitleProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.SwitchProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.SwitcherProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.TabLayoutProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.TabLayoutRoute/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.TabProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.TableCellProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.TableHeadProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.TableProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.TableRowProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.TableSortParams/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.TabsProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.TooltipContentFormatters/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.TooltipDecoratorProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.TooltipProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.WizardCommonProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.WizardLayoutProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.WizardProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Component.WizardStepProps/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.K8sApi.BaseKubeJsonApiObjectMetadata/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.K8sApi.IKubeApiCluster/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.K8sApi.ILocalKubeApiConfig/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.K8sApi.IPodContainer/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.K8sApi.IPodContainerStatus/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.K8sApi.IRemoteKubeApiConfig/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.K8sApi.ISecretRef/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.K8sApi.KubeJsonApiData/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.K8sApi.KubeObjectStatus/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.K8sApi.KubeObjectStoreLoadAllParams/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.K8sApi.KubeObjectStoreLoadingParams/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.K8sApi.KubeObjectStoreSubscribeParams/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.K8sApi.KubeStatusData/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.K8sApi.OwnerReference/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Navigation.PageParamInit/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Navigation.URLParams/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/interfaces/Renderer.Theme.LensTheme/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Common.Catalog/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Common.EventBus/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Common.Proxy/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Common.Store/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Common.Types/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Common/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Main.Catalog/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Main.K8sApi/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Main.Navigation/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Main.Power/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Main/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Renderer.Catalog/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Renderer.Component/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Renderer.K8sApi/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Renderer.Navigation/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Renderer.Theme/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/api/modules/Renderer/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/capabilities/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/capabilities/common-capabilities/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/capabilities/styling/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/get-started/anatomy/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/get-started/overview/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/get-started/wrapping-up/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/get-started/your-first-extension/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/guides/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/guides/anatomy/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/guides/catalog/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/guides/components/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/guides/extending-kubernetes-cluster/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/guides/generator/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/guides/ipc/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/guides/kube-object-list-layout/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/guides/main-extension/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/guides/protocol-handlers/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/guides/renderer-extension/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/guides/resource-stack/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/guides/stores/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/guides/working-with-mobx/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/testing-and-publishing/bundling/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/testing-and-publishing/publishing/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/testing-and-publishing/testing/ - 2022-12-30 + 2023-01-03 daily https://api-docs.k8slens.dev/master/extensions/usage/ - 2022-12-30 + 2023-01-03 daily \ No newline at end of file diff --git a/master/sitemap.xml.gz b/master/sitemap.xml.gz index 09cfeecb7c..a2c965b2a8 100644 Binary files a/master/sitemap.xml.gz and b/master/sitemap.xml.gz differ