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>

src/renderer/components/dock/create-resource/view.tsx

@@ -11,7 +11,6 @@ import type { IComputedValue } from "mobx";
 import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import type { CreateResourceTabStore } from "./store";
-import type { DockTab } from "../dock/store";
 import { EditorPanel } from "../editor-panel";
 import { InfoPanel } from "../info-panel";
 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";
 
 export interface CreateResourceProps {
-  tab: DockTab;
+  tabId: string;
 }
 
 interface Dependencies {
@@ -52,7 +51,7 @@ class NonInjectedCreateResource extends React.Component<CreateResourceProps & De
   }
 
   get tabId() {
-    return this.props.tab.id;
+    return this.props.tabId;
   }
 
   get data() {

src/renderer/components/dock/dock.tsx

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

src/renderer/components/dock/edit-resource/view.tsx

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

src/renderer/components/dock/install-chart/view.tsx

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