From 9af5159706a7a07fdb6fd82aba8b642fe528ef32 Mon Sep 17 00:00:00 2001 From: Gabriel Date: Mon, 24 Apr 2023 12:51:20 +0200 Subject: [PATCH] chore: fix imports for error-boundary and error-boundary Signed-off-by: Gabriel --- package-lock.json | 6 ++- .../error-boundary/.eslintrc.json | 6 +++ packages/ui-components/error-boundary/.swcrc | 19 ++++++++ .../ui-components/error-boundary/index.ts | 1 - .../ui-components/error-boundary/package.json | 7 ++- .../error-boundary/src/error-boundary.scss | 2 +- .../error-boundary/src/error-boundary.tsx | 43 +++++++++---------- .../src/routing/history.injectable.ts | 14 ++++++ .../routing/observable-history.injectable.ts | 23 ++++++++++ .../src/routing/search-params.ts | 12 ++++++ .../resizing-anchor/.eslintrc.json | 6 +++ packages/ui-components/resizing-anchor/.swcrc | 19 ++++++++ .../resizing-anchor/src/resizing-anchor.tsx | 36 ++++++++++++---- 13 files changed, 158 insertions(+), 36 deletions(-) create mode 100644 packages/ui-components/error-boundary/.eslintrc.json create mode 100644 packages/ui-components/error-boundary/.swcrc create mode 100644 packages/ui-components/error-boundary/src/routing/history.injectable.ts create mode 100644 packages/ui-components/error-boundary/src/routing/observable-history.injectable.ts create mode 100644 packages/ui-components/error-boundary/src/routing/search-params.ts create mode 100644 packages/ui-components/resizing-anchor/.eslintrc.json create mode 100644 packages/ui-components/resizing-anchor/.swcrc diff --git a/package-lock.json b/package-lock.json index b41b1b34ef..f07f7d60fd 100644 --- a/package-lock.json +++ b/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", diff --git a/packages/ui-components/error-boundary/.eslintrc.json b/packages/ui-components/error-boundary/.eslintrc.json new file mode 100644 index 0000000000..b15115cb69 --- /dev/null +++ b/packages/ui-components/error-boundary/.eslintrc.json @@ -0,0 +1,6 @@ +{ + "extends": "@k8slens/eslint-config/eslint", + "parserOptions": { + "project": "./tsconfig.json" + } +} diff --git a/packages/ui-components/error-boundary/.swcrc b/packages/ui-components/error-boundary/.swcrc new file mode 100644 index 0000000000..4dd5c11a89 --- /dev/null +++ b/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" + } +} + diff --git a/packages/ui-components/error-boundary/index.ts b/packages/ui-components/error-boundary/index.ts index 597cccdd1e..fb750e78e8 100644 --- a/packages/ui-components/error-boundary/index.ts +++ b/packages/ui-components/error-boundary/index.ts @@ -1,2 +1 @@ export * from "./src/error-boundary"; -export * from "./src/withTooltip"; \ No newline at end of file diff --git a/packages/ui-components/error-boundary/package.json b/packages/ui-components/error-boundary/package.json index ba522d0d27..769d69329a 100644 --- a/packages/ui-components/error-boundary/package.json +++ b/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", diff --git a/packages/ui-components/error-boundary/src/error-boundary.scss b/packages/ui-components/error-boundary/src/error-boundary.scss index b68ab5878f..1b34021016 100644 --- a/packages/ui-components/error-boundary/src/error-boundary.scss +++ b/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; diff --git a/packages/ui-components/error-boundary/src/error-boundary.tsx b/packages/ui-components/error-boundary/src/error-boundary.tsx index 4d732a3ded..e55c4f8716 100644 --- a/packages/ui-components/error-boundary/src/error-boundary.tsx +++ b/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; @@ -29,7 +31,10 @@ interface Dependencies { } @observer -class NonInjectedErrorBoundary extends React.Component { +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
{"App crash at "} - {location.pathname} + {window.location.pathname}

- {"To help us improve the product please report bugs on"} - + Lens Forums {" or on our"} - + Github {" issues tracker."} @@ -95,9 +91,12 @@ class NonInjectedErrorBoundary extends React.Component(NonInjectedErrorBoundary, { - getProps: (di, props) => ({ - ...props, - observableHistory: di.inject(observableHistoryInjectable), - }), -}); +export const ErrorBoundary = withInjectables( + NonInjectedErrorBoundary, + { + getProps: (di, props) => ({ + ...props, + observableHistory: di.inject(observableHistoryInjectable), + }), + } +); diff --git a/packages/ui-components/error-boundary/src/routing/history.injectable.ts b/packages/ui-components/error-boundary/src/routing/history.injectable.ts new file mode 100644 index 0000000000..63f725dc28 --- /dev/null +++ b/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; diff --git a/packages/ui-components/error-boundary/src/routing/observable-history.injectable.ts b/packages/ui-components/error-boundary/src/routing/observable-history.injectable.ts new file mode 100644 index 0000000000..1fe40d91fa --- /dev/null +++ b/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; diff --git a/packages/ui-components/error-boundary/src/routing/search-params.ts b/packages/ui-components/error-boundary/src/routing/search-params.ts new file mode 100644 index 0000000000..5f8c44db3a --- /dev/null +++ b/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} +}; diff --git a/packages/ui-components/resizing-anchor/.eslintrc.json b/packages/ui-components/resizing-anchor/.eslintrc.json new file mode 100644 index 0000000000..b15115cb69 --- /dev/null +++ b/packages/ui-components/resizing-anchor/.eslintrc.json @@ -0,0 +1,6 @@ +{ + "extends": "@k8slens/eslint-config/eslint", + "parserOptions": { + "project": "./tsconfig.json" + } +} diff --git a/packages/ui-components/resizing-anchor/.swcrc b/packages/ui-components/resizing-anchor/.swcrc new file mode 100644 index 0000000000..4dd5c11a89 --- /dev/null +++ b/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" + } +} + diff --git a/packages/ui-components/resizing-anchor/src/resizing-anchor.tsx b/packages/ui-components/resizing-anchor/src/resizing-anchor.tsx index 0a1aeb02fd..556223f5ce 100644 --- a/packages/ui-components/resizing-anchor/src/resizing-anchor.tsx +++ b/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 { @observable lastMouseEvent?: MouseEvent; + ref = React.createRef(); + @observable isDragging = false; + @observable wasDragging = false; static defaultProps = { @@ -169,6 +172,7 @@ export class ResizingAnchor extends React.PureComponent { minExtent: 0, placement: ResizeSide.LEADING, }; + static IS_RESIZING = "resizing"; constructor(props: ResizingAnchorProps) { @@ -220,11 +224,12 @@ export class ResizingAnchor extends React.PureComponent { 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 - const barY = Math.round(boundingBox.y + (boundingBox.height / 2)); + } else { + // 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 { return; } - const { maxExtent, minExtent, getCurrentExtent, growthDirection } = this.props; - const { onDrag, onMaxExtentExceed, onMinExtentSucceed: onMinExtentSubceed, onMaxExtentSubceed, onMinExtentExceed } = this.props; + const { maxExtent, minExtent, getCurrentExtent, growthDirection } = + 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 { } const previousExtent = getCurrentExtent(); - const unboundedExtent = previousExtent + (delta * growthDirection); - const boundedExtent = Math.round(Math.max(minExtent, Math.min(maxExtent, unboundedExtent))); + const unboundedExtent = previousExtent + delta * growthDirection; + const boundedExtent = Math.round( + Math.max(minExtent, Math.min(maxExtent, unboundedExtent)) + ); onDrag(boundedExtent); @@ -292,7 +306,7 @@ export class ResizingAnchor extends React.PureComponent { 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 { return (