add docs link for cloud filesystem (also slightly improve Refresh button, maybe)

- spin icon for less redraw flicker (?)

Author: williamstein

src/packages/frontend/components/refresh.tsx

@@ -1,16 +1,68 @@
 import { Button } from "antd";
 import { Icon } from "./icon";
-import { CSSProperties } from "react";
+import { CSSProperties, useState } from "react";
+import ShowError from "@cocalc/frontend/components/error";
 
 interface Props {
-  refresh: () => void;
+  refresh: Function;
   style?: CSSProperties;
+  refreshing?;
+  setRefreshing?;
 }
 
-export default function Refresh({ refresh, style }: Props) {
+export default function Refresh({
+  refresh,
+  style,
+  refreshing,
+  setRefreshing,
+}: Props) {
+  if (refreshing == null) {
+    return <UnControlled refresh={refresh} style={style} />;
+  } else {
+    return (
+      <Controlled
+        refresh={refresh}
+        style={style}
+        refreshing={refreshing}
+        setRefreshing={setRefreshing}
+      />
+    );
+  }
+}
+
+function UnControlled({ refresh, style }) {
+  const [refreshing, setRefreshing] = useState<boolean>(false);
+  return (
+    <Controlled
+      refresh={refresh}
+      style={style}
+      refreshing={refreshing}
+      setRefreshing={setRefreshing}
+    />
+  );
+}
+
+function Controlled({ refresh, style, refreshing, setRefreshing }) {
+  const [error, setError] = useState<string>("");
   return (
-    <Button onClick={refresh} style={style}>
-      <Icon name="refresh" /> Refresh
-    </Button>
+    <>
+      <Button
+        onClick={async () => {
+          try {
+            setError("");
+            setRefreshing?.(true);
+            await refresh();
+          } catch (err) {
+            setError(`${err}`);
+          } finally {
+            setRefreshing?.(false);
+          }
+        }}
+        style={style}
+      >
+        <Icon name="refresh" spin={refreshing} /> Refresh
+      </Button>
+      <ShowError error={error} setError={setError} />
+    </>
   );
 }

src/packages/frontend/compute/cloud-filesystem/cloud-filesystems.tsx

@@ -14,6 +14,8 @@ import { Button, Spin } from "antd";
 import CreateCloudFilesystem from "./create";
 import CloudFilesystem from "./cloud-filesystem";
 import { Icon } from "@cocalc/frontend/components/icon";
+import { A } from "@cocalc/frontend/components/A";
+import RefreshButton from "@cocalc/frontend/components/refresh";
 import { cmp } from "@cocalc/util/misc";
 import {
   SortableList,
@@ -148,11 +150,11 @@ export default function CloudFilesystems({ project_id }: Props) {
 
   return (
     <div>
-      <Button style={{ position: "absolute", right: 0 }} onClick={refresh}>
-        <Icon name="refresh" />
-        Refresh{" "}
-        {refreshing ? <Spin style={{ marginLeft: "15px" }} /> : undefined}
-      </Button>
+      <RefreshButton
+        refresh={refresh}
+        style={{ position: "absolute", right: 0 }}
+        refreshing={refreshing}
+      />
       <h2 style={{ textAlign: "center" }}>Cloud File Systems</h2>
       <div style={{ textAlign: "center" }}>
         <Button
@@ -163,9 +165,20 @@ export default function CloudFilesystems({ project_id }: Props) {
           <Icon name="youtube" style={{ color: "red" }} />
           Short Demo
         </Button>
-        <Button href="https://youtu.be/uk5eA5piQEo" target="_new">
+        <Button
+          href="https://youtu.be/uk5eA5piQEo"
+          target="_new"
+          style={{ marginRight: "15px" }}
+        >
           <Icon name="youtube" style={{ color: "red" }} />
-          Longer Demo
+          Long Demo
+        </Button>
+        <Button
+          href="https://doc.cocalc.com/cloud_file_system.html"
+          target="_new"
+        >
+          <Icon name="external-link" />
+          Docs
         </Button>
       </div>
       <p
@@ -176,12 +189,15 @@ export default function CloudFilesystems({ project_id }: Props) {
           color: "#666",
         }}
       >
-        CoCalc Cloud File Systems are scalable distributed POSIX shared
-        file systems with fast local caching. Use them simultaneously from all
-        compute servers in this project. There are no limits on how much data
-        you can store. You do not specify the size of a cloud file system in
-        advance. The cost per GB is typically much less than a compute server
-        disk, but you pay network usage and operations.
+        <A href="https://doc.cocalc.com/cloud_file_system.html">
+          CoCalc Cloud File Systems{" "}
+        </A>
+        are scalable distributed POSIX shared file systems with fast local
+        caching. Use them simultaneously from all compute servers in this
+        project. There are no limits on how much data you can store. You do not
+        specify the size of a cloud file system in advance. The cost per GB is
+        typically much less than a compute server disk, but you pay network
+        usage and operations.
       </p>
 
       <div style={{ margin: "5px 0" }}>

src/packages/frontend/purchases/statements.tsx

@@ -24,9 +24,8 @@ export default function Statements({
   defaultExpandAllRows,
 }: Props) {
   const [statements, setStatements] = useState<Statement[] | null>(null);
-  const [error, setError] = useState<any>("");
+  const [error, setError] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(false);
-
   const refresh = async () => {
     try {
       setLoading(true);
@@ -112,19 +111,24 @@ export default function Statements({
     { title: "ID", dataIndex: "id", key: "id" },
   ];
 
-  if (loading) {
-    return <Spin />;
-  }
   const adjective = interval == "day" ? "daily" : "monthly";
   return (
     <div style={{ minHeight: "50px" }}>
       {!noRefresh && (
-        <Refresh refresh={refresh} style={{ marginBottom: "8px" }} />
+        <Refresh
+          refresh={refresh}
+          style={{ marginBottom: "8px", float: "right" }}
+        />
       )}
       {interval == "day" && (
         <EmailDailyStatements style={{ marginLeft: "30px" }} />
       )}
       <ShowError error={error} setError={setError} />
+      {loading && (
+        <div style={{ margin: "0 15px" }}>
+          <Spin />
+        </div>
+      )}
       {statements != null && statements?.length > 0 && (
         <Table
           rowKey="id"