chore: fix imports for error-boundary and error-boundary

Signed-off-by: Gabriel <gaccettola@mirantis.com>

package-lock.json

@@ -37220,7 +37220,10 @@
       "version": "1.0.0-alpha.0",
       "license": "MIT",
       "dependencies": {
-        "@ogre-tools/injectable-react": "12.0.1"
+        "@ogre-tools/injectable": "^15.3.1",
+        "@ogre-tools/injectable-react": "12.0.1",
+        "history": "^4.10.1",
+        "mobx-observable-history": "^2.0.3"
       },
       "devDependencies": {
         "@async-fn/jest": "^1.6.4",
@@ -37230,6 +37233,7 @@
         "@testing-library/user-event": "^12.8.3"
       },
       "peerDependencies": {
+        "@k8slens/button": "^1.0.0-alpha.1",
         "@k8slens/utilities": "^1.0.0-alpha.1",
         "auto-bind": "^4.0.0",
         "lodash": "^4.17.21",

packages/ui-components/error-boundary/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@k8slens/eslint-config/eslint",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
+}

packages/ui-components/error-boundary/.swcrc

@@ -0,0 +1,19 @@
+{
+  "module": {
+    "type": "commonjs"
+  },
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": true,
+      "dynamicImport": false
+    },
+    "transform": {
+      "legacyDecorator": true,
+      "decoratorMetadata": true
+    },
+    "target": "es2019"
+  }
+}
+

packages/ui-components/error-boundary/index.ts

@@ -1,2 +1 @@
 export * from "./src/error-boundary";
-export * from "./src/withTooltip";

packages/ui-components/error-boundary/package.json

@@ -25,14 +25,17 @@
   "homepage": "https://github.com/lensapp/lens",
   "scripts": {
     "build": "webpack",
-    "test:unit": "jest --coverage --runInBand",
     "lint": "lens-lint",
     "lint:fix": "lens-lint --fix"
   },
   "dependencies": {
-    "@ogre-tools/injectable-react": "12.0.1"
+    "@ogre-tools/injectable": "^15.3.1",
+    "@ogre-tools/injectable-react": "12.0.1",
+    "history": "^4.10.1",
+    "mobx-observable-history": "^2.0.3"
   },
   "peerDependencies": {
+    "@k8slens/button": "^1.0.0-alpha.1",
     "@k8slens/utilities": "^1.0.0-alpha.1",
     "auto-bind": "^4.0.0",
     "lodash": "^4.17.21",

packages/ui-components/error-boundary/src/error-boundary.scss

@@ -4,7 +4,7 @@
  */
 
 .ErrorBoundary {
-  --flex-gap: #{$padding * 2};
+  --flex-gap: #{8px * 2};
 
   padding: var(--flex-gap);
   word-break: break-all;

packages/ui-components/error-boundary/src/error-boundary.tsx

@@ -8,12 +8,14 @@ import "./error-boundary.scss";
 import type { ErrorInfo } from "react";
 import React from "react";
 import { observer } from "mobx-react";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
-import { issuesTrackerUrl, forumsUrl } from "../../../common/vars";
 import type { SingleOrMany } from "@k8slens/utilities";
 import type { ObservableHistory } from "mobx-observable-history";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import observableHistoryInjectable from "../../navigation/observable-history.injectable";
+import observableHistoryInjectable from "./routing/observable-history.injectable";
+
+const issuesTrackerUrl = "https://github.com/lensapp/lens/issues";
+const forumsUrl = "https://forums.k8slens.dev";
 
 export interface ErrorBoundaryProps {
   children?: SingleOrMany<React.ReactNode>;
@@ -29,7 +31,10 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedErrorBoundary extends React.Component<ErrorBoundaryProps & Dependencies, State> {
+class NonInjectedErrorBoundary extends React.Component<
+  ErrorBoundaryProps & Dependencies,
+  State
+> {
   public state: State = {};
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
@@ -49,24 +54,15 @@ class NonInjectedErrorBoundary extends React.Component<ErrorBoundaryProps & Depe
         <div className="ErrorBoundary flex column gaps">
           <h5>
             {"App crash at "}
-            <span className="contrast">{location.pathname}</span>
+            <span className="contrast">{window.location.pathname}</span>
           </h5>
           <p>
-
             {"To help us improve the product please report bugs on"}
-            <a
+            <a href={forumsUrl} rel="noreferrer" target="_blank">
-              href={forumsUrl}
-              rel="noreferrer"
-              target="_blank"
-            >
               Lens Forums
             </a>
             {" or on our"}
-            <a
+            <a href={issuesTrackerUrl} rel="noreferrer" target="_blank">
-              href={issuesTrackerUrl}
-              rel="noreferrer"
-              target="_blank"
-            >
               Github
             </a>
             {" issues tracker."}
@@ -95,9 +91,12 @@ class NonInjectedErrorBoundary extends React.Component<ErrorBoundaryProps & Depe
   }
 }
 
-export const ErrorBoundary = withInjectables<Dependencies, ErrorBoundaryProps>(NonInjectedErrorBoundary, {
+export const ErrorBoundary = withInjectables<Dependencies, ErrorBoundaryProps>(
-  getProps: (di, props) => ({
+  NonInjectedErrorBoundary,
-    ...props,
+  {
-    observableHistory: di.inject(observableHistoryInjectable),
+    getProps: (di, props) => ({
-  }),
+      ...props,
-});
+      observableHistory: di.inject(observableHistoryInjectable),
+    }),
+  }
+);

packages/ui-components/error-boundary/src/routing/history.injectable.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { createBrowserHistory } from "history";
+import type { History } from "history";
+
+const historyInjectable = getInjectable({
+  id: "history",
+  instantiate: (): History => createBrowserHistory(),
+});
+
+export default historyInjectable;

packages/ui-components/error-boundary/src/routing/observable-history.injectable.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { createObservableHistory } from "mobx-observable-history";
+import { searchParamsOptions } from "./search-params";
+import historyInjectable from "./history.injectable";
+
+const observableHistoryInjectable = getInjectable({
+  id: "observable-history",
+
+  instantiate: (di) => {
+    const history = di.inject(historyInjectable);
+    const navigation = createObservableHistory(history, {
+      searchParams: searchParamsOptions,
+    });
+
+    return navigation;
+  },
+});
+
+export default observableHistoryInjectable;

packages/ui-components/error-boundary/src/routing/search-params.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { ObservableSearchParamsOptions } from "mobx-observable-history";
+
+export const searchParamsOptions: ObservableSearchParamsOptions = {
+  skipEmpty: true, // skip empty params, e.g. "?x=&y2=" will be "?y=2"
+  joinArrays: false, // join multiple params with same name, e.g. "?x=1&x=2" => "?x=1,2"
+  joinArraysWith: ",", // param values splitter, applicable only with {joinArrays:true}
+};

packages/ui-components/resizing-anchor/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@k8slens/eslint-config/eslint",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
+}

packages/ui-components/resizing-anchor/.swcrc

@@ -0,0 +1,19 @@
+{
+  "module": {
+    "type": "commonjs"
+  },
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": true,
+      "dynamicImport": false
+    },
+    "transform": {
+      "legacyDecorator": true,
+      "decoratorMetadata": true
+    },
+    "target": "es2019"
+  }
+}
+

packages/ui-components/resizing-anchor/src/resizing-anchor.tsx

@@ -150,8 +150,11 @@ function directionDelta(P1: number, P2: number, M: number): number | false {
 @observer
 export class ResizingAnchor extends React.PureComponent<ResizingAnchorProps> {
   @observable lastMouseEvent?: MouseEvent;
+
   ref = React.createRef<HTMLDivElement>();
+
   @observable isDragging = false;
+
   @observable wasDragging = false;
 
   static defaultProps = {
@@ -169,6 +172,7 @@ export class ResizingAnchor extends React.PureComponent<ResizingAnchorProps> {
     minExtent: 0,
     placement: ResizeSide.LEADING,
   };
+
   static IS_RESIZING = "resizing";
 
   constructor(props: ResizingAnchorProps) {
@@ -220,11 +224,12 @@ export class ResizingAnchor extends React.PureComponent<ResizingAnchorProps> {
     const boundingBox = node.getBoundingClientRect();
 
     if (this.props.direction === ResizeDirection.HORIZONTAL) {
-      const barX = Math.round(boundingBox.x + (boundingBox.width / 2));
+      const barX = Math.round(boundingBox.x + boundingBox.width / 2);
 
       return directionDelta(from.pageX, to.pageX, barX);
-    } else { // direction === ResizeDirection.VERTICAL
+    } else {
-      const barY = Math.round(boundingBox.y + (boundingBox.height / 2));
+      // direction === ResizeDirection.VERTICAL
+      const barY = Math.round(boundingBox.y + boundingBox.height / 2);
 
       return directionDelta(from.pageY, to.pageY, barY);
     }
@@ -254,8 +259,15 @@ export class ResizingAnchor extends React.PureComponent<ResizingAnchorProps> {
       return;
     }
 
-    const { maxExtent, minExtent, getCurrentExtent, growthDirection } = this.props;
+    const { maxExtent, minExtent, getCurrentExtent, growthDirection } =
-    const { onDrag, onMaxExtentExceed, onMinExtentSucceed: onMinExtentSubceed, onMaxExtentSubceed, onMinExtentExceed } = this.props;
+      this.props;
+    const {
+      onDrag,
+      onMaxExtentExceed,
+      onMinExtentSucceed: onMinExtentSubceed,
+      onMaxExtentSubceed,
+      onMinExtentExceed,
+    } = this.props;
     const delta = this.calculateDelta(this.lastMouseEvent, event);
 
     // always update the last mouse event
@@ -266,8 +278,10 @@ export class ResizingAnchor extends React.PureComponent<ResizingAnchorProps> {
     }
 
     const previousExtent = getCurrentExtent();
-    const unboundedExtent = previousExtent + (delta * growthDirection);
+    const unboundedExtent = previousExtent + delta * growthDirection;
-    const boundedExtent = Math.round(Math.max(minExtent, Math.min(maxExtent, unboundedExtent)));
+    const boundedExtent = Math.round(
+      Math.max(minExtent, Math.min(maxExtent, unboundedExtent))
+    );
 
     onDrag(boundedExtent);
 
@@ -292,7 +306,7 @@ export class ResizingAnchor extends React.PureComponent<ResizingAnchorProps> {
     this.isDragging = false;
     this.wasDragging = true;
 
-    setTimeout(() => this.wasDragging = false, 200);
+    setTimeout(() => (this.wasDragging = false), 200);
   });
 
   render() {
@@ -301,7 +315,11 @@ export class ResizingAnchor extends React.PureComponent<ResizingAnchorProps> {
     return (
       <div
         ref={this.ref}
-        className={cssNames("ResizingAnchor", direction, placement, { disabled, resizing: this.isDragging, wasDragging: this.wasDragging })}
+        className={cssNames("ResizingAnchor", direction, placement, {
+          disabled,
+          resizing: this.isDragging,
+          wasDragging: this.wasDragging,
+        })}
         onMouseDown={this.onDragInit}
         onDoubleClick={onDoubleClick}
       />