fix spend limit compute server modal crash bug

Author: williamstein

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

@@ -1,7 +1,6 @@
 import { Button, Card, Divider, Modal, Popconfirm, Spin } from "antd";
-import { CSSProperties, useMemo, useState } from "react";
-
-import { useTypedRedux } from "@cocalc/frontend/app-framework";
+import { CSSProperties, useEffect, useMemo, useState } from "react";
+import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components";
 import ShowError from "@cocalc/frontend/components/error";
 import { CancelText } from "@cocalc/frontend/i18n/components";
@@ -564,6 +563,13 @@ export default function ComputeServer({
 }
 
 export function useServer({ id, project_id }) {
+  useEffect(() => {
+    const actions = redux.getProjectActions(project_id);
+    actions.incrementReferenceCount();
+    return () => {
+      actions.decrementReferenceCount();
+    };
+  }, [project_id]);
   const computeServers = useTypedRedux({ project_id }, "compute_servers");
   const server = useMemo(() => {
     return computeServers?.get(`${id}`)?.toJS();

src/packages/frontend/compute/spend-limit.tsx

@@ -44,8 +44,11 @@ export function SpendLimit({
   const [error, setError] = useState<string>("");
   const [saving, setSaving] = useState<boolean>(false);
   const [spendLimit, setSpendLimit] = useState<Partial<ISpendLimit>>(
-    server.configuration?.spendLimit ?? SPEND_LIMIT_DEFAULTS,
+    server?.configuration?.spendLimit ?? SPEND_LIMIT_DEFAULTS,
   );
+  useEffect(() => {
+    setSpendLimit(server?.configuration?.spendLimit ?? SPEND_LIMIT_DEFAULTS);
+  }, [server?.configuration]);
 
   if (server == null) {
     return <Spin />;
@@ -197,6 +200,7 @@ export function SpendLimitModal({ id, project_id, close, extra = [] }) {
         </div>
       }
     >
+      {help && <div>Configure limits on spending here.</div>}
       <SpendLimit id={id} project_id={project_id} help={help} extra={extra} />
     </Modal>
   );

src/packages/frontend/project_actions.ts

@@ -336,9 +336,31 @@ export class ProjectActions extends Actions<ProjectStoreState> {
   };
   isTabClosed = () => !this.isTabOpened();
 
+  // The expensive part of the actions should NOT exist if and only if
+  // the reference count is 0 *AND* the tab is closed.
+  private referenceCount = 0;
+
+  incrementReferenceCount = () => {
+    this.referenceCount++;
+    this.initExpensive();
+  };
+
+  decrementReferenceCount = () => {
+    if (this.referenceCount <= 0) {
+      console.warn(
+        "BUG: attempt to decrement project actions reference count below 0",
+      );
+      return;
+    }
+    this.referenceCount--;
+    if (this.referenceCount <= 0 && !this.isTabOpened()) {
+      this.closeExpensive();
+    }
+  };
+
   private expensiveLoop = async () => {
     while (this.state != "closed") {
-      if (this.isTabOpened()) {
+      if (this.isTabOpened() || this.referenceCount > 0) {
         this.initExpensive();
       } else {
         this.closeExpensive();

src/packages/util/smc-version.js

@@ -1,2 +1,2 @@
 /* autogenerated by the update_version script */
-exports.version=1758034770;
+exports.version=1758657266;