move notebook servers to be first; auto-start server on select

Author: williamstein

src/packages/frontend/components/link-retry.tsx

@@ -104,7 +104,7 @@ const LinkRetry: React.FC<Props> = ({
     if (autoStart) {
       start();
     }
-  }, []);
+  }, [href]);
 
   function renderError() {
     if (!error) return;

src/packages/frontend/project/named-server-panel.tsx

@@ -10,7 +10,6 @@ Jupyter notebook server is running, then pops it up in a new tab.
 
 import { join } from "path";
 import React from "react";
-
 import {
   Icon,
   IconName,
@@ -144,14 +143,14 @@ export const NamedServerPanel: React.FC<Props> = ({
           {description}
           <br />
           <br />
-          Click the link below to start your {longName} server. It will then
-          attempt to open in a new browser tab. If this doesn't work, check for
-          a popup blocker warning!
+          Starting your {longName} server. It will then attempt to open in a new
+          browser tab. If this doesn't work, check for a popup blocker warning!
         </Paragraph>
         <Paragraph
           style={{ textAlign: "center", fontSize: "14pt", margin: "15px" }}
         >
           <LinkRetry
+            autoStart
             href={serverURL(project_id, name)}
             loadingText="Launching server..."
             onClick={() => {

src/packages/frontend/project/servers/project-servers.tsx

@@ -163,6 +163,30 @@ export function ProjectServers(props: Props) {
   }
 
   const items: TabsProps["items"] = [];
+  items.push({
+    key: "notebooks",
+    label: (
+      <span style={{ fontSize: "14pt" }}>
+        <Icon name="jupyter" /> Notebook Servers
+      </span>
+    ),
+    children: (
+      <>
+        <Paragraph>
+          You can run various servers inside this project. They run in the same
+          environment, have access to the same files, and stop when the project
+          stops. You can also{" "}
+          <A href={"https://doc.cocalc.com/howto/webserver.html"}>
+            run your own servers
+          </A>
+          .
+        </Paragraph>
+        {renderNamedServers()}
+        <Divider plain />
+        {renderSageServerControl()}
+      </>
+    ),
+  });
   if (computeServersEnabled()) {
     items.push({
       key: "compute-servers",
@@ -193,30 +217,6 @@ export function ProjectServers(props: Props) {
       children: <CloudFilesystems project_id={project_id} />,
     });
   }
-  items.push({
-    key: "notebooks",
-    label: (
-      <span style={{ fontSize: "14pt" }}>
-        <Icon name="jupyter" /> Notebook Servers
-      </span>
-    ),
-    children: (
-      <>
-        <Paragraph>
-          You can run various servers inside this project. They run in the same
-          environment, have access to the same files, and stop when the project
-          stops. You can also{" "}
-          <A href={"https://doc.cocalc.com/howto/webserver.html"}>
-            run your own servers
-          </A>
-          .
-        </Paragraph>
-        {renderNamedServers()}
-        <Divider plain />
-        {renderSageServerControl()}
-      </>
-    ),
-  });
 
   return (
     <div style={{ ...ROOT_STYLE, margin: "0 auto" }}>