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/+custom-resources/crd-list.tsx

@@ -10,9 +10,16 @@ import { KubeObjectListLayout } from "../kube-object";
 import { crdStore } from "./crd.store";
 import { CustomResourceDefinition } from "../../api/endpoints/crd.api";
 import { Select, SelectOption } from "../select";
-import { navigation, setQueryParams } from "../../navigation";
+import { createPageParam } from "../../navigation";
 import { Icon } from "../icon";
 
+export const crdGroupsUrlParam = createPageParam<string[]>({
+  name: "groups",
+  multiValues: true,
+  isSystem: true,
+  defaultValue: [],
+});
+
 enum sortBy {
   kind = "kind",
   group = "group",
@@ -23,17 +30,19 @@ enum sortBy {
 
 @observer
 export class CrdList extends React.Component {
-  @computed get groups() {
-    return navigation.searchParams.getAsArray("groups");
+  @computed get groups(): string[] {
+    return crdGroupsUrlParam.get();
   }
 
-  onGroupChange(group: string) {
-    const groups = [...this.groups];
-    const index = groups.findIndex(item => item == group);
+  onSelectGroup(group: string) {
+    const groups = new Set(this.groups);
 
-    if (index !== -1) groups.splice(index, 1);
-    else groups.push(group);
-    setQueryParams({ groups });
+    if (groups.has(group)) {
+      groups.delete(group); // toggle selection
+    } else {
+      groups.add(group);
+    }
+    crdGroupsUrlParam.set(Array.from(groups));
   }
 
   render() {
@@ -71,7 +80,7 @@ export class CrdList extends React.Component {
                 className="group-select"
                 placeholder={placeholder}
                 options={Object.keys(crdStore.groups)}
-                onChange={({ value: group }: SelectOption) => this.onGroupChange(group)}
+                onChange={({ value: group }: SelectOption) => this.onSelectGroup(group)}
                 controlShouldRenderValue={false}
                 formatOptionLabel={({ value: group }: SelectOption) => {
                   const isSelected = selectedGroups.includes(group);