diff --git a/src/renderer/components/+apps-releases/release-details/release-details.injectable.ts b/src/renderer/components/+apps-releases/release-details/release-details.injectable.ts index 1dac3b716f..c726e0429c 100644 --- a/src/renderer/components/+apps-releases/release-details/release-details.injectable.ts +++ b/src/renderer/components/+apps-releases/release-details/release-details.injectable.ts @@ -10,7 +10,7 @@ import releaseInjectable from "./release.injectable"; const releaseDetailsInjectable = getInjectable({ instantiate: (di) => asyncComputed(async () => { - const release = di.inject(releaseInjectable).value.get(); + const release = di.inject(releaseInjectable).get(); return await getRelease(release.name, release.namespace); }), diff --git a/src/renderer/components/+apps-releases/release-details/release-details.tsx b/src/renderer/components/+apps-releases/release-details/release-details.tsx index 30d34e1857..a41d0cae16 100644 --- a/src/renderer/components/+apps-releases/release-details/release-details.tsx +++ b/src/renderer/components/+apps-releases/release-details/release-details.tsx @@ -7,7 +7,7 @@ import "./release-details.scss"; import React, { Component } from "react"; import groupBy from "lodash/groupBy"; -import { computed, makeObservable, observable } from "mobx"; +import { computed, IComputedValue, makeObservable, observable } from "mobx"; import { Link } from "react-router-dom"; import kebabCase from "lodash/kebabCase"; import type { HelmRelease, IReleaseDetails, IReleaseUpdateDetails, IReleaseUpdatePayload } from "../../../../common/k8s-api/endpoints/helm-releases.api"; @@ -39,7 +39,7 @@ interface Props { } interface Dependencies { - release: IAsyncComputed + release: IComputedValue releaseDetails: IAsyncComputed releaseValues: IAsyncComputed updateRelease: (name: string, namespace: string, payload: IReleaseUpdatePayload) => Promise @@ -59,7 +59,7 @@ class NonInjectedReleaseDetails extends Component { } @computed get release() { - return this.props.release.value.get(); + return this.props.release.get(); } @computed get details() { diff --git a/src/renderer/components/+apps-releases/release-details/release-values.injectable.ts b/src/renderer/components/+apps-releases/release-details/release-values.injectable.ts index d7cc2c965c..965db1324f 100644 --- a/src/renderer/components/+apps-releases/release-details/release-values.injectable.ts +++ b/src/renderer/components/+apps-releases/release-details/release-values.injectable.ts @@ -12,7 +12,13 @@ import userSuppliedValuesAreShownInjectable from "./user-supplied-values-are-sho const releaseValuesInjectable = getInjectable({ instantiate: (di) => asyncComputed(async () => { - const release = di.inject(releaseInjectable).value.get(); + const release = di.inject(releaseInjectable).get(); + + // TODO: Figure out way to get rid of defensive code + if (!release) { + return ""; + } + const userSuppliedValuesAreShown = di.inject(userSuppliedValuesAreShownInjectable).value; try { diff --git a/src/renderer/components/+apps-releases/release-details/release.injectable.ts b/src/renderer/components/+apps-releases/release-details/release.injectable.ts index 6da2295765..75b821890a 100644 --- a/src/renderer/components/+apps-releases/release-details/release.injectable.ts +++ b/src/renderer/components/+apps-releases/release-details/release.injectable.ts @@ -6,14 +6,14 @@ import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable"; import { matches } from "lodash/fp"; import releasesInjectable from "../releases.injectable"; import releaseRouteParametersInjectable from "./release-route-parameters.injectable"; -import { asyncComputed } from "@ogre-tools/injectable-react"; +import { computed } from "mobx"; const releaseInjectable = getInjectable({ instantiate: (di) => { const releases = di.inject(releasesInjectable); const releaseRouteParameters = di.inject(releaseRouteParametersInjectable); - return asyncComputed(async () => { + return computed(() => { const { name, namespace } = releaseRouteParameters.get(); if (!name || !namespace) { diff --git a/src/renderer/components/+events/events.tsx b/src/renderer/components/+events/events.tsx index 8b8ae46ccb..033189ea7d 100644 --- a/src/renderer/components/+events/events.tsx +++ b/src/renderer/components/+events/events.tsx @@ -124,7 +124,7 @@ export class Events extends React.Component { }; render() { - const { store, visibleItems } = this; + const { store } = this; const { compact, compactLimit, className, ...layoutProps } = this.props; const events = ( @@ -137,7 +137,7 @@ export class Events extends React.Component { renderHeaderTitle="Events" customizeHeader={this.customizeHeader} isSelectable={false} - items={visibleItems} + getItems={() => this.visibleItems} virtual={!compact} tableProps={{ sortSyncWithUrl: false, diff --git a/src/renderer/components/item-object-list/content.tsx b/src/renderer/components/item-object-list/content.tsx index ccfdddd7d3..773f70d74f 100644 --- a/src/renderer/components/item-object-list/content.tsx +++ b/src/renderer/components/item-object-list/content.tsx @@ -7,7 +7,7 @@ import "./item-list-layout.scss"; import React, { ReactNode } from "react"; import { computed, makeObservable } from "mobx"; -import { observer } from "mobx-react"; +import { Observer, observer } from "mobx-react"; import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog"; import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallbacks } from "../table"; import { boundMethod, cssNames, IClassName, isReactNode, prevDefault, stopPropagation } from "../../utils"; @@ -70,58 +70,68 @@ export class ItemListLayoutContent extends React.Component @boundMethod getRow(uid: string) { - const { - isSelectable, renderTableHeader, renderTableContents, renderItemMenu, - store, hasDetailsView, onDetails, - copyClassNameFromHeadCells, customizeTableRowProps, detailsItem, - } = this.props; - const { isSelected } = store; - const item = this.props.getItems().find(item => item.getId() == uid); - - if (!item) return null; - const itemId = item.getId(); - return ( - onDetails(item)) : undefined} - {...customizeTableRowProps(item)} - > - {isSelectable && ( - store.toggleSelection(item))} - /> - )} - { - renderTableContents(item).map((content, index) => { - const cellProps: TableCellProps = isReactNode(content) ? { children: content } : content; - const headCell = renderTableHeader?.[index]; +
+ + {() => { + const { + isSelectable, renderTableHeader, renderTableContents, renderItemMenu, + store, hasDetailsView, onDetails, + copyClassNameFromHeadCells, customizeTableRowProps, detailsItem, + } = this.props; + const { isSelected } = store; + const item = this.props.getItems().find(item => item.getId() == uid); - if (copyClassNameFromHeadCells && headCell) { - cellProps.className = cssNames(cellProps.className, headCell.className); - } + if (!item) return null; + const itemId = item.getId(); - if (!headCell || this.showColumn(headCell)) { - return ; - } + return ( + onDetails(item)) : undefined} + {...customizeTableRowProps(item)} + > + {isSelectable && ( + store.toggleSelection(item))} + /> + )} + {renderTableContents(item).map((content, index) => { + const cellProps: TableCellProps = isReactNode(content) + ? { children: content } + : content; + const headCell = renderTableHeader?.[index]; - return null; - }) - } - {renderItemMenu && ( - -
- {renderItemMenu(item, store)} -
-
- )} -
+ if (copyClassNameFromHeadCells && headCell) { + cellProps.className = cssNames( + cellProps.className, + headCell.className, + ); + } + + if (!headCell || this.showColumn(headCell)) { + return ; + } + + return null; + })} + {renderItemMenu && ( + +
+ {renderItemMenu(item, store)} +
+
+ )} + + ); + }} +
+
); } @@ -190,11 +200,15 @@ export class ItemListLayoutContent extends React.Component return ( {isSelectable && ( - store.toggleSelectionAll(enabledItems))} - /> + + {() => ( + store.toggleSelectionAll(enabledItems))} + /> + )} + )} {renderTableHeader.map((cellProps, index) => ( this.showColumn(cellProps) && ( @@ -213,7 +227,6 @@ export class ItemListLayoutContent extends React.Component store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks, detailsItem, className, tableProps = {}, tableId, } = this.props; - const { selectedItems } = store; const selectedItemId = detailsItem && detailsItem.getId(); const classNames = cssNames(className, "box", "grow", ThemeStore.getInstance().activeTheme.type); @@ -234,11 +247,18 @@ export class ItemListLayoutContent extends React.Component {this.renderTableHeader()} {this.renderItems()} - + + + {() => ( + + )} + ); } diff --git a/src/renderer/components/kube-detail-params/params.ts b/src/renderer/components/kube-detail-params/params.ts index 953b666406..9eeb141e3f 100644 --- a/src/renderer/components/kube-detail-params/params.ts +++ b/src/renderer/components/kube-detail-params/params.ts @@ -46,7 +46,6 @@ export function hideDetails() { } export function getDetailsUrl(selfLink: string, resetSelected = false, mergeGlobals = true) { - console.debug("getDetailsUrl", { selfLink, resetSelected, mergeGlobals }); const params = new URLSearchParams(mergeGlobals ? navigation.searchParams : ""); params.set(kubeDetailsUrlParam.name, selfLink);