migration additions -- part 6 (bugs hunting)

Signed-off-by: Roman <ixrock@gmail.com>

extensions/example-extension/webpack.config.js

@@ -18,6 +18,7 @@ module.exports = [
     externals: [
       {
         "@k8slens/extensions": "var global.LensExtensions",
+        "mobx": "var global.Mobx",
         "react": "var global.React"
       }
     ],
@@ -48,6 +49,7 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
+        "mobx": "var global.Mobx"
       }
     ],
     resolve: {

extensions/kube-object-event-status/webpack.config.js

@@ -19,6 +19,7 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
+        "mobx": "var global.Mobx"
       }
     ],
     resolve: {

extensions/license-menu-item/webpack.config.ts

@@ -19,6 +19,7 @@ export default [
     },
     externals: {
       "@k8slens/extensions": "var global.LensExtensions",
+      "mobx": "var global.Mobx",
     },
     resolve: {
       extensions: [".tsx", ".ts", ".js"],

extensions/metrics-cluster-feature/webpack.config.js

@@ -19,6 +19,7 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
+        "mobx": "var global.Mobx"
       }
     ],
     resolve: {

extensions/node-menu/webpack.config.js

@@ -19,6 +19,7 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
+        "mobx": "var global.Mobx"
       }
     ],
     resolve: {

extensions/pod-menu/webpack.config.js

@@ -19,6 +19,8 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
+        "mobx": "var global.Mobx",
+        "mobx-react": "var global.MobxReact"
       }
     ],
     resolve: {

extensions/survey/package-lock.json

@@ -5166,18 +5166,18 @@
       "dev": true
     },
     "mobx-react": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-6.3.1.tgz",
-      "integrity": "sha512-IOxdJGnRSNSJrL2uGpWO5w9JH5q5HoxEqwOF4gye1gmZYdjoYkkMzSGMDnRCUpN/BNzZcFoMdHXrjvkwO7KgaQ==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.1.0.tgz",
+      "integrity": "sha512-DxvA6VXmnZ+N9f/UTtolWtdRnAAQY2iHWTSPLktfpj8NKlXUe4dabBAjuXrBcZUM8GjLWnxD1ZEjssXq1M0RAw==",
       "dev": true,
       "requires": {
-        "mobx-react-lite": "^2.2.0"
+        "mobx-react-lite": "^3.2.0"
       }
     },
     "mobx-react-lite": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-2.2.2.tgz",
-      "integrity": "sha512-2SlXALHIkyUPDsV4VTKVR9DW7K3Ksh1aaIv3NrNJygTbhXe2A9GrcKHZ2ovIiOp/BXilOcTYemfHHZubP431dg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.2.0.tgz",
+      "integrity": "sha512-q5+UHIqYCOpBoFm/PElDuOhbcatvTllgRp3M1s+Hp5j0Z6XNgDbgqxawJ0ZAUEyKM8X1zs70PCuhAIzX1f4Q/g==",
       "dev": true
     },
     "move-concurrently": {

extensions/survey/package.json

@@ -17,10 +17,10 @@
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
     "got": "^11.8.1",
     "jest": "^26.6.3",
-    "mobx": "^6.2.0",
-    "mobx-react": "^6.2.2",
+    "react": "*",
+    "mobx": "*",
+    "mobx-react": "*",
     "node-machine-id": "^1.1.12",
-    "react": "^16.13.1",
     "refiner-js": "^1.0.1",
     "ts-loader": "^8.0.4",
     "typescript": "^4.0.3",

extensions/survey/webpack.config.js

@@ -19,6 +19,7 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
+        "mobx": "var global.Mobx"
       }
     ],
     resolve: {
@@ -49,6 +50,8 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
+        "mobx": "var global.Mobx",
+        "mobx-react": "var global.MobxReact"
       }
     ],
     resolve: {

extensions/telemetry/webpack.config.js

@@ -19,6 +19,7 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
+        "mobx": "var global.Mobx"
       }
     ],
     resolve: {
@@ -49,6 +50,8 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
+        "mobx": "var global.Mobx",
+        "mobx-react": "var global.MobxReact"
       }
     ],
     resolve: {

src/common/libs-config.ts

@@ -3,11 +3,11 @@
 import { configure } from "mobx";
 import { enableMapSet, setAutoFreeze } from "immer";
 
-// Mobx, docs: https://mobx.js.org/configuration.html
+// Mobx
+// Docs: https://mobx.js.org/configuration.html
 configure({
-  isolateGlobalState: true, // allow to use different versions of mobx in app & extensions
-  enforceActions: "never", // skip required usage of @action for class methods
-  reactionRequiresObservable: true,
+  isolateGlobalState: true,
+  enforceActions: "never",
 });
 
 // Immer

src/main/index.ts

@@ -3,6 +3,7 @@
 import "../common/system-ca";
 import "../common/libs-config";
 import "../common/prometheus-providers";
+import * as Mobx from "mobx";
 import * as LensExtensions from "../extensions/core-api";
 import { app, autoUpdater, ipcMain, dialog, powerMonitor } from "electron";
 import { appName, isMac } from "../common/vars";
@@ -253,5 +254,6 @@ export const LensExtensionsApi = {
 };
 
 export {
+  Mobx,
   LensExtensionsApi as LensExtensions,
 };

src/renderer/bootstrap.tsx

@@ -1,6 +1,8 @@
 import "./components/app.scss";
 import "../common/libs-config";
-import * as React from "react";
+import React from "react";
+import * as Mobx from "mobx";
+import * as MobxReact from "mobx-react";
 import * as ReactRouter from "react-router";
 import * as ReactRouterDom from "react-router-dom";
 import * as LensExtensions from "../extensions/extension-api";
@@ -8,7 +10,7 @@ import { render, unmountComponentAtNode } from "react-dom";
 import { clusterStore } from "../common/cluster-store";
 import { userStore } from "../common/user-store";
 import { delay } from "../common/utils";
-import { isDevelopment, isMac } from "../common/vars";
+import { isMac, isDevelopment } from "../common/vars";
 import { extensionDiscovery } from "../extensions/extension-discovery";
 import { extensionLoader } from "../extensions/extension-loader";
 import { extensionsStore } from "../extensions/extensions-store";
@@ -37,6 +39,8 @@ export {
   React,
   ReactRouter,
   ReactRouterDom,
+  Mobx,
+  MobxReact,
   LensExtensions
 };
 
@@ -75,8 +79,8 @@ export async function bootstrap(App: AppComponent) {
     }
   });
   render(<>
-    {isMac && <div id="draggable-top"/>}
-    <App/>
+    {isMac && <div id="draggable-top" />}
+    <App />
   </>, rootElem);
 }
 

src/renderer/components/layout/page-layout.tsx

@@ -1,8 +1,6 @@
 import "./page-layout.scss";
 
 import React from "react";
-import { makeObservable } from "mobx";
-import { observer } from "mobx-react";
 import { autobind, cssNames, IClassName } from "../../utils";
 import { navigation } from "../../navigation";
 import { Icon } from "../icon";
@@ -24,15 +22,9 @@ const defaultProps: Partial<PageLayoutProps> = {
   contentGaps: true,
 };
 
-@observer
 export class PageLayout extends React.Component<PageLayoutProps> {
   static defaultProps = defaultProps as object;
 
-  constructor(props: PageLayoutProps) {
-    super(props);
-    makeObservable(this);
-  }
-
   @autobind()
   back(evt?: React.MouseEvent | KeyboardEvent) {
     if (this.props.back) {