Fix tests from the revert of react 18

Signed-off-by: Sebastian Malton <sebastian@malton.name>

package.json

@@ -203,6 +203,7 @@
     "@hapi/call": "^8.0.1",
     "@hapi/subtext": "^7.0.3",
     "@kubernetes/client-node": "^0.16.3",
+    "@material-ui/styles": "^4.11.5",
     "@ogre-tools/fp": "5.2.0",
     "@ogre-tools/injectable": "5.2.0",
     "@ogre-tools/injectable-react": "5.2.0",
@@ -281,8 +282,9 @@
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@sentry/types": "^6.19.7",
+    "@testing-library/dom": "^7.31.2",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.0.1",
+    "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.5.0",
     "@types/byline": "^4.2.33",
     "@types/chart.js": "^2.9.36",
@@ -295,7 +297,6 @@
     "@types/fs-extra": "^9.0.13",
     "@types/glob-to-regexp": "^0.4.1",
     "@types/gunzip-maybe": "^1.4.0",
-    "@types/hoist-non-react-statics": "^3.3.1",
     "@types/html-webpack-plugin": "^3.2.6",
     "@types/http-proxy": "^1.17.9",
     "@types/jest": "^26.0.24",
@@ -311,9 +312,10 @@
     "@types/npm": "^2.0.32",
     "@types/proper-lockfile": "^4.1.2",
     "@types/randomcolor": "^0.5.6",
-    "@types/react": "^18.0.1",
+    "@types/react": "^17.0.45",
     "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "^18.0.0",
+    "@types/react-dom": "^17.0.16",
+    "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-table": "^7.7.11",
     "@types/react-virtualized-auto-sizer": "^1.0.1",

src/extensions/npm/extensions/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8slens/extensions",
-  "version": "5.5.0-alpha.0.1650655975317",
+  "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -101,9 +101,9 @@
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "@types/react": {
-      "version": "18.0.7",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.7.tgz",
-      "integrity": "sha512-CXSXHzTexlX9esf4ReIUJeaemKcmBEvYzxHDUk19c3BCcEGUvUjkeC3jkscPSfSaQ6SPDRNd/zMxi8oc/P1zxA==",
+      "version": "17.0.45",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.45.tgz",
+      "integrity": "sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -118,11 +118,11 @@
       }
     },
     "@types/react-dom": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.0.tgz",
-      "integrity": "sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==",
+      "version": "17.0.16",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.16.tgz",
+      "integrity": "sha512-DWcXf8EbMrO/gWnQU7Z88Ws/p16qxGpPyjTKTpmBSFKeE+HveVubqGO1CVK7FrwlWD5MuOcvh8gtd0/XO38NdQ==",
       "requires": {
-        "@types/react": "*"
+        "@types/react": "^17"
       }
     },
     "@types/react-router": {
@@ -445,17 +445,17 @@
       "integrity": "sha512-pHZ/cySF00FVENDWIDzJyoObFahK6Eg4d0papqm6d7yMkxWTZ/S/csqJX1A3PsYy4t5k3z2QnlwuCfMW5lSEwA=="
     },
     "mobx-react": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.3.0.tgz",
-      "integrity": "sha512-RGEcwZokopqyJE5JPwXKB9FWMSqFM9NJVO2QPI+z6laJTJeBHqvPicjnKgY5mvihxTeXB1+72TnooqUePeGV1g==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.4.0.tgz",
+      "integrity": "sha512-gbUwaKZK09SiAleTMxNMKs1MYKTpoIEWJLTLRIR/xnALuuHET8wkL8j1nbc1/6cDkOWVyKz/ReftILx0Pdh2PQ==",
       "requires": {
-        "mobx-react-lite": "^3.3.0"
+        "mobx-react-lite": "^3.4.0"
       }
     },
     "mobx-react-lite": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.3.0.tgz",
-      "integrity": "sha512-U/kMSFtV/bNVgY01FuiGWpRkaQVHozBq5CEBZltFvPt4FcV111hEWkgwqVg9GPPZSEuEdV438PEz8mk8mKpYlA=="
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.0.tgz",
+      "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ=="
     },
     "object-assign": {
       "version": "4.1.1",

src/extensions/npm/extensions/package.json

@@ -2,7 +2,7 @@
   "name": "@k8slens/extensions",
   "productName": "OpenLens extensions",
   "description": "OpenLens - Open Source Kubernetes IDE: extensions",
-  "version": "5.5.0-alpha.0.1650655975317",
+  "version": "0.0.1",
   "copyright": "© 2021 OpenLens Authors",
   "license": "MIT",
   "main": "dist/src/extensions/extension-api.js",
@@ -18,8 +18,8 @@
   "dependencies": {
     "@material-ui/core": "4.12.3",
     "@types/node": "14.17.14",
-    "@types/react": "^18.0.3",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^17.0.45",
+    "@types/react-dom": "^17.0.16",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
     "conf": "^7.0.1",

src/renderer/components/+config-secrets/__tests__/secret-details.test.tsx

@@ -8,7 +8,9 @@ import { render } from "@testing-library/react";
 import { SecretDetails } from "../secret-details";
 import { Secret, SecretType } from "../../../../common/k8s-api/endpoints";
 
-jest.mock("../../kube-object-meta/kube-object-meta");
+jest.mock("../../kube-object-meta/kube-object-meta", () => ({
+  KubeObjectMeta: () => null,
+}));
 
 
 describe("SecretDetails tests", () => {

src/renderer/components/+extensions/__tests__/extensions.test.tsx

@@ -24,6 +24,11 @@ import directoryForDownloadsInjectable from "../../../../common/app-paths/direct
 import getConfigurationFileModelInjectable from "../../../../common/get-configuration-file-model/get-configuration-file-model.injectable";
 import appVersionInjectable from "../../../../common/get-configuration-file-model/app-version/app-version.injectable";
 import assert from "assert";
+import type { InstallFromInput } from "../install-from-input/install-from-input";
+import installFromInputInjectable from "../install-from-input/install-from-input.injectable";
+import type { ExtensionInstallationStateStore } from "../../../../extensions/extension-installation-state-store/extension-installation-state-store";
+import extensionInstallationStateStoreInjectable from "../../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
+import { observable, when } from "mobx";
 
 mockWindow();
 
@@ -49,6 +54,8 @@ jest.mock("../../../../common/utils/tar");
 describe("Extensions", () => {
   let extensionLoader: ExtensionLoader;
   let extensionDiscovery: ExtensionDiscovery;
+  let installFromInput: jest.MockedFunction<InstallFromInput>;
+  let extensionInstallationStateStore: ExtensionInstallationStateStore;
   let render: DiRender;
 
   beforeEach(async () => {
@@ -68,8 +75,13 @@ describe("Extensions", () => {
 
     render = renderFor(di);
 
+    installFromInput = jest.fn();
+
+    di.override(installFromInputInjectable, () => installFromInput);
+
     extensionLoader = di.inject(extensionLoaderInjectable);
     extensionDiscovery = di.inject(extensionDiscoveryInjectable);
+    extensionInstallationStateStore = di.inject(extensionInstallationStateStoreInjectable);
 
     extensionLoader.addExtension({
       id: "extensionId",
@@ -131,7 +143,17 @@ describe("Extensions", () => {
   it("disables install button while installing", async () => {
     render(<Extensions />);
 
+    const resolveInstall = observable.box(false);
+
     (fse.unlink as jest.MockedFunction<typeof fse.unlink>).mockReturnValue(Promise.resolve());
+    installFromInput.mockImplementation(async (input) => {
+      expect(input).toBe("https://test.extensionurl/package.tgz");
+
+      const clear = extensionInstallationStateStore.startPreInstall();
+
+      await when(() => resolveInstall.get());
+      clear();
+    });
 
     fireEvent.change(await screen.findByPlaceholderText("File path or URL", {
       exact: false,
@@ -143,6 +165,7 @@ describe("Extensions", () => {
 
     fireEvent.click(await screen.findByText("Install"));
     expect((await screen.findByText("Install")).closest("button")).toBeDisabled();
+    resolveInstall.set(true);
   });
 
   it("displays spinner while extensions are loading", () => {

src/renderer/components/+extensions/extensions.tsx

@@ -35,13 +35,14 @@ import installOnDropInjectable from "./install-on-drop/install-on-drop.injectabl
 import { supportedExtensionFormats } from "./supported-extension-formats";
 import extensionInstallationStateStoreInjectable from "../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
 import type { ExtensionInstallationStateStore } from "../../../extensions/extension-installation-state-store/extension-installation-state-store";
+import type { InstallFromInput } from "./install-from-input/install-from-input";
 
 interface Dependencies {
   userExtensions: IComputedValue<InstalledExtension[]>;
   enableExtension: (id: LensExtensionId) => void;
   disableExtension: (id: LensExtensionId) => void;
   confirmUninstallExtension: ConfirmUninstallExtension;
-  installFromInput: (input: string) => Promise<void>;
+  installFromInput: InstallFromInput;
   installFromSelectFileDialog: () => Promise<void>;
   installOnDrop: (files: File[]) => Promise<void>;
   extensionInstallationStateStore: ExtensionInstallationStateStore;

src/renderer/components/+extensions/install-from-input/install-from-input.tsx

@@ -16,6 +16,8 @@ import type { ExtensionInfo } from "../attempt-install-by-info.injectable";
 import type { ExtensionInstallationStateStore } from "../../../../extensions/extension-installation-state-store/extension-installation-state-store";
 import { AsyncInputValidationError } from "../../input/input_validators";
 
+export type InstallFromInput = (input: string) => Promise<void>;
+
 interface Dependencies {
   attemptInstall: (request: InstallRequest, disposer?: ExtendableDisposer) => Promise<void>;
   attemptInstallByInfo: (extensionInfo: ExtensionInfo) => Promise<void>;
@@ -26,8 +28,8 @@ export const installFromInput = ({
   attemptInstall,
   attemptInstallByInfo,
   extensionInstallationStateStore,
-}: Dependencies) => (
-  async (input: string): Promise<void> => {
+}: Dependencies): InstallFromInput => (
+  async (input) => {
     let disposer: ExtendableDisposer | undefined = undefined;
 
     try {

src/renderer/components/+network-policies/__tests__/network-policy-details.test.tsx

@@ -8,7 +8,9 @@ import { findByTestId, findByText, render } from "@testing-library/react";
 import { NetworkPolicy } from "../../../../common/k8s-api/endpoints";
 import { NetworkPolicyDetails } from "../network-policy-details";
 
-jest.mock("../../kube-object-meta");
+jest.mock("../../kube-object-meta/kube-object-meta", () => ({
+  KubeObjectMeta: () => null,
+}));
 
 describe("NetworkPolicyDetails", () => {
   it("should render w/o errors", () => {

src/renderer/components/input/drop-file-input.tsx

@@ -11,22 +11,22 @@ import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import logger from "../../../main/logger";
 
-export interface DropFileInputProps extends React.DOMAttributes<any> {
+export interface DropFileInputProps<T extends HTMLElement> extends React.DOMAttributes<T> {
   className?: IClassName;
   disabled?: boolean;
-  onDropFiles(files: File[], meta: DropFileMeta): void;
+  onDropFiles(files: File[], meta: DropFileMeta<T>): void;
 }
 
-export interface DropFileMeta<T extends HTMLElement = any> {
+export interface DropFileMeta<T extends HTMLElement> {
   evt: React.DragEvent<T>;
 }
 
 @observer
-export class DropFileInput<T extends HTMLElement = any> extends React.Component<DropFileInputProps> {
+export class DropFileInput<T extends HTMLElement> extends React.Component<DropFileInputProps<T>> {
   @observable dropAreaActive = false;
   dragCounter = 0; // Counter preventing firing onDragLeave() too early (https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element)
 
-  constructor(props: DropFileInputProps) {
+  constructor(props: DropFileInputProps<T>) {
     super(props);
     makeObservable(this);
     autoBind(this);

src/renderer/components/table/react-table.module.scss

@@ -16,6 +16,7 @@
 }
 
 .tr {
+  @apply flex;
   margin: calc(var(--margin) * 1.6) var(--margin);
 }
 
@@ -40,4 +41,4 @@
 
 .actions {
   @apply justify-end;
-}
+}

src/renderer/components/test-utils/renderFor.tsx

@@ -19,9 +19,6 @@ export const renderFor: DiRenderFor = (di) => (ui) => {
         {ui}
       </DiContextProvider>
     ),
-    {
-      legacyRoot: true,
-    },
   );
 
   return {