improve the compute server filter -- it shouldn't vanish on edit

- surprisingly tricky....

Author: williamstein

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

@@ -29,7 +29,6 @@ interface Server1 extends Omit<ComputeServerUserInfo, "id"> {
 
 interface Controls {
   setShowDeleted?: (showDeleted: boolean) => void;
-  setSearch?: (search: string) => void;
   onTitleChange?;
   onColorChange?;
   onCloudChange?;
@@ -44,6 +43,9 @@ interface Props {
   modalOnly?: boolean;
   close?: () => void;
 }
+export const currentlyEditing = {
+  id: 0,
+};
 
 export default function ComputeServer({
   server,
@@ -74,7 +76,6 @@ export default function ComputeServer({
 
   const {
     setShowDeleted,
-    setSearch,
     onTitleChange,
     onColorChange,
     onCloudChange,
@@ -88,6 +89,11 @@ export default function ComputeServer({
     if (!edit && close != null) {
       close();
     }
+    if (edit) {
+      currentlyEditing.id = id ?? 0;
+    } else {
+      currentlyEditing.id = 0;
+    }
   };
 
   if (id == null && modalOnly) {
@@ -112,11 +118,6 @@ export default function ComputeServer({
           key="edit"
           type="text"
           onClick={() => {
-            if (!edit) {
-              // clear the search -- otherwise changing the title a little
-              // closes the modal!
-              setSearch?.("");
-            }
             setEdit(!edit);
           }}
         >
@@ -304,7 +305,8 @@ export default function ComputeServer({
             {buttons}
             <Divider />
             <Icon name="edit" style={{ marginRight: "15px" }} />{" "}
-            {editable ? "Edit" : ""} Compute Server With Id={project_specific_id}
+            {editable ? "Edit" : ""} Compute Server With Id=
+            {project_specific_id}
           </>
         }
         footer={
@@ -368,7 +370,9 @@ export default function ComputeServer({
               name={cloud == "onprem" ? "global" : "server"}
               style={{ fontSize: "30px", color: color ?? "#666" }}
             />
-            {id != null && <div style={{ color: "#888" }}>Id: {project_specific_id}</div>}
+            {id != null && (
+              <div style={{ color: "#888" }}>Id: {project_specific_id}</div>
+            )}
             {id != null && (
               <ComputeServerLog id={id} style={{ marginLeft: "-15px" }} />
             )}

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

@@ -1,10 +1,19 @@
 import { A } from "@cocalc/frontend/components/A";
-import ComputeServer from "./compute-server";
+import ComputeServer, { currentlyEditing } from "./compute-server";
 import CreateComputeServer from "./create-compute-server";
 import { useTypedRedux } from "@cocalc/frontend/app-framework";
 import { cmp, plural } from "@cocalc/util/misc";
 import { availableClouds } from "./config";
-import { Input, Card, Checkbox, Radio, Switch, Tooltip } from "antd";
+import {
+  Alert,
+  Button,
+  Input,
+  Card,
+  Checkbox,
+  Radio,
+  Switch,
+  Tooltip,
+} from "antd";
 import { useEffect, useState } from "react";
 const { Search } = Input;
 import { search_match, search_split } from "@cocalc/util/misc";
@@ -166,6 +175,7 @@ function ComputeServerTable({
   >(
     (get_local_storage(`${project_id}-compute-server-sort`) ?? "custom") as any,
   );
+
   if (!computeServers || computeServers.size == 0) {
     return (
       <div style={{ textAlign: "center" }}>
@@ -179,7 +189,14 @@ function ComputeServerTable({
   const search_words = search_split(search.toLowerCase());
   const ids: number[] = [];
   let numDeleted = 0;
+  let numSkipped = 0;
   for (const [id] of computeServers) {
+    if (currentlyEditing.id == id) {
+      // always include the one that is currently being edited.  We wouldn't want,
+      // e.g., changing the title shouldn't make the editing modal vanish!
+      ids.push(id);
+      continue;
+    }
     const isDeleted = !!computeServers.getIn([id, "deleted"]);
     if (isDeleted) {
       numDeleted += 1;
@@ -191,6 +208,7 @@ function ComputeServerTable({
       if (
         !search_match(computeServerToSearch(computeServers, id), search_words)
       ) {
+        numSkipped += 1;
         continue;
       }
     }
@@ -258,7 +276,7 @@ function ComputeServerTable({
           style={{ marginBottom: "10px" }}
           key={`${id}`}
           editable={account_id == server.account_id}
-          controls={{ setShowDeleted, setSearch }}
+          controls={{ setShowDeleted }}
         />
       </div>
     );
@@ -347,6 +365,25 @@ function ComputeServerTable({
             </Checkbox>
           )}
         </div>
+        {numSkipped > 0 && (
+          <Alert
+            showIcon
+            style={{ margin: "15px auto", maxWidth: "600px" }}
+            type="warning"
+            message={
+              <div style={{ marginTop: "5px" }}>
+                Not showing {numSkipped} compute servers due to current filter.
+                <Button
+                  type="text"
+                  style={{ float: "right", marginTop: "-5px" }}
+                  onClick={() => setSearch("")}
+                >
+                  Clear
+                </Button>
+              </div>
+            }
+          />
+        )}
         <div
           style={{ /* maxHeight: "60vh", overflow: "auto", */ width: "100%" }}
         >