Merge pull request #8075 from sagemathinc/fix-ServiceTag-8074

ServiceTag: bandaid for #8074

src/packages/frontend/purchases/service.tsx

@@ -5,10 +5,15 @@ Show tag for each service
 */
 
 import { Tag, Tooltip } from "antd";
-import { Service, QUOTA_SPEC } from "@cocalc/util/db-schema/purchase-quotas";
-import { AutoBalanceModal } from "./auto-balance";
 import { useState } from "react";
+
 import Next from "@cocalc/frontend/components/next";
+import {
+  QUOTA_SPEC,
+  Service,
+  Spec,
+} from "@cocalc/util/db-schema/purchase-quotas";
+import { AutoBalanceModal } from "./auto-balance";
 
 export default function ServiceTag({
   service,
@@ -20,7 +25,15 @@ export default function ServiceTag({
   const [showAutoCreditModal, setShowAutoCreditModal] =
     useState<boolean>(false);
 
-  const spec = QUOTA_SPEC[service];
+  // safeguard for https://github.com/sagemathinc/cocalc/issues/8074
+  const spec = QUOTA_SPEC[service] satisfies Spec as Spec | null;
+
+  if (spec == null) {
+    console.warn(
+      `ServiceTag: service=${service} has no known Spec for the quota.`,
+    );
+  }
+
   let tag = (
     <Tag
       style={{
@@ -48,10 +61,12 @@ export default function ServiceTag({
       )}
     </Tag>
   );
+
   if (service == "voucher") {
     tag = <Next href={"vouchers"}>{tag}</Next>;
   }
-  if (spec.description) {
+
+  if (spec?.description) {
     return <Tooltip title={spec.description}>{tag}</Tooltip>;
   } else {
     return tag;

src/packages/util/db-schema/purchase-quotas.ts

@@ -12,7 +12,7 @@ export type { Service };
 const SERVICE_CATEGORIES = ["money", "compute", "license", "ai"];
 type ServiceCategory = (typeof SERVICE_CATEGORIES)[number];
 
-interface Spec {
+export interface Spec {
   display: string; // what to show user to describe this service
   noSet?: boolean; // if true, then no spend limits are set for this.
   color: string;