chore: extract error-boundary

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

packages/core/package.json

@@ -314,7 +314,8 @@
   "peerDependencies": {
     "@k8slens/application": "^6.5.0-alpha.0",
     "@k8slens/application-for-electron-main": "^6.5.0-alpha.0",
-    "@k8slens/button": "^1.0.0-alpha.0",
+    "@k8slens/button": "^1.0.0-alpha.5",
+    "@k8slens/error-boundary": "^1.0.0-alpha.5",
     "@k8slens/routing": "^1.0.0-alpha.5",
     "@k8slens/cluster-settings": "^6.5.0-alpha.1",
     "@k8slens/kubectl-versions": "^1.0.0-alpha.0",
@@ -325,7 +326,7 @@
     "@k8slens/run-many": "^1.0.0-alpha.1",
     "@k8slens/startable-stoppable": "^1.0.0-alpha.1",
     "@k8slens/test-utils": "^1.0.0-alpha.3",
-    "@k8slens/tooltip": "^1.0.0-alpha.0",
+    "@k8slens/tooltip": "^1.0.0-alpha.5",
     "@k8slens/utilities": "^1.0.0-alpha.1",
     "@ogre-tools/fp": "^15.3.1",
     "@ogre-tools/injectable": "^15.3.1",

packages/core/src/renderer/components/cluster-manager/cluster-manager-root-frame-child-component.injectable.tsx

@@ -7,7 +7,7 @@ import { getInjectable } from "@ogre-tools/injectable";
 import { rootFrameChildComponentInjectionToken } from "../../frames/root-frame/root-frame-child-component-injection-token";
 import { ClusterManager } from "./cluster-manager";
 import { computed } from "mobx";
-import { ErrorBoundary } from "../error-boundary";
+import { ErrorBoundary } from "@k8slens/error-boundary";
 
 const clusterManagerRootFrameChildComponentInjectable = getInjectable({
   id: "cluster-manager-root-frame-child-component",

packages/core/src/renderer/components/dock/dock.tsx

@@ -24,7 +24,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import createResourceTabInjectable from "./create-resource/create-resource-tab.injectable";
 import dockStoreInjectable from "./dock/store.injectable";
 import createTerminalTabInjectable from "./terminal/create-terminal-tab.injectable";
-import { ErrorBoundary } from "../error-boundary";
+import { ErrorBoundary } from "@k8slens/error-boundary";
 
 export interface DockProps {
   className?: string;

packages/core/src/renderer/components/layout/main-layout.tsx

@@ -8,7 +8,7 @@ import styles from "./main-layout.module.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { cssNames } from "@k8slens/utilities";
-import { ErrorBoundary } from "../error-boundary";
+import { ErrorBoundary } from "@k8slens/error-boundary";
 import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { SidebarStorageState } from "./sidebar-storage/sidebar-storage.injectable";

packages/core/src/renderer/components/layout/tab-layout-2.tsx

@@ -9,7 +9,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { cssNames } from "@k8slens/utilities";
 import { Tab, Tabs } from "../tabs";
-import { ErrorBoundary } from "../error-boundary";
+import { ErrorBoundary } from "@k8slens/error-boundary";
 import type { HierarchicalSidebarItem } from "./sidebar-items.injectable";
 
 export interface TabLayoutProps {

packages/core/src/renderer/components/layout/tab-layout.tsx

@@ -12,7 +12,7 @@ import { observer } from "mobx-react";
 import type { IClassName } from "@k8slens/utilities";
 import { cssNames } from "@k8slens/utilities";
 import { Tab, Tabs } from "../tabs";
-import { ErrorBoundary } from "../error-boundary";
+import { ErrorBoundary } from "@k8slens/error-boundary";
 import type { ObservableHistory } from "mobx-observable-history";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import { observableHistoryInjectionToken } from "@k8slens/routing";

packages/core/src/renderer/frames/cluster-frame/cluster-frame.tsx

@@ -4,7 +4,7 @@
  */
 import React, { useEffect } from "react";
 import { Observer, observer } from "mobx-react";
-import { ErrorBoundary } from "../../components/error-boundary";
+import { ErrorBoundary } from "@k8slens/error-boundary";
 import type { NamespaceStore } from "../../components/+namespaces/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import namespaceStoreInjectable  from "../../components/+namespaces/store.injectable";

packages/open-lens/src/renderer/index.ts

@@ -1,5 +1,6 @@
 import "@k8slens/core/styles";
 import "@k8slens/button/dist/index.css";
+import "@k8slens/error-boundary/dist/index.css";
 import "@k8slens/tooltip/dist/index.css";
 import { runInAction } from "mobx";
 import {

packages/ui-components/button/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@k8slens/button",
   "private": false,
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.5",
   "description": "Highly extendable button in the Lens.",
   "type": "commonjs",
   "files": [

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/README.md

@@ -0,0 +1,15 @@
+# @k8slens/error-boundary
+
+This package contains stuff related to creating Lens-applications. 
+
+# Usage
+
+```bash
+$ npm install @k8slens/error-boundary
+```
+
+```typescript
+import "@k8slens/error-boundary/dist/index.css";
+```
+
+## Extendability

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

@@ -3,4 +3,4 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-export * from "./error-boundary";
+export { ErrorBoundary } from "./src/error-boundary";

packages/ui-components/error-boundary/jest.config.js

@@ -0,0 +1,3 @@
+const { configForReact } = require("@k8slens/jest").monorepoPackageConfig(__dirname);
+
+module.exports = configForReact;

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

@@ -0,0 +1,53 @@
+{
+  "name": "@k8slens/error-boundary",
+  "private": false,
+  "version": "1.0.0-alpha.5",
+  "description": "Highly extendable error-boundary in the Lens.",
+  "type": "commonjs",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lensapp/lens.git"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": {
+    "name": "OpenLens Authors",
+    "email": "info@k8slens.dev"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/lensapp/lens",
+  "scripts": {
+    "build": "webpack",
+    "lint": "lens-lint",
+    "lint:fix": "lens-lint --fix"
+  },
+  "peerDependencies": {
+    "@ogre-tools/injectable": "^15.3.1",
+    "@ogre-tools/injectable-react": "^15.3.0",
+    "history": "^4.10.1",
+    "mobx-observable-history": "^2.0.3",
+    "@k8slens/button": "^1.0.0-alpha.5",
+    "@k8slens/utilities": "^1.0.0-alpha.1",
+    "@k8slens/routing": "^1.0.0-alpha.5",
+    "auto-bind": "^4.0.0",
+    "lodash": "^4.17.21",
+    "mobx": "^6.8.0",
+    "mobx-react": "^7.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@async-fn/jest": "^1.6.4",
+    "@k8slens/eslint-config": "6.5.0-alpha.1",
+    "@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^13.5.0"
+  }
+}

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

@@ -9,12 +9,14 @@ import type { ErrorInfo } from "react";
 import React from "react";
 import { observer } from "mobx-react";
 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 { observableHistoryInjectionToken } from "@k8slens/routing";
 
+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(observableHistoryInjectionToken),
+    getProps: (di, props) => ({
-  }),
+      ...props,
-});
+      observableHistory: di.inject(observableHistoryInjectionToken),
+    }),
+  }
+);

packages/ui-components/error-boundary/tailwind.config.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+const path = require('path');
+
+module.exports = {
+  content: [
+    path.join(__dirname, "src/**/*.tsx")
+  ],
+  darkMode: "class",
+  theme: {
+    fontFamily: {
+      sans: ["Roboto", "Helvetica", "Arial", "sans-serif"],
+    },
+    extend: {
+      colors: {
+        textAccent: "var(--textColorAccent)",
+        textPrimary: "var(--textColorPrimary)",
+        textTertiary: "var(--textColorTertiary)",
+        textDimmed: "var(--textColorDimmed)",
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};

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

@@ -0,0 +1,4 @@
+{
+  "extends": "@k8slens/typescript/config/base.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+}

packages/ui-components/error-boundary/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/webpack").configForReact;

packages/ui-components/tooltip/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@k8slens/tooltip",
   "private": false,
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.5",
   "description": "Highly extendable tooltip in the Lens.",
   "type": "commonjs",
   "files": [