add collab limit configuration option for free projects; move license config up in project config, since licenses are much more popular than PayG; make heading size consistent; get rid of legacy support link in middle of upgrade page

Author: williamstein

src/packages/frontend/collaborators/add-collaborators.tsx

@@ -7,7 +7,7 @@
 Add collaborators to a project
 */
 
-import { Alert, Input, Select } from "antd";
+import { Alert, Button, Card, Input, Select } from "antd";
 import {
   React,
   redux,
@@ -18,7 +18,7 @@ import {
   useTypedRedux,
   useState,
 } from "../app-framework";
-import { Button, ButtonToolbar, Well } from "../antd-bootstrap";
+import { Well } from "../antd-bootstrap";
 import { A, Icon, Loading, ErrorDisplay, Gap } from "../components";
 import { webapp_client } from "../webapp-client";
 import { SITE_NAME } from "@cocalc/util/theme";
@@ -39,6 +39,9 @@ import { alert_message } from "../alerts";
 import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
 import Sandbox from "./sandbox";
 import track from "@cocalc/frontend/user-tracking";
+import { SiteLicenseInput } from "@cocalc/frontend/site-licenses/input";
+import { applyLicense } from "@cocalc/frontend/project/settings/site-license";
+import { BuyLicenseForProject } from "@cocalc/frontend/site-licenses/purchase/buy-license-for-project";
 
 interface RegisteredUser {
   sort?: string;
@@ -85,6 +88,10 @@ export const AddCollaborators: React.FC<Props> = ({
   where,
   mode = "project",
 }) => {
+  const unlicensedLimit = useTypedRedux(
+    "customize",
+    "unlicensed_project_collaborator_limit",
+  );
   const isFlyout = mode === "flyout";
   const student = useStudentProjectFunctionality(project_id);
   const user_map = useTypedRedux("users", "user_map");
@@ -119,6 +126,13 @@ export const AddCollaborators: React.FC<Props> = ({
   const [email_body_editing, set_email_body_editing] = useState<boolean>(false);
   const [invite_result, set_invite_result] = useState<string>("");
 
+  const hasLicense = (project?.get("site_license")?.size ?? 0) > 0;
+  const limitExceeded =
+    !!unlicensedLimit &&
+    !hasLicense &&
+    (project?.get("users").size ?? 1) + selected_entries.length >
+      unlicensedLimit;
+
   const isMountedRef = useIsMountedRef();
 
   const project_actions = useActions("projects");
@@ -454,24 +468,15 @@ export const AddCollaborators: React.FC<Props> = ({
           />
           <div
             style={{
-              border: "1px solid lightgrey",
-              padding: "10px",
-              borderRadius: "5px",
+              padding: "20px 0",
               backgroundColor: "white",
               marginBottom: "15px",
             }}
           >
             {render_email_body_error()}
             {render_email_textarea()}
           </div>
-          <ButtonToolbar>
-            <Button
-              bsStyle="primary"
-              onClick={send_email_invite}
-              disabled={!!email_body_editing}
-            >
-              Send Invitation
-            </Button>
+          <div style={{ display: "flex" }}>
             <Button
               onClick={() => {
                 set_email_to("");
@@ -481,7 +486,15 @@ export const AddCollaborators: React.FC<Props> = ({
             >
               Cancel
             </Button>
-          </ButtonToolbar>
+            <Gap />
+            <Button
+              type="primary"
+              onClick={send_email_invite}
+              disabled={!!email_body_editing}
+            >
+              Send Invitation
+            </Button>
+          </div>
         </Well>
       </div>
     );
@@ -640,14 +653,14 @@ export const AddCollaborators: React.FC<Props> = ({
         disabled = false;
       }
     }
-    if (email_body_error) {
+    if (email_body_error || limitExceeded) {
       disabled = true;
     }
     return (
-      <div>
+      <div style={{ display: "flex" }}>
         <Button onClick={reset}>Cancel</Button>
         <Gap />
-        <Button disabled={disabled} onClick={add_selected} bsStyle="primary">
+        <Button disabled={disabled} onClick={add_selected} type="primary">
           <Icon name="user-plus" /> {label}
         </Button>
       </div>
@@ -678,6 +691,30 @@ export const AddCollaborators: React.FC<Props> = ({
     <div
       style={isFlyout ? { paddingLeft: "5px", paddingRight: "5px" } : undefined}
     >
+      {limitExceeded && (
+        <Card
+          size="small"
+          title={
+            <h4>
+              <div style={{ float: "right" }}>
+                <BuyLicenseForProject project_id={project_id} />
+              </div>
+              <Icon name="key" /> Select License
+            </h4>
+          }
+          style={{ margin: "10px 0" }}
+        >
+          <SiteLicenseInput
+            requireValid
+            confirmLabel={"Add this license"}
+            onChange={(license_id) => {
+              applyLicense({ project_id, license_id });
+            }}
+            requireLicense
+            requireMessage={`A license is required to have more than ${unlicensedLimit} collaborators on this project.`}
+          />
+        </Card>
+      )}
       {err && <ErrorDisplay error={err} onClose={() => set_err("")} />}
       {state == "searching" && <Loading />}
       {render_search()}

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

@@ -17,14 +17,15 @@ export default function ComputeServersAlert({ project_id }) {
       type="success"
       showIcon
       icon={<Icon name="servers" />}
-      message={<>Dedicated Compute Servers</>}
+      message={<>Compute Servers</>}
       description={
         <>
-          You can also run Jupyter notebooks, terminals, and commercial software
-          on dedicated VM's where you have root permissions. These are charged
-          by the second and have up to{" "}
+          You can also easily use a dedicated server where you have full admin
+          root permissions and nearly unlimited resources. These are charged by
+          the second and have up to{" "}
           <strong>
-            11,776GB of RAM, 416 vCPUs, 65TB of disk space, and GPUs.{" "}
+            416 vCPUs, 65TB of disk space, 11TB of RAM and high end GPUs
+            including 8x NVIDIA H100s.{" "}
           </strong>
           <br />
           Click the{" "}

src/packages/frontend/customize.tsx

@@ -128,6 +128,7 @@ export interface CustomizeState {
   nonfree_countries?: List<string>;
   limit_free_project_uptime: number; // minutes
   require_license_to_create_project?: boolean;
+  unlicensed_project_collaborator_limit?: number;
   onprem_quota_heading: string;
   organization_email: string;
   organization_name: string;

src/packages/frontend/project/call-to-support.tsx

@@ -87,7 +87,7 @@ export function CallToSupport({ onClose }: { onClose? }) {
       closable={onClose != null}
       onClose={onClose}
       banner
-      type="info"
+      type="warning"
       showIcon={false}
       message={VERSIONS.blaec}
     />

src/packages/frontend/project/settings/quota-editor/admin-quotas.tsx

@@ -119,7 +119,9 @@ export default function AdminQuotas({ project_id, style }: Props) {
       style={style}
       title={
         <>
-          <Icon name="user-plus" /> Admin Quota Editor
+          <h4>
+            <Icon name="user-plus" /> Admin Quota Editor
+          </h4>
           <span style={{ margin: "0 15px", float: "right" }}>
             {editing && (
               <>

src/packages/frontend/project/settings/upgrade-usage.tsx

@@ -19,14 +19,11 @@ import {
   Title,
   UpgradeAdjustor,
 } from "@cocalc/frontend/components";
-import { HelpEmailLink } from "@cocalc/frontend/customize";
-import { ShowSupportLink } from "@cocalc/frontend/support";
 import { ProjectsActions } from "@cocalc/frontend/todo-types";
 import { ROOT } from "@cocalc/util/consts/dedicated";
 import { KUCALC_DISABLED } from "@cocalc/util/db-schema/site-defaults";
 import { is_zero_map, plural, round2, to_human_list } from "@cocalc/util/misc";
 import { PROJECT_UPGRADES } from "@cocalc/util/schema";
-import { COLORS } from "@cocalc/util/theme";
 import {
   DedicatedDisk,
   DedicatedResources,
@@ -43,7 +40,6 @@ import PayAsYouGoQuotaEditor from "./quota-editor/pay-as-you-go";
 import { RunQuota } from "./run-quota";
 import { SiteLicense } from "./site-license";
 import { Project } from "./types";
-import { URLBox } from "./url-box";
 
 const UPGRADE_BUTTON_STYLE: CSS = {
   paddingBottom: "15px",
@@ -75,7 +71,6 @@ export const UpgradeUsage: React.FC<Props> = React.memo(
     dedicated_resources,
     mode,
   }: Readonly<Props>) => {
-    const isFlyout = mode === "flyout";
     const actions: ProjectsActions = useActions("projects");
     const project_actions = useActions({ project_id });
     const account_groups: List<string> =
@@ -358,40 +353,6 @@ export const UpgradeUsage: React.FC<Props> = React.memo(
       );
     }
 
-    function render_support(): Rendered {
-      if (!is_commercial) return; // don't render if not commercial
-      return (
-        <>
-          <hr />
-          <Paragraph type="secondary">
-            If you have any questions about upgrading a project, create a{" "}
-            <ShowSupportLink />
-            {isFlyout ? (
-              <>
-                , or email <HelpEmailLink /> and mention the project id:{" "}
-                <Paragraph
-                  style={{
-                    display: "inline",
-                    color: COLORS.GRAY,
-                    fontWeight: "bold",
-                  }}
-                  copyable={{ text: project_id }}
-                >
-                  {project_id}
-                </Paragraph>
-                .
-              </>
-            ) : (
-              <>
-                , or email <HelpEmailLink /> and include the following URL:
-                <URLBox />
-              </>
-            )}
-          </Paragraph>
-        </>
-      );
-    }
-
     function render_site_license(): Rendered {
       // site licenses are also used in on-prem setups to tweak project quotas
       if (!in_kucalc) return;
@@ -421,11 +382,10 @@ export const UpgradeUsage: React.FC<Props> = React.memo(
         </Paragraph>
         {render_run_quota()}
         {render_upgrades_button()}
+        {render_site_license()}
         {renderQuotaEditor()}
         {render_dedicated_disks()}
         {render_gpu()}
-        {render_site_license()}
-        {render_support()}
       </div>
     );
   },

src/packages/frontend/projects/create-project.tsx

@@ -39,7 +39,7 @@ import track from "@cocalc/frontend/user-tracking";
 
 const TOGGLE_STYLE: CSS = { margin: "10px 0" } as const;
 const TOGGLE_BUTTON_STYLE: CSS = { padding: "0" } as const;
-const CARD_STYLE: CSS = { marginTop: "10px", marginBottom: "10px" } as const;
+const CARD_STYLE: CSS = { margin: "10px 0" } as const;
 
 interface Props {
   start_in_edit_mode?: boolean;
@@ -285,12 +285,12 @@ export const NewProjectCreator: React.FC<Props> = ({
       <Card
         size="small"
         title={
-          <>
+          <h4>
             <div style={{ float: "right" }}>
               <BuyLicenseForProject />
             </div>
             <Icon name="key" /> Select License
-          </>
+          </h4>
         }
         style={CARD_STYLE}
       >
@@ -299,6 +299,7 @@ export const NewProjectCreator: React.FC<Props> = ({
           confirmLabel={"Add this license"}
           onChange={addSiteLicense}
           requireLicense
+          requireMessage={`A license is required to create additional projects.`}
         />
       </Card>
     );

src/packages/frontend/site-licenses/select-license.tsx

@@ -37,6 +37,7 @@ interface Props {
   extraButtons?: ReactNode;
   requireValid?: boolean;
   requireLicense?: boolean;
+  requireMessage?: ReactNode;
 }
 
 export default function SelectLicense(props: Props) {
@@ -53,6 +54,7 @@ export default function SelectLicense(props: Props) {
     extraButtons,
     requireValid,
     requireLicense,
+    requireMessage = "A license is required.",
   } = props;
   const isBlurredRef = useRef<boolean>(true);
   const [licenseId, setLicenseId] = useState<string>(defaultLicenseId ?? "");
@@ -214,9 +216,9 @@ export default function SelectLicense(props: Props) {
         {requireLicense && !licenseId ? (
           <Alert
             style={{ marginTop: "10px" }}
-            type="info"
+            type="warning"
             showIcon
-            message={"A license is required."}
+            message={requireMessage}
             description={
               <div>
                 {showCall ? (