Navigation refactoring, handling extension page params (#1651)

* decentralizing page url-params management -- PoC / tsc 4.1 random fixes

Signed-off-by: Roman <ixrock@gmail.com>

* fixes, tweak example-extension for demo

Signed-off-by: Roman <ixrock@gmail.com>

* lint fixes, revert tests

Signed-off-by: Roman <ixrock@gmail.com>

* removed occasional changes related to typescript 4.1

Signed-off-by: Roman <ixrock@gmail.com>

* updated example with 2 menu-items targeting same page with different params

Signed-off-by: Roman <ixrock@gmail.com>

* fix: merge page url chunks with native URL()-api, simplified default page-params registration

Signed-off-by: Roman <ixrock@gmail.com>

* fix: make lint happy

Signed-off-by: Roman <ixrock@gmail.com>

* fix: unit-tests

Signed-off-by: Roman <ixrock@gmail.com>

* renaming by jim's request: UrlParam => PageParam (type), createUrlParam => createPageParam (helper)

Signed-off-by: Roman <ixrock@gmail.com>

* fix: reverting NamespaceStore public-api breaking changes

Signed-off-by: Roman <ixrock@gmail.com>

* lint fix

Signed-off-by: Roman <ixrock@gmail.com>

* fine-tuning

Signed-off-by: Roman <ixrock@gmail.com>

* yes, lint always unhappy

Signed-off-by: Roman <ixrock@gmail.com>

* fix build

Signed-off-by: Roman <ixrock@gmail.com>

* small fixes

Signed-off-by: Roman <ixrock@gmail.com>

* fix merge-conflicts

Signed-off-by: Roman <ixrock@gmail.com>

* removed `isSystem` page-param's init field exposed to extensions-api

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/kube-object/kube-object-details.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { computed, observable, reaction } from "mobx";
 import { Trans } from "@lingui/macro";
-import { getDetails, hideDetails } from "../../navigation";
+import { createPageParam, navigation } from "../../navigation";
 import { Drawer } from "../drawer";
 import { KubeObject } from "../../api/kube-object";
 import { Spinner } from "../spinner";
@@ -14,6 +14,43 @@ import { CrdResourceDetails } from "../+custom-resources";
 import { KubeObjectMenu } from "./kube-object-menu";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
+export const kubeDetailsUrlParam = createPageParam({
+  name: "kube-details",
+  isSystem: true,
+});
+
+export const kubeSelectedUrlParam = createPageParam({
+  name: "kube-selected",
+  isSystem: true,
+  get defaultValue() {
+    return kubeDetailsUrlParam.get();
+  }
+});
+
+export function showDetails(details = "", resetSelected = true) {
+  const detailsUrl = getDetailsUrl(details, resetSelected);
+
+  navigation.merge({ search: detailsUrl });
+}
+
+export function hideDetails() {
+  showDetails();
+}
+
+export function getDetailsUrl(details: string, resetSelected = false) {
+  const detailsUrl = kubeDetailsUrlParam.toSearchString({ value: details });
+
+  if (resetSelected) {
+    const params = new URLSearchParams(detailsUrl);
+
+    params.delete(kubeSelectedUrlParam.name);
+
+    return `?${params.toString()}`;
+  }
+
+  return detailsUrl;
+}
+
 export interface KubeObjectDetailsProps<T = KubeObject> {
   className?: string;
   object: T;
@@ -25,7 +62,7 @@ export class KubeObjectDetails extends React.Component {
   @observable.ref loadingError: React.ReactNode;
 
   @computed get path() {
-    return getDetails();
+    return kubeDetailsUrlParam.get();
   }
 
   @computed get object() {
@@ -70,7 +107,7 @@ export class KubeObjectDetails extends React.Component {
     const { object, isLoading, loadingError, isCrdInstance } = this;
     const isOpen = !!(object || isLoading || loadingError);
     let title = "";
-    let details: JSX.Element[];
+    let details: React.ReactNode[];
 
     if (object) {
       const { kind, getName } = object;
@@ -81,7 +118,7 @@ export class KubeObjectDetails extends React.Component {
       });
 
       if (isCrdInstance && details.length === 0) {
-        details.push(<CrdResourceDetails object={object} />);
+        details.push(<CrdResourceDetails object={object}/>);
       }
     }
 
@@ -90,7 +127,7 @@ export class KubeObjectDetails extends React.Component {
         className="KubeObjectDetails flex column"
         open={isOpen}
         title={title}
-        toolbar={<KubeObjectMenu object={object} toolbar={true} />}
+        toolbar={<KubeObjectMenu object={object} toolbar={true}/>}
         onClose={hideDetails}
       >
         {isLoading && <Spinner center/>}

src/renderer/components/kube-object/kube-object-list-layout.tsx

@@ -3,10 +3,10 @@ import { computed } from "mobx";
 import { observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { KubeObject } from "../../api/kube-object";
-import { getSelectedDetails, showDetails } from "../../navigation";
 import { ItemListLayout, ItemListLayoutProps } from "../item-object-list/item-list-layout";
 import { KubeObjectStore } from "../../kube-object.store";
 import { KubeObjectMenu } from "./kube-object-menu";
+import { kubeSelectedUrlParam, showDetails } from "./kube-object-details";
 
 export interface KubeObjectListLayoutProps extends ItemListLayoutProps {
   store: KubeObjectStore;
@@ -15,14 +15,13 @@ export interface KubeObjectListLayoutProps extends ItemListLayoutProps {
 @observer
 export class KubeObjectListLayout extends React.Component<KubeObjectListLayoutProps> {
   @computed get selectedItem() {
-    return this.props.store.getByPath(getSelectedDetails());
+    return this.props.store.getByPath(kubeSelectedUrlParam.get());
   }
 
   onDetails = (item: KubeObject) => {
     if (this.props.onDetails) {
       this.props.onDetails(item);
-    }
-    else {
+    } else {
       showDetails(item.selfLink);
     }
   };

src/renderer/components/kube-object/kube-object-menu.tsx

@@ -4,7 +4,7 @@ import { autobind, cssNames } from "../../utils";
 import { KubeObject } from "../../api/kube-object";
 import { editResourceTab } from "../dock/edit-resource.store";
 import { MenuActions, MenuActionsProps } from "../menu/menu-actions";
-import { hideDetails } from "../../navigation";
+import { hideDetails } from "./kube-object-details";
 import { apiManager } from "../../api/api-manager";
 import { kubeObjectMenuRegistry } from "../../../extensions/registries/kube-object-menu-registry";
 

src/renderer/components/kube-object/kube-object-meta.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import { Trans } from "@lingui/macro";
 import { IKubeMetaField, KubeObject } from "../../api/kube-object";
 import { DrawerItem, DrawerItemLabels } from "../drawer";
-import { getDetailsUrl } from "../../navigation";
 import { lookupApiLink } from "../../api/kube-api";
 import { Link } from "react-router-dom";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
+import { getDetailsUrl } from "./kube-object-details";
 
 export interface KubeObjectMetaProps {
   object: KubeObject;