Applied styles

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -106,15 +106,24 @@ class Dashboard extends Component<PropsType, StateType> {
   renderTabContents = () => {
     if (this.currentTab() === "provisioner") {
       return <Provisioner setRefreshClusters={this.props.setRefreshClusters} />;
-    } else if (
-      this.currentTab() === "create-cluster" &&
-      this.context.usage.current.clusters < this.context.usage.limit.clusters
-    ) {
+    } else if (this.currentTab() === "create-cluster") {
+      let helperText = "Create a cluster to link to this project";
+      let helperIcon = "info";
+      let helperColor = "white";
+      if (
+        this.context.hasBillingEnabled &&
+        this.context.usage.current.clusters >= this.context.usage.limit.clusters
+      ) {
+        helperText =
+          "You need to update your billing to provision or connect a new cluster";
+        helperIcon = "warning";
+        helperColor = "#f5cb42";
+      }
       return (
         <>
-          <Banner>
-            <i className="material-icons">info</i>
-            Create a cluster to link to this project.
+          <Banner color={helperColor}>
+            <i className="material-icons">{helperIcon}</i>
+            {helperText}
           </Banner>
           <ProvisionerSettings infras={this.state.infras} provisioner={true} />
         </>
@@ -135,12 +144,7 @@ class Dashboard extends Component<PropsType, StateType> {
     let tabOptions = [{ label: "Project Overview", value: "overview" }];
 
     if (this.props.isAuthorized("cluster", "", ["get", "create"])) {
-      if (
-        this.context?.usage?.current?.clusters <
-        this.context?.usage?.limit?.clusters
-      ) {
-        tabOptions.push({ label: "Create a Cluster", value: "create-cluster" });
-      }
+      tabOptions.push({ label: "Create a Cluster", value: "create-cluster" });
     }
 
     tabOptions.push({ label: "Provisioner Status", value: "provisioner" });
@@ -220,7 +224,7 @@ const DashboardWrapper = styled.div`
   padding-bottom: 100px;
 `;
 
-const Banner = styled.div`
+const Banner = styled.div<{ color: string }>`
   height: 40px;
   width: 100%;
   margin: 5px 0 30px;
@@ -230,6 +234,7 @@ const Banner = styled.div`
   padding-left: 15px;
   align-items: center;
   background: #ffffff11;
+  color: ${(props) => props.color};
   > i {
     margin-right: 10px;
     font-size: 18px;

dashboard/src/main/home/provisioner/ProvisionerSettings.tsx

@@ -1,4 +1,10 @@
-import React, { Component, useContext, useEffect, useState } from "react";
+import React, {
+  Component,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import styled from "styled-components";
 
 import { Context } from "shared/Context";
@@ -32,7 +38,7 @@ const ProvisionerSettings: React.FC<Props> = ({
   const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
   const [highlightCosts, setHighlightCosts] = useState(true);
 
-  const { setCurrentError } = useContext(Context);
+  const { setCurrentError, usage, hasBillingEnabled } = useContext(Context);
   const location = useLocation();
   const history = useHistory();
 
@@ -42,6 +48,13 @@ const ProvisionerSettings: React.FC<Props> = ({
     }
   }, [provisioner]);
 
+  const isUsageExceeded = useMemo(() => {
+    if (!hasBillingEnabled) {
+      return false;
+    }
+    return usage.current.clusters >= usage.limit.clusters;
+  }, [usage]);
+
   const handleSelectProvider = (newSelectedProvider: string) => {
     if (!isInNewProject) {
       setSelectedProvider(newSelectedProvider);
@@ -228,9 +241,12 @@ const ProvisionerSettings: React.FC<Props> = ({
             return (
               <Block
                 key={i}
+                disabled={isUsageExceeded}
                 onClick={() => {
-                  handleSelectProvider(provider);
-                  setHighlightCosts(false);
+                  if (!isUsageExceeded) {
+                    handleSelectProvider(provider);
+                    setHighlightCosts(false);
+                  }
                 }}
               >
                 <Icon src={providerInfo.icon} />
@@ -238,8 +254,10 @@ const ProvisionerSettings: React.FC<Props> = ({
                 <CostSection
                   onClick={(e) => {
                     e.stopPropagation();
-                    handleSelectProvider(provider);
-                    setHighlightCosts(true);
+                    if (!isUsageExceeded) {
+                      handleSelectProvider(provider);
+                      setHighlightCosts(true);
+                    }
                   }}
                 >
                   {/*
@@ -341,10 +359,10 @@ const Block = styled.div<{ disabled?: boolean }>`
   font-weight: 500;
   padding: 3px 0px 5px;
   flex-direction: column;
-  align-item: center;
+  align-items: center;
   justify-content: space-between;
   height: 170px;
-  cursor: ${(props) => (props.disabled ? "" : "pointer")};
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
   color: #ffffff;
   position: relative;
   background: #26282f;
@@ -352,6 +370,7 @@ const Block = styled.div<{ disabled?: boolean }>`
   :hover {
     background: ${(props) => (props.disabled ? "" : "#ffffff11")};
   }
+  filter: ${({ disabled }) => (disabled ? "grayscale(1)" : "")};
 
   animation: fadeIn 0.3s 0s;
   @keyframes fadeIn {