add compute server image refresh button to admin settings

Author: williamstein

src/packages/frontend/admin/site-settings/render-row.tsx

@@ -3,7 +3,7 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { Button, Popover } from "antd";
+import { Alert, Button, Popover } from "antd";
 import { CSSProperties } from "react";
 
 import { Icon, LabeledRow, Markdown } from "@cocalc/frontend/components";
@@ -12,6 +12,7 @@ import { Config, RowType, Tag } from "@cocalc/util/db-schema/site-defaults";
 import { COLORS } from "@cocalc/util/theme";
 import { Data, IsReadonly } from "./types";
 import { RowEntry } from "./row-entry";
+import { RefreshImagesButton } from "@cocalc/frontend/compute/select-version";
 
 interface RenderRowProps {
   name: string;
@@ -150,6 +151,17 @@ export function RenderRow({
         clearable={conf.clearable}
         update={update}
       />
+      {name == "compute_servers_images_spec_url" && (
+        <div>
+          <RefreshImagesButton />
+          <Alert
+            showIcon
+            style={{ margin: "15px" }}
+            type="info"
+            message="Click the above button after updating the images spec URL to clear the cache."
+          />
+        </div>
+      )}
     </LabeledRow>
   );
 }

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

@@ -34,10 +34,7 @@ export default function SelectVersion({
     }
     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>(
     configuration.tag_filesystem ?? "",
   );
@@ -94,26 +91,7 @@ export default function SelectVersion({
 
   return (
     <div style={style}>
-      <Button
-        size="small"
-        style={{ float: "right" }}
-        onClick={async () => {
-          try {
-            setError("");
-            setRefreshing(true);
-            await forceRefreshImages();
-          } catch (err) {
-            setError(`${err}`);
-          } finally {
-            setRefreshing(false);
-          }
-        }}
-        disabled={refreshing}
-      >
-        <Icon name="refresh" /> Refresh{refreshing ? "ing..." : ""} Images
-        {refreshing && <Spin style={{ marginLeft: "10px" }} />}
-      </Button>
-      <ShowError error={error} setError={setError} />
+      <RefreshImagesButton size={"small"} style={{ float: "right" }} />
       <SelectTag
         style={{ marginBottom: "5px" }}
         label={
@@ -193,7 +171,7 @@ function toOption(x: {
       <Tooltip
         title={
           <>
-            {x.tag ?? x.label ?? ""}{" "}{x.description ?? ""}
+            {x.tag ?? x.label ?? ""} {x.description ?? ""}
           </>
         }
       >
@@ -231,3 +209,31 @@ function SelectTag({ disabled, tag, setTag, options, label, style }) {
     </div>
   );
 }
+
+export function RefreshImagesButton({ size, style }: { size?; style? }) {
+  const [refreshing, setRefreshing] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+  return (
+    <div style={style}>
+      <Button
+        size={size}
+        onClick={async () => {
+          try {
+            setError("");
+            setRefreshing(true);
+            await forceRefreshImages();
+          } catch (err) {
+            setError(`${err}`);
+          } finally {
+            setRefreshing(false);
+          }
+        }}
+        disabled={refreshing}
+      >
+        <Icon name="refresh" /> Refresh{refreshing ? "ing..." : ""} Images
+        {refreshing && <Spin style={{ marginLeft: "10px" }} />}
+      </Button>
+      <ShowError error={error} setError={setError} />
+    </div>
+  );
+}