[dashboard] Add proper form submission and error validation to usage limit modal

Author: jankeromnes

components/dashboard/src/components/UsageBasedBillingConfig.tsx

@@ -20,6 +20,8 @@ import DropDown from "../components/DropDown";
 import Modal from "../components/Modal";
 import Alert from "./Alert";
 
+const BASE_USAGE_LIMIT_FOR_STRIPE_USERS = 1000;
+
 type PendingStripeSubscription = { pendingSince: number };
 
 interface Props {
@@ -92,13 +94,13 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
             setPendingStripeSubscription(pendingSubscription);
             window.localStorage.setItem(localStorageKey, JSON.stringify(pendingSubscription));
             try {
-                // Pick a good initial value for the Stripe usage limit (1000 * team_size)
+                // Pick a good initial value for the Stripe usage limit (base_limit * team_size)
                 // FIXME: Should we ask the customer to confirm or edit this default limit?
-                let limit = 1000;
+                let limit = BASE_USAGE_LIMIT_FOR_STRIPE_USERS;
                 const attrId = AttributionId.parse(attributionId);
                 if (attrId?.kind === "team") {
                     const members = await getGitpodService().server.getTeamMembers(attrId.teamId);
-                    limit = 1000 * members.length;
+                    limit = BASE_USAGE_LIMIT_FOR_STRIPE_USERS * members.length;
                 }
                 await getGitpodService().server.subscribeToStripe(attributionId, setupIntentId, limit);
                 const newLimit = await getGitpodService().server.getUsageLimit(attributionId);
@@ -409,7 +411,11 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
             )}
             {showUpdateLimitModal && (
                 <UpdateLimitModal
-                    minValue={AttributionId.parse(attributionId || "")?.kind === "user" ? 1000 : 0}
+                    minValue={
+                        AttributionId.parse(attributionId || "")?.kind === "user"
+                            ? BASE_USAGE_LIMIT_FOR_STRIPE_USERS
+                            : 0
+                    }
                     currentValue={usageLimit}
                     onClose={() => setShowUpdateLimitModal(false)}
                     onUpdate={(newLimit) => updateUsageLimit(newLimit)}
@@ -545,46 +551,59 @@ function UpdateLimitModal(props: {
     onClose: () => void;
     onUpdate: (newLimit: number) => {};
 }) {
+    const [error, setError] = useState<string>("");
     const [newLimit, setNewLimit] = useState<string | undefined>(
         typeof props.currentValue === "number" ? String(props.currentValue) : undefined,
     );
 
-    return (
-        <Modal visible={true} onClose={props.onClose}>
-            <h3 className="flex">Usage Limit</h3>
-            <div className="border-t border-b border-gray-200 dark:border-gray-700 -mx-6 px-6 py-4 flex flex-col">
-                <p className="pb-4 text-gray-500 text-base">Set usage limit in total credits per month.</p>
+    function onSubmit(event: React.FormEvent) {
+        event.preventDefault();
+        if (!newLimit) {
+            setError("Please specify a limit");
+            return;
+        }
+        const n = parseInt(newLimit, 10);
+        if (typeof n !== "number") {
+            setError("Please specify a limit that is a valid number");
+            return;
+        }
+        if (typeof props.minValue === "number" && n < props.minValue) {
+            setError(`Please specify a limit that is >= ${props.minValue}`);
+            return;
+        }
+        props.onUpdate(n);
+    }
 
-                <label className="font-medium">
-                    Credits
-                    <div className="w-full">
-                        <input
-                            type="number"
-                            min={props.minValue || 0}
-                            value={newLimit}
-                            className="rounded-md w-full truncate overflow-x-scroll pr-8"
-                            onChange={(e) => setNewLimit(e.target.value)}
-                        />
-                    </div>
-                </label>
-            </div>
-            <div className="flex justify-end mt-6 space-x-2">
-                <button
-                    className="secondary"
-                    onClick={() => {
-                        if (!newLimit) {
-                            return;
-                        }
-                        const n = parseInt(newLimit, 10);
-                        if (typeof n !== "number") {
-                            return;
-                        }
-                        props.onUpdate(n);
-                    }}
-                >
-                    Update
-                </button>
-            </div>
+    return (
+        <Modal visible={true} onClose={props.onClose} onEnter={() => false}>
+            <h3 className="mb-4">Usage Limit</h3>
+            <form onSubmit={onSubmit}>
+                <div className="border-t border-b border-gray-200 dark:border-gray-700 -mx-6 px-6 py-4 flex flex-col">
+                    <p className="pb-4 text-gray-500 text-base">Set usage limit in total credits per month.</p>
+                    {error && (
+                        <Alert type="error" className="-mt-2 mb-2">
+                            {error}
+                        </Alert>
+                    )}
+                    <label className="font-medium">
+                        Credits
+                        <div className="w-full">
+                            <input
+                                type="text"
+                                value={newLimit}
+                                className={`rounded-md w-full truncate overflow-x-scroll pr-8 ${error ? "error" : ""}`}
+                                onChange={(e) => {
+                                    setError("");
+                                    setNewLimit(e.target.value);
+                                }}
+                            />
+                        </div>
+                    </label>
+                </div>
+                <div className="flex justify-end mt-6 space-x-2">
+                    <button className="secondary">Update</button>
+                </div>
+            </form>
         </Modal>
     );
 }