shell: Use a top-level React component

And rewrite much of the state handling to make it easier to
understand.

Specifically, the old Index and MachineIndex classes and their
complicated interactions have been replaced with a hopefully much more
straightforward ShellState class.

However, the existing React components such as CockpitHosts and TopNav
have not been significantly touched.

The API for launching the HostModal dialogs has been changed to make
it more suitable for a later rewrite with Dialogs.run() ala
pkg/lib/cockpit-connect-ssh.

files.js

@@ -28,7 +28,7 @@ const info = {
         "playground/remote.tsx",
 
         "selinux/selinux.js",
-        "shell/shell.js",
+        "shell/shell.jsx",
         "sosreport/sosreport.jsx",
         "static/login.js",
         "storaged/storaged.jsx",

pkg/lib/cockpit/_internal/transport.ts

@@ -54,8 +54,10 @@ class Transport extends EventEmitter<{ ready(): void }> {
 
         /* See if we should communicate via parent */
         if (window.parent !== window && window.name.indexOf("cockpit1:") === 0) {
+            console.log("PARENT SOCKET");
             this.#ws = new ParentWebSocket(window.parent);
         } else {
+            console.log("REAL SOCKET");
             const ws_loc = calculate_url();
             transport_debug("connecting to " + ws_loc);
             this.#ws = new WebSocket(ws_loc, "cockpit1");

pkg/shell/active-pages-modal.jsx

@@ -29,20 +29,18 @@ import { useInit } from "hooks";
 
 const _ = cockpit.gettext;
 
-export const ActivePagesDialog = ({ dialogResult, frames }) => {
+export const ActivePagesDialog = ({ dialogResult, state }) => {
     function get_pages() {
         const result = [];
-        for (const address in frames.iframes) {
-            for (const component in frames.iframes[address]) {
-                const iframe = frames.iframes[address][component];
+        for (const n in state.frames) {
+            const f = state.frames[n];
+            if (f.url) {
+                const active = (f == state.current_frame || state.most_recent_path_for_host(f.host) == f.path);
                 result.push({
-                    frame: iframe,
-                    component,
-                    address,
-                    name: iframe.getAttribute("name"),
-                    active: iframe.getAttribute("data-active") === 'true',
-                    selected: iframe.getAttribute("data-active") === 'true',
-                    displayName: address === "localhost" ? "/" + component : address + ":/" + component
+                    frame: f,
+                    active,
+                    selected: active,
+                    displayName: f.host === "localhost" ? "/" + f.path : f.host + ":/" + f.path,
                 });
             }
         }
@@ -61,8 +59,9 @@ export const ActivePagesDialog = ({ dialogResult, frames }) => {
 
     function onRemove() {
         pages.forEach(element => {
-            if (element.selected)
-                frames.remove(element.host, element.component);
+            if (element.selected) {
+                state.remove_frame(element.frame.name);
+            }
         });
         dialogResult.resolve();
     }
@@ -80,8 +79,8 @@ export const ActivePagesDialog = ({ dialogResult, frames }) => {
         }];
         return ({
             props: {
-                key: page.name,
-                'data-row-id': page.name
+                key: page.frame.name,
+                'data-row-id': page.frame.name
             },
             columns,
             selected: page.selected,