Add beta label and feedback link on the usage page

Author: gtsiolis

components/dashboard/src/components/PillLabel.tsx

@@ -17,7 +17,7 @@
 export default function PillLabel(props: { children?: React.ReactNode; type?: "info" | "warn"; className?: string }) {
     const infoStyle = "bg-blue-50 text-blue-500 dark:bg-blue-500 dark:text-blue-100";
     const warnStyle = "bg-orange-100 text-orange-700 dark:bg-orange-600 dark:text-orange-100";
-    const style = `px-3 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle} ${
+    const style = `px-2 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle} ${
         props.className
     }`;
     return <span className={style}>{props.children}</span>;

components/dashboard/src/components/UsageView.tsx

@@ -24,6 +24,7 @@ import { ReactComponent as UsageIcon } from "../images/usage-default.svg";
 import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 import { toRemoteURL } from "../projects/render-utils";
 import { WorkspaceType } from "@gitpod/gitpod-protocol";
+import PillLabel from "./PillLabel";
 
 interface UsageViewProps {
     attributionId: AttributionId;
@@ -169,11 +170,38 @@ function UsageView({ attributionId, billingMode }: UsageViewProps) {
                                     {getBillingHistory()}
                                 </div>
                                 {!isLoading && (
-                                    <div className="flex flex-col truncate">
-                                        <div className="text-base text-gray-500">Total usage</div>
-                                        <div className="flex text-lg text-gray-600 font-semibold">
-                                            <CreditsSvg className="my-auto mr-1" />
-                                            <span>{Intl.NumberFormat().format(totalCreditsUsed)} Credits</span>
+                                    <div>
+                                        <div className="flex flex-col truncate">
+                                            <div className="text-base text-gray-500">Total usage</div>
+                                            <div className="flex text-lg text-gray-600 font-semibold">
+                                                <CreditsSvg className="my-auto mr-1" />
+                                                <span>{totalCreditsUsed} Credits</span>
+                                            </div>
+                                        </div>
+                                        <div className="flex flex-col truncate mt-8 text-sm">
+                                            <div className="text-gray-400 dark:text-gray-500">
+                                                This feature is in{" "}
+                                                <PillLabel
+                                                    type="warn"
+                                                    className="font-semibold mt-2 ml-0 py-0.5 px-1 self-center"
+                                                >
+                                                    <span className="text-xs">Beta</span>
+                                                </PillLabel>
+                                                <br />
+                                                <a
+                                                    href="https://www.gitpod.io/docs/references/gitpod-releases"
+                                                    className="gp-link"
+                                                >
+                                                    Learn more
+                                                </a>
+                                                &nbsp;·&nbsp;
+                                                <a
+                                                    href="https://github.com/gitpod-io/gitpod/issues/12636"
+                                                    className="gp-link"
+                                                >
+                                                    Send feedback
+                                                </a>
+                                            </div>
                                         </div>
                                     </div>
                                 )}