Merge remote-tracking branch 'origin/master' into ubuntu2404-dev

src/packages/frontend/account/account-page.tsx

@@ -15,7 +15,6 @@ import { Flex, Menu, Space } from "antd";
 import { useIntl } from "react-intl";
 import { SignOut } from "@cocalc/frontend/account/sign-out";
 import BalanceButton from "@cocalc/frontend/purchases/balance-button";
-import { AntdTabItem } from "@cocalc/frontend/antd-bootstrap";
 import {
   React,
   redux,
@@ -30,6 +29,7 @@ import { labels } from "@cocalc/frontend/i18n";
 import PurchasesPage from "@cocalc/frontend/purchases/purchases-page";
 import PayAsYouGoPage from "@cocalc/frontend/purchases/payg-page";
 import PaymentsPage from "@cocalc/frontend/purchases/payments-page";
+import PaymentMethodsPage from "@cocalc/frontend/purchases/payment-methods-page";
 import StatementsPage from "@cocalc/frontend/purchases/statements-page";
 import SubscriptionsPage from "@cocalc/frontend/purchases/subscriptions-page";
 import { SupportTickets } from "@cocalc/frontend/support";
@@ -73,103 +73,110 @@ export const AccountPage: React.FC = () => {
     redux.getActions("account").push_state(`/${key}`);
   }
 
-  function render_account_tab(): AntdTabItem {
-    return {
-      key: "account",
-      label: (
-        <span>
-          <Icon name="address-card" /> {intl.formatMessage(labels.preferences)}
-        </span>
-      ),
-      children: (active_page == null || active_page === "account") && (
-        <AccountPreferences />
-      ),
-    };
-  }
-
-  function render_special_tabs(): AntdTabItem[] {
+  function getTabs(): any[] {
+    const items: any[] = [
+      {
+        key: "account",
+        label: (
+          <span>
+            <Icon name="address-card" />{" "}
+            {intl.formatMessage(labels.preferences)}
+          </span>
+        ),
+        children: (active_page == null || active_page === "account") && (
+          <AccountPreferences />
+        ),
+      },
+    ];
     // adds a few conditional tabs
     if (is_anonymous) {
-      // None of these make any sense for a temporary anonymous account.
-      return [];
+      // None of the rest make any sense for a temporary anonymous account.
+      return items;
     }
-    const items: AntdTabItem[] = [];
+    items.push({ type: "divider" });
+
     if (is_commercial) {
       items.push({
-        key: "purchases",
+        key: "subscriptions",
         label: (
           <span>
-            <Icon name="money-check" /> {intl.formatMessage(labels.purchases)}
+            <Icon name="calendar" /> {intl.formatMessage(labels.subscriptions)}
           </span>
         ),
-        children: active_page === "purchases" && <PurchasesPage />,
+        children: active_page === "subscriptions" && <SubscriptionsPage />,
       });
       items.push({
-        key: "payments",
+        key: "licenses",
         label: (
           <span>
-            <Icon name="credit-card" /> Payments
+            <Icon name="key" /> {intl.formatMessage(labels.licenses)}
           </span>
         ),
-        children: active_page === "payments" && <PaymentsPage />,
+        children: active_page === "licenses" && <LicensesPage />,
       });
       items.push({
-        key: "statements",
+        key: "payg",
         label: (
           <span>
-            <Icon name="calendar-week" />{" "}
-            {intl.formatMessage(labels.statements)}
+            <Icon name="line-chart" /> Pay As You Go
           </span>
         ),
-        children: active_page === "statements" && <StatementsPage />,
+        children: active_page === "payg" && <PayAsYouGoPage />,
       });
+      if (is_commercial && kucalc === KUCALC_COCALC_COM) {
+        // these have been deprecated for ~ 5 years, but some customers still have them.
+        items.push({
+          key: "upgrades",
+          label: (
+            <span>
+              <Icon name="arrow-circle-up" />{" "}
+              {intl.formatMessage(labels.upgrades)}
+            </span>
+          ),
+          children: active_page === "upgrades" && <UpgradesPage />,
+        });
+      }
+      items.push({ type: "divider" });
       items.push({
-        key: "subscriptions",
+        key: "purchases",
         label: (
           <span>
-            <Icon name="calendar" /> {intl.formatMessage(labels.subscriptions)}
+            <Icon name="money-check" /> {intl.formatMessage(labels.purchases)}
           </span>
         ),
-        children: active_page === "subscriptions" && <SubscriptionsPage />,
+        children: active_page === "purchases" && <PurchasesPage />,
       });
       items.push({
-        key: "payg",
+        key: "payments",
         label: (
           <span>
-            <Icon name="line-chart" /> Pay As You Go
+            <Icon name="credit-card" /> Payments
           </span>
         ),
-        children: active_page === "payg" && <PayAsYouGoPage />,
+        children: active_page === "payments" && <PaymentsPage />,
       });
-    }
-
-    if (
-      kucalc === KUCALC_COCALC_COM ||
-      kucalc === KUCALC_ON_PREMISES ||
-      is_commercial
-    ) {
       items.push({
-        key: "licenses",
+        key: "payment-methods",
         label: (
           <span>
-            <Icon name="key" /> {intl.formatMessage(labels.licenses)}
+            <Icon name="credit-card" /> Payment Methods
           </span>
         ),
-        children: active_page === "licenses" && <LicensesPage />,
+        children: active_page === "payment-methods" && <PaymentMethodsPage />,
       });
-    }
-
-    if (is_commercial) {
       items.push({
-        key: "support",
+        key: "statements",
         label: (
           <span>
-            <Icon name="medkit" /> {intl.formatMessage(labels.support)}
+            <Icon name="calendar-week" />{" "}
+            {intl.formatMessage(labels.statements)}
           </span>
         ),
-        children: active_page === "support" && <SupportTickets />,
+        children: active_page === "statements" && <StatementsPage />,
       });
+      items.push({ type: "divider" });
     }
+
     items.push({
       key: "public-files",
       label: (
@@ -192,19 +199,27 @@ export const AccountPage: React.FC = () => {
         children: <CloudFilesystems noTitle />,
       });
     }
-    if (is_commercial && kucalc === KUCALC_COCALC_COM) {
-      // these have been deprecated for ~ 5 years, but some customers still have them.
+
+    if (
+      kucalc === KUCALC_COCALC_COM ||
+      kucalc === KUCALC_ON_PREMISES ||
+      is_commercial
+    ) {
+    }
+
+    if (is_commercial) {
+      items.push({ type: "divider" });
       items.push({
-        key: "upgrades",
+        key: "support",
         label: (
           <span>
-            <Icon name="arrow-circle-up" />{" "}
-            {intl.formatMessage(labels.upgrades)}
+            <Icon name="medkit" /> {intl.formatMessage(labels.support)}
           </span>
         ),
-        children: active_page === "upgrades" && <UpgradesPage />,
+        children: active_page === "support" && <SupportTickets />,
       });
     }
+
     return items;
   }
 
@@ -234,10 +249,7 @@ export const AccountPage: React.FC = () => {
       );
     }
 
-    const tabs: AntdTabItem[] = [
-      render_account_tab(),
-      ...render_special_tabs(),
-    ];
+    const tabs = getTabs();
 
     // NOTE: This is a bit weird, since I rewrote it form antd Tabs
     // to an antd Menu, but didn't change any of the above.
@@ -246,6 +258,9 @@ export const AccountPage: React.FC = () => {
     const children = {};
     const titles = {};
     for (const tab of tabs) {
+      if (tab.type == "divider") {
+        continue;
+      }
       children[tab.key] = tab.children;
       titles[tab.key] = tab.label;
       delete tab.children;

src/packages/frontend/account/avatar/avatar.tsx

@@ -280,18 +280,15 @@ const Avatar0: React.FC<Props> = (props) => {
   // we put avatars inside <p>'s in some cases so do not use divs here.
   const elt = (
     <span
-      style={{ display: "inline-block", cursor: "pointer", ...props.style }}
+      style={{
+        display: "inline-block",
+        ...outer_style,
+        ...CIRCLE_OUTER_STYLE,
+        ...props.style,
+      }}
+      onClick={click_avatar}
     >
-      <span
-        style={{
-          display: "inline-block",
-          ...outer_style,
-          ...CIRCLE_OUTER_STYLE,
-        }}
-        onClick={click_avatar}
-      >
-        {render_inside()}
-      </span>
+      {render_inside()}
     </span>
   );
   if (props.no_tooltip) {

src/packages/frontend/account/balance-toward-subs.tsx

@@ -7,7 +7,24 @@ export default function UseBalanceTowardSubscriptions({
   style,
   use_balance_toward_subscriptions,
   set_use_balance_toward_subscriptions,
+  minimal,
 }) {
+  const body = (
+    <Tooltip title="Enable this if you do not need to maintain a positive balance for pay as you go purchases.  If you are using compute servers you probably do not want to enable this. However, if you primarily put credit on your account to pay for subscriptions, consider enabling this.  The entire amount for the subscription renewal must be available.">
+      <Checkbox
+        checked={use_balance_toward_subscriptions}
+        onChange={(e) => {
+          set_use_balance_toward_subscriptions(e.target.checked);
+        }}
+      >
+        Use Balance - pay subscription using balance on your account, if
+        possible
+      </Checkbox>
+    </Tooltip>
+  );
+  if (minimal) {
+    return body;
+  }
   return (
     <Card
       style={style}
@@ -17,17 +34,7 @@ export default function UseBalanceTowardSubscriptions({
         </>
       }
     >
-      <Tooltip title="Enable this if you do not need to maintain a positive balance for pay as you go purchases.  If you are using compute servers you probably do not want to enable this. However, if you primarily put credit on your account to pay for subscriptions, consider enabling this.  The entire amount for the subscription renewal must be available.">
-        <Checkbox
-          checked={use_balance_toward_subscriptions}
-          onChange={(e) => {
-            set_use_balance_toward_subscriptions(e.target.checked);
-          }}
-        >
-          Use Balance - pay subscription using balance on your account, if
-          possible
-        </Checkbox>
-      </Tooltip>
+      {body}
     </Card>
   );
 }

src/packages/frontend/account/licenses/licenses-page.tsx

@@ -12,7 +12,7 @@ import { A } from "@cocalc/frontend/components/A";
 
 export function LicensesPage() {
   return (
-    <div style={{ maxWidth: "1000px", margin: "auto" }}>
+    <div style={{ margin: "auto" }}>
       <div style={{ fontSize: "12pt" }}>
         <h3>About</h3>
         <A href={DOC_LICENSE_URL}>Licenses</A> allow you to automatically

src/packages/frontend/account/other-settings.tsx

@@ -673,14 +673,15 @@ export function OtherSettings(props: Readonly<Props>): JSX.Element {
 
 import UseBalanceTowardSubscriptions from "./balance-toward-subs";
 
-function UseBalance({ style }) {
+export function UseBalance({ style, minimal }: { style?; minimal? }) {
   const use_balance_toward_subscriptions = useTypedRedux(
     "account",
     "other_settings",
   )?.get("use_balance_toward_subscriptions");
-  
+
   return (
     <UseBalanceTowardSubscriptions
+      minimal={minimal}
       style={style}
       use_balance_toward_subscriptions={use_balance_toward_subscriptions}
       set_use_balance_toward_subscriptions={(value) => {

src/packages/frontend/app/notifications.tsx

@@ -85,16 +85,6 @@ export const Notification: React.FC<Props> = React.memo((props: Props) => {
 
       case "notifications":
         page_actions.set_active_tab("notifications");
-
-        // the idea of the following is to make sure the user sees immediately the most important notifications
-        if (count > 0) {
-          // mentions are more important, and this makes them shown to the user
-          redux.getActions("mentions").set_filter("unread");
-        } else if (news_unread > 0) {
-          // similar to the above, guide user towards seeing the news (if there are no mentions)
-          redux.getActions("mentions").set_filter("allNews");
-        }
-
         if (!active) {
           track("top_nav", { name: "mentions" });
         }

src/packages/frontend/client/purchases.ts

@@ -147,10 +147,6 @@ export class PurchasesClient {
     return await purchasesApi.getPayAsYouGoPricesProjectQuotas();
   }
 
-  async syncPaidInvoices() {
-    await purchasesApi.syncPaidInvoices();
-  }
-
   // this is only used in the nextjs store app right now...
   async getShoppingCartCheckoutParams() {
     return await purchasesApi.getShoppingCartCheckoutParams();

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

@@ -309,12 +309,16 @@ export function ImageLinks({ image, style }: { image; style? }) {
       <A style={{ flex: 1 }} href={data.source}>
         <Icon name="github" /> GitHub
       </A>
-      <A style={{ flex: 1 }} href={data.url}>
-        <Icon name="external-link" /> {trunc(data.label, 10)}
-      </A>
-      <A style={{ flex: 1 }} href={packageNameToUrl(data.package)}>
-        <Icon name="docker" /> DockerHub
-      </A>
+      {!!data.url && (
+        <A style={{ flex: 1 }} href={data.url}>
+          <Icon name="external-link" /> {trunc(data.label, 10)}
+        </A>
+      )}
+      {!!data.package && (
+        <A style={{ flex: 1 }} href={packageNameToUrl(data.package)}>
+          <Icon name="docker" /> DockerHub
+        </A>
+      )}
     </div>
   );
 }