[dashboard] Show BillingMode.teamNames on billing and admin pages

Author: geropl

components/dashboard/src/admin/Property.tsx

@@ -12,9 +12,9 @@ function Property(p: {
     actions?: { label: string; onClick: () => void }[];
 }) {
     return (
-        <div className="flex flex-col w-4/12 truncate">
-            <div className="text-base text-gray-500 truncate">{p.name}</div>
-            <div className="mr-3 text-lg text-gray-600 font-semibold truncate">{p.children}</div>
+        <div className="flex flex-col w-4/12">
+            <div className="text-base text-gray-500">{p.name}</div>
+            <div className="mr-3 text-lg text-gray-600 font-semibold">{p.children}</div>
             {(p.actions || []).map((a) => (
                 <div
                     className="cursor-pointer text-sm text-blue-400 dark:text-blue-600 hover:text-blue-600 dark:hover:text-blue-400 truncate"

components/dashboard/src/admin/UserDetail.tsx

@@ -24,6 +24,8 @@ import Property from "./Property";
 import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
 import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
+import CaretDown from "../icons/CaretDown.svg";
+import ContextMenu from "../components/ContextMenu";
 
 export default function UserDetail(p: { user: User }) {
     const [activity, setActivity] = useState(false);
@@ -147,7 +149,7 @@ export default function UserDetail(p: { user: User }) {
             >
                 {isStudent === undefined ? "---" : isStudent ? "Enabled" : "Disabled"}
             </Property>,
-            <Property name="BillingMode">{billingMode?.mode || "---"}</Property>,
+            renderBillingModeProperty(billingMode),
         ];
 
         switch (billingMode?.mode) {
@@ -328,6 +330,36 @@ export default function UserDetail(p: { user: User }) {
     );
 }
 
+function renderBillingModeProperty(billingMode?: BillingMode): JSX.Element {
+    const text = billingMode?.mode || "---";
+
+    let blockingTeamNames = [];
+    if (billingMode?.mode === "chargebee" && !!billingMode.teamNames && !billingMode.canUpgradeToUBB) {
+        const itemStyle = "text-gray-400 dark:text-gray-500 text-left font-normal";
+        for (const teamName of billingMode.teamNames) {
+            blockingTeamNames.push({ title: teamName, customFontStyle: itemStyle });
+        }
+    }
+    return (
+        <Property name="BillingMode">
+            <>
+                {text}
+                {blockingTeamNames.length > 0 && (
+                    <ContextMenu
+                        menuEntries={blockingTeamNames}
+                        customClasses="w-64 max-h-48 overflow-scroll mx-auto left-0 right-0"
+                    >
+                        <p className="flex justify-left text-gitpod-red">
+                            <span>UBP blocked by:</span>
+                            <img className="m-2" src={CaretDown} />
+                        </p>
+                    </ContextMenu>
+                )}
+            </>
+        </Property>
+    );
+}
+
 function Label(p: { text: string; color: string }) {
     return (
         <div className={`ml-3 text-sm text-${p.color}-600 truncate bg-${p.color}-100 px-1.5 py-0.5 rounded-md my-auto`}>

components/dashboard/src/settings/Plans.tsx

@@ -711,6 +711,12 @@ export default function () {
                     </div>
                 )}
                 <div className="mt-4 flex justify-center space-x-3 2xl:space-x-7">{planCards}</div>
+                {assignedTs && userBillingMode?.mode === "chargebee" && !!userBillingMode.teamNames && (
+                    <Alert type="info" className="mt-10 mx-auto">
+                        <p>Assigned Team Seats</p>
+                        <ul>{userBillingMode.teamNames.join(", ")}</ul>
+                    </Alert>
+                )}
                 <InfoBox className="w-2/3 mt-14 mx-auto">
                     If you are interested in purchasing a plan for a team, purchase a Team plan with one centralized
                     billing.{" "}