Merge branch 'belanger/por-83-usage-enforcement' of https://github.com/porter-dev/porter into belanger/por-83-usage-enforcement

mergin

dashboard/src/main/home/Home.tsx

@@ -293,12 +293,22 @@ class Home extends Component<PropsType, StateType> {
     this.getMetadata();
   }
 
+  async checkIfProjectHasBilling(projectId: number) {
+    const res = await api.getHasBilling(
+      "<token>",
+      {},
+      { project_id: projectId }
+    );
+    this.context.setHasBillingEnabled(res.data?.has_billing);
+  }
+
   // TODO: Need to handle the following cases. Do a deep rearchitecture (Prov -> Dashboard?) if need be:
   // 1. Make sure clicking cluster in drawer shows cluster-dashboard
   // 2. Make sure switching projects shows appropriate initial view (dashboard || provisioner)
   // 3. Make sure initializing from URL (DO oauth) displays the appropriate initial view
   componentDidUpdate(prevProps: PropsType) {
     if (prevProps.currentProject?.id !== this.props.currentProject?.id) {
+      this.checkIfProjectHasBilling(this?.context?.currentProject?.id);
       api
         .getUsage(
           "<token>",

dashboard/src/main/home/project-settings/BillingPage.tsx

@@ -31,28 +31,28 @@ function BillingPage() {
         <PlanSelect
           theme={{
             base: {
-              customFont: 'Work Sans',
+              customFont: "Work Sans",
               fontFamily: '"Work Sans", sans-serif',
-              darkMode: 'on',
+              darkMode: "on",
               colors: {
-                primary: 'rgba(97, 111, 238, 0.8)',
-                secondary: 'rgb(103, 108, 124)',
-                danger: 'rgb(227, 54, 109)',
-                success: 'rgb(56, 168, 138)',
+                primary: "rgba(97, 111, 238, 0.8)",
+                secondary: "rgb(103, 108, 124)",
+                danger: "rgb(227, 54, 109)",
+                success: "rgb(56, 168, 138)",
               },
             },
             card: {
-              backgroundColor: 'rgb(38, 40, 47)',
-              boxShadow: 'rgb(0 0 0 / 33%) 0px 4px 15px 0px',
-              borderRadius: '8px',
-              border: '2px solid rgba(158, 180, 255, 0)',
+              backgroundColor: "rgb(38, 40, 47)",
+              boxShadow: "rgb(0 0 0 / 33%) 0px 4px 15px 0px",
+              borderRadius: "8px",
+              border: "2px solid rgba(158, 180, 255, 0)",
             },
             button: {
               base: {
-                boxShadow: 'rgb(0 0 0 / 19%) 0px 2px 5px 0px',
-                borderRadius: '5px',
-                fontSize: '14px',
-                fontWeight: '500',
+                boxShadow: "rgb(0 0 0 / 19%) 0px 2px 5px 0px",
+                borderRadius: "5px",
+                fontSize: "14px",
+                fontWeight: "500",
               },
             },
           }}

dashboard/src/main/home/project-settings/ProjectSettings.tsx

@@ -46,7 +46,7 @@ class ProjectSettings extends Component<PropsType, StateType> {
     tabOptions.push({ value: "manage-access", label: "Manage Access" });
 
     if (this.props.isAuthorized("settings", "", ["get", "delete"])) {
-      if (currentProject?.has_billing) {
+      if (this.context?.hasBillingEnabled) {
         tabOptions.push({
           value: "billing",
           label: "Billing",
@@ -73,7 +73,7 @@ class ProjectSettings extends Component<PropsType, StateType> {
 
     if (
       this.state.currentTab === "billing" &&
-      this.context.currentProject?.has_billing
+      this.context?.hasBillingEnabled
     ) {
       return <BillingPage />;
     }

dashboard/src/shared/Context.tsx

@@ -51,6 +51,8 @@ export interface GlobalContextType {
   clearContext: () => void;
   edition: "ee" | "ce";
   setEdition: (appVersion: string) => void;
+  hasBillingEnabled: boolean;
+  setHasBillingEnabled: (isBillingEnabled: boolean) => void;
 }
 
 /**
@@ -145,6 +147,10 @@ class ContextProvider extends Component<PropsType, StateType> {
         this.setState({ edition });
       }
     },
+    hasBillingEnabled: null,
+    setHasBillingEnabled: (isBillingEnabled: boolean) => {
+      this.setState({ hasBillingEnabled: isBillingEnabled });
+    },
   };
 
   render() {

dashboard/src/shared/api.tsx

@@ -1055,6 +1055,11 @@ const getCustomerToken = baseApi<{}, { project_id: number }>(
   ({ project_id }) => `/api/projects/${project_id}/billing/token`
 );
 
+const getHasBilling = baseApi<{}, { project_id: number }>(
+  "GET",
+  ({ project_id }) => `/api/projects/${project_id}/billing`
+);
+
 // Bundle export to allow default api import (api.<method> is more readable)
 export default {
   checkAuth,
@@ -1162,4 +1167,5 @@ export default {
   createWebhookToken,
   getUsage,
   getCustomerToken,
+  getHasBilling,
 };

dashboard/src/shared/types.tsx

@@ -298,6 +298,8 @@ export interface ContextProps {
   clearContext: () => void;
   edition: "ee" | "ce";
   setEdition: (appVersion: string) => void;
+  hasBillingEnabled: boolean;
+  setHasBillingEnabled: (isBillingEnabled: boolean) => void;
 }
 
 export enum JobStatusType {