Vpc overlapping cidr (#4353)

Author: Feroze Mohideen

dashboard/src/components/porter/Error.tsx

@@ -30,17 +30,17 @@ export const Error: React.FC<Props> = ({
         <i className="material-icons">error_outline</i>
         <Block>
           <Text color={"#ff385d"}>Error: {message}</Text>
+          <Spacer y={0.5} />
+          {metadata &&
+            Object.entries(metadata).map(([key, value]) => (
+              <div key={key}>
+                <ErrorMessageLabel>{key}:</ErrorMessageLabel>
+                <ErrorMessageContent>{value}</ErrorMessageContent>
+              </div>
+            ))}
           {ctaText && (errorModalContents != null || ctaOnClick != null) && (
             <>
               <Spacer y={0.5} />
-              {metadata &&
-                Object.entries(metadata).map(([key, value]) => (
-                  <div key={key}>
-                    <ErrorMessageLabel>{key}:</ErrorMessageLabel>
-                    <ErrorMessageContent>{value}</ErrorMessageContent>
-                  </div>
-                ))}
-              <Spacer y={0.5} />
               <Cta
                 onClick={() => {
                   errorModalContents ? setErrorModalOpen(true) : ctaOnClick?.();

dashboard/src/lib/clusters/constants.ts

@@ -1216,6 +1216,10 @@ const SUPPORTED_AWS_PREFLIGHT_CHECKS: PreflightCheck[] = [
     displayName: "vCPU availability",
     resolution: AWS_VCPUS_QUOTA_RESOLUTION,
   },
+  {
+    name: "cidrAvailability",
+    displayName: "CIDR availability",
+  },
 ];
 
 const SUPPORTED_AZURE_PREFLIGHT_CHECKS: PreflightCheck[] = [

dashboard/src/main/home/infrastructure-dashboard/modals/PreflightChecksModal.tsx

@@ -6,6 +6,7 @@ import Loading from "components/Loading";
 import { Error as ErrorComponent } from "components/porter/Error";
 import Expandable from "components/porter/Expandable";
 import Modal from "components/porter/Modal";
+import ShowIntercomButton from "components/porter/ShowIntercomButton";
 import Spacer from "components/porter/Spacer";
 import StatusDot from "components/porter/StatusDot";
 import Text from "components/porter/Text";
@@ -93,13 +94,21 @@ const PreflightChecksModal: React.FC<Props> = ({
           following issues or change your cluster configuration and try again.
         </Text>
         <Spacer y={1} />
-        {preflightChecks.map((pfc, idx) => (
-          <CheckItem
-            preflightCheck={pfc}
-            key={pfc.title}
-            preExpanded={idx === 0}
-          />
-        ))}
+        <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+          {preflightChecks.map((pfc, idx) => (
+            <CheckItem
+              preflightCheck={pfc}
+              key={pfc.title}
+              preExpanded={idx === 0}
+            />
+          ))}
+        </div>
+        <Spacer y={1} />
+        <ShowIntercomButton
+          message={"I need help resolving cluster preflight checks."}
+        >
+          Talk to support
+        </ShowIntercomButton>
       </AppearingDiv>
     </Modal>
   );