frontend: make it possible to clear the tag and filesystem_tag from a compute server config

Author: williamstein

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

@@ -2,7 +2,7 @@ import type {
   Configuration,
   Images,
 } from "@cocalc/util/db-schema/compute-servers";
-import { Button, Radio, Spin } from "antd";
+import { Button, Radio, Spin, Tooltip } from "antd";
 import { useEffect, useMemo, useState } from "react";
 import { A, Icon } from "@cocalc/frontend/components";
 import { forceRefreshImages } from "./images-hook";
@@ -18,42 +18,76 @@ interface Props {
 }
 
 export default function SelectVersion({
-  setConfig,
+  setConfig: setConfig0,
   configuration,
   disabled,
   image,
   IMAGES,
   style,
 }: Props) {
-  const [tag, setTag] = useState<string | undefined>(configuration.tag);
+  const setConfig = (obj) => {
+    // because we can't use null as a value for radio buttons...
+    for (const k in obj) {
+      if (!obj[k]) {
+        obj[k] = null;
+      }
+    }
+    setConfig0(obj);
+  };
+
+  const [tag, setTag] = useState<string>(configuration.tag ?? "");
   const [refreshing, setRefreshing] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
-  const [tag_filesystem, set_tag_filesystem] = useState<string | undefined>(
-    configuration.tag_filesystem,
+  const [tag_filesystem, set_tag_filesystem] = useState<string>(
+    configuration.tag_filesystem ?? "",
   );
-  const [tag_cocalc, set_tag_cocalc] = useState<string | undefined>(
-    configuration.tag_cocalc,
+  const [tag_cocalc, set_tag_cocalc] = useState<string>(
+    configuration.tag_cocalc ?? "",
   );
 
   useEffect(() => {
-    setTag(configuration.tag);
+    setTag(configuration.tag ?? "");
   }, [configuration.tag]);
 
   useEffect(() => {
-    set_tag_filesystem(configuration.tag_filesystem);
+    set_tag_filesystem(configuration.tag_filesystem ?? "");
   }, [configuration.tag_filesystem]);
 
   useEffect(() => {
-    set_tag_cocalc(configuration.tag_cocalc);
+    set_tag_cocalc(configuration.tag_cocalc ?? "");
   }, [configuration.tag_cocalc]);
 
   // [ ] TODO: MAYBE we should allow gpu/non-gpu options in all cases, but just suggest one or the other?
   const options = useMemo(() => {
-    const { versions } = IMAGES[image] ?? {};
-    if (!versions) {
-      return [];
-    }
-    return versions.map(toOption);
+    return [
+      {
+        label: (
+          <Tooltip title="Use newest available tested image.">Default</Tooltip>
+        ) as any,
+        value: "",
+        key: "default",
+      },
+    ].concat((IMAGES[image]?.versions ?? []).map(toOption));
+  }, [IMAGES, image]);
+
+  const fsOptions = useMemo(() => {
+    return [
+      {
+        label: (
+          <Tooltip title="Use newest available tested filesystem image.">
+            Default
+          </Tooltip>
+        ) as any,
+        value: "",
+        key: "default",
+      },
+    ].concat((IMAGES["filesystem"]?.versions ?? []).map(toOption));
+  }, [IMAGES, image]);
+
+  const cocalcOptions = useMemo(() => {
+    return (
+      IMAGES["cocalc"]?.versions ?? [{ tag: "test" }, { tag: "latest" }]
+    ).map(toOption);
   }, [IMAGES, image]);
 
   // TODO: it would be better to have tagUrl or something like that below...
@@ -116,7 +150,7 @@ export default function SelectVersion({
         }
         disabled={disabled}
         tag={tag_filesystem}
-        options={(IMAGES["filesystem"]?.versions ?? []).map(toOption)}
+        options={fsOptions}
         setTag={(tag) => {
           set_tag_filesystem(tag);
           setConfig({ tag_filesystem: tag });
@@ -137,9 +171,7 @@ export default function SelectVersion({
         }
         disabled={disabled}
         tag={tag_cocalc}
-        options={(
-          IMAGES["cocalc"]?.versions ?? [{ tag: "test" }, { tag: "latest" }]
-        ).map(toOption)}
+        options={cocalcOptions}
         setTag={(tag) => {
           set_tag_cocalc(tag);
           setConfig({ tag_cocalc: tag });
@@ -152,11 +184,23 @@ export default function SelectVersion({
 function toOption(x: {
   label?: string;
   tag: string;
+  description?: string;
   tested?: boolean;
   version?: string;
 }) {
   return {
-    label: `${x.label ?? x.tag}${!x.tested ? " (untested)" : ""}`,
+    label: (
+      <Tooltip
+        title={
+          <>
+            {x.tag ?? x.label ?? ""}{" "}{x.description ?? ""}
+          </>
+        }
+      >
+        {x.label ?? x.tag}
+        {!x.tested ? " (untested)" : ""}
+      </Tooltip>
+    ),
     value: x.tag,
     key: x.tag,
   };