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/>}