fix create compute server option to account for tabs

Author: williamstein

src/packages/frontend/compute/select-server.tsx

@@ -241,13 +241,9 @@ export default function SelectServer({
           label: (
             <div
               onClick={() => {
-                const actions = redux.getProjectActions(project_id);
-                if (actions != null) {
-                  actions.setState({ create_compute_server: true });
-                  actions.set_active_tab("servers", {
-                    change_history: true,
-                  });
-                }
+                redux
+                  .getProjectActions(project_id)
+                  ?.createComputeServerDialog();
               }}
             >
               <Icon name="plus-circle" /> New Compute Server...

src/packages/frontend/compute/tab.ts

@@ -3,12 +3,14 @@ import {
   set_local_storage,
 } from "@cocalc/frontend/misc/local-storage";
 
-export function getServerTab(project_id): string | undefined {
+export type TabName = "compute-servers" | "cloud-filesystems" | "notebooks";
+
+export function getServerTab(project_id): TabName | undefined {
   return (get_local_storage(`${project_id}-server-tab`) ?? undefined) as
-    | string
+    | TabName
     | undefined;
 }
 
-export function setServerTab(project_id, tab) {
+export function setServerTab(project_id, tab: TabName) {
   return set_local_storage(`${project_id}-server-tab`, tab);
 }

src/packages/frontend/project/page/flyouts/servers.tsx

@@ -17,7 +17,11 @@ import { FIX_BORDER } from "@cocalc/frontend/project/page/common";
 import { SagewsControl } from "@cocalc/frontend/project/settings/sagews-control";
 import { NAMED_SERVER_NAMES } from "@cocalc/util/types/servers";
 import { FLYOUT_PADDING } from "./consts";
-import { getServerTab, setServerTab } from "@cocalc/frontend/compute/tab";
+import {
+  getServerTab,
+  setServerTab,
+  TabName,
+} from "@cocalc/frontend/compute/tab";
 
 export function ServersFlyout({ project_id, wrap }) {
   const servers = NAMED_SERVER_NAMES.map((name) => (
@@ -122,7 +126,7 @@ export function ServersFlyout({ project_id, wrap }) {
     <Tabs
       items={items}
       defaultActiveKey={getServerTab(project_id)}
-      onChange={(tab) => setServerTab(project_id, tab)}
+      onChange={(tab) => setServerTab(project_id, tab as TabName)}
     />,
   );
 }

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

@@ -22,7 +22,11 @@ import { SagewsControl } from "../settings/sagews-control";
 import { useAvailableFeatures } from "../use-available-features";
 import { ICON_NAME, ROOT_STYLE, TITLE } from "./consts";
 import CloudFilesystems from "@cocalc/frontend/compute/cloud-filesystem/cloud-filesystems";
-import { getServerTab, setServerTab } from "@cocalc/frontend/compute/tab";
+import {
+  getServerTab,
+  setServerTab,
+  TabName,
+} from "@cocalc/frontend/compute/tab";
 
 // Antd's 24 grid system
 const md = 6;
@@ -226,7 +230,7 @@ export function ProjectServers(props: Props) {
       <Tabs
         items={items}
         defaultActiveKey={getServerTab(project_id)}
-        onChange={(tab) => setServerTab(project_id, tab)}
+        onChange={(tab) => setServerTab(project_id, tab as TabName)}
       />
     </div>
   );

src/packages/frontend/project_actions.ts

@@ -81,6 +81,7 @@ import {
   FlyoutLogFilter,
 } from "./project/page/flyouts/utils";
 import { modalParams } from "@cocalc/frontend/compute/select-server-for-file";
+import { setServerTab } from "@cocalc/frontend/compute/tab";
 
 const { defaults, required } = misc;
 
@@ -3457,4 +3458,16 @@ export class ProjectActions extends Actions<ProjectStoreState> {
     const store = this.get_store();
     return id ?? store?.get("compute_server_id") ?? 0;
   };
+
+  showComputeServers = () => {
+    setServerTab(this.project_id, "compute-servers");
+    this.set_active_tab("servers", {
+      change_history: true,
+    });
+  };
+
+  createComputeServerDialog = () => {
+    this.setState({ create_compute_server: true });
+    this.showComputeServers();
+  };
 }