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/dashboard/Dashboard.tsx

@@ -136,7 +136,8 @@ class Dashboard extends Component<PropsType, StateType> {
 
     if (this.props.isAuthorized("cluster", "", ["get", "create"])) {
       if (
-        this.context.usage.current.clusters < this.context.usage.limit.clusters
+        this.context?.usage?.current?.clusters <
+        this.context?.usage?.limit?.clusters
       ) {
         tabOptions.push({ label: "Create a Cluster", value: "create-cluster" });
       }

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

@@ -5,7 +5,7 @@ import { Context } from "shared/Context";
 
 function BillingPage() {
   const [customerToken, setCustomerToken] = useState("");
-  const { currentProject, setCurrentError } = useContext(Context);
+  const { currentProject, setCurrentError, queryUsage } = useContext(Context);
 
   useEffect(() => {
     let isSubscripted = true;
@@ -22,6 +22,7 @@ function BillingPage() {
       });
     return () => {
       isSubscripted = false;
+      queryUsage();
     };
   }, [currentProject?.id]);
 

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

@@ -37,6 +37,26 @@ class ProjectSettings extends Component<PropsType, StateType> {
         this.setState({ currentTab: "manage-access" });
       }
     }
+    if (
+      this.context?.hasBillingEnabled &&
+      !this.state.tabOptions.find((t) => t.value === "billing")
+    ) {
+      const tabOptions = this.state.tabOptions;
+      tabOptions.splice(1, 0, { value: "billing", label: "Billing" });
+      this.setState({ tabOptions });
+      return;
+    }
+
+    if (
+      !this.context?.hasBillingEnabled &&
+      this.state.tabOptions.find((t) => t.value === "billing")
+    ) {
+      const tabOptions = this.state.tabOptions;
+      const billingIndex = this.state.tabOptions.findIndex(
+        (t) => t.value === "billing"
+      );
+      tabOptions.splice(billingIndex, 1);
+    }
   }
 
   componentDidMount() {

dashboard/src/shared/Context.tsx

@@ -9,6 +9,7 @@ import {
 } from "shared/types";
 
 import { pushQueryParams } from "shared/routing";
+import api from "./api";
 
 const Context = React.createContext<Partial<ContextProps>>(null);
 
@@ -56,6 +57,7 @@ export interface GlobalContextType {
   setHasBillingEnabled: (isBillingEnabled: boolean) => void;
   usage: UsageData;
   setUsage: (usage: UsageData) => void;
+  queryUsage: (retry?: number) => Promise<void>;
 }
 
 /**
@@ -158,10 +160,25 @@ class ContextProvider extends Component<PropsType, StateType> {
     setUsage: (usage: UsageData) => {
       this.setState({ usage });
     },
+    queryUsage: async (retry: number = 0) => {
+      api
+        .getUsage("<token>", {}, { project_id: this.state?.currentProject?.id })
+        .then((res) => {
+          if (JSON.stringify(res.data) !== JSON.stringify(this.state.usage)) {
+            this.state.setUsage(res.data);
+          } else {
+            if (retry < 10) {
+              setTimeout(() => {
+                this.state.queryUsage(retry + 1);
+              }, 1000);
+            }
+          }
+        });
+    },
   };
 
   render() {
-    return <Provider value={this.state}>{this.props.children}</Provider>;
+    return <Provider value={{ ...this.state }}>{this.props.children}</Provider>;
   }
 }
 

dashboard/src/shared/types.tsx

@@ -302,6 +302,7 @@ export interface ContextProps {
   setHasBillingEnabled: (isBillingEnabled: boolean) => void;
   usage: UsageData;
   setUsage: (usage: UsageData) => void;
+  queryUsage: () => Promise<void>;
 }
 
 export enum JobStatusType {