hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Prevent massed remounting of dock tabs when dock height changes (#6104)

Browse Source 
* Update injectable to make withInjectables have authentic React reconciliation

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Make some dock tabs have primitive props to have them React reconcile properly

Currently tab objects that are stored in a storage change reference on every change of dock height, making them less usable as React prop for causing involuntary remounting.

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen 2022-08-25 15:56:09 +03:00 committed by GitHub
parent 1d337a59db
commit 94629954a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 45 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package.json
View File

@ -216,11 +216,11 @@
"@hapi/subtext": "^7.0.4", "@hapi/subtext": "^7.0.4",
"@kubernetes/client-node": "^0.17.0", "@kubernetes/client-node": "^0.17.0",
"@material-ui/styles": "^4.11.5", "@material-ui/styles": "^4.11.5",
"@ogre-tools/fp": "9.0.1", "@ogre-tools/fp": "9.0.3",
"@ogre-tools/injectable": "9.0.2", "@ogre-tools/injectable": "9.0.3",
"@ogre-tools/injectable-extension-for-auto-registration": "9.0.2", "@ogre-tools/injectable-extension-for-auto-registration": "9.0.3",
"@ogre-tools/injectable-extension-for-mobx": "9.0.2", "@ogre-tools/injectable-extension-for-mobx": "9.0.3",
"@ogre-tools/injectable-react": "9.0.2", "@ogre-tools/injectable-react": "9.0.3",
"@sentry/electron": "^3.0.7", "@sentry/electron": "^3.0.7",
"@sentry/integrations": "^6.19.3", "@sentry/integrations": "^6.19.3",
"@side/jest-runtime": "^1.0.1", "@side/jest-runtime": "^1.0.1",

5
src/renderer/components/dock/create-resource/view.tsx
View File

@ -11,7 +11,6 @@ import type { IComputedValue } from "mobx";
import { makeObservable, observable } from "mobx"; import { makeObservable, observable } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import type { CreateResourceTabStore } from "./store"; import type { CreateResourceTabStore } from "./store";
import type { DockTab } from "../dock/store";
import { EditorPanel } from "../editor-panel"; import { EditorPanel } from "../editor-panel";
import { InfoPanel } from "../info-panel"; import { InfoPanel } from "../info-panel";
import * as resourceApplierApi from "../../../../common/k8s-api/endpoints/resource-applier.api"; import * as resourceApplierApi from "../../../../common/k8s-api/endpoints/resource-applier.api";
@ -31,7 +30,7 @@ import getDetailsUrlInjectable from "../../kube-detail-params/get-details-url.in
import navigateInjectable from "../../../navigation/navigate.injectable"; import navigateInjectable from "../../../navigation/navigate.injectable";
export interface CreateResourceProps { export interface CreateResourceProps {
tab: DockTab; tabId: string;
} }
interface Dependencies { interface Dependencies {
@ -52,7 +51,7 @@ class NonInjectedCreateResource extends React.Component<CreateResourceProps & De
} }
get tabId() { get tabId() {
return this.props.tab.id; return this.props.tabId;
} }
get data() { get data() {

6
src/renderer/components/dock/dock.tsx
View File

@ -104,11 +104,11 @@ class NonInjectedDock extends React.Component<DockProps & Dependencies> {
renderTab(tab: DockTab) { renderTab(tab: DockTab) {
switch (tab.kind) { switch (tab.kind) {
case TabKind.CREATE_RESOURCE: case TabKind.CREATE_RESOURCE:
return <CreateResource tab={tab} />; return <CreateResource tabId={tab.id} />;
case TabKind.EDIT_RESOURCE: case TabKind.EDIT_RESOURCE:
return <EditResource tab={tab} />; return <EditResource tabId={tab.id} />;
case TabKind.INSTALL_CHART: case TabKind.INSTALL_CHART:
return <InstallChart tab={tab} />; return <InstallChart tabId={tab.id} />;
case TabKind.UPGRADE_CHART: case TabKind.UPGRADE_CHART:
return <UpgradeChart tab={tab} />; return <UpgradeChart tab={tab} />;
case TabKind.POD_LOGS: case TabKind.POD_LOGS:

7
src/renderer/components/dock/edit-resource/view.tsx
View File

@ -5,7 +5,6 @@
import React from "react"; import React from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import type { DockTab } from "../dock/store";
import { Spinner } from "../../spinner"; import { Spinner } from "../../spinner";
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";
import type { EditResourceModel } from "./edit-resource-model/edit-resource-model.injectable"; import type { EditResourceModel } from "./edit-resource-model/edit-resource-model.injectable";
@ -16,7 +15,7 @@ import { Badge } from "../../badge";
import { Notice } from "../../+extensions/notice"; import { Notice } from "../../+extensions/notice";
export interface EditResourceProps { export interface EditResourceProps {
tab: DockTab; tabId: string;
} }
interface Dependencies { interface Dependencies {
@ -24,7 +23,7 @@ interface Dependencies {
} }
const NonInjectedEditResource = observer( const NonInjectedEditResource = observer(
({ model, tab: { id: tabId }}: EditResourceProps & Dependencies) => { ({ model, tabId }: EditResourceProps & Dependencies) => {
return ( return (
<div className="EditResource flex column"> <div className="EditResource flex column">
{model.shouldShowErrorAboutNoResource && ( {model.shouldShowErrorAboutNoResource && (
@ -78,7 +77,7 @@ export const EditResource = withInjectables<Dependencies, EditResourceProps>(
), ),
getProps: async (di, props) => ({ getProps: async (di, props) => ({
model: await di.inject(editResourceModelInjectable, props.tab.id), model: await di.inject(editResourceModelInjectable, props.tabId),
...props, ...props,
}), }),
}, },

11
src/renderer/components/dock/install-chart/view.tsx
View File

@ -7,7 +7,6 @@ import "./install-chart.scss";
import React from "react"; import React from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import type { DockTab } from "../dock/store";
import { InfoPanel } from "../info-panel"; import { InfoPanel } from "../info-panel";
import { Badge } from "../../badge"; import { Badge } from "../../badge";
import { NamespaceSelect } from "../../+namespaces/namespace-select"; import { NamespaceSelect } from "../../+namespaces/namespace-select";
@ -23,8 +22,8 @@ import type { InstallChartModel } from "./install-chart-model.injectable";
import installChartModelInjectable from "./install-chart-model.injectable"; import installChartModelInjectable from "./install-chart-model.injectable";
import { Spinner } from "../../spinner"; import { Spinner } from "../../spinner";
export interface InstallCharProps { export interface InstallChartProps {
tab: DockTab; tabId: string;
} }
interface Dependencies { interface Dependencies {
@ -32,7 +31,7 @@ interface Dependencies {
} }
const NonInjectedInstallChart = observer( const NonInjectedInstallChart = observer(
({ model: model, tab: { id: tabId }}: InstallCharProps & Dependencies) => { ({ model: model, tabId }: InstallChartProps & Dependencies) => {
const installed = model.installed.get(); const installed = model.installed.get();
if (installed) { if (installed) {
@ -144,7 +143,7 @@ const NonInjectedInstallChart = observer(
}, },
); );
export const InstallChart = withInjectables<Dependencies, InstallCharProps>( export const InstallChart = withInjectables<Dependencies, InstallChartProps>(
NonInjectedInstallChart, NonInjectedInstallChart,
{ {
@ -156,7 +155,7 @@ export const InstallChart = withInjectables<Dependencies, InstallCharProps>(
), ),
getProps: async (di, props) => ({ getProps: async (di, props) => ({
model: await di.inject(installChartModelInjectable, props.tab.id), model: await di.inject(installChartModelInjectable, props.tabId),
...props, ...props,
}), }),
}, },

61
yarn.lock
View File

@ -1235,53 +1235,46 @@
mkdirp "^1.0.4" mkdirp "^1.0.4"
rimraf "^3.0.2" rimraf "^3.0.2"
"@ogre-tools/fp@9.0.1": "@ogre-tools/fp@9.0.3", "@ogre-tools/fp@^9.0.3":
version "9.0.1" version "9.0.3"
resolved "https://registry.yarnpkg.com/@ogre-tools/fp/-/fp-9.0.1.tgz#22c23bd209f6f56bf66a5ff4514930334a3a4782" resolved "https://registry.yarnpkg.com/@ogre-tools/fp/-/fp-9.0.3.tgz#f8c9a3316b688c4782309e050c86aa04bebfc293"
integrity sha512-7kORUcvR9DZz5/2qDSSKExGeisXzfmOafP+Z6l8C+WQXEmEQm7CmFMyBEyMkei0eNFzNghlKYgRFpsvBdU3KAg== integrity sha512-j5TQAxiz6ncEfYFBcqnWXeLZY89Qd+dZ9UlfonBdw/C9okxjNeFL+2bmt+b/Vxscz1cOLGZ1F6nmlhQdTtHzPw==
dependencies: dependencies:
lodash "^4.17.21" lodash "^4.17.21"
"@ogre-tools/fp@^9.0.2": "@ogre-tools/injectable-extension-for-auto-registration@9.0.3":
version "9.0.2" version "9.0.3"
resolved "https://registry.yarnpkg.com/@ogre-tools/fp/-/fp-9.0.2.tgz#9f7fbbf461c539850c5408456164a8fadb643704" resolved "https://registry.yarnpkg.com/@ogre-tools/injectable-extension-for-auto-registration/-/injectable-extension-for-auto-registration-9.0.3.tgz#a26d2a39e24ec3a0800fe21141c0f4f0e7d5504d"
integrity sha512-HQa6YQK5EDR0Fv4tbvckrjO8VueE9uagX+TbgFE+Zq51E1cc/4VHQJGo5c6l+H/g+jvYKCfJMwbnMiFFxeDEfw== integrity sha512-0zjt4w1ACBX9a3FyhTD+/AAqk/xov2bw+Cnbte7NMOVWAbHDfQpmbdiKJlMnFcMUd8vdwOEMm1Z4ogT1VkUeqg==
dependencies: dependencies:
"@ogre-tools/fp" "^9.0.3"
"@ogre-tools/injectable" "^9.0.3"
lodash "^4.17.21" lodash "^4.17.21"
"@ogre-tools/injectable-extension-for-auto-registration@9.0.2": "@ogre-tools/injectable-extension-for-mobx@9.0.3":
version "9.0.2" version "9.0.3"
resolved "https://registry.yarnpkg.com/@ogre-tools/injectable-extension-for-auto-registration/-/injectable-extension-for-auto-registration-9.0.2.tgz#b72e0cb23ec14ef24206e1354ed65e94001f0c84" resolved "https://registry.yarnpkg.com/@ogre-tools/injectable-extension-for-mobx/-/injectable-extension-for-mobx-9.0.3.tgz#24a14b940f51cae8b07645a2376d804b826c659e"
integrity sha512-DVn2sc7L88zXHLRhXbX9H/V9KmL0kTI75PUIXdnId/0PbkiSOOdcOlSnt1qNw63pL3OQiOT1s1OuxSz8sg1MOQ== integrity sha512-DgCbAIqMPKgeNETY/8nxz6llAk8fAihGcbs/fkKINe4N9zFgOBKsuk/w67Sx0rTE7l35L6HQenbo7nJhIqbCWA==
dependencies: dependencies:
"@ogre-tools/fp" "^9.0.2" "@ogre-tools/fp" "^9.0.3"
"@ogre-tools/injectable" "^9.0.2" "@ogre-tools/injectable" "^9.0.3"
lodash "^4.17.21" lodash "^4.17.21"
"@ogre-tools/injectable-extension-for-mobx@9.0.2": "@ogre-tools/injectable-react@9.0.3":
version "9.0.2" version "9.0.3"
resolved "https://registry.yarnpkg.com/@ogre-tools/injectable-extension-for-mobx/-/injectable-extension-for-mobx-9.0.2.tgz#d1a4af35ab815390c8e773cf7696b30564ba58ba" resolved "https://registry.yarnpkg.com/@ogre-tools/injectable-react/-/injectable-react-9.0.3.tgz#bc125ef906b171c8894f711f8b61f38d49e81dd0"
integrity sha512-0x5NyM/sJkqSnTA3pgXwLK+zCxnTMpQ3XiIHInzL5abtwQK3L6J7xrbCR7yRF2L+dQwTmWd/fWtrfwLtBIWVdQ== integrity sha512-6O9vr19Mcy0uUekZhRyjsM5nw8pgFXhbNvZ8JOnBQg6Lp1CqdasIFhJ0Hdxb8w8P9Zs+pd8pfevRVotq0ouV2Q==
dependencies: dependencies:
"@ogre-tools/fp" "^9.0.2" "@ogre-tools/fp" "^9.0.3"
"@ogre-tools/injectable" "^9.0.2" "@ogre-tools/injectable" "^9.0.3"
lodash "^4.17.21" lodash "^4.17.21"
"@ogre-tools/injectable-react@9.0.2": "@ogre-tools/injectable@9.0.3", "@ogre-tools/injectable@^9.0.3":
version "9.0.2" version "9.0.3"
resolved "https://registry.yarnpkg.com/@ogre-tools/injectable-react/-/injectable-react-9.0.2.tgz#e8148268a755e30587cb1c27a5c500b247b0c5d0" resolved "https://registry.yarnpkg.com/@ogre-tools/injectable/-/injectable-9.0.3.tgz#6d9e01a5be7e7c96e7bcbc727f928faad5e11884"
integrity sha512-IIEq8GoCXDoGLWOH62F/ZWduk5TAObDn+K5VuayCnfnLGmAEw+A7rTh6bJhjhGAH8DblX9xr+BLjs0SPgxzMpA== integrity sha512-KCmqcMEl/1Jjwg6XzNve+JVaW/OtiJUOKBucTJx2ZKBlAQaKz1/VUP7IB4UoQ4RWVa0+mUKLTxBTQFBQfp05RA==
dependencies: dependencies:
"@ogre-tools/fp" "^9.0.2" "@ogre-tools/fp" "^9.0.3"
"@ogre-tools/injectable" "^9.0.2"
lodash "^4.17.21"
"@ogre-tools/injectable@9.0.2", "@ogre-tools/injectable@^9.0.2":
version "9.0.2"
resolved "https://registry.yarnpkg.com/@ogre-tools/injectable/-/injectable-9.0.2.tgz#a00aebf648c1b8d08cd05641d348e44e43f4f7a5"
integrity sha512-0msgHvssOqeEPmW0i56jUz1Yp7fiApXfxII/dhdkQrG2tnb4brgW3WXP1841xt2q6Hf769+HXON2bhBsawohAw==
dependencies:
"@ogre-tools/fp" "^9.0.2"
lodash "^4.17.21" lodash "^4.17.21"
"@pmmmwh/react-refresh-webpack-plugin@^0.5.7": "@pmmmwh/react-refresh-webpack-plugin@^0.5.7":