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

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

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 { issuesTrackerUrl, forumsUrl } from "../../../common/vars";
+import { Button } from "@k8slens/button";
 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
-              href={forumsUrl}
-              rel="noreferrer"
-              target="_blank"
-            >
+            <a href={forumsUrl} rel="noreferrer" target="_blank">
               Lens Forums
             </a>
             {" or on our"}
-            <a
-              href={issuesTrackerUrl}
-              rel="noreferrer"
-              target="_blank"
-            >
+            <a 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, {
-  getProps: (di, props) => ({
-    ...props,
-    observableHistory: di.inject(observableHistoryInjectable),
-  }),
-});
+export const ErrorBoundary = withInjectables<Dependencies, ErrorBoundaryProps>(
+  NonInjectedErrorBoundary,
+  {
+    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}
+};