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")
+ }
+}
Menus#
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:

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:

@@ -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
-}
+